/**
 * Add-ons, picker, confirm and status.
 *
 * NEUTRAL PALETTE (2026-08-22). These surfaces are SHARED between Hadeda and
 * Steady customers (/add-ons/, /my-account/top-up/), so they do not wear either
 * brand's colours. They match the shared chrome deployed 18 Aug — charcoal
 * #262626 ground with bronze #B08D57 — and deliberately do NOT read the site
 * design system's --hd-* brand variables. RULE (Ed, 2026-08-22): components in
 * this plugin must not consume the site-wide design system, because the design
 * system IS Hadeda's brand — reading it is how a shared surface silently turns
 * green again on the next component. (The status block's error red still
 * reads --hd-red: that is a semantic colour, not a brand one.)
 *
 * Everything else is structural: spacing, layout, state. The one place colour is
 * load-bearing rather than decorative is the status block, where "is my top-up
 * in trouble?" has to be visible without reading.
 *
 * CONTRAST — MEASURED 2026-08-22 (WCAG 2.x relative luminance), not asserted:
 *   white #FFFFFF on card ground #262626 ............ 15.13:1  AAA
 *   white #FFFFFF on selected ground #1A1A1A ........ 17.40:1  AAA
 *   bronze #B08D57 on card ground #262626 ...........  4.90:1  AA  (body text)
 *   bronze #B08D57 on selected ground #1A1A1A .......  5.63:1  AA  (body text)
 *   ink #262626 on bronze button #B08D57 ............  4.90:1  AA  (body text)
 *   bronze ring #B08D57 against #262626 (non-text) ..  4.90:1  > 3:1
 *   charcoal heading #262626 on white ............... 15.13:1  AAA
 * Re-measure if any value below changes; do not edit the numbers by hand.
 */

