/* ============================================================================
 * pro-upgrade.css — MyBest24 Pro upgrade modal
 *
 * D3 modal styles. Kept self-contained so the modal renders correctly even
 * if other CSS files are missing or out of order.
 *
 * Uses the existing `.modal-hidden` class from the app's modal pattern.
 * ========================================================================= */

/* ── Backdrop / container ────────────────────────────────────────────────── */
/* Shared between #pro-upgrade-modal (D3) and #manage-subscription-modal (D8b)
   — identical backdrop, positioning, and overflow behavior. Adding new modals
   to the same family: include their ID in this rule. */
#pro-upgrade-modal,
#manage-subscription-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    overflow-y: auto;
}
#pro-upgrade-modal.modal-hidden,
#manage-subscription-modal.modal-hidden { display: none; }

/* ── Modal box ───────────────────────────────────────────────────────────── */
.pro-upgrade-box {
    background: #1a1a1a;
    color: #efefef;
    border-radius: 16px;
    width: 100%;
    max-width: 460px;
    padding: 32px 28px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.pro-upgrade-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
}
.pro-upgrade-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #efefef;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.pro-upgrade-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: #efefef;
}
.pro-upgrade-subtitle {
    font-size: 0.9rem;
    color: #999;
    margin: 0 0 24px;
    line-height: 1.4;
}

/* ── Plan options ────────────────────────────────────────────────────────── */
/* Stacked plan options (May 2026 — CapCut-style). Single-column layout with
   inline "$X.XX/Period" labels. Radio circle on the left; selected state via
   accent border + faint accent fill. The badges ("most flexible", "save 50%")
   were removed — the inline price math conveys the same info more cleanly. */
.pro-plan-options.pro-plan-options-stacked {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 0;        /* Purchase button has margin-top: 80px which is
                                the single source of the gap-above-CTA value */
}
.pro-plan-option {
    display: block;
    cursor: pointer;
    position: relative;
}
.pro-plan-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pro-plan-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 2px solid #333;
    border-radius: 14px;
    padding: 18px 22px;
    transition: border-color 0.15s, background 0.15s;
    background: #1d1d1d;
}
.pro-plan-option input[type="radio"]:checked + .pro-plan-card {
    border-color: #46a5ce;
    background: rgba(70, 165, 206, 0.08);
}

/* Visible radio circle — empty when unchecked, accent fill + check when checked.
   Uses ::after for the inner dot/check so the parent .pro-plan-radio stays a
   simple ring. */
