.wms-billing-page { min-height: 100vh; background: radial-gradient(circle at top left, color-mix(in srgb, var(--wms-color-primary) 10%, transparent), transparent 32%), var(--wms-color-background); }
.wms-billing-header { width: min(100% - 2rem, 72rem); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--wms-space-4); padding-block: var(--wms-space-5); }
.wms-billing-main { width: min(100% - 2rem, 72rem); margin-inline: auto; padding-block: var(--wms-space-8); }
.wms-billing-footer { width: min(100% - 2rem, 72rem); margin-inline: auto; padding: var(--wms-space-6) 0 var(--wms-space-10); color: var(--wms-color-text-muted); text-align: center; font-size: var(--wms-font-size-sm); }
.wms-billing-checkout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--wms-space-8); align-items: start; }
.wms-billing-summary { display: grid; gap: var(--wms-space-5); position: sticky; top: var(--wms-space-5); }
.wms-billing-product { border-color: color-mix(in srgb, var(--wms-color-primary) 28%, var(--wms-color-border)); }
.wms-billing-price { display: block; color: var(--wms-color-primary); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: var(--wms-font-weight-black); line-height: 1; }
.wms-billing-payment-card { min-width: 0; box-shadow: var(--wms-shadow-xl); }
.wms-billing-brick { min-height: 20rem; }
.wms-billing-loading { align-items: center; gap: var(--wms-space-3); padding: var(--wms-space-4); margin-bottom: var(--wms-space-4); border-radius: var(--wms-radius-md); background: var(--wms-color-surface-muted); }
.wms-billing-loading:not(.wms-hidden) { display: flex; }
.wms-billing-result { width: min(100%, 42rem); margin-inline: auto; }
.wms-billing-result__icon { width: 5rem; height: 5rem; display: grid; place-items: center; margin-inline: auto; border-radius: 50%; background: color-mix(in srgb, var(--wms-color-primary) 12%, var(--wms-color-surface)); color: var(--wms-color-primary); }
.wms-billing-result__icon .wms-icon { width: 2rem; height: 2rem; }
.wms-billing-details > div { display: grid; gap: var(--wms-space-1); padding: var(--wms-space-4); border: 1px solid var(--wms-color-border); border-radius: var(--wms-radius-md); overflow-wrap: anywhere; }
.wms-billing-details span { color: var(--wms-color-text-muted); font-size: var(--wms-font-size-sm); }
.wms-billing-instructions { display: grid; gap: var(--wms-space-3); padding: var(--wms-space-5); border-radius: var(--wms-radius-lg); background: var(--wms-color-surface-muted); }
.wms-billing-qr { width: min(100%, 18rem); aspect-ratio: 1; object-fit: contain; margin-inline: auto; background: #fff; padding: var(--wms-space-3); border-radius: var(--wms-radius-md); }
.wms-copy-field { display: flex; gap: var(--wms-space-2); min-width: 0; }
.wms-copy-field .wms-input { min-width: 0; }
.wms-billing-transaction { display: grid; grid-template-columns: 1fr auto; gap: var(--wms-space-1) var(--wms-space-4); padding-bottom: var(--wms-space-3); border-bottom: 1px solid var(--wms-color-border); }
.wms-billing-transaction span:first-of-type { color: var(--wms-color-text-muted); }
.wms-description-list { display: grid; gap: var(--wms-space-3); }
.wms-description-list > div { display: grid; grid-template-columns: minmax(7rem, .45fr) 1fr; gap: var(--wms-space-3); padding-bottom: var(--wms-space-3); border-bottom: 1px solid var(--wms-color-border); }
.wms-description-list dt { color: var(--wms-color-text-muted); }
.wms-description-list dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 56rem) { .wms-billing-checkout { grid-template-columns: 1fr; } .wms-billing-summary { position: static; } }
@media (max-width: 38rem) { .wms-billing-header { align-items: flex-start; flex-direction: column; } .wms-copy-field { flex-direction: column; } .wms-description-list > div { grid-template-columns: 1fr; gap: 0; } }