:root {
	--hadeda-ground: #262626;        /* card ground — shared chrome charcoal */
	--hadeda-ground-selected: #1A1A1A;
	--hadeda-accent: #B08D57;        /* bronze — price, ring, button */
	--hadeda-accent-hover: #9E7D4B;
	--hadeda-ink: #262626;           /* headings and dark text on bronze/tint */
	--hadeda-rule: #E0E0E0;
	--hadeda-tint: #F3F1EC;          /* warm neutral tint for highlights/confirm */
	--hadeda-radius: 8px;
	--hadeda-radius-lg: 12px;
	--hadeda-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Section headings: charcoal, never the theme's accent colour. */
.hadeda-addons h1,
.hadeda-addons h2,
.hadeda-addons h3,
.hadeda-topup h2,
.hadeda-topup h3 {
	color: var(--hadeda-ink);
}

.hadeda-topup__lines,
.hadeda-topup__products {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

@media (min-width: 40em) {
	.hadeda-topup__products { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}

/* ==========================================================================
   Picker cards — selectable, so selection must be unmistakable
   ==========================================================================
   These are choices, not adverts, and the customer is about to spend money on
   whichever one is highlighted. Three signals, because colour alone fails for
   anyone who cannot distinguish the two charcoals — and because "which one did
   I pick?" is the question this screen
   exists to answer. Unselected sits on --hadeda-ground, selected drops to
   --hadeda-ground-selected AND gains a bronze ring AND a tick. Contrast: see
   the measured table at the top of this file.
   ========================================================================== */

.hadeda-line-card,
.hadeda-product-card {
	position: relative;
	display: block;
	padding: 1.1rem 1.15rem;
	background: var(--hadeda-ground);
	color: #fff;
	border: 2px solid transparent;
	border-radius: var(--hadeda-radius);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.hadeda-line-card:hover,
.hadeda-product-card:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
	.hadeda-line-card, .hadeda-product-card { transition: none; }
	.hadeda-line-card:hover, .hadeda-product-card:hover { transform: none; }
}

/* Selected — :has() for modern browsers, .is-selected set by JS as the fallback
   so the state never depends on one CSS feature. */
.hadeda-line-card:has(input:checked),
.hadeda-product-card:has(input:checked),
.hadeda-line-card.is-selected,
.hadeda-product-card.is-selected {
	background: var(--hadeda-ground-selected);
	border-color: var(--hadeda-accent);
	box-shadow: 0 0 0 1px var(--hadeda-accent);
}

/* The tick. Third signal, independent of colour. */
.hadeda-line-card:has(input:checked)::after,
.hadeda-product-card:has(input:checked)::after,
.hadeda-line-card.is-selected::after,
.hadeda-product-card.is-selected::after {
	content: "✓";
	position: absolute;
	top: 0.6rem;
	right: 0.75rem;
	width: 1.5rem;
	height: 1.5rem;
	line-height: 1.5rem;
	text-align: center;
	border-radius: 50%;
	background: var(--hadeda-accent);
	color: var(--hadeda-ink);
	font-weight: 700;
	font-size: 0.9rem;
}

.hadeda-line-card:focus-within,
.hadeda-product-card:focus-within {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* The radio itself is visually replaced by the card, but must stay reachable
   by keyboard and screen readers — never display:none. */
.hadeda-line-card input,
.hadeda-product-card input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.hadeda-line-card__body { display: grid; gap: 0.3rem; padding-right: 2rem; }
.hadeda-line-card__name { font-weight: 700; font-size: 1.05rem; }
.hadeda-line-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.85em;
	color: rgba(255, 255, 255, 0.85);
}
.hadeda-line-card__data { font-size: 0.9em; color: var(--hadeda-accent); font-weight: 600; }

/* Waiting top-ups. Deliberately QUIETER than the usable-now figure above it:
   both are true, but only one is spendable today, and equal weight would let a
   customer read the reserve as available balance (finding F6). */
.hadeda-line-card__waiting {
	display: block;
	margin-top: 2px;
	font-size: 0.85em;
	font-weight: 500;
	color: rgba( 255, 255, 255, 0.78 );
}
.hadeda-line-card__waiting-note {
	display: block;
	font-size: 0.92em;
	font-weight: 400;
	color: rgba( 255, 255, 255, 0.6 );
}

.hadeda-product-card__name  { display: block; font-weight: 700; padding-right: 2rem; }
.hadeda-product-card__price {
	display: block;
	margin: 0.35rem 0 0.2rem;
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--hadeda-accent);
	line-height: 1.1;
}
.hadeda-product-card__price .woocommerce-Price-amount,
.hadeda-product-card__price bdi { font-size: inherit; font-weight: inherit; color: inherit; }
.hadeda-product-card__strap { display: block; font-size: 0.875em; color: rgba(255, 255, 255, 0.85); }

.hadeda-topup__lede { margin-bottom: 1rem; }

/* Confirm ------------------------------------------------------------------
   Appears the moment a valid line+add-on pair passes pre-flight, and is the
   last thing seen before money moves. Deliberately NOT another dark card: it
   must read as a distinct step, not a fourth option to choose between. */

.hadeda-confirm {
	margin: 1.5rem 0;
	padding: 1.35rem 1.5rem;
	background: var(--hadeda-tint);
	border: 2px solid var(--hadeda-ground-selected);
	border-radius: var(--hadeda-radius-lg);
	color: var(--hadeda-ink);
}

.hadeda-confirm h3 { margin: 0 0 0.6rem; color: var(--hadeda-ground-selected); }
.hadeda-confirm__summary { font-size: 1.05rem; margin: 0 0 0.75rem; }
.hadeda-confirm__facts { margin: 0.75rem 0; padding-left: 1.25rem; line-height: 1.6; }
.hadeda-confirm__price { font-weight: 700; font-size: 1.15rem; color: var(--hadeda-ground-selected); }
.hadeda-confirm__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }

.hadeda-confirm__actions .button-primary,
.hadeda-confirm [data-hadeda-confirm-go] {
	background: var(--hadeda-accent) !important;
	color: var(--hadeda-ink) !important;
	border: none !important;
	font-weight: 700;
	padding: 0.75rem 1.4rem;
	border-radius: var(--hadeda-radius);
	cursor: pointer;
}

.hadeda-confirm [data-hadeda-confirm-go]:hover { background: var(--hadeda-accent-hover) !important; }

.hadeda-confirm [data-hadeda-confirm-back] {
	background: transparent !important;
	color: var(--hadeda-ground-selected) !important;
	border: 2px solid var(--hadeda-ground-selected) !important;
	font-weight: 600;
	padding: 0.75rem 1.4rem;
	border-radius: var(--hadeda-radius);
	cursor: pointer;
}

.hadeda-confirm__smallprint { font-size: 0.8125em; opacity: 0.85; margin-top: 0.8rem; }

/* Status ----------------------------------------------------------------- */

.hadeda-addon-status__item {
	padding: 1rem;
	border-left: 4px solid currentColor;
	margin-bottom: 0.75rem;
}
.hadeda-addon-status__headline { font-weight: 700; margin: 0 0 0.25rem; }
.hadeda-addon-status__detail   { margin: 0; font-size: 0.9375em; }

/* In-flight: a subtle pulse says "we are still working" without a spinner
   that would imply a promise about timing. */
.hadeda-addon-status__item--applying,
.hadeda-addon-status__item--pending { animation: hadeda-pulse 2s ease-in-out infinite; }

@keyframes hadeda-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }

