/*!
 * SST PSA Back Order — checkout, cart and two-cart styling.
 *
 * Scoped entirely to this feature's own class names, so it cannot reach any
 * other checkout variant. sst-checkout-ab serves variant A, B or C to different
 * visitors, and this file has to look right in all three AND with that plugin
 * switched off entirely.
 *
 * Filename carries the revision. The CF Enterprise edge on this host ignores
 * query strings on static assets, so a new revision means a new FILENAME, not a
 * bumped ?ver — r1 -> r2 on 2026-09-04 (the two-cart banner and header link,
 * DESIGN.md §6.4), r2 -> r3 on 2026-09-07 (EC-7: the terms card and the refund
 * card move into the right rail, decisions 82-85).
 *
 * WHAT r3 CHANGED, AND THE ONE RULE IT NOW FOLLOWS.
 *
 * Until r3 the two checkout blocks rendered below both columns of the A/B grid,
 * where nothing styled them, so they wore a pink left rail of their own to look
 * deliberate. They now render in the right rail, as siblings of the order table,
 * the coupon panel, the points panel and the consent card — every one of which
 * sst-checkout-ab draws as a plain white card. A pink-railed block in that
 * column would read as an error state, so the rail is gone and the two blocks
 * are drawn as cards instead.
 *
 * THEY ARE DRAWN HERE, NOT THERE. sst-checkout-ab's card rule is a NAMED LIST of
 * selectors (variant-b.css:260-276) and this plugin must not edit that file, so
 * `.sst-bo-card` below repaints the same chrome out of the same CSS custom
 * properties. Every one of them is read WITH A FALLBACK: the tokens exist on
 * `body.sst-co-ab` in all three skins and in the base sheet
 * (checkout-ab.css:17-29, variant-a.css:56-94, variant-b.css:34-141,
 * variant-c.css:90-164), and the fallbacks are what the card looks like when the
 * A/B plugin is off and none of them is defined.
 *
 * The account gate is NOT one of these two. It renders above the form, in the
 * left column, on `woocommerce_before_checkout_form` — outside the rail and
 * outside the grid problem — so it keeps the rail it always had.
 */

.sst-backorder-account-gate {
	margin: 0 0 24px;
	padding: 16px 18px;
	border-left: 4px solid #9e2c5f;
	background: #fff5f9;
	font-size: 14px;
	line-height: 1.6;
}

.sst-backorder-account-gate h2 {
	margin: 0 0 8px;
	font-size: 16px;
}

.sst-backorder-account-gate p:last-child {
	margin-bottom: 0;
}

/* The two rail cards (r3) --------------------------------------------------- */

