/* ═══════════════════════════════════════════════════════════
   AURA CHESS — Training subscriptions page (Addition #1)

   The approved "Aura glass" design: deep navy surfaces, glass panels,
   cyan for selection, violet/indigo for the middlegame tracks, amber gold
   only for the full bundle, emerald for free content. Tajawal for text,
   Readex Pro for figures.

   One type scale and one spacing scale (4 · 8 · 12 · 16 · 20 · 24 · 32 · 40)
   for the whole page. Logical properties throughout — Arabic (RTL) and
   English (LTR) share one stylesheet.
   ═══════════════════════════════════════════════════════════ */

.subs-page,
.subs-mine {
    --a-950: #070b11;
    --a-900: #0b101b;
    --a-850: #0f1626;
    --a-800: #151f34;
    --a-700: #1e2c48;
    --a-cyan: #06b6d4;
    --a-cyan-400: #22d3ee;
    --a-cyan-300: #67e8f9;
    --a-indigo-600: #4f46e5;
    --a-gold: #f59e0b;
    --a-amber-300: #fcd34d;
    --a-amber-400: #fbbf24;
    --a-emerald-300: #6ee7b7;
    --a-emerald-400: #34d399;
    --a-white: #ffffff;
    --a-200: #e2e8f0;
    --a-300: #cbd5e1;
    --a-text-2: #a9b5c7;
    --a-400: #94a3b8;
    --a-500: #64748b;
    --a-line: rgba(148, 163, 184, 0.16);
    --a-line-soft: rgba(255, 255, 255, 0.06);
    --a-glass: linear-gradient(160deg, rgba(25, 36, 60, 0.78) 0%, rgba(13, 19, 32, 0.92) 100%);
    --a-focus: #e0f2fe;
    --a-num: 'Readex Pro', 'Tajawal', 'Cairo', sans-serif;

    /* Type scale: page title → section → card title → price → body → label → helper */
    --fs-page: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);
    --fs-section: 1.25rem;
    --fs-card-title: 1.125rem;
    --fs-price: 1.5rem;
    --fs-price-lg: clamp(1.75rem, 1.5rem + 0.6vw, 2rem);
    --fs-body: 0.875rem;
    --fs-label: 0.8125rem;
    --fs-helper: 0.75rem;

    --r-lg: 16px;
    --r-md: 12px;
    --r-sm: 8px;
}

/* Author display rules must never beat the hidden attribute. */
.subs-page [hidden],
.subs-mine[hidden],
.subs-mine [hidden] { display: none !important; }

.subs-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.subs-page {
    max-width: 1280px;
    margin-inline: auto;
    padding: 92px 16px 64px;
    font-family: 'Tajawal', 'Cairo', sans-serif;
    color: var(--a-200);
}
@media (min-width: 640px) { .subs-page { padding-inline: 24px; } }
@media (min-width: 1024px) { .subs-page { padding-inline: 32px; } }

.subs-num {
    font-family: var(--a-num);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

/* ── Hero ── */
.subs-hero {
    max-width: 56rem;
    margin: 0 auto 32px;
    text-align: center;
}
.subs-hero-title {
    font-size: var(--fs-page);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--a-white);
    margin: 0 0 12px;
}
.subs-hero-lead {
    max-width: 42rem;
    margin: 0 auto 20px;
    font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
    line-height: 1.75;
    color: var(--a-400);
}
.subs-values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}
.subs-values li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(21, 31, 52, 0.6);
    border: 1px solid var(--a-line-soft);
    font-size: var(--fs-label);
    color: var(--a-300);
}

.subs-release-note {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: 42rem;
    margin: 0 auto;
    padding: 8px 16px;
    border-radius: var(--r-md);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.22);
    color: rgba(253, 230, 138, 0.9);
    font-size: var(--fs-label);
    line-height: 1.7;
    text-align: start;
}
.subs-release-note strong { color: #fde68a; font-weight: 800; }

/* Local design-review mode (?ui_preview=1 on a loopback host only). */
.subs-preview-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 42rem;
    margin: 0 auto 16px;
    padding: 6px 14px;
    border-radius: var(--r-md);
    border: 1px dashed rgba(129, 140, 248, 0.55);
    background: rgba(79, 70, 229, 0.12);
    color: #c7d2fe;
    font-size: var(--fs-helper);
    line-height: 1.6;
    text-align: start;
}

