/**
 * Standalone Bolt integration — button styling.
 *
 * Deliberately plain and self-contained: this integration renders its own real <button>
 * rather than overlaying a Bolt-rendered element, so there is no hashed Bolt class to
 * style around and nothing here depends on the Bolt plugin's CSS.
 */

.aecb-bolt {
	margin: 8px 0 0;
}

.aecb-bolt__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 0 18px;
	border: 0;
	border-radius: 10px;
	background: #f90;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
}

.aecb-bolt__button:hover:not( :disabled ) {
	background: #e0830f;
}

.aecb-bolt__button:disabled {
	opacity: 0.6;
	cursor: progress;
}

.aecb-bolt__status {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: #555;
}

.aecb-bolt__status.is-error {
	color: #b22222;
}

/* ===========================================================================
   Checkout mode selector
   ---------------------------------------------------------------------------
   Two states, both driven by a body class: body.aecb-mode-bolt (default, set
   server-side by AECB_Mode::body_class) and body.aecb-mode-other, swapped by the
   radios in aecb-checkout.js.

   Everything is scoped under body.aecb-has-modes, which is only present when the
   selector actually rendered — so a checkout where Bolt is unconfigured is
   completely unaffected by these rules and behaves exactly as it did before.

   !important on the hiding rules because the theme's checkout grid styles these
   same rows with !important (assets/css/theme.css ~5834).
   =========================================================================== */

.aecb-modes {
	margin: 0 0 20px;
	padding: 16px 18px;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	background: #fafafa;
}

.aecb-modes__title {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 600;
}

.aecb-modes__option {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 10px;
	align-items: start;
	margin: 0 0 10px;
	cursor: pointer;
}

.aecb-modes__option:last-child {
	margin-bottom: 0;
}

.aecb-modes__option input[type="radio"] {
	margin: 3px 0 0;
}

.aecb-modes__label {
	font-size: 15px;
	font-weight: 600;
	color: #202020;
}

/* Hint sits under the label, aligned past the radio. */
.aecb-modes__hint {
	grid-column: 2;
	font-size: 13px;
	line-height: 1.45;
	color: #555;
}

/* --- Bolt mode: hide the form, the gateway list and the native submit --------- */

/* Address form. The rows that carry no meaning in this mode go; the form ITSELF stays
   and is locked instead — see the "Locked address form" section at the end of this
   file. It used to be hidden here alongside #customer_details, which left a tall blank
   column beside the order summary and read as a page that had failed to load.

   The fields are only ever hidden or blurred, never removed and never disabled: they
   are still serialized into every update_order_review, which is what keeps shipping
   rates and tax correct while Bolt mode is on. */
body.aecb-has-modes.aecb-mode-wallet .woocommerce-account-fields,
body.aecb-has-modes.aecb-mode-wallet .woocommerce-additional-fields,
body.aecb-has-modes.aecb-mode-wallet .woocommerce-privacy-policy-text,
body.aecb-has-modes.aecb-mode-wallet #ship-to-different-address {
	display: none !important;
}

/* The terms row and the native submit: irrelevant in this mode, since payment happens
   entirely inside Bolt's popup.

   #payment .wc_payment_methods is deliberately NOT in this list any more, and that is
   the whole of the "Pay with Amazon or PayPal" card's removal in CSS terms. Those rows
   are top-level options in the same question as the Bolt card now — hiding them in Bolt
   mode would leave the customer no way to reach Amazon or PayPal at all, since the card
   that used to reveal them is gone.

   Their .payment_box goes instead. That panel is where Amazon Pay and PayPal render
   their own buttons and fields, and it belongs to a row that is not the chosen one in
   this mode. !important because WooCommerce's checkout.js slides these panels open by
   writing display:block straight onto the element. */
body.aecb-has-modes.aecb-mode-wallet #payment .payment_box,
body.aecb-has-modes.aecb-mode-wallet #payment .woocommerce-terms-and-conditions-wrapper,
body.aecb-has-modes.aecb-mode-wallet #place_order {
	display: none !important;
}

/* --- Other mode: hide the Bolt button, restore everything else ---------------- */

body.aecb-has-modes.aecb-mode-other .aecb-bolt {
	display: none !important;
}

body.aecb-has-modes.aecb-mode-bolt .aecb-bolt {
	display: block;
}

/* ===========================================================================
   Bolt button: styled face + SDK-hydrated button on top
   ---------------------------------------------------------------------------
   .bolt-checkout-button is not ours to replace. Bolt's SDK exposes no method to
   open the popup — its API is configure / configureProductCheckout /
   createBoltOrder / getVersion / notifyError — so the only way in is for the SDK
   to hydrate an element carrying that class, which it does during configure().

   Bolt draws its own button inside .aecb-bolt__real; that is laid transparently
   over .aecb-bolt__face so the visible button is ours while the click Bolt
   handles is the one the customer actually makes. Same technique the cart page
   uses (.cmc-bolt-wrap / .cmc-bolt-real in woocommerce-overwrite.php).
   =========================================================================== */

.aecb-bolt {
	position: relative;
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 8px 0 0;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
}

