/* =========================================================
   choose_plan.css — Wizard-scoped styles (vibrant sport theme)
   ========================================================= */

body.wizard-page {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    align-items: flex-start;
    background: radial-gradient(circle at top right, rgba(124,58,237,0.3), rgba(168,85,247,0.2)),
                linear-gradient(120deg, #1a1a2e, #2e2450 50%, #4a3080 100%) !important;
}

.wizard-wrap {
    max-width: 860px;
    margin: 2.5rem auto 4rem;
    padding: 0 1.25rem;
}

.wizard-footnote strong {
    color: #7c3aed;
    font-weight: 600;
}
.wizard-cheque-info strong {
    color: #7c3aed;
    font-weight: 600;
}

/* ── Header ─────────────────────────────────────────────── */
.wizard-header { text-align: center; margin-bottom: 1.6rem; }
.wizard-header h1 {
    font-size: 2.2rem; margin-bottom: 0.4rem;
    color: #1a1a2e;
    text-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.wizard-header p { color: #3d3450; font-size: 1rem; margin: 0; font-weight: 500; }

/* ── Progress bar ───────────────────────────────────────── */
.wizard-progress {
    display: flex; justify-content: center; gap: 0.35rem; margin-bottom: 2rem;
}
.wizard-progress-step {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: #6b5f80;
    transition: color 0.3s ease;
}
.wizard-progress-step.is-active { color: #1a1a2e; }
.wizard-progress-step.is-done { color: #7c3aed; }

.wizard-progress-dot {
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    border: 2px solid #9d92b3;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem; color: #6b5f80;
    transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.wizard-progress-step.is-active .wizard-progress-dot {
    border-color: #1a1a2e; background: rgba(26,26,46,0.1); color: #1a1a2e;
}
.wizard-progress-step.is-done .wizard-progress-dot {
    border-color: #7c3aed; background: #7c3aed; color: #fff;
}

.wizard-progress-line {
    width: 2.5rem; height: 2px; background: #bdb3cf; align-self: center;
}

/* ── Steps ──────────────────────────────────────────────── */
.wizard-step {
    display: none; animation: wizardFadeIn 0.35s ease both;
}
.wizard-step.is-visible { display: block; }

@keyframes wizardFadeIn {
    from { opacity: 0; transform: translateY(0.6rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.wizard-step-heading { text-align: center; margin-bottom: 1.25rem; }
.wizard-step-heading h2 { font-size: 1.5rem; margin-bottom: 0.25rem; color: #1a1a2e; }
.wizard-step-heading p { color: #3d3450; font-size: 0.92rem; margin: 0; font-weight: 500; }

/* ── Option cards ───────────────────────────────────────── */
.wizard-options {
    display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
}

.wizard-card {
    position: relative; flex: 1 1 220px; max-width: 280px;
    background: #1a1a2e;
    border: 2px solid rgba(124,58,237,0.25);
    border-radius: 14px; padding: 1.4rem 1.2rem 1.2rem;
    cursor: pointer; text-align: center;
    transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.wizard-card:hover {
    border-color: #a855f7;
    background: #242040;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(26,26,46,0.35);
}
.wizard-card.is-selected {
    border-color: #a855f7;
    background: linear-gradient(145deg, #242040, #2e2450);
    box-shadow: 0 0 0 1px #a855f7, 0 8px 32px rgba(124,58,237,0.3);
}

.wizard-card-badge {
    position: absolute; top: -0.6rem; right: 1rem;
    background: linear-gradient(135deg, #f97316, #ec4899);
    color: #fff; font-size: 0.62rem; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.2rem 0.6rem; border-radius: 999px;
    box-shadow: 0 2px 8px rgba(249,115,22,0.35);
}

.wizard-card-icon { font-size: 2.2rem; margin-bottom: 0.5rem; display: block; }
.wizard-card h3 { font-size: 1.1rem; margin-bottom: 0.3rem; color: #fff; }
.wizard-card .wizard-card-sub {
    color: rgba(255,255,255,0.65); font-size: 0.85rem; line-height: 1.45; margin: 0;
}

/* ── Duration cards ─────────────────────────────────────── */
.wizard-options.duration-options { gap: 0.85rem; }
.wizard-options.duration-options .wizard-card {
    flex: 1 1 240px; max-width: 300px; padding-bottom: 1.35rem;
}

.wizard-card .wizard-price {
    font-size: 1.6rem; font-weight: 700; color: #fff;
    margin: 0.5rem 0 0.15rem; font-family: Arial, Helvetica, sans-serif;
}
.wizard-card .wizard-price-note {
    font-size: 0.78rem; color: rgba(255,255,255,0.5); margin: 0 0 0.4rem;
}
.wizard-card .wizard-cheque {
    display: inline-block; margin-top: 0.45rem; padding: 0.22rem 0.6rem;
    border-radius: 999px; font-size: 0.66rem; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase;
}

/* ── Cheque colours ─────────────────────────────────────── */
.cheque-copper   { background: #b87333; color: #fff; }
.cheque-bronze   { background: linear-gradient(135deg, #cd7f32, #e8a54b); color: #fff; }
.cheque-silver   { background: linear-gradient(135deg, #8e929a, #c5ccd3); color: #1a1a2e; }
.cheque-gold     { background: linear-gradient(135deg, #d4a843, #f5d779); color: #1a1a2e; }
.cheque-platinum { background: linear-gradient(135deg, #9ba4b0, #dce2e8); color: #1a1a2e; }
.cheque-diamond  { background: linear-gradient(135deg, #7c3aed, #38bdf8); color: #fff;
                   box-shadow: 0 8px 18px rgba(124,58,237,0.62); }

/* ── Perk list ──────────────────────────────────────────── */
.wizard-perks { list-style: none; padding: 0; margin: 0.5rem 0 0; text-align: left; }
.wizard-perks li {
    padding: 0.18rem 0 0.18rem 1.2rem; position: relative;
    font-size: 0.82rem; color: rgba(255,255,255,0.7); line-height: 1.35;
}
.wizard-perks li::before {
    content: '\2713'; position: absolute; left: 0; color: #34d399; font-weight: 700;
}

/* ── Summary ────────────────────────────────────────────── */
.wizard-summary {
    max-width: 520px; margin: 0 auto;
    background: #1a1a2e;
    border: 2px solid rgba(124,58,237,0.25);
    border-radius: 14px; padding: 1.6rem 1.8rem;
}
.wizard-summary-row {
    display: flex; justify-content: space-between;
    padding: 0.55rem 0; border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 0.95rem;
}
.wizard-summary-row:last-of-type { border-bottom: none; }
.wizard-summary-label { color: rgba(255,255,255,0.55); }
.wizard-summary-value {
    color: #fff; font-weight: 700; text-align: right;
}
.wizard-summary-value .wizard-cheque {
    vertical-align: middle;
    margin-left: 0.3rem;
    padding: 0.18rem 0.5rem;
    border-radius: 0.18rem 0.5rem;
}

.wizard-summary-total {
    margin-top: 0.75rem; padding-top: 0.75rem;
    border-top: 2px solid rgba(168,85,247,0.4);
    display: flex; justify-content: space-between; font-size: 1.2rem;
}
.wizard-summary-total .wizard-summary-value { color: #34d399; font-size: 1.35rem; }

.wizard-summary-edit {
    font-size: 0.78rem; color: #a855f7; cursor: pointer;
    border-bottom: 1px dotted rgba(168,85,247,0.5); margin-left: 0.5rem;
}
.wizard-summary-edit:hover { border-bottom-color: #a855f7; color: #c084fc; }

/* ── Nav buttons ────────────────────────────────────────── */
.wizard-nav {
    display: flex; justify-content: center; gap: 0.75rem; margin-top: 1.8rem;
}
.wizard-btn {
    appearance: none; border: 0; border-radius: 0.5rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.15rem;
    text-transform: uppercase; height: 2.75rem; line-height: 2.75rem;
    padding: 0 1.8rem; cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, color 0.2s, transform 0.15s;
    text-decoration: none; display: inline-block; text-align: center;
}
.wizard-btn-back {
    background: rgba(26,26,46,0.6);
    box-shadow: inset 0 0 0 2px #6b5f80;
    color: #1a1a2e;
}
.wizard-btn-back:hover {
    box-shadow: inset 0 0 0 2px #a855f7;
    color: #fff;
    background: rgba(124,58,237,0.5);
    transform: translateY(-1px);
}

.wizard-btn-next {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff; box-shadow: 0 4px 12px rgba(124,58,237,0.3);
}
.wizard-btn-next:hover {
    background: linear-gradient(135deg, #6d28d9, #9333ea);
    box-shadow: 0 6px 16px rgba(124,58,237,0.4);
    transform: translateY(-1px);
}
.wizard-btn-next:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

.wizard-btn-subscribe {
    background: linear-gradient(135deg, #f97316, #ec4899);
    color: #fff; padding: 0 2.4rem; font-size: 0.7rem;
    border: 0; border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(249,115,22,0.3);
}
.wizard-btn-subscribe:hover {
    background: linear-gradient(135deg, #ea580c, #db2777);
    box-shadow: 0 6px 16px rgba(249,115,22,0.4);
    transform: translateY(-1px);
}

/* ── Alerts ─────────────────────────────────────────────── */
.wizard-alerts { max-width: 600px; margin: 0 auto 1rem; }
.wizard-alert {
    background: rgba(239,68,68,0.15); color: #fca5a5;
    border: 1px solid rgba(239,68,68,0.3); border-radius: 10px;
    padding: 0.7rem 0.85rem; font-size: 0.92rem; margin-bottom: 0.5rem;
}

/* ── Cheque explainer ───────────────────────────────────── */
.wizard-cheque-info { max-width: 600px; margin: 1.5rem auto 0; text-align: center; }
.wizard-cheque-info summary {
    cursor: pointer; color: #3d3450; font-size: 0.82rem;
    list-style: none; user-select: none; font-weight: 600;
}
.wizard-cheque-info summary::-webkit-details-marker { display: none; }
.wizard-cheque-info summary span { border-bottom: 1px dotted #6b5f80; }
.wizard-cheque-info summary:hover span { border-bottom-color: #7c3aed; color: #1a1a2e; }
.wizard-cheque-info p {
    margin-top: 0.6rem; font-size: 0.82rem;
    color: #3d3450; line-height: 1.55;
}

/* ── Feature comparison table (Step 2) ──────────────────── */
.wizard-cheque-info table { color: rgba(255,255,255,0.8); }
.wizard-cheque-info th { color: rgba(255,255,255,0.5) !important; }
.wizard-cheque-info td { color: rgba(255,255,255,0.75) !important; }
.wizard-cheque-info thead tr { border-bottom: 1px solid rgba(255,255,255,0.12) !important; }
.wizard-cheque-info div[style] {
    background: #1a1a2e; border-radius: 10px; padding: 0.8rem !important;
}

/* ── Footnote ───────────────────────────────────────────── */
.wizard-footnote {
    text-align: center; margin-top: 1.1rem; font-size: 0.8rem;
    color: #4a3f5c; font-weight: 500;
}

/* ── Home link ──────────────────────────────────────────── */
.wizard-home-link { text-align: center; margin-top: 2rem; }

/* ── Responsive ─────────────────────────────────────────── */
@media screen and (max-width: 736px) {
    .wizard-wrap { margin-top: 1.5rem; margin-bottom: 3rem; }
    .wizard-header h1 { font-size: 1.6rem; }
    .wizard-progress { gap: 0.2rem; }
    .wizard-progress-step { font-size: 0.6rem; }
    .wizard-progress-line { width: 1.2rem; }
    .wizard-card { max-width: 100%; flex-basis: 100%; }
    .wizard-options.duration-options .wizard-card { max-width: 100%; }
    .wizard-summary { padding: 1.2rem 1rem; }
}

@media screen and (max-width: 480px) {
    .wizard-header h1 { font-size: 1.35rem; }
    .wizard-progress-step .progress-label { display: none; }
    .wizard-card { padding: 1rem 0.9rem 0.9rem; }
    .wizard-card h3 { font-size: 1rem; }
}