/* ── Layout: one DOM order, three arrangements ──
   phone   cards → summary → bundle (one column)
   tablet  cards across the top; summary and bundle side by side below
   desktop cards + bundle in the main column; summary in a sticky side column */
.subs-layout {
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "cards" "summary" "bundle";
    align-items: start;
    margin-block-end: 40px;
}
.subs-cards   { grid-area: cards; }
.subs-summary { grid-area: summary; }
.subs-bundle  { grid-area: bundle; }
@media (min-width: 768px) {
    .subs-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "cards cards" "summary bundle";
    }
}
@media (min-width: 1200px) {
    .subs-layout {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        grid-template-areas: "cards summary" "bundle summary";
        gap: 24px 32px;
    }
    .subs-summary { position: sticky; inset-block-start: 84px; }
}

.subs-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0 0 16px;
    padding: 0 0 10px;
    border-block-end: 1px solid var(--a-line-soft);
    font-size: var(--fs-section);
    font-weight: 700;
    color: var(--a-white);
}
.subs-section-bar {
    width: 8px;
    height: 22px;
    border-radius: 999px;
    background: var(--a-cyan);
    flex: none;
}

/* ── Area cards ──────────────────────────────────────────────
   default · hover · selected · coming soon (disabled) · focus-visible */
.subs-cards { border: 0; margin: 0; padding: 0; min-width: 0; }
.subs-cards > legend { float: inline-start; }
.subs-cards > legend + * { clear: both; }
.subs-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
@media (min-width: 768px) {
    .subs-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.subs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    padding: 20px;
    border-radius: var(--r-lg);
    background: var(--a-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--a-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 20px -14px rgba(0, 0, 0, 0.8);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}
@media (hover: hover) {
    .subs-card:not(.is-soon):not(.is-selected):hover {
        border-color: rgba(34, 211, 238, 0.45);
        transform: translateY(-2px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 24px -16px rgba(0, 0, 0, 0.9);
    }
    .subs-card:not(.is-soon):hover .subs-card-title { color: var(--a-cyan-300); }
}

/* The real checkbox covers the whole card: every click lands on it, and it
   keeps native keyboard (Tab / Space) and screen-reader semantics. */
.subs-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.subs-input:disabled { cursor: not-allowed; }

.subs-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 16px;
}

/* Selection indicator: a box that fills with a tick AND a word that changes —
   the state never rests on colour alone. */
.subs-pick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-helper);
    font-weight: 600;
    color: var(--a-300);
}
.subs-pick-box {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid rgba(203, 213, 225, 0.45);
    background: var(--a-900);
    display: grid;
    place-items: center;
    color: transparent;
    font-size: 0.7rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.subs-pick-on { display: none; }

.subs-card-title {
    font-size: var(--fs-card-title);
    font-weight: 700;
    color: var(--a-white);
    margin-block-end: 8px;
    transition: color 0.15s ease;
}
.subs-card-desc {
    min-height: 48px;
    font-size: var(--fs-label);
    line-height: 1.65;
    color: var(--a-text-2);
}
.subs-card-desc.is-short { min-height: 0; margin-block-end: 12px; }
.subs-card-desc:not(.is-short),
.subs-tracks { margin-block-end: 16px; }

.subs-tracks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.subs-track {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: var(--fs-helper);
    font-weight: 600;
}
.subs-track.is-strategy { background: rgba(168, 85, 247, 0.15); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.22); }
.subs-track.is-tactics { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.22); }

.subs-card-foot {
    margin-block-start: auto;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--a-line-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
}
.subs-card-price { color: var(--a-white); white-space: nowrap; }
.subs-card-price .subs-num { font-size: var(--fs-price); font-weight: 800; }
.subs-card-price small { font-size: var(--fs-helper); color: var(--a-400); margin-inline-start: 4px; }

