/* Super admin panel, Billing and the public payment page. */

.fx-code {
    font-family: var(--fx-display, monospace);
    letter-spacing: .08em;
    color: var(--fx-cyan, #22e6ff);
    background: rgba(34, 230, 255, .08);
    padding: .1rem .4rem;
    border-radius: 6px;
}

/* Plan picker on the Billing page: radio inputs styled as cards. */
.fx-plan-option {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    height: 100%;
    padding: .8rem .9rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.fx-plan-option:hover { border-color: rgba(139, 92, 246, .6); }
.btn-check:checked + .fx-plan-option {
    border-color: var(--fx-violet, #8b5cf6);
    background: rgba(139, 92, 246, .14);
    box-shadow: 0 0 0 1px var(--fx-violet, #8b5cf6) inset;
}
.btn-check:focus-visible + .fx-plan-option { outline: 2px solid var(--fx-cyan, #22e6ff); outline-offset: 2px; }

/* Public payment page */
.fx-pay-card { max-width: 460px; }
.fx-pay-card h1 { font-size: 1.4rem; }
.fx-pay-amount {
    font-family: var(--fx-display, sans-serif);
    font-size: clamp(2rem, 9vw, 2.8rem);
    font-weight: 700;
    letter-spacing: .04em;
}
.fx-pay-card .fx-kv { font-size: .92rem; }

/* Tell the super admin panel apart from a gym's panel at a glance. */
.fx-super .fx-sidebar { border-right: 1px solid rgba(251, 191, 36, .25); }
.fx-super .fx-brand small { color: #fbbf24; letter-spacing: .14em; text-transform: uppercase; }