/* Subscriptions & plans — Studio skin.
   Loaded after each page's generated CSS; flattens the old glow/neon
   styling onto the site-wide navy palette (see design-tokens.css).
   Orange = Basic / general accent, blurple = Premium identity. */

/* ---------- shared ---------- */
.plan-detail-section,
.cp-page,
.subscriptions-section,
.checkout-wrapper {
    --sub-bg: #12151d;
    --sub-card: #161a26;
    --sub-raised: #1c2130;
    --sub-border: #2a2f41;
    --sub-border2: #353b52;
    --sub-text: #f2f3f7;
    --sub-body: #b0b3b8;
    --sub-muted: #8b8f9c;
    --sub-orange: #ff5c00;
    --sub-orange-soft: #ff8a3d;
    --sub-blurple: #5865f2;
    --sub-blurple-soft: #93a0ff;
}

/* ---------- plan detail pages (basic / premium / partnership) ---------- */
.plan-detail-section {
    background:
        radial-gradient(circle at center, rgba(255,255,255,0.028) 1px, transparent 1px) 0 0 / 22px 22px,
        var(--sub-bg) !important;
    padding: 4rem 0 5rem !important;
}

.plan-detail-section .plan-header h1 {
    color: var(--sub-text) !important;
    font-size: 2.1rem !important;
    letter-spacing: -0.02em !important;
    text-shadow: none !important;
    background: none !important;
    -webkit-text-fill-color: var(--sub-text) !important;
}

