/*
 * "Backordered" badge + delivery estimate on cart lines.
 * Markup: functions/cart-backorder-eta.php. Loaded on every front-end page,
 * because the header's cart dropdown carries it too.
 *
 *   at rest   Wilson NBA Forge Basketball × 2  ((clock) BACKORDERED →)
 *   open      Wilson NBA Forge Basketball × 2  ((clock) BACKORDERED →  Usually arrives in 4 days)
 *   dropdown  1 × $124.80
 *             [(clock) BACKORDERED →]    opening downwards - see the end
 *
 * The pill is set like the other small labels on these pages - the "What's
 * this?" tag beside Term 4 Delivery: Montserrat 700 capitals, tracked, around
 * 9px - in the product page's backorder rust (#a3481b on #fbeee6, 5.3:1). It
 * leads with the product page's icon for the line's state, so the state shows
 * before the pill is opened. One colour for every state: the icon already says
 * which it is. The estimate, once open, is sentence case in near-ink, so it
 * reads as the answer rather than more label.
 *
 * Mechanics (see sd_cart_bo_markup()): .sd-bo is an invisible footprint in the
 * text; .sd-bo__panel is the visible pill, positioned over it. Opening widens
 * the panel from the footprint's width (max-width: 100%) to its content, so the
 * pill grows to the right over whatever is beside it, and the row never moves.
 */

.sd-bo {
	--bo-rust: #a3481b;
	--bo-tint: #fbeee6;
	--bo-ink: #2a1a12;
	position: relative;
	margin-left: 6px;
	white-space: nowrap;
	font-family: inherit;
	font-size: 9.5px;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	outline: none;
}

/* The same label twice: once invisible, holding the pill's width in the line,
   once inside the panel. Identical padding, so the two coincide exactly. */
.sd-bo .sd-bo__tag {
	padding: 3px 9px 3px 8px;
	white-space: nowrap;
}

.sd-bo .sd-bo__tag--ghost {
	visibility: hidden;
}

/* The state icon, first in the label - the glyphs sd-product-summary.css gives
   the same states on the product page, in the face cart-backorder-eta.php prints
   inline (the product page's 1 KB subset).

   INLINE, not inline-block, like everything else in the footprint: the footprint
   now starts with this glyph, and Chrome allows a line break before any
   inline-block, which would strand the pill on a line of its own under a long
   name. A private-use glyph breaks like a letter, so straight after the name's
   last character (or the "5" of "× 5") there is no break.

   Being inline it can't take a width, so the fixed 1.25em slot is made from
   margins: the glyphs are 1em wide, except the truck (1.25em) and the scissors
   (0.875em), so each is centred in the slot by --bo-glyph and every label starts
   at the same place - 8px + 13.75px + 5px = 26.75px from the pill's edge.
   line-height: 1 keeps the icon font's taller box from stretching the pill by a
   pixel; -1px sets its centre on the capitals' centre. */
.sd-bo .sd-bo__tag::before {
	content: "\f059"; /* question-circle: no date yet */
	margin-left: calc((1.25em - var(--bo-glyph, 1em)) / 2);
	margin-right: calc((1.25em - var(--bo-glyph, 1em)) / 2 + 5px);
	font-family: "Font Awesome 5 Free";
	font-size: 11px;
	font-style: normal;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	vertical-align: -1px;
	color: var(--bo-rust);
}

.sd-bo--on-order {
	--bo-glyph: 1.25em;
}

.sd-bo--on-order .sd-bo__tag::before {
	content: "\f48b"; /* shipping-fast */
}

.sd-bo--lead-days .sd-bo__tag::before,
.sd-bo--lead-weeks .sd-bo__tag::before {
	content: "\f017"; /* clock */
}

.sd-bo--made-to-order {
	--bo-glyph: 0.875em;
}

.sd-bo--made-to-order .sd-bo__tag::before {
	content: "\f0c4"; /* cut */
}

