/* =========================================================================
   V5 Checkout styles — Phase 4
   Loaded on checkout.html after shop.css (reuses palette, nav, buttons).
   ========================================================================= */

/* Ensure the hidden attribute always wins over layout display rules */
[hidden]{display:none!important}

.checkoutHead{padding-bottom:16px}
.checkoutMain{max-width:900px;padding-top:14px}
#checkoutFlow{display:grid;gap:18px}

/* step cards */
.stepCard{border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,#161519,#0d0d10);padding:28px}
.stepCard h2{font-size:clamp(22px,3vw,28px);margin:0 0 18px}

/* form */
.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.formGrid .wide{grid-column:span 2}
.custField{display:grid;gap:7px;color:#d5cfc4;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.custField small{color:#858077;font-weight:500;text-transform:none;letter-spacing:0;display:inline}
.custField input,.custField textarea{width:100%;border:1px solid #ffffff24;border-radius:10px;background:#ffffff08;color:#fff;padding:13px;font:14px Inter,Arial,sans-serif;outline:none;transition:.25s;min-height:46px}
.custField textarea{min-height:88px;resize:vertical}
.custField input:focus,.custField textarea:focus{border-color:var(--gold);background:#ffffff0d}
.custField input.invalid,.custField textarea.invalid{border-color:#ff9f9f}
.err{color:#ff9f9f;font-size:11.5px;font-weight:500;text-transform:none;letter-spacing:0}
.err:empty{display:none}
.stepCard form .btn{margin-top:20px;width:100%}
.privacyNote{display:block;color:#858077;font-size:10.5px;line-height:1.55;margin-top:12px;text-align:center}

/* review */
.reviewHead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.reviewHead h2{margin:0}
.fitBtn{padding:11px 18px;font-size:12px}
.reviewSub{font-family:Inter,Arial,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-2);margin:22px 0 4px;font-weight:600}
.crow{display:flex;gap:16px;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:#b3aea6}
.crow b{color:#fff;font-weight:600;text-align:right;max-width:70%;overflow-wrap:anywhere;white-space:pre-line}
.rline{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
.rline b{font-size:14.5px;color:#fff}
.rmeta{color:#b3aea6;font-size:13px}
.rsum{color:var(--gold-2);font-size:14px}
.trow{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;font-size:14px;color:#cfcabf;border-bottom:1px solid var(--line)}
.trow b{color:#fff;font-weight:600}
.trow.total{border-bottom:0;padding-top:14px;font-size:15px}
.trow.total b{font-family:"Playfair Display",serif;font-size:26px;color:var(--gold-2)}
.waBtn{margin-top:20px;width:100%;min-height:54px;font-size:14.5px}
.waFallback{color:#ffce9f;font-size:13px;line-height:1.6;text-align:center;margin:14px 0 0}
.waFallback a{color:var(--gold-2);text-decoration:underline;text-underline-offset:3px}

/* done */
.doneCard{text-align:center;padding:52px 26px}
.doneCard h2{margin-bottom:12px}
.doneCard p{color:#b3aea6;line-height:1.8;font-size:15px;max-width:52ch;margin:0 auto 26px}
.doneBtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* empty cart */
.cartEmptyBox{text-align:center;padding:72px 20px;border:1px dashed #ffffff24;border-radius:18px}
.cartEmptyBox p{color:#b3aea6;font-size:17px;margin:0 0 22px}

/* responsive */
@media(max-width:760px){
  .formGrid{grid-template-columns:1fr}
  .formGrid .wide{grid-column:span 1}
  .stepCard{padding:22px 18px}
}