/* checkout.css - the buyer form, Whop Elements mount and pay button for the two renewal cart pages (added 2026-10-21 when the pages moved off
   Whop's old embed). Same tokens as vault.css (loaded first). Copied from Legacy Maker Early Renewal's lme.css, minus its code box / add-on /
   crossed-out prices. House rule: no text under 16px. */

.lme-h2 { margin: 1.5rem 0 0.75rem; font-weight: 800; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy-80); }

/* summary: what is charged today (and, on /2-payments/, what follows) */
.lme-sum { margin-top: 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--navy-15); border-radius: 14px; font-size: 1.0625rem; }
.lme-sum__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; font-variant-numeric: tabular-nums; }
.lme-sum__row--due { font-weight: 800; font-size: 1.25rem; }
.lme-sum__row > span:first-child { flex: 1 1 auto; min-width: 0; }
.lme-sum__row > span:last-child { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.lme-sum__later { margin-top: 0.35rem; font-size: 1rem; color: var(--navy-80); }

/* form */
.lme-form { margin-top: 1.25rem; }
.lme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.lme-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.lme-field--full { grid-column: 1 / -1; }
.lme-field label { font-weight: 700; font-size: 1rem; }
.lme-field input, .lme-field select { width: 100%; padding: 0.75rem 0.85rem; font: 400 1rem var(--body); color: var(--navy); background: var(--white); border: 1.5px solid var(--navy-15); border-radius: 10px; }
.lme-field input:focus, .lme-field select:focus { border-color: var(--teal-deep); outline: 2px solid var(--teal-deep); outline-offset: 0; }
@media (max-width: 520px) { .lme-grid { grid-template-columns: 1fr; } }

.lme-pay { margin-top: 1.25rem; }
#whop-payment-element { min-height: 120px; }
#whop-branding { margin-top: 0.5rem; }
.lme-terms { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 1.25rem; font-size: 1rem; line-height: 1.45; }
.lme-terms input { flex: 0 0 auto; width: 1.3rem; height: 1.3rem; margin-top: 0.1rem; accent-color: var(--teal-deep); }
#pay-error { display: none; margin-top: 1rem; padding: 0.75rem 1rem; font-size: 1rem; line-height: 1.45; color: #8a1c14; background: #fff5f4; border: 1px solid #e3b4b0; border-radius: 10px; }
#pay-error.show { display: block; }
.lme-cta { display: block; width: 100%; margin-top: 1.25rem; padding: 1rem 1.25rem; font: 800 1.1875rem var(--body); color: var(--white); background: #f88900; border: 0; border-radius: 12px; cursor: pointer; }
.lme-cta:hover:not(:disabled) { background: #e07b00; }
.lme-cta:disabled { opacity: 0.5; cursor: not-allowed; }
.lme-secure { margin-top: 0.75rem; text-align: center; font-size: 1rem; color: var(--navy-55); }

/* a [hidden] field must really disappear: display:flex on .lme-field would otherwise override the attribute */
.lme-field[hidden], .lme-sum__later[hidden] { display: none !important; }