/* =========================================================================
 * Funds & Rewards — front-end design system.
 * Inspired by platacard.mx, Apple and T-Bank: clean cards, soft depth,
 * confident accents, instant feedback.
 * ====================================================================== */

.acc-app {
	--red:#f80031; --orange:#ff6e40;
	--green:#62b868; --green-2:#80d486; --green-3:#58a85e;
	/* --muted is a TEXT colour (all 7 uses are color:) — #6b7280 keeps the muted
	   look but clears WCAG AA 4.5:1 on white/--bg (#999 was ~2.85:1). Decorative
	   greys stay hardcoded (#999 carets etc.), deliberately not this token. */
	--ink:#222; --bg:#f7f8f9; --muted:#6b7280; --muted-2:#777;
	/* Radii aligned to the site stylesheet (style11.css uses the 20–30px family):
	   lg for heroes/big cards, base for cards, sm for inputs/buttons. */
	--line:#ececf1; --card:#fff; --radius-lg:26px; --radius:20px; --radius-sm:13px;
	--shadow:0 3px 14px rgba(20,20,40,.05); --shadow-lg:0 14px 40px rgba(248,0,49,.16);
	color:var(--ink);
	font-feature-settings:"ss01","cv01";
	-webkit-font-smoothing:antialiased;
}
.acc-app *{ box-sizing:border-box; }
/* Inherit the site font (Rethink Sans) on our controls — form elements reset to
   the UA font by default, which would break harmony with the theme. */
.acc-app, .acc-app input, .acc-app button, .acc-app select, .acc-app textarea{ font-family:inherit; }
/* Professional finishing: a clean keyboard-only focus ring on every interactive
   element (accessibility + polish; never shows on mouse click), a branded text
   selection, and consistent smooth motion. */
.acc-app a:focus-visible, .acc-app button:focus-visible, .acc-app input:focus-visible,
.acc-app select:focus-visible, .acc-app textarea:focus-visible, .acc-app [tabindex]:focus-visible,
.acc-app summary:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; border-radius:8px; }
.acc-app ::selection{ background:rgba(255,110,64,.22); }
@media (prefers-reduced-motion:no-preference){
	.acc-app a, .acc-app button{ transition-timing-function:cubic-bezier(.2,.7,.2,1); }
}
/* Neutralise theme button chrome on our custom controls so hovers/focus never
   repaint them grey. Specific component rules below restyle each one. */
