/* ===========================================================================
   billing-styles.css — Plans & Tokens
   =========================================================================== */

.bl-body {
    background: radial-gradient(1100px 700px at 50% 0%, #0a1124 0%, #05070d 55%, #030408 100%);
    color: var(--text);
    font-family: var(--font-body, 'Inter', sans-serif);
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

.bl-float-back {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top)); left: calc(14px + env(safe-area-inset-left));
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(10, 12, 18, 0.65);
    color: var(--text-secondary);
    font-size: 1.1rem;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all var(--ease-snappy, 0.15s ease);
}
.bl-float-back:hover { border-color: var(--accent); color: var(--accent-light); }

.bl-page { max-width: 920px; margin: 0 auto; padding: calc(70px + env(safe-area-inset-top)) 22px calc(80px + env(safe-area-inset-bottom)); }

.bl-header { text-align: center; margin-bottom: 36px; }
.bl-header h1 {
    font-family: var(--font-brand, 'Space Grotesk', sans-serif);
    font-size: 2.1rem;
    font-weight: 600;
    margin: 0 0 10px;
}
.bl-header p { color: var(--text-muted); font-size: 0.95rem; max-width: 560px; margin: 0 auto 16px; line-height: 1.6; }
.bl-status {
    display: inline-block;
    font-size: 0.84rem;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 999px;
    padding: 7px 16px;
}
.bl-status b { color: var(--accent-light); }

/* Tiers */
.bl-tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 34px;
}
@media (max-width: 980px) { .bl-tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bl-tiers { grid-template-columns: 1fr; } }
.bl-tier {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    transition: all var(--ease-default, 0.2s ease);
}
.bl-tier:hover { border-color: var(--border-hover); transform: translateY(-3px); }
.bl-tier-featured { border-color: var(--accent); box-shadow: 0 0 40px rgba(91, 155, 213, 0.15); }
.bl-tier.current { border-color: var(--success); }
.bl-flag {
    position: absolute;
    top: -11px; left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 999px;
    padding: 4px 14px;
    white-space: nowrap;
}
.bl-tier h2 {
    font-family: var(--font-brand, 'Space Grotesk', sans-serif);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 6px;
}
.bl-price { font-size: 1.9rem; font-weight: 700; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.bl-price span { font-size: 0.85rem; font-weight: 400; color: var(--text-muted); }
.bl-tier ul { list-style: none; margin: 0 0 20px; padding: 0; flex: 1; }
.bl-tier li {
    position: relative;
    padding: 5px 0 5px 22px;
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.bl-tier li::before {
    content: '';
    position: absolute;
    left: 4px; top: 12px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.bl-btn {
    width: 100%;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 11px;
    cursor: pointer;
    transition: all var(--ease-snappy, 0.15s ease);
}
.bl-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-light); }
.bl-btn:disabled { opacity: 0.5; cursor: default; }
.bl-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.bl-btn-primary:hover:not(:disabled) { background: var(--accent-light); color: #fff; }

/* Packs */
.bl-packs { margin-bottom: 34px; text-align: center; }
.bl-packs h3, .bl-costs h3 {
    font-family: var(--font-brand, 'Space Grotesk', sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 14px;
}
.bl-packs-note {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffd28a;
    border: 1px solid rgba(255, 210, 138, 0.4);
    border-radius: 999px;
    padding: 2px 10px;
    margin-left: 8px;
    vertical-align: middle;
}
.bl-pack-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.bl-pack {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.86rem;
    padding: 12px 22px;
    cursor: pointer;
    transition: all var(--ease-snappy, 0.15s ease);
}
.bl-pack strong { color: var(--text); font-variant-numeric: tabular-nums; }
.bl-pack:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-light); }
.bl-pack:disabled { opacity: 0.45; cursor: default; }

/* Cost table */
.bl-costs { margin-bottom: 30px; }
.bl-cost-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
}
@media (max-width: 700px) { .bl-cost-grid { grid-template-columns: 1fr; } }
.bl-cost-grid div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.84rem;
    padding: 5px 0;
    border-bottom: 1px dashed var(--border);
}
.bl-cost-grid div:last-child, .bl-cost-grid div:nth-last-child(2) { border-bottom: none; }
.bl-cost-grid span { color: var(--text-muted); }
.bl-cost-grid b { color: var(--text-secondary); font-weight: 600; white-space: nowrap; }

.bl-manage { text-align: center; }
.bl-manage .bl-btn { width: auto; padding: 10px 26px; }
.bl-disabled-note { text-align: center; color: var(--text-faint); font-size: 0.82rem; font-style: italic; }


.bl-rate {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-light);
    margin: -8px 0 14px;
    font-variant-numeric: tabular-nums;
}
.bl-tier-top { border-color: rgba(255, 210, 138, 0.45); }
.bl-tier-top:hover { border-color: rgba(255, 210, 138, 0.7); }
.bl-tier-top h2 { color: #ffd28a; }
.bl-pack-rates {
    margin: 12px 0 0;
    font-size: 0.74rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}