.sd-bo .sd-bo__arrow {
	display: inline;
	width: 10px;
	height: 8px;
	margin-left: 5px;
	vertical-align: 0;
	overflow: visible;
	transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* The visible pill. Its line box is the footprint's padded height - Montserrat's
   content area (1.219em) plus 3px above and below - so the label sits on the
   same baseline in both layers. A radius of half that height is a pill on one
   line and a rounded card when it wraps (the cards, below). text-align: left
   because the phone cart right-aligns its cells, and the panel would inherit it. */
.sd-bo .sd-bo__panel {
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: calc(-0.6095em - 3px); /* half its one-line height: centred on the
	                                      footprint, and a card grows downwards,
	                                      not up over the name */
	z-index: 25;
	display: block;
	width: max-content;
	min-width: 100%;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-align: left;
	line-height: calc(1.219em + 6px);
	border-radius: 9px;
	background: var(--bo-tint);
	box-shadow: inset 0 0 0 1px rgba(163, 72, 27, 0.22);
	color: var(--bo-rust);
	transition: max-width 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.16s ease;
}

.sd-bo .sd-bo__panel .sd-bo__tag {
	padding-top: 0;
	padding-bottom: 0;
}

.sd-bo .sd-bo__detail {
	padding-right: 11px;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--bo-ink);
	opacity: 0;
	transition: opacity 0.2s ease 0.08s;
}

/* Open: hover, or focus - a tap focuses it, and so does Tab. The cap only has
   to be a number the width can animate to; it is sized for the longest estimate,
   a partly backordered line ("12 of 20 · Stock on its way - due 28 September"
   is about 460px with the label and icon), since anything shorter stops at its
   own width. */
.sd-bo:hover .sd-bo__panel,
.sd-bo:focus .sd-bo__panel {
	max-width: min(480px, calc(100vw - 32px));
	box-shadow: inset 0 0 0 1px rgba(163, 72, 27, 0.4), 0 3px 10px rgba(32, 30, 29, 0.12);
}

.sd-bo:hover .sd-bo__detail,
.sd-bo:focus .sd-bo__detail {
	opacity: 1;
}

.sd-bo:hover .sd-bo__arrow,
.sd-bo:focus .sd-bo__arrow {
	transform: translateX(2px);
}

.sd-bo:focus-visible .sd-bo__panel {
	box-shadow: inset 0 0 0 1px rgba(163, 72, 27, 0.4), 0 0 0 2px #fff, 0 0 0 4px #ec3013;
}

/* The parent theme gives EVERY span in a checkout product cell 30px of right
   padding (shopkeeper/css/public/wc-checkout.css, meant for the product name),
   at five classes of specificity - which would pad every layer of the pill.
   Undone here at one class more, and the pill's own paddings restated. */
.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table .product-name .sd-bo,
.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table .product-name .sd-bo span {
	padding-right: 0;
}

.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table .product-name .sd-bo .sd-bo__tag {
	padding-right: 9px;
}

.woocommerce-checkout form.checkout .woocommerce-checkout-review-order table.woocommerce-checkout-review-order-table .product-name .sd-bo .sd-bo__detail {
	padding-right: 11px;
}

.woocommerce td.product-name .sd-bo ~ .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- The header's cart dropdown --------------------------------------------
 *
 * The pill sits on its own line under "1 x $15.20" and opens DOWNWARDS: the
 * dropdown is 340px wide with its list clipped, so there is no room to the
 * right, but plenty underneath. Closed it is just the state icon, the word and
 * the arrow; the arrow turns to point at the estimate it has revealed. The
 * estimate is set lighter and a shade smaller than on the cart page, to keep
 * the opened card small in a narrow panel.
 *
 * The theme sizes every .quantity to the product page's 50px quantity box
 * (".quantity:not(.hidden) { height: 50px }"), and the dropdown's price line is
 * one of those - 30px of air under the price that nothing used to sit in. Held
 * to its own text here, in the dropdown only.
 */
.woocommerce-mini-cart li .quantity {
	height: auto;
}

.sd-bo--drop {
	display: inline-block;
	margin: 5px 0 0;
}

.sd-bo.sd-bo--drop:hover .sd-bo__panel,
.sd-bo.sd-bo--drop:focus .sd-bo__panel,
.sd-bo.sd-bo--drop.sd-bo--measure .sd-bo__panel {
	width: max-content;
	max-width: var(--bo-room, 220px);
	white-space: normal;
	transition: box-shadow 0.16s ease;
}

/* --measure is the same open shape, applied for an instant by the script to
   find out how tall this card will be before deciding which way it opens. */
.sd-bo.sd-bo--drop:hover .sd-bo__detail,
.sd-bo.sd-bo--drop:focus .sd-bo__detail,
.sd-bo.sd-bo--drop.sd-bo--measure .sd-bo__detail {
	display: block;
	padding: 1px 10px 6px 26.75px;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.4;
	opacity: 1;
}

