/* Stripe-specific checkout styling (CLAUDE.md #46, established 2026-07-28) —
   moved here from the theme's boom.css, which is where it was first written
   before that rule existed. Depends on 'boom-tokens' (enqueue.php) for the
   --color-*-checkout-info/--space-*/--radius-*/--violet-*/--ink-* custom
   properties used below. */

/* Apple Pay/Google Pay express-checkout card (boom-core's
   express-checkout-layout.php, added 2026-07-28 mockup update) - wraps
   woocommerce-gateway-stripe's own #wc-stripe-express-checkout-element
   button container in this project's header pill (.boom-checkout-head,
   reused from the theme as-is) + info notice (same --checkout-blue-*
   tokens/24px pill-icon shape as the theme's .boom-already-client) + a
   divider line replacing the plugin's own bare "OR" separator (hidden
   below, not deleted - can't edit plugin files). The card is always
   visible; only .boom-express-checkout-loading-button below toggles
   against the real button container's own show/hide state
   (stripe-checkout.js's initExpressCheckoutCardVisibility()). */
.boom-express-checkout-card { margin-bottom: var(--space-8); }
.boom-express-checkout-notice {
	display: flex; align-items: flex-start; gap: var(--space-5);
	background: var(--color-bg-checkout-info);
	border: 1px solid var(--color-border-checkout-info);
	border-radius: var(--radius-md);
	padding: var(--space-5) var(--space-6);
	margin-top: var(--space-6);
}
.boom-express-checkout-notice__icon {
	width: 24px; height: 24px; flex-shrink: 0;
	border-radius: var(--radius-pill);
	background: var(--color-icon-checkout-info);
	display: flex; align-items: center; justify-content: center;
}
.boom-express-checkout-notice__icon i { font-size: 14px; color: #fff; }
.boom-express-checkout-notice__text { font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--color-text-checkout-info); line-height: var(--leading-relaxed); }
.boom-express-checkout-divider { margin-top: var(--space-7); text-align: center; font-size: var(--text-2xs); color: var(--color-text-secondary); }
/* The plugin's own native separator ("OR"/"OU") is redundant now that
   .boom-express-checkout-divider says the same thing in full - hidden,
   not deleted, since it's plugin-rendered markup. */
#wc-stripe-express-checkout-button-separator, #wc-stripe-payment-request-button-separator { display: none !important; }

/* Single disabled loading button shown in place of the two real Apple Pay/
   Google Pay buttons while woocommerce-gateway-stripe hasn't yet resolved
   whether this browser/device can actually pay with either wallet - sits
   between the notice and the plugin's own #wc-stripe-express-checkout-
   element in DOM order, so it visually occupies the same slot the real
   buttons mount into. Replaces the 2026-07-28 standalone loading box
   (.boom-express-checkout-loading, removed) that floated below the whole
   card while the card itself stayed display:none - reported "ugly" since it
   read as a disconnected element rather than part of this section.
   Colors/radius/spacing mapped to this project's own tokens closest to the
   mockup's raw values: --violet-100 (#ece9f7) for the mockup's #EDEBF5,
   --ink-500 (#8a8496) for the mockup's #8A8598, --radius-lg (14px) and
   --space-7 (14px) match the mockup's radius/padding exactly. */
.boom-express-checkout-loading-button {
	display: none;
	width: 100%;
	align-items: center; justify-content: center;
	gap: var(--space-4);
	background: var(--violet-100);
	color: var(--ink-500);
	border: none;
	border-radius: var(--radius-lg);
	padding: var(--space-7);
	margin-top: var(--space-6);
	font-size: 12.5px;
	font-weight: var(--weight-bold);
	letter-spacing: 0.4px;
	text-transform: uppercase;
	cursor: not-allowed;
}
.boom-express-checkout-loading-button.is-open { display: flex; }
/* Motion is functional (a real progress indicator for a real pending async
   check), not decorative - tokens.css's "no decorative looping animation"
   rule is about ornamental motion, not this; same justification already
   used for the theme's own .boom-cart-added-popup__spinner. */
.boom-express-checkout-loading-button i { font-size: 16px; animation: boom-spin 0.9s linear infinite; }
@keyframes boom-spin { to { transform: rotate(360deg); } }

/* Stripe's own UPE card-element fieldset ships with no theme styling, so it
   falls back to the browser's default fieldset UA box (border/padding/
   margin) — a plain gray/black sharp-cornered box, off-pattern with the
   rest of the checkout. Restyled to match .boom-field__input-wrap's own
   bordered-box treatment (same tokens: hairline border, radius-md,
   surface-tint background) so it reads as one more field in this form,
   not a foreign embed.

   overflow: hidden added 2026-07-28, user-reported: Stripe's own iframe
   ships with an inline style (their own JS, not this theme's doing -
   confirmed live: style="margin:-4px; width:calc(100% + 8px); ...")
   that deliberately oversizes it 4px past each edge of its own direct
   parent - a standard Stripe Elements technique, not a bug on their
   end. Without an overflow:hidden ancestor to clip that intentional
   bleed, it visually spilled outside this box's own rounded border
   instead of respecting it. */
#wc-stripe-upe-form {
	margin: 0;
	background: var(--color-bg-surface-tint);
	border: var(--border-hairline);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	overflow: hidden;
}