.aecb-bolt__face {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 0 18px;
	background: #f90;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

.aecb-bolt:hover .aecb-bolt__face {
	background: #e0830f;
}

/* Bolt's real button: invisible, on top, and the actual click target. */
.aecb-bolt__real {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	opacity: 0;
}

.aecb-bolt__real iframe,
.aecb-bolt__real > div {
	width: 100% !important;
	height: 100% !important;
}

/* Rendered as a sibling of .aecb-bolt, not inside it — that wrapper is the button, and
   clips its overflow. */
.aecb-bolt__status {
	position: relative;
	z-index: 3;
	margin: 8px 0 0;
}

/* ===========================================================================
   Show Bolt's own button — overlay approach withdrawn
   ---------------------------------------------------------------------------
   The transparent-overlay trick above (our styled face with Bolt's real button
   laid over it at opacity:0) is actively harmful here, for two reasons:

     opacity:0 applies to every descendant. Bolt renders its checkout UI inside
     the element it hydrates, so the modal itself came out fully transparent —
     the popup DID open, and was simply invisible. That is the "everything works
     but no popup" symptom exactly.

     overflow:hidden on a 48px-tall wrapper clips anything larger, so even at
     full opacity a modal rendered in there would be cut off.

   So Bolt's button is now shown as-is and our face is hidden. Bolt's markup uses
   hashed class names it may rename between releases, which is why this styles the
   container rather than trying to restyle Bolt's internals. If the orange
   treatment is wanted back, the theme already does that for the cart page by
   targeting Bolt's inner class directly (assets/css/theme.css ~5127) — worth
   copying deliberately rather than reintroducing an opacity overlay.

   CSS-only on purpose: it takes effect without waiting on a PHP deploy.
   =========================================================================== */

.aecb-bolt {
	overflow: visible;
	min-height: 0;
	cursor: default;
}

.aecb-bolt__face {
	display: none;
}

.aecb-bolt__real {
	position: static;
	/* Explicit sides as well as inset: the rule above sets top/left/right/bottom
	   individually, and inset alone would not reset them in older parsers. */
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	inset: auto;
	z-index: auto;
	opacity: 1;
	width: 100%;
	/* No min-height. Any wrapper area taller than Bolt's own button is a dead
	   click zone: clicks there hit our element and never reach Bolt, which has no
	   API to open the popup from script. Letting the wrapper hug Bolt's button
	   means every click inside it is a click Bolt receives. */
}

/* Bolt sizes its own contents; do not force them to fill a container that no
   longer has a fixed height. */
.aecb-bolt__real iframe,
.aecb-bolt__real > div {
	width: 100% !important;
	height: auto !important;
}

/* ===========================================================================
   Mode selector — placement and presentation
   ---------------------------------------------------------------------------
   The selector renders at the top of the sidebar, directly above the payment section
   and its button, so the choice and the button it governs read as one panel. AECB_Mode
   hooks woocommerce_checkout_before_order_review, which fires inside
   .shipping-details-col but before #order_review opens — inside the checkout form, and
   outside the container WooCommerce replaces on every AJAX refresh.

   The options are stacked, one per row. That column is a fixed 400px, and two
   cards side by side in it would leave each about 170px wide — not enough for a
   label, a brand mark and a badge, let alone the hint beneath.

   Selected state is expressed twice on purpose: :has(input:checked) for browsers
   that support it, and an .is-selected class that checkout-bolt.js keeps in sync
   for those that do not. The real radio stays in the tab order — it is covered by
   a drawn mark, not removed with display:none.

   Appended at the end so these win over the base .aecb-modes block above.
   =========================================================================== */

/* 12px, matching .aecb-modes__grid's gap rather than sitting a wider 24px clear of
   what follows. What follows is the Amazon and PayPal rows, which are options in this
   same question — so the gap between the Bolt card and the first of them has to be the
   gap between any two options, or the stack reads as one card and then a separate list
   again. #payment's own margin-top is zeroed at the end of this file for the same
   reason. */
.aecb-modes {
	max-width: none;
	/* margin: 0 0 12px; */
	margin: 0 0 0px;
	padding: 0;
	border: 0;
	background: none;
}

/* ---------------------------------------------------------------------------
   The trailing container: the Apple Pay card, the fourth option.

   It renders between the gateway rows and the .place-order row, on the theme's
   own aecb_after_payment_methods hook in woocommerce/checkout/payment.php. That
   position is what puts every pay button below all four options — "Place order"
   and the Bolt button are both inside .place-order, so nothing ordered against
   the wallet buttons alone could have got above them.

   The card is a sibling of ul.payment_methods inside #payment, NOT a child of
   .place-order. That matters: the wallet-mode rule further down empties
   .place-order of everything it does not name, and a card in there would be
   hidden by it in the very mode that selects it.

   margin-top only, and only the top. 12px is the gap ul.payment_methods uses
   between its own rows (see the grid further down), so the four options read as
   one evenly spaced stack. The gap BELOW is owned by whatever follows: the Affirm
   promo's own 12px margin-top when there is an offer, and .place-order's top
   spacing when :empty has taken the promo out. Neither is restated here, so this
   card does not double a gap it does not own.

   Set AFTER .aecb-modes deliberately. Both selectors match this element at the
   same specificity, so source order is what decides the margin — reordering
   these two blocks would silently hand it back to the rule above.
   --------------------------------------------------------------------------- */
.aecb-modes--trailing {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.aecb-modes__title {
	margin: 0 0 12px;
	font-size: 22px !important;
	font-weight: 600;
	color: #202020;
}

/* One per row, at every width. This was repeat(auto-fit, minmax(240px, 1fr)), which
   let the options pair up whenever the container could take 480px — true of the old
   full-width placement, and true again on a wide enough screen if the column ever
   grows. Stacking is the intended presentation now, so it is stated outright rather
   than left to depend on the container's measurements. */
.aecb-modes__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.aecb-modes__option {
	position: relative;
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 12px;
	align-items: start;
	margin: 0;
	padding: 16px 18px;
	border: 1px solid #dcdcde;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.aecb-modes__option:hover {
	border-color: #b9b9bd;
}

.aecb-modes__option.is-selected,
.aecb-modes__option:has( .aecb-modes__input:checked ) {
	border-color: #f90;
	background: #fffaf2;
	box-shadow: 0 0 0 1px #f90 inset;
}

/* Visible focus ring, since the native input is covered by the drawn mark. */
.aecb-modes__option:focus-within {
	outline: 2px solid #202020;
	outline-offset: 2px;
}

/* Kept in the tab order and operable — just not painted. */
.aecb-modes__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

/* The MODE_OTHER radio, which has no card of its own — the Amazon and PayPal rows in
   the gateway list are its visible face. See the proxy radio in
   AECB_Mode::render_selector() for why it exists at all.

   Unlike .aecb-modes__input above it is NOT operable and not reachable: nothing points
   at it and there is nothing beside it to read, so tabindex="-1" and aria-hidden keep it
   out of the way and aecb-checkout.js checks it when a row is chosen. Kept in the layout
   at 1px rather than display:none for the same reason as the cards' inputs — a
   display:none radio is dropped from some browsers' form serialization, and this one has
   to reach the server in post_data. */
.aecb-modes__proxy {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
}

.aecb-modes__mark {
	position: relative;
	top: 2px;
	width: 20px;
	height: 20px;
	border: 2px solid #b9b9bd;
	border-radius: 50%;
	background: #fff;
}

.aecb-modes__option.is-selected .aecb-modes__mark,
.aecb-modes__option:has( .aecb-modes__input:checked ) .aecb-modes__mark {
	border-color: #f90;
}

.aecb-modes__option.is-selected .aecb-modes__mark::after,
.aecb-modes__option:has( .aecb-modes__input:checked ) .aecb-modes__mark::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #f90;
}

.aecb-modes__label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #202020;
}

.aecb-modes__badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: #f90;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.aecb-modes__hint {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: #555;
}

@media (max-width: 600px) {
	.aecb-modes__option {
		padding: 14px 16px;
	}
}

/* ===========================================================================
   Mode option layout: radio beside the title, description on the next line
   ---------------------------------------------------------------------------
   Row 1: the radio mark and the title, side by side and baseline-ish aligned.
   Row 2: the description, spanning both columns so it starts at the left edge
          rather than being indented under the title.

   .aecb-modes__body is gone from the markup — with mark/label/hint as direct grid
   children, the hint can span the full width, which a wrapper prevented.
   =========================================================================== */

