/* ════════════════════════════════════════════════════════════════════════
   billing.css — brush for the Billing panel (zViews/zAccount/zRM/
   zUI.Billing.zolo). Opt in with zMeta.zBrush: [billing]. Builds ON the
   canonical zc-* tokens from zC_Main.css — same visual family as
   profile.css/media.css/myapps.css.
   ════════════════════════════════════════════════════════════════════════ */

.zc-billing {
    position:      relative;
    width:         100%;
    margin:        0 0 2.5rem;
    padding:       2rem 2.25rem 2.5rem;
    background:    var(--zc-surface);
    border:        1px solid rgba(255, 255, 255, 0.10);
    border-radius: calc(var(--zc-radius) + 6px);
    box-shadow:    var(--zc-shadow-hover, 0 24px 56px rgba(0, 0, 0, 0.4));
    overflow:      hidden;
    isolation:     isolate;
}
.zc-billing::before {
    content:        '';
    position:       absolute;
    inset:          -40% -10% auto -10%;
    height:         420px;
    z-index:        0;
    pointer-events: none;
    background:
        radial-gradient(50% 60% at 28% 25%, rgba(124, 58, 237, 0.22), transparent 68%),
        radial-gradient(45% 55% at 78% 10%, rgba(79, 70, 229, 0.14), transparent 70%);
}
.zc-billing > * { position: relative; z-index: 1; }

.zc-billing-header h2 {
    margin:          0;
    font-size:       clamp(1.4rem, 2.6vw, 1.8rem);
    font-weight:     800;
    letter-spacing:  -0.02em;
    background:      var(--zc-text-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color:           transparent;
}
.zc-billing-sub {
    margin:    0.35rem 0 0;
    color:     var(--text-gray);
    font-size: 0.9rem;
}

.zc-billing-plan-name {
    margin-top:     1.5rem;
    display:        inline-block;
    padding:        0.3rem 0.9rem;
    font-size:      0.8rem;
    font-weight:    800;
    letter-spacing: 0.08em;
    color:          var(--text-light);
    background:     rgba(124, 58, 237, 0.22);
    border:         1px solid rgba(196, 181, 253, 0.35);
    border-radius:  980px;
}

.zc-billing-fields {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   0.75rem;
    margin-top:            1.25rem;
}
.zc-billing-field {
    display:        flex;
    flex-direction: column;
    gap:            0.2rem;
    padding:        0.85rem 1rem;
    background:     rgba(255, 255, 255, 0.035);
    border:         1px solid rgba(255, 255, 255, 0.07);
    border-radius:  14px;
}
.zc-billing-field-label {
    margin:         0;
    color:          var(--text-gray);
    font-size:      0.68rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.zc-billing-field-value {
    margin:      0;
    color:       var(--text-light);
    font-size:   1.05rem;
    font-weight: 700;
}

.zc-billing-upsell {
    display:       block;
    margin-top:    1.5rem;
    padding:       0.85rem 1.1rem;
    color:         var(--text-light);
    font-size:     0.85rem;
    background:    rgba(124, 58, 237, 0.14);
    border:        1px solid rgba(196, 181, 253, 0.3);
    border-radius: 14px;
}

/* ── Registrar-only empty state ── */
.zc-billing-empty {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.5rem;
    padding:        2.5rem 1rem;
    margin-top:     1.5rem;
    text-align:     center;
    background:     rgba(255, 255, 255, 0.02);
    border:         1px dashed rgba(255, 255, 255, 0.12);
    border-radius:  16px;
}
.zc-billing-empty-title {
    margin:      0;
    color:       var(--text-light);
    font-weight: 700;
}
.zc-billing-empty-body {
    margin:    0;
    color:     var(--text-gray);
    font-size: 0.85rem;
    max-width: 44ch;
}

@media (max-width: 640px) {
    .zc-billing        { padding: 1.5rem 1.25rem 2rem; }
    .zc-billing-fields { grid-template-columns: 1fr; }
}