/* ═══════════════════════════════════════════════════════════════════════
   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(3, 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;
}

/* 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;
    /* 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;
    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-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 ───────────────── */
.esds-inline-payment__card-wrap {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: calc(var(--esds-radius) * 1.5) !important;
    overflow: hidden !important;
    margin-bottom: 1rem !important;
}
.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;
}
.esds-inline-payment__card-element {
    padding: 0 1rem 0 !important;
    min-height: 42px !important;
}
.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; }

/* ── 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;
}
#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__price-row {
    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;
}
