.billing-page { max-width: 960px; margin-inline: auto; }
#billingPanel { display: grid; gap: 24px; }
[hidden], #billingPanel[hidden] { display: none !important; }
.billing-page .document-card { min-width: 0; }
#billingForm { display: grid; gap: 16px; }
#billingPlan { width: 100%; padding: 14px; border: 1px solid #b9ccc7; border-radius: 12px; background: white; font: inherit; }
.payment-choice { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
.payment-choice legend { margin-bottom: 10px; font-weight: 800; }
.payment-option { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 2px solid #d5e2de; border-radius: 14px; cursor: pointer; text-transform: none; }
.payment-option:has(input:checked) { border-color: #078b72; background: #effaf6; }
.payment-option input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 3px; accent-color: #064c48; }
.payment-option span { display: grid; gap: 3px; }
.payment-option small { color: #526760; font-size: .95rem; line-height: 1.45; }
.payment-methods { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; border-radius: 14px; background: #f1f6f4; }
.payment-methods strong, .payment-methods small { flex-basis: 100%; }
.payment-methods span { padding: 6px 10px; border-radius: 999px; background: white; border: 1px solid #d5e2de; font-size: .9rem; }
.payment-methods small { color: #526760; line-height: 1.5; }
.billing-consent { display: flex; align-items: flex-start; gap: 12px; line-height: 1.6; }
.billing-consent input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 3px; accent-color: #064c48; }
.billing-page .billing-consent span { font: inherit; text-transform: none; color: inherit; }
#paymentHistory article { padding-block: 16px; border-bottom: 1px solid #dce6e1; }
#paymentHistory small { display: block; overflow-wrap: anywhere; margin-top: 6px; }
#cancelDialog { max-width: min(520px, calc(100vw - 32px)); border: 0; border-radius: 20px; padding: 28px; }
#cancelDialog::backdrop { background: #001d1c99; }
.billing-page button:disabled { opacity: .6; cursor: wait; }
.billing-page .error-note { color: #a52626; }
.billing-page .success-note { color: #176347; }
@media (max-width: 600px) { .billing-page .hero-actions { display: grid; } }
