/* ==========================================================================
   FSP STUDIOS — shared styles for book.html + checkout.html
   Matches the design system in index.html (Oswald / Inter / Space Mono).
   ========================================================================== */

:root{
  --navy:#0A1430;
  --navy-deep:#050916;
  --navy-card:#0E1A3C;
  --gold:#C9A227;
  --gold-bright:#E4BE3D;
  --cyan:#4FD1E4;
  --cream:#F4EFE3;
  --grey:#9AA1B5;
  --line:rgba(244,239,227,0.10);
  --danger:#FF6B5A;
  --ok:#5BD99A;
}

*{box-sizing:border-box; margin:0; padding:0;}
/* The [hidden] attribute and a class-based `display` rule have identical
   specificity, so without this an element hidden via .hidden=true in JS
   (e.g. checkout.html's #sqApplePay, #payWallets, #payOr, all of which set
   their own `display` for when they ARE shown) can still render, because
   the later author rule wins the tie. Verified live: a wallet that Square
   correctly refused to initialise showed up on screen anyway until this
   rule was added. !important is deliberate here, not laziness: `hidden`
   must always win, unconditionally, over any component's own display rule. */
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
  background:var(--navy-deep);
  color:var(--cream);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
h1,h2,h3,.disp{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.02em;}
a{color:inherit; text-decoration:none;}
.mono{font-family:'Space Mono',monospace;}
.wrap{width:100%; max-width:1180px; margin:0 auto; padding:0 clamp(18px,4vw,48px); position:relative; z-index:2;}

/* fixed screen texture, same as the landing page */
.fx{position:fixed; inset:0; z-index:1; pointer-events:none;}
.fx.scan{background:repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px); opacity:0.5;}
.fx.vignette{background:radial-gradient(ellipse 100% 60% at 50% 0%, transparent 40%, rgba(0,0,0,0.35) 100%);}

/* ---------- NAV ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(5,9,22,0.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:74px; max-width:1180px;}
.brand{display:flex; align-items:center; gap:11px;}
.brand img{height:46px; width:auto; filter:drop-shadow(0 0 12px rgba(228,190,61,0.45));}
.brand-txt{font-family:'Oswald',sans-serif; font-weight:700; font-size:19px; letter-spacing:0.1em;}
.brand-txt span{color:var(--gold-bright);}
.nav-back{font-size:12.5px; color:var(--grey); letter-spacing:0.04em; text-transform:uppercase; font-weight:600; transition:color .2s ease;}
.nav-back:hover{color:var(--gold-bright);}

/* ---------- STEP RAIL ---------- */
/* Must wrap. On a narrow phone the three step labels are wider than the
   viewport, and a non-wrapping flex row pushes the whole page sideways,
   clipping the calendar's last column and the month arrows. */
.steps{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:26px 0 4px; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--grey);}
.steps b{color:var(--gold-bright); font-weight:700;}
.steps i{font-style:normal; opacity:0.45;}

/* ---------- PAGE GRID ---------- */
/* minmax(0,1fr), never plain 1fr. A 1fr track defaults to min-width:auto, so
   the wide day strip inside would force the column past the container and
   shove the summary card off screen instead of scrolling. */
.bk-grid{display:grid; grid-template-columns:minmax(0,1fr) 348px; gap:34px; align-items:start; padding:14px 0 90px;}
@media (max-width:940px){ .bk-grid{grid-template-columns:minmax(0,1fr); gap:24px;} }
.bk-grid > *{min-width:0;}

.panel{
  background:linear-gradient(160deg, rgba(14,26,60,0.75), rgba(6,11,28,0.75));
  border:1px solid var(--line); border-radius:14px; padding:clamp(20px,3vw,30px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,0.75);
}

/* ---------- CALENDAR HEAD ---------- */
.cal-head{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px;}
.cal-head h1{font-size:clamp(22px,3.2vw,29px); color:var(--cream);}
.cal-nav{display:flex; gap:8px;}
.cal-nav button{
  width:38px; height:38px; border-radius:50%; background:transparent; border:1px solid rgba(228,190,61,0.35);
  color:var(--gold-bright); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease, opacity .2s ease;
}
.cal-nav button:hover:not(:disabled){background:rgba(228,190,61,0.12); border-color:var(--gold-bright);}
.cal-nav button:disabled{opacity:0.3; cursor:not-allowed;}