.aecb-modes__option {
	grid-template-columns: 20px 1fr;
	grid-row-gap: 6px;
	column-gap: 10px;
	align-items: center;   /* row 1: mark centred against the title, not the whole card */
}

.aecb-modes__mark {
	top: 0;                /* nudge no longer needed now the row aligns them */
	grid-column: 1;
	grid-row: 1;
	flex: 0 0 auto;
}

.aecb-modes__label {
	grid-column: 2;
	grid-row: 1;
}

.aecb-modes__hint {
	grid-column: 1 / -1;   /* next line, full width, under the radio too */
	grid-row: 2;
	margin-top: 0;
}

/* ===========================================================================
   Brand marks before a mode's label
   ---------------------------------------------------------------------------
   Inline SVG emitted by AECB_Mode::brand_icons(). They are flex items of
   .aecb-modes__label, so its gap already spaces them from the label text — and a
   long label still wraps under them rather than shoving them out of the card.

   Each mark is sized by HEIGHT with width:auto, because they have very different
   aspect ratios: PayPal's monogram is taller than it is wide, Amazon Pay's is a
   wordmark about five times wider than tall. Sizing by width would leave one of them
   either microscopic or towering over the label.

   `color` is what paints them — the SVGs carry fill="currentColor". Brand colours so
   the two payment marks stay distinguishable at a glance: Bolt in the orange its own
   button uses, Amazon Pay in Amazon's squid-ink, PayPal in PayPal blue.
   =========================================================================== */

.aecb-modes__brands {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 10px;
	line-height: 1;
}

.aecb-modes__brand {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.aecb-modes__brand svg {
	display: block;
	width: auto;
	height: 18px;
}

.aecb-modes__brand--bolt {
	color: #f90;
}

.aecb-modes__brand--bolt svg {
	height: 17px;
}

/* A wordmark rather than a symbol, so it carries its own weight at a smaller height
   than the two symbol marks. */
.aecb-modes__brand--amazon-pay {
	color: #232f3e;
}

.aecb-modes__brand--amazon-pay svg {
	height: 14px;
}

.aecb-modes__brand--paypal {
	color: #003087;
}

/* ===========================================================================
   Gateway marks: the logo IN PLACE OF the gateway title
   ---------------------------------------------------------------------------
   Emitted by AECB_Mode::gateway_mark() from checkout/payment-method.php, so these sit
   in the WooCommerce radio list under the "Pay with Amazon or PayPal" card rather than
   in the card itself.

   These are the FULL two-colour wordmarks — PayPal's navy-and-cyan lockup, Amazon's
   wordmark over its orange smile — not the flat glyphs the mode cards use. Up there a
   mark only hints at the brand beside a worded label; down here it IS the label, and a
   single-colour silhouette standing alone reads as a placeholder for a logo rather than
   as the logo.

   Which means the colour rules from .aecb-modes__brand deliberately do NOT carry over:
   the artwork brings its own colours, so there is no `color` to set and setting one
   would tint an <img> not at all and a multi-fill SVG unpredictably. The brand modifier
   classes survive only to size each mark.

   Sized by HEIGHT with width:auto for the reason given in the brand-marks section — the
   two lockups have very different aspect ratios, and matching their widths would leave
   one of them either microscopic or towering over the row.

   A DIFFERENT height per brand, and the numbers below are measured rather than judged.
   An earlier pass here set one height for both on the reasoning that two tightly cropped
   files need no special-casing. Both files are indeed cropped tight — and the marks still
   came out different sizes, because a tight crop equalises the BOX and what fills the box
   is not the same thing in the two lockups:

     brand-paypal.png      1686x409   x-height 176px = 43.0% of canvas
     brand-amazon-pay.png   230x44    x-height  26px = 59.1% of canvas

   PayPal's canvas height is set by its monogram, which stands a good deal taller than the
   lettering beside it. Amazon has no monogram: its canvas is the wordmark plus the smile
   tucked under it, so the letters occupy far more of the box. At one shared height that
   put Amazon's lettering about 1.37x the size of PayPal's.

   So the heights are set to make the two X-HEIGHTS match on screen, which is what the eye
   actually compares — 26 x (43.0 / 59.1) = 19. Both wordmarks then read at the same size
   and land within 8px of each other in width (107 and 99), despite one carrying a
   monogram the other does not.

   Replacing either file means re-measuring. The ratio belongs to the artwork, not to the
   brand, so a differently cropped Amazon Pay logo needs a different number here.

   max-width guards the row against artwork this theme did not choose: passes 1 and 2 in
   gateway_mark() can return a file dropped in later or a logo a payment plugin has
   reissued, and neither is going to consult this stylesheet first.
   =========================================================================== */

.aecb-gateway-mark {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 1;
	vertical-align: middle;
}

.aecb-gateway-mark img,
.aecb-gateway-mark svg {
	display: block;
	width: auto;
	max-width: 180px;
	height: 26px;
	object-fit: contain;
}

/* 19px, not 26px — see the x-height arithmetic above. This is the one number to change
   if the Amazon Pay artwork is ever replaced. */
.aecb-gateway-mark--amazon-pay img,
.aecb-gateway-mark--amazon-pay svg {
	height: 19px;
}

/* Two rules in theme.css (~6018) pin any <img> in the Amazon row to 37×23 and indent the
   first one by 15px. They were written for the gateway's own icon sitting AFTER a worded
   title, where a fixed box and a gap from the words were both right. The same <img> is
   the label itself now, so 37×23 crushes a wordmark that is nearly 4:1 and the indent
   pushes it away from its radio.

   Overridden rather than deleted: they still apply when custom-bolt is inactive, which is
   the only state where WooCommerce's own title-and-icon line renders. Matched through
   #payment because the rules being beaten are four classes deep and carry !important — an
   id is what wins that outright rather than by a hair. */
body.ae-checkout #payment .aecb-gateway-mark img,
body.ae-checkout #payment .aecb-gateway-mark svg {
	width: auto !important;
	max-width: 180px !important;
	height: 26px !important;
	margin: 0 !important;
}

body.ae-checkout #payment .aecb-gateway-mark--amazon-pay img,
body.ae-checkout #payment .aecb-gateway-mark--amazon-pay svg {
	height: 19px !important;
}

/* PayPal's description panel — the grey strip reading "Pay via PayPal." under the row.
   The logo above it is the label; a sentence restating it is the same redundancy the
   mode cards' hints were removed for.

   Done here rather than in AECB_Mode::limit_gateways(), which empties $gateway->description
   and is what silenced Amazon's. That has no effect on this one: PPCP prints its blurb from
   its own payment_fields() rather than from the property, so the box renders whatever the
   property says. CSS is what actually reaches it.

   !important is doing real work, not padding — WooCommerce's checkout.js shows and hides
   these panels with jQuery, which writes display:block straight onto the element, and an
   inline style loses to nothing weaker.

   ONE CAVEAT worth knowing: this hides the whole panel, not just the text. Today PPCP puts
   nothing else in there — the flow runs through the theme's own Place order button. If
   PayPal is ever reconfigured to render its smart buttons or a saved-card picker inside the
   payment box, they would be hidden too and PayPal would silently stop working. If that
   happens, narrow this to the panel's <p> instead of removing the rule. */