.sd-bo.sd-bo--drop:hover .sd-bo__arrow,
.sd-bo.sd-bo--drop:focus .sd-bo__arrow {
	transform: rotate(90deg);
}

/* The list scrolls and clips, so the last row's card would be cut off at its
   bottom edge. Every pill opens downwards, so the list is given exactly that
   much room under its last row - and only when the last row is one that can
   open (:has), so an ordinary basket's dropdown is unchanged. A scrolled list
   is nudged by the script instead. */
.woocommerce-mini-cart:has(li:last-child .sd-bo) {
	padding-bottom: 26px;
}

/* ---- The card ---------------------------------------------------------------
 *
 * Where there is no room to the right for the whole line, the pill opens as a
 * card instead: the icon and label on the first line where they were, the
 * estimate on a line below, set under the label (26.75px, past the icon's slot)
 * so the icon heads a column of its own. Not animated: the card changes shape,
 * not only width, and a width growing while its text re-wraps jumps about.
 *
 * Three places need it. Phones (<=600px) always. The phone cart (<=768px)
 * always, opening leftwards - below. And the checkout's narrow order column at
 * laptop widths, with a long estimate ("3 of 5 · Stock on its way..."): CSS
 * can't see where on screen the pill is, so the script in cart-backorder-eta.php
 * measures as it opens, and marks a pill that won't fit with --card and the room
 * it has in --bo-room. Its rules are the same as the phones' - kept as two
 * copies because one is conditional on a class and the other on a media query.
 */
@media (min-width: 601px) {
	.sd-bo.sd-bo--card .sd-bo__panel {
		transition: box-shadow 0.16s ease;
	}

	.sd-bo.sd-bo--card:hover .sd-bo__panel,
	.sd-bo.sd-bo--card:focus .sd-bo__panel {
		width: max-content;
		max-width: var(--bo-room, 240px);
		white-space: normal;
	}

	.sd-bo.sd-bo--card:hover .sd-bo__detail,
	.sd-bo.sd-bo--card:focus .sd-bo__detail {
		display: block;
		padding: 0 11px 6px 26.75px;
		line-height: 1.45;
	}
}

/* Phones. The script's --bo-room lets the card use all the room it has; without
   it, 240px is safe from anywhere the pill sits in a 390px checkout (its left
   edge is never past ~120px). */
@media (max-width: 600px) {
	.sd-bo .sd-bo__panel {
		transition: box-shadow 0.16s ease;
	}

	.sd-bo:hover .sd-bo__panel,
	.sd-bo:focus .sd-bo__panel {
		width: max-content;
		max-width: var(--bo-room, min(240px, calc(100vw - 150px)));
		white-space: normal;
	}

	.sd-bo:hover .sd-bo__detail,
	.sd-bo:focus .sd-bo__detail {
		display: block;
		padding: 0 11px 6px 26.75px;
		line-height: 1.45;
	}
}

/* Cart on phones and tablets: WooCommerce stacks each line and right-aligns it,
   so the pill ends near the screen's edge with nothing to its right. The card is
   anchored at its RIGHT edge instead and grows down and to the left, as wide as
   the estimate needs up to the room there is; inside it, the icon still leads at
   the far left. (The script's --bo-room measures room to the right, so it is not
   used here.)

   Tried first: one line opening leftwards (a reversed flex row). It read
   backwards - the estimate before the label - and a long estimate clipped at
   its start. Never direction: rtl for this either - all-LTR text stays one bidi
   run, and the closed pill showed the hidden end of the estimate. */
@media (max-width: 768px) {
	.woocommerce-cart .sd-bo .sd-bo__panel {
		left: auto;
		right: 0;
		transition: box-shadow 0.16s ease;
	}

	.woocommerce-cart .sd-bo:hover .sd-bo__panel,
	.woocommerce-cart .sd-bo:focus .sd-bo__panel {
		width: max-content;
		max-width: min(360px, calc(100vw - 46px));
		white-space: normal;
	}

	.woocommerce-cart .sd-bo:hover .sd-bo__detail,
	.woocommerce-cart .sd-bo:focus .sd-bo__detail {
		display: block;
		padding: 0 11px 6px 26.75px;
		line-height: 1.45;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sd-bo .sd-bo__panel,
	.sd-bo .sd-bo__detail,
	.sd-bo .sd-bo__arrow {
		transition: none;
	}
}