@media (prefers-reduced-motion: reduce) {
	.hadeda-addon-status__item--applying,
	.hadeda-addon-status__item--pending { animation: none; }
}

/* `checking` is the one state a human should notice from across the room. */
.hadeda-addon-status__item--checking { border-left-width: 6px; font-weight: 500; }

.hadeda-topup__notice[hidden],
.hadeda-confirm[hidden] { display: none; }

.hadeda-topup__notice {
	padding: 0.75rem 1rem;
	border: 2px solid currentColor;
	border-radius: 0.375rem;
	margin: 1rem 0;
}

.hadeda-addons__smallprint { font-size: 0.8125em; opacity: 0.8; }


/* ==========================================================================
   Marketing page cards — full brand treatment
   ==========================================================================
   Solid charcoal, matching the shared footer, so
   the page reads as one brand rather than two. Every value below resolves to a
   design-system token; the literals in :root are fallbacks, not decisions.

   CONTRAST, MEASURED (WCAG 2.1 relative luminance):
     white on --hadeda-ground #262626 ........ 15.13:1 AAA (measured 2026-08-22)
     bronze #B08D57 on --hadeda-ground #262626  4.90:1  AA (measured 2026-08-22)
     rgba(255,255,255,.85) strapline .........  ~9:1   AAA
     ink #262626 on bronze #B08D57 ...........  4.90:1  AA  (button, measured 2026-08-22)

   The button is bronze with DARK text. That is deliberate and it differs from
   the design system's own .hd-btn-gold, which pairs gold with WHITE text and
   measures 2.3:1 — below the 4.5:1 AA floor. Production's own "Subscribe Now"
   already uses bronze-with-charcoal, so dark-on-bronze is both the accessible
   choice and the one already shipping. Flagged for the design system to fix.
   ========================================================================== */