.subs-card-state:empty { display: none; }
.subs-card-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--fs-helper);
    font-weight: 600;
    line-height: 1.5;
}
.subs-card-state[data-tone="available"] {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: var(--a-emerald-400);
}
.subs-card-state[data-tone="active"] {
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: var(--a-emerald-300);
}
.subs-card-state[data-tone="soon"] {
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: var(--a-300);
}

/* SELECTED: solid cyan 2px edge (border + inner ring), tinted surface, filled
   tick and the word "Selected". No glow. */
.subs-card.is-selected {
    border-color: var(--a-cyan);
    background: linear-gradient(160deg, rgba(6, 182, 212, 0.13) 0%, rgba(13, 19, 32, 0.94) 60%);
    box-shadow: inset 0 0 0 1px var(--a-cyan), 0 10px 22px -16px rgba(6, 182, 212, 0.6);
}
.subs-card.is-selected .subs-pick { color: var(--a-cyan-300); }
.subs-card.is-selected .subs-pick-box { background: var(--a-cyan); border-color: var(--a-cyan); color: #ffffff; }
.subs-card.is-selected .subs-pick-on { display: inline; }
.subs-card.is-selected .subs-pick-off { display: none; }

/* FOCUS-VISIBLE: the invisible checkbox has focus; the whole card shows it. */
.subs-card.is-focused { outline: 2px solid var(--a-focus); outline-offset: 3px; }

/* COMING SOON (release lock): not for sale yet. Dashed edge, muted surface,
   no checkbox, a "coming soon" tag, struck price and a calm lock note —
   deliberate, never an error colour. */
.subs-soon-tag {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: var(--a-amber-300);
    font-size: var(--fs-helper);
    font-weight: 600;
}
.subs-card.is-soon {
    cursor: not-allowed;
    border-style: dashed;
    border-color: rgba(148, 163, 184, 0.3);
    background: rgba(11, 16, 27, 0.55);
    box-shadow: none;
}
.subs-card.is-soon .subs-pick { display: none; }
.subs-card.is-soon .subs-soon-tag { display: inline-flex; }
.subs-card.is-soon .subs-card-title { color: var(--a-300); }
.subs-card.is-soon .subs-card-desc { color: var(--a-400); }
.subs-card.is-soon .subs-track { opacity: 0.7; }
.subs-card.is-soon .subs-card-price .subs-num { font-size: 1.25rem; font-weight: 700; color: var(--a-500); text-decoration: line-through; }
.subs-card.is-soon .subs-card-price small { display: none; }

/* ── Order summary: height follows content ── */
.subs-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 20px 24px 24px;
    border-radius: var(--r-lg);
    background: var(--a-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--a-line);
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.7);
}
.subs-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block-end: 14px;
    border-block-end: 1px solid var(--a-line-soft);
}
.subs-summary-title { margin: 0; font-size: var(--fs-card-title); font-weight: 700; color: var(--a-white); }
.subs-summary-title:focus { outline: none; }
.subs-summary-title:focus-visible { outline: 2px solid var(--a-focus); outline-offset: 4px; border-radius: 4px; }
.subs-summary-empty { margin: 0; font-size: var(--fs-label); line-height: 1.6; color: var(--a-300); }

/* One row per area: name · price · remove. Rows share hairline dividers. */
.subs-summary-items { list-style: none; margin: -4px 0 0; padding: 0; }
.subs-summary-items:empty { display: none; }
.subs-summary-items li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding-block: 4px;
    border-block-end: 1px solid var(--a-line-soft);
}
.subs-item-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--a-white);
}
.subs-item-name::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--a-cyan-400);
    flex: none;
}
.subs-item-price { font-size: var(--fs-body); font-weight: 700; color: var(--a-200); }
.subs-item-remove {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--a-400);
    font-size: var(--fs-helper);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.subs-item-remove:hover { background: rgba(255, 255, 255, 0.08); color: var(--a-white); }
.subs-item-remove:focus-visible { outline: 2px solid var(--a-focus); outline-offset: 1px; }

