/**
 * Product Requests — storefront styles.
 *
 * Every colour and size here reads a --aieo-pr-* variable emitted by
 * AIEO_Product_Request_Form::appearance_css(), with a literal fallback, so a
 * site that has never opened the appearance settings still looks right and a
 * site that has looks like the operator asked for.
 *
 * BUTTON colours deliberately fall through to the master --aieo-btn-* tokens
 * (Tools → Button Styles) when the operator has not set them here. That is the
 * same "empty value means inherit" contract the waitlist uses, so the quote
 * button matches every other button on the shop by default.
 *
 * The [hidden] rules below are not decoration. The card ships hidden and the
 * script reveals it, which is what lets one cached page serve every visitor;
 * a theme that sets `display:block` on the container would defeat that, so the
 * hidden state is asserted with !important.
 */

.aieo-pr[hidden],
.aieo-pr-add[hidden],
.aieo-pr-basket[hidden],
.aieo-pr-add__review[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------- */
/* The request card                                                  */
/* ---------------------------------------------------------------- */

.aieo-pr {
	box-sizing: border-box;
	margin: 16px 0;
	padding: 16px 18px;
	background: var(--aieo-pr-bg, #f8f9fa);
	border: var(--aieo-pr-border-w, 1px) solid var(--aieo-pr-border, #e9ecef);
	border-radius: var(--aieo-pr-border-r, 8px);
	font-size: var(--aieo-pr-text-size, 14px);
	line-height: 1.5;
}

.aieo-pr *,
.aieo-pr-basket * {
	box-sizing: border-box;
}

.aieo-pr__title {
	margin: 0 0 6px;
	font-size: var(--aieo-pr-title-size, 16px);
	font-weight: 600;
	line-height: 1.3;
}

.aieo-pr__intro {
	margin: 0 0 12px;
	font-size: var(--aieo-pr-text-size, 14px);
	opacity: .8;
}

.aieo-pr__field {
	margin: 0 0 10px;
}

.aieo-pr__field label {
	display: block;
	margin: 0 0 3px;
	font-size: 12px;
	line-height: 1.3;
	opacity: .8;
}

.aieo-pr__field input[type="text"],
.aieo-pr__field input[type="email"],
.aieo-pr__field input[type="tel"],
.aieo-pr__field input[type="number"],
.aieo-pr__field textarea {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 4px;
	background: #fff;
	color: inherit;
	font-size: var(--aieo-pr-text-size, 14px);
	font-family: inherit;
}

.aieo-pr__field--qty input {
	max-width: 120px;
}

.aieo-pr__field textarea {
	resize: vertical;
	min-height: 70px;
}

/* THE COMPACT FORM THAT EXPANDS. Collapsed by default; the wrapper gains
   .is-expanded on the first focus or keystroke in the email field. Animated on
   max-height rather than display so the reveal does not jump the page under a
   thumb that is already moving. */
.aieo-pr--compact .aieo-pr__more {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .25s ease, opacity .2s ease;
}

.aieo-pr--compact.is-expanded .aieo-pr__more,
.aieo-pr--full .aieo-pr__more {
	max-height: 600px;
	opacity: 1;
}

.aieo-pr__consent {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 9px;
	margin: 4px 0 10px;
	font-size: 12px;
	line-height: 1.35;
}

.aieo-pr__consent > input {
	flex: 0 0 auto;
	margin: 0;
	width: 14px;
	height: 14px;
	cursor: pointer;
}

.aieo-pr__consent span {
	flex: 1 1 auto;
	min-width: 0;
}

/* The honeypot. Off-canvas, NOT display:none — some bots specifically skip
   inputs that are display:none, which is the one thing this field must not do. */
.aieo-pr__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.aieo-pr__submit,
.aieo-pr-add__btn,
.aieo-pr-basket__finish {
	display: inline-block;
	padding: 10px 18px;
	border-radius: var(--aieo-pr-btn-border-r, 4px);
	border: var(--aieo-pr-btn-border-w, 0) solid var(--aieo-pr-btn-border, #0073aa);
	background: var(--aieo-pr-btn-bg, #0073aa);
	color: var(--aieo-pr-btn-text, #fff);
	font-size: var(--aieo-pr-text-size, 14px);
	font-weight: 500;
	cursor: pointer;
	transition: opacity .15s ease;
}

.aieo-pr__submit:hover,
.aieo-pr-add__btn:hover,
.aieo-pr-basket__finish:hover {
	opacity: .88;
}

.aieo-pr__submit:disabled,
.aieo-pr-add__btn:disabled {
	opacity: .6;
	cursor: default;
}

.aieo-pr-add__btn.is-in {
	background: transparent;
	color: inherit;
	border: 1px solid var(--aieo-pr-border, #e9ecef);
	opacity: 1;
}

.aieo-pr__msg,
.aieo-pr-add__msg,
.aieo-pr-basket__msg {
	margin-top: 8px;
	min-height: 18px;
	font-size: 13px;
	line-height: 1.4;
}

.aieo-pr__msg.is-ok,
.aieo-pr-basket__msg.is-ok {
	color: #15803d;
}

.aieo-pr__msg.is-err,
.aieo-pr-add__msg.is-err,
.aieo-pr-basket__msg.is-err {
	color: #b91c1c;
}

/* ---------------------------------------------------------------- */
/* The add-to-quote prompt                                           */
/* ---------------------------------------------------------------- */

.aieo-pr-add {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 16px 0;
	padding: 14px 16px;
	background: var(--aieo-pr-bg, #f8f9fa);
	border: var(--aieo-pr-border-w, 1px) solid var(--aieo-pr-border, #e9ecef);
	border-radius: var(--aieo-pr-border-r, 8px);
	font-size: var(--aieo-pr-text-size, 14px);
}

.aieo-pr-add__review {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--aieo-pr-border, #e9ecef);
	border-radius: var(--aieo-pr-border-r, 8px);
	background: transparent;
	color: inherit;
	font-size: 13px;
	cursor: pointer;
}

.aieo-pr-add__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--aieo-pr-btn-bg, #0073aa);
	color: var(--aieo-pr-btn-text, #fff);
	font-size: 11px;
	font-weight: 700;
}

.aieo-pr-add__msg {
	flex: 1 0 100%;
}

/* ---------------------------------------------------------------- */
/* The review panel                                                  */
/* ---------------------------------------------------------------- */

.aieo-pr-basket {
	box-sizing: border-box;
	margin: 16px 0;
	padding: 14px 16px;
	background: var(--aieo-pr-bg, #f8f9fa);
	border: var(--aieo-pr-border-w, 1px) solid var(--aieo-pr-border, #e9ecef);
	border-radius: var(--aieo-pr-border-r, 8px);
	font-size: var(--aieo-pr-text-size, 14px);
}

.aieo-pr-basket__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.aieo-pr-basket__title {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--aieo-pr-title-size, 16px);
	font-weight: 600;
}

.aieo-pr-basket__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--aieo-pr-btn-bg, #0073aa);
	color: var(--aieo-pr-btn-text, #fff);
	font-size: 11px;
	font-weight: 700;
}

.aieo-pr-basket__close {
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	opacity: .6;
}

.aieo-pr-basket__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aieo-pr-basket__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--aieo-pr-border, #e9ecef);
}

.aieo-pr-basket__item:last-child {
	border-bottom: 0;
}

.aieo-pr-basket__item img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 4px;
	flex: 0 0 auto;
}

.aieo-pr-basket__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.aieo-pr-basket__body a {
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aieo-pr-basket__body a:hover {
	text-decoration: underline;
}

.aieo-pr-basket__qty {
	flex: 0 0 auto;
	font-size: 12px;
	opacity: .7;
}

.aieo-pr-basket__remove {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 12px;
	cursor: pointer;
	opacity: .6;
	text-decoration: underline;
}

.aieo-pr-basket__remove:hover {
	opacity: 1;
}

.aieo-pr-basket__empty {
	margin: 6px 0;
	font-size: 13px;
	opacity: .7;
}

.aieo-pr-basket__finish {
	margin-top: 10px;
}

@media (max-width: 600px) {
	.aieo-pr,
	.aieo-pr-add,
	.aieo-pr-basket {
		padding: 12px 13px;
	}

	.aieo-pr__submit,
	.aieo-pr-add__btn {
		width: 100%;
		text-align: center;
	}
}