.hadeda-addons__cards {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.hadeda-addons__card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.75rem 1.25rem;
	background: var(--hadeda-ground);
	color: #fff;
	border-radius: var(--hadeda-radius-lg);
	box-shadow: var(--hadeda-shadow);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hadeda-addons__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

@media (prefers-reduced-motion: reduce) {
	.hadeda-addons__card { transition: none; }
	.hadeda-addons__card:hover { transform: none; }
}

.hadeda-addons__card-name {
	font-size: 1.125rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.3;
}

/* The number the customer is comparing. Bronze on charcoal, 4.90:1 (measured 2026-08-22). */
.hadeda-addons__card-price {
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1.05;
	color: var(--hadeda-accent);
}

/* WooCommerce wraps prices in its own markup and would otherwise shrink them. */
.hadeda-addons__card-price .woocommerce-Price-amount,
.hadeda-addons__card-price bdi,
.hadeda-addons__card-price span {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.hadeda-addons__card-strap {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	flex: 1 1 auto; /* pushes every button to a shared baseline */
}

.hadeda-addons__card-btn {
	display: inline-block;
	margin-top: 0.75rem;
	padding: 0.8rem 1.25rem;
	background: var(--hadeda-accent);
	color: var(--hadeda-ink) !important;
	font-weight: 700;
	text-align: center;
	text-decoration: none !important;
	border-radius: var(--hadeda-radius);
	transition: background 0.15s ease;
}

.hadeda-addons__card-btn:hover,
.hadeda-addons__card-btn:focus {
	background: var(--hadeda-accent-hover);
	color: var(--hadeda-ink) !important;
}

/* White ring, because a bronze ring on a bronze button is invisible. */
.hadeda-addons__card-btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* Highlight + small print ---------------------------------------------------- */

.hadeda-addons__highlight {
	padding: 1rem 1.25rem;
	background: var(--hadeda-tint);
	border-left: 4px solid var(--hadeda-ground-selected);
	border-radius: 0 var(--hadeda-radius) var(--hadeda-radius) 0;
	color: var(--hadeda-ink);
}

.hadeda-addons__section { margin-bottom: 2.5rem; }
.hadeda-addons__how { line-height: 1.7; }
.hadeda-addons__cta { margin: 1.5rem 0; }
.hadeda-addons__smallprint { font-size: 0.8125em; opacity: 0.8; }


/* ==========================================================================
   Notices inside the add-ons page
   ==========================================================================
   The basket page carries an Elementor notices widget whose inline CSS sets
   .woocommerce-error { display: none } so the widget can render them itself.
   That rule is scoped to that page, but a refusal the customer cannot read is
   worse than no refusal at all, so scope ours explicitly and make it win.
   ========================================================================== */

.hadeda-addons .woocommerce-notices-wrapper,
.hadeda-addons .woocommerce-error,
.hadeda-addons .woocommerce-info,
.hadeda-addons .woocommerce-message {
	display: block !important;
	margin: 0 0 1.5rem;
	list-style: none;
	border-radius: var(--hadeda-radius);
	color: var(--hadeda-ink);
	font-size: 0.95rem;
}

/**
 * Icon clearance.
 *
 * WooCommerce renders the notice icon as a ::before positioned inside the box,
 * so a notice needs left padding to sit clear of it. The site's own custom CSS
 * already solves this — `position: relative` plus `padding-left: 50px` and an
 * absolutely-positioned, vertically-centred ::before — but only for
 * `.woocommerce-message` and `.woocommerce-info`. `.woocommerce-error` was never
 * given the same treatment, which is why the warning icon sat on top of the "P"
 * of "Please sign in". Reusing the site's pattern rather than inventing a second
 * one keeps this a single brand treatment.
 *
 * NOTE: the same overlap affects .woocommerce-error SITE-WIDE, not just here.
 * This rule is scoped to .hadeda-addons deliberately — the global fix belongs
 * with the site CSS that already fixed the other two, not in a plugin.
 */
.hadeda-addons .woocommerce-error,
.hadeda-addons .woocommerce-info,
.hadeda-addons .woocommerce-message {
	position: relative !important;
	padding: 14px 16px 14px 50px !important;
	background: var(--hadeda-tint);
	border-left: 4px solid var(--hadeda-ground-selected);
}

.hadeda-addons .woocommerce-error::before,
.hadeda-addons .woocommerce-info::before,
.hadeda-addons .woocommerce-message::before {
	position: absolute !important;
	left: 16px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	line-height: 1 !important;
}

.hadeda-addons .woocommerce-error {
	background: #fdecea;
	border-left-color: var(--hd-red, #d32f2f);
}

.hadeda-addons .woocommerce-error::before {
	color: var(--hd-red, #d32f2f) !important;
}

.hadeda-addons .woocommerce-error li,
.hadeda-addons .woocommerce-info li,
.hadeda-addons .woocommerce-message li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Unresolved-copy marker (2026-08-21). Deliberately loud: a [[PLACEHOLDER]] must
   never be mistaken for finished copy if a section lights up before its text is
   settled. Remove the paragraph, not this rule, when the text is resolved. */
.hadeda-addons__placeholder { padding: 0.75em 1em; border: 2px dashed #b00020; color: #b00020; font-weight: 600; }