/**
 * 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                                                  */
/* ---------------------------------------------------------------- */

/*
 * 🚨 THE CARD DECLARES ITS OWN TEXT COLOUR. IT MUST NOT INHERIT.
 * The card sets its own background, so the text on top of it has to be
 * ours too or the pair is decided by two different owners. Inheriting
 * looked fine for a year and then rendered the whole card in a theme's
 * link-red on a tagDiv shop -- while the same card looked correct in that
 * theme's designer preview, because the preview does not load the rule
 * that colours it. A component whose legibility depends on which
 * rendering context it is in is not styled, it is lucky.
 *
 * ⚠ SET ON THE CHILDREN, NOT JUST THE CONTAINER. Inheritance loses to
 * ANY direct rule on the element, so a theme's `.td-post-content p` beats
 * a colour set on `.aieo-pr` alone. The two-class selectors below are
 * specificity (0,2,0) and outrank the (0,1,1) shape themes typically use.
 */
.aieo-pr {
	box-sizing: border-box;
	margin: 16px 0;
	padding: 16px 18px;
	background: var(--aieo-pr-bg, #f8f9fa);
	color: var(--aieo-pr-text-color, #50575e);
	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 .aieo-pr__title,
.aieo-pr-basket .aieo-pr-basket__title {
	margin: 0 0 6px;
	font-size: var(--aieo-pr-title-size, 16px);
	font-weight: 600;
	line-height: 1.3;
	color: var(--aieo-pr-title-color, #1d2327);
}

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

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

.aieo-pr .aieo-pr__field label {
	display: block;
	margin: 0 0 3px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--aieo-pr-text-color, #50575e);
	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;
	cursor: pointer;
}

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

/*
 * ⚠ THE RESERVED LINE COLLAPSES WHEN THERE IS NOTHING TO SAY.
 * The min-height above exists so an arriving message does not shove the
 * layout down. Left unconditional it also reserved 26px under EVERY card,
 * bar and panel for a message that in most sessions never comes -- which
 * is what read as a band of dead space at the bottom of the quote basket.
 * :empty keeps the anti-shift reservation for the case it was written for
 * and gives the space back the rest of the time. The JS writes textContent,
 * so an unused element is genuinely empty and not whitespace.
 */
.aieo-pr__msg:empty,
.aieo-pr-add__msg:empty,
.aieo-pr-basket__msg:empty {
	display: none;
	margin: 0;
	min-height: 0;
}

.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);
}

/*
 * ⚠ THE SAME BOX AS THE BUTTON BESIDE IT. These two sit side by side in
 * one bar and were styled as unrelated controls: 10px/18px and 14px against
 * 6px/12px and 13px. Different heights, different text insets, and so the
 * gap on the left of the first never matched the gap on the right of the
 * last. Matching the padding and size is what makes the bar symmetrical;
 * the outline instead of a fill is the only difference that carries
 * meaning, which is secondary versus primary.
 */
.aieo-pr-add__review {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border: 1px solid var(--aieo-pr-border, #e9ecef);
	border-radius: var(--aieo-pr-btn-border-r, 4px);
	background: transparent;
	color: inherit;
	font-size: var(--aieo-pr-text-size, 14px);
	font-weight: 500;
	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,
	.aieo-pr-add__review {
		width: 100%;
		text-align: center;
	}

	/*
	 * ⚠ The review button was left out of the rule above, so on a phone the
	 * add button spanned the bar and the one under it sat stranded at about a
	 * third of the width. It is inline-flex because of the count badge, so
	 * width alone does not centre it -- the content needs centring too.
	 */
	.aieo-pr-add__review {
		justify-content: center;
	}
}

/*
 * 🚨 THE OTHER TWO CONTAINERS OWN THEIR TEXT TOO.
 * The card was given a colour and the bar and basket were not, so they went
 * on inheriting the theme's -- and because almost every child in them is
 * `color: inherit`, one missing declaration on the container tinted the
 * whole component. Same bug as the card, found twice, so it is fixed for
 * all three at once rather than a third time later.
 *
 * The doubled class is (0,2,0) on the containers and (0,3,0) on the
 * controls. Themes style bare `button` and `a` aggressively -- that is what
 * made the in-quote pill pink on a tagDiv shop -- and a component dropped
 * into an unknown theme has to out-specify that without resorting to
 * !important, which would take the choice away from the operator.
 */
.aieo-pr-add.aieo-pr-add,
.aieo-pr-basket.aieo-pr-basket {
	color: var(--aieo-pr-text-color, #50575e);
}

.aieo-pr-add.aieo-pr-add .aieo-pr-add__review,
.aieo-pr-add.aieo-pr-add .aieo-pr-add__btn.is-in {
	background: transparent;
	color: var(--aieo-pr-text-color, #50575e);
}

.aieo-pr-basket.aieo-pr-basket .aieo-pr-basket__body a {
	color: var(--aieo-pr-title-color, #1d2327);
}

.aieo-pr-basket.aieo-pr-basket .aieo-pr-basket__remove,
.aieo-pr-basket.aieo-pr-basket .aieo-pr-basket__close {
	color: var(--aieo-pr-text-color, #50575e);
}

/*
 * 🚨 FULL WIDTH WHENEVER THEY WRAP, AT ANY VIEWPORT.
 * A media query cannot answer "did these two buttons end up on separate
 * rows": that depends on the width of the CONTAINER, and this bar sits in a
 * product summary column whose width has nothing to do with the viewport --
 * it wrapped on a full-size desktop. Flexbox answers it natively. With
 * `flex: 1 1 220px` the two share one row while there is room for both, and
 * the moment there is not they wrap and each grows to fill its own row.
 * No breakpoint to pick, and it is right inside a narrow column, a sidebar
 * or a phone without any of them being special-cased.
 *
 * This also closes the dead space on the right that the natural-width
 * buttons left behind.
 */
.aieo-pr-add.aieo-pr-add .aieo-pr-add__btn,
.aieo-pr-add.aieo-pr-add .aieo-pr-add__review {
	flex: 1 1 220px;
	justify-content: center;
	text-align: center;
}