/* billing.css — styles specific to the billing area, built on theme.css tokens and components. */

.billing-current { margin-bottom: 1.25rem; }
.billing-current__body { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; }
.billing-current__plan { display: flex; flex-direction: column; gap: .15rem; min-width: 140px; }
.billing-current__name { font-size: 1.5rem; letter-spacing: -.02em; }
.billing-current__detail { flex: 1; min-width: 240px; }
.billing-current__detail p:last-child { margin-bottom: 0; }
.billing-current__detail .cluster { margin-top: .5rem; }

.billing-note { margin-bottom: 1.25rem; }

.billing-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.75rem 0 1rem; }
.billing-toolbar__title { margin: 0; font-size: 1.15rem; }
.billing-toolbar .segmented__item { text-decoration: none; }

.plan__actions { display: flex; flex-direction: column; gap: .5rem; }
.plan__actions form { margin: 0; }
.plan__actions p { margin: 0; }

.billing-methods { margin: 1rem 0 2rem; display: flex; flex-direction: column; gap: .25rem; }
.billing-methods p { margin: 0; }

.billing-orders { margin-top: 1rem; }
.billing-orders .table td .small { margin-left: .4rem; }

.billing-return { max-width: 620px; margin: 1rem auto; }
.billing-return__title { margin: 0; }
.billing-return .badge { align-self: flex-start; }

@media (max-width: 620px) {
    .billing-current__body { flex-direction: column; gap: .75rem; }
    .billing-toolbar { flex-direction: column; align-items: flex-start; }
    .billing-toolbar .segmented { width: 100%; }
    .billing-toolbar .segmented__item { flex: 1; text-align: center; }
}
.plan__checkout { display: flex; flex-direction: column; gap: .5rem; }
.plan__agree { margin: 0 0 .25rem; line-height: 1.4; }
.plan__agree a { text-decoration: underline; text-underline-offset: 2px; }

/* Crypto discount: line under the price and a badge on the crypto button. */
.plan__deal { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin: -.35rem 0 0; color: var(--muted); }
.plan__deal .badge { font-variant-numeric: tabular-nums; }
.btn__badge { display: inline-flex; align-items: center; margin-left: .45rem; padding: .1rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 650; line-height: 1.4; background: var(--success-soft); color: var(--success); font-variant-numeric: tabular-nums; }
.btn--primary .btn__badge { background: rgb(255 255 255 / .22); color: inherit; }

/* "How would you like to pay?" (billing/index.php, bindPayMethods in app.js) */
.pay-methods { border: 0; margin: 0 0 1.25rem; padding: 0; min-width: 0; }
.pay-methods__title { padding: 0; margin-bottom: .6rem; font-weight: 600; font-size: .95rem; }
.pay-methods__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.pay-method { position: relative; display: inline-flex; cursor: pointer; }
.pay-method[hidden] { display: none; }
.pay-method input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pay-method__label { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: .9rem; font-weight: 500; white-space: nowrap; transition: border-color .15s var(--ease), background .15s var(--ease); }
.pay-method:hover .pay-method__label { border-color: var(--border-strong); color: var(--text); }
.pay-method input:checked + .pay-method__label { border-color: var(--primary); background: var(--primary); color: #fff; }
.pay-method input:checked + .pay-method__label .btn__badge { background: rgba(255, 255, 255, .22); color: #fff; }
.pay-method input:focus-visible + .pay-method__label { outline: 2px solid var(--accent); outline-offset: 2px; }
.pay-method input:disabled + .pay-method__label { opacity: .55; cursor: not-allowed; }
.pay-methods__note { margin: .6rem 0 0; }
.pay-methods__note[hidden], .plan__bank[hidden] { display: none; }
.plan__bank { margin: 0; text-align: center; }
@media (max-width: 620px) {
    .pay-method { flex: 1 1 calc(50% - .5rem); }
    .pay-method__label { width: 100%; justify-content: center; }
}