body.ae-checkout #payment .payment_box.payment_method_ppcp-gateway {
	display: none !important;
}

/* ===========================================================================
   Wallet modes: hide the other gateways' own buttons
   ---------------------------------------------------------------------------
   "Wallet modes" is Bolt AND Apple Pay — both show a single wallet button and
   nothing else. The selectors below say .aecb-mode-wallet for that reason; the
   heading used to say "Bolt mode" and the matching test in aecb-checkout.js was
   still comparing against 'bolt' alone, which is what let PayPal's button sit
   under the Apple Pay one. See watchOtherGatewayUI() there.

   Two complementary rules, because a gateway's button is not reliably anywhere in
   particular:

   1. Structural — in Bolt mode everything in the place-order row is hidden except
      our button and its status line. Covers any button injected there, including
      ones nobody has enumerated.
   2. .aecb-hidden-gateway — applied by hideOtherGatewayUI() in aecb-checkout.js to
      containers found anywhere in the WooCommerce wrapper whose id or class names
      PayPal or Amazon, which is where their SDKs actually put them. The wrapper and
      not just the form: PayPal has rendered its button below the review column,
      outside .place-order and outside the form.

   Hidden inputs (the checkout nonce among them) are matched by rule 1, but display
   has no effect on them and this flow never submits the form.

   Both are reversible: leaving Bolt mode drops the body class and the JS removes the
   class it added, so Other mode shows exactly what it did before.
   =========================================================================== */

/* Stripe's express checkout element is excluded alongside Bolt's button, because
   ae_move_stripe_express_checkout() re-hooks it into this very row. Without the
   exclusion this rule would hide the Apple Pay button the moment Apple Pay mode
   selected it — the rule empties .place-order of everything it does not name, and
   the element only became a child of it when the hook moved. */
body.aecb-has-modes.aecb-mode-wallet form.checkout .place-order > *:not( .aecb-bolt ):not( .aecb-bolt__status ):not( #wc-stripe-express-checkout-element ) {
	display: none !important;
}

/* Rule 2. Was commented out for a while, which is why a PayPal button kept appearing
   next to Bolt's: the JS went on adding the class and nothing acted on it. The reason
   it was disabled is handled at source now — hideOtherGatewayUI() skips [data-aecb-modes]
   — and belt-and-braces below. */
.aecb-hidden-gateway {
	display: none !important;
}

/* Never hideable, whatever the selectors above start matching:

   - Our own button. It sits in the place-order row (rule 1) and .aecb-bolt__real
     carries Bolt's .bolt-checkout-button class.
   - The mode selector's own PayPal / Amazon Pay marks. .aecb-modes__brand--paypal
     matches [class*="paypal"], so the card that offers the choice was hiding the
     logos of what it was offering. The JS exemption covers this too; keeping it in
     CSS as well means a stale cached script cannot resurrect the bug. */
body.aecb-has-modes.aecb-mode-bolt .aecb-bolt,
body.aecb-has-modes.aecb-mode-bolt .aecb-bolt__real,
body.aecb-has-modes.aecb-mode-bolt .aecb-bolt .bolt-checkout-button {
	display: block !important;
}

[data-aecb-modes] .aecb-modes__brand {
	display: inline-flex !important;
}

[data-aecb-modes] .aecb-modes__brand svg {
	display: block !important;
}

/* Same exemption, now that the Amazon and PayPal ROWS are options rather than a list
   nested under a card — and this one guards a checkout that cannot be completed, not a
   missing logo. Every part of the Amazon row names the gateway somewhere the name-based
   sweep looks: the <li> and its .payment_box are .payment_method_amazon_payments_advanced,
   the radio is #payment_method_amazon_payments_advanced and the logo is
   .aecb-gateway-mark--amazon-pay. Sweeping Bolt mode without an exemption therefore takes
   the whole option off the screen.

   hideOtherGatewayUI() skips these at source; this is here for the same reason the mode
   card's rule is, spelled out above it — a stale cached aecb-checkout.js would otherwise
   go on adding the class and nothing would stop it.

   The values match what theme.css (~6031) sets on these rows so a wrongly hidden row comes
   back looking the way it should, not merely visible. .payment_box is left out on purpose:
   Bolt mode hides that panel by design. */
#payment .wc_payment_methods > li.aecb-hidden-gateway,
#payment .wc_payment_methods > li > label.aecb-hidden-gateway {
	display: flex !important;
}

#payment .wc_payment_methods > li > input[name="payment_method"].aecb-hidden-gateway {
	display: inline-block !important;
}

#payment .wc_payment_methods .aecb-gateway-mark.aecb-hidden-gateway {
	display: inline-flex !important;
}

/* ===========================================================================
   Order-review cart editing — quantity and remove
   ---------------------------------------------------------------------------
   Controls sit where the "× 1" quantity used to, rendered by AECB_Cart through the
   woocommerce_checkout_cart_item_quantity filter. Kept compact: the review column is
   narrow and the product name wraps beside them.
   =========================================================================== */

.aecb-qty {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 6px;
	vertical-align: middle;
	white-space: nowrap;
}

.aecb-qty__input {
	width: 56px;
	min-height: 30px;
	padding: 2px 6px;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	background: #fff;
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
}

.aecb-qty__input:disabled {
	background: #f4f4f5;
	color: #777;
}

.aecb-qty__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid #dcdcde;
	border-radius: 50%;
	background: #fff;
	color: #777;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}

.aecb-qty__remove:hover:not( :disabled ) {
	border-color: #b32d2e;
	color: #b32d2e;
}

.aecb-qty__input:disabled,
.aecb-qty__remove:disabled {
	opacity: .6;
	cursor: not-allowed;
}

/* While a change is in flight the figures on screen are stale — dim the block so it is
   clear they are being recalculated rather than looking simply wrong.

   Both blocks, because a quantity change invalidates both and they are no longer one
   element: the line subtotals are in the full-width listing and the order totals are in
   the summary card. Dimming only the card would leave the listing looking authoritative
   while showing the old numbers. */
#order_review.aecb-cart-busy,
.ae-order-items.aecb-cart-busy {
	opacity: .6;
	pointer-events: none;
}

/* The per-unit price that used to sit inside the quantity control is gone: the cart
   listing gives Price its own column (woocommerce/checkout/review-order-items.php), so
   .aecb-qty__price / __each / __times had become a second copy of the cell next door and
   AECB_Cart::render_controls() no longer emits them. */

