/* Checkout: order summary, payment method selection and the confirm step.
   Every rule is scoped to .checkout so nothing here can leak into the rest of the app. */
.checkout-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.9fr);gap:var(--space-5);align-items:start;margin-bottom:var(--space-6)}
.checkout-main,.checkout-aside{min-width:0}
.checkout-aside{position:sticky;top:var(--space-5)}
.checkout-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-panel);padding:var(--space-5)}
.checkout-panel-title{font-family:var(--font-display);font-size:22px;letter-spacing:-.02em;margin:0 0 var(--space-4)}
.checkout-panel-head{display:flex;flex-direction:column;gap:var(--space-2)}
.checkout-split{margin:0;font-size:12px;line-height:1.6;color:var(--muted);max-width:62ch}

/* Order summary: recurring and one-time purchases are billed separately. */
.checkout-section{padding-top:var(--space-5);margin-top:var(--space-5);border-top:1px solid var(--line)}
.checkout-section:first-of-type{padding-top:0;margin-top:0;border-top:0}
.checkout-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-4)}
.checkout-kicker{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin-bottom:var(--space-1)}
.checkout-section-head h3{font-family:var(--font-display);font-size:24px;letter-spacing:-.02em;margin:0}
.checkout-tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3);color:var(--muted);white-space:nowrap}
.checkout-tag--recurring{color:var(--lime);border-color:var(--lime-40);background:var(--lime-08)}
.checkout-lines{list-style:none;margin:0;padding:0}
.checkout-line{padding:var(--space-4) 0;border-top:1px solid var(--line)}
.checkout-line:first-child{border-top:0;padding-top:0}
.checkout-line:last-child{padding-bottom:0}
.checkout-line-body{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4)}
.checkout-line-titles{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.checkout-line-titles strong{font-size:14px;color:var(--white)}
.checkout-line-titles small{font-size:11px;color:var(--muted)}
.checkout-line-rate{text-align:right;font-size:12px;color:var(--muted);white-space:nowrap}
.checkout-line-rate span{display:block;color:var(--white)}
.checkout-line-rate small{font-size:10px}
.checkout-line-amount{text-align:right;min-width:110px}
.checkout-line-amount strong{display:block;font-family:var(--font-display);font-size:20px;letter-spacing:-.01em;color:var(--white)}
.checkout-line-amount small{font-size:10px;color:var(--muted)}
.checkout-line-tools{display:flex;justify-content:flex-end;align-items:center;gap:var(--space-3);margin-top:var(--space-3)}
.checkout .checkout-quantity{width:76px}
.checkout .checkout-remove{padding:var(--space-2) var(--space-3);font-size:11px}
.checkout-tier{margin:var(--space-3) 0 0;font-size:12px;line-height:1.6;color:var(--lime)}
.checkout-hint{margin:var(--space-3) 0 0;font-size:11px;line-height:1.6;color:var(--muted)}

/* Payment method selection. */
.checkout-methods{display:grid;gap:var(--space-3)}
.checkout-method{display:flex;gap:var(--space-3);align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--elevated);padding:var(--space-4);cursor:pointer}
.checkout-method.is-selected{border-color:var(--lime);background:var(--lime-08)}
.checkout-method.is-unavailable{cursor:not-allowed;background:transparent;opacity:.8}
.checkout-method-input{-webkit-appearance:none;appearance:none;width:18px;height:18px;flex:none;margin:var(--space-1) 0 0;border:1px solid var(--line);border-radius:50%;background:var(--panel);position:relative;cursor:pointer}
.checkout-method-input:checked{border-color:var(--lime);background:var(--lime)}
.checkout-method-input:checked::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--panel)}
.checkout-method-mark{width:18px;height:18px;flex:none;margin-top:var(--space-1);border:1px solid var(--line);border-radius:50%;background:var(--panel)}
.checkout-method-body{display:flex;flex-direction:column;gap:var(--space-1);flex:1;min-width:0}
.checkout-method-name{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.checkout-method-name strong{font-size:14px;color:var(--white)}
.checkout-method-provider{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);border:1px solid var(--lime-40);border-radius:var(--radius-pill);padding:2px var(--space-2)}
.checkout-method-description{font-size:12px;line-height:1.6;color:var(--muted)}
.checkout-method-detail{font-size:11px;line-height:1.6;color:var(--muted)}
.checkout-method-reason{color:var(--warning)}
.checkout-method-state{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);white-space:nowrap;align-self:center}
.checkout-method.is-unavailable .checkout-method-state{color:var(--warning)}
.checkout-no-method{display:grid;gap:var(--space-2);border:1px solid var(--lime-40);background:var(--lime-08);border-radius:var(--radius-control);padding:var(--space-4)}
.checkout-no-method strong{font-size:13px;color:var(--white)}
.checkout-no-method p{margin:0;font-size:12px;line-height:1.6;color:var(--muted)}