.pro-plan-radio {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: 2px solid #555;
    border-radius: 50%;
    background: #1a1a1a;
    position: relative;
    transition: border-color 0.15s, background 0.15s;
}
.pro-plan-option input[type="radio"]:checked + .pro-plan-card .pro-plan-radio {
    border-color: #46a5ce;
    background: #46a5ce;
}
.pro-plan-option input[type="radio"]:checked + .pro-plan-card .pro-plan-radio::after {
    content: '';
    position: absolute;
    /* Visual centering nudges (May 2026):
       left: 7px shifts the checkmark ~2px right from the geometric center.
       top:  3px nudges it ~1px down for optical centering.
       The CSS-only check (rotated rectangle with bottom+right borders) has
       optical weight pulling slightly down-left, so geometric center looks
       off. Tweak `left` / `top` to fine-tune (each ±1px). */
    left: 7px; top: 3px;
    width: 6px; height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Inline price label: "$9.99" big + "/Monthly" smaller, both on one line */
.pro-plan-label {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}
.pro-plan-price {
    font-size: 1.55rem;
    font-weight: 800;
    color: #efefef;
    letter-spacing: -0.5px;
}
.pro-plan-period {
    font-size: 1rem;
    font-weight: 500;
    color: #aaa;
    margin-left: 2px;
}

/* Click-through terms note (May 2026 — replaces the checkbox pattern). Sits
   directly under the Purchase button as small grey text. Cal ARL §17602:
   "By clicking Purchase, you agree to ... recurring billing" provides the
   disclosure + affirmative-consent trigger in one. */
.pro-terms-note {
    font-size: 0.74rem;
    color: #888;
    line-height: 1.55;
    text-align: center;
    margin: 14px 0 0;
}
.pro-terms-note a {
    color: #888;
    text-decoration: underline;
}
.pro-terms-note a:hover { color: #46a5ce; }

/* ── Disclosure text ─────────────────────────────────────────────────────── */
.pro-disclosure {
    font-size: 0.78rem;
    color: #aaa;
    line-height: 1.5;
    margin: 0 0 16px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border-left: 3px solid #46a5ce;
}

/* ── Consent checkbox ────────────────────────────────────────────────────── */
.pro-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 18px;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #ccc;
}
.pro-consent input[type="checkbox"] {
    margin: 2px 0 0 0;
    width: 18px; height: 18px;
    accent-color: #46a5ce;
    cursor: pointer;
    flex-shrink: 0;
}
.pro-consent a {
    color: #46a5ce;
    text-decoration: underline;
}
.pro-consent a:hover { color: #6cb5d6; }

/* ── Compact consent (May 2026: CapCut-style placement BELOW the Purchase button) ──
   Sits under the Purchase button as a small one-liner. Combines consent + recurring-
   billing disclosure into the checkbox text so Cal ARL §17602 stays intact even
   without the separate disclosure paragraph above. */
.pro-consent.pro-consent-compact {
    margin: 12px 0 0 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: #888;
    justify-content: center;
    text-align: left;
}
.pro-consent.pro-consent-compact input[type="checkbox"] {
    width: 14px; height: 14px;
    margin-top: 1px;
}

/* ── Pay button (May 2026: cyan→purple gradient matching .btn-get-pro) ───── */
.pro-pay-btn {
    display: block;
    width: 100%;
    background: linear-gradient(90deg, #46a5ce 0%, #a378e8 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 18px 16px;          /* taller — CapCut-style prominent CTA */
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s, opacity 0.15s, transform 0.05s;
    text-shadow: 0 1px 1px rgba(0,0,0,0.18);
    letter-spacing: 0.2px;
}
.pro-pay-btn:hover:not(:disabled) { filter: brightness(1.06); }
.pro-pay-btn:active:not(:disabled) { transform: translateY(1px); }
.pro-pay-btn:disabled {
    background: #444;
    color: #888;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ── Get Pro header button (planner subheader-nav, added May 2026) ──────── */
/* Cyan→purple gradient matching .pro-pay-btn for visual continuity from
   header CTA to modal CTA. NO shine animation per design decision — the
   gradient itself supplies the visual energy without becoming wallpaper
   noise in a daily-use app. Hidden until account.js fires
   updateAccountWidgetForEntitlement with entitlement.is_pro === false. */
/* 3-column flex layout in .subheader-nav (May 2026). The base .subheader-nav
   rule lives in styles.css with display:flex and justify-content:center —
   we override the alignment to space-between so the left spacer, center
   group, and right column form three balanced regions. Spacer and right
   column have equal flex:1, so the center column stays visually centered
   regardless of right-side content. */
/* The .subheader-nav bar keeps its base `justify-content: center` (styles.css)
   so it centres the inner wrapper. The wrapper does the 3-column space-between
   layout, capped to --roof-content-width so the Get Pro button lines up with the
   grid's right edge on wide desktop (same strategy as .header-inner). */
.subheader-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: var(--roof-content-width);
    margin-inline: auto;
}
.subheader-nav-spacer,
.subheader-nav-right {
    flex: 1 1 0;       /* equal flex weight = symmetric balance around center */
    display: flex;
    align-items: center;
}
.subheader-nav-right {
    justify-content: flex-end;
    /* No padding — the wrapper is already capped to the grid box, so Get Pro's
       right edge sits exactly on the grid edge, matching REFLECT (score strip is
       padding-inline:0) and the avatar (header-inner) above and below it. */
    padding-right: 0;
}
.subheader-nav-center {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;            /* matches the existing .subheader-nav gap */
}

.btn-get-pro {
    display: inline-flex;
    align-items: center;
    /* Single-line guarantee — "Get Pro" must never wrap onto two rows.
       Without this, narrow right-column states (mobile, or any layout that
       crunches .subheader-nav-right) split "Get" and "Pro" onto separate lines. */
    white-space: nowrap;
    background: linear-gradient(90deg, #46a5ce 0%, #a378e8 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    /* Explicit height matches .nav-icon-button (30px) so Get Pro lines up
       with the back/forward arrow buttons in the subheader row. Vertical
       padding stripped — height handles the box, padding is horizontal-only. */
    height: 30px;
    padding: 0 18px;
    font-family: inherit;
    /* Font-size matches .subheader-date (0.85rem) so "Get Pro" reads at the
       same visual weight as the "Mon, May 25" date label sitting next to it. */
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: filter 0.15s, transform 0.05s;
    text-shadow: 0 1px 1px rgba(0,0,0,0.18);
    box-shadow: 0 2px 8px rgba(70,165,206,0.25);
}
.btn-get-pro:hover { filter: brightness(1.08); }
.btn-get-pro:active { transform: translateY(1px); }
.btn-get-pro[hidden] { display: none; }
@media (max-width: 600px) {
    /* Mobile: keep button height aligned with .nav-icon-button (30px on mobile too),
       text matches mobile .subheader-date (0.78rem). */
    .btn-get-pro { height: 30px; padding: 0 13px; font-size: 0.78rem; }
    .subheader-nav-right { padding-right: 4px; }
}

/* ── Mobile score-strip Get Pro (June 2026) ──────────────────────────────────
   On phones the date row merges onto the header, so the date-row Get Pro is
   hidden there. Instead, non-pro users get a Get Pro pill in the score strip,
   standing in for the COACH + REFLECT quick buttons (both still in the hamburger
   menu). This `.qa-get-pro` button is a second instance — the desktop Get Pro
   stays in the date row. Hidden by default; only shown at ≤600px for non-pro. */
.qa-get-pro {
    display: none;          /* desktop + pro users: hidden (see media query below) */
    /* Fixed 40px pill (matches the desktop Get Pro) rather than stretching to the
       taller action-button height. The parent's align-items:center keeps it
       vertically centred in the row. */
    height: 30px;
    border-radius:8px;
}

@media (max-width: 600px) {
    /* Non-pro: swap COACH + REFLECT for the Get Pro pill in the score strip. */
    body:not(.mb24-is-pro) #qa-coach-btn,
    body:not(.mb24-is-pro) #qa-reflect-btn { display: none; }
    body:not(.mb24-is-pro) .qa-get-pro { display: inline-flex; }
}

/* ── Modal two-column layout (May 2026 — benefits sidebar) ───────────────── */
/* Inspired by CapCut's "Join Pro" upsell. Desktop: benefits left, checkout
   right. Mobile: benefits stack above checkout. Semi-transparent accent
   panel on benefits side gives the modal a richer feel without changing
   the existing checkout flow. */

/* Box-level overrides when the two-column grid is present. The original
   .pro-upgrade-box has its own padding + 460px max-width — both wrong for
   the two-column layout. We strip the padding (columns own their padding)
   and widen the max-width to 720px so columns aren't cramped. */
.pro-upgrade-box:has(.pro-upgrade-grid) {
    padding: 0;
    max-width: 940px;       /* widened May 2026 — fits subtitle on one line + CapCut breathing room */
    overflow: hidden;       /* keeps inner column backgrounds inside the rounded border */
}

.pro-upgrade-grid {
    display: grid;
    grid-template-columns: 1fr 1.7fr;   /* shifted weight to right column so the
                                           "Accessible across…" subtitle fits one
                                           line on desktop */
    gap: 0;
    align-items: stretch;
}
.pro-upgrade-benefits {
    padding: 40px 32px;      /* widened May 2026 — more breathing room */
    background: linear-gradient(160deg, rgba(70,165,206,0.18) 0%, rgba(163,120,232,0.16) 100%);
    border-right: 1px solid rgba(255,255,255,0.06);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;   /* top-aligned to match right column's
                                       "Choose plan" header height */
}
.pro-upgrade-benefits-eyebrow {
    /* DEPRECATED May 24 2026 — replaced by .pro-upgrade-benefits-title +
       .pro-upgrade-benefits-subtitle. Kept for now in case any other
       template references it. */
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 24px;
    color: #fff;
    line-height: 1.2;
}

/* May 24 2026 — new title + subtitle pattern. Title leads with brand name +
   accent-colored "Pro"; subtitle is the value-prop one-liner; footer is the
   small grey "Accessible across…" note at the bottom of the column. */
.pro-upgrade-benefits-title {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0 0 6px;
    color: #fff;
    line-height: 1.2;
}
.pro-upgrade-benefits-title-accent {
    color: #46a5ce;       /* matches --accent in the rest of the site */
}
.pro-upgrade-benefits-subtitle {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.4;
    margin: 0 0 22px;
}
.pro-upgrade-benefits-footer {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}
/* MyBest24 logo (icon32.png) used in the "Join [logo] Pro" eyebrow.
   Sized to scale with the 1.7rem eyebrow (May 2026). Pixel-art source —
   keep image-rendering: pixelated. Tightened margin so "Join" and "Pro"
   read as one phrase rather than three separate elements. */
.pro-upgrade-logo {
    display: inline-block;
    width: 26px; height: 26px;
    margin: 0 4px;              /* 2px tighter on each side */
    vertical-align: -5px;       /* nudges optical center onto text baseline */
    image-rendering: pixelated;
}
.pro-upgrade-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pro-upgrade-benefits-list li {
    position: relative;
    padding-left: 22px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: rgba(255,255,255,0.92);
}
.pro-upgrade-benefits-list li::before {
    content: '✓';
    position: absolute;
    left: 0; top: 0;
    color: #46a5ce;
    font-weight: 700;
    font-size: 0.95rem;
}
.pro-upgrade-checkout {
    padding: 40px 36px;     /* widened May 2026 — more breathing room */
    overflow-y: auto;
}

/* User info row (May 2026, CapCut pattern): avatar + display name + manage-
   auto-renewal link at top of the checkout column. Tells the user "you are
   signed in as X" before purchase AND surfaces the cancel/manage path in
   one consistent place. */
.pro-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}
.pro-user-avatar {
    /* 30px = 20% reduction from prior 38px (per user feedback) — quieter
       presence, still recognizable. */
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #46a5ce;
    color: #fff;
    font-weight: 700;
    font-size: 0.74rem;       /* scaled down to match the smaller circle */
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    text-transform: uppercase;
}
.pro-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pro-user-text {
    display: flex;
    flex-direction: column;
    gap: 1px;             /* tight stack — name + tiny link directly below */
    min-width: 0;
}
.pro-user-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: #efefef;
    line-height: 1.2;
}
/* "Manage auto-renewal" link — sits directly under the name, smaller and
   lighter so it doesn't compete visually with the Purchase CTA below. Uses
   the accent color at reduced opacity per user request: present but quiet. */
.pro-user-manage-link {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(70, 165, 206, 0.65);     /* accent at 65% opacity */
    cursor: pointer;
    text-align: left;
    line-height: 1.2;
    transition: color 0.15s;
}
.pro-user-manage-link:hover {
    color: rgba(70, 165, 206, 0.95);
    text-decoration: underline;
}

/* ── Manage auto-renewal sub-view ──────────────────────────────────────────
   Replaces .pro-upgrade-checkout-main content when "Manage auto-renewal" is
   clicked. Back button returns to main view; modal × still closes whole modal. */
.pro-manage-view[hidden] { display: none; }
.pro-manage-view {
    display: flex;
    flex-direction: column;
    min-height: 380px;       /* keeps the empty-state from making the modal
                                jump to a tiny height — matches roughly the
                                height of the populated checkout view */
}
.pro-manage-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.pro-manage-back {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #efefef;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.pro-manage-back:hover {
    background: rgba(255, 255, 255, 0.12);
}
.pro-manage-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #efefef;
    margin: 0;
}
.pro-manage-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    text-align: center;
    font-size: 0.95rem;
    padding: 32px 0;
}
.pro-manage-body.has-sub {
    /* Layout overrides when an active subscription is being shown — left-
       align content instead of centering the empty-state. */
    align-items: stretch;
    text-align: left;
    color: #efefef;
    padding: 0;
}
.pro-manage-sub-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 16px;
    width: 100%;
}
.pro-manage-sub-plan {
    font-size: 1rem;
    font-weight: 700;
    color: #efefef;
    margin: 0 0 4px;
}
.pro-manage-sub-meta {
    font-size: 0.85rem;
    color: #aaa;
    line-height: 1.5;
    margin: 0;
}
.pro-manage-cancel-btn {
    background: none;
    border: 1px solid rgba(255, 107, 107, 0.5);
    color: #ff8585;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    width: 100%;
}
.pro-manage-cancel-btn:hover:not(:disabled) {
    background: rgba(255, 107, 107, 0.08);
    border-color: rgba(255, 107, 107, 0.8);
    color: #ffb0b0;
}
.pro-manage-cancel-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pro-manage-status-msg {
    font-size: 0.88rem;
    color: #88c5a8;          /* soft green — confirmation tone */
    margin: 12px 0 0;
    text-align: center;
}
.pro-manage-footer {
    margin-top: auto;
    padding-top: 24px;
    font-size: 0.78rem;
    color: #888;
    text-align: center;
}
.pro-manage-footer a {
    color: #46a5ce;
    text-decoration: none;
}
.pro-manage-footer a:hover { text-decoration: underline; }
.pro-manage-footer-sep {
    margin: 0 8px;
    opacity: 0.5;
}
/* Generous gap between plan options and Purchase button — gives the modal
   the "expansive" CapCut breathing room rather than a cramped tight stack.
   Per user feedback May 2026: ~80px total whitespace before the CTA. */