.subs-totals { display: grid; gap: 8px; }
.subs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--fs-label);
    color: var(--a-400);
}
.subs-row .subs-num { color: var(--a-200); font-weight: 600; }
.subs-row.is-saving,
.subs-row.is-saving .subs-num { color: var(--a-emerald-400); font-weight: 600; }
.subs-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.subs-row:not([hidden]) ~ .subs-total { margin-block-start: 4px; padding-block-start: 12px; border-block-start: 1px solid var(--a-line); }
.subs-total-label { display: flex; flex-direction: column; gap: 2px; }
#subsTotalLabel { font-size: var(--fs-body); font-weight: 700; color: var(--a-white); }
#subsAnnualNote { font-size: var(--fs-helper); color: var(--a-400); }
.subs-total-value { white-space: nowrap; text-align: end; }
.subs-total-value .subs-num { font-size: var(--fs-price-lg); font-weight: 800; color: var(--a-white); line-height: 1.1; }
.subs-total-value small { font-size: var(--fs-helper); color: var(--a-400); }
.subs-summary[data-empty="1"] .subs-total-value .subs-num { color: var(--a-400); }

.subs-note { margin: 0; font-size: var(--fs-helper); color: var(--a-400); }
.subs-error { margin: 0; font-size: var(--fs-label); color: #fca5a5; }
.subs-preview-blocked {
    margin: 0;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    background: rgba(79, 70, 229, 0.12);
    border: 1px dashed rgba(129, 140, 248, 0.5);
    color: #c7d2fe;
    font-size: var(--fs-helper);
    line-height: 1.6;
}

.subs-continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--r-md);
    background: linear-gradient(90deg, var(--a-cyan), var(--a-indigo-600));
    color: #ffffff;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    box-shadow: 0 10px 15px -6px rgba(6, 182, 212, 0.3);
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.subs-continue:hover:not(:disabled) { filter: brightness(1.12); }
.subs-continue:active:not(:disabled) { transform: scale(0.98); }
.subs-continue:focus-visible { outline: 2px solid var(--a-focus); outline-offset: 3px; }
.subs-continue:disabled {
    filter: grayscale(1);
    opacity: 0.45;
    box-shadow: none;
    cursor: not-allowed;
}

.subs-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    font-size: var(--fs-helper);
    color: var(--a-400);
}
.subs-trust-cards { display: inline-flex; gap: 8px; font-size: 1.25rem; color: var(--a-500); }

/* ── Full bundle (the one gold element) ── */
.subs-bundle {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    border-radius: var(--r-lg);
    border: 1px solid rgba(245, 158, 11, 0.3);
    background-color: var(--a-900);
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.015) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.015) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.015) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.015) 75%),
        linear-gradient(90deg, var(--a-900), var(--a-850), var(--a-900));
    background-size: 24px 24px, 24px 24px, 24px 24px, 24px 24px, 100% 100%;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0, 0 0;
    box-shadow: 0 20px 25px -10px rgba(0, 0, 0, 0.45);
}
.subs-bundle-glow {
    position: absolute;
    inset-inline-end: -80px;
    inset-block-start: -80px;
    width: 256px;
    height: 256px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.1);
    filter: blur(64px);
    pointer-events: none;
}
.subs-bundle > :not(.subs-bundle-glow) { position: relative; z-index: 1; }
@media (min-width: 1200px) {
    .subs-bundle { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 28px; }
}

.subs-bundle-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.subs-bundle-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.2), rgba(249, 115, 22, 0.2));
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: var(--a-amber-300);
    font-size: var(--fs-helper);
    font-weight: 700;
}
.subs-bundle-title { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.3; color: var(--a-white); }
.subs-bundle-includes { margin: 0; font-size: var(--fs-body); color: var(--a-300); }
.subs-bundle-wait {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--fs-helper);
    font-weight: 500;
    color: rgba(251, 191, 36, 0.9);
}

/* Billing options: each tile is one toggle button. Hierarchy inside a tile:
   price → period → regular price / saving → action. */