.acc-app button.acc-chip-amount,
.acc-app button.acc-level,
.acc-app button.acc-next,
.acc-app button.acc-ccy-dd-btn{ -webkit-appearance:none; appearance:none; box-shadow:none; text-transform:none; letter-spacing:normal; }
.acc-app h3{ font-size:18px; margin:0; font-weight:700; letter-spacing:-.01em; }
.acc-app h4{ font-size:15px; margin:0 0 10px; font-weight:700; }
.acc-muted{ color:var(--muted-2); font-size:13px; }
/* Inline result note for the no-JS reward submission (success / error). */
.acc-inline-note{ margin:0 0 14px; padding:12px 16px; border-radius:14px; font-size:13.5px; font-weight:600; line-height:1.45; }
.acc-inline-note.is-ok{ background:#e6f8ec; color:var(--green-3); border:1px solid #c9efd3; }
.acc-inline-note.is-err{ background:#fdeaee; color:var(--red); border:1px solid #f8c4cf; }

/* --- Segmented control --- */
.acc-segmented{
	display:flex; gap:4px; padding:4px; background:var(--bg);
	border-radius:999px; margin:0 0 22px; overflow:auto;
	scroll-margin-top:16px; justify-content:center;
}
.acc-seg{
	flex:1 0 auto; text-align:center; padding:9px 18px; border-radius:999px;
	color:var(--muted-2)!important; text-decoration:none!important; font-weight:600;
	font-size:14px; white-space:nowrap; transition:.2s;
}
.acc-seg:hover{ color:var(--ink)!important; }
.acc-seg.is-active{ background:var(--card); color:var(--ink)!important; box-shadow:0 2px 8px rgba(0,0,0,.08); }

/* --- Hero ---
   overflow is VISIBLE so the currency dropdown and "?" tooltips can escape the
   card instead of being clipped; the soft highlight is a contained radial glow
   (it fades to transparent inside the bounds, so nothing needs clipping). */
.acc-hero{
	border-radius:var(--radius-lg); padding:24px 26px; color:#fff; margin:0 0 18px;
	background:linear-gradient(135deg,var(--red),var(--orange));
	box-shadow:var(--shadow-lg); position:relative; overflow:visible;
}
.acc-hero--rewards{ background:linear-gradient(135deg,#ff5a5f,var(--orange)); }
.acc-hero::after{ content:""; position:absolute; right:18px; top:16px; width:150px; height:150px; background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,0) 70%); border-radius:50%; pointer-events:none; z-index:0; }
/* Content sits above the glow; the top row (currency dropdown + tooltip) sits
   above the big amount so its popups are never hidden behind it. */
.acc-hero-amount, .acc-hero-sub, .acc-hero-meta, .acc-progress, .acc-hero-note{ position:relative; z-index:1; }
.acc-hero-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; z-index:2; }
.acc-hero-label{ font-size:13px; opacity:.92; font-weight:600; letter-spacing:.02em; text-transform:uppercase; position:relative; z-index:2; }
.acc-hero-amount{ font-size:38px; font-weight:800; letter-spacing:-.02em; line-height:1.05; margin-top:6px; position:relative; }
.acc-hero-amount .amount{ color:#fff; }
.acc-hero-sub{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; color:#fff!important; text-decoration:none!important; background:rgba(255,255,255,.18); padding:6px 12px; border-radius:999px; font-weight:600; font-size:13px; }
.acc-hero-sub .acc-svg{ width:16px; height:16px; }

.acc-chip{ background:rgba(255,255,255,.22); color:#fff; padding:5px 13px; border-radius:999px; font-size:12px; font-weight:700; }

/* Hero membership chip — modern, minimalist, motivational. A crisp solid pill
   that reads clearly on the colour-tinted hero and harmonises with the level via
   the membership accent (text + status dot). */
.acc-hero .acc-chip{
	display:inline-flex; align-items:center; gap:7px;
	background:#fff; color:var(--lvl,#2a2f3a);
	padding:6px 14px 6px 11px; border-radius:999px;
	font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
	box-shadow:0 5px 16px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.02);
	text-decoration:none; transition:transform .18s, box-shadow .18s; white-space:nowrap;
}
.acc-hero .acc-chip::before{
	content:""; width:8px; height:8px; border-radius:50%; flex:0 0 auto;
	background:linear-gradient(135deg,var(--lvl,#888),var(--lvl-2,#aaa));
	box-shadow:0 0 0 3px rgba(0,0,0,.05);
}
.acc-hero a.acc-chip:hover{
	transform:translateY(-1px);
	box-shadow:0 9px 22px rgba(0,0,0,.24), inset 0 0 0 1px rgba(0,0,0,.02);
}

/* --- Progress --- */
.acc-progress{ margin-top:16px; position:relative; }
.acc-progress-bar{ height:8px; background:rgba(255,255,255,.25); border-radius:999px; overflow:hidden; }
.acc-progress-bar span{ display:block; height:100%; background:#fff; border-radius:999px; }
.acc-progress-label{ margin-top:8px; font-size:12.5px; opacity:.95; font-weight:600; }

/* --- Currency pills --- */
.acc-pills{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.acc-pill-ccy{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px 13px; font-size:13.5px; }
.acc-pill-ccy b{ color:var(--muted-2); margin-right:6px; font-size:12px; }
/* Hero header right group: currency switcher + membership chip, aligned right. */
.acc-hero-top-right{ display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; }
/* Other-currency balances, now merged INSIDE the hero card (replaces .acc-pills). */
.acc-hero-ccys{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; }
.acc-hero-ccy{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:11px; padding:5px 11px; font-size:13px; font-weight:600; line-height:1; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.acc-hero-ccy b{ opacity:.7; font-size:11.5px; font-weight:800; letter-spacing:.02em; }

/* --- Cards. Padding + shadow aligned with the checkout's acc-pl-card plaque
   so every My-Account card reads as the same depth as "You'll get $X in your
   rewards" on checkout. --- */
.acc-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px 16px; margin:0 0 18px; box-shadow:0 6px 22px rgba(20,22,30,.06); }
.acc-section-head{ display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; margin:22px 0 12px; }
.acc-section-head > h3{ margin:0; }
.acc-link{ color:var(--red)!important; font-weight:600; text-decoration:none!important; font-size:14px; }

/* --- Earn grid --- */
.acc-earn-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-bottom:8px; }
.acc-earn-card{
	display:flex; flex-direction:column; gap:6px; padding:18px; border-radius:var(--radius);
	background:var(--card); border:1px solid var(--line); text-decoration:none!important; color:var(--ink)!important;
	box-shadow:0 6px 22px rgba(20,22,30,.06);
	transition:transform .15s, box-shadow .15s, border-color .15s;
}
.acc-earn-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:#ffd3c7; }
.acc-earn-icon{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(135deg,#fff0ec,#ffe3da); color:var(--red); }
.acc-earn-icon .acc-svg{ width:20px; height:20px; }
.acc-earn-title{ font-weight:600; font-size:14px; line-height:1.25; }
.acc-earn-amount{ font-weight:800; color:var(--green-3); }
.acc-earn-amount .amount{ color:var(--green-3); }
.acc-earn-sub{ font-size:11px; color:var(--muted); margin-top:2px; }
.acc-earn-card--loyalty{ border-color:#cfe9d6; background:linear-gradient(135deg,#fff,#f6fbf8); }

/* --- Levels (non-clickable visual strip) --- */
.acc-levels{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; }
/* Borderless plates — depth from a soft shadow + an inner sheen, not an outline. */
.acc-level{ border:0; border-radius:var(--radius); padding:18px; background:var(--card); position:relative; overflow:hidden; box-shadow:0 6px 22px rgba(20,22,30,.06); }
.acc-level::after{ content:""; position:absolute; top:0; right:0; bottom:0; left:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
.acc-level.is-current{ box-shadow:0 0 0 2px var(--red), 0 10px 24px rgba(248,0,49,.18); }
.acc-level-name{ font-weight:800; font-size:14px; display:flex; align-items:center; gap:6px; position:relative; z-index:1; }
.acc-now{ background:var(--red); color:#fff; font-size:10px; padding:2px 7px; border-radius:999px; white-space:nowrap; }
.acc-level-bonus{ font-weight:800; font-size:19px; margin:5px 0 2px; position:relative; z-index:1; }
.acc-level-req{ font-size:12px; opacity:.92; position:relative; z-index:1; }

/* Level colours — refined, modern, premium. No borders; clean gradients. */
.acc-level--silver{ background:linear-gradient(150deg,#fbfcfe,#e7ecf3 70%,#dbe2ec); }
.acc-level--silver .acc-level-name{ color:#36404e; }
.acc-level--silver .acc-level-bonus{ color:var(--green-3); }
.acc-level--silver .acc-level-req{ color:#5a6473; }
.acc-level--gold{ background:linear-gradient(150deg,#fff6d4,#f4cf6e 70%,#e3ad33); }
.acc-level--gold .acc-level-name{ color:#5a3f06; }
.acc-level--gold .acc-level-bonus{ color:#15602f; }
.acc-level--gold .acc-level-req{ color:#6b5217; }
.acc-level--platinum{ background:linear-gradient(150deg,#f5f2fd,#d9d0f0 70%,#c3b8e8); }
.acc-level--platinum .acc-level-name{ color:#382a61; }
.acc-level--platinum .acc-level-bonus{ color:#5a37a6; }
.acc-level--platinum .acc-level-req{ color:#4d4373; }
.acc-level--diamond{ background:linear-gradient(150deg,#2f8ae0,#1f6ec9 60%,#134a9e); }
.acc-level--diamond::after{ box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.acc-level--diamond .acc-level-name{ color:#f3f9ff; }
.acc-level--diamond .acc-level-req{ color:#d6e8fc; }
.acc-level--diamond .acc-level-bonus{ color:#c7f5db; }
.acc-level--diamond_plus{ background:linear-gradient(150deg,#2b3142,#1a1e2b 60%,#0c0e15); }
.acc-level--diamond_plus::after{ box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
.acc-level--diamond_plus .acc-level-name{ color:#f6f7fc; }
.acc-level--diamond_plus .acc-level-req{ color:#cbd2e0; }
.acc-level--diamond_plus .acc-level-bonus{ color:#a4f0c8; }

/* --- Level comparison table --- */
/* Our tables are fully self-contained so theme table CSS can't bleed in (or out):
   explicit collapse model, transparent cells, our own borders only. */
.acc-app table{ border-collapse:separate; border-spacing:0; margin:0; width:100%; }
.acc-app .acc-ltable td, .acc-app .acc-tier-table td{ background:transparent; }
.acc-ltable-wrap{ overflow:auto; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); -webkit-overflow-scrolling:touch; }
.acc-ltable{ width:100%; border-collapse:separate; border-spacing:0; min-width:560px; }
.acc-ltable thead th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; padding:13px 16px; background:var(--bg); white-space:nowrap; }
.acc-ltable td{ padding:14px 16px; border-top:1px solid var(--line); font-size:13px; color:var(--ink); vertical-align:middle; }
.acc-ltable tbody tr.is-current{ background:#fff6f4; }
.acc-ltable tbody tr.is-current td{ border-top-color:#ffd3c7; }
.acc-ltname{ white-space:nowrap; }
/* Solid, readable level chips inside the (white) table. */
.acc-ltable .acc-chip{ font-size:11px; font-weight:800; }
.acc-ltable .acc-chip--silver{ background:linear-gradient(135deg,#eaeef5,#d6deea); color:#39424f; }
.acc-ltable .acc-chip--gold{ background:linear-gradient(135deg,#f6d579,#e3b13c); color:#5e4205; }
.acc-ltable .acc-chip--platinum{ background:linear-gradient(135deg,#ddd5f1,#c6bce8); color:#3a2d66; }
.acc-ltable .acc-chip--diamond{ background:linear-gradient(135deg,#2f86dd,#1f5fb8); color:#fff; }
.acc-ltable .acc-chip--diamond_plus{ background:linear-gradient(135deg,#20242f,#070809); color:#f6f7fc; }

/* Reward amount with a membership boost made visible. */
.acc-amt{ display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap; }
.acc-amt-pre{ color:var(--muted); font-weight:600; font-size:.82em; }
.acc-amt-base{ color:var(--muted-2); text-decoration:line-through; font-weight:600; opacity:.75; }
.acc-amt-boost{ color:var(--green-3); font-weight:800; }
/* When a struck base + boosted value + % badge sit together, keep them on a tidy
   baseline with a small row gap so they never look misaligned when they wrap. */
/* The boosted rate (base → boost → badge → "of order") must NEVER overflow its
   block. Each money token stays whole, but the group is allowed to wrap to a new
   line on narrow widths instead of spilling outside the card. */
.acc-amt.has-boost{ align-items:center; gap:4px 6px; line-height:1.3; flex-wrap:wrap; min-width:0; max-width:100%; }
/* Keep each money token whole (never break a "+$1.15" across lines). */
.acc-amt.has-boost .acc-amt-base, .acc-amt.has-boost .acc-amt-boost, .acc-amt.has-boost .acc-amt-pre{ white-space:nowrap; }
.acc-amt.has-boost .acc-boost-badge{ align-self:center; }
/* Membership accent — cascades from .acc-lvl-* on the app/hero root so every
   boost badge & accent matches the customer's current level. Falls back to the
   reward green for contexts without a level class. */
.acc-app{ --lvl:#3aa657; --lvl-2:#56c478; --lvl-ink:#fff; }
.acc-lvl-silver{ --lvl:#5f6d80; --lvl-2:#8492a6; --lvl-ink:#fff; }
.acc-lvl-gold{ --lvl:#b6830c; --lvl-2:#e6b53e; --lvl-ink:#fff; }
.acc-lvl-platinum{ --lvl:#6a5fb2; --lvl-2:#9b8fd6; --lvl-ink:#fff; }
.acc-lvl-diamond{ --lvl:#1f78cc; --lvl-2:#54a6ec; --lvl-ink:#fff; }
.acc-lvl-diamond_plus{ --lvl:#181c28; --lvl-2:#3b4458; --lvl-ink:#fff; }
.acc-boost-badge{ display:inline-flex; align-items:center; vertical-align:middle; margin:0 2px; background:linear-gradient(135deg,var(--lvl),var(--lvl-2)); color:var(--lvl-ink); font-size:10px; font-weight:800; padding:3px 8px; border-radius:999px; line-height:1; letter-spacing:.2px; white-space:nowrap; }

/* Hero level chip colours. */
.acc-chip--silver{ background:rgba(255,255,255,.28); }
.acc-chip--gold{ background:linear-gradient(135deg,#f6c453,#e0a317); color:#3a2c05; }
.acc-chip--platinum{ background:linear-gradient(135deg,#e9eef4,#cdd9e6); color:#3c4a5c; }
.acc-chip--diamond{ background:linear-gradient(135deg,#5a6273,#343a47); color:#eef2f9; }
.acc-chip--diamond_plus{ background:linear-gradient(135deg,#2a2e38,#0e1014); color:#eef2f9; }

/* --- Forms --- */
.acc-form{ display:flex; flex-direction:column; gap:16px; }
/* Deposit/top-up form: breathing room from the lede above and a slightly roomier
   rhythm between the amount field, the quick-chips and the live reward preview. */
.acc-deposit-form{ margin-top:14px; gap:18px; }
.acc-deposit-form .acc-chip-row{ margin-top:2px; }
.acc-field{ display:flex; flex-direction:column; gap:7px; }
.acc-field>label{ font-weight:600; font-size:14px; display:flex; align-items:center; gap:6px; }
.acc-field input, .acc-field select, .acc-field textarea, .acc-app input[type=number], .acc-app input[type=url]{
	width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius:14px;
	font-size:16px; background:#fff; transition:border-color .15s, box-shadow .15s; color:var(--ink);
}
.acc-field input:focus, .acc-field select:focus, .acc-field textarea:focus{
	outline:none; border-color:var(--orange); box-shadow:0 0 0 4px rgba(255,110,64,.14);
}
/* Currency-prefixed amount field — a polished, unmistakable input for the
   primary top-up action. The symbol sits inside the field; focus lights the whole
   control. */
.acc-amount-wrap{ position:relative; display:flex; align-items:stretch; }
.acc-amount-sym{ position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:18px; font-weight:700; color:var(--muted-2); pointer-events:none; z-index:1; }
.acc-app .acc-amount-input{ padding-left:32px !important; font-size:18px !important; font-weight:700; letter-spacing:.01em; }
.acc-help{ font-size:12.5px; color:var(--muted); }

/* --- Choice cards (radio) — match the rewards-tab card style: var(--radius)
   corners, the same soft 0 6px 22px shadow + 1px var(--line) border, gradient
   wash on the hovered/checked state. The previous flat --radius-sm + no-shadow
   look read as a different design language from the rewards cards above. --- */
.acc-choice-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.acc-choice{ position:relative; cursor:pointer; }
.acc-choice input{ position:absolute; opacity:0; top:0; right:0; bottom:0; left:0; }
.acc-choice-body{ display:block; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); box-shadow:0 6px 22px rgba(20,22,30,.06); transition:transform .15s, box-shadow .15s, border-color .15s; height:100%; }
.acc-choice:not(.is-disabled):hover .acc-choice-body{ border-color:#ffd3c7; transform:translateY(-2px); box-shadow:var(--shadow,0 12px 30px rgba(20,22,30,.08)); }
/* Disabled card: no lift, not-allowed cursor, dashed grey border stays put on
   hover — never invite a click that the radio's `disabled` attribute will
   silently ignore. The same hover override applies to the green "info" card. */
.acc-choice.is-disabled{ cursor:not-allowed; }
.acc-choice.is-disabled:hover .acc-choice-body{ transform:none; box-shadow:0 6px 22px rgba(20,22,30,.06); border-color:var(--line); }
.acc-choice--info:hover .acc-choice-body{ border-color:#cfe9d6; }
.acc-choice input:checked + .acc-choice-body{ border-color:var(--red); background:linear-gradient(135deg,#fff6f4,#fff); box-shadow:0 8px 22px rgba(248,0,49,.12); }
.acc-choice input:focus-visible + .acc-choice-body{ outline:none; box-shadow:0 0 0 4px rgba(255,110,64,.22); }
.acc-choice-icon{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(135deg,#fff0ec,#ffe3da); color:var(--red); margin-bottom:10px; }
.acc-choice-icon .acc-svg{ width:20px; height:20px; }
/* .acc-choice-title and .acc-choice-desc canonical definitions live further
   below (685-687) — those are the values actually applied; nothing left here
   to avoid a same-property redefinition that masks the intended type scale. */

/* --- Estimate banner --- */
.acc-estimate{ display:flex; flex-direction:column; gap:8px; padding:14px 16px; border-radius:var(--radius-sm); background:linear-gradient(135deg,#eafaef,#e2f6e8); border:1px solid #c9efd3; }
.acc-estimate-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.acc-estimate-label{ font-weight:600; color:var(--green-3); }
.acc-estimate-amount{ font-weight:800; font-size:20px; color:var(--green-3); }
.acc-estimate-nudge-wrap:empty{ display:none; }
.acc-estimate-nudge{ display:block; font-size:12.5px; font-weight:700; color:#a9791a; background:#fff7e6; border:1px solid #f3deae; border-radius:8px; padding:7px 10px; }

/* --- Switch toggle --- */
/* Toggle switch — zero out theme label margins so it sits flush (no stray gap
   under it) and the track + label stay on one tidy baseline. */
.acc-switch{ display:flex; align-items:center; gap:11px; cursor:pointer; font-size:14px; margin:0; }
.acc-switch input{ position:absolute; opacity:0; }
.acc-switch-track{ position:relative; width:46px; height:28px; background:#dcdce3; border-radius:999px; transition:.2s; flex:0 0 auto; }
.acc-switch-track::after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 2px 5px rgba(0,0,0,.2); }
.acc-switch input:checked + .acc-switch-track{ background:linear-gradient(135deg,var(--green),var(--green-3)); }
.acc-switch input:checked + .acc-switch-track::after{ transform:translateX(18px); }
.acc-switch input:focus-visible + .acc-switch-track{ box-shadow:0 0 0 4px rgba(98,184,104,.25); }
.acc-switch-label{ font-weight:500; margin:0; }
.acc-addon{ padding:14px 16px; border-radius:var(--radius-sm); background:#fff8f3; border:1px dashed #ffcab7; }
/* The screenshot add-on holds a long, multi-line label next to the toggle — align
   the toggle to the TOP of the text (not vertically centred against 2-3 lines) and
   give the label comfortable leading. */
.acc-addon .acc-switch{ align-items:flex-start; gap:12px; }
.acc-addon .acc-switch-track{ margin-top:2px; }
.acc-addon .acc-switch-label{ font-weight:500; line-height:1.5; }
/* Screenshot bonus shown up-front as a green "earn this" pill so the incentive
   to opt in is unmistakable. Empty (no amount yet) collapses cleanly. */
.acc-addon-bonus, #acc-addon-bonus{ color:var(--green-3); font-weight:800; }
.acc-addon-bonus:not(:empty), #acc-addon-bonus:not(:empty){ display:inline-block; background:#e6f8ec; color:var(--green-3); font-size:12px; padding:2px 9px; border-radius:999px; line-height:1.5; vertical-align:middle; }

/* --- Buttons --- */
/* min-height locks the button to its natural text height so the loading swap
   (a shorter .acc-dots spinner) can't collapse it (was visibly "jumping smaller"
   on the top-up form when the submit button entered the busy state). */
.acc-app .acc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; cursor:pointer; font-weight:700; font-size:15px; line-height:1.4; padding:14px 24px; min-height:52px; box-sizing:border-box; border-radius:16px; transition:transform .12s, box-shadow .12s, filter .12s; -webkit-appearance:none; appearance:none; text-decoration:none; }
/* Buttons (with a background or a border) never show an underline in any state,
   even when the underlying element is a themed <a>. */
.acc-app .acc-btn,
.acc-app .acc-btn:hover,
.acc-app .acc-btn:focus,
.acc-app .acc-btn:focus-visible,
.acc-app .acc-btn:active{ text-decoration:none !important; }
/* THEME GUARD — themes (GeneratePress etc.) repaint <button>/.button grey on
   :focus/:active, and that state sticks after a click. Lock our own fills with
   !important across every state so they never gray out. */
.acc-app .acc-btn--primary,
.acc-app .acc-btn--primary:hover,
.acc-app .acc-btn--primary:focus,
.acc-app .acc-btn--primary:focus-visible,
.acc-app .acc-btn--primary:active{ background:linear-gradient(135deg,var(--red),var(--orange)) !important; color:#fff !important; box-shadow:0 5px 14px rgba(248,0,49,.18); }
.acc-app .acc-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(248,0,49,.22); }
.acc-app .acc-btn--primary:active{ transform:translateY(0); }
/* Ghost button — outlined, secondary CTA. */
.acc-app .acc-btn--ghost,
.acc-app .acc-btn--ghost:hover,
.acc-app .acc-btn--ghost:focus,
.acc-app .acc-btn--ghost:active{ background:#fff !important; color:var(--ink) !important; border:1.5px solid var(--line) !important; font-size:14px; padding:11px 18px; white-space:nowrap; }
.acc-app .acc-btn--ghost:hover{ border-color:var(--orange) !important; transform:translateY(-1px); }

/* Overview snapshot card (Balance page). */
.acc-ov-card{ display:flex; flex-direction:column; }
.acc-ov-nudge{ display:flex; align-items:center; gap:14px; background:linear-gradient(135deg,#fff7f3,#fff); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
.acc-ov-nudge>div{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
.acc-ov-nudge b{ font-size:14.5px; }
.acc-ov-nudge .acc-muted{ font-size:13px; }
.acc-ov-nudge-ico{ display:inline-grid; place-items:center; width:42px; height:42px; flex:0 0 auto; border-radius:50%; background:linear-gradient(135deg,var(--red),var(--orange)); color:#fff; }
.acc-ov-nudge-ico .acc-svg{ width:20px; height:20px; }
.acc-ov-more{ display:inline-block; margin-top:12px; font-weight:700; font-size:13.5px; color:var(--red); text-decoration:none; }
.acc-ov-more:hover{ text-decoration:underline; }
@media (max-width:480px){ .acc-ov-nudge{ flex-wrap:wrap; } .acc-ov-nudge .acc-btn--ghost{ width:100%; } }
/* Other custom controls: keep their fill on every state too. */
.acc-app .acc-chip-amount, .acc-app .acc-chip-amount:hover, .acc-app .acc-chip-amount:focus, .acc-app .acc-chip-amount:active, .acc-app .acc-chip-amount:focus-visible{ background:#fff !important; color:var(--ink) !important; }
.acc-app .acc-chip-amount.is-active, .acc-app .acc-chip-amount.is-active:hover, .acc-app .acc-chip-amount.is-active:focus, .acc-app .acc-chip-amount.is-active:active{ background:#fff6f4 !important; color:var(--red) !important; }
/* .acc-tier-apply is the gradient "Get it" CTA — styled in the tier-table block. */
.acc-app .acc-next, .acc-app .acc-next:focus, .acc-app .acc-next:active{ background:#fff !important; color:var(--green-3) !important; border-color:#c9efd3 !important; }
.acc-app .acc-next:hover, .acc-app button.acc-next.acc-chip-amount:hover{ background:var(--green-3) !important; color:#fff !important; border-color:var(--green-3) !important; }
.acc-app .acc-hero-action, .acc-app .acc-hero-action:hover, .acc-app .acc-hero-action:focus, .acc-app .acc-hero-action:active{ background:#fff !important; color:var(--red) !important; }
.acc-app .acc-seg:focus, .acc-app .acc-seg:active{ background:transparent; }
.acc-app .acc-seg.is-active, .acc-app .acc-seg.is-active:focus, .acc-app .acc-seg.is-active:active{ background:var(--card) !important; }
.acc-app .acc-btn[disabled]{ opacity:.85; cursor:default; transform:none; }
.acc-app .acc-btn.is-loading{ pointer-events:none; }
/* Spinning dots preloader (inside a button). */
.acc-dots{ display:inline-flex; align-items:center; gap:5px; height:1em; }
.acc-dots i{ width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; animation:acc-dot 1s infinite ease-in-out both; }
.acc-dots i:nth-child(1){ animation-delay:-.32s; }
.acc-dots i:nth-child(2){ animation-delay:-.16s; }
@keyframes acc-dot{ 0%,80%,100%{ transform:scale(.45); opacity:.5; } 40%{ transform:scale(1); opacity:1; } }

/* =========================================================================
 * #7/#8 — Global neat preloader: a slim top progress bar during ANY plugin AJAX
 * and a spinner on busy buttons. Loaded everywhere the plugin assets load, so a
 * preloader always shows on a click/AJAX/refresh — funds, rewards, checkout.
 * ====================================================================== */
.acc-preloader{ position:fixed; top:0; left:0; right:0; height:3px; z-index:100000; pointer-events:none; overflow:hidden; opacity:0; transition:opacity .2s; }
body.acc-loading .acc-preloader{ opacity:1; }
.acc-preloader::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:35%;
	background:linear-gradient(90deg,transparent,#f80031,#ff6e40,transparent); animation:acc-prog 1.05s ease-in-out infinite; will-change:transform; }
/* Transform keyframe (composited / GPU) — animating `left` triggered a layout
   pass on every frame while AJAX was in flight. */
@keyframes acc-prog{ 0%{ transform:translateX(-100%); } 50%{ transform:translateX(142%); } 100%{ transform:translateX(300%); } }
/* Busy button: a spinner replaces the label; click is blocked. Shared by our
   form-submit busy state AND the round-up controller's .is-loading buttons. */
.acc-app .acc-btn--busy, .acc-btn--busy, .acc-app .acc-btn.is-loading{ pointer-events:none; position:relative; color:transparent !important; }
.acc-app .acc-btn--busy::after, .acc-btn--busy::after, .acc-app .acc-btn.is-loading::after{ content:""; position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
	border-radius:50%; border:2.5px solid rgba(255,255,255,.5); border-top-color:#fff; animation:acc-spin .7s linear infinite; }
.acc-btn:not(.acc-btn--primary).acc-btn--busy::after, .acc-app .acc-btn:not(.acc-btn--primary).is-loading::after{ border-color:rgba(248,0,49,.25); border-top-color:#f80031; }
@keyframes acc-spin{ to{ transform:rotate(360deg); } }

/* Earn cross-sell banner — the fastest-earn nudge toward topping up. Minimal,
   modern, with a clear forward CTA. */
.acc-earn-cross{ display:flex; align-items:center; gap:13px; margin:0 0 18px; padding:18px 18px 16px; border-radius:var(--radius); text-decoration:none;
	background:linear-gradient(135deg,#fff3ef,#fff8f3); border:1px solid #ffd9cc; box-shadow:0 6px 22px rgba(20,22,30,.06); transition:transform .15s, box-shadow .15s; }
.acc-earn-cross:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(248,0,49,.1); }
.acc-earn-cross-ico{ display:inline-grid; place-items:center; width:40px; height:40px; flex:0 0 auto; border-radius:50%; background:linear-gradient(135deg,var(--red),var(--orange)); color:#fff; }
.acc-earn-cross-ico .acc-svg{ width:19px; height:19px; }
.acc-earn-cross-txt{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
.acc-earn-cross-txt b{ color:var(--ink); font-size:14.5px; }
.acc-earn-cross-txt span{ color:var(--muted-2); font-size:13px; line-height:1.4; }
.acc-earn-cross-go{ flex:0 0 auto; color:var(--red); font-weight:800; font-size:13.5px; white-space:nowrap; }
/* History-tab variant: it sits directly under the ledger list, so it needs a
   clear top gap to separate the "next action" bridge from the history above. */
.acc-history-cross{ margin-top:22px; }
@media (max-width:480px){ .acc-earn-cross-go{ display:none; } }

/* --- Top up --- */
.acc-topup-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.acc-topup-badge{ display:inline-flex; align-items:center; gap:6px; background:#eafaef; color:var(--green-3); font-weight:700; font-size:12.5px; padding:6px 11px; border-radius:999px; }
.acc-topup-badge .acc-svg{ width:15px; height:15px; }
.acc-topup-lede{ margin:-6px 0 16px; color:var(--muted-2); font-size:13.5px; line-height:1.5; }
/* Trust strip under the top-up CTA — reduces friction at the point of action. */
.acc-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin-top:14px; }
.acc-trust span{ display:inline-flex; align-items:center; gap:6px; color:var(--muted-2); font-size:12.5px; font-weight:600; }
.acc-trust .acc-svg{ width:15px; height:15px; color:var(--green-3); }
.acc-chips{ display:flex; flex-wrap:wrap; gap:8px; }
/* #6 — chips sitting just above the submit button (below the amount field). */
.acc-chips--below{ margin:4px 0 16px; }
.acc-app .acc-chip-amount{ border:1.5px solid var(--line); background:#fff; border-radius:16px; padding:9px 16px; font-weight:700; cursor:pointer; transition:.15s; color:var(--ink); -webkit-appearance:none; appearance:none; box-shadow:none; }
/* Keep our own fill on every state — themes (GeneratePress) otherwise force
   buttons grey on hover/focus/active/click. */
.acc-app .acc-chip-amount:hover, .acc-app button.acc-chip-amount:hover,
.acc-app .acc-chip-amount:focus, .acc-app button.acc-chip-amount:focus,
.acc-app .acc-chip-amount:focus-visible{ border-color:var(--orange); background:#fff; color:var(--ink); box-shadow:none; outline:none; }
.acc-app .acc-chip-amount.is-active, .acc-app button.acc-chip-amount.is-active,
.acc-app button.acc-chip-amount.is-active:hover, .acc-app button.acc-chip-amount.is-active:focus{ border-color:var(--red); background:#fff6f4; color:var(--red); }
/* Reward preview adopts the checkout panel-card look (mirrors .acc-pl-card /
   #gpco-panels-host panels): rounded card, soft success-green gradient, depth. */
.acc-reward-preview{ padding:18px 18px 16px; border-radius:var(--radius); background:linear-gradient(180deg,#f1fbf4,#fff); border:1px solid #c9efd3; box-shadow:0 6px 22px rgba(20,22,30,.06); }
.acc-preview-earn{ display:flex; align-items:center; flex-wrap:wrap; gap:5px; font-weight:600; color:var(--green-3); }
.acc-preview-earn b{ font-weight:800; font-size:17px; }
.acc-preview-earn .acc-amt{ align-items:center; }
.acc-preview-sub{ opacity:.85; }
.acc-next{ display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:8px; background:#fff; border:1px solid #c9efd3; color:var(--green-3); font-weight:700; font-size:12.5px; padding:6px 12px; border-radius:999px; cursor:pointer; transition:.15s; }
.acc-next:hover{ background:var(--green-3); color:#fff; border-color:var(--green-3); }
.acc-next-old{ opacity:.6; font-weight:600; }
.acc-next-amt{ opacity:.85; font-weight:700; }
/* Membership-boosted rate inside the choice "rate" pill / suffix. */
.acc-choice-rate .acc-amt{ align-items:center; gap:5px; }
.acc-choice-rate .acc-amt-base{ font-size:.85em; }
.acc-amt-suffix{ font-weight:600; opacity:.8; white-space:nowrap; }
/* Inside the compact reward-rate pill, tighten the parts so the whole boosted
   rate ("10% 11% +10% of order") fits one line without overflowing the card. */
.acc-choice-rate .acc-amt.has-boost{ gap:3px 4px; }
.acc-choice-rate .acc-amt-suffix{ font-size:.82em; opacity:.75; }
.acc-choice-rate .acc-boost-badge{ font-size:9px; padding:2px 6px; margin:0 1px; }

/* --- Claims list --- */
.acc-claim{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.acc-claim:last-child{ border-bottom:0; padding-bottom:0; }
.acc-claim-ico{ width:38px; height:38px; border-radius:11px; background:#f3f4f8; color:var(--muted-2); display:grid; place-items:center; flex:0 0 auto; }
.acc-claim-ico .acc-svg{ width:19px; height:19px; }
.acc-claim-main{ display:flex; flex-direction:column; flex:1; }
.acc-claim-main .acc-muted{ font-size:12px; }
.acc-claim-meta{ display:flex; align-items:center; gap:10px; }
.acc-claim-amount{ font-weight:800; color:var(--green-3); }
.acc-badge{ font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; }
.acc-badge--under_review{ background:#fff4e0; color:#b7791f; }
.acc-badge--approved{ background:#e6f8ec; color:var(--green-3); }
.acc-badge--declined{ background:#fde7ec; color:var(--red); }

/* --- History list --- */
.acc-ledger-list{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.acc-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); }
.acc-row:last-child{ border-bottom:0; }
.acc-row-main{ display:flex; flex-direction:column; text-align:left; }
.acc-row-main .acc-muted{ font-size:12px; }
.acc-row-amt{ font-weight:800; white-space:nowrap; }
.acc-row-amt.is-pos{ color:var(--green-3); }
.acc-row-amt.is-neg{ color:var(--ink); }
/* ── Expandable transaction rows (history) ─────────────────────────────────── */
.acc-row-wrap{ border-bottom:1px solid var(--line); }
.acc-row-wrap:last-child{ border-bottom:0; }
.acc-row-wrap .acc-row{ border-bottom:0; }
/* The row is a full-width, quiet BUTTON — kill every theme button default in all
   states so it reads as a list row, not a grey/black button. */
.acc-app button.acc-row--toggle,
.acc-app button.acc-row--toggle:hover,
.acc-app button.acc-row--toggle:focus,
.acc-app button.acc-row--toggle:active{
	width:100%; margin:0; font:inherit; text-transform:none; letter-spacing:normal;
	background:transparent !important; color:var(--ink,#222) !important;
	border:0 !important; border-radius:0; box-shadow:none !important; cursor:pointer;
	-webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
}
.acc-app button.acc-row--toggle:hover{ background:var(--bg,#f7f8f9) !important; }
/* Expanded row keeps the soft tint (needs !important to beat the transparent
   base above; the .is-open wrapper rule below couldn't). */
.acc-app button.acc-row--toggle[aria-expanded="true"]{ background:var(--bg,#f7f8f9) !important; }
.acc-app button.acc-row--toggle:focus-visible{ outline:2px solid var(--orange,#ff6e40); outline-offset:-2px; }
/* Plain chevron caret — no disk background, no colour highlight in any state. */
.acc-row-caret{ flex:0 0 auto; position:relative; width:22px; height:22px; }
.acc-row-caret::before{ content:""; position:absolute; top:50%; left:50%; width:7px; height:7px; margin:-5px 0 0 -4px; border-right:1px solid #999; border-bottom:1px solid #999; transform:rotate(45deg); transition:transform .18s ease; }
.acc-row-wrap.is-open .acc-row-caret::before{ transform:rotate(-135deg); margin-top:-1px; }
.acc-row-wrap.is-open > .acc-row{ background:var(--bg,#f7f8f9); }
.acc-row-details{ padding:14px 14px; background:var(--bg,#f7f8f9); overflow:hidden; }
/* Copy-transaction-ID chip: quiet 24px square beside the <code>, brand-warm on
   hover, swaps to a green check while "copied". ~40px effective tap area via
   the ::before extender. */
.acc-txn-dd{ display:inline-flex; align-items:center; gap:7px; min-width:0; }
.acc-txn-dd code{ overflow-wrap:anywhere; }
/* The chip is a <button>; the site theme paints buttons with a dark fill in
   every state, which beat the plain-class rule — hence the black square the
   report shows. Scoped under .acc-app + !important on background so no theme
   button rule can repaint it (white at rest / on hover, green when copied). */
.acc-app button.acc-txn-copy,
.acc-app button.acc-txn-copy:hover,
.acc-app button.acc-txn-copy:focus,
.acc-app button.acc-txn-copy:active{ position:relative; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; margin:0;
	border:1px solid var(--line,#ececf1); border-radius:8px; background:#fff !important; background-image:none !important; color:var(--muted-2,#777); cursor:pointer;
	-webkit-appearance:none; appearance:none; box-shadow:none; text-transform:none;
	transition:color .18s var(--m-ease,ease), border-color .18s var(--m-ease,ease), background .18s var(--m-ease,ease), transform .18s var(--m-ease,ease); }
.acc-app button.acc-txn-copy::before{ content:""; position:absolute; inset:-8px; }
.acc-app button.acc-txn-copy:hover{ color:var(--ink,#222) !important; border-color:var(--orange,#ff6e40); transform:translateY(-1px); }
.acc-app button.acc-txn-copy:focus-visible{ outline:2px solid var(--red,#f80031); outline-offset:2px; }
.acc-app button.acc-txn-copy .acc-txn-copy-ok{ display:none; }
.acc-app button.acc-txn-copy.is-copied,
.acc-app button.acc-txn-copy.is-copied:hover{ color:var(--green-3,#1f7a46) !important; border-color:var(--green-2,#c9efd3); background:#f1fbf4 !important; }
.acc-app button.acc-txn-copy.is-copied svg:first-of-type{ display:none; }
.acc-app button.acc-txn-copy.is-copied .acc-txn-copy-ok{ display:block; }
.acc-row-details[hidden]{ display:none; }
/* Open animation: fade + gentle slide (disabled under reduced-motion). */
.acc-row-wrap.is-open .acc-row-details{ animation:acc-row-reveal .2s cubic-bezier(.2,.7,.2,1); }
@keyframes acc-row-reveal{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){ .acc-row-wrap.is-open .acc-row-details{ animation:none; } }
.acc-row-dl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px 18px; margin:0; padding:14px 16px; background:var(--card,#fff); border:1px solid var(--line,#ececf1); border-radius:18px; box-shadow:0 1px 2px rgba(16,18,26,.04); }
.acc-row-dli{ min-width:0; }
.acc-row-dli--wide{ grid-column:1 / -1; }
.acc-row-dl dt{ font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2,#999); margin:0 0 4px; }
.acc-row-dl dd{ margin:0; font-size:13.5px; font-weight:600; color:var(--ink,#222); overflow-wrap:anywhere; font-variant-numeric:tabular-nums; line-height:1.35; }
.acc-row-dl dd.is-pos{ color:var(--green-3,#1f7a46); }
.acc-row-dl dd .acc-muted{ font-weight:700; font-size:11.5px; }
.acc-row-dl dd a{ color:var(--ink,#222); text-decoration:none; font-weight:800; }
.acc-row-dl dd a:hover{ text-decoration:underline; }
.acc-row-dl dd code{ display:inline-block; font-size:11.5px; background:var(--bg,#f7f8f9); border:1px solid var(--line,#ececf1); border-radius:6px; padding:2px 7px; word-break:break-all; color:var(--muted-2,#777); }

/* --- FAQ (unified "site FAQ" card design) ---
   Shared by the global /faq page ([acc_faq]) AND the Balance/Rewards My-Account
   FAQ, so both read as one system. Mirrors the site services-template FAQ look
   (#faq-grid in theme.css): separate rounded white cards with a +/- indicator
   that rotates open. The .acc-faq-cat type scale is re-declared at ~line 693. */
.acc-faq-cats{ display:flex; flex-direction:column; gap:0; }
/* .acc-faq-cat:first-child spacing is owned solely by the canonical FAQ-category
   block below (~line 787); a stray margin-top:0 here was always superseded by it. */
.acc-faq{ display:flex; flex-direction:column; gap:12px; margin-bottom:24px; background:none; border:0; border-radius:0; overflow:visible; }
/* Resting cards use the site grey (#f7f8f9) so they never blend into the white
   Balance/Rewards / FAQ-page surfaces they sit on; opening lifts a card to
   white with a soft shadow for clear focus. (The site services-template
   #faq-grid cards are a separate class and stay white on their colour blocks.) */
/* No shadows. Closed items carry a border in their own background colour so it
   blends invisibly; the open/highlighted item gets a visible outline (instead of
   a shadow) to make it stand out. */
.acc-faq-item{ background:#f7f8f9; border:1px solid #f7f8f9; border-radius:22px; padding:0; box-shadow:none; transition:border-color .2s ease, background .2s ease; }
.acc-faq-item[open]{ background:#fff; border-color:#e5e7eb; box-shadow:none; }
/* Whole card is one click/tap target: the padding lives on the <summary>, so the
   summary fills the entire card area (the closed card opens from anywhere; the
   open card's header row toggles it closed). The answer body sits OUTSIDE the
   summary, so reading it never collapses the card. Summary is natively focusable,
   so keyboard/focus toggling keeps working. */
.acc-faq-item summary{ cursor:pointer; font-weight:650; font-size:1.14rem; line-height:1.5; list-style:none; display:flex; width:100%; box-sizing:border-box; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; transition:color .15s; }
.acc-faq-item summary:hover{ color:var(--red,#f80031); }
.acc-faq-item summary::-webkit-details-marker{ display:none; }
.acc-faq-item summary::marker{ content:""; }
/* +  →  – indicator (drawn, so it inherits the brand colour) */
.acc-faq-plus{ width:22px; height:22px; flex:0 0 auto; position:relative; transition:transform .3s ease; }
.acc-faq-plus::before, .acc-faq-plus::after{ content:""; position:absolute; background:var(--orange,#ff6e40); border-radius:2px; transition:.3s ease; }
.acc-faq-plus::before{ top:10px; left:4px; right:4px; height:2px; }
.acc-faq-plus::after{ left:10px; top:4px; bottom:4px; width:2px; }
.acc-faq-item[open] .acc-faq-plus{ transform:rotate(180deg); }
.acc-faq-item[open] .acc-faq-plus::after{ transform:scaleY(0); }
.acc-faq-body{ padding:0 24px 20px; color:var(--muted-2,#777); line-height:1.65; font-size:1rem; max-width:72ch; animation:acc-faq-reveal .26s ease; }
.acc-faq-body p{ margin:0 0 .7rem; }
.acc-faq-body p:last-child{ margin-bottom:0; }
.acc-faq-body ul, .acc-faq-body ol{ margin:.5rem 0 .5rem 1.5rem; padding:0; }
.acc-faq-body li{ margin:.25rem 0; }
.acc-faq-link{ color:var(--red)!important; font-weight:700; text-decoration:none!important; border-bottom:1px solid rgba(248,0,49,.3); transition:border-color .15s; }
.acc-faq-link:hover{ border-bottom-color:var(--red); }
@keyframes acc-faq-reveal{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .acc-faq-body{ animation:none; } .acc-faq-plus, .acc-faq-plus::before, .acc-faq-plus::after{ transition:none; } }
.acc-faq-cta{ display:flex; align-items:center; gap:8px; justify-content:center; margin-top:16px; padding:15px; border-radius:var(--radius-sm); background:linear-gradient(135deg,var(--red),var(--orange)); color:#fff!important; text-decoration:none!important; font-weight:700; box-shadow:0 8px 20px rgba(248,0,49,.24); }
.acc-faq-cta .acc-svg{ width:18px; height:18px; }

/* --- Global /faq page ([acc_faq]) --- */
.acc-faq-page{ max-width:900px; margin:0 auto; }
.acc-faq-page .acc-faq-hero{ text-align:center; margin:0 0 26px; }
.acc-faq-page .acc-faq-hero h1{ font-size:2.2rem; line-height:1.15; margin:0 0 10px; }
.acc-faq-page .acc-faq-hero p{ color:var(--muted-2,#777); font-size:1.08rem; margin:0; }
.acc-faq-page .acc-faq-cat{ font-size:1.35rem; text-transform:none; letter-spacing:0; color:var(--ink,#222); font-weight:800; margin:30px 0 14px; }
.acc-faq-page .acc-faq-cat:first-child{ margin-top:8px; }
/* Two-column card grid on wide screens (mirrors #faq-grid .ft-grid). */
.acc-faq--grid{ display:grid; gap:12px; grid-template-columns:1fr 1fr; align-items:start; }
@media (max-width:768px){ .acc-faq--grid{ grid-template-columns:1fr; } }
.acc-faq-contact{ text-align:center; margin:26px 0 0; color:var(--muted-2,#777); }

/* --- Tooltip --- */
.acc-tip{ margin-top:-3px; display:inline-grid; place-items:center; width:17px; height:17px; border-radius:50%; background:#e7e8ee; color:var(--muted-2); font-size:11px; font-weight:800; cursor:help; position:relative; line-height:1; vertical-align:middle; }
.acc-tip:hover, .acc-tip:focus{ background:var(--orange); color:#fff; outline:none; z-index:60; }
/* The tip glyph and its tooltip must never inherit UPPERCASE from a heading or
   hero label they sit inside (e.g. the Rewards hero / Membership levels heading). */
.acc-app .acc-tip, .acc-app .acc-tip::after, .acc-app .acc-tip::before{ text-transform:none !important; letter-spacing:normal !important; }
.acc-tip::after{
	content:attr(data-tip); position:absolute; bottom:130%; left:50%; transform:translateX(-50%) translateY(6px);
	background:var(--ink); color:#fff; padding:9px 12px; border-radius:10px; font-size:12.5px; font-weight:500;
	width:max-content; max-width:240px; line-height:1.4; text-align:left; opacity:0; pointer-events:none; transition:.18s; z-index:2147483000; box-shadow:0 8px 24px rgba(0,0,0,.22);
	text-transform:none; letter-spacing:normal;
}
.acc-tip:hover::after, .acc-tip:focus::after{ opacity:1; transform:translateX(-50%) translateY(0); }

/* --- Toast & flash --- */
.acc-toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:13px 20px; border-radius:999px; font-weight:600; box-shadow:0 12px 32px rgba(0,0,0,.28); opacity:0; pointer-events:none; transition:.25s; z-index:100001; }
.acc-toast.is-show{ opacity:1; transform:translateX(-50%) translateY(0); }
.acc-toast.is-err{ background:var(--red); }
.acc-flash{ padding:13px 16px; border-radius:var(--radius-sm); margin:0 0 16px; font-weight:600; }
.acc-flash--ok{ background:#e6f8ec; color:var(--green-3); }
.acc-flash--err{ background:#fde7ec; color:var(--red); }
.acc-form-msg{ font-weight:600; font-size:14px; }
.acc-form-msg.is-err{ color:var(--red); }
.acc-form-msg.is-ok{ color:var(--green-3); }

/* --- Checkout ---
   NOTE: .acc-checkout-rewards/.acc-partial-funds base look is defined ONCE in
   the "rewards / balance opt-in" block below (was duplicated here and fully
   overridden — removed to keep a single source of truth). */
/* When the rewards box and the partial-balance box both render, keep them apart. */
.acc-checkout-app{ margin:0 0 14px; }
.acc-checkout-app + .acc-checkout-app{ margin-top:14px; }
.acc-checkout-app:last-child{ margin-bottom:0; }
/* Keep the checkout icon on-brand and correctly sized regardless of theme. */
.acc-checkout-app .acc-switch-label{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:600; }
.acc-checkout-app .acc-svg{ width:18px !important; height:18px !important; display:inline-block; vertical-align:middle; flex:0 0 auto; color:var(--green-3); }
.acc-checkout-rewards .acc-save{ color:var(--green-3); font-weight:800; }
/* Explicit wallet-savings discount line in the cart/checkout totals — reads as a
   clear, positive green saving (matches WooCommerce's discount rows). */
.acc-wallet-savings th{ font-weight:600; }
.acc-wallet-savings td{ color:var(--green-3); font-weight:700; white-space:nowrap; }
/* Checkout reward congratulations. */
.acc-checkout-congrats{ display:flex; align-items:center; gap:9px; background:linear-gradient(135deg,#eafaef,#dcf4e2); border:1px solid #bfead0; border-radius:var(--radius-sm); padding:13px 16px; margin:0 0 14px; color:#1f7a46; font-weight:700; font-size:14px; }
.acc-checkout-congrats .acc-cc-gift{ font-size:18px; }
/* #2 — Earn congrats card: identical head markup to the round-up card (FA gift
   in a green square + dark title). The card owns the green rounded look; the FA
   icon sits in the .acc-pl-ico--ok square. */
/* #8 — the cashback card gets the SAME entrance animation as the balance/round-up
   card (acc-pl-in, inherited from .acc-pl-card) so both pop in identically. */
.acc-rewards-card .acc-pl-card{ margin:0; }
/* #9 — the gift glyph is an inline SVG; force WHITE so it stands out on the green square. */
.acc-rewards-card .acc-pl-ico--ok .acc-svg{ width:20px; height:20px; color:#fff; stroke:#fff; }
/* #5 — "use my rewards": a neat, CENTRED, modern custom checkbox at the bottom
   of the payment methods (a soft rounded box with a white tick on green). */
.acc-rewards-spend{ margin:0 0 18px; text-align:center; }
/* Checkbox + label as a single CENTRED group: the box stays immediately left of
   the label (flex-wrap:nowrap stops it collapsing onto its own line above the
   wrapped text on narrow screens), and the whole [✓ label] unit is centred in
   the block. flex:0 0 auto on the box keeps it crisp; the label is flex:0 1 auto
   so it only takes the width it needs and wraps its text INSIDE its own column. */
.acc-rewards-check{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:nowrap; text-align:center; cursor:pointer; font-weight:600; font-size:14px; color:var(--ink); line-height:1.4; }
/* #2 — pin every visibility-critical property with .acc-app specificity + !important
   so a theme's global checkbox reset (display:none / opacity:0 / appearance) can't
   hide our custom box. The checkbox was rendering invisibly inside the dashed block. */
.acc-app .acc-rewards-check input[type="checkbox"]{ flex:0 0 auto !important; -webkit-appearance:none !important; appearance:none !important;
	display:inline-block !important; opacity:1 !important; visibility:visible !important; position:relative !important;
	width:22px !important; height:22px !important; min-width:22px; box-sizing:border-box !important; margin:0 !important; padding:0 !important; cursor:pointer;
	border:2px solid #cdd2d9 !important; border-radius:7px !important; background:#fff !important; transition:background .15s, border-color .15s, box-shadow .15s; }
.acc-app .acc-rewards-check input[type="checkbox"]:hover{ border-color:var(--green-3) !important; }
.acc-app .acc-rewards-check input[type="checkbox"]:checked{ background:linear-gradient(135deg,var(--green),var(--green-3)) !important; border-color:var(--green-3) !important; box-shadow:0 3px 9px rgba(88,168,94,.28); }
.acc-app .acc-rewards-check input[type="checkbox"]:checked::after{ content:"" !important; display:block; position:absolute; left:7px; top:3px; width:5px; height:10px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.acc-app .acc-rewards-check input[type="checkbox"]:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.acc-rewards-check .acc-rewards-check-label{ display:inline-flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:5px; flex:0 1 auto; min-width:0; text-align:center; }
.acc-rewards-check .acc-svg{ width:18px; height:18px; color:var(--green-3); }
.acc-rewards-check .acc-save{ color:var(--green-3); font-weight:800; }
/* Honest reward-expiry urgency (real FIFO deadline) — amber, distinct from the
   green "you'll earn" congrats, with a soft attention pulse on the hourglass. */
.acc-checkout-expiry{ display:flex; align-items:center; gap:9px; background:linear-gradient(135deg,#fff6e9,#fdeccf); border:1px solid #f5d59a; border-radius:var(--radius-sm); padding:12px 15px; margin:0 0 14px; color:#8a5a06; font-weight:600; font-size:13.5px; line-height:1.4; }
.acc-checkout-expiry b{ color:#7a3d00; font-weight:800; }
.acc-checkout-expiry .acc-ce-ico{ font-size:17px; flex:0 0 auto; }
@media (prefers-reduced-motion:no-preference){
	.acc-checkout-expiry .acc-ce-ico{ animation:acc-ce-pulse 2.4s ease-in-out infinite; }
	@keyframes acc-ce-pulse{ 0%,100%{ transform:rotate(0) scale(1); } 8%{ transform:rotate(-10deg) scale(1.07); } 16%{ transform:rotate(8deg) scale(1.07); } 24%{ transform:rotate(0) scale(1); } }
}

/* --- Loading / preloader (shimmer) --- */
.acc-history{ position:relative; transition:opacity .15s; }
.acc-history.is-loading{ position:relative; }
.acc-history.is-loading .acc-ledger-list,
.acc-history.is-loading .acc-pagination{ opacity:.35; pointer-events:none; }
.acc-history.is-loading::after{
	content:""; position:absolute; left:0; right:0; top:46px; height:3px; border-radius:3px; overflow:hidden;
	background:linear-gradient(90deg,transparent,var(--orange),transparent); background-size:40% 100%;
	animation:acc-bar 1s infinite linear;
}
@keyframes acc-bar{ 0%{ background-position:-40% 0; } 100%{ background-position:140% 0; } }
.acc-skeleton{ display:block; height:14px; border-radius:7px; margin:10px 0;
	background:linear-gradient(90deg,#eef0f3 25%,#f7f8f9 37%,#eef0f3 63%); background-size:400% 100%;
	animation:acc-shimmer 1.2s infinite; }
@keyframes acc-shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
#acc-tab-content{ transition:opacity .15s; position:relative; }

/* --- Skeleton placeholders (tab + history preloaders) --- */
.acc-skel{ display:flex; flex-direction:column; gap:14px; }
.acc-skel-card{ display:flex; flex-direction:column; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.acc-skel-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.acc-skel-box{ height:96px; border-radius:var(--radius-sm); background:var(--bg); }
.acc-skel-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 2px; border-bottom:1px solid var(--line); }
.acc-skel-list{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:6px 16px; }
.acc-skel-list .acc-skel-row:last-child{ border-bottom:none; }
.acc-skel-faq{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; }
.acc-skel-line, .acc-skel-box, .acc-skel-row{ position:relative; overflow:hidden; }
.acc-skel-line{ height:13px; border-radius:7px; background:var(--bg); width:100%; }
.acc-skel-line.w20{ width:20%; } .acc-skel-line.w40{ width:40%; } .acc-skel-line.w60{ width:60%; } .acc-skel-line.w80{ width:80%; }
/* Heading, filter pills, nudge banner, progress bar and earn-card primitives so
   each tab's placeholder closely mirrors its real layout. */
.acc-skel-head{ padding:2px 2px 6px; }
.acc-skel-pills{ display:flex; gap:8px; margin:0 0 14px; }
.acc-skel-pill{ width:54px; height:28px; border-radius:999px; background:var(--bg); position:relative; overflow:hidden; }
.acc-skel-row .acc-skel-rowmain{ display:flex; flex-direction:column; gap:7px; flex:1 1 auto; }
/* History-tab skeleton (the JS emits .acc-skel--hist with bare .acc-skel-row
   children): wrap them in a card that matches the real .acc-ledger-list so the
   loading state doesn't flash bare lines on an uncached filter/page swap. */
.acc-skel--hist{ gap:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.acc-skel--hist .acc-skel-row{ padding:14px 18px; }
.acc-skel--hist .acc-skel-row:last-child{ border-bottom:0; }
.acc-skel-nudge{ display:flex; align-items:center; gap:14px; background:var(--bg); border-radius:var(--radius-sm); padding:16px; margin-bottom:14px; }
.acc-skel-nudge-txt{ display:flex; flex-direction:column; gap:8px; flex:1 1 auto; }
.acc-skel-circle{ width:42px; height:42px; border-radius:50%; background:#e9eaf0; flex:0 0 auto; position:relative; overflow:hidden; }
.acc-skel-circle.sm{ width:30px; height:30px; }
.acc-skel-btn{ width:110px; height:38px; border-radius:var(--radius-sm); background:#e9eaf0; flex:0 0 auto; position:relative; overflow:hidden; }
.acc-skel-bar{ height:8px; border-radius:999px; background:var(--bg); width:100%; position:relative; overflow:hidden; }
.acc-skel-earngrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.acc-skel-earn{ display:flex; flex-direction:column; gap:9px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; }
.acc-skel-choicegrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.acc-skel-choice{ height:128px; border-radius:var(--radius-sm); background:var(--bg); position:relative; overflow:hidden; }
.acc-skel-levelgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
.acc-skel-level{ height:96px; border-radius:var(--radius-sm); background:var(--bg); position:relative; overflow:hidden; }
.acc-skel-btn.wide{ width:100%; }
/* Form-shaped placeholder (edit-account / edit-address / payment-methods). */
.acc-skel-form{ display:flex; flex-direction:column; gap:16px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
.acc-skel-field{ display:flex; flex-direction:column; gap:8px; }
.acc-skel-input{ height:44px; border-radius:var(--radius-sm); background:var(--bg); position:relative; overflow:hidden; }
/* Soft shimmer sweep. */
.acc-skel-line::after, .acc-skel-box::after, .acc-skel-pill::after, .acc-skel-circle::after, .acc-skel-btn::after, .acc-skel-bar::after, .acc-skel-choice::after, .acc-skel-level::after, .acc-skel-input::after{ content:""; position:absolute; top:0; right:0; bottom:0; left:0; transform:translateX(-100%);
	background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation:acc-skel-sweep 1.25s infinite; }
@keyframes acc-skel-sweep{ to{ transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce){ .acc-skel-line::after, .acc-skel-box::after{ animation:none; } }

/* --- PJAX My-Account tab navigation (account-nav.js) ---
 * The outer .woocommerce-MyAccount-content is swapped in place with no full
 * page reload. Dim the content slightly while its skeleton loads, then gently
 * fade the fresh fragment in. All motion is disabled under reduced-motion. */
.woocommerce-MyAccount-content.acc-pjax-loading{ opacity:.72; transition:opacity .18s ease; }
.woocommerce-MyAccount-content.acc-pjax-loading .acc-skel{ opacity:1; }
.woocommerce-MyAccount-content:focus{ outline:none; } /* programmatic focus target — no focus ring */
.acc-pjax-enter{ animation:acc-pjax-fade .26s ease both; }
@keyframes acc-pjax-fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
/* Visually-hidden aria-live announcer for swap feedback. */
.acc-pjax-live{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
@media (prefers-reduced-motion:reduce){
	.woocommerce-MyAccount-content.acc-pjax-loading{ transition:none; }
	.acc-pjax-enter{ animation:none; }
}

/* --- Pagination --- */
.acc-pagination{ display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.acc-page{ padding:8px 13px; border-radius:10px; background:var(--bg); text-decoration:none!important; color:var(--muted-2)!important; font-weight:600; }
.acc-page.current{ background:var(--red); color:#fff!important; }

/* --- Hero meta (held / available) --- */
.acc-hero-meta{ margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; }
.acc-hero-hold{ display:inline-flex; align-items:center; gap:5px; background:rgba(0,0,0,.16); color:#fff; padding:4px 11px; border-radius:999px; font-size:12.5px; font-weight:600; }
.acc-hero-hold .acc-tip{ background:rgba(255,255,255,.35); color:#fff; }

/* --- Top-up chip bonus --- */
.acc-chip-amount{ display:inline-flex; align-items:center; gap:7px; }
.acc-chip-bonus{ background:#e6f8ec; color:var(--green-3); font-size:11px; font-weight:800; padding:2px 7px; border-radius:999px; }
.acc-chip-amount.is-active .acc-chip-bonus{ background:#fff; }

/* --- Screenshot how-to --- */
.acc-howto{ display:flex; flex-direction:column; gap:4px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:8px; }
.acc-howto-step{ font-size:13px; color:var(--muted-2); }
.acc-howto-step a{ color:var(--red)!important; font-weight:700; }

/* --- Currency switcher --- */
/* Inline currency dropdown (next to the balance amount). */
/* Currency switcher (in-page hero) — a glass pill on the coloured hero: globe glyph
   + ISO code + chevron, in white, lifting to a brighter glass on hover/open, with
   the same soft floating menu as the header switcher. */
.acc-ccy-dd{ position:relative; display:inline-flex; vertical-align:middle; }
.acc-ccy-dd.is-open{ z-index:9996; }
.acc-ccy-dd-btn{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.28); border-radius:12px; padding:6px 11px; font-weight:700; font-size:inherit; cursor:pointer; line-height:1; vertical-align:middle; letter-spacing:.02em; font-variant-numeric:tabular-nums; transition:background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.acc-ccy-dd-btn::before{ content:""; width:14px; height:14px; flex:0 0 auto; background:currentColor; opacity:.85;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a15 15 0 0 1 4 9 15 15 0 0 1-4 9 15 15 0 0 1-4-9 15 15 0 0 1 4-9z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a15 15 0 0 1 4 9 15 15 0 0 1-4 9 15 15 0 0 1-4-9 15 15 0 0 1 4-9z'/%3E%3C/svg%3E") center/contain no-repeat; }
.acc-app button.acc-ccy-dd-btn:hover,
.acc-ccy-dd.is-open .acc-ccy-dd-btn{ background:rgba(255,255,255,.30); color:#fff; border-color:rgba(255,255,255,.5); box-shadow:0 4px 14px rgba(0,0,0,.12); }
.acc-caret{ width:0; height:0; margin-left:1px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:.85; transition:.15s; }
.acc-ccy-dd.is-open .acc-caret{ transform:rotate(180deg); }
.acc-ccy-menu{ position:absolute; top:calc(100% + 8px); left:0; z-index:9997; background:rgba(255,255,255,.86); -webkit-backdrop-filter:saturate(1.4) blur(6px); backdrop-filter:saturate(1.4) blur(6px); border:1px solid rgba(240,241,244,.9); border-radius:14px; box-shadow:0 18px 44px rgba(16,18,26,.18); padding:6px; min-width:132px; display:flex; flex-direction:column; gap:2px; transform-origin:top center; }
/* Explicit hidden state — don't rely solely on the global [hidden]{display:none!important}. */
.acc-ccy-menu[hidden]{ display:none; }
/* Open animation — fade + settle from just under the trigger (transform-origin
   pins it to the top so it never appears from a "strange place"). */
.acc-ccy-dd.is-open .acc-ccy-menu{ animation:acc-ccy-menu-in .16s cubic-bezier(.2,.7,.2,1); }
@keyframes acc-ccy-menu-in{ from{ opacity:0; transform:translateY(-6px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }
/* Symmetric close: scripts.js holds the menu ~150ms with .is-closing before
   hidden lands, so the panel fades out instead of vanishing. */
.acc-ccy-dd .acc-ccy-menu.is-closing{ animation:acc-ccy-menu-out .15s cubic-bezier(.2,.7,.2,1) both; }
@keyframes acc-ccy-menu-out{ to{ opacity:0; transform:translateY(-6px) scale(.98); } }
@media (prefers-reduced-motion:reduce){ .acc-ccy-dd.is-open .acc-ccy-menu, .acc-ccy-dd .acc-ccy-menu.is-closing{ animation:none; } }
/* The hero is a stacking context (.acc-hero-top{z-index:2}), which caps the menu's
   z-index so the fixed cart bar (z-index:9000) can paint over the open dropdown. Lift
   the hero above it while a currency dropdown is open. scripts.js toggles the
   .acc-ccy-open class in lockstep as the fallback for engines without :has()
   (Firefox <121, Safari <15.4) — separate rules on purpose: grouped, the
   unsupported :has() would invalidate the whole list and kill the fallback too. */
.acc-hero-top:has(.acc-ccy-dd.is-open){ z-index:9999; }
.acc-hero-top.acc-ccy-open{ z-index:9999; }
.acc-ccy-mi{ display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:10px; font-weight:600; font-size:13px; color:var(--ink)!important; text-decoration:none!important; font-variant-numeric:tabular-nums; transition:background .12s ease, color .12s ease; }
.acc-ccy-mi:hover{ background:#f6f7f9; }
.acc-ccy-mi.is-active{ background:#fff5f2; color:var(--red)!important; font-weight:800; }
.acc-ccy-mi.is-view{ opacity:.5; cursor:default; }
/* Unified menu-item anatomy (site design code): symbol in a soft disk, bold ISO
   code, brand check on the active row. Shared by the header + hero switchers. */
.acc-ccy-mi-sym{ flex:0 0 auto; display:inline-grid; place-items:center; width:24px; height:24px; border-radius:8px; background:var(--bg,#f7f8f9); border:1px solid var(--line,#ececf1); font-size:12px; font-weight:700; color:var(--muted-2,#777); line-height:1; }
.acc-ccy-mi.is-active .acc-ccy-mi-sym{ background:#fff; border-color:#ffd9c9; color:var(--red,#f80031); }
.acc-ccy-mi-code{ flex:1 1 auto; letter-spacing:.02em; }
.acc-ccy-mi-check{ flex:0 0 auto; width:14px; height:14px; color:var(--red,#f80031); }
/* View-only marker: a tiny monochrome SVG eye (no emoji on the front end). */
.acc-ccy-mi.is-view::after{ content:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); margin-left:5px; vertical-align:middle; }
.acc-ccy-static{ font-weight:800; }

/* --- Deposit reward-tier legend --- */
/* Outer wrap: width-bound + horizontal-scroll fallback so the table can never
   force the page to grow past the viewport (the cause of the "вылезает из
   верстки" bug on narrow phones). With the stacked card layout below 520px
   the scroll is redundant but harmless. */
.acc-tier-table-wrap{ width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 16px; }
.acc-tier-table-wrap > .acc-tier-table{ margin-bottom:0; }
.acc-tier-table{ width:100%; border-collapse:separate; border-spacing:0; margin:0 0 16px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.acc-tier-table thead th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; padding:12px 16px; background:var(--bg); }
.acc-tier-table thead th:last-child{ text-align:right; }
.acc-tier-table td{ padding:13px 16px; border-top:1px solid var(--line); vertical-align:middle; }
/* #7 — clearer rows: tappable, with a hover lift and a highlighted best tier. */
.acc-tier-row{ cursor:pointer; transition:background .15s; }
.acc-tier-row:hover{ background:#fff8f6; }
.acc-tier-row:focus-visible{ outline:2px solid var(--orange); outline-offset:-2px; }
.acc-tier-from{ color:var(--ink); font-weight:700; white-space:nowrap; }
.acc-tier-badge{ display:inline-block; vertical-align:middle; margin-left:6px; font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#fff; background:linear-gradient(135deg,var(--green),var(--green-3)); padding:3px 8px; border-radius:999px; }
/* "Most popular" anchor — brand red/orange so it reads distinctly from the
   green "Best value" badge. */
.acc-tier-badge--popular{ background:linear-gradient(135deg,var(--red,#f80031),var(--orange,#ff6e40)); }
.acc-tier-best{ background:linear-gradient(180deg,#f1fbf4,#fff); }
.acc-tier-best:hover{ background:#eafaef; }
.acc-tier-earn{ line-height:1.2; }
.acc-tier-earn-amt{ display:block; font-weight:800; color:var(--green-3); font-size:15px; white-space:nowrap; }
.acc-tier-earn-rate{ display:block; font-size:11.5px; color:var(--muted-2); font-weight:600; margin-top:1px; white-space:nowrap; }
.acc-tier-rate{ font-weight:800; color:var(--green-3); white-space:nowrap; }
.acc-tier-action{ text-align:right; white-space:nowrap; }
.acc-tier-apply{ background:linear-gradient(135deg,var(--red),var(--orange)); border:0; color:#fff; border-radius:999px; padding:8px 16px; font-weight:800; font-size:12.5px; line-height:1.1; white-space:nowrap; cursor:pointer; box-shadow:0 4px 12px rgba(248,0,49,.18); transition:transform .12s, filter .15s; }
.acc-app .acc-tier-apply, .acc-app .acc-tier-apply:hover, .acc-app .acc-tier-apply:focus, .acc-app .acc-tier-apply:active{ background:linear-gradient(135deg,var(--red),var(--orange)) !important; color:#fff !important; }
.acc-tier-apply:hover{ transform:translateY(-1px); filter:saturate(1.05); }

/* --- Onboarding flash bonus (tier table) --- */
.acc-flash-banner{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:linear-gradient(135deg,#fff1ee,#ffe3dc); border:1px solid #ffcdbf; border-radius:var(--radius-sm); padding:10px 14px; margin:0 0 12px; font-weight:700; color:#b3210e; font-size:13.5px; }
.acc-flash-zap{ font-size:16px; color:#ff6e40; }
.acc-flash-text{ flex:1 1 auto; }
.acc-flash-timer, .acc-flash-pop-timer, .acc-flash-mini-timer{ font-variant-numeric:tabular-nums; font-weight:800; color:#e0102a; background:#fff; border:1px solid #ffcdbf; border-radius:7px; padding:2px 8px; letter-spacing:.4px; }
.acc-tier-table.is-flash .acc-tier-old{ color:var(--muted-2); text-decoration:line-through; font-weight:600; opacity:.75; }
.acc-tier-flash{ color:#e0102a; font-weight:800; }
.acc-tier-rate.is-dim s{ color:var(--muted-2); opacity:.7; }
/* "How levels compare" — struck default requirement + the real one. */
.acc-reach-old{ color:var(--muted-2); text-decoration:line-through; opacity:.7; margin-right:5px; }
.acc-reach-real{ font-weight:700; color:var(--ink); }

/* Earn-tab social-proof line — small green chip-style row that sits above the
   claim form so the social signal is visible while the visitor is deciding
   whether to claim. */
.acc-earn-proof{ display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; padding:8px 14px; background:#eafaef; color:var(--green-3,#1f7a46); border:1px solid #c9efd3; border-radius:999px; font-size:13px; font-weight:700; line-height:1.3; }
.acc-earn-proof-ico{ display:inline-flex; }
.acc-earn-proof-ico svg{ width:16px; height:16px; }

/* Post-claim cross-sell card — appears under the review form after a
   successful submission. The strongest cross-sell moment on the rewards
   surface: the user just earned, so propose the next action while their
   reward-seeking intent is hot. */
.acc-post-claim-cross{ display:flex; flex-direction:column; gap:8px; margin:14px 0 0; padding:16px 18px; background:linear-gradient(135deg,#eafaef,#f6fbf8); border:1px solid #c9efd3; border-radius:var(--radius); animation:acc-pop .32s cubic-bezier(.16,1.2,.3,1) both; }
.acc-post-claim-cross b{ font-size:15px; color:var(--ink,#16161c); font-weight:800; }
.acc-post-claim-cross span{ font-size:13.5px; color:var(--muted-2,#5b616b); line-height:1.4; }
.acc-post-claim-cross .acc-btn{ align-self:flex-start; margin-top:4px; padding:11px 18px; font-size:14px; }
@media (max-width:480px){ .acc-post-claim-cross .acc-btn{ align-self:stretch; width:100%; } }

/* --- Choice card: rate/amount lead, title, subtitle, desc, terms, up-to --- */
.acc-choice-body{ position:relative; }
.acc-choice-rate{ display:inline-block; background:#eafaef; color:var(--green-3); font-size:12px; font-weight:800; padding:3px 10px; border-radius:999px; margin-bottom:8px; }
.acc-choice-amount{ display:block; color:var(--green-3); font-size:20px; font-weight:800; line-height:1; margin-bottom:6px; }
.acc-choice-title{ display:block; font-weight:700; font-size:14.5px; }
.acc-choice-sub{ display:block; color:var(--ink); font-weight:600; font-size:12.5px; margin-top:1px; }
.acc-choice-desc{ display:block; color:var(--muted-2); font-size:12.5px; margin-top:4px; line-height:1.35; }
.acc-choice-terms{ display:block; margin-top:7px; color:var(--muted-2); font-size:11.5px; font-weight:600; }
.acc-choice-upto{ display:inline-block; margin-top:8px; color:var(--green-3); font-size:12px; font-weight:800; }

/* --- FAQ categories --- */
.acc-faq-cats > .acc-faq-cat:first-child{ margin-top:4px; }
.acc-faq-cat{ margin:26px 0 12px; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-2); font-weight:800; padding-left:2px; }
.acc-faq-cat:first-child{ margin-top:4px; }

/* --- Checkout: rewards / balance opt-in (conversion-focused) --- */
.acc-checkout-rewards, .acc-partial-funds{
	display:block; background:linear-gradient(135deg,#fff6f4,#fff);
	border:1.5px solid #ffd3c7; border-radius:var(--radius-sm); padding:14px 16px; margin:0 0 16px;
	box-shadow:0 4px 16px rgba(248,0,49,.06);
}
.acc-checkout-rewards .acc-switch, .acc-partial-funds label{ margin:0; align-items:center; }
.acc-checkout-rewards .acc-switch-label{ font-weight:600; }
.acc-checkout-rewards .acc-save{ color:var(--green-3); font-weight:800; }
.acc-checkout-rewards:hover, .acc-partial-funds:hover{ border-color:var(--orange); }

/* --- Hero note + membership-level tinting --- */
.acc-hero-note{ display:block; margin-top:12px; font-size:11.5px; opacity:.82; font-weight:600; }
.acc-hero--balance.acc-lvl-gold{ background:linear-gradient(135deg,#f80031,#ff9500); }
.acc-hero--rewards.acc-lvl-gold{ background:linear-gradient(135deg,#ff7a18,#ffb300); }
.acc-hero.acc-lvl-gold{ box-shadow:0 14px 40px rgba(224,163,23,.26); }
.acc-hero--balance.acc-lvl-platinum{ background:linear-gradient(135deg,#e2354f,#7e83a8); }
.acc-hero--rewards.acc-lvl-platinum{ background:linear-gradient(135deg,#ff6e40,#8aa0c0); }
.acc-hero--balance.acc-lvl-diamond{ background:linear-gradient(135deg,#46202c,#2a2f3a); }
.acc-hero--rewards.acc-lvl-diamond{ background:linear-gradient(135deg,#4a2a20,#2a2f3a); }
.acc-hero--balance.acc-lvl-diamond_plus{ background:linear-gradient(135deg,#2a0f16,#0e1014); }
.acc-hero--rewards.acc-lvl-diamond_plus{ background:linear-gradient(135deg,#2a160e,#0e1014); }
.acc-hero.acc-lvl-diamond, .acc-hero.acc-lvl-diamond_plus{ box-shadow:0 16px 44px rgba(0,0,0,.34); }

/* --- Limit-reached reward card --- */
.acc-choice.is-disabled{ opacity:.6; }
.acc-choice.is-disabled .acc-choice-body{ background:#fafbfc; border-style:dashed; }
.acc-choice.is-disabled input{ cursor:not-allowed; }
.acc-choice-locked{ display:inline-block; margin-top:8px; background:#f1f2f5; color:var(--muted-2); font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; }

/* --- Informational reward card (automatic / loyalty) --- */
.acc-choice--info .acc-choice-body{ background:linear-gradient(135deg,#fff,#f7fbf8); border-style:solid; border-color:#cfe9d6; }
/* CTA pill: wrap gracefully to 2 centred lines instead of clipping with an
   ellipsis (hidden text reads as broken). Keeps the top gap from the card body. */
.acc-choice-cta{ display:inline-flex; align-items:center; justify-content:center; gap:5px; margin-top:12px; align-self:flex-start; background:var(--green-3); color:#fff!important; text-decoration:none!important; font-weight:700; font-size:12.5px; line-height:1.35; padding:9px 16px; border-radius:14px; white-space:normal; text-align:center; max-width:100%; transition:transform .12s, box-shadow .12s; }
.acc-choice-cta:hover{ transform:translateY(-1px); box-shadow:0 7px 16px rgba(88,168,94,.28); }

/* --- Rewards-program rules --- */
.acc-rules-card{ border-left:3px solid var(--red); }
.acc-rules-card h4{ margin:0 0 10px; }
.acc-rules-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.acc-rules-list li{ position:relative; padding-left:24px; color:var(--muted-2); font-size:13.5px; line-height:1.5; }
.acc-rules-list li::before{ content:""; position:absolute; left:6px; top:7px; width:7px; height:7px; border-radius:50%; background:var(--red); }

/* --- Conversion micro-animations (modern, subtle, reduced-motion safe) --- */
@keyframes acc-rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes acc-pop{ 0%{ opacity:0; transform:translateY(8px); } 60%{ opacity:1; } 100%{ opacity:1; transform:none; } }
/* Tab content + cards rise softly into place (also on each AJAX tab swap). */
#acc-tab-content > *{ animation:acc-rise .38s cubic-bezier(.16,1,.3,1) both; }
.acc-app .acc-card{ animation:acc-rise .42s cubic-bezier(.16,1,.3,1) both; }
/* The live reward estimate / preview pop when they appear — draws the eye to the
   number that drives the action. */
.acc-estimate:not([hidden]), .acc-reward-preview:not([hidden]){ animation:acc-pop .34s cubic-bezier(.16,1.2,.3,1) both; }
.acc-estimate-amount, #acc-estimate-amount{ transition:color .2s; }
/* Earn / choice / level cards lift on hover for a tactile, premium feel.
   .acc-earn-card transition + hover are defined once at the canonical site
   (line 129-131); the redundant pair previously sitting here dropped
   border-color from the transition and overrode the lift distance. */
.acc-earn-card, .acc-choice, .acc-chip-amount, .acc-hero-action, .acc-btn{ will-change:transform; }
@media (prefers-reduced-motion:reduce){
	#acc-tab-content > *, .acc-app .acc-card, .acc-estimate, .acc-reward-preview,
	.acc-post-claim-cross{ animation:none !important; }
}

/* --- Per-reward instructions + field hints --- */
.acc-instructions{ display:flex; gap:10px; align-items:flex-start; background:#f7f8f9; border:1px solid var(--line); border-left:3px solid var(--orange); border-radius:var(--radius-sm); padding:12px 14px; margin:0 0 4px; }
.acc-instructions-ico{ flex:0 0 auto; color:var(--orange); margin-top:1px; }
.acc-instructions-ico .acc-svg{ width:18px; height:18px; }
.acc-instructions-text{ color:var(--ink); font-size:13.5px; line-height:1.55; flex:1; }
.acc-instructions-steps{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:5px; }
.acc-instructions-steps li{ padding-left:2px; }
.acc-instructions-steps li::marker{ color:var(--orange); font-weight:800; }
.acc-review-hint, .acc-link-hint{ display:block; color:var(--orange); font-weight:600; margin-top:4px; }

/* No dangling space at the bottom of a tab / card / app: the last block never
   keeps its own bottom margin (fixes the extra gap under the Rewards tables). */
#acc-tab-content > *:last-child,
.acc-app > *:last-child,
.acc-card > *:last-child,
.acc-rules-list li:last-child{ margin-bottom:0; }
.acc-tier-table:last-child, .acc-ltable-wrap:last-child{ margin-bottom:0; }

/* --- Balance hero actions (wallet merged into the hero) --- */
.acc-hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; position:relative; z-index:1; }
.acc-hero-action{ display:inline-flex; align-items:center; gap:7px; background:#fff; color:var(--red)!important; font-weight:800; text-decoration:none!important; padding:10px 18px; border-radius:999px; box-shadow:0 5px 14px rgba(0,0,0,.12); transition:transform .12s, box-shadow .12s; }
.acc-hero-action:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.16); }
.acc-hero-action .acc-svg{ width:16px; height:16px; }
.acc-hero--balance .acc-chip, .acc-hero--rewards .acc-chip{ text-decoration:none!important; }
.acc-hero-actions .acc-hero-sub{ margin-top:0; }

/* --- History currency filter --- */
/* ── History filters ──────────────────────────────────────────────────────
   Two segmented pill bars (currency + type), grouped in one wrap that sits
   flush RIGHT of the "History" heading and wraps neatly under it on phones. */
.acc-hist-filters{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px 10px; margin-left:auto; }
/* Neutral segmented control — matches .acc-segmented/.acc-seg exactly: NO colour
   highlights on any pill (incl. the direction pills); active = white card + dark
   text + soft shadow. overflow-x:auto so a wide bar scrolls like the segmented
   control instead of forcing the page wider. */
.acc-hist-filter{ display:inline-flex; gap:4px; padding:4px; background:var(--bg,#f7f8f9); border-radius:999px; max-width:100%; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.acc-hist-filter::-webkit-scrollbar{ display:none; }
.acc-hist-pill{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; padding:8px 15px; border-radius:999px; font-size:13px; font-weight:600; line-height:1; color:var(--muted-2,#777)!important; text-decoration:none!important; white-space:nowrap; font-variant-numeric:tabular-nums; transition:background .2s ease, color .2s ease, box-shadow .2s ease; }
.acc-hist-pill:hover{ color:var(--ink,#222)!important; }
.acc-hist-pill:focus-visible{ outline:2px solid var(--red,#f80031); outline-offset:-2px; }
.acc-hist-pill.is-active{ background:var(--card,#fff); color:var(--ink,#222)!important; box-shadow:0 2px 8px rgba(0,0,0,.08); }
/* The +/- sign is a plain neutral glyph — inherits the pill's own colour, no tint. */
.acc-hist-pill-sign{ font-weight:800; opacity:.85; }

/* Icons default to a bounded inline size so an SVG used in a context without an
   explicit size rule (e.g. the checkout "Use my rewards" label) never renders at
   its huge intrinsic size. */
.acc-svg{ display:block; width:18px; height:18px; flex:0 0 auto; }
.acc-switch-label .acc-svg, .acc-checkout-rewards .acc-svg, .acc-partial-funds .acc-svg{ width:18px; height:18px; vertical-align:middle; }
/* Theme guard: stop any of our buttons picking up the browser/theme native grey
   fill that sticks after :active. */
.acc-app button, .acc-app .acc-btn, .acc-app .acc-seg, .acc-app .acc-chip-amount{ -webkit-appearance:none; appearance:none; }
[hidden]{ display:none!important; }
#acc-tab-content{ transition:opacity .15s; }
#acc-tab-content.is-loading{ opacity:.45; pointer-events:none; }

/* =========================================================================
 * Responsive — keep everything tidy on phones.
 * ====================================================================== */
@media (max-width:782px){
	/* Keep the full corner radius on phones — do NOT shrink --radius (that made
	   every card, cross-sell, earn card etc. look boxier on mobile). */
	.acc-hero{ padding:20px; }
	.acc-hero-amount{ font-size:32px; }
	.acc-hero-top{ flex-wrap:wrap; }
	.acc-earn-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
}
@media (max-width:560px){
	/* #5 — the segmented control stays in normal flow (no floating/sticky). */
	.acc-segmented{ position:static; }
	.acc-seg{ padding:9px 14px; font-size:13px; }
	.acc-hero-amount{ font-size:28px; }
	.acc-card{ padding:16px; }
	.acc-choice-grid{ grid-template-columns:1fr 1fr; }
	.acc-earn-grid{ grid-template-columns:1fr 1fr; }
	.acc-levels{ grid-template-columns:1fr 1fr; }
	.acc-refund-fields{ flex-direction:column; }
	/* keep tooltips inside the viewport */
	.acc-tip::after{ max-width:min(240px,72vw); }
	.acc-row{ padding:13px 14px; }
	.acc-topup-head{ align-items:flex-start; }
	/* Tier table reads tighter on phones: smaller cell padding + compact CTA so
	   the "Top up, get +X" button never looks cramped or clipped. */
	.acc-tier-table thead th, .acc-tier-table td{ padding:11px 12px; }
	.acc-tier-apply{ padding:8px 12px; font-size:12px; width:100%; }
	.acc-tier-action{ width:1%; }
	.acc-choice-cta{ align-self:stretch; width:100%; }
	/* Flash banner stacks cleanly on phones: text on its own line, timer below,
	   nothing clipped. */
	.acc-flash-banner{ padding:11px 13px; font-size:13px; }
	.acc-flash-text{ flex:1 1 100%; }
	.acc-flash-banner .acc-flash-timer{ margin-left:26px; }
	.acc-hero-actions{ width:100%; }
	.acc-hero-action{ flex:1 1 auto; justify-content:center; }
	.acc-trust{ gap:6px 14px; }
}
@media (max-width:380px){
	.acc-choice-grid, .acc-earn-grid, .acc-levels{ grid-template-columns:1fr; }
	.acc-hero-amount{ font-size:26px; }
	.acc-flash-banner{ font-size:12.5px; }
}

/* =========================================================================
 * MOBILE OVERFLOW SAFETY — universal guards so the wallet/rewards/login UI
 * never blows past the viewport on small screens. Scoped to .acc-app and
 * .woocommerce-account so it can never affect pages we don't own.
 * ====================================================================== */

/* Base: every wallet/rewards card respects its container width and shows
   long currency strings via wrapping instead of horizontal scroll. */
.acc-app, .acc-app *,
.woocommerce-account .woocommerce-MyAccount-content .acc-app *{ box-sizing:border-box; }
.acc-app{ max-width:100%; min-width:0; }
.acc-app .acc-card, .acc-app .acc-hero, .acc-app .acc-earn-card,
.acc-app .acc-choice-body, .acc-app .acc-level, .acc-app .acc-pl-card,
.acc-app .acc-earn-cross{ max-width:100%; min-width:0; }
/* Hero balance figure stays inside its card on narrow phones. */
.acc-app .acc-hero-amount{ overflow-wrap:anywhere; word-break:break-word; }
/* Long URLs / handles pasted by the reward submitter shouldn't tear the form. */
.acc-app input[type="url"], .acc-app input[type="text"],
.acc-app textarea{ max-width:100%; }
/* Ledger / reward row two-column flex layouts: allow each column to shrink. */
.acc-app .acc-row,
.acc-app .acc-row-main{ min-width:0; }
.acc-app .acc-row-main{ flex:1 1 auto; overflow-wrap:anywhere; word-break:break-word; }
.acc-app .acc-row-amt{ flex:0 0 auto; }
/* Earn-cross cards (history / cross-sell bridge) wrap long copy gracefully. */
.acc-app .acc-earn-cross{ flex-wrap:wrap; }
.acc-app .acc-earn-cross-txt{ min-width:0; flex:1 1 auto; }
.acc-app .acc-earn-cross-txt b,
.acc-app .acc-earn-cross-txt span{ overflow-wrap:anywhere; }

/* Tier table — stacked card layout at <520px. Each <tr> becomes a self-
   contained card with: amount + best-badge on top, the earn block in the
   middle, the CTA full-width on the bottom. The original table grid is
   abandoned (display:block) so columns can't push each other off-screen.
   The thead is hidden — its labels are already implied by the visible row
   content (the +X% rate line, the action button copy). */
@media (max-width:520px){
	.acc-tier-table-wrap{ overflow-x:visible; }
	.acc-tier-table, .acc-tier-table thead, .acc-tier-table tbody,
	.acc-tier-table tr, .acc-tier-table td{ display:block; width:100%; }
	.acc-tier-table{ border:0; background:transparent; border-radius:0; overflow:visible; margin:0; }
	.acc-tier-table thead{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
	/* Card row is a 2-column grid: the threshold + earn stack on the LEFT, the
	   Top-up button sits to their RIGHT (vertically centred), instead of a
	   full-width button under them. */
	.acc-tier-table tbody tr{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; margin:0 0 10px;
		display:grid; grid-template-columns:1fr auto; grid-template-areas:"from action" "earn action"; align-items:center; column-gap:12px; }
	.acc-tier-table tbody tr.acc-tier-best{ background:linear-gradient(180deg,#f1fbf4,#fff); border-color:#cfe9d6; }
	.acc-tier-table td{ padding:0; border:0; width:auto; }
	.acc-tier-table .acc-tier-from{ grid-area:from; font-size:15px; line-height:1.25; margin:0 0 6px; }
	.acc-tier-table .acc-tier-badge{ display:inline-block; margin-left:8px; vertical-align:middle; }
	.acc-tier-table .acc-tier-earn{ grid-area:earn; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin:0; }
	.acc-tier-table .acc-tier-earn-amt, .acc-tier-table .acc-tier-earn-rate{ display:inline; margin:0; white-space:normal; overflow-wrap:anywhere; }
	.acc-tier-table .acc-tier-earn-rate{ color:var(--muted-2); font-size:12.5px; font-weight:600; }
	.acc-tier-table .acc-tier-action{ grid-area:action; text-align:right; white-space:normal; align-self:center; }
	.acc-tier-table .acc-tier-apply{ width:auto; padding:12px 16px; font-size:14px; white-space:nowrap; }
}

/* =========================================================================
 * Payment-limits / round-up checkout panel.
 * Lives inside the checkout payment area; styled as a premium, focused card.
 * ====================================================================== */
#acc-pl-panel{ margin:18px 0; } /* spacing both ABOVE and below the card. */
#acc-pl-panel:empty, #acc-pl-panel[data-state="none"]{ display:none; }
.acc-pl-card{
	background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
	padding:18px 18px 16px; box-shadow:0 6px 22px rgba(20,22,30,.06);
	animation:acc-pl-in .28s cubic-bezier(.2,.7,.3,1);
}
@keyframes acc-pl-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
/* The pop-in animation is a FIRST-MOUNT cue only. Once the panel has been shown
   at least once this session (body.gpco-pl-shown is added by JS after the first
   non-empty render), subsequent renders — re-renders from updated_checkout,
   step-switch fragment refreshes — skip the animation, so flipping between
   wizard steps no longer re-plays the entry each time. This applies to EVERY
   .acc-pl-card across the page (round-up, rewards card, money-back guarantee)
   so siblings stop re-popping too. The modal takeover keeps its own acc-pl-pop
   animation (scoped to #acc-pl-panel.acc-pl-open below). */
body.gpco-pl-shown .acc-pl-card{ animation:none !important; }
body.gpco-pl-shown #acc-pl-panel.acc-pl-open .acc-pl-card{ animation:acc-pl-pop .24s cubic-bezier(.2,.7,.3,1) !important; }
.acc-pl-card--below_min, .acc-pl-card--below_min_deposit{ border-color:#ffd9c6; background:linear-gradient(180deg,#fffaf7,#fff); }
.acc-pl-card--rounded{ border-color:#c9efd3; background:linear-gradient(180deg,#f1fbf4,#fff); }
.acc-pl-card--above_max{ border-color:#ffe0a3; background:linear-gradient(180deg,#fffaf0,#fff); }

/* ---- Full-screen takeover (blocking limit states) so the shopper decides now ---- */
body.acc-pl-locked{ overflow:hidden; }
#acc-pl-panel.acc-pl-open{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:100050; margin:0;
	display:flex; align-items:center; justify-content:center; padding:20px;
	background:rgba(18,20,28,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
	animation:acc-pl-fade .2s ease; overflow:auto; }
@keyframes acc-pl-fade{ from{ opacity:0; } to{ opacity:1; } }
#acc-pl-panel.acc-pl-open .acc-pl-card{ width:100%; max-width:460px; margin:auto;
	max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow:auto; box-shadow:0 24px 70px rgba(10,12,20,.45);
	transform-origin:center top; animation:acc-pl-pop .24s cubic-bezier(.2,.7,.3,1); }
/* No scale — scaling the panel center makes it look like it's stretching from the
   middle. A small upward slide + fade reads as a clean modal entry. */
@keyframes acc-pl-pop{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
/* Reduced-motion: the panel/modal entrances slide (translateY) and re-play on the
   modal takeover; honour the preference so they appear instantly. Placed after the
   !important modal rules above so it wins the same-specificity cascade under the
   media query. No JS listens for these animations' end, so this can't stall a swap. */
@media (prefers-reduced-motion:reduce){
	.acc-pl-card,
	#acc-pl-panel.acc-pl-open,
	#acc-pl-panel.acc-pl-open .acc-pl-card,
	body.gpco-pl-shown #acc-pl-panel.acc-pl-open .acc-pl-card{ animation:none !important; }
}
.acc-pl-card{ position:relative; }
.acc-pl-close{ position:absolute; top:10px; right:12px; width:40px; height:40px; padding:0 !important; box-sizing:border-box; border:0 !important; border-radius:50% !important;
	background:rgba(0,0,0,.06) !important; color:var(--ink) !important; font-size:22px; line-height:1; cursor:pointer; display:none; box-shadow:none !important; -webkit-appearance:none; appearance:none;
	align-items:center; justify-content:center; transition:background .15s, color .15s; }
#acc-pl-panel.acc-pl-open .acc-pl-close{ display:inline-flex; }
.acc-pl-close:hover{ background:rgba(0,0,0,.12) !important; }

/* ---- Alternative-method picker ----
   !important throughout so a theme's generic <button> styling (often a grey fill)
   can never bleed through onto our pills. */
.acc-pl-methods{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.acc-pl-methods-h{ display:block; font-size:12.5px; font-weight:700; color:var(--muted-2); margin-bottom:9px; }
.acc-pl-methods-list{ display:flex; flex-wrap:wrap; gap:8px; }
#acc-pl-panel .acc-pl-method{ flex:1 1 auto; min-width:120px; background:#fff !important; border:1.5px solid var(--line) !important; border-radius:var(--radius-sm) !important;
	padding:11px 14px !important; font-weight:700; font-size:13.5px; color:var(--ink) !important; cursor:pointer; text-align:center; box-shadow:none !important;
	transition:border-color .15s, transform .12s, box-shadow .12s; }
#acc-pl-panel .acc-pl-method:hover{ border-color:var(--green-3) !important; background:#fff !important; color:var(--ink) !important; transform:translateY(-1px); box-shadow:0 7px 16px rgba(88,168,94,.18) !important; }
/* Instant feedback while the gateway swap is in flight: spinner overlay + the
   button's label fades out. Cleared when the panel fragment refreshes. */
#acc-pl-panel .acc-pl-method.is-loading{ position:relative; pointer-events:none; color:transparent !important; }
#acc-pl-panel .acc-pl-method.is-loading::after{ content:""; position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
	border-radius:50%; border:2.5px solid rgba(88,168,94,.22); border-top-color:var(--green-3); animation:acc-spin .7s linear infinite; }
#acc-pl-panel .acc-pl-method[disabled]:not(.is-loading){ opacity:.55; cursor:not-allowed; }
.acc-pl-reassure--warn{ color:#b25a00; font-weight:600; }
.acc-pl-card--below_min_deposit .acc-pl-ico{ background:linear-gradient(135deg,var(--green),var(--green-3)); box-shadow:0 4px 12px rgba(88,168,94,.22); }

.acc-pl-head{ display:flex; align-items:flex-start; gap:12px; }
.acc-pl-ico{ flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
	background:linear-gradient(135deg,var(--red),var(--orange)); color:#fff; box-shadow:0 4px 12px rgba(248,0,49,.20); }
.acc-pl-ico--ok{ background:linear-gradient(135deg,var(--green),var(--green-3)); box-shadow:0 4px 12px rgba(88,168,94,.22); }
.acc-pl-ico--warn{ background:linear-gradient(135deg,#ffb13b,#ff8a00); box-shadow:0 4px 12px rgba(255,138,0,.22); }
.acc-pl-title{ font-weight:800; font-size:16px; color:var(--ink); line-height:1.25; }
.acc-pl-sub{ font-size:13px; color:var(--muted-2); margin-top:3px; line-height:1.4; }
/* #3 — title row holds the title (left) and the Undo (right); the Undo wraps to
   its own line below (left-aligned, "as usual") only when the title leaves no room. */
.acc-pl-head > .acc-pl-htext{ flex:1 1 auto; min-width:0; }
.acc-pl-titlerow{ display:flex; align-items:flex-start; justify-content:space-between; gap:5px 12px; flex-wrap:wrap; }
.acc-pl-titlerow .acc-pl-title{ flex:1 1 auto; min-width:0; }
.acc-pl-titlerow .acc-pl-undo{ flex:0 0 auto; margin:0; align-self:flex-start; }

.acc-pl-bar{ height:9px; border-radius:999px; background:#f0ece9; overflow:hidden; margin:15px 0 7px; }
.acc-pl-bar > span{ display:block; height:100%; border-radius:999px;
	background:linear-gradient(90deg,var(--red),var(--orange)); transition:width .5s cubic-bezier(.2,.7,.3,1); }
.acc-pl-bar-meta{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted-2); margin-bottom:14px; }
.acc-pl-bar-meta .amount{ font-weight:700; color:var(--ink); }
.acc-pl-bar-goal{ font-weight:600; }

#acc-pl-panel .acc-btn--primary{ width:100%; margin-top:2px; }
.acc-pl-reassure{ display:flex; align-items:flex-start; gap:7px; font-size:12.5px; color:var(--green-3);
	margin:10px 2px 0; line-height:1.45; font-weight:600; }
.acc-pl-reassure svg{ flex:0 0 auto; margin-top:1px; }

.acc-pl-alt{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.acc-pl-or{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.acc-pl-alt:before, .acc-pl-alt:after{ content:""; height:1px; background:var(--line); flex:0 0 14px; }
#acc-pl-panel .acc-pl-additems{ flex:1 1 auto; width:auto; }

.acc-pl-undo{ display:inline-block; margin-top:12px; background:none !important; border:0 !important; padding:0 !important; box-shadow:none !important; cursor:pointer;
	color:var(--muted-2) !important; font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.acc-pl-undo:hover{ color:var(--ink) !important; background:none !important; }
/* Guest note under the round-up hero: quieter than the main reassure line. */
.acc-pl-reassure--guest{ color:var(--muted-2); font-weight:500; margin-top:6px; }

/* =========================================================================
 * Order page (My Account / thank-you) — delivery-status hero (digital service).
 * ====================================================================== */
.acc-order-status{ display:flex; align-items:center; gap:16px; margin:0 0 22px; padding:18px 20px; border-radius:var(--radius); border:1px solid var(--line); background:#fff; box-shadow:0 6px 22px rgba(20,22,30,.06); }
.acc-order-status--go{ border-color:#c9efd3; background:linear-gradient(180deg,#f1fbf4,#fff); }
.acc-order-status--wait{ border-color:#ffe2b0; background:linear-gradient(180deg,#fff8ec,#fff); }
.acc-order-status--warn{ border-color:#f6c9c2; background:linear-gradient(180deg,#fdeeec,#fff); }
.acc-os-icon{ flex:0 0 auto; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; background:#fff; box-shadow:0 4px 14px rgba(20,22,30,.08); }
.acc-os-body{ flex:1 1 auto; min-width:0; }
.acc-os-head{ font-size:18px; font-weight:800; color:var(--ink); line-height:1.25; }
.acc-os-sub{ font-size:14px; color:var(--muted-2); margin-top:3px; line-height:1.45; }
.acc-os-meta{ font-size:12.5px; color:var(--muted); margin-top:7px; font-weight:600; }
/* Factual payment/refund history pills — sit above the status headline, styled
   like the status pill so they read as first-class status context. */
.acc-os-facts{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px; }
.acc-os-fact{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 8px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.01em; line-height:1; border:1px solid transparent; white-space:nowrap; }
.acc-os-fact svg{ flex:0 0 auto; }
.acc-os-fact--good{ color:#14804a; background:#e9f8ef; border-color:#c9efd3; }
.acc-os-fact--warn{ color:#9a6a00; background:#fff6e6; border-color:#ffe2b0; }
.acc-os-fact--bad{ color:#b42318; background:#fdecea; border-color:#f6c9c2; }
.acc-os-fact--muted{ color:#5b6472; background:#f2f4f7; border-color:#e3e7ee; }
@media (max-width:480px){ .acc-order-status{ gap:12px; padding:15px 16px; } .acc-os-icon{ width:44px; height:44px; font-size:22px; } .acc-os-head{ font-size:16px; } .acc-os-fact{ font-size:11px; } }
/* Contextual hero CTA (complete payment / order again). */
.acc-os-cta{ margin-top:12px; }
.acc-os-cta .acc-btn{ display:inline-flex; align-items:center; }
/* "Need help with this order?" strip. */
.acc-order-help{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:space-between; margin:20px 0 0; padding:15px 18px; border-radius:var(--radius,20px); background:#f7f8f9; border:1px solid var(--line,#ececf1); }
.acc-order-help-txt{ font-size:14px; color:var(--ink,#222); font-weight:600; }
.acc-order-help-btn{ background:#fff!important; border:1.5px solid var(--line,#ececf1)!important; color:var(--ink,#222)!important; padding:9px 18px; }
.acc-order-help-btn:hover{ border-color:var(--red,#f80031)!important; color:var(--red,#f80031)!important; }
@media (max-width:480px){ .acc-order-help{ justify-content:center; text-align:center; } .acc-order-help-btn{ flex:1 1 100%; text-align:center; } }

/* --- Order actions block (view-order) — same card верстка as the help strip;
   the buttons reuse the orders-list conversion palette: reorder = brand RED,
   pay / resume = brand ORANGE, cancel = quiet. --- */
.acc-order-actions{ margin:20px 0 0; }
.acc-order-actions-btns{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.acc-order-actions .acc-oa-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:7px;
	min-height:40px; padding:9px 16px; margin:0 !important;
	border-radius:12px; font-size:13.5px; font-weight:700; line-height:1.2;
	text-decoration:none !important; cursor:pointer;
	border:1px solid var(--line,#ececf1); background:#fff; color:var(--ink,#222) !important;
	transition:transform .14s ease, box-shadow .14s ease, filter .15s ease;
}
.acc-order-actions .acc-oa-btn:hover{ transform:translateY(-1px); }
.acc-order-actions .acc-oa-btn.reorder,
.acc-order-actions .acc-oa-btn.reorder:hover{
	background:linear-gradient(130deg,#f80031,#ff2e55) !important; border-color:transparent !important;
	color:#fff !important; box-shadow:0 4px 12px rgba(248,0,49,.22);
}
.acc-order-actions .acc-oa-btn.reorder:hover{ box-shadow:0 6px 18px rgba(248,0,49,.30); filter:saturate(1.05); }
.acc-order-actions .acc-oa-btn.pay,
.acc-order-actions .acc-oa-btn.paused-restart,
.acc-order-actions .acc-oa-btn.pay:hover,
.acc-order-actions .acc-oa-btn.paused-restart:hover{
	background:linear-gradient(130deg,#ff6e40,#ff8f3f) !important; border-color:transparent !important;
	color:#fff !important; box-shadow:0 4px 12px rgba(255,110,64,.26);
}
.acc-order-actions .acc-oa-btn.pay:hover,
.acc-order-actions .acc-oa-btn.paused-restart:hover{ box-shadow:0 6px 18px rgba(255,110,64,.34); filter:saturate(1.05); }
.acc-order-actions .acc-oa-btn.cancel{ background:transparent; border-color:transparent; color:var(--muted,#777) !important; }
/* Quiet hover must OUTRANK the generic account-button gradient hover in
   orders-list.css (.woocommerce-account .woocommerce-MyAccount-content
   .button:hover — (0,3,0) with !important): same !important, higher
   specificity, so Cancel never masquerades as the primary CTA. */
.acc-order-actions .acc-oa-btn.cancel:hover{ color:#dc2626 !important; transform:none; }
.woocommerce-account .woocommerce-MyAccount-content .acc-order-actions .acc-oa-btn.cancel:hover,
.woocommerce-account .woocommerce-MyAccount-content .acc-order-actions .acc-oa-btn.cancel:focus{
	color:#dc2626 !important; background:transparent !important; background-color:transparent !important;
	border-color:transparent !important; transform:none;
}
/* This block is the SINGLE actions surface on view-order — hide WC/theme-native strips. */
/* The order page carries ONE actions surface — our .acc-order-actions "Quick
   actions" block. (The redundant WooCommerce "Actions:" totals row is removed
   in PHP — acc_strip_order_actions_total_row — not here.) */
.woocommerce-view-order p.order-actions,
.woocommerce-view-order .woocommerce-MyAccount-orders-actions{ display:none !important; }
@media (max-width:480px){ .acc-order-actions-btns{ width:100%; } .acc-order-actions .acc-oa-btn{ flex:1 1 100%; } }

/* =========================================================================
 * Order page (My Account / thank-you) — rewards congrats + offer card.
 * Reuses the green acc-pl-card--rounded design code so it matches checkout.
 * ====================================================================== */
.acc-order-rewards{ margin:22px 0; }
.acc-order-rewards .acc-pl-card--rounded{ padding:18px 20px; }
.acc-or-head{ display:flex; align-items:center; gap:8px; font-size:17px; line-height:1.3; color:var(--ink); margin-bottom:8px; }
.acc-or-head b{ font-weight:800; }
.acc-or-ico{ display:inline-grid; place-items:center; flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--green),var(--green-3)); color:#fff; }
.acc-or-ico .acc-svg{ width:17px; height:17px; }
.acc-or-line{ font-size:14px; line-height:1.5; color:var(--muted-2); margin:3px 0; }
.acc-or-line b{ color:var(--green-3); font-weight:800; }
.acc-or-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:15px; }
.acc-order-rewards .acc-or-cta .acc-btn{ flex:0 0 auto; padding:11px 18px; font-size:14px; }
.acc-order-rewards .acc-or-cta .acc-btn:not(.acc-btn--primary){ background:#fff; border:1.5px solid var(--green-2,#c9efd3); color:var(--green-3,#1f7a46); }
.acc-order-rewards .acc-or-cta .acc-btn:not(.acc-btn--primary):hover{ background:#f1fbf4; transform:translateY(-1px); }
@media (max-width:480px){ .acc-order-rewards .acc-or-cta .acc-btn{ flex:1 1 100%; } }

/* =========================================================================
 * Paused-order action panel (orders_front.php, view-order endpoint) — sits
 * directly under the status hero as one system: an amber "action needed" card
 * with the public-link checklist + restart, then a stack of per-item link cards.
 * Reuses .acc-pl-card + .acc-field + .acc-btn.
 * ====================================================================== */
.acc-paused{ margin:0 0 22px; }
.acc-paused .woocommerce-notices-wrapper:empty{ display:none; }
.acc-paused-card{ border-color:#ffe2b0; background:linear-gradient(180deg,#fff8ec,#fff); margin:0 0 16px; }
.acc-paused-lead{ display:flex; align-items:flex-start; gap:13px; }
.acc-paused-ico{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:20px; background:#fff; box-shadow:0 4px 12px rgba(154,106,18,.16); }
.acc-paused-title{ font-size:16px; font-weight:800; color:var(--ink); line-height:1.3; }
.acc-paused-sub{ margin:4px 0 0; font-size:13.5px; line-height:1.5; color:var(--muted-2); }
.acc-paused-checks{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.acc-paused-checks li{ position:relative; padding-left:26px; font-size:13.5px; line-height:1.5; color:var(--ink); }
.acc-paused-checks li::before{ content:"✓"; position:absolute; left:0; top:1px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--green),var(--green-3)); }
.acc-paused-actions{ margin-top:16px; }
.acc-paused-items{ margin-top:6px; }
.acc-paused-item{ margin:0 0 12px; }
.acc-paused-item-name{ font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.acc-paused-item-actions{ margin-top:14px; }
@media (max-width:480px){ .acc-paused-actions .acc-btn, .acc-paused-item-actions .acc-btn{ width:100%; } }

/* Mobile horizontal-scroll rows (.acc-hscroll / .acc-hscroll-host / -arrow) now
 * live in header.css so the header.js enhancer's injected arrow is styled on
 * EVERY page it runs (services, FAQ, …), not only account/checkout/cart. */

/* =========================================================================
 * Settings (edit-account) — unified, structured layout.
 * ====================================================================== */
/* =========================================================================
 * Account settings (edit-account) — V2 REDESIGN. Every selector is scoped to
 * CONTENT classes (.acc-edit-head / .acc-edit-card) that ship inside the PJAX
 * payload, so the design applies on FIRST open through the account tab nav —
 * the old body-class scoping (.acc-edit-account-page) only worked after a hard
 * reload, because PJAX swaps content without updating body classes.
 * ====================================================================== */
.acc-edit-head{ display:flex; align-items:center; gap:16px; margin:0 0 18px; }
.acc-edit-ava{ flex:0 0 auto; display:inline-grid; place-items:center; width:54px; height:54px; border-radius:18px; color:#fff; font-size:22px; font-weight:800; background:linear-gradient(135deg,var(--red,#f80031),var(--orange,#ff6e40)); box-shadow:0 8px 20px rgba(248,0,49,.22); user-select:none; }
.acc-edit-head-txt{ min-width:0; }
.acc-edit-title{ font-size:24px; font-weight:800; margin:0 0 2px; color:var(--ink,#222); letter-spacing:-.015em; }
.acc-edit-sub{ color:var(--muted-2,#777); margin:0; font-size:14.5px; }
.acc-edit-shortcuts{ display:flex; flex-wrap:wrap; gap:10px; }
.acc-edit-chip{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px; background:#f7f8f9; border:1px solid var(--line,#ececf1); color:var(--ink,#222)!important; text-decoration:none!important; font-weight:600; font-size:14px; transition:.15s; }
.acc-edit-chip:hover{ background:#fff; border-color:var(--red,#f80031); transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.05); }
/* Card wrapper around the WooCommerce account-details form. */
.acc-edit-card{ background:#fff; border:1px solid var(--line,#ececf1); border-radius:20px; padding:26px 26px 22px; box-shadow:0 18px 36px rgba(0,0,0,.06); }
.acc-edit-card .woocommerce-EditAccountForm{ max-width:640px; }
.acc-edit-card .woocommerce-EditAccountForm .woocommerce-form-row{ margin:0 0 16px; }
.acc-edit-card .woocommerce-EditAccountForm label{ font-weight:800; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2,#777); margin-bottom:6px; display:block; }
.acc-edit-card .woocommerce-EditAccountForm input.input-text,
.acc-edit-card .woocommerce-EditAccountForm input[type=email],
.acc-edit-card .woocommerce-EditAccountForm input[type=password],
.acc-edit-card .woocommerce-EditAccountForm input[type=text]{ width:100%; height:46px; padding:0 14px; border:1px solid var(--line,#e2e6ea); border-radius:12px; background:#fafbfc; font-size:16px; color:var(--ink,#222); box-sizing:border-box; transition:border-color .15s, box-shadow .15s, background .15s; }
.acc-edit-card .woocommerce-EditAccountForm input:focus{ outline:none; border-color:var(--orange,#ff6e40); background:#fff; box-shadow:0 0 0 3px rgba(255,110,64,.15); }
/* First/last name side by side on desktop (classic WC float pair; the row after
   them clears). */
.acc-edit-card .woocommerce-EditAccountForm .woocommerce-form-row--first{ float:left; width:48.5%; }
.acc-edit-card .woocommerce-EditAccountForm .woocommerce-form-row--last{ float:right; width:48.5%; }
.acc-edit-card .woocommerce-EditAccountForm .woocommerce-form-row--wide,
.acc-edit-card .woocommerce-EditAccountForm .woocommerce-form-row--last ~ .woocommerce-form-row,
.acc-edit-card .woocommerce-EditAccountForm fieldset{ clear:both; }
@media (max-width:560px){
	.acc-edit-card .woocommerce-EditAccountForm .woocommerce-form-row--first,
	.acc-edit-card .woocommerce-EditAccountForm .woocommerce-form-row--last{ float:none; width:100%; }
	.acc-edit-card{ padding:20px 16px 18px; }
	.acc-edit-ava{ width:46px; height:46px; border-radius:15px; font-size:19px; }
}
/* Password-change fieldset becomes a titled sub-section (soft panel). */
.acc-edit-card .woocommerce-EditAccountForm fieldset{ margin:22px 0 6px; padding:18px 18px 6px; border:1px solid var(--line,#ececf1); border-radius:16px; background:#f7f8f9; }
.acc-edit-card .woocommerce-EditAccountForm fieldset legend{ font-weight:800; font-size:14px; letter-spacing:normal; text-transform:none; padding:0 8px; color:var(--ink,#222); }
/* Inputs INSIDE the grey fieldset go white so they stand out from the panel. */
.acc-edit-card .woocommerce-EditAccountForm fieldset input{ background:#fff !important; border-color:#e2e6ea !important; }
/* Saved-billing block now renders inside the card — separate it from the form. */
.acc-edit-card .gpco-acct-billing{ margin-top:26px; padding-top:24px; border-top:1px solid var(--line,#ececf1); }
.acc-edit-card .gpco-acct-billing .gpco-acct-card{ border:0; box-shadow:none; padding:0; background:transparent; }
/* Save button: brand gradient CTA (pinned against theme button defaults). */
.acc-edit-card .woocommerce-EditAccountForm .woocommerce-Button,
.acc-edit-card .woocommerce-EditAccountForm button[type=submit]{
	margin-top:10px; padding:13px 28px; border:0; border-radius:14px; cursor:pointer;
	font-size:15px; font-weight:800; color:#fff !important;
	background:linear-gradient(130deg,var(--red,#f80031),var(--orange,#ff6e40)) !important;
	box-shadow:0 6px 16px rgba(248,0,49,.24); transition:transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.acc-edit-card .woocommerce-EditAccountForm .woocommerce-Button:hover,
.acc-edit-card .woocommerce-EditAccountForm button[type=submit]:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(248,0,49,.32); filter:saturate(1.05); }
@media (max-width:480px){
	.acc-edit-card .woocommerce-EditAccountForm .woocommerce-Button,
	.acc-edit-card .woocommerce-EditAccountForm button[type=submit]{ width:100%; }
}
.acc-edit-foot{ margin:18px 0 0; }
.acc-edit-trust{ display:flex; align-items:center; gap:8px; color:var(--muted-2,#777); font-size:13.5px; margin:0 0 14px; }
.acc-edit-trust-ico{ flex:0 0 auto; color:var(--green-3,#1f7a46); }
.acc-edit-nudge{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 20px; border-radius:16px; background:linear-gradient(135deg,#fff5f7,#fff); border:1px solid #ffe0e6; }
.acc-edit-nudge-txt{ display:flex; flex-direction:column; gap:2px; flex:1 1 260px; }
.acc-edit-nudge-txt strong{ font-size:15px; color:var(--ink,#222); }
.acc-edit-nudge-txt span{ font-size:13.5px; color:var(--muted-2,#777); }
@media (max-width:480px){ .acc-edit-nudge .acc-btn{ flex:1 1 100%; text-align:center; } }

/* =========================================================================
 * #5 — "Saved billing details" editor (My Account → Account details). A clean,
 * focused card with instant AJAX save, so a returning shopper's order is one tap.
 * ====================================================================== */
.gpco-acct-billing{ margin:24px 0 0; }
.gpco-acct-card{ border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:20px; box-shadow:0 6px 22px rgba(20,22,30,.06); }
.gpco-acct-head h3{ margin:0 0 4px; font-size:17px; font-weight:800; color:var(--ink); }
.gpco-acct-head p{ margin:0 0 16px; font-size:13px; color:var(--muted-2); line-height:1.45; }
.gpco-acct-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.gpco-acct-field{ display:flex; flex-direction:column; gap:5px; min-width:0; margin:0; }
.gpco-acct-field.gpco-acct-wide{ grid-column:1 / -1; }
.gpco-acct-field > span{ font-size:12.5px; font-weight:700; color:var(--muted-2); }
.gpco-acct-field input, .gpco-acct-field select{ height:44px; border:1px solid var(--line); border-radius:10px; padding:0 12px; font-size:16px; background:#fff; color:var(--ink); width:100%; box-sizing:border-box; margin:0; }
.gpco-acct-field input:focus, .gpco-acct-field select:focus{ border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,110,64,.14); outline:0; }
.gpco-acct-foot{ display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap; }
.gpco-acct-save{ min-width:160px; }
.gpco-acct-status{ font-size:13px; font-weight:700; color:var(--muted-2); }
.gpco-acct-status.is-ok{ color:var(--green-3); }
.gpco-acct-status.is-err{ color:var(--red); }
@media (max-width:520px){ .gpco-acct-grid{ grid-template-columns:1fr; } }

/* =========================================================================
 * Login / register / lost-password page restyle (acc-login-page body class).
 *
 * Goal: a calm, premium card layout that reads at a glance, with the value
 * prop above the form and trust below it. The two-column WC login/register
 * block becomes a centred grid that gracefully stacks on mobile. Inputs at
 * 16px (no iOS zoom), 14px radius, soft focus glow. One primary CTA, sized
 * for tap. Everything is scoped to body.acc-login-page so it can never leak
 * into the signed-in account UI. CSS-only — no extra JS bundle on this page.
 * ====================================================================== */
body.acc-login-page{ background:linear-gradient(180deg,#fafbfd 0%,#f4f6fa 100%); }
body.acc-login-page .woocommerce-MyAccount-content,
body.acc-login-page .woocommerce-account .woocommerce{ max-width:960px; margin:0 auto; padding:32px 16px 80px; }
/* Hero block above the form. */
body.acc-login-page .acc-login-hero{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; margin:0 auto 22px; padding:8px 16px 0; max-width:560px; }
body.acc-login-page .acc-login-hero-badge{ width:56px; height:56px; border-radius:18px; display:grid; place-items:center; background:linear-gradient(135deg,#fff0ec,#ffe3da); color:var(--red,#f80031); box-shadow:0 8px 22px rgba(248,0,49,.14); margin-bottom:4px; }
body.acc-login-page .acc-login-hero-title{ margin:0; font-size:30px; line-height:1.15; font-weight:800; letter-spacing:-.015em; color:var(--ink,#16161c); }
body.acc-login-page .acc-login-hero-sub{ margin:0; max-width:520px; font-size:15px; line-height:1.55; color:var(--muted-2,#5b616b); }
body.acc-login-page .acc-login-hero-proof{ display:inline-flex; align-items:center; gap:8px; margin:8px 0 0; padding:8px 14px; border-radius:999px; background:#eafaef; color:var(--green-3,#1f7a46); font-size:13px; font-weight:700; }
body.acc-login-page .acc-login-hero-proof svg{ flex:0 0 auto; }
body.acc-login-page .acc-login-hero-back{ margin:10px 0 0; font-size:13.5px; }
body.acc-login-page .acc-login-hero-back a{ color:var(--red,#f80031); font-weight:700; text-decoration:none; }
body.acc-login-page .acc-login-hero-back a:hover{ text-decoration:underline; }
/* Two-column login / register row → equal-width grid that stacks below 760px. */
body.acc-login-page .u-columns{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:0; }
body.acc-login-page .u-columns::before,
body.acc-login-page .u-columns::after{ display:none !important; }
body.acc-login-page .u-column1,
body.acc-login-page .u-column2,
body.acc-login-page .col-1,
body.acc-login-page .col-2{ float:none !important; width:auto !important; margin:0 !important; padding:0 !important; }
body.acc-login-page .u-columns h2{ margin:0 0 12px; font-size:18px; font-weight:800; color:var(--ink,#16161c); letter-spacing:-.005em; }
/* The form itself — a card. */
body.acc-login-page form.login,
body.acc-login-page form.register,
body.acc-login-page form.lost_reset_password{ background:var(--card,#fff); border:1px solid var(--line,#ececf1); border-radius:22px; padding:26px 24px 22px; box-shadow:0 10px 32px rgba(20,22,30,.07); margin:0; }
body.acc-login-page form .form-row{ margin:0 0 14px; padding:0; display:block; }
body.acc-login-page form .form-row label{ display:block; margin:0 0 7px; font-size:13.5px; font-weight:700; color:var(--ink,#16161c); }
body.acc-login-page form .required{ color:var(--red,#f80031); text-decoration:none; }
body.acc-login-page form input.input-text,
body.acc-login-page form input[type="text"],
body.acc-login-page form input[type="email"],
body.acc-login-page form input[type="password"]{ width:100%; padding:14px 16px; border:1.5px solid var(--line,#ececf1); border-radius:14px; font-size:16px; line-height:1.3; background:#fff; color:var(--ink,#16161c); transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none; box-sizing:border-box; }
body.acc-login-page form input.input-text:focus,
body.acc-login-page form input[type="text"]:focus,
body.acc-login-page form input[type="email"]:focus,
body.acc-login-page form input[type="password"]:focus{ outline:none; border-color:var(--orange,#ff6e40); box-shadow:0 0 0 4px rgba(255,110,64,.16); }
/* Password input + inline "show" toggle. The eye sits flush right inside the
   field. The input takes padding-right to leave room for the icon. */
body.acc-login-page form .acc-pw-wrap{ position:relative; display:block; }
body.acc-login-page form .acc-pw-wrap input{ padding-right:48px !important; }
body.acc-login-page form .acc-pw-toggle{ position:absolute; top:50%; right:6px; transform:translateY(-50%); width:38px; height:38px; padding:0; border:0; background:transparent; color:var(--muted-2,#5b616b); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; transition:background .15s, color .15s; -webkit-appearance:none; appearance:none; }
body.acc-login-page form .acc-pw-toggle:hover{ background:#f2f3f5; color:var(--ink,#16161c); }
body.acc-login-page form .acc-pw-toggle.is-on{ color:var(--orange,#ff6e40); }
body.acc-login-page form .acc-pw-toggle:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,110,64,.25); }
/* Inline-validation feedback: red border + soft red shadow ring on the field,
   small red hint line below. No alert sound, no blocker — calm and informative. */
body.acc-login-page form input.acc-invalid{ border-color:var(--red,#f80031) !important; box-shadow:0 0 0 3px rgba(248,0,49,.15) !important; }
body.acc-login-page form .acc-inline-hint{ display:block; margin:6px 2px 0; font-size:12.5px; font-weight:600; color:var(--red,#f80031); }
/* Remember-me row: checkbox + text on one line, lost-password link on the right. */
body.acc-login-page form .lost_password{ margin:0 0 6px; text-align:right; font-size:13px; }
body.acc-login-page form .lost_password a{ color:var(--red,#f80031); font-weight:700; text-decoration:none; }
body.acc-login-page form .lost_password a:hover{ text-decoration:underline; }
body.acc-login-page form .woocommerce-form-login__rememberme,
body.acc-login-page form .woocommerce-form-login__rememberme span{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted-2,#5b616b); cursor:pointer; }
body.acc-login-page form input[type="checkbox"]{ width:18px; height:18px; accent-color:var(--red,#f80031); margin:0; }
/* Primary CTA — full width, sized for tap, brand gradient. */
body.acc-login-page form .woocommerce-form-login__submit,
body.acc-login-page form .woocommerce-form-register__submit,
body.acc-login-page form button[type="submit"].button{ display:block; width:100%; margin:14px 0 0; padding:15px 18px; border:0; border-radius:14px; background:linear-gradient(135deg,#f80031,#ff6e40); color:#fff !important; font-size:16px; font-weight:800; line-height:1.1; letter-spacing:.005em; cursor:pointer; box-shadow:0 10px 24px rgba(248,0,49,.22); transition:transform .14s, box-shadow .14s, filter .14s; -webkit-appearance:none; appearance:none; }
body.acc-login-page form button[type="submit"].button:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(248,0,49,.3); filter:saturate(1.05); }
body.acc-login-page form button[type="submit"].button:active{ transform:translateY(0); box-shadow:0 6px 14px rgba(248,0,49,.22); }
body.acc-login-page form button[type="submit"].button:disabled{ opacity:.7; cursor:wait; transform:none; }
/* In-flight CTA: animated stripe overlay so the user knows the click registered
   and the server is working — defuses the "did it submit?" double-tap. */
body.acc-login-page form button[type="submit"].button.is-loading{ opacity:.85; cursor:wait; background:linear-gradient(135deg,#d62a4a,#e85a36); background-image:linear-gradient(135deg,#d62a4a,#e85a36),repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 8px,rgba(255,255,255,0) 8px 16px); background-size:100% 100%,40px 40px; background-blend-mode:overlay,normal; animation:acc-login-stripes .8s linear infinite; }
@keyframes acc-login-stripes{ from{ background-position:0 0, 0 0; } to{ background-position:0 0, 40px 0; } }
@media (prefers-reduced-motion:reduce){ body.acc-login-page form button[type="submit"].button.is-loading{ animation:none; } }
/* Register-column value-prop block — a green accent strip above the form's
   email/password fields. Makes "why register" answer itself before the visitor
   has to click. */
body.acc-login-page .acc-register-value{ display:flex; align-items:flex-start; gap:12px; margin:0 0 18px; padding:12px 14px; background:linear-gradient(135deg,#eafaef,#f6fbf8); border:1px solid #c9efd3; border-radius:14px; }
body.acc-login-page .acc-register-value-badge{ flex:0 0 auto; width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(135deg,#1f7a46,#34a76a); color:#fff; }
body.acc-login-page .acc-register-value-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
body.acc-login-page .acc-register-value-txt b{ font-size:14px; font-weight:800; color:var(--ink,#16161c); line-height:1.25; }
body.acc-login-page .acc-register-value-txt span{ font-size:12.5px; color:var(--muted-2,#5b616b); line-height:1.45; }
/* On a failed login, promote the forgot-password affordance with a tinted
   chip + bold weight (recovery is the primary action at that moment, not
   the dead "log in again" CTA). JS adds .is-prominent when an error notice
   is present at page load. */
body.acc-login-page form .lost_password a.is-prominent{ display:inline-block; padding:6px 12px; background:#fff6f4; border:1.5px solid #ffd3c7; border-radius:999px; font-weight:800; }
body.acc-login-page form .lost_password a.is-prominent::before{ content:"→ "; }
/* Hide privacy/sublabel WC sometimes injects beneath the submit so the form
   stays focused; show only if it carries actual content (not WC's default
   empty paragraph). */
body.acc-login-page form .woocommerce-privacy-policy-text{ margin:14px 0 0; font-size:12px; color:var(--muted,#8a8f98); line-height:1.5; }
body.acc-login-page form .woocommerce-privacy-policy-text:empty{ display:none; }
/* Trust strip below the form. */
body.acc-login-page .acc-login-trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:760px; margin:28px auto 0; padding:0 4px; }
body.acc-login-page .acc-login-trust-item{ display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--card,#fff); border:1px solid var(--line,#ececf1); border-radius:16px; box-shadow:0 4px 16px rgba(20,22,30,.04); }
body.acc-login-page .acc-login-trust-ico{ flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(135deg,#fff0ec,#ffe3da); color:var(--red,#f80031); }
body.acc-login-page .acc-login-trust-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
body.acc-login-page .acc-login-trust-txt b{ font-size:13.5px; font-weight:700; color:var(--ink,#16161c); line-height:1.2; }
body.acc-login-page .acc-login-trust-txt span{ font-size:12px; color:var(--muted-2,#5b616b); line-height:1.35; }
/* WC notices on the login page: NO page-specific skin. Notices are unified
   sitewide — theme.css owns the no-JS fallback tints (:not(.acc-notice),
   !important) and header.js/header.css own the enhanced .acc-notice card, so a
   third login-only recipe here could only diverge from that system (its flat
   tints were in fact already dead, losing to the theme.css !important layer,
   while its padding/margin/radius DID repaint the enhanced card differently
   from every other page — and double-painted wrapped error lists). */
body.acc-login-page .woocommerce-notices-wrapper:empty{ display:none; }
/* Lost-password centred single-column layout (no two-form grid). */
body.acc-login-page--lost form.lost_reset_password{ max-width:480px; margin:0 auto; }
body.acc-login-page--lost .acc-login-hero{ margin-bottom:18px; }
/* Mobile stack. */
@media (max-width:760px){
	body.acc-login-page .u-columns{ grid-template-columns:1fr; gap:18px; }
	body.acc-login-page .acc-login-trust{ grid-template-columns:1fr; gap:10px; }
	body.acc-login-page .acc-login-hero-title{ font-size:24px; }
	body.acc-login-page .woocommerce-MyAccount-content,
	body.acc-login-page .woocommerce-account .woocommerce{ padding:20px 12px 56px; }
	body.acc-login-page form.login,
	body.acc-login-page form.register,
	body.acc-login-page form.lost_reset_password{ padding:22px 18px 18px; border-radius:18px; }
}
@media (prefers-reduced-motion:reduce){
	body.acc-login-page form button[type="submit"].button{ transition:none; }
}

/* Inline round-up card EXIT: a fixed-position ghost of the just-removed card,
   faded + slid out by payment_limits.php (playPlExit). No layout jank — the real
   #acc-pl-panel is replaced wholesale by the WooCommerce fragment. */
.acc-pl-exit-ghost .acc-pl-card{ margin:0 !important; animation:none !important;
	transition:opacity .28s ease, transform .28s ease; }
.acc-pl-exit-ghost.is-leaving .acc-pl-card{ opacity:0; transform:translateY(-8px); }
@media (prefers-reduced-motion:reduce){
	.acc-pl-exit-ghost .acc-pl-card{ transition:none; }
}

/* ============================================================================
 * FAQ conversion landing (/faq) — hero CTAs, trust proof, LTV top-up block.
 * Self-contained in style.css (the only stylesheet /faq loads).
 * ==========================================================================*/
.acc-faq-page .acc-faq-hero--landing{ margin:0 0 30px; }
.acc-faq-eyebrow{ display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; padding:6px 14px;
	background:#fff; border:1px solid var(--line,#ececf1); border-radius:999px; font-size:13px; font-weight:800;
	color:var(--ink,#16161c); box-shadow:0 2px 8px rgba(20,22,30,.05); }
.acc-faq-stars{ color:#62b868; letter-spacing:1px; }
.acc-faq-hero-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:18px 0 16px; }
.acc-faq-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px;
	border-radius:14px; font-weight:800; font-size:15px; line-height:1; text-decoration:none; cursor:pointer; border:0;
	transition:transform .12s ease, box-shadow .15s ease, background .15s ease; }
.acc-faq-btn--primary{ color:#fff!important; background:linear-gradient(130deg,#f80031,#ff6e40); box-shadow:0 8px 20px rgba(248,0,49,.24); }
.acc-faq-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(248,0,49,.32); color:#fff!important; }
.acc-faq-btn--ghost{ color:#16161c!important; background:#fff; box-shadow:inset 0 0 0 1.5px var(--line,#ececf1); }
.acc-faq-btn--ghost:hover{ box-shadow:inset 0 0 0 1.5px #cfd4db; transform:translateY(-2px); color:#16161c!important; }
.acc-faq-hero-proof{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; margin:6px 0 0; padding:0; list-style:none; }
.acc-faq-hero-proof li{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:#3a3f47; }
.acc-faq-hero-proof li::before{ content:"✓"; color:#17935a; font-weight:900; }
.acc-faq-ltv{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin:30px 0 0; padding:24px 26px;
	border-radius:20px; border:1px solid #ffd9cf; background:linear-gradient(120deg,#fff6f2,#fff0ea); box-shadow:0 4px 20px rgba(248,0,49,.06); }
.acc-faq-ltv-tx{ flex:1 1 320px; min-width:260px; }
.acc-faq-ltv-title{ font-size:1.4rem; font-weight:900; color:var(--ink,#16161c); margin:0 0 8px; line-height:1.15; }
.acc-faq-ltv-sub{ font-size:15px; color:#5b616b; line-height:1.55; margin:0 0 12px; }
.acc-faq-ltv-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
.acc-faq-ltv-list li{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:#3a3f47; }
.acc-faq-ltv-list li::before{ content:"✓"; color:#17935a; font-weight:900; }
.acc-faq-ltv-cta{ display:flex; flex-direction:column; gap:10px; flex:0 0 auto; }
@media (max-width:640px){
	.acc-faq-hero-cta .acc-faq-btn{ flex:1 1 100%; }
	.acc-faq-ltv-cta{ width:100%; }
	.acc-faq-ltv-cta .acc-faq-btn{ width:100%; }
}

/* Deposit CTA: the base + bonus + arrow are one sentence, so don't let the
   button's 8px flex gap sit between them (it read as a stray space, and an EMPTY
   bonus span reserved a double gap before the arrow). Zero the gap and separate
   the bonus with a single normal space only when it has text. */
#acc-deposit-submit{ gap:0 !important; }
#acc-deposit-submit .acc-cta-bonus{ margin-left:0; }
#acc-deposit-submit .acc-cta-bonus:not(:empty){ margin-left:.3em; }
#acc-deposit-submit .acc-cta-bonus:empty{ display:none; }