/* lme.css - the parts of the Early Renewal checkout that dantrainme.com's vault.css (loaded first) does not have: code box, add-on, summary,
   buyer form, Whop mount, buttons. Same tokens. House rule: no text under 16px. */

.lme-sub { margin-top: 0.5rem; font-size: 1.0625rem; color: var(--navy-80); }
.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); }
.vault-toggle__price-sub { font-size: 1rem; }

/* code */
.lme-code { margin-top: 1.25rem; }
.lme-code__row { display: flex; gap: 0.5rem; }
.lme-code__row input { flex: 1 1 auto; min-width: 0; }
.lme-btn-ghost { flex: 0 0 auto; padding: 0 1.25rem; font: 700 1rem var(--body); color: var(--navy); background: var(--white); border: 1.5px solid var(--navy); border-radius: 10px; cursor: pointer; }
.lme-btn-ghost:hover { background: var(--cream); }
.lme-code__msg { margin-top: 0.4rem; font-size: 1rem; line-height: 1.4; min-height: 1.4em; }
.lme-code__msg.is-ok { color: #1f7a4d; font-weight: 700; }
.lme-code__msg.is-bad { color: #b3261e; }

/* add-on */
.lme-addon { display: flex; gap: 0.85rem; align-items: flex-start; margin-top: 1.25rem; padding: 1rem 1.1rem; background: var(--cream); border: 1.5px solid var(--navy-15); border-radius: 14px; cursor: pointer; }
.lme-addon.is-on { background: var(--white); border-color: var(--teal-deep); box-shadow: 0 0 0 1px var(--teal-deep); }
.lme-addon input { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; margin-top: 0.15rem; accent-color: var(--teal-deep); }
.lme-addon__name { display: block; font-weight: 800; font-size: 1.0625rem; }
.lme-addon__price { display: block; font-weight: 700; font-size: 1rem; color: var(--teal-deep); }
.lme-addon__note { display: block; margin-top: 0.15rem; font-size: 1rem; line-height: 1.4; color: var(--navy-80); }

/* summary */
.lme-sum { margin-top: 1.5rem; 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 { margin-top: 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--navy-15); font-weight: 800; font-size: 1.25rem; }
.lme-sum__later { margin-top: 0.35rem; font-size: 1rem; color: var(--navy-80); }

/* form */
.lme-form { margin-top: 1.5rem; }
.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, .lme-code__row input { 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, .lme-code__row input: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: var(--teal-deep); border: 0; border-radius: 12px; cursor: pointer; }
.lme-cta:hover:not(:disabled) { background: #007c90; }
.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); }

/* code applied: the old price stays visible, crossed out, next to the new one */
.lme-was { margin-right: 0.35rem; font-weight: 700; font-size: 1rem; color: var(--navy-55); text-decoration: line-through; text-decoration-thickness: 2px; }