.subs-bundle-offers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    flex: none;
}
@media (min-width: 1200px) { .subs-bundle-offers { width: min(440px, 56%); } }
.subs-offer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 14px 16px 16px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(7, 11, 17, 0.72);
    color: inherit;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.subs-offer.is-annual {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.1), rgba(7, 11, 17, 0.82));
    border-color: rgba(245, 158, 11, 0.35);
}
.subs-offer:hover:not(:disabled) { border-color: rgba(203, 213, 225, 0.45); }
.subs-offer.is-annual:hover:not(:disabled) { border-color: rgba(245, 158, 11, 0.6); }
.subs-offer:focus-visible { outline: 2px solid var(--a-focus); outline-offset: 3px; }

.subs-offer-top { display: flex; align-items: center; gap: 8px; }
.subs-offer-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(203, 213, 225, 0.5);
    display: grid;
    place-items: center;
    color: transparent;
    font-size: 0.55rem;
    flex: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.subs-offer-name { font-size: var(--fs-label); font-weight: 600; color: var(--a-300); }
.subs-offer.is-annual .subs-offer-name { color: var(--a-amber-300); }
.subs-offer-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; color: var(--a-white); }
.subs-offer-price .subs-num { font-size: var(--fs-price-lg); font-weight: 800; line-height: 1.15; }
.subs-offer.is-annual .subs-offer-price .subs-num { color: var(--a-amber-400); }
.subs-offer-price small { font-size: var(--fs-helper); color: var(--a-400); }
.subs-offer-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-height: 24px;
    font-size: var(--fs-helper);
}
.subs-offer-regular { font-size: var(--fs-label); color: var(--a-500); }
.subs-offer-save { color: var(--a-emerald-400); font-weight: 600; }
.subs-offer-save:empty { display: none; }
.subs-offer-save.is-gold {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--a-amber-300);
}
.subs-offer-cta {
    margin-block-start: 6px;
    padding: 7px 8px;
    border-radius: var(--r-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.07);
    color: var(--a-200);
    font-size: var(--fs-helper);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    text-wrap: balance;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.subs-offer.is-annual .subs-offer-cta { background: rgba(245, 158, 11, 0.18); border-color: rgba(245, 158, 11, 0.3); color: var(--a-amber-300); }
.subs-offer:hover:not(:disabled) .subs-offer-cta { background: rgba(255, 255, 255, 0.13); color: var(--a-white); }
.subs-offer.is-annual:hover:not(:disabled) .subs-offer-cta { background: rgba(245, 158, 11, 0.28); color: var(--a-amber-300); }
.subs-offer-cta-on { display: none; }

/* Chosen billing option: filled circle + tick, solid edge, "Selected". */
.subs-offer[aria-pressed="true"] { border-color: var(--a-cyan); box-shadow: inset 0 0 0 1px var(--a-cyan); }
.subs-offer[aria-pressed="true"] .subs-offer-radio { background: var(--a-cyan); border-color: var(--a-cyan); color: #ffffff; }
.subs-offer.is-annual[aria-pressed="true"] { border-color: var(--a-gold); box-shadow: inset 0 0 0 1px var(--a-gold); }
.subs-offer.is-annual[aria-pressed="true"] .subs-offer-radio { background: var(--a-gold); border-color: var(--a-gold); color: #1f1300; }
.subs-offer[aria-pressed="true"] .subs-offer-cta-on { display: inline; }
.subs-offer[aria-pressed="true"] .subs-offer-cta-off { display: none; }

.subs-offer:disabled { cursor: not-allowed; opacity: 0.6; }
.subs-offer:disabled .subs-offer-cta { background: rgba(255, 255, 255, 0.04); color: var(--a-400); }

/* ── Current subscriptions (secondary) ── */
.subs-mine {
    margin-block-end: 24px;
    padding: 16px 20px;
    border-radius: var(--r-lg);
    background: rgba(15, 22, 38, 0.6);
    border: 1px solid var(--a-line-soft);
    font-family: 'Tajawal', 'Cairo', sans-serif;
}
.subs-mine-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-block-end: 12px;
}
.subs-mine-title,
.subs-mine > h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--a-white);
}
.subs-mine > h2 { margin-block-end: 12px; }
.subs-mine-sub { margin: 0; font-size: var(--fs-helper); color: var(--a-400); }
.subs-mine-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (max-width: 640px) { .subs-mine-list { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.subs-mine-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: rgba(11, 16, 27, 0.55);
    border: 1px solid var(--a-line-soft);
}
.subs-mine-item strong { font-size: var(--fs-body); font-weight: 600; color: var(--a-200); }
/* Status pill: dot + words, one tone per state (active · not subscribed · soon). */
.subs-mine-item > span:last-child {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.08);
    font-size: var(--fs-helper);
    font-weight: 500;
    color: var(--a-400);
}
.subs-mine-item > span:last-child::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--a-500);
    flex: none;
}
.subs-mine-item[data-active="1"] > span:last-child { background: rgba(16, 185, 129, 0.12); color: var(--a-emerald-400); }
.subs-mine-item[data-active="1"] > span:last-child::before { background: var(--a-emerald-400); }
.subs-mine-item[data-soon="1"] > span:last-child { background: rgba(245, 158, 11, 0.1); color: var(--a-amber-300); }
.subs-mine-item[data-soon="1"] > span:last-child::before { background: var(--a-amber-400); }