/* What is due now, and what recurs. */
.checkout-totals{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--line)}
.checkout-total-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);font-size:13px}
.checkout-total-row strong{font-family:var(--font-display);font-size:22px;letter-spacing:-.01em;color:var(--white)}
.checkout-total-parts{display:grid;gap:var(--space-2);margin:var(--space-3) 0;padding:var(--space-3) 0;border-block:1px solid var(--line)}
.checkout-total-part{display:flex;justify-content:space-between;gap:var(--space-3);font-size:11px;color:var(--muted)}
.checkout-total-part strong{color:var(--white)}
.checkout-total-note{margin:var(--space-3) 0 0;font-size:11px;line-height:1.6;color:var(--muted)}
.checkout .checkout-pay{width:100%;margin-top:var(--space-4);padding:var(--space-4);font-size:13px}
.checkout-next{margin:var(--space-3) 0 0;font-size:11px;line-height:1.6;color:var(--muted)}
.checkout-alt-note{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);margin:var(--space-4) 0 0;font-size:11px;line-height:1.6;color:var(--muted)}
.checkout .checkout-alt-btn{padding:var(--space-2) var(--space-3);font-size:11px;background:transparent;border-color:var(--line);color:var(--white)}

/* The confirm step, inside the payment dialog. */
.checkout-modal{display:grid;gap:var(--space-4)}
.checkout-order{display:grid;gap:var(--space-3);border:1px solid var(--line);border-radius:var(--radius-control);background:var(--elevated);padding:var(--space-4)}
.checkout-order-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);font-size:12px;line-height:1.6;color:var(--muted)}
.checkout-order-row strong{color:var(--white);text-align:right}
.checkout-order-row--total{padding-top:var(--space-3);border-top:1px solid var(--line);font-size:13px;color:var(--white)}
.checkout-order-row--total strong{font-family:var(--font-display);font-size:20px;letter-spacing:-.01em}
.checkout-modal p{margin:0;font-size:12px;line-height:1.6}
.checkout-modal .checkbox{margin-top:0}

.checkout :focus-visible,.checkout-modal :focus-visible{outline:2px solid var(--lime);outline-offset:3px}

@media (max-width:1000px){.checkout-layout{grid-template-columns:1fr}.checkout-aside{position:static}}
@media (max-width:600px){.checkout-panel{padding:var(--space-4)}.checkout-line-body{flex-wrap:wrap}.checkout-line-rate,.checkout-line-amount{text-align:left;min-width:0}.checkout-line-tools{justify-content:flex-start}.checkout-section-head{flex-direction:column;gap:var(--space-2)}}

@media (prefers-reduced-motion:no-preference){
  .checkout-method{transition:border-color .18s ease,background .18s ease}
  .checkout-method:not(.is-unavailable):hover{border-color:var(--lime-40)}
  .checkout-method-input{transition:background .18s ease,border-color .18s ease}
}