/* ---------- DAY STRIP ---------- */
.daystrip-shell{position:relative;}
.daystrip{
  display:flex; gap:9px; overflow-x:auto; scroll-behavior:smooth; padding:4px 2px 12px;
  scrollbar-width:thin; scrollbar-color:rgba(228,190,61,0.4) transparent;
}
.daystrip::-webkit-scrollbar{height:5px;}
.daystrip::-webkit-scrollbar-thumb{background:rgba(228,190,61,0.35); border-radius:4px;}
.daystrip::-webkit-scrollbar-track{background:transparent;}
.day{
  flex:0 0 auto; width:60px; padding:10px 0 11px; border-radius:10px; cursor:pointer; text-align:center;
  background:rgba(255,255,255,0.02); border:1px solid var(--line); color:var(--cream);
  transition:border-color .2s ease, background .2s ease, transform .15s ease;
}
.day:hover:not(.is-off){border-color:rgba(228,190,61,0.5); transform:translateY(-2px);}
.day .dow{display:block; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--grey);}
.day .dnum{display:block; font-family:'Oswald',sans-serif; font-size:21px; line-height:1.25; margin-top:2px;}
.day.is-sel{background:var(--gold); border-color:var(--gold); color:var(--navy-deep); box-shadow:0 0 22px -6px rgba(228,190,61,0.85);}
.day.is-sel .dow{color:rgba(5,9,22,0.72);}
.day.is-off{opacity:0.32; cursor:not-allowed;}
.day.is-off .dnum{text-decoration:line-through;}
.day .dot{display:block; width:4px; height:4px; border-radius:50%; background:var(--cyan); margin:3px auto 0;}
.day.is-sel .dot{background:var(--navy-deep);}
.day.is-off .dot{visibility:hidden;}

.tz-note{font-family:'Space Mono',monospace; font-size:11px; letter-spacing:0.05em; color:var(--grey); padding:6px 0 22px; border-bottom:1px solid var(--line);}

/* ---------- SLOTS ---------- */
.day-title{font-size:19px; color:var(--cream); margin:22px 0 4px;}
.slot-group{margin-top:20px;}
.slot-group h3{font-size:12px; letter-spacing:0.14em; color:var(--cyan); font-family:'Space Mono',monospace; text-transform:uppercase; font-weight:400; margin-bottom:11px;}
.slot-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(112px,1fr)); gap:9px;}
.slot{
  padding:13px 8px; border-radius:8px; cursor:pointer; font-size:14px; font-weight:600; text-align:center;
  background:rgba(255,255,255,0.02); border:1px solid rgba(228,190,61,0.28); color:var(--cream);
  transition:background .18s ease, border-color .18s ease, transform .12s ease, color .18s ease;
}
.slot:hover{background:rgba(228,190,61,0.12); border-color:var(--gold-bright); transform:translateY(-2px);}
.slot.is-sel{background:var(--gold); border-color:var(--gold); color:var(--navy-deep); box-shadow:0 0 22px -6px rgba(228,190,61,0.9);}
.empty-state{padding:34px 4px; text-align:center; color:var(--grey); font-size:14.5px;}
.empty-state b{display:block; color:var(--cream); font-family:'Oswald',sans-serif; font-size:17px; text-transform:uppercase; margin-bottom:6px;}

/* ---------- WAITLIST ---------- */
.waitlist{margin-top:34px; padding-top:22px; border-top:1px solid var(--line); text-align:center;}
.waitlist p{color:var(--grey); font-size:14px;}
.link-btn{
  display:inline-block; margin-top:10px; background:transparent; border:1px solid rgba(79,209,228,0.4);
  color:var(--cyan); font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.06em;
  padding:11px 24px; border-radius:40px; cursor:pointer; transition:background .2s ease, border-color .2s ease;
}
.link-btn:hover{background:rgba(79,209,228,0.12); border-color:var(--cyan);}