/* ── Chess Basics is free ── */
.subs-basics {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: var(--r-lg);
    border: 1px solid rgba(16, 185, 129, 0.18);
    background: linear-gradient(90deg, rgba(2, 44, 34, 0.18), var(--a-900), var(--a-950));
    text-align: center;
}
@media (min-width: 640px) {
    .subs-basics { flex-direction: row; justify-content: space-between; padding: 18px 24px; text-align: start; }
}
.subs-basics-text { flex: 1 1 auto; min-width: 0; }
.subs-basics-badge {
    display: inline-flex;
    padding: 2px 10px;
    margin-block-end: 4px;
    border-radius: 6px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: var(--a-emerald-400);
    font-size: var(--fs-helper);
    font-weight: 600;
}
.subs-basics-text h2 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--a-white); }
.subs-basics-text p { margin: 2px 0 0; font-size: var(--fs-label); line-height: 1.6; color: var(--a-400); }
.subs-basics-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: var(--r-md);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: var(--a-emerald-300);
    font-size: var(--fs-body);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.subs-basics-link:hover { background: rgba(16, 185, 129, 0.15); color: var(--a-white); }
.subs-basics-link:focus-visible { outline: 2px solid var(--a-focus); outline-offset: 3px; }

/* ── FAQ: compact accordion, equal row heights ── */
.subs-faq { max-width: 56rem; margin: 48px auto 0; }
.subs-faq-item { border-block-end: 1px solid var(--a-line-soft); }
.subs-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 12px;
    border-radius: var(--r-sm);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--a-200);
    cursor: pointer;
    list-style: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.subs-faq-item summary::-webkit-details-marker { display: none; }
.subs-faq-item summary::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    flex: none;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(6, 182, 212, 0.1);
    color: var(--a-cyan-400);
    font-size: 0.7rem;
    transition: transform 0.15s ease, background-color 0.15s ease;
}
.subs-faq-item summary:hover { background: rgba(255, 255, 255, 0.03); color: var(--a-white); }
.subs-faq-item summary:hover::after { background: rgba(6, 182, 212, 0.18); }
.subs-faq-item[open] summary { color: var(--a-white); }
.subs-faq-item[open] summary::after { transform: rotate(180deg); }
.subs-faq-item summary:focus-visible { outline: 2px solid var(--a-focus); outline-offset: 2px; }
.subs-faq-item p {
    max-width: 70ch;
    margin: 0;
    padding: 0 12px 16px;
    color: var(--a-text-2);
    font-size: var(--fs-body);
    line-height: 1.8;
}
@media (max-width: 640px) {
    .subs-faq-item summary { font-size: var(--fs-body); padding-inline: 8px; }
    .subs-faq-item p { padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .subs-card,
    .subs-pick-box,
    .subs-offer,
    .subs-offer-radio,
    .subs-offer-cta,
    .subs-continue,
    .subs-item-remove,
    .subs-faq-item summary,
    .subs-faq-item summary::after { transition: none; }
    .subs-card:hover { transform: none !important; }
}