/* File: /assets/css/billing.css
   Module: Plan & Billing - the settings panel (#billing), the plan card
   status on the dashboard, the post-checkout notice and /billing/pay/.
   Depends on portal.css for the token ladder, cards, badges and buttons; this
   file only adds what billing needs on top. Light first, dark overrides at the
   bottom under html[data-theme="dark"], same as portal.css. */

/* ==========================================================================
   1. STATUS BADGE AND LEAD
   ========================================================================== */
.ch-bill-status {
    margin: 0 0 0.9rem;
}

.ch-nl-badge.is-warn {
    color: #B45309;
    border-color: rgba(245, 158, 11, 0.45);
    background-color: rgba(245, 158, 11, 0.08);
}

.ch-nl-badge.is-warn .ch-nl-dot {
    background-color: #F59E0B;
}

.ch-bill-card .ch-security-note {
    font-size: 0.88rem;
    color: var(--ch-text-main);
    opacity: 0.86;
}

.ch-bill-card .ch-security-note strong {
    color: var(--ch-text-main);
}

/* ==========================================================================
   2. PLAN PICKER
   The radio is visually hidden but stays in the tab order, so the pair
   behaves as a native radio group for keyboard and screen reader users.
   ========================================================================== */
/* The Premium chip row (carthacker_core_premium_also) sits right above the
   plan picker; style.css gives it only a top margin, so the last row of chips
   touched the plan cards. Same 1.25rem the speed test upsell uses. */
.ch-bill-card .ch-pro-also {
    margin: 1rem 0 1.25rem;
}

.ch-bill-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.ch-bill-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border: 1.5px solid var(--ch-border);
    border-radius: 10px;
    background-color: var(--ch-bg-main);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.ch-bill-plan:hover {
    border-color: rgba(16, 185, 129, 0.55);
}

.ch-bill-plan input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.ch-bill-plan.is-active {
    border-color: var(--ch-cta);
    background-color: rgba(16, 185, 129, 0.06);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.ch-bill-plan:focus-within {
    outline: 2px solid var(--ch-cta);
    outline-offset: 2px;
}

.ch-bill-plan-name {
    font-family: 'JetBrains Mono', 'Roboto Mono', monospace;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ch-text-muted);
}

.ch-bill-plan-price {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ch-text-main);
    min-height: 1.6rem;
}

/* Until Paddle answers, the price cell reads "Price at checkout" in the
   muted size, so a slow or blocked Paddle.js never leaves an empty box. */
.ch-bill-plan-price:not(.is-live) {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ch-text-muted);
    line-height: 1.6rem;
}

.ch-bill-plan-cycle {
    font-size: 0.75rem;
    color: var(--ch-text-muted);
}

/* ==========================================================================
   3. SECONDARY ACTIONS, FINE PRINT, ACTIVATION STATE
   ========================================================================== */
.ch-bill-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0.9rem 0 0;
}

.ch-bill-link {
    appearance: none;
    background: none;
    border: 0;
    padding: 0.25rem 0;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ch-cta);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(16, 185, 129, 0.35);
    text-underline-offset: 3px;
    transition: color 0.2s, text-decoration-color 0.2s;
}

/* GeneratePress styles every button:hover / :focus / :active with a dark
   background (specificity 0,1,1). These are text links that happen to be
   <button>s, so each state resets it at 0,2,0 or they go dark on hover. */
.ch-bill-link:hover,
.ch-bill-link:focus,
.ch-bill-link:focus-visible,
.ch-bill-link:active {
    background: none;
    box-shadow: none;
    color: #059669;
    text-decoration-color: currentColor;
}

.ch-bill-link.is-loading {
    opacity: 0.6;
}

.ch-bill-card .ch-btn-auth {
    margin-top: 0.25rem;
}

.ch-bill-card .ch-btn-auth[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

.ch-bill-fine {
    margin-top: 0.85rem;
}

.ch-bill-activating {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #047857;
    background-color: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.ch-bill-activating[hidden] {
    display: none;
}

.ch-bill-activating-spin {
    flex: none;
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(16, 185, 129, 0.25);
    border-top-color: var(--ch-cta);
    border-radius: 50%;
    animation: ch-spin 0.8s linear infinite;
}

/* ==========================================================================
   4. DASHBOARD: PLAN CARD + NEUTRAL NOTICE
   ========================================================================== */
.ch-plan-status.is-warning {
    color: #B45309;
    font-weight: 700;
}

/* portal.css ships the error (red) and success (emerald) alerts. "Your
   payment went through, give it a minute" is neither, and red on a page the
   member has just paid on reads as a failure. */
.ch-portal-alert.is-info {
    color: #1E40AF;
    background-color: rgba(37, 99, 235, 0.07);
    border-color: rgba(37, 99, 235, 0.3);
}

/* ==========================================================================
   5. /billing/pay/
   ========================================================================== */
.ch-pay-view {
    display: none;
}

.ch-pay-card[data-pay-state="loading"] .ch-pay-view[data-pay-view="loading"],
.ch-pay-card[data-pay-state="done"] .ch-pay-view[data-pay-view="done"],
.ch-pay-card[data-pay-state="closed"] .ch-pay-view[data-pay-view="closed"] {
    display: block;
}

.ch-pay-view .ch-bill-activating-spin {
    margin-top: 0.75rem;
    width: 22px;
    height: 22px;
}

.ch-pay-view .ch-btn-primary {
    margin-top: 0.5rem;
}

.ch-pay-noscript {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--ch-text-muted);
}

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */
@media (max-width: 420px) {
    .ch-bill-plans {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .ch-bill-plan {
        padding: 0.8rem 0.75rem;
    }

    .ch-bill-plan-price {
        font-size: 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ch-bill-activating-spin {
        animation-duration: 2.4s;
    }
}

/* ==========================================================================
   7. DARK
   Amber 700 fails contrast on slate, so the warning tones step up a rung the
   same way portal.css does for its own amber states.
   ========================================================================== */
html[data-theme="dark"] .ch-nl-badge.is-warn {
    color: #FBBF24;
    border-color: rgba(245, 158, 11, 0.45);
    background-color: rgba(245, 158, 11, 0.12);
}

html[data-theme="dark"] .ch-bill-plan {
    background-color: #0F172A;
}

html[data-theme="dark"] .ch-bill-plan.is-active {
    background-color: rgba(16, 185, 129, 0.1);
}

html[data-theme="dark"] .ch-bill-link:hover,
html[data-theme="dark"] .ch-bill-link:focus,
html[data-theme="dark"] .ch-bill-link:focus-visible,
html[data-theme="dark"] .ch-bill-link:active {
    color: #34D399;
}

html[data-theme="dark"] .ch-bill-activating {
    color: #6EE7B7;
    background-color: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.4);
}

html[data-theme="dark"] .ch-plan-status.is-warning {
    color: #FBBF24;
}

html[data-theme="dark"] .ch-portal-alert.is-info {
    color: #93C5FD;
    background-color: rgba(37, 99, 235, 0.14);
    border-color: rgba(96, 165, 250, 0.4);
}