.pro-upgrade-checkout .pro-pay-btn {
    margin-top: 80px;
}
@media (max-width: 640px) {
    .pro-upgrade-grid {
        grid-template-columns: 1fr;
    }
    .pro-upgrade-benefits {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        padding: 18px 22px;
    }
    .pro-upgrade-benefits-list {
        gap: 6px;
    }
    .pro-upgrade-benefits-list li {
        font-size: 0.84rem;
    }
    .pro-upgrade-checkout {
        padding: 22px;
    }
    /* Mobile: tighter gap above the Purchase button. Desktop's 80px breathing
       room becomes 18px on mobile (≈ 1.5× the 12px plan-card gap) per CapCut's
       mobile sheet. Keeps the CTA in thumb reach without scrolling. */
    .pro-upgrade-checkout .pro-pay-btn {
        margin-top: 18px;
    }
}

/* ── Error display ───────────────────────────────────────────────────────── */
.pro-pay-error {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(220, 50, 50, 0.12);
    border: 1px solid rgba(220, 50, 50, 0.4);
    border-radius: 8px;
    color: #ff8888;
    font-size: 0.85rem;
    line-height: 1.4;
}
.pro-pay-error.hidden { display: none; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .pro-upgrade-box {
        padding: 24px 20px 20px;
        border-radius: 12px;
    }
    .pro-upgrade-title { font-size: 1.2rem; }
    .pro-plan-card { padding: 12px 8px; }
    .pro-plan-price { font-size: 1rem; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pro-upgrade-close,
    .pro-plan-card,
    .pro-pay-btn { transition: none; }
}

/* ============================================================================
 * Stripe-return overlay (D5 Step 2)
 *
 * Shown when the user lands back on /app/?stripe_return=success after Checkout.
 * Polls /api/planner/entitlement.php until is_pro flips, then transitions to
 * a success state and auto-closes. Also used for the cancel + timeout paths.
 *
 * Sits on top of the regular pro-upgrade-modal (z-index higher), so even if
 * both somehow show at once the return overlay is dominant.
 * ========================================================================= */
.pro-return-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 20px;
}
.pro-return-overlay.modal-hidden { display: none; }