.plan-detail-section .plan-header p {
    color: var(--sub-muted) !important;
    font-size: 0.95rem !important;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

.plan-detail-section .plan-badge {
    display: inline-block;
    background: rgba(88, 101, 242, 0.14) !important;
    color: var(--sub-blurple-soft) !important;
    border: 1px solid rgba(88, 101, 242, 0.35) !important;
    border-radius: 999px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 0.25rem 0.75rem !important;
    box-shadow: none !important;
}

.plan-detail-section[data-plan-page="basic"] .plan-badge {
    background: rgba(255, 92, 0, 0.12) !important;
    color: var(--sub-orange-soft) !important;
    border-color: rgba(255, 92, 0, 0.3) !important;
}

.plan-detail-section .plan-currency-selector label { color: var(--sub-muted) !important; }
.plan-detail-section .plan-currency-selector select {
    background: var(--sub-card) !important;
    border: 1px solid var(--sub-border) !important;
    color: var(--sub-text) !important;
    border-radius: 8px !important;
}

.plan-detail-section .pricing-card {
    background: var(--sub-card) !important;
    border: 1px solid var(--sub-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    animation: none !important;
    transform: none !important;
}

.plan-detail-section .pricing-card.featured {
    border-color: rgba(88, 101, 242, 0.45) !important;
    box-shadow: inset 0 2px 0 var(--sub-blurple) !important;
}

.plan-detail-section .pricing-card::before,
.plan-detail-section .pricing-card::after { display: none !important; }

.plan-detail-section .option-badge,
.plan-detail-section .option-badge.popular {
    background: rgba(88, 101, 242, 0.14) !important;
    color: var(--sub-blurple-soft) !important;
    border: 1px solid rgba(88, 101, 242, 0.35) !important;
    border-radius: 999px !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    box-shadow: none !important;
}

.plan-detail-section .price-amount {
    color: var(--sub-text) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em !important;
    background: none !important;
    -webkit-text-fill-color: var(--sub-text) !important;
    text-shadow: none !important;
}

.plan-detail-section .price-period { color: var(--sub-muted) !important; }

.plan-detail-section .btn-option {
    background: var(--sub-blurple) !important;
    color: #f2f3f7 !important;
    border: 1px solid var(--sub-blurple) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: filter 0.15s ease !important;
}
.plan-detail-section .btn-option:hover { filter: brightness(1.1); transform: none !important; box-shadow: none !important; }

.plan-detail-section[data-plan-page="basic"] .btn-option {
    background: var(--sub-orange) !important;
    border-color: var(--sub-orange) !important;
    color: #100a06 !important;
}

.plan-detail-section .btn-option.btn-option-secondary {
    background: var(--sub-raised) !important;
    border: 1px solid var(--sub-border2) !important;
    color: var(--sub-text) !important;
}

.plan-detail-section .trial-inline-note { color: var(--sub-muted) !important; }

.plan-detail-section .features-section {
    background: var(--sub-card) !important;
    border: 1px solid var(--sub-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.plan-detail-section .features-section > h2,
.plan-detail-section .features-section h2 {
    color: var(--sub-text) !important;
    border-bottom: 1px solid var(--sub-border) !important;
    text-shadow: none !important;
    letter-spacing: -0.01em !important;
}

.plan-detail-section .feature-item {
    background: var(--sub-bg) !important;
    border: 1px solid var(--sub-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.plan-detail-section .feature-item:hover { border-color: var(--sub-border2) !important; transform: none !important; }
.plan-detail-section .feature-item i { color: var(--sub-orange) !important; }
.plan-detail-section .feature-item-content strong,
.plan-detail-section .feature-item-content b { color: var(--sub-text) !important; }
.plan-detail-section .feature-item-content { color: var(--sub-body) !important; }
.plan-detail-section .contact-info a { color: var(--sub-blurple-soft) !important; }

/* ---------- compare page ---------- */
.cp-page {
    background:
        radial-gradient(circle at center, rgba(255,255,255,0.028) 1px, transparent 1px) 0 0 / 22px 22px,
        var(--sub-bg) !important;
}

.cp-page .cp-header h1 {
    color: var(--sub-text) !important;
    letter-spacing: -0.02em !important;
    background: none !important;
    -webkit-text-fill-color: var(--sub-text) !important;
}
.cp-page .cp-header p { color: var(--sub-muted) !important; }
.cp-page .cp-accent {
    background: rgba(255, 92, 0, 0.1) !important;
    color: var(--sub-orange-soft) !important;
    border: 1px solid rgba(255, 92, 0, 0.28) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    text-transform: none !important;
    font-weight: 600 !important;
}
.cp-page .cp-currency-selector select {
    background: var(--sub-card) !important;
    border: 1px solid var(--sub-border) !important;
    color: var(--sub-text) !important;
    border-radius: 8px !important;
}

.cp-page .cp-card {
    background: var(--sub-card) !important;
    border: 1px solid var(--sub-border) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 2px 0 var(--sub-orange) !important;
    animation: none !important;
}
.cp-page .cp-card.premium-card {
    border-color: rgba(88, 101, 242, 0.45) !important;
    box-shadow: inset 0 2px 0 var(--sub-blurple) !important;
}
.cp-page .cp-card::before, .cp-page .cp-card::after { display: none !important; }

.cp-page .cp-badge {
    background: rgba(255, 92, 0, 0.12) !important;
    color: var(--sub-orange-soft) !important;
    border: 1px solid rgba(255, 92, 0, 0.3) !important;
    border-radius: 999px !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.08em !important;
    box-shadow: none !important;
    animation: none !important;
}
.cp-page .premium-card .cp-badge {
    background: rgba(88, 101, 242, 0.14) !important;
    color: var(--sub-blurple-soft) !important;
    border-color: rgba(88, 101, 242, 0.35) !important;
}

.cp-page .cp-plan-name { color: var(--sub-muted) !important; letter-spacing: 0.08em !important; }
.cp-page .cp-price {
    color: var(--sub-text) !important;
    font-variant-numeric: tabular-nums;
    background: none !important;
    -webkit-text-fill-color: var(--sub-text) !important;
}
.cp-page .cp-price-note { color: var(--sub-muted) !important; }
.cp-page .cp-features li { color: var(--sub-body) !important; }
.cp-page .cp-features li i.yes { color: var(--sub-orange) !important; }
.cp-page .premium-card .cp-features li i.yes { color: var(--sub-blurple-soft) !important; }
.cp-page .cp-divider { border-color: var(--sub-border) !important; }

.cp-page .cp-btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: filter 0.15s ease !important;
}
.cp-page .cp-btn.primary {
    background: var(--sub-orange) !important;
    border: 1px solid var(--sub-orange) !important;
    color: #100a06 !important;
}
.cp-page .premium-card .cp-btn.primary,
.cp-page .cp-btn.premium {
    background: var(--sub-blurple) !important;
    border: 1px solid var(--sub-blurple) !important;
    color: #f2f3f7 !important;
}
.cp-page .cp-btn.ghost {
    background: var(--sub-raised) !important;
    border: 1px solid var(--sub-border2) !important;
    color: var(--sub-text) !important;
}
.cp-page .cp-btn:hover { filter: brightness(1.1); transform: none !important; }

.cp-page .cp-table-section .cp-table-title { color: var(--sub-text) !important; }
.cp-page .cp-table-wrap {
    background: var(--sub-card) !important;
    border: 1px solid var(--sub-border) !important;
    border-radius: 12px !important;
}
.cp-page .cp-table th { color: var(--sub-muted) !important; letter-spacing: 0.08em !important; }
.cp-page .cp-table th.b1 { color: var(--sub-orange-soft) !important; }
.cp-page .cp-table th.b2 { color: var(--sub-blurple-soft) !important; }
.cp-page .cp-table td, .cp-page .cp-table .fd { color: var(--sub-body) !important; border-color: var(--sub-border) !important; }
.cp-page .cp-table .fn { color: var(--sub-text) !important; }
.cp-page .cp-table .cat-row td { color: var(--sub-muted) !important; background: var(--sub-raised) !important; letter-spacing: 0.08em !important; }
.cp-page .cp-table .ci.yes { color: var(--sub-orange) !important; }
.cp-page .cp-table td:last-child .ci.yes { color: var(--sub-blurple-soft) !important; }
.cp-page .cp-table .ci.no { color: var(--sub-muted) !important; opacity: 0.5; }

.cp-page .cp-cta h2 { color: var(--sub-text) !important; }
.cp-page .cp-cta p { color: var(--sub-muted) !important; }

/* ---------- manage subscriptions ---------- */
.subscriptions-section {
    background:
        radial-gradient(circle at center, rgba(255,255,255,0.028) 1px, transparent 1px) 0 0 / 22px 22px,
        var(--sub-bg) !important;
}
.subscriptions-section .subscriptions-header h1 { color: var(--sub-text) !important; letter-spacing: -0.02em !important; }
.subscriptions-section .subscriptions-header p { color: var(--sub-muted) !important; }
.subscriptions-section .subscription-card {
    background: var(--sub-card) !important;
    border: 1px solid var(--sub-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
.subscriptions-section .subscription-card.premium { box-shadow: inset 0 2px 0 var(--sub-blurple) !important; }
.subscriptions-section .plan-badge {
    border-radius: 999px !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.08em !important;
    box-shadow: none !important;
}
.subscriptions-section .status.active { color: #4ade80 !important; }
.subscriptions-section .status.cancelled { color: var(--sub-orange-soft) !important; }
.subscriptions-section .renewal-info, .subscriptions-section .status-details { color: var(--sub-muted) !important; }
.subscriptions-section .btn-action, .subscriptions-section .btn-upgrade {
    background: var(--sub-blurple) !important;
    border: 1px solid var(--sub-blurple) !important;
    color: #f2f3f7 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.subscriptions-section .btn-cancel {
    background: var(--sub-raised) !important;
    border: 1px solid var(--sub-border2) !important;
    color: var(--sub-body) !important;
    border-radius: 8px !important;
}
.subscriptions-section .btn-resubscribe {
    background: var(--sub-orange) !important;
    border: 1px solid var(--sub-orange) !important;
    color: #100a06 !important;
    border-radius: 8px !important;
}
.subscriptions-section .no-subscriptions {
    background: var(--sub-card) !important;
    border: 1px dashed var(--sub-border2) !important;
    border-radius: 12px !important;
    color: var(--sub-muted) !important;
}

/* ---------- checkout ---------- */
.checkout-wrapper { background: var(--sub-bg) !important; }
.checkout-wrapper .checkout-card {
    background: var(--sub-card) !important;
    border: 1px solid var(--sub-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
.checkout-wrapper .checkout-header h1,
.checkout-wrapper .checkout-header h2 { color: var(--sub-text) !important; }
.checkout-wrapper .badge {
    border-radius: 999px !important;
    box-shadow: none !important;
}
.checkout-wrapper .checkout-perks li { color: var(--sub-body) !important; }
.checkout-wrapper .checkout-order-total { color: var(--sub-text) !important; font-variant-numeric: tabular-nums; }
.checkout-wrapper .btn-subscribe {
    background: var(--sub-blurple) !important;
    border: 1px solid var(--sub-blurple) !important;
    color: #f2f3f7 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.checkout-wrapper .btn-subscribe:hover { filter: brightness(1.1); }
.checkout-wrapper .checkout-promo input {
    background: var(--sub-raised) !important;
    border: 1px solid var(--sub-border) !important;
    color: var(--sub-text) !important;
    border-radius: 8px !important;
}
.checkout-wrapper .checkout-legal, .checkout-wrapper .checkout-footer { color: var(--sub-muted) !important; }

/* the generated .cp-badge.live paints bright brand fills over the tab
   badge; keep the tab shape but mute it to the plan tint */
.cp-page .cp-badge.live {
    background: rgba(255, 92, 0, 0.16) !important;
    color: var(--sub-orange-soft) !important;
    border: 1px solid rgba(255, 92, 0, 0.3) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
}
.cp-page .premium-card .cp-badge.live {
    background: rgba(88, 101, 242, 0.18) !important;
    color: var(--sub-blurple-soft) !important;
    border-color: rgba(88, 101, 242, 0.35) !important;
}