/* ===========================================================================
   Bolt button while its token is being re-quoted
   ---------------------------------------------------------------------------
   A cart change invalidates the Bolt token, and re-minting it involves a live call
   to Bolt's API. Until that returns, the button would open Bolt on the PREVIOUS
   total — so it is blocked rather than merely dimmed.

   pointer-events is what does the blocking: Bolt's own button is the click target,
   and the wrapper is not a real control that could be disabled. cursor: wait keeps
   the reason legible.
   =========================================================================== */

.aecb-bolt.is-updating {
	pointer-events: none;
	opacity: .55;
	cursor: wait;
}

/* The status line sits outside .aecb-bolt, so it stays readable while the button
   above it is blocked. */
.aecb-bolt.is-updating + .aecb-bolt__status {
	color: #555;
}

/* ===========================================================================
   Cart-listing controls
   ---------------------------------------------------------------------------
   The listing has a column each for thumbnail, product, price, quantity and
   subtotal now (woocommerce/checkout/review-order-items.php), so the quantity
   field is simply the contents of its own cell.

   Everything that used to be here was about surviving a two-column table where the
   thumbnail, the name, the per-unit price and the controls all shared ONE cell: a
   block-level flex row beneath the name, a 75px field, wrapping rules to stop a long
   product name shoving the table past the edge of the card. None of it applies to a
   cell that holds nothing but a number.

   Scoped to .ae-order-items so the cart page, which uses the same classes, is left
   alone.
   =========================================================================== */