/* ---------- SUMMARY CARD ---------- */
.summary{position:sticky; top:98px;}
@media (max-width:940px){ .summary{position:static;} }
.summary h2{font-size:15px; letter-spacing:0.1em; color:var(--cream); padding-bottom:15px; border-bottom:1px solid var(--line);}
.sum-row{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:16px 0;}
.sum-row .t b{display:block; font-size:15px; font-weight:600; color:var(--cream);}
.sum-row .t span{display:block; font-size:12.5px; color:var(--grey); margin-top:1px;}
.sum-row .amt{font-family:'Oswald',sans-serif; font-size:19px; color:var(--gold-bright); white-space:nowrap;}
.sum-when{
  padding:13px 14px; border-radius:9px; background:rgba(79,209,228,0.07);
  border:1px solid rgba(79,209,228,0.28); font-size:13.5px; color:var(--cream); margin-bottom:4px;
}
.sum-when b{display:block; font-family:'Oswald',sans-serif; font-size:16px; letter-spacing:0.02em; color:var(--cyan); text-transform:uppercase;}
.sum-when.is-empty{background:rgba(255,255,255,0.02); border-color:var(--line); color:var(--grey);}
.sum-lines{border-top:1px solid var(--line); margin-top:6px; padding-top:14px;}
.sum-line{display:flex; justify-content:space-between; font-size:13.5px; color:var(--grey); padding:4px 0;}
.sum-line.total{color:var(--cream); font-weight:700; font-size:15px; border-top:1px solid var(--line); margin-top:9px; padding-top:12px;}
.sum-line.total span:last-child{font-family:'Oswald',sans-serif; font-size:20px; color:var(--gold-bright);}

/* ---------- DURATION SELECTOR ---------- */
.dur-row{padding:14px 0 6px; border-bottom:1px solid var(--line);}
.dur-label{display:block; font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--grey); margin-bottom:10px;}
.dur-btns{display:flex; gap:8px;}
.dur-btn{
  flex:1; padding:10px 6px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:700;
  text-align:center; text-transform:uppercase; letter-spacing:0.04em; font-family:'Inter',sans-serif;
  background:rgba(255,255,255,0.03); border:1px solid rgba(228,190,61,0.28); color:var(--grey);
  transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.dur-btn:hover{background:rgba(228,190,61,0.1); border-color:rgba(228,190,61,0.6); color:var(--cream);}
.dur-btn.active{background:var(--gold); border-color:var(--gold); color:var(--navy-deep); box-shadow:0 0 16px -4px rgba(228,190,61,0.8);}

.btn-gold{
  display:block; width:100%; margin-top:18px; background:var(--gold); color:var(--navy-deep); font-weight:700;
  font-size:14.5px; padding:15px 18px; border-radius:6px; text-align:center; text-transform:uppercase;
  letter-spacing:0.03em; border:none; cursor:pointer; font-family:'Inter',sans-serif;
  box-shadow:0 0 22px -6px rgba(228,190,61,0.7); transition:box-shadow .25s ease, transform .15s ease, opacity .2s ease;
}
.btn-gold:hover:not(:disabled){box-shadow:0 0 30px -2px rgba(228,190,61,1); transform:translateY(-1px);}
.btn-gold:disabled{opacity:0.4; cursor:not-allowed; box-shadow:none; transform:none;}
.btn-gold.is-busy{opacity:0.75; cursor:wait;}
.micro{font-size:11.5px; color:var(--grey); margin-top:12px; text-align:center; line-height:1.5;}

/* ---------- HOLD BANNER ---------- */
.hold{
  display:flex; align-items:center; justify-content:center; gap:10px; margin:22px 0 0;
  padding:11px 16px; border-radius:9px; background:rgba(201,162,39,0.1);
  border:1px solid rgba(228,190,61,0.35); font-size:13.5px; color:var(--cream);
}
.hold .clock{font-family:'Space Mono',monospace; font-weight:700; color:var(--gold-bright); font-size:15px;}
.hold.is-warn{background:rgba(255,107,90,0.1); border-color:rgba(255,107,90,0.45);}
.hold.is-warn .clock{color:var(--danger);}
.hold.is-dead{background:rgba(255,107,90,0.14); border-color:var(--danger);}

/* ---------- FORM ---------- */
.form-sec{margin-top:8px;}
.form-sec + .form-sec{margin-top:30px; padding-top:26px; border-top:1px solid var(--line);}
.form-sec h2{font-size:16px; letter-spacing:0.08em; color:var(--cream); margin-bottom:4px;}
.form-sec .sec-note{font-size:13px; color:var(--grey); margin-bottom:18px;}
.field{margin-bottom:15px;}
.field label{display:block; font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--grey); margin-bottom:6px;}
.field label .req{color:var(--gold-bright);}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=date],.field textarea{
  width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:8px;
  padding:13px 14px; color:var(--cream); font-family:'Inter',sans-serif; font-size:15px; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(154,161,181,0.6);}