.sst-bo-card {
	box-sizing: border-box;
	/* NO WIDTH AND NO MIN-WIDTH. The rail is a grid track declared
	   `minmax( --co-rail-min, --co-rail )` (checkout-ab.css:54), and in variant B
	   that is 340-400 px between 1024 and 1279, 440-520 px from 1280
	   (variant-b.css:102/109 and :3218-3223), and the whole viewport below 1024
	   where the grid collapses to one column (checkout-ab.css:51). A card that
	   fixes either dimension overflows one of those three. `border-box` is what
	   keeps the padding inside the track rather than adding to it.

	   The 16 px bottom margin is a literal, not `var( --co-gap )`, even though
	   --co-gap is exactly 16 px in variant B (variant-b.css:101): that token
	   means the FORM-TO-RAIL GUTTER in variants A and C, where it is 56 px
	   (variant-a.css:94, variant-c.css:164). Reading it here would put 56 px
	   between the cards on two of the three skins. */
	margin: 0 0 16px;
	padding: var(--co-pad, 18px);
	border: 1px solid var(--co-rule, #e6e5dd);
	border-radius: var(--co-radius, 12px);
	background: var(--co-card, #fff);
	box-shadow: var(--co-shadow, 0 1px 2px rgba(18, 18, 18, 0.06));
	color: var(--co-ink, #15160f);
	font-size: var(--co-fs-body-s, 13.5px);
	line-height: 1.55;
}

.sst-bo-card h3 {
	margin: 0 0 10px;
	color: var(--co-ink, #15160f);
	font-size: var(--co-fs-h2, 16px);
	font-weight: 700;
	line-height: 1.3;
}

/* Back order terms ---------------------------------------------------------- */

.sst-backorder-consent__terms {
	margin: 0;
	padding-left: 17px;
	color: var(--co-mute, #565952);
}

.sst-backorder-consent__terms li {
	margin: 0 0 7px;
	/* Three long sentences in a column that is 340 px at its narrowest: an
	   unbreakable run (a translated compound, a pasted code) has to wrap rather
	   than push the card past the track. */
	overflow-wrap: anywhere;
}

.sst-backorder-consent__terms li:last-child {
	margin-bottom: 0;
}

/* The consent tick ----------------------------------------------------------
 *
 * The row itself is DELIBERATELY UNSTYLED HERE. It prints as a direct child of
 * `.sst-consent__boxes`, where sst-checkout-ab already draws it as a consent
 * card (variant-b.css:2456-2472) and lays out the label
 * (checkout-ab.css:307-334) — the same treatment the pre-order, discounted-item
 * and unboxing consents get, which is the entire point of moving it there.
 * Anything this file added would either lose to those rules or fight them.
 *
 * What is left is the fallback for a page with no A/B skin at all (the plugin
 * deactivated, or a variant that stops shipping the rule): without it the row
 * would inherit whatever the theme does to a bare `.form-row` and the box and
 * its sentence would not line up.
 *
 * EVERY SUCH FALLBACK IN THIS FILE IS SCOPED `body:not(.sst-co-ab)`. Specificity
 * arithmetic against a 163 KB skin is a bet, and losing it silently in one
 * direction leaves an unstyled control while losing it in the other overrides a
 * design decision that is not this plugin's to make. Asking whether the skin is
 * there at all is not a bet. */

.sst-backorder-consent__field {
	margin: 0;
	padding: 0;
}

body:not(.sst-co-ab) .sst-backorder-consent__field label.checkbox {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin: 0;
	line-height: 1.5;
	cursor: pointer;
}

body:not(.sst-co-ab) .sst-backorder-consent__field input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 2px 0 0;
}

.sst-backorder-points-note {
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.5;
	opacity: 0.85;
}

.sst-backorder-points-note p {
	margin: 0;
}

/* Refund destination --------------------------------------------------------
 *
 * `.sst-bo-refund-home` is the wrapper the server renders and the JS parks the
 * block in. It is given no box of its own on purpose — when the block has been
 * moved down beside the payment list the wrapper is left empty, and an empty
 * wrapper with padding or a margin would leave a gap in the rail where a card
 * used to be. */

.sst-bo-refund-home {
	margin: 0;
	padding: 0;
}

.sst-bo-refund[hidden] {
	display: none !important;
}

.sst-bo-refund__why {
	margin: 0;
	color: var(--co-mute, #565952);
}

.sst-bo-refund__choice {
	margin: 14px 0 4px;
	padding: 0;
	border: 0;
}

.sst-bo-refund__choice legend {
	padding: 0;
	margin: 0 0 8px;
	color: var(--co-ink, #15160f);
	font-weight: 700;
}

/* Two choices side by side where they fit, wrapping to two lines where they do
   not — inline-flex items in normal flow, so it is the label length and the
   track width together that decide, which is what has to decide when the labels
   are nine different translations. */
.sst-bo-refund__radio {
	display: inline-flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0 16px 8px 0;
	cursor: pointer;
}

.sst-bo-refund__radio input[type="radio"] {
	flex: 0 0 auto;
	margin: 2px 0 0;
}

.sst-bo-refund .form-row[hidden] {
	display: none !important;
}

.sst-bo-refund .form-row {
	margin: 0;
	padding: 10px 0 0;
}

/* Labels and inputs take the skin's own field styling where there is one; these
   two are the no-skin fallback, and they are what stops an 8-field bank form
   from rendering as browser-default boxes of three different widths. */
body:not(.sst-co-ab) .sst-bo-refund .form-row label {
	display: block;
	margin: 0 0 4px;
	color: var(--co-mute, #565952);
	font-size: var(--co-fs-small, 12.5px);
	font-weight: 600;
}

body:not(.sst-co-ab) .sst-bo-refund .form-row input[type="text"],
body:not(.sst-co-ab) .sst-bo-refund .form-row select {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

/* Below the minimum --------------------------------------------------------- */

.sst-bo-blocked {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ==========================================================================
   TWO CARTS — the banner and the header link (r2, DESIGN.md §6.4)

   A customer can be holding two carts at once and only ever sees one of them.
   Everything below exists to answer "which one am I looking at, and where is
   the other one" without them having to work it out from the contents. The
   back order palette is the same #9e2c5f the consent and refund blocks above
   already use, so the two carts read as different places and this one reads as
   the same feature as the rest of the checkout.
   ========================================================================== */

.sst-bo-banner {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	align-items: baseline;
	margin: 0 0 20px;
	padding: 13px 16px;
	border-left: 4px solid #9e2c5f;
	border-radius: 3px;
	background: #fff5f9;
	font-size: 14px;
	line-height: 1.55;
}

.sst-bo-banner__label {
	flex: 0 0 auto;
	padding: 3px 9px;
	border-radius: 999px;
	background: #9e2c5f;
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	white-space: nowrap;
}

.sst-bo-banner__text {
	flex: 1 1 240px;
	min-width: 0;
	margin: 0;
}

.sst-bo-banner__switch {
	flex: 0 0 auto;
	font-weight: 700;
	white-space: nowrap;
}

/* The ordinary cart is not the back order cart, so it does not wear its colour.
   A grey rail says "there is something over there" without claiming the page. */
.sst-bo-banner--parked {
	border-left-color: #b9b3b6;
	background: #f6f4f5;
}

/* Header link ---------------------------------------------------------------

   Fixed rather than injected into the header markup: the header is a theme
   template this plugin does not own, and a mu-plugin that reaches into somebody
   else's DOM breaks the next time they touch it. wp_footer + position:fixed is
   the same shape sst-preorder-agreement's pill uses.

   TOP OFFSET. It sits UNDER the header band, not over it — covering the cart
   icon or the burger with a pill about a second cart would be a worse bug than
   the one it is solving. --sst-bo-header-link-top is the one number to change
   if the header height ever moves.

   Z-INDEX 1120, inside the measured floating stack (theme functions.php:16789):
     10040 pre-order agreement modal
      1900 sale countdown modal    1890 its follow-up image popup
      1200 .sst-order-help-chat launcher
      1150 .sst-preorder-pop
   >> 1120 THIS LINK <<
      1000 Quick Order mobile cart bar
   Below every launcher and every modal, above the page. It is bottom-anchored
   siblings it must not fight, and it is top-anchored, so in practice it only
   has to lose to a full-screen modal — which it does. */

.sst-bo-header-link {
	position: fixed;
	top: var(--sst-bo-header-link-top, 84px);
	right: max(12px, env(safe-area-inset-right));
	z-index: 1120;
	display: inline-flex;
	gap: 7px;
	align-items: center;
	padding: 6px 13px;
	border: 1px solid rgba(255, 176, 213, 0.45);
	border-radius: 999px;
	background: #1a0710;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.sst-bo-header-link:hover,
.sst-bo-header-link:focus {
	background: #2a0c1a;
	color: #fff;
	text-decoration: none;
}

.sst-bo-header-link[hidden] {
	display: none !important;
}

.sst-bo-header-link__count {
	padding: 1px 7px;
	border-radius: 999px;
	background: #9e2c5f;
	font-variant-numeric: tabular-nums;
}

/* Anything the visitor deliberately opened owns the screen — the same rule the
   pre-order pill follows, and the same body classes. */
body.sst-cart-open .sst-bo-header-link,
body.sst-cdmodal-open .sst-bo-header-link,
body.sst-cdpromo2-open .sst-bo-header-link,
body.sst-qo-mobile-cart-open .sst-bo-header-link,
body.sst-qo-details-gate-open .sst-bo-header-link {
	display: none;
}

@media (max-width: 749px) {
	.sst-bo-header-link {
		top: var(--sst-bo-header-link-top, 62px);
		font-size: 11px;
	}
}

/* Product page --------------------------------------------------------------

   A back order card has no add-to-cart form (DESIGN.md §6.4 decision 16): it is
   bought from the Quick Order tab, where the floor, the consent and the refund
   destination are on the same screen as the money. This block replaces it, and
   has to say what the card IS, not only where the button went. */

.sst-bo-pdp {
	margin: 0 0 22px;
	padding: 15px 17px;
	border-left: 4px solid #9e2c5f;
	border-radius: 3px;
	background: #fff5f9;
	font-size: 14px;
	line-height: 1.6;
}

.sst-bo-pdp__badge {
	display: inline-block;
	margin: 0 0 8px;
	padding: 3px 9px;
	border-radius: 999px;
	background: #9e2c5f;
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.sst-bo-pdp__lead,
.sst-bo-pdp__cta {
	margin: 0 0 8px;
}

.sst-bo-pdp__cta:last-child {
	margin-bottom: 0;
}

.sst-bo-pdp__cta a {
	font-weight: 700;
}