.ae-order-items .aecb-qty {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

.ae-order-items .aecb-qty__input {
	width: 72px;
	min-height: 40px;
	text-align: center;
}

/* ---------------------------------------------------------------------------
   Remove control: over the thumbnail's top-left corner, borderless
   ---------------------------------------------------------------------------
   Printed into the thumbnail cell by review-order-items.php and lifted out of the
   flow so it sits over the image rather than beside it — a column of its own for one
   glyph would cost more width than the listing can spare.

   Positioned against the cell, which the .product-thumbnail rule in custom-css.css
   makes the containing block. Kept at 0,0 rather than hanging outside the corner:
   the cell has no left padding, so a negative offset would put the control over the
   table's edge.

   Borderless and transparent HERE ONLY — .ae-order-items scopes this to the checkout
   listing, leaving the bordered circle intact on the cart page, which uses the same
   class. The text-shadow is a white halo so the glyph stays legible over a dark
   A bare red cross — no disc, no border, no background — matching the one in the mini
   cart so the two removes read as the same control. AECB_Cart::remove_button() draws
   the same stroked SVG the mini cart uses; this colours it and gives it a box.

   It was briefly a filled disc, which made sense while it sat ON the product image and
   needed its own background to stay legible. It does not sit there any more, so the
   disc was carrying weight the design no longer asked for.

   BESIDE the thumbnail, not on it: the control lives in a 30px gutter the cell reserves
   for it (custom-css.css, .product-thumbnail), leaving 10px of clear space before the
   image.

   Centred on the row: top:50% with a translate back up by half its own height, which
   needs no knowledge of the row's height and so holds as a wrapping product name grows
   it. The cell is vertical-align:middle for the same reason, so image and control move
   together rather than one drifting away from the other.

   The !importants are for the box: a global button style (Elementor's kit CSS)
   otherwise stretches it into a wide bordered rectangle with a background of its own.
   --------------------------------------------------------------------------- */
.ae-order-items .aecb-qty__remove {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY( -50% );
	z-index: 2;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 20px !important;
	min-width: 20px;
	height: 20px !important;
	min-height: 20px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var( --color-primary, #b22222 ) !important;
	line-height: 1 !important;
	text-shadow: none;
}

/* The stroke follows `color`, so the rule above paints it. Sized here rather than left
   to the SVG's own width/height attributes, which a global `svg { width: 100% }` in a
   builder's stylesheet would otherwise blow up. */
.ae-order-items .aecb-qty__remove svg {
	display: block;
	width: 14px !important;
	height: 14px !important;
}

/* Darkens rather than filling — the disc that a filled hover belonged to is gone. */
.ae-order-items .aecb-qty__remove:hover:not( :disabled ) {
	border: 0 !important;
	background: transparent !important;
	color: var( --color-primary-dark, #8e1b1b ) !important;
}

/* Variation / add-on data WooCommerce prints under the name. Left unstyled it keeps
   its default table-ish widths and can be the thing that overflows. */
.ae-order-items .product-name .variation,
.ae-order-items .product-name dl.variation {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

/* ===========================================================================
   Hidden address form (Bolt mode)
   ---------------------------------------------------------------------------
   In Bolt mode the delivery and billing form is hidden outright. Bolt collects the
   address and the card in its own window, so there is nothing here to fill in and
   nothing worth explaining.

   This replaced a LOCKED treatment: the form left on screen, blurred, with a panel
   over it saying Bolt would take care of it. That existed for one reason — hiding the
   form used to leave a tall empty column beside the order summary, which read as a
   page that had failed to load. It cannot any more. The summary is a full-width block
   above these columns now, and the mode cards sit with the payment button in the
   right-hand column, so what is left when this column empties is a complete page with
   one column in it rather than a hole where the form was.

   The whole column goes, which takes the address card and the terms wrapper
   ae_place_terms_below_shipping() appends after it in a single rule.

   HIDDEN, never disabled — the distinction is load-bearing. display:none fields are
   still serialized, so the address keeps posting into every
   wc-ajax=update_order_review and the customer keeps their shipping rates and tax.
   `disabled` fields are dropped from serialization and would cost exactly that; same
   reasoning as ae_bolt_disable_customer_details() in woocommerce-overwrite.php.

   The column keeps an explicit grid-column in custom-css.css so the payment column
   stays in track 2 while this one is hidden. Without it the sole remaining item
   auto-places into track 1 and the payment card jumps the width of the page the
   instant the radio is clicked.
   =========================================================================== */

body.aecb-has-modes.aecb-mode-wallet .shipping-form-col {
	display: none !important;
}

/* ===========================================================================
   Bolt button: orange, not Bolt's default blue
   ---------------------------------------------------------------------------
   Bolt renders and owns this button — the "overlay our own face over it" approach
   was withdrawn earlier in this file, because opacity:0 on the wrapper made Bolt's
   own modal invisible too. So the only way to change the colour is to restyle
   Bolt's injected markup in place, which is what the cart page already does
   (assets/css/theme.css:5169) and this mirrors, so both buttons match.

   Two selectors per rule, because Bolt's class names are build hashes:

     .XewGf4SbZrqg3pYNtMsk  — the button box in the current SDK build. Exact, and
       already proven against the live build by the cart-page rule above.
     the structural selectors — hash-free fallback, so a Bolt release that renames
       its classes leaves the button orange rather than silently blue again.

   If Bolt does rename them and the colour reverts, inspect the button, copy the
   class on the element that carries the blue background, and add it below —
   nothing else needs to change.

   !important throughout: Bolt sets these inline on its own elements.
   =========================================================================== */

.aecb-bolt__real .XewGf4SbZrqg3pYNtMsk,
.aecb-bolt__real > div > div,
.aecb-bolt__real button,
.aecb-bolt__real [role="button"] {
	background: #f90 !important;
	background-color: #f90 !important;
	border-color: #f90 !important;
	border-radius: 10px !important;
	color: #fff !important;
}

.aecb-bolt__real:hover .XewGf4SbZrqg3pYNtMsk,
.aecb-bolt__real:hover > div > div,
.aecb-bolt__real:hover button,
.aecb-bolt__real:hover [role="button"] {
	background: #e0830f !important;
	background-color: #e0830f !important;
	border-color: #e0830f !important;
}

/* The label and the lightning mark inherit from the box above, but Bolt colours
   both explicitly, so they need saying again. currentColor on the icon keeps it
   tied to the label rather than hard-coding white twice. */
.aecb-bolt__real .TDT_dCbYI_7bmqlo4bT0,
.aecb-bolt__real span,
.aecb-bolt__real p {
	color: #fff !important;
}

.aecb-bolt__real svg,
.aecb-bolt__real svg path {
	fill: currentColor !important;
}

/* ===========================================================================
   Bolt button: full width
   ---------------------------------------------------------------------------
   Bolt sizes its button to its own content, so it came out narrower than the
   coupon and gift-card controls above it and the place-order row it sits in.
   Widening the wrapper alone does nothing — the width is set on Bolt's injected
   elements, and there can be more than one level of them.

   Matching all descendant divs is the same approach the cart page takes
   (assets/css/theme.css:4138), so both Bolt buttons on the site are stretched
   the same way. Kept scoped to .aecb-bolt so the cart-page button, which has its
   own width rules, is untouched.

   Spans are deliberately excluded: the label must stay auto-width or it stretches
   and the text stops centring — the reason theme.css:5774 exists.
   =========================================================================== */

.aecb-bolt .bolt-checkout-button,
.aecb-bolt .bolt-checkout-button div,
.aecb-bolt .bolt-checkout-button button,
.aecb-bolt .bolt-checkout-button iframe {
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box !important;
}

/* Content stays centred in a box that is now wider than it needs to be. */
.aecb-bolt .bolt-checkout-button .XewGf4SbZrqg3pYNtMsk,
.aecb-bolt .bolt-checkout-button > div > div,
.aecb-bolt .bolt-checkout-button button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.aecb-bolt .bolt-checkout-button span,
.aecb-bolt .bolt-checkout-button .TDT_dCbYI_7bmqlo4bT0 {
	width: auto !important;
	max-width: none !important;
}

/* ===========================================================================
   Amazon and PayPal as option cards
   ---------------------------------------------------------------------------
   These rows became options in the mode question when the "Pay with Amazon or
   PayPal" card was removed, but they still LOOKED like a WooCommerce gateway
   list: two hairline-separated rows with a native radio, sitting inside
   #payment's own bordered panel and inset from the Bolt card above them by that
   panel's padding. Three options to one question, drawn two different ways.

   So this section restyles them as .aecb-modes__option — same 12px stack, same
   card, same drawn orange mark, same hover and selected states. The values are
   repeated rather than shared through a common class because the markup is
   WooCommerce's: checkout/payment.php builds the <ul> and payment-method.php the
   rows, and neither can be handed .aecb-modes__option without overriding more of
   WooCommerce than this is worth. Change one, change the other — the mode card's
   block is "Mode cards" above, around .aecb-modes__option.

   All of it is scoped to body.aecb-has-modes, so a checkout where Bolt is
   unconfigured never had the mode question and keeps the gateway list it had.

   The rules being beaten live in assets/css/custom-css.css (~3362) and
   assets/css/theme.css (~6031), the deepest of them four selectors from
   body.ae-checkout — which is what the id-carrying depth here is for, rather than
   another layer of !important.
   =========================================================================== */

/* #payment's own panel: border, background and padding all go.
   It framed the gateway list back when that list was a sub-choice a card
   revealed. Its contents are two of the three top-level options now, and a frame
   drawn around two of three — with padding insetting them from the third — is
   most of what made them read as a different kind of thing. Without it the
   heading, all three cards and the button share one left edge. */
body.aecb-has-modes.ae-checkout #order_review #payment,
body.aecb-has-modes.ae-checkout #order_review .woocommerce-checkout-payment {
	margin-top: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* The list becomes the grid the mode cards use, at the same 12px gap, so the Bolt
   card and these two read as one evenly spaced stack. */
body.aecb-has-modes.ae-checkout #order_review #payment ul.payment_methods {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

/* The row itself: .aecb-modes__option, in WooCommerce's markup.

   flex rather than the cards' 2-column grid because theme.css pins these rows to
   display:flex !important and there is no beating that except with another
   !important. It lays out the same either way — the mark and the logo are one
   row, and there is no hint line to drop underneath.

   :last-child is named explicitly alongside the plain selector, which looks
   redundant and is not: custom-css.css turns the separator off on the last row
   with a rule of exactly this specificity, so a tie would be settled by
   stylesheet order — and which of the two files loads last is not something this
   file should depend on. */
body.aecb-has-modes.ae-checkout #order_review #payment ul.payment_methods > li,
body.aecb-has-modes.ae-checkout #order_review #payment ul.payment_methods > li:last-child {
	display: flex;
	align-items: center;
	/* gap: 10px; */
	margin: 0;
	padding: 16px 18px;
	border: 1px solid #dcdcde;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.wc_payment_methods.payment_methods li.wc_payment_method label{
   margin-left: 10px !important;
}
body.aecb-has-modes.ae-checkout #order_review #payment ul.payment_methods > li:hover {
	border-color: #b9b9bd;
}

/* Selected state, expressed twice for the same reason the mode cards express it
   twice: :has for browsers that support it, and .is-selected kept in sync by
   syncGatewaySelection() in aecb-checkout.js for those that do not. */
body.aecb-has-modes.ae-checkout #order_review #payment ul.payment_methods > li.is-selected,
body.aecb-has-modes.ae-checkout #order_review #payment ul.payment_methods > li:has( input[name="payment_method"]:checked ) {
	border-color: #f90;
	background: #fffaf2;
	box-shadow: 0 0 0 1px #f90 inset;
}

/* Focus ring on the CARD, matching .aecb-modes__option:focus-within, so tabbing
   through all three options draws the same indicator each time rather than a card
   outline for one and a 20px circle for the other two.

   Which means the input's own ring has to go, or a focused row would carry two —
   and this is the one place where suppressing a focus outline is not a
   regression, since the ring it replaces is larger and higher contrast. */
body.aecb-has-modes.ae-checkout #order_review #payment ul.payment_methods > li:focus-within {
	outline: 2px solid #202020;
	outline-offset: 2px;
}

