/* ═══════════════════════════════════════════════════════════════════════
   ESD Subscriptions — Frontend Stylesheet
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────────────────── */
.esds-plans,
.esds-plans-columns,
.esds-auth-form,
.esds-account,
.esds-checkout {
    --esds-primary:       #3a8a64;
    --esds-primary-dark:  #2d6a4f;
    --esds-danger:        #dc2626;
    --esds-success:       #16a34a;
    --esds-warning:       #d97706;
    --esds-border:        #d1e8dc;
    --esds-bg-light:      #f2faf6;
    --esds-text:          #111827;
    --esds-text-muted:    #4b7a62;
    --esds-radius:        0.5rem;
    --esds-shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    font-family: inherit;
    color: var(--esds-text) !important;
    box-sizing: border-box;
}

*, *::before, *::after { box-sizing: inherit; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.esds-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .375rem;
    padding: .55rem 1.25rem !important;
    border: none !important;
    border-radius: var(--esds-radius) !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background .15s, opacity .15s;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}
.esds-btn--primary   { background: var(--esds-primary) !important;  color: #fff !important; }
.esds-btn--primary:hover { background: var(--esds-primary-dark) !important; color: #fff !important; }
.esds-btn--secondary { background: var(--esds-bg-light) !important; color: var(--esds-text) !important; border: 1px solid var(--esds-border) !important; }
.esds-btn--secondary:hover { background: #f3f4f6 !important; }
.esds-btn--danger    { background: var(--esds-danger) !important;   color: #fff !important; }
.esds-btn--danger:hover { background: #b91c1c !important; color: #fff !important; }
.esds-btn--full      { width: 100% !important; }
.esds-btn--sm        { padding: .3rem .75rem !important; font-size: .8rem !important; }
.esds-btn:disabled   { opacity: .55 !important; cursor: not-allowed !important; }

/* ── Notice / messages ─────────────────────────────────────────────────── */
.esds-notice,
.esds-auth-form__messages {
    display: none;
    padding: .75rem 1rem;
    border-radius: var(--esds-radius);
    margin-bottom: 1rem;
    font-size: .875rem;
    line-height: 1.5;
}
.esds-notice--info    { background: #eff6ff !important; border-left: 3px solid #3b82f6 !important; color: #1e40af !important; }
.esds-notice--success { background: #f0fdf4 !important; border-left: 3px solid var(--esds-success) !important; color: #166534 !important; }
.esds-notice--error   { background: #fef2f2 !important; border-left: 3px solid var(--esds-danger) !important; color: #991b1b !important; }
.esds-notice--warning { background: #fffbeb !important; border-left: 3px solid var(--esds-warning) !important; color: #92400e !important; display: block; }
.esds-notice p { margin: 0 0 .25rem; color: inherit !important; }
.esds-notice p:last-child { margin-bottom: 0; }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.esds-badge {
    display: inline-block !important;
    padding: .2em .65em !important;
    border-radius: 9999px !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .03em !important;
}
.esds-badge--active    { background: #dcfce7 !important; color: #166534 !important; }
.esds-badge--trialing  { background: #dbeafe !important; color: #1e40af !important; }
.esds-badge--past_due  { background: #fef9c3 !important; color: #854d0e !important; }
.esds-badge--canceled,
.esds-badge--expired   { background: #f3f4f6 !important; color: #4b5563 !important; }
.esds-badge--pending   { background: #f3f4f6 !important; color: #4b5563 !important; }
.esds-badge--paid      { background: #dcfce7 !important; color: #166534 !important; }
.esds-badge--open      { background: #dbeafe !important; color: #1e40af !important; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.esds-auth-form,
.esds-tab-profile {
    max-width: 480px;
}
.esds-auth-form__inner { padding: .5rem 0; }
.esds-form-field { margin-bottom: 1.1rem; }
.esds-form-field label {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    font-size: .875rem !important;
    font-weight: 600 !important;
    margin-bottom: .35rem !important;
    color: var(--esds-text) !important;
}
.esds-form-field input[type=text],
.esds-form-field input[type=email],
.esds-form-field input[type=password],
.esds-form-field input[type=number],
.esds-form-field select,
.esds-tab-profile input[type=text],
.esds-tab-profile input[type=email],
.esds-tab-profile input[type=password] {
    display: block !important;
    width: 100% !important;
    padding: .55rem .75rem !important;
    border: 1px solid var(--esds-border) !important;
    border-radius: var(--esds-radius) !important;
    font-size: .9rem !important;
    color: var(--esds-text) !important;
    background: #fff !important;
    transition: border-color .15s, box-shadow .15s;
}
.esds-form-field input:focus,
.esds-form-field select:focus,
.esds-tab-profile input:focus {
    outline: none !important;
    border-color: var(--esds-primary) !important;
    box-shadow: 0 0 0 3px rgba(58,138,100,.15) !important;
}
.esds-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.esds-form-field--inline { display: flex; align-items: center; }
.esds-checkbox-label { display: flex !important; align-items: center !important; gap: .5rem !important; font-weight: 400 !important; cursor: pointer !important; color: var(--esds-text) !important; }
.esds-form-divider { border: none !important; border-top: 1px solid var(--esds-border) !important; margin: 1.25rem 0 !important; }
.esds-form-section-label { font-size: .8rem !important; color: var(--esds-text-muted) !important; margin: 0 0 .75rem !important; }
.esds-auth-form__forgot { font-size: .8rem !important; font-weight: 400 !important; color: var(--esds-primary) !important; text-decoration: none !important; }
.esds-auth-form__forgot:hover { text-decoration: underline !important; }
.esds-auth-form__alt { font-size: .875rem !important; text-align: center !important; margin-top: 1rem !important; color: var(--esds-text-muted) !important; }
.esds-auth-form__alt a { color: var(--esds-primary) !important; text-decoration: none !important; }
.esds-auth-form__alt a:hover { text-decoration: underline !important; }

/* ── Plans column layout ─────────────────────────────────────────────────── */
.esds-plans-columns {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 3rem !important;
    align-items: start;
}
@media (max-width: 900px) {
    .esds-plans-columns { grid-template-columns: 1fr !important; gap: 3.5rem !important; }
}

/* Column wrapper */
.esds-plans-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
}
.esds-plans-col .esds-plans-col__cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
}
.esds-plans-col .esds-plans-col__cards .esds-plan-card {
    margin-bottom: 0 !important;
}

/* Toggle card — wraps two plan panels (Free/Trial or Monthly/Yearly)
   switched by a themed toggle switch, reusing the same track/thumb
   styling as the checkout auto-renew toggle. */
.esds-toggle-card__switch {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-bottom: .75rem !important;
}
.esds-toggle-card__label {
    font-size: .8rem !important;
    font-weight: 700 !important;
    color: var(--esds-text-muted, #6b7280) !important;
    cursor: pointer !important;
    transition: color .15s ease !important;
}
.esds-plans-col--student .esds-toggle-card__label.is-active { color: #2d7a52 !important; }
.esds-plans-col--teacher .esds-toggle-card__label.is-active { color: #145e45 !important; }

/* Column header */
.esds-plans-col__header {
    text-align: center !important;
    padding: 1.25rem 1rem 1rem !important;
    border-radius: calc( var(--esds-radius) * 2 ) calc( var(--esds-radius) * 2 ) 0 0 !important;
    margin-bottom: .25rem !important;
}
.esds-plans-col__icon {
    font-size: 1.75rem !important;
    display: block !important;
    margin-bottom: .35rem !important;
}
/* Column header headings — must beat theme h2 rules */
.esds-plans-col__header .esds-plans-col__title {
    margin: 0 0 .2rem !important;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    text-shadow: none !important;
}
.esds-plans-col__header .esds-plans-col__subtitle {
    margin: 0 !important;
    font-size: .8rem !important;
    color: rgba(255,255,255,.85) !important;
    background: none !important;
    padding: 0 !important;
}

/* Student column — mid green */
.esds-plans-col--student .esds-plans-col__header {
    background: linear-gradient(135deg, #1b5e3b 0%, #2d7a52 100%) !important;
}
.esds-plans-col--student .esds-plan-card {
    --col-accent:      #2d7a52;
    --col-accent-dark: #1b5e3b;
    --col-accent-bg:   #edf7f1;
    --col-accent-text: #1b5e3b;
    border-top: 3px solid #2d7a52 !important;
}
.esds-plans-col--student .esds-plan-card__amount { color: #1b5e3b !important; }
.esds-plans-col--student .esds-plan-card__cta .esds-btn--primary { background: #2d7a52 !important; color: #fff !important; }
.esds-plans-col--student .esds-plan-card__cta .esds-btn--primary:hover { background: #1b5e3b !important; color: #fff !important; }

/* Free column — lighter teal */
.esds-plans-col--free .esds-plans-col__header,
.esds-plans-col--free-trial .esds-plans-col__header {
    background: linear-gradient(135deg, #1a6b4a 0%, #23956a 100%) !important;
}
.esds-plans-col--free .esds-plan-card,
.esds-plans-col--free-trial .esds-plan-card {
    --col-accent:      #23956a;
    --col-accent-dark: #1a6b4a;
    --col-accent-bg:   #e8f8f2;
    --col-accent-text: #1a6b4a;
    border-top: 3px solid #23956a !important;
}
.esds-plans-col--free .esds-plan-card__amount--free,
.esds-plans-col--free-trial .esds-plan-card__amount--free { color: #1a6b4a !important; }
.esds-plans-col--free .esds-plan-card__cta .esds-btn--primary,
.esds-plans-col--free-trial .esds-plan-card__cta .esds-btn--primary { background: #23956a !important; color: #fff !important; }
.esds-plans-col--free .esds-plan-card__cta .esds-btn--primary:hover,
.esds-plans-col--free-trial .esds-plan-card__cta .esds-btn--primary:hover { background: #1a6b4a !important; color: #fff !important; }

/* Teacher column — deep teal */
.esds-plans-col--teacher .esds-plans-col__header {
    background: linear-gradient(135deg, #0d3d2e 0%, #145e45 100%) !important;
}
.esds-plans-col--teacher .esds-plan-card {
    --col-accent:      #145e45;
    --col-accent-dark: #0d3d2e;
    --col-accent-bg:   #e6f7f2;
    --col-accent-text: #0d3d2e;
    border-top: 3px solid #145e45 !important;
}
.esds-plans-col--teacher .esds-plan-card__amount { color: #0d3d2e !important; }
.esds-plans-col--teacher .esds-plan-card__cta .esds-btn--primary { background: #145e45 !important; color: #fff !important; }
.esds-plans-col--teacher .esds-plan-card__cta .esds-btn--primary:hover { background: #0d3d2e !important; color: #fff !important; }

/* ── Plan card ───────────────────────────────────────────────────────────── */
.esds-plan-card {
    position: relative !important;
    background: #fff !important;
    border: 1px solid #dde6ee !important;
    border-radius: calc( var(--esds-radius) * 2 ) !important;
    padding: 1.5rem 1.5rem 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
    transition: transform .18s ease, box-shadow .18s ease;
}
.esds-plan-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.12) !important;
}
.esds-plan-card--featured {
    box-shadow: 0 0 0 2px var(--col-accent, var(--esds-primary)), 0 6px 20px rgba(0,0,0,.12) !important;
}
.esds-plan-card--active { border-color: var(--esds-success) !important; }

.esds-plan-card__badge {
    position: absolute !important;
    top: -1px !important;
    right: 1.25rem !important;
    background: var(--col-accent, var(--esds-primary)) !important;
    color: #fff !important;
    font-size: .68rem !important;
    font-weight: 700 !important;
    padding: .2em .75em !important;
    border-radius: 0 0 .4rem .4rem !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
}
.esds-plan-card__badge--active { background: var(--esds-success) !important; color: #fff !important; }

.esds-plan-card__header { margin-bottom: .75rem !important; }
/* h3 inside cards — beat theme heading rules */
.esds-plan-card .esds-plan-card__title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin: 0 0 .6rem !important;
    color: var(--esds-text) !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.esds-plan-card__price { display: flex !important; align-items: baseline !important; gap: .2rem !important; }
.esds-plan-card__currency {
    font-size: .78rem !important;
    font-weight: 700 !important;
    color: var(--col-accent-text, var(--esds-text-muted)) !important;
    margin-bottom: .1rem !important;
    align-self: flex-start !important;
    padding-top: .45rem !important;
}
.esds-plan-card__amount {
    font-size: 2.4rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -.02em !important;
}
.esds-plan-card__amount--free {
    font-size: 2rem !important;
    font-weight: 900 !important;
}
.esds-plan-card__interval {
    font-size: .8rem !important;
    color: var(--esds-text-muted) !important;
    margin-left: .1rem !important;
}
.esds-plan-card__trial {
    margin-top: .5rem !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    color: var(--col-accent, var(--esds-primary)) !important;
    background: var(--col-accent-bg, #f0fdf4) !important;
    padding: .2rem .65rem !important;
    border-radius: 9999px !important;
    display: inline-block !important;
}
.esds-plan-card__description {
    font-size: .85rem !important;
    color: var(--esds-text-muted) !important;
    margin: 0 0 .75rem !important;
    line-height: 1.5 !important;
}

.esds-plan-card__features {
    list-style: none !important;
    margin: .5rem 0 1.25rem !important;
    padding: 0 !important;
    flex: 1;
}
.esds-plan-card__feature {
    display: flex !important;
    align-items: flex-start !important;
    gap: .5rem !important;
    font-size: .85rem !important;
    padding: .3rem 0 !important;
    border-bottom: 1px solid #f0f4f8 !important;
    color: var(--esds-text) !important;
}
.esds-plan-card__feature:last-child { border-bottom: none !important; }
.esds-plan-card__feature-icon {
    color: var(--col-accent, var(--esds-success)) !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    margin-top: .05rem !important;
}

.esds-plan-card__cta { margin-top: auto !important; padding-top: .75rem !important; }
.esds-plan-card__cta .esds-btn,
.esds-plan-card__cta a.esds-btn {
    width: 100% !important;
    text-align: center !important;
    padding: .65rem 1rem !important;
    font-size: .875rem !important;
    border-radius: var(--esds-radius) !important;
}
.esds-plan-card__current-label {
    display: block !important;
    text-align: center !important;
    font-size: .875rem !important;
    color: var(--esds-text-muted) !important;
    padding: .5rem !important;
}
.esds-plans__empty { text-align: center !important; color: var(--esds-text-muted) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   ACCOUNT — Full redesign
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Account shell ────────────────────────────────────────────────────────── */
.esds-account {
    background: var(--esds-bg-light) !important;
    border-radius: calc(var(--esds-radius) * 2) !important;
    overflow: hidden !important;
    box-shadow: 0 2px 16px rgba(58,138,100,.10) !important;
}

/* ── Account header ──────────────────────────────────────────────────────── */
.esds-account__header {
    background: linear-gradient(135deg, var(--esds-primary) 0%, var(--esds-primary-dark) 100%) !important;
    padding: 1.75rem 1.75rem 1.5rem !important;
}
.esds-account__header-inner {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}
.esds-account__avatar {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.25) !important;
    border: 2px solid rgba(255,255,255,.55) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    flex-shrink: 0 !important;
    letter-spacing: .02em !important;
}
.esds-account__name {
    margin: 0 0 .2rem !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #fff !important;
}
.esds-account__meta {
    margin: 0 !important;
    font-size: .82rem !important;
    color: rgba(255,255,255,.8) !important;
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
    flex-wrap: wrap !important;
}
.esds-account__type-badge {
    display: inline-block !important;
    background: rgba(255,255,255,.2) !important;
    border: 1px solid rgba(255,255,255,.4) !important;
    border-radius: 20px !important;
    padding: 1px 10px !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: #fff !important;
}

/* ── Account tab nav ─────────────────────────────────────────────────────── */
.esds-account__tabs {
    display: flex !important;
    background: #fff !important;
    border-bottom: 2px solid var(--esds-border) !important;
    gap: 0 !important;
    padding: 0 1rem !important;
    overflow-x: auto !important;
}
.esds-account__tab {
    display: flex !important;
    align-items: center !important;
    gap: .4rem !important;
    padding: .85rem 1.1rem !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    color: var(--esds-text-muted) !important;
    text-decoration: none !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
    white-space: nowrap !important;
    transition: color .15s, border-color .15s !important;
    background: none !important;
}
.esds-account__tab-icon { font-size: .9rem !important; }
.esds-account__tab:hover  { color: var(--esds-primary) !important; }
.esds-account__tab.is-active {
    color: var(--esds-primary) !important;
    border-bottom-color: var(--esds-primary) !important;
}

/* ── Account content area ────────────────────────────────────────────────── */
.esds-account__content {
    padding: 1.75rem !important;
    background: var(--esds-bg-light) !important;
}
@media (max-width: 520px) { .esds-account__content { padding: 1rem !important; } }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.esds-empty-state {
    text-align: center !important;
    padding: 2.5rem 1rem !important;
}
.esds-empty-state__icon { font-size: 2.5rem !important; margin-bottom: .75rem !important; }
.esds-empty-state h3 { margin: 0 0 .5rem !important; font-size: 1.05rem !important; color: var(--esds-text) !important; }
.esds-empty-state p  { margin: 0 0 1.25rem !important; color: var(--esds-text-muted) !important; font-size: .875rem !important; }

/* ── Alert banners ───────────────────────────────────────────────────────── */
.esds-alert {
    display: flex !important;
    align-items: flex-start !important;
    gap: .75rem !important;
    padding: .85rem 1rem !important;
    border-radius: var(--esds-radius) !important;
    margin-bottom: 1rem !important;
    font-size: .875rem !important;
}
.esds-alert--danger  { background: #fef2f2 !important; border: 1px solid #fca5a5 !important; color: #991b1b !important; }
.esds-alert--warning { background: #fffbeb !important; border: 1px solid #fcd34d !important; color: #92400e !important; }
.esds-alert__icon    { font-size: 1.1rem !important; flex-shrink: 0 !important; }
.esds-alert p        { margin: .2rem 0 0 !important; font-size: .82rem !important; }

/* ── Trial banner ────────────────────────────────────────────────────────── */
.esds-trial-banner {
    background: linear-gradient(135deg, #e8f5f0 0%, #d4ede3 100%) !important;
    border: 1px solid var(--esds-border) !important;
    border-radius: calc(var(--esds-radius) * 1.5) !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 1.25rem !important;
}
.esds-trial-banner__inner {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    margin-bottom: .6rem !important;
}
.esds-trial-banner__label {
    background: var(--esds-primary) !important;
    color: #fff !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    border-radius: 20px !important;
    padding: 2px 10px !important;
}
.esds-trial-banner__days  { font-size: .95rem !important; font-weight: 700 !important; color: var(--esds-primary-dark) !important; }
.esds-trial-banner__ends  { font-size: .8rem !important; color: var(--esds-text-muted) !important; margin-left: auto !important; }
.esds-trial-banner__bar   { height: 6px !important; background: rgba(58,138,100,.18) !important; border-radius: 99px !important; overflow: hidden !important; }
.esds-trial-banner__bar-fill { height: 100% !important; background: var(--esds-primary) !important; border-radius: 99px !important; transition: width .4s !important; }

/* ── Subscription card ───────────────────────────────────────────────────── */
.esds-sub-card {
    background: #fff !important;
    border: 1px solid var(--esds-border) !important;
    border-radius: calc(var(--esds-radius) * 2) !important;
    overflow: hidden !important;
    margin-bottom: 1.25rem !important;
    box-shadow: 0 1px 8px rgba(58,138,100,.07) !important;
}
.esds-sub-card--teacher { border-top: 3px solid var(--esds-primary) !important; }
.esds-sub-card--student { border-top: 3px solid #3b82f6 !important; }
.esds-sub-card__top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 1.25rem 1.25rem .75rem !important;
    gap: .75rem !important;
}
.esds-sub-card__role-pill {
    display: inline-block !important;
    background: var(--esds-bg-light) !important;
    border: 1px solid var(--esds-border) !important;
    border-radius: 20px !important;
    padding: 2px 12px !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: var(--esds-primary) !important;
    margin-bottom: .4rem !important;
}
.esds-sub-card__plan-name {
    margin: 0 0 .3rem !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--esds-text) !important;
}
.esds-sub-card__price {
    margin: 0 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: .2rem !important;
}
.esds-sub-card__price-amount   { font-size: 1.05rem !important; font-weight: 700 !important; color: var(--esds-text) !important; }
.esds-sub-card__price-interval { font-size: .8rem !important; color: var(--esds-text-muted) !important; }

/* ── Stats row inside sub card ───────────────────────────────────────────── */
.esds-sub-card__stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    border-top: 1px solid var(--esds-border) !important;
    border-bottom: 1px solid var(--esds-border) !important;
}
.esds-stat {
    flex: 1 !important;
    min-width: 100px !important;
    padding: .75rem 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: .2rem !important;
}
.esds-stat + .esds-stat { border-left: 1px solid var(--esds-border) !important; }
.esds-stat__label {
    font-size: .68rem !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    color: var(--esds-text-muted) !important;
    font-weight: 600 !important;
}
.esds-stat__value {
    font-size: .9rem !important;
    font-weight: 700 !important;
    color: var(--esds-text) !important;
}

/* ── Status badges ───────────────────────────────────────────────────────── */
.esds-sub-badge {
    display: inline-block !important;
    border-radius: 20px !important;
    padding: 3px 12px !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}
.esds-sub-badge--sm { padding: 2px 8px !important; font-size: .65rem !important; }
.esds-sub-badge--active   { background: #dcfce7 !important; color: #166534 !important; }
.esds-sub-badge--trialing { background: #dbeafe !important; color: #1e40af !important; }
.esds-sub-badge--past_due { background: #fef3c7 !important; color: #92400e !important; }
.esds-sub-badge--canceled { background: #f3f4f6 !important; color: #6b7280 !important; }
.esds-sub-badge--expired  { background: #f3f4f6 !important; color: #6b7280 !important; }
.esds-sub-badge--paid     { background: #dcfce7 !important; color: #166534 !important; }
.esds-sub-badge--open     { background: #fef3c7 !important; color: #92400e !important; }

/* ── Action buttons grid ─────────────────────────────────────────────────── */
.esds-sub-card__actions {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 0 !important;
}
.esds-action-btn {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    padding: .9rem 1.25rem !important;
    background: none !important;
    border: none !important;
    border-top: 1px solid var(--esds-border) !important;
    cursor: pointer !important;
    text-align: left !important;
    text-decoration: none !important;
    transition: background .15s !important;
    width: 100% !important;
}
.esds-action-btn + .esds-action-btn { border-left: 1px solid var(--esds-border) !important; }
.esds-action-btn:hover { background: var(--esds-bg-light) !important; }
.esds-action-btn__icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
    background: var(--esds-bg-light) !important;
}
.esds-action-btn__text {
    display: flex !important;
    flex-direction: column !important;
    gap: .1rem !important;
}
.esds-action-btn__text strong { font-size: .82rem !important; color: var(--esds-text) !important; display: block !important; }
.esds-action-btn__text small  { font-size: .72rem !important; color: var(--esds-text-muted) !important; }
.esds-action-btn--cancel .esds-action-btn__icon  { background: #fef2f2 !important; color: #dc2626 !important; }
.esds-action-btn--cancel:hover { background: #fef2f2 !important; }
.esds-action-btn--renew  .esds-action-btn__icon  { background: #dcfce7 !important; color: #16a34a !important; }
.esds-action-btn--change .esds-action-btn__icon  { background: #eff6ff !important; color: #2563eb !important; }
.esds-action-btn--billing .esds-action-btn__icon { background: #f5f3ff !important; color: #7c3aed !important; }
@media (max-width: 520px) {
    .esds-sub-card__actions { grid-template-columns: 1fr !important; }
    .esds-action-btn + .esds-action-btn { border-left: none !important; }
}

/* ── Subscription history ────────────────────────────────────────────────── */
.esds-history {
    margin-top: 1.5rem !important;
    background: #fff !important;
    border: 1px solid var(--esds-border) !important;
    border-radius: calc(var(--esds-radius) * 1.5) !important;
    overflow: hidden !important;
}
.esds-history__title {
    font-size: .8rem !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: var(--esds-text-muted) !important;
    padding: .75rem 1.1rem !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--esds-border) !important;
    background: var(--esds-bg-light) !important;
}
.esds-history__item {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    padding: .65rem 1.1rem !important;
    border-bottom: 1px solid var(--esds-border) !important;
    flex-wrap: wrap !important;
}
.esds-history__item:last-child { border-bottom: none !important; }
.esds-history__item-name  { font-size: .875rem !important; font-weight: 600 !important; color: var(--esds-text) !important; flex: 1 !important; }
.esds-history__item-dates { font-size: .75rem !important; color: var(--esds-text-muted) !important; margin-left: auto !important; }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.esds-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.55) !important;
    z-index: 99990 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
    /* No backdrop-filter — it creates a stacking context that conflicts with
       parent overflow:hidden in EduDashboard's .esd-main layout */
}
.esds-modal-overlay.is-open {
    display: flex !important;
}
.esds-modal {
    background: #fff !important;
    border-radius: calc(var(--esds-radius) * 2) !important;
    padding: 2rem !important;
    max-width: 420px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.25) !important;
    animation: esdsModalIn .18s ease !important;
}
@keyframes esdsModalIn {
    from { opacity: 0; transform: scale(.95) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.esds-modal__close {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: var(--esds-text-muted) !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    padding: .25rem !important;
    border-radius: 4px !important;
    transition: color .15s, background .15s !important;
}
.esds-modal__close:hover { background: var(--esds-bg-light) !important; color: var(--esds-text) !important; }
.esds-modal__icon { font-size: 2.25rem !important; text-align: center !important; margin-bottom: .75rem !important; }
.esds-modal__title { font-size: 1.1rem !important; font-weight: 700 !important; margin: 0 0 .5rem !important; text-align: center !important; color: var(--esds-text) !important; }
.esds-modal__body  { font-size: .875rem !important; color: var(--esds-text-muted) !important; text-align: center !important; margin-bottom: 1.25rem !important; }
.esds-modal__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: .5rem !important;
    margin-top: 1.25rem !important;
}
.esds-modal__messages { margin-top: .75rem !important; font-size: .82rem !important; min-height: 1rem !important; text-align: center !important; }

/* ── Cancel modal options ────────────────────────────────────────────────── */
.esds-cancel-options { display: flex !important; flex-direction: column !important; gap: .5rem !important; }
.esds-cancel-option {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    border: 2px solid var(--esds-border) !important;
    border-radius: var(--esds-radius) !important;
    padding: .85rem 1rem !important;
    cursor: pointer !important;
    transition: border-color .15s !important;
    position: relative !important;
}
.esds-cancel-option input[type="radio"] { position: absolute !important; opacity: 0 !important; }
.esds-cancel-option__content { flex: 1 !important; }
.esds-cancel-option__content strong { display: block !important; font-size: .875rem !important; color: var(--esds-text) !important; margin-bottom: .15rem !important; }
.esds-cancel-option__content span   { font-size: .78rem !important; color: var(--esds-text-muted) !important; }
.esds-cancel-option__check { width: 20px !important; height: 20px !important; border-radius: 50% !important; border: 2px solid var(--esds-border) !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: .7rem !important; color: #fff !important; }
.esds-cancel-option--selected { border-color: var(--esds-primary) !important; }
.esds-cancel-option--selected .esds-cancel-option__check { background: var(--esds-primary) !important; border-color: var(--esds-primary) !important; }

/* ── Payment modal ───────────────────────────────────────────────────────── */
.esds-payment-options { display: flex !important; flex-direction: column !important; gap: .5rem !important; margin-bottom: 1rem !important; }
.esds-payment-option-btn {
    display: flex !important;
    align-items: center !important;
    gap: .85rem !important;
    padding: .85rem 1rem !important;
    background: var(--esds-bg-light) !important;
    border: 1px solid var(--esds-border) !important;
    border-radius: var(--esds-radius) !important;
    cursor: pointer !important;
    text-align: left !important;
    width: 100% !important;
    transition: border-color .15s, background .15s !important;
}
.esds-payment-option-btn:hover { border-color: var(--esds-primary) !important; background: #ecf7f2 !important; }
.esds-payment-option-btn__icon { font-size: 1.4rem !important; flex-shrink: 0 !important; }
.esds-payment-option-btn strong { display: block !important; font-size: .875rem !important; color: var(--esds-text) !important; margin-bottom: .1rem !important; }
.esds-payment-option-btn span   { font-size: .75rem !important; color: var(--esds-text-muted) !important; }
.esds-payment-modal__label { font-size: .8rem !important; font-weight: 600 !important; color: var(--esds-text-muted) !important; text-transform: uppercase !important; letter-spacing: .05em !important; margin-bottom: .4rem !important; }

/* ── Billing tab ─────────────────────────────────────────────────────────── */
.esds-billing-card {
    background: #fff !important;
    border: 1px solid var(--esds-border) !important;
    border-radius: calc(var(--esds-radius) * 1.5) !important;
    overflow: hidden !important;
}
.esds-billing-card__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: .85rem 1.25rem !important;
    border-bottom: 1px solid var(--esds-border) !important;
    background: var(--esds-bg-light) !important;
}
.esds-billing-card__header h4 { margin: 0 !important; font-size: .875rem !important; font-weight: 700 !important; color: var(--esds-text) !important; }
.esds-billing-card__body { padding: 1.25rem !important; }
.esds-billing-card__no-pm { color: var(--esds-text-muted) !important; font-size: .875rem !important; margin: 0 0 .75rem !important; }
.esds-saved-card {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
}
.esds-saved-card__brand {
    background: var(--esds-bg-light) !important;
    border: 1px solid var(--esds-border) !important;
    border-radius: 6px !important;
    padding: .3rem .65rem !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    color: var(--esds-text) !important;
}
.esds-saved-card__details { flex: 1 !important; }
.esds-saved-card__number  { display: block !important; font-size: .875rem !important; font-weight: 600 !important; color: var(--esds-text) !important; letter-spacing: .1em !important; }
.esds-saved-card__expiry  { display: block !important; font-size: .78rem !important; color: var(--esds-text-muted) !important; margin-top: .1rem !important; }
.esds-card-element-box {
    padding: 12px 14px !important;
    background: var(--esds-bg-light) !important;
    border: 1px solid var(--esds-border) !important;
    border-radius: var(--esds-radius) !important;
}
.esds-card-element-box.StripeElement--focus { border-color: var(--esds-primary) !important; box-shadow: 0 0 0 3px rgba(58,138,100,.12) !important; }
.esds-card-element-box.StripeElement--invalid { border-color: var(--esds-danger) !important; }
.esds-card-error-text { color: var(--esds-danger) !important; font-size: .78rem !important; min-height: 1rem !important; margin-top: 4px !important; }
.esds-invoice-list { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.esds-invoice-row {
    display: flex !important;
    align-items: center !important;
    gap: .75rem !important;
    padding: .65rem 0 !important;
    border-bottom: 1px solid var(--esds-border) !important;
    flex-wrap: wrap !important;
    font-size: .875rem !important;
}
.esds-invoice-row:last-child { border-bottom: none !important; }
.esds-invoice-row__date   { color: var(--esds-text-muted) !important; min-width: 90px !important; }
.esds-invoice-row__amount { font-weight: 600 !important; color: var(--esds-text) !important; flex: 1 !important; }
.esds-invoice-row__action { margin-left: auto !important; }
.esds-invoice-row__download {
    color: var(--esds-primary) !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 3px 10px !important;
    border: 1px solid var(--esds-border) !important;
    border-radius: var(--esds-radius) !important;
    transition: background .15s !important;
}
.esds-invoice-row__download:hover { background: var(--esds-bg-light) !important; }

/* ── Profile tab ─────────────────────────────────────────────────────────── */
.esds-profile-section {
    background: #fff !important;
    border: 1px solid var(--esds-border) !important;
    border-radius: calc(var(--esds-radius) * 1.5) !important;
    padding: 1.25rem !important;
    margin-bottom: 1rem !important;
}
.esds-profile-section__title { font-size: .8rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: var(--esds-text-muted) !important; margin: 0 0 1rem !important; }
.esds-profile-section__hint  { font-size: .8rem !important; color: var(--esds-text-muted) !important; margin: -.5rem 0 1rem !important; }
.esds-profile-lock-notice {
    display: flex !important;
    align-items: flex-start !important;
    gap: .5rem !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    border-radius: var(--esds-radius) !important;
    padding: .65rem .85rem !important;
    margin-bottom: 1rem !important;
    font-size: .82rem !important;
    color: #1e40af !important;
}
.esds-profile-lock-notice p { margin: 0 !important; }
.esds-profile-actions { margin-top: 1rem !important; }

.esds-profile-section--danger {
    border-color: #fecaca !important;
    background: #fff !important;
}
.esds-profile-section__title--danger { color: var(--esds-danger) !important; }

.esds-delete-account-list {
    text-align: left !important;
    margin: 0 !important;
    padding: 0 0 0 1.1rem !important;
    font-size: .82rem !important;
    color: var(--esds-text-muted) !important;
    line-height: 1.5 !important;
}
.esds-delete-account-list li { margin-bottom: .4rem !important; }

.esds-password-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}
.esds-password-wrap input { flex: 1 !important; padding-right: 40px !important; }
.esds-password-toggle {
    position: absolute !important;
    right: 10px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: var(--esds-text-muted) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    transition: color .15s !important;
}
.esds-password-toggle:hover { color: var(--esds-primary) !important; }

/* ── Type lock notice in plans tab ───────────────────────────────────────── */
.esds-type-lock-notice {
    display: inline-flex !important;
    align-items: center !important;
    gap: .4rem !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 20px !important;
    padding: .3rem .85rem !important;
    font-size: .78rem !important;
    color: #1e40af !important;
    font-weight: 600 !important;
    margin-top: .5rem !important;
}
.esds-tab-plans__header { margin-bottom: 1.25rem !important; }

/* ── Plan cards (change plan tab) ────────────────────────────────────────── */
.esds-plans-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 1rem !important;
}
.esds-plan-card2 {
    background: #fff !important;
    border: 2px solid var(--esds-border) !important;
    border-radius: calc(var(--esds-radius) * 1.5) !important;
    padding: 1.25rem !important;
    position: relative !important;
    transition: border-color .2s, box-shadow .2s !important;
    display: flex !important;
    flex-direction: column !important;
}
.esds-plan-card2:hover { border-color: var(--esds-primary) !important; box-shadow: 0 4px 16px rgba(58,138,100,.12) !important; }
.esds-plan-card2--current { border-color: var(--esds-primary) !important; background: #f0faf6 !important; }
.esds-plan-card2--featured { border-color: var(--esds-primary) !important; }
.esds-plan-card2__badge {
    position: absolute !important;
    top: -.7rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: var(--esds-primary) !important;
    color: #fff !important;
    font-size: .65rem !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    border-radius: 20px !important;
    padding: 2px 12px !important;
    white-space: nowrap !important;
}
.esds-plan-card2__badge--current { background: #2d6a4f !important; }
.esds-plan-card2__header { margin-bottom: .85rem !important; }
.esds-plan-card2__name   { font-size: .9rem !important; font-weight: 700 !important; color: var(--esds-text) !important; margin: 0 0 .4rem !important; }
.esds-plan-card2__pricing { display: flex !important; align-items: baseline !important; gap: .15rem !important; }
.esds-plan-card2__currency { font-size: .8rem !important; color: var(--esds-text-muted) !important; }
.esds-plan-card2__amount   { font-size: 1.5rem !important; font-weight: 800 !important; color: var(--esds-text) !important; }
.esds-plan-card2__interval { font-size: .75rem !important; color: var(--esds-text-muted) !important; }
.esds-plan-card2__trial-note { font-size: .72rem !important; color: var(--esds-primary) !important; margin: .25rem 0 0 !important; }
.esds-plan-card2__features { list-style: none !important; margin: 0 0 1rem !important; padding: 0 !important; flex: 1 !important; }
.esds-plan-card2__features li { font-size: .8rem !important; color: var(--esds-text) !important; padding: .2rem 0 !important; display: flex !important; gap: .4rem !important; align-items: flex-start !important; }
.esds-plan-card2__check { color: var(--esds-primary) !important; font-weight: 700 !important; flex-shrink: 0 !important; }
.esds-plan-card2__cta { margin-top: auto !important; }
.esds-plan-card2__cta .esds-btn { width: 100% !important; }
.esds-plan-card2__current-label {
    text-align: center !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    color: var(--esds-primary) !important;
    padding: .5rem !important;
    background: rgba(58,138,100,.08) !important;
    border-radius: var(--esds-radius) !important;
}

/* ── Register: card-wrap with auto-renew + discount inside ───────────────── */
/* Main card-wrap styling is defined in the inline-payment block below */
.esds-inline-payment__card-label {
    display: block !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    color: rgba(255,255,255,.6) !important;
    padding: .75rem 1rem .25rem !important;
}
/* card-element styling handled by the main block below */
.esds-inline-payment__card-errors {
    color: #fca5a5 !important;
    font-size: .78rem !important;
    min-height: .8rem !important;
    padding: 0 1rem .35rem !important;
}
.esds-card-inner-sep {
    height: 1px !important;
    background: rgba(255,255,255,.12) !important;
    margin: .5rem 0 !important;
}

/* Auto-renew inside card-wrap */
.esds-inline-payment__card-wrap .esds-auto-renew-toggle {
    display: flex !important;
    align-items: center !important;
    gap: .85rem !important;
    padding: .85rem 1rem !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
}
/* Discount inside card-wrap */
.esds-inline-payment__card-wrap .esds-discount-code-wrap {
    padding: .5rem 1rem .85rem !important;
    border-top: 1px solid rgba(255,255,255,.1) !important;
}
.esds-inline-payment__card-wrap .esds-inline-payment__card-label {
    padding-top: 0 !important;
    margin-bottom: 6px !important;
}
.esds-discount-code-row {
    display: flex !important;
    gap: .5rem !important;
    align-items: flex-end !important;
}
.esds-discount-code-field {
    flex: 1 !important;
    min-width: 0 !important;
}
.esds-discount-code-input {
    width: 100% !important;
    background: rgba(255,255,255,.1) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: var(--esds-radius) !important;
    color: #fff !important;
    padding: .55rem .75rem !important;
    font-size: .875rem !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    transition: border-color .2s, box-shadow .2s !important;
    box-sizing: border-box !important;
}
.esds-discount-code-input::placeholder { color: rgba(255,255,255,.4) !important; text-transform: none !important; letter-spacing: 0 !important; }
.esds-discount-code-input:focus { outline: none !important; border-color: rgba(255,255,255,.55) !important; box-shadow: 0 0 0 3px rgba(255,255,255,.1) !important; }
.esds-btn--apply-discount {
    background: rgba(255,255,255,.15) !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    color: #fff !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    padding: .55rem .9rem !important;
    border-radius: var(--esds-radius) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .15s !important;
    flex-shrink: 0 !important;
}
.esds-btn--apply-discount:hover { background: rgba(255,255,255,.25) !important; }
.esds-discount-feedback {
    margin-top: .4rem !important;
    font-size: .78rem !important;
    min-height: 1rem !important;
    color: rgba(255,255,255,.8) !important;
}
.esds-discount-feedback--success { color: #86efac !important; }
.esds-discount-feedback--error   { color: #fca5a5 !important; }

/* Discount applied: inline price update in the summary */
.esds-inline-payment__amount--original {
    text-decoration: line-through !important;
    color: rgba(255,255,255,.4) !important;
    font-size: .9em !important;
    margin-right: .4rem !important;
}
.esds-inline-payment__amount--discounted {
    color: #86efac !important;
    font-weight: 700 !important;
}

/* ── Checkout ────────────────────────────────────────────────────────────── */
.esds-checkout { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 2rem !important; align-items: start !important; }
@media (max-width: 640px) { .esds-checkout { grid-template-columns: 1fr !important; } }
.esds-checkout__summary { background: var(--esds-bg-light) !important; border: 1px solid var(--esds-border) !important; border-radius: calc(var(--esds-radius) * 2) !important; padding: 1.5rem !important; }
.esds-checkout__plan-name { font-size: 1.25rem !important; font-weight: 700 !important; margin: 0 0 .75rem !important; color: var(--esds-text) !important; }
.esds-checkout__price { display: flex !important; align-items: baseline !important; gap: .2rem !important; margin-bottom: .75rem !important; }
.esds-checkout__currency { font-size: .9rem !important; color: var(--esds-text-muted) !important; }
.esds-checkout__amount { font-size: 2rem !important; font-weight: 800 !important; color: var(--esds-text) !important; }
.esds-checkout__interval { font-size: .85rem !important; color: var(--esds-text-muted) !important; }
.esds-checkout__trial { font-size: .85rem !important; color: var(--esds-primary) !important; background: #eff6ff !important; padding: .5rem .75rem !important; border-radius: var(--esds-radius) !important; margin-bottom: .75rem !important; }
.esds-checkout__features { list-style: none !important; margin: 0 !important; padding: 0 !important; font-size: .875rem !important; }
.esds-checkout__features li { padding: .3rem 0 !important; display: flex !important; gap: .5rem !important; color: var(--esds-text) !important; }
.esds-checkout__features span { color: var(--esds-success) !important; font-weight: 700 !important; }
.esds-checkout__payment { padding: .5rem 0 !important; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.esds-pagination { margin-top: 1.25rem !important; }

/* ── Stripe Elements ─────────────────────────────────────────────────────── */
#esds-card-element,
#esds-update-pm-card {
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: border-color .2s, box-shadow .2s;
}
#esds-card-element.StripeElement--focus,
#esds-update-pm-card.StripeElement--focus {
    border-color: #3a8a64;
    box-shadow: 0 0 0 3px rgba(58,138,100,0.12);
}
#esds-card-element.StripeElement--invalid,
#esds-update-pm-card.StripeElement--invalid {
    border-color: #ef4444;
}
#esds-card-errors,
#esds-update-pm-errors {
    color: #ef4444 !important;
    font-size: 13px !important;
    min-height: 16px;
    margin-top: 4px;
}
#esds-checkout-modal .esds-modal {
    background: #fff !important;
    color: #1f2937 !important;
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
}
#esds-checkout-modal .esds-modal__title {
    color: #1f2937 !important;
}
#esds-checkout-modal .esds-modal__subtitle {
    color: #6b7280 !important;
}
#esds-update-pm-wrap {
    margin-top: 16px;
    padding: 20px;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px;
}
.esds-btn-update-payment-method {
    margin-top: 8px;
}

/* ── Inline payment section ──────────────────────────────────────────────── */
.esds-inline-payment {
    margin: 0 0 1.25rem;
    border-radius: var(--esds-radius);
    overflow: hidden;
}
.esds-inline-payment__summary {
    padding: 14px 16px;
    background: rgba(58,138,100,0.12);
    border: 1px solid rgba(58,138,100,0.3);
    border-radius: var(--esds-radius) var(--esds-radius) 0 0;
    border-bottom: none;
}
.esds-inline-payment__plan-name {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: var(--esds-text-muted) !important;
    margin-bottom: 4px !important;
}
.esds-inline-payment__parent-line,
.esds-inline-payment__child-line {
    font-size: 13px !important;
    color: rgba(255,255,255,.75) !important;
    margin-bottom: 4px !important;
}
.esds-inline-payment__parent-line strong,
.esds-inline-payment__child-line strong {
    color: #fff !important;
    font-weight: 700 !important;
}
/* Light-mode contexts (plans/checkout pages) — dark text instead of white */
.esds-plans .esds-inline-payment__parent-line,
.esds-plans-columns .esds-inline-payment__parent-line,
.esds-checkout .esds-inline-payment__parent-line,
.esds-plans .esds-inline-payment__child-line,
.esds-plans-columns .esds-inline-payment__child-line,
.esds-checkout .esds-inline-payment__child-line {
    color: var(--esds-text-muted) !important;
}
.esds-plans .esds-inline-payment__parent-line strong,
.esds-plans-columns .esds-inline-payment__parent-line strong,
.esds-checkout .esds-inline-payment__parent-line strong,
.esds-plans .esds-inline-payment__child-line strong,
.esds-plans-columns .esds-inline-payment__child-line strong,
.esds-checkout .esds-inline-payment__child-line strong {
    color: var(--esds-text) !important;
}
.esds-inline-payment__price-row {
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255,255,255,.15) !important;
}
.esds-plans .esds-inline-payment__price-row,
.esds-plans-columns .esds-inline-payment__price-row,
.esds-checkout .esds-inline-payment__price-row {
    border-top-color: var(--esds-border) !important;
}
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.esds-inline-payment__amount {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: var(--esds-primary) !important;
    letter-spacing: -0.02em !important;
}
.esds-inline-payment__trial {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--esds-text-muted) !important;
}
.esds-inline-payment__card-wrap {
    padding: 16px;
    background: rgba(0,0,0,0.15);
    border: 1px solid rgba(58,138,100,0.2);
    border-radius: 0 0 var(--esds-radius) var(--esds-radius);
}
.esds-inline-payment__summary:last-of-type {
    border-radius: var(--esds-radius);
    border-bottom: 1px solid rgba(58,138,100,0.3);
}
/* When no card-wrap follows (free trial) — fully rounded summary */
.esds-inline-payment--free-trial .esds-inline-payment__summary {
    border-radius: var(--esds-radius) !important;
    border-bottom: 1px solid rgba(58,138,100,0.3) !important;
}
.esds-inline-payment__card-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: var(--esds-text-muted) !important;
    margin-bottom: 10px !important;
}
.esds-inline-payment__card-loading {
    font-size: 13px !important;
    color: var(--esds-text-muted) !important;
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.esds-inline-payment__card-element {
    padding: 11px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    transition: border-color .2s, box-shadow .2s;
    min-height: 42px;
}
.esds-inline-payment__card-element.StripeElement--focus {
    border-color: var(--esds-primary);
    box-shadow: 0 0 0 3px rgba(58,138,100,0.2);
}
.esds-inline-payment__card-element.StripeElement--invalid {
    border-color: #ef4444;
}
.esds-inline-payment__card-errors {
    min-height: 18px;
    margin-top: 8px;
    font-size: 13px !important;
    color: #f87171 !important;
}
.esds-inline-payment__secure-note {
    margin-top: 10px;
    font-size: 11px !important;
    color: var(--esds-text-muted) !important;
    text-align: center;
}

/* Light-mode overrides */
.esds-plans .esds-inline-payment__summary,
.esds-plans-columns .esds-inline-payment__summary,
.esds-checkout .esds-inline-payment__summary {
    background: rgba(58,138,100,0.08) !important;
}
.esds-plans .esds-inline-payment__card-wrap,
.esds-plans-columns .esds-inline-payment__card-wrap,
.esds-checkout .esds-inline-payment__card-wrap {
    background: #f9fafb !important;
    border-color: var(--esds-border) !important;
}
.esds-plans .esds-inline-payment__card-element,
.esds-plans-columns .esds-inline-payment__card-element,
.esds-checkout .esds-inline-payment__card-element {
    background: #fff !important;
    border-color: var(--esds-border) !important;
}

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.esds-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: var(--esds-primary);
    border-radius: 50%;
    animation: esds-spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes esds-spin { to { transform: rotate(360deg); } }

/* ── Auto-renew toggle ───────────────────────────────────────────────────── */
.esds-auto-renew-toggle {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-top: 16px !important;
    padding: 12px 14px !important;
    background: var(--esds-surface-2, rgba(255,255,255,0.04)) !important;
    border: 1px solid var(--esds-border, rgba(255,255,255,0.1)) !important;
    border-radius: 8px !important;
}
.esds-toggle-switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 44px;
    height: 24px;
    cursor: pointer;
    margin-top: 2px;
}
.esds-toggle-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.esds-toggle-switch__track {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: var(--esds-border, #4b5563);
    transition: background 0.2s ease;
}
.esds-toggle-switch input:checked ~ .esds-toggle-switch__track {
    background: var(--esds-primary, #3a8a64) !important;
}
.esds-toggle-switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 0.2s ease;
}
.esds-toggle-switch input:checked ~ .esds-toggle-switch__thumb {
    transform: translateX(20px);
}
.esds-auto-renew-toggle__labels {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.esds-auto-renew-toggle__title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--esds-text, #111827) !important;
}
.esds-auto-renew-toggle__desc {
    font-size: 12px !important;
    color: var(--esds-text-muted, #4b7a62) !important;
    line-height: 1.4 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   hCaptcha — Green theme overrides
   ══════════════════════════════════════════════════════════════════════

   hCaptcha renders two iframes:
     1. The checkbox widget  (#hcaptcha iframe, .h-captcha iframe)
     2. The challenge popup  (.hcaptcha-challenge-container + iframes)

   We cannot pierce iframes with CSS, but we can:
     • Style the host-page wrapper divs and borders
     • Use data-theme="dark" (set in register.php) so hCaptcha's own
       dark palette is used — its dark mode already neutralises the
       harsh white background
     • Inject a CSS custom properties block that hCaptcha reads from
       the host page for its newer widget builds
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Checkbox widget host container ──────────────────────────────── */
.esds-hcaptcha-widget,
.esds-form-field .h-captcha {
    /* Remove any default white background bleed around the iframe */
    background: transparent !important;
    border-radius: var(--esds-radius, 0.5rem) !important;
    overflow: hidden !important;
    display: inline-block !important;
}

/* The outer wrapper div hCaptcha injects beside the iframe */
.esds-hcaptcha-widget > div,
.h-captcha > div {
    background: transparent !important;
}

/* The visible checkbox iframe — give it a green border to match our inputs */
.esds-hcaptcha-widget iframe,
.esds-form-field .h-captcha iframe {
    border: 1px solid rgba(58, 138, 100, 0.45) !important;
    border-radius: var(--esds-radius, 0.5rem) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    display: block !important;
}

.esds-hcaptcha-widget iframe:hover,
.esds-form-field .h-captcha iframe:hover {
    border-color: var(--esds-primary, #3a8a64) !important;
    box-shadow: 0 0 0 3px rgba(58, 138, 100, 0.18) !important;
}

/* ── 2. Challenge popup overlay ─────────────────────────────────────── */
/* hCaptcha appends the challenge container to <body> — target it globally */

/* Backdrop */
.hcaptcha-challenge-container,
[id^="hcaptcha-challenge-"] {
    /* Can't restyle the iframe interior, but we can frame the outer shell */
}

/* The outer modal frame hCaptcha wraps the challenge iframe in */
.hcaptcha-challenge-container > div,
[id^="hcaptcha-challenge-"] > div {
    border: 2px solid var(--esds-primary, #3a8a64) !important;
    border-radius: calc(var(--esds-radius, 0.5rem) * 2) !important;
    box-shadow:
        0 0 0 1px rgba(58, 138, 100, 0.3),
        0 20px 60px rgba(0, 0, 0, 0.6) !important;
    overflow: hidden !important;
}

/* hCaptcha :root vars removed — not supported on standard plan */

/* ── Registration legal notices ── */
.esds-reg-notices {
    margin-top: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.esds-reg-notice {
    display: flex !important;
    align-items: flex-start !important;
    gap: 7px !important;
    padding: 8px 11px !important;
    border-radius: 6px !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    color: #374151 !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
}
.esds-reg-notice__icon {
    flex-shrink: 0 !important;
    font-size: 13px !important;
    margin-top: 1px !important;
    opacity: 0.75 !important;
}
.esds-reg-notice a {
    color: var(--esds-primary, #3a8a64) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    font-weight: 600 !important;
}
.esds-reg-notice a:hover {
    color: var(--esds-primary-dark, #2d6a4f) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   Family Plan signup wizard (templates/plans.php)
   Lives here — not inline in the template — because this page renders
   through an AJAX/SPA content-swap; wp_head/wp_footer (where
   wp_add_inline_style output would print) already fired before this
   fragment's PHP runs, so nothing queued that way ever reaches the page.
   ══════════════════════════════════════════════════════════════════════ */
/* Wizard shell — rounded panel that frames every step. */
.esds-family-wizard {
    background: var(--esds-bg-light, #f2faf6);
    border: 1px solid var(--esds-border, #d1e8dc);
    border-radius: 24px;
    padding: 32px 28px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}
@media (max-width: 600px) {
    .esds-family-wizard { padding: 24px 14px; border-radius: 18px; }
}
.esds-family-wizard__panel { display: none; }
.esds-family-wizard__panel.is-active { display: block; }

/* Consistent size across steps (desktop/tablet): the step indicator sits in
   row 1 and ALL four panels are stacked in the same grid cell in row 2, with
   only the active one visible. The cell — and so the wizard — is always as
   tall as the tallest step, so nothing jumps when moving between steps.
   Narrow screens keep the simple show/hide (stacked cards there would leave
   big empty gaps on the short steps). */
@media (min-width: 901px) {
    .esds-family-wizard {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }
    .esds-family-wizard__steps { grid-column: 1; grid-row: 1; }
    .esds-family-wizard__panel {
        grid-column: 1;
        grid-row: 2;
        display: flex;
        flex-direction: column;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease;
    }
    .esds-family-wizard__panel.is-active {
        display: flex;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }
    /* Shorter steps: centre their content inside the fixed frame */
    .esds-family-wizard__panel[data-panel="2"],
    .esds-family-wizard__panel[data-panel="4"] { justify-content: center; }
    /* Tallest steps: keep Back/Next pinned to the bottom */
    .esds-family-wizard__panel[data-panel="3"] .esds-family-wizard__nav { margin-top: auto; padding-top: 24px; }
}
.esds-family-wizard__steps { text-align: center; margin-bottom: 24px; }
.esds-family-wizard__step { opacity: .5; margin: 0 8px; }
.esds-family-wizard__step.is-active { opacity: 1; font-weight: 700; }
.esds-family-wizard__title { text-align: center; }
.esds-family-wizard__subtitle { text-align: center; color: var(--esds-text-muted); margin-top: -8px; }
.esds-family-step-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    align-items: stretch;
}
.esds-family-step-card { cursor: pointer; transition: box-shadow .15s, border-color .15s, opacity .15s; border: 2px solid transparent; position: relative; }
/* Unavailable child plans (given the chosen parent plan) stay visible but
   disabled — greyed out, blurred, with an explanatory overlay — rather than
   disappearing outright, so it's clear WHY an option isn't selectable
   instead of it just not being there. Needs !important + this specific a
   selector to beat the pre-existing ".esds-plan-card { display: flex
   !important; }" rule that a plain display:none couldn't win against. */
.esds-family-wizard .esds-family-step-card.esdf-disabled {
    opacity: .8 !important;
    filter: grayscale(10%);
    pointer-events: none;
    cursor: default;
}
.esds-family-wizard .esds-family-step-card.esdf-disabled::after {
    content: "Upgrade your parent plan to select this child plan";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.4;
    color: #374151;
    border-radius: inherit;
}
.esds-family-step-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.esds-family-step-card.esds-plan-card--active { border-color: var(--esds-primary-dark, #2d6a4f); }
/* "Select" is a plain span (not an .esds-btn) inside the card CTA slot —
   style it to look like a button on hover/active state without needing
   the .esds-btn markup, since the wizard treats the whole card as clickable */
.esds-family-step-card__select-label {
    display: inline-block;
    padding: .55rem 1.25rem;
    border-radius: var(--esds-radius, .5rem);
    font-size: .875rem;
    font-weight: 600;
    background: var(--esds-bg-light, #f2faf6);
    color: var(--esds-primary, #3a8a64);
    transition: background .15s, color .15s;
}
.esds-family-step-card:hover .esds-family-step-card__select-label,
.esds-family-step-card.esds-plan-card--active .esds-family-step-card__select-label {
    background: var(--esds-primary, #3a8a64);
    color: #fff;
}
.esds-family-child-count { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 24px 0; }
/* Fixed, equal heights + zeroed margins so the −/+ buttons and the number
   box share one centre line (theme input/button margins were pushing the
   buttons lower than the input). */
.esds-family-wizard .esds-family-child-count__input {
    width: 70px;
    height: 46px;
    margin: 0 !important;
    padding: 0 8px !important;
    text-align: center;
    font-size: 18px;
    line-height: 46px;
    box-sizing: border-box;
}
.esds-family-wizard .esds-family-child-count__btn {
    min-width: 46px;
    height: 46px;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box;
}
.esds-family-wizard__nav { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
.esds-family-wizard__cap-note { text-align: center; color: var(--esds-warning, #d97706); font-size: 14px; }
.esds-family-wizard__summary { max-width: 420px; margin: 24px auto; padding: 16px 20px; background: var(--esds-bg-light, #f3fbf6); border: 1px solid var(--esds-border, #c8e8d4); border-radius: 10px; }
.esds-family-wizard__summary-row--total { display: flex; justify-content: space-between; font-size: 18px; }
.esds-family-wizard__summary-note { color: var(--esds-text-muted); font-size: 13px; margin: 6px 0 0; }

/* ── Step 4: plan summary ─────────────────────────────────────────────── */
.esdf-sum { max-width: 820px; margin: 8px auto 0; width: 100%; }
.esdf-sum__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
@media (max-width: 700px) { .esdf-sum__cards { grid-template-columns: 1fr; } }
.esdf-sum__card {
    background: #fff;
    border: 1px solid var(--esds-border, #d1e8dc);
    border-radius: 16px;
    padding: 22px 24px;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.esdf-sum__card--today { border: 2px solid var(--esds-primary, #3a8a64); }
.esdf-sum__tag {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--esds-primary, #3a8a64);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.esdf-sum__tag--muted { background: var(--esds-bg-light, #f2faf6); color: var(--esds-primary-dark, #2d6a4f); border: 1px solid var(--esds-border, #d1e8dc); }
.esdf-sum .esdf-sum__card-title { margin: 12px 0 6px !important; font-size: 15px !important; font-weight: 600 !important; color: var(--esds-text-muted, #4b7a62) !important; }
.esdf-sum__plan { font-size: 20px; font-weight: 800; color: var(--esds-text, #111827); line-height: 1.25; }
.esdf-sum__price { font-size: 26px; font-weight: 900; color: var(--esds-primary-dark, #2d6a4f); margin: 4px 0 10px; line-height: 1.2; }
.esdf-sum__card--later .esdf-sum__price { font-size: 20px; }
.esdf-sum__card-note { margin: 0 !important; font-size: 15px; line-height: 1.5; color: var(--esds-text-muted, #4b7a62); }

.esdf-sum__total {
    margin-top: 18px;
    padding: 22px 24px 18px;
    background: #fff;
    border: 1px dashed var(--esds-primary, #3a8a64);
    border-radius: 16px;
    text-align: left;
}
.esdf-sum .esdf-sum__total-title { margin: 0 0 8px !important; font-size: 18px !important; font-weight: 800 !important; color: var(--esds-text, #111827) !important; }
.esdf-sum__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--esds-border, #d1e8dc);
}
.esdf-sum__row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.esdf-sum__row-label { font-size: 16px; font-weight: 700; color: var(--esds-text, #111827); }
.esdf-sum__row-detail { font-size: 14px; color: var(--esds-text-muted, #4b7a62); }
.esdf-sum__row > strong { font-size: 17px; font-weight: 800; white-space: nowrap; color: var(--esds-text, #111827); }
.esdf-sum__row--total { border-bottom: none; padding-top: 16px; }
.esdf-sum__row--total .esdf-sum__row-label { font-size: 18px; }
.esdf-sum__row--total > strong,
.esdf-sum__total .esds-family-wizard__summary-total { font-size: 26px; font-weight: 900; white-space: nowrap; color: var(--esds-primary-dark, #2d6a4f); }
.esdf-sum__rows { border-top: 1px solid var(--esds-border, #d1e8dc); }
.esdf-sum__rows + .esdf-sum__row--total { border-top: 2px solid var(--esds-text, #111827); margin-top: -1px; }
.esdf-sum__total-sub { margin: 6px 0 0 !important; font-size: 14px; color: var(--esds-text-muted, #4b7a62); }
@media (max-width: 520px) {
    .esdf-sum__row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

.esdf-sum__next { margin-top: 26px; text-align: left; }
.esdf-sum .esdf-sum__next-title { margin: 0 0 12px !important; font-size: 18px !important; font-weight: 800 !important; text-align: center; color: var(--esds-text, #111827) !important; }
.esdf-sum__steps { list-style: none; margin: 0; padding: 0; counter-reset: esdf-step; display: grid; gap: 12px; }
.esdf-sum__steps li {
    counter-increment: esdf-step;
    position: relative;
    padding: 4px 0 4px 52px;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 16px;
    line-height: 1.45;
}
.esdf-sum__steps li::before {
    content: counter(esdf-step);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--esds-primary, #3a8a64);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.esdf-sum__steps li strong { color: var(--esds-text, #111827); font-size: 16px; }
.esdf-sum__steps li span { color: var(--esds-text-muted, #4b7a62); font-size: 15px; }

/* ══════════════════════════════════════════════════════════════════════
   Compact sizing — keep the whole wizard on one screen (desktop) and
   tidy/short on mobile. Placed last so it wins over the roomier defaults
   above. Sizes lean on viewport height so shorter laptop screens shrink
   further rather than forcing a page scroll.
   ══════════════════════════════════════════════════════════════════════ */
.esds-family-wizard { padding: 20px 24px; }
.esds-family-wizard .esds-family-wizard__steps { margin-bottom: 10px; font-size: 14px; }
.esds-family-wizard .esds-family-wizard__title {
    font-size: clamp(1.5rem, 4.4vh, 2.1rem) !important;
    line-height: 1.15 !important;
    margin: 0 0 .3em !important;
    padding: 0 !important;
}
.esds-family-wizard .esds-family-wizard__subtitle { margin: 0 0 12px !important; font-size: 15px; }
.esds-family-wizard .esds-family-wizard__nav { margin-top: 14px; }
.esds-family-wizard .esds-family-wizard__nav .esds-btn { padding: .5rem 1.25rem !important; }
.esds-family-wizard .esds-family-child-count { margin: 16px 0; }

/* Plan cards (steps 1 & 3) */
.esds-family-wizard .esds-family-step-cards { gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.esds-family-wizard .esds-plan-card { padding: 16px 18px 14px !important; }
.esds-family-wizard .esds-plan-card__header { margin-bottom: .4rem !important; }
.esds-family-wizard .esds-plan-card .esds-plan-card__title { font-size: 1rem !important; margin: 0 0 .3rem !important; }
.esds-family-wizard .esds-plan-card__amount { font-size: 1.9rem !important; }
.esds-family-wizard .esds-plan-card__amount--free { font-size: 1.7rem !important; }
.esds-family-wizard .esds-plan-card__trial { margin-top: .3rem !important; }
.esds-family-wizard .esds-plan-card__description { margin: 0 0 .4rem !important; font-size: .8rem !important; line-height: 1.35 !important; }
.esds-family-wizard .esds-plan-card__features { margin: .25rem 0 .6rem !important; }
.esds-family-wizard .esds-plan-card__feature { font-size: .8rem !important; padding: .18rem 0 !important; line-height: 1.3 !important; }
.esds-family-wizard .esds-plan-card__cta { padding-top: .4rem !important; }
.esds-family-wizard .esds-family-step-card__select-label { padding: .4rem 1.1rem; }

/* Step 4 — compact card/breakdown sizing */
.esdf-sum { margin-top: 0; }
.esdf-sum__cards { gap: 14px; }
.esdf-sum__card { padding: 14px 18px; }
.esdf-sum .esdf-sum__card-title { margin: 8px 0 2px !important; font-size: 14px !important; }
.esdf-sum__plan { font-size: 18px; }
.esdf-sum__price { font-size: 22px; margin: 2px 0 6px; }
.esdf-sum__card--later .esdf-sum__price { font-size: 18px; }
.esdf-sum__card-note { font-size: 14px; line-height: 1.4; }
.esdf-sum__tag { font-size: 11px; padding: 2px 10px; }
.esdf-sum__total { margin-top: 14px; padding: 14px 18px 12px; }
.esdf-sum .esdf-sum__total-title { font-size: 16px !important; margin: 0 0 4px !important; }
.esdf-sum__row { padding: 8px 0; }
.esdf-sum__row-label { font-size: 15px; }
.esdf-sum__row-detail { font-size: 13px; }
.esdf-sum__row > strong { font-size: 16px; }
.esdf-sum__row--total { padding-top: 10px; }
.esdf-sum__row--total .esdf-sum__row-label { font-size: 16px; }
.esdf-sum__row--total > strong,
.esdf-sum__total .esds-family-wizard__summary-total { font-size: 22px; }
.esdf-sum__total-sub { font-size: 13px; }
.esdf-sum__next { margin-top: 16px; }
.esdf-sum .esdf-sum__next-title { font-size: 16px !important; margin: 0 0 8px !important; }
.esdf-sum__steps { gap: 8px; }
.esdf-sum__steps li { min-height: 34px; padding-left: 44px; font-size: 14px; }
.esdf-sum__steps li::before { width: 30px; height: 30px; font-size: 14px; }
.esdf-sum__steps li strong { font-size: 14.5px; }
.esdf-sum__steps li span { font-size: 13.5px; }

/* Desktop: step 4 becomes two columns —
   row 1: Pay today | Set up later
   row 2: full-year breakdown | What happens next */
@media (min-width: 901px) {
    .esdf-sum { max-width: 1000px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
    .esdf-sum__cards { display: contents; }
    .esdf-sum__total { grid-column: 1; margin-top: 0; }
    .esdf-sum__next { grid-column: 2; margin-top: 0; align-self: center; }
    .esdf-sum .esdf-sum__next-title { text-align: left; }
}

/* Shorter laptop screens: squeeze a little more */
@media (min-width: 901px) and (max-height: 820px) {
    .esds-family-wizard { padding: 14px 20px; }
    .esds-family-wizard .esds-family-wizard__steps { margin-bottom: 6px; }
    .esds-family-wizard .esds-plan-card { padding: 12px 16px 10px !important; }
    .esds-family-wizard .esds-plan-card__amount { font-size: 1.6rem !important; }
    .esds-family-wizard .esds-plan-card__feature { font-size: .76rem !important; padding: .12rem 0 !important; }
    .esds-family-wizard .esds-plan-card__features { margin-bottom: .4rem !important; }
    .esdf-sum__card { padding: 10px 16px; }
    .esdf-sum__price { font-size: 20px; }
    .esdf-sum__total { padding: 10px 16px 8px; }
    .esdf-sum__row { padding: 5px 0; }
    .esdf-sum__steps li { min-height: 30px; }
}

/* Mobile: single vertical column, kept tidy */
@media (max-width: 900px) {
    .esds-family-wizard { padding: 16px 14px; }
    .esds-family-wizard .esds-family-wizard__steps { font-size: 12px; }
    .esds-family-wizard .esds-family-wizard__step { margin: 0 4px; }
    .esds-family-wizard .esds-family-step-cards { grid-template-columns: 1fr; gap: 12px; }
    .esdf-sum__cards { grid-template-columns: 1fr; }
}

/* Roomier plan cards on steps 1 & 3 (desktop, normal-height screens only).
   The wizard's height is set by step 4, so these cards have spare space to
   use — kept modest so they never make steps 1/3 taller than step 4. Scoped
   to the cards so the shared title/step-indicator spacing (which step 4 also
   uses) is untouched. Short screens keep the tighter sizing above. */
@media (min-width: 901px) and (min-height: 821px) {
    .esds-family-wizard .esds-family-step-cards { gap: 18px; }
    .esds-family-wizard .esds-plan-card { padding: 22px 22px 20px !important; }
    .esds-family-wizard .esds-plan-card__header { margin-bottom: .7rem !important; }
    .esds-family-wizard .esds-plan-card .esds-plan-card__title { font-size: 1.05rem !important; margin: 0 0 .45rem !important; }
    .esds-family-wizard .esds-plan-card__amount { font-size: 2.1rem !important; }
    .esds-family-wizard .esds-plan-card__amount--free { font-size: 1.9rem !important; }
    .esds-family-wizard .esds-plan-card__trial { margin-top: .45rem !important; }
    .esds-family-wizard .esds-plan-card__features { margin: .5rem 0 .9rem !important; }
    .esds-family-wizard .esds-plan-card__feature { font-size: .84rem !important; padding: .32rem 0 !important; }
    .esds-family-wizard .esds-plan-card__cta { padding-top: .7rem !important; }
    .esds-family-wizard .esds-family-step-card__select-label { padding: .5rem 1.25rem; }
}

/* Register form: card fields / auto-renew hidden when a discount covers 100%
   of the price (set by setFullDiscountMode() in esds-frontend.js). Needs
   !important + this specificity to beat the toggle's display:flex !important. */
.esds-register-form .esds-inline-payment .esds-fd-hidden { display: none !important; }