.field input:focus,.field textarea:focus{border-color:var(--gold-bright); background:rgba(255,255,255,0.05); box-shadow:0 0 0 3px rgba(228,190,61,0.14);}
.field input[type=date]{color-scheme:dark;}
.field textarea{resize:vertical; min-height:80px;}
.field.has-err input,.field.has-err textarea{border-color:var(--danger); box-shadow:0 0 0 3px rgba(255,107,90,0.14);}
.err{display:none; color:var(--danger); font-size:12px; margin-top:5px;}
.field.has-err .err{display:block;}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:13px;}
@media (max-width:560px){ .row-2{grid-template-columns:1fr;} }

.phone-wrap{display:flex; align-items:stretch;}
.phone-cc{
  display:flex; align-items:center; gap:7px; padding:0 13px; font-size:14.5px; color:var(--cream);
  background:rgba(255,255,255,0.05); border:1px solid var(--line); border-right:none;
  border-radius:8px 0 0 8px; white-space:nowrap;
}
.phone-wrap input{border-radius:0 8px 8px 0 !important;}

.check{display:flex; gap:11px; align-items:flex-start; margin-top:15px; cursor:pointer;}
.check input{
  appearance:none; -webkit-appearance:none; flex:0 0 auto; width:19px; height:19px; margin-top:2px; cursor:pointer;
  border:1px solid rgba(228,190,61,0.5); border-radius:4px; background:rgba(255,255,255,0.03);
  transition:background .18s ease, border-color .18s ease;
}
.check input:checked{background:var(--gold); border-color:var(--gold);}
.check input:checked::after{content:'✓'; display:block; text-align:center; line-height:17px; color:var(--navy-deep); font-size:13px; font-weight:700;}
.check input:focus-visible{outline:2px solid var(--gold-bright); outline-offset:2px;}
.check span{font-size:13px; color:var(--grey); line-height:1.55;}
.check span b{color:var(--cream); font-weight:600;}
.check.has-err input{border-color:var(--danger); box-shadow:0 0 0 3px rgba(255,107,90,0.14);}
.legal{font-size:11.5px; color:rgba(154,161,181,0.85); line-height:1.55; margin-top:9px;}

.policy-box{background:rgba(255,255,255,0.02); border:1px solid var(--line); border-radius:9px; padding:16px 17px; font-size:13.5px; color:var(--grey); line-height:1.6;}
.policy-box b{color:var(--cream);}