body.aecb-has-modes.ae-checkout #order_review #payment ul.payment_methods > li > input[name="payment_method"]:focus,
body.aecb-has-modes.ae-checkout #order_review #payment ul.payment_methods > li > input[name="payment_method"]:focus-visible {
	outline: none;
}

/* The drawn mark, on the input itself.

   The mode cards can afford a separate <span class="aecb-modes__mark"> because we
   write their markup. payment-method.php's radio has no such sibling, and adding
   one would introduce a mark that could disagree with the input beside it — so
   appearance:none turns the input into the mark instead, and the thing drawn is
   the thing checked.

   The inner dot is an inset box-shadow rather than ::after, deliberately: an
   <input> has no children to generate a pseudo-element from, and whether one
   renders at all is engine-dependent. The arithmetic instead — 20px border-box,
   2px border leaving a 16px padding box, a 3px white inset ring inside that
   leaving a 10px orange centre. The same 20px mark with a 10px dot as
   .aecb-modes__mark, by construction rather than by eye. */
body.aecb-has-modes.ae-checkout #order_review #payment ul.payment_methods > li > input[name="payment_method"] {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 2px solid #b9b9bd;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .15s ease, background-color .15s ease;
}

body.aecb-has-modes.ae-checkout #order_review #payment ul.payment_methods > li > input[name="payment_method"]:checked {
	border-color: #f90;
	background: #f90;
	box-shadow: inset 0 0 0 3px #fff;
}

/* The label is the rest of the card. flex: 1 1 auto so it stretches across the
   whole remaining width — most of the card is then a real hit area, which is what
   the cursor:pointer on the row promises. The strip that is still not the label —
   the padding, and the gap beside the mark — is forwarded to the radio by a click
   handler in aecb-checkout.js. */
body.aecb-has-modes.ae-checkout #order_review #payment ul.payment_methods > li > label {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #202020;
	cursor: pointer;
}

/* The gateway's own panel, where it renders one: a full-width row inside the
   card, not a third flex item squeezed in beside the logo. */
body.aecb-has-modes.ae-checkout #order_review #payment ul.payment_methods > li > .payment_box {
	flex: 0 0 100%;
	margin: 12px 0 0;
}

@media (max-width: 600px) {
	body.aecb-has-modes.ae-checkout #order_review #payment ul.payment_methods > li,
	body.aecb-has-modes.ae-checkout #order_review #payment ul.payment_methods > li:last-child {
		padding: 14px 16px;
	}
}

/* ===========================================================================
   Bolt mode: no gateway row is the answer
   ---------------------------------------------------------------------------
   A guard on the PAINT, not on the state, and the two are worth separating.

   The state is fixed where it is created: checkout/payment-method.php no longer
   renders `checked` or .is-selected on a row while Bolt mode is on, because the
   session deliberately keeps naming a real gateway in that mode
   (AECB_Mode::limit_gateways) and WooCommerce turns that into $gateway->chosen.
   applyMode() in aecb-checkout.js clears it again on every pass, for the case
   where WooCommerce's own init_payment_methods() re-checks the first row after
   finding none checked.

   Both of those are corrections applied to a checkedness that something else
   set, which means either can be beaten by anything that sets it again later —
   and on this site that is a live possibility rather than a hypothetical: the
   Amazon Pay plugin is not in the local tree at all, so its frontend script is
   code we cannot read, and a gateway re-asserting its own radio on
   updated_checkout is ordinary behaviour for one.

   This rule does not race anything. In Bolt mode there IS no chosen gateway —
   that is what the mode means — so the selected treatment is switched off for
   these rows outright, keyed off the same body class the whole stylesheet uses
   as the source of truth for the mode. Whatever checks the radio, and whenever,
   the row cannot paint as the second selected answer to a one-answer question.

   The radio still reports checked to the DOM and to form serialization; only its
   appearance is neutralised. Nothing here touches Other mode, where a chosen row
   is exactly what should be highlighted.

   The extra .aecb-mode-bolt on the body compound is what wins against the
   .is-selected and :has() rules earlier in this file — one more class, same ids.
   =========================================================================== */

body.aecb-has-modes.aecb-mode-wallet #order_review #payment ul.payment_methods > li,
body.aecb-has-modes.aecb-mode-wallet #order_review #payment ul.payment_methods > li.is-selected,
body.aecb-has-modes.aecb-mode-wallet #order_review #payment ul.payment_methods > li:has( input[name="payment_method"]:checked ) {
	border-color: #dcdcde;
	background: #fff;
	box-shadow: none;
}

body.aecb-has-modes.aecb-mode-wallet #order_review #payment ul.payment_methods > li:hover {
	border-color: #b9b9bd;
}

/* The drawn mark, back to its unselected state: grey ring, white centre, no dot. */
body.aecb-has-modes.aecb-mode-wallet #order_review #payment ul.payment_methods > li > input[name="payment_method"],
body.aecb-has-modes.aecb-mode-bolt #order_review #payment ul.payment_methods > li > input[name="payment_method"]:checked {
	border-color: #b9b9bd;
	background: #fff;
	box-shadow: none;
}

/* ===========================================================================
   Apple Pay mode
   ---------------------------------------------------------------------------
   A third mode alongside Bolt and Other, driven by body.aecb-mode-applepay.
   Everything the two WALLET modes share -- the hidden address form, the hidden
   terms row and native Place order, the suppressed selected-state on the
   gateway rows -- is already handled above under .aecb-mode-wallet, which
   AECB_Mode adds for Bolt and Apple Pay alike. What is left here is the part
   that differs: which button is on screen.

   Stripe's express element is NOT re-parented into the place-order row, and
   that is deliberate rather than lazy. It owns a live cross-origin iframe, and
   moving an iframe in the DOM reloads it and detaches the SDK behind it -- the
   same hazard hideOtherGatewayUI() documents for the Amazon and PayPal
   containers, which is why that function hides them where they stand instead
   of collecting them. So the element stays where the plugin puts it
   (woocommerce_checkout_before_customer_details) and is simply revealed in
   this mode and hidden in the others.

   The consequence worth knowing: the Apple Pay button appears at the TOP of
   the form column, not in the right-hand panel where Bolt's button sits. With
   the address form hidden in this mode there is nothing else in that column,
   so it reads as the page's one action -- but it is not in the same place as
   the Bolt button, and making it so would mean moving the iframe.
   =========================================================================== */

/* Stripe's express checkout: only ever in its own mode.
   Without this it would render in Bolt and Other modes too, putting an Apple
   Pay button next to Bolt's button and above the gateway rows -- the same
   double-button problem the name-based sweep solves for PayPal and Amazon,
   which cannot catch this one because nothing in its markup names a gateway. */