.pro-return-box {
    background: #1a1a1a;
    color: #efefef;
    border-radius: 16px;
    padding: 36px 32px 28px;
    text-align: center;
    max-width: 360px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.pro-return-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 18px;
    border: 3px solid rgba(70, 165, 206, 0.2);
    border-top-color: #46a5ce;
    border-radius: 50%;
    animation: pro-return-spin 0.9s linear infinite;
}

@keyframes pro-return-spin {
    to { transform: rotate(360deg); }
}

.pro-return-message {
    font-size: 1rem;
    line-height: 1.45;
    color: #efefef;
    margin: 0 0 4px;
}

.pro-return-close {
    margin-top: 16px;
    background: #46a5ce;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.pro-return-close:hover { background: #3a92b8; }

@media (prefers-reduced-motion: reduce) {
    .pro-return-spinner {
        animation: none;
        border-top-color: rgba(70, 165, 206, 0.5);
    }
    .pro-return-close { transition: none; }
}

/* ============================================================================
 * Manage Subscription modal (D8b)
 *
 * Reuses .pro-upgrade-box, .pro-upgrade-close, .pro-upgrade-title from the
 * upgrade modal — same visual language. Adds the manage-specific row layout
 * (plan / renewal / status), scheduled-cancel status block, the destructive
 * Cancel button styling, and the success/error result panel.
 * ========================================================================= */

.manage-sub-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.manage-sub-row:last-of-type { border-bottom: none; }

.manage-sub-label {
    color: #999;
    font-size: 0.85rem;
}
.manage-sub-value {
    color: #efefef;
    font-size: 0.92rem;
    font-weight: 600;
    text-transform: capitalize;
}

/* Status block shown when the user already scheduled an at-period-end cancel. */
.manage-sub-status {
    padding: 14px;
    background: rgba(70, 165, 206, 0.08);
    border-left: 3px solid #46a5ce;
    border-radius: 4px;
    color: #efefef;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 14px;
}
.manage-sub-note {
    font-size: 0.82rem;
    color: #aaa;
    line-height: 1.5;
    margin: 0;
}
.manage-sub-empty {
    color: #aaa;
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 6px 0 0;
}

/* Destructive cancel button — outline + red text, fills on hover.
   Distinct from .pro-pay-btn (filled accent) so users immediately register
   the action as different/serious. */
.manage-cancel-btn {
    display: block;
    width: 100%;
    margin-top: 22px;
    padding: 12px 16px;
    background: transparent;
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.5);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
    font-family: inherit;
}
.manage-cancel-btn:hover:not(:disabled) {
    background: rgba(255, 107, 107, 0.1);
    border-color: #ff6b6b;
}
.manage-cancel-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Result panel — shared between success (info-tone accent) and error (red).
   Hidden by default; JS toggles .hidden and .error. */
.manage-sub-result {
    margin-top: 16px;
    padding: 12px 14px;
    background: rgba(70, 165, 206, 0.08);
    border-left: 3px solid #46a5ce;
    border-radius: 4px;
    color: #ccc;
    font-size: 0.85rem;
    line-height: 1.5;
}
.manage-sub-result.error {
    background: rgba(255, 107, 107, 0.08);
    border-left-color: #ff6b6b;
    color: #ff8888;
}
.manage-sub-result.hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
    .manage-cancel-btn { transition: none; }
}