.form-alert{display:none; margin-top:16px; padding:13px 15px; border-radius:9px; font-size:13.5px;}
.form-alert.show{display:block;}
.form-alert.err{background:rgba(255,107,90,0.12); border:1px solid rgba(255,107,90,0.45); color:#FFC2B8;}
.form-alert.ok{background:rgba(91,217,154,0.1); border:1px solid rgba(91,217,154,0.4); color:#B6F0D2;}

/* ---------- MODAL ---------- */
.modal{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(3,6,15,0.82); backdrop-filter:blur(5px);}
.modal.open{display:flex;}
.modal-card{width:100%; max-width:430px; background:linear-gradient(160deg,var(--navy-card),#0A1430); border:1px solid rgba(201,162,39,0.35); border-radius:14px; padding:28px; box-shadow:0 40px 80px -30px rgba(0,0,0,0.9);}
.modal-card h2{font-size:20px; color:var(--cream);}
.modal-card > p{font-size:13.5px; color:var(--grey); margin:8px 0 20px;}
.modal-x{float:right; background:none; border:none; color:var(--grey); font-size:24px; line-height:1; cursor:pointer; transition:color .2s ease;}
.modal-x:hover{color:var(--cream);}

footer{border-top:1px solid var(--line); padding:26px 0 40px; text-align:center; color:var(--grey); font-size:12px; position:relative; z-index:2;}
footer a{color:var(--gold-bright);}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
  .daystrip{scroll-behavior:auto;}
}

/* ---------- MONTH GRID ---------- */
.cal-dow{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; padding:6px 0 8px;
  font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:0.1em; color:var(--grey); text-align:center;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
.cal-cell{position:relative; aspect-ratio:1/1; min-height:44px; border-radius:9px; cursor:pointer;
  background:rgba(255,255,255,0.03); border:1px solid var(--line); color:var(--cream);
  font-family:'Oswald',sans-serif; font-size:16px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; transition:all .16s ease;}
.cal-cell .n{font-family:'Space Mono',monospace; font-size:9px; color:var(--cyan); letter-spacing:0.04em;}
.cal-cell.is-blank{background:none; border:none; cursor:default;}
.cal-cell.is-available{border-color:rgba(228,190,61,0.32);}
.cal-cell.is-available:hover{border-color:var(--gold-bright); transform:translateY(-2px);
  box-shadow:0 0 20px -8px rgba(228,190,61,0.8);}
.cal-cell.is-full{opacity:0.42; cursor:not-allowed; border-style:dashed;}
.cal-cell.is-closed{opacity:0.3; cursor:not-allowed;}
.cal-cell.is-past{opacity:0.16; cursor:not-allowed;}
.cal-cell.is-beyond{opacity:0.22; cursor:not-allowed; border-style:dotted;}
.cal-cell.is-sel{background:var(--gold); border-color:var(--gold); color:var(--navy-deep);
  box-shadow:0 0 22px -6px rgba(228,190,61,0.9);}
.cal-cell.is-sel .n{color:rgba(5,9,22,0.7);}
.cal-error{grid-column:1 / -1; padding:38px 20px; text-align:center; border:1px solid rgba(255,107,90,0.4);
  border-radius:10px; background:rgba(255,107,90,0.08);}
.cal-error b{display:block; font-family:'Oswald',sans-serif; font-size:17px; text-transform:uppercase;
  color:#FFC2B8; margin-bottom:7px;}
.cal-error p{font-size:13.5px; color:var(--grey); max-width:380px; margin:0 auto 14px;}
@media (max-width:560px){
  .cal-cell{min-height:38px; font-size:14px;}
  .cal-grid, .cal-dow{gap:4px;}
  .cal-cell .n{font-size:8.5px;}
  .cal-head h1{font-size:20px;}
  .steps{font-size:10px; gap:7px;}
}
/* A 7 column grid can never be allowed to widen the page. */
.cal-grid, .cal-dow{min-width:0;}
.cal-cell{min-width:0;}

/* ---------- PAYMENT STEP ----------
   Shown after the booking row is saved. Cash App and Venmo deep links, no
   card processor, so the booking stays pending until the studio confirms. */
.hold.is-ok{background:rgba(91,217,154,0.1); border-color:rgba(91,217,154,0.4); color:#B6F0D2;}
.pay-panel{max-width:620px; margin:0 auto; text-align:center;}
.pay-head .kicker-ok{display:inline-block; font-family:'Space Mono',monospace; font-size:10.5px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--ok);
  border:1px solid rgba(91,217,154,0.4); background:rgba(91,217,154,0.08);
  padding:5px 12px; border-radius:20px; margin-bottom:16px;}
.pay-head h2{font-size:clamp(22px,4vw,30px); color:var(--cream);}
.pay-head p{color:var(--grey); font-size:14.5px; margin-top:10px;}
.pay-when{margin:22px 0 24px; padding:14px 16px; border-radius:10px;
  background:rgba(79,209,228,0.07); border:1px solid rgba(79,209,228,0.28); font-size:13.5px; color:var(--cream);}
.pay-when b{display:block; font-family:'Oswald',sans-serif; font-size:17px; letter-spacing:0.02em;
  color:var(--cyan); text-transform:uppercase; margin-bottom:2px;}
.pay-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px;}
.pay-btn{display:block; padding:18px 16px; border-radius:11px; text-decoration:none;
  border:1px solid var(--line); background:rgba(255,255,255,0.03); color:var(--cream);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;}
.pay-btn:hover{transform:translateY(-2px);}
.pay-btn b{display:block; font-family:'Oswald',sans-serif; font-size:19px; letter-spacing:0.03em; text-transform:uppercase;}
.pay-btn span{display:block; font-family:'Space Mono',monospace; font-size:11.5px; color:var(--grey); margin-top:4px;}
.pay-cashapp{border-color:rgba(0,214,84,0.45);}
.pay-cashapp:hover{border-color:#00D654; box-shadow:0 0 26px -10px rgba(0,214,84,0.85);}
.pay-cashapp b{color:#3FE07C;}
.pay-venmo{border-color:rgba(0,141,228,0.45);}
.pay-venmo:hover{border-color:#008CDE; box-shadow:0 0 26px -10px rgba(0,141,228,0.85);}
.pay-venmo b{color:#4FB6F0;}
.pay-note{font-size:12.5px; color:var(--grey); margin-top:18px; line-height:1.6;}
.pay-ref{font-family:'Space Mono',monospace; font-size:10.5px; color:rgba(154,161,181,0.6);
  letter-spacing:0.06em; margin-top:10px;}
.pay-missing{grid-column:1 / -1; padding:22px; border-radius:10px; font-size:14px;
  background:rgba(255,107,90,0.1); border:1px solid rgba(255,107,90,0.4); color:#FFC2B8;}
/* Payment step takes the whole width; the summary column is gone by then. */
.bk-grid.is-payment{grid-template-columns:minmax(0,1fr);}

/* ---------- SQUARE PAYMENT STEP ----------
   Card is the baseline, always attempted. Apple Pay and Cash App Pay only
   ever appear once Square's own SDK confirms it can initialise them on
   this device/origin (see checkout.html's initSquarePayments) -- both are
   EXPECTED to fail on localhost and most desktop browsers (Apple Pay needs
   a verified domain, Cash App Pay needs a real https origin), so a hidden
   wallet row here is the normal state, not a broken one. */
.pay-methods{max-width:420px; margin:24px auto 0; text-align:left;}
.pay-wallets{display:grid; gap:10px; margin-bottom:14px;}
.sq-wallet-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background:#000; color:#fff; border:none; border-radius:8px; padding:14px;
  font-family:'Inter',sans-serif; font-size:15px; font-weight:600; letter-spacing:0.01em;
  cursor:pointer; transition:opacity .18s ease;
}
.sq-wallet-btn:hover{opacity:0.85;}
.sq-wallet-slot{min-height:0;}
.pay-or{display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--grey);
  font-size:11px; text-transform:uppercase; letter-spacing:0.08em;}
.pay-or::before,.pay-or::after{content:''; flex:1; height:1px; background:var(--line);}
.pay-card-block{margin-bottom:4px;}
.pay-card-label{display:block; font-size:12px; font-weight:600; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--grey); margin-bottom:8px;}
/* White on purpose. Square paints the card iframe on its own light
   background and we cannot change it from outside, so the container matches
   it instead of framing a white box in a dark panel. Dark text on white is
   also what every other card form looks like, which is the right instinct
   for the one field where a customer needs to feel sure of what they typed. */
.sq-card-box{
  background:#FFFFFF; border:1px solid #D8DBE2; border-radius:10px;
  padding:6px 10px; min-height:52px;
}
.pay-card-block .btn-gold{margin-top:14px;}
.pay-alt{margin-top:28px; padding-top:22px; border-top:1px solid var(--line); text-align:center;}
.pay-alt-label{font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--grey); margin-bottom:12px;}
.pay-alt .pay-btn{max-width:240px; margin:0 auto;}
.pay-alt .pay-missing{background:rgba(255,107,90,0.08);}

/* ---------- FORM SIMPLIFICATION ---------- */
/* The details step asked for eight things when four identify a customer.
   Instagram, birthday and the SMS marketing opt-in are gone, and the two
   long legal blocks with them. What is left is name, phone, email, an
   optional note and the policy agreement. */
.field label .opt{font-weight:400; letter-spacing:0; text-transform:none;
  color:rgba(154,161,181,0.75); font-size:11px; margin-left:5px;}
.link-inline{background:none; border:none; padding:0; font:inherit; cursor:pointer;
  color:var(--gold-bright); text-decoration:underline; text-underline-offset:2px;}
.link-inline:hover{color:var(--cream);}
.policy-box{margin-top:10px;}