body.aecb-has-modes:not( .aecb-mode-applepay ) #wc-stripe-express-checkout-element,
body.aecb-has-modes:not( .aecb-mode-applepay ) #wc-stripe-express-checkout-button-separator {
	display: none !important;
}

/* Note what is NOT set here: display.
   Stripe prints this element with an inline style="...display:none;" and reveals it from
   its own JS once the Element has mounted. Forcing display:block would win against that
   inline style and show an empty box for the moment before mounting -- and worse, would
   keep showing one if the Element never mounted at all (no card in Wallet, an
   unsupported browser, a failed key), turning a graceful absence into a blank gap. So
   visibility is left to Stripe, and this rule only handles width and spacing.

   The :not() rule above is still display:none !important, which is correct: in the other
   modes the element must be hidden whether Stripe has revealed it or not. */
body.aecb-has-modes.aecb-mode-applepay #wc-stripe-express-checkout-element {
	width: 100%;
	margin: 12px 0 0;
	clear: both;
}

/* Stripe draws an "or" divider between the wallet and the form beneath it.
   There is no form beneath it in this mode. */
body.aecb-has-modes.aecb-mode-applepay #wc-stripe-express-checkout-button-separator {
	display: none !important;
}

/* Bolt's button belongs to Bolt mode alone. The rule above that keeps it
   visible is scoped to .aecb-mode-bolt, but .aecb-bolt has display:block from
   the base block, so Apple Pay mode has to take it off explicitly. */
body.aecb-has-modes.aecb-mode-applepay .aecb-bolt,
body.aecb-has-modes.aecb-mode-applepay .aecb-bolt__status {
	display: none !important;
}

/* The address column needs no exception any more.
   ae_move_stripe_express_checkout() in functions-additions.php re-hooks the button
   from woocommerce_checkout_before_customer_details to
   woocommerce_checkout_after_order_review, so it renders at the foot of the sidebar
   panel, after the gateway rows, rather than at the top of the form column. That
   column can stay hidden exactly as it does in Bolt mode.

   It is OUTSIDE #order_review, deliberately -- see the long note on $target in that
   function. Which means it is not a child of .place-order and the :not() exclusion
   on the wallet rule above no longer has anything to catch; that exclusion is kept
   only so re-pointing ae_stripe_express_checkout_hook back into the place-order row
   does not silently hide the button. The element's own width and spacing are set
   once, further up this block. */

/* The Apple mark on the mode card: black, like Apple's own guidance, and sized
   to match the lightning on the Bolt card above it. */
[data-aecb-modes] .aecb-modes__brand--apple-pay {
	color: #000;
}

[data-aecb-modes] .aecb-modes__brand--apple-pay svg {
	width: 15px;
	height: 18px;
}

/* ===========================================================================
   Affirm promo, below the four options
   ---------------------------------------------------------------------------
   Rendered on aecb_after_payment_methods at priority 20 -- the theme's own hook
   in woocommerce/checkout/payment.php, shared with the Apple Pay card at 10.
   So it sits directly under the fourth option and directly above .place-order
   (ae_affirm_checkout_promo() in functions-additions.php).

   IT IS NO LONGER INSIDE [data-aecb-modes]. Every rule in this block used to be
   scoped to that attribute, because the promo rendered inside the mode selector
   on aecb_after_modes_title. It is now a sibling of ul.payment_methods inside
   #payment, so those selectors match nothing at all and the scope has moved to
   #payment with them. If the promo is ever hooked back into the selector, this
   whole block has to move back with it -- silently losing its styling is the
   failure mode, and an unstyled Affirm line looks like a broken sentence rather
   than like missing CSS.

   The link colours in custom-css.css (~3305) are unaffected: they are scoped to
   the class, which did not change.
   =========================================================================== */

/* No card, no box. It was given a bordered #fafafa card when it sat above the
   options, to read as context rather than as a fourth thing to pick. Below them
   it does not need one: nothing follows it but the pay buttons, so there is no
   question of mistaking it for an option, and a second bordered rectangle under
   four bordered cards just added a fifth outline to count.

   A single rule takes its place. border-top is the divider between the Apple Pay
   card and this line -- one horizontal rule rather than an enclosing box. It is
   both halves of the request: the border comes off, the divider goes on, and one
   declaration does it, so there is no box and rule fighting over the same edge.

   #dcdcde matches the option-card borders above rather than introducing a second
   grey; padding-top holds the text off the rule by the same 12px that separates
   the cards. The gap BELOW is left to .place-order's own top spacing -- the same
   gap that was already there before anything was inserted above it. */
body.aecb-has-modes.ae-checkout #order_review #payment .ae-affirm-promo {
	margin: 12px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 13.5px;
	line-height: 1.55;
	color: #202020;
}

/* Affirm builds the sentence itself and ships its own colours with it, which is
   why the line came out noticeably fainter than everything around it. The text
   is pulled back to the same near-black the option labels use.

   !important, and it is doing real work here rather than padding: the markup is
   injected by Affirm's script after render and carries inline styles, which a
   plain declaration cannot outrank.

   Scoped to the promo, and deliberately not applied to <a> — the "See if you
   qualify" link keeps the brand red from custom-css.css (~3305), and the "0% APR"
   badge keeps Affirm's own colours, since both are meant to stand out. */
body.aecb-has-modes.ae-checkout #order_review #payment .ae-affirm-promo,
body.aecb-has-modes.ae-checkout #order_review #payment .ae-affirm-promo p,
body.aecb-has-modes.ae-checkout #order_review #payment .ae-affirm-promo span:not( [class*="badge" ] ):not( [class*="apr" ] ) {
	color: #202020 !important;
	font-size: 13.5px !important;
	line-height: 1.55 !important;
}

/* Affirm's logo sits inline in the sentence; keep it on the text baseline
   rather than letting it ride high and stretch the line. */
body.aecb-has-modes.ae-checkout #order_review #payment .ae-affirm-promo img,
body.aecb-has-modes.ae-checkout #order_review #payment .ae-affirm-promo svg {
	vertical-align: middle;
	max-height: 14px;
	width: auto;
}

/* Below Affirm's minimum the wrapper is rendered empty on purpose -- it has to
   stay in the DOM for the update_order_review fragment to have something to
   replace when the total rises back above it.

   :empty earns its keep twice over now. It always stopped the placeholder adding
   blank space; since the promo carries the divider on its own border-top, it also
   stops a horizontal rule being drawn under Apple Pay with nothing beneath it --
   which would read as a broken layout rather than as an absent offer. Any future
   markup change that puts whitespace inside that wrapper breaks :empty and brings
   the stray rule back. */
body.aecb-has-modes.ae-checkout #order_review #payment .ae-affirm-promo:empty {
	display: none;
}

body.aecb-has-modes.ae-checkout #order_review #payment .ae-affirm-promo p {
	margin: 0;
}