/* ============================================================
   CuBins — booking flow (book.php)
   Loaded only on the booking page; the marketing pages don't need it.
   Uses the tokens defined in styles.css.
   ============================================================ */

.wrap-narrow{ max-width:860px; }

.book-hero{ padding-top:130px; padding-bottom:8px; }
.book-hero h1{ margin:12px 0 16px; font-size:clamp(1.9rem,4.4vw,3rem); }
.book-hero .lede{ color:var(--steel); font-size:1.06rem; max-width:60ch; }

.book-form{ display:flex; flex-direction:column; gap:22px; }


.book-step{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px 34px; box-shadow:var(--shadow-sm); margin:0;
}
.book-step legend{
  display:flex; align-items:center; gap:12px; padding:0;
  font-family:var(--font-display); font-weight:800; font-size:1.25rem; color:var(--ink);
}
.step-n{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--grad-orange); color:var(--ink);
  font-family:var(--font-mono); font-size:.92rem; font-weight:600; flex:none;
}
.step-note{ margin:14px 0 0; color:var(--steel); font-size:.95rem; }

/* label-wrapped fields (this page nests the caption in a span) */
.book-form .field{ gap:8px; margin-top:18px; }
.book-form .field > span{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel);
}
.book-form .field > span em{
  font-style:normal; color:var(--steel-lt); text-transform:none; letter-spacing:0;
}
.book-form .hint{ font-size:.82rem; color:var(--steel-lt); line-height:1.5; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .grid-2{ grid-template-columns:1fr; } }

.field-error{ margin:6px 0 0; color:#C0392B; font-size:.85rem; }
.field-error:empty{ display:none; }
.has-error input,.has-error select{ border-color:#C0392B !important; background:#FFF6F5; }


/* ---------- bin picker ---------- */
.bin-picker{ display:grid; gap:12px; margin-top:20px; }
.bin-pick{ position:relative; display:block; cursor:pointer; }
.bin-pick input{ position:absolute; opacity:0; pointer-events:none; }
.bin-pick-body{
  display:flex; align-items:center; gap:18px;
  border:2px solid var(--line); border-radius:18px; padding:16px 20px;
  background:var(--paper);
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.bin-pick:hover .bin-pick-body{ border-color:#C9D4DE; background:#fff; }
.bin-pick input:checked + .bin-pick-body{
  border-color:var(--orange); background:#fff; box-shadow:0 0 0 4px rgba(242,198,23,.22);
}
.bin-pick input:focus-visible + .bin-pick-body{ outline:3px solid var(--ink); outline-offset:3px; }
.bin-pick-yd{
  font-family:var(--font-display); font-weight:800; font-size:1.9rem; line-height:1;
  color:var(--ink); flex:none; min-width:62px;
}
.bin-pick-yd small{
  display:block; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.2em;
  color:var(--orange-deep); margin-top:3px;
}
.bin-pick-meta{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.bin-pick-meta strong{ font-size:1.02rem; }
.bin-pick-meta em{ font-style:normal; font-family:var(--font-mono); font-size:.76rem; color:var(--steel); }
.bin-pick-meta span{ font-size:.85rem; color:var(--steel-lt); }
.bin-pick-price{
  font-family:var(--font-display); font-weight:800; font-size:1.3rem;
  color:var(--ink); flex:none; text-align:right;
}
.bin-pick-price small{
  display:block; font-family:var(--font-body); font-weight:500;
  font-size:.7rem; color:var(--steel-lt);
}
@media (max-width:520px){
  .bin-pick-body{ gap:12px; padding:14px 15px; }
  .bin-pick-yd{ font-size:1.55rem; min-width:46px; }
  .bin-pick-meta em{ display:none; }
  .bin-pick-price{ font-size:1.08rem; }
}

/* ---------- live estimate ---------- */
.estimate{
  margin-top:22px; padding:20px 24px; border-radius:18px;
  background:var(--grad-ink); color:#C6D1DB; border:1px solid var(--line-dk);
}
.estimate > div{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.estimate-label{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--orange-hot);
}
.estimate strong{ font-family:var(--font-display); font-weight:800; font-size:2rem; color:#fff; }
.estimate p{ margin:8px 0 0; font-size:.88rem; line-height:1.6; }
.estimate-warn strong{ font-size:1.4rem; color:var(--orange-hot); }

/* ---------- checkboxes ---------- */
.check{ display:flex; gap:14px; align-items:flex-start; cursor:pointer; margin-top:16px; }
.check input{ width:22px; height:22px; flex:none; margin-top:3px; accent-color:var(--orange); cursor:pointer; }
.check span{ display:flex; flex-direction:column; gap:4px; }
.check strong{ font-size:1rem; }
.check em{ font-style:normal; color:var(--steel); font-size:.9rem; line-height:1.6; }
.check-highlight{
  margin-top:22px; padding:18px 20px; border-radius:16px;
  background:var(--paper); border:1.5px dashed var(--line);
  transition:border-color .25s ease, background .25s ease;
}
.check-highlight.is-urged{ border-color:var(--orange); background:#FFFBEC; border-style:solid; }
.has-error.check strong{ color:#C0392B; }

.billing-toggle{ margin-top:20px; }
.billing-toggle summary{ cursor:pointer; font-size:.92rem; color:var(--steel); padding:10px 0; }
.billing-toggle summary:hover{ color:var(--ink); }

/* ---------- terms panel ---------- */
.terms-scroll{
  margin-top:20px; max-height:340px; overflow-y:auto;
  border:1.5px solid var(--line); border-radius:18px; padding:26px 28px;
  background:var(--paper); font-size:.93rem; line-height:1.7; color:#33424F;
}
.terms-scroll:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; }
.terms-scroll h2{ font-size:1.15rem; margin:0 0 4px; color:var(--ink); }
.terms-version{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel-lt); margin:0 0 18px;
}
.terms-scroll h3{ font-size:.98rem; margin:22px 0 6px; color:var(--ink); }
.terms-scroll h3:first-of-type{ margin-top:0; }
.terms-scroll p,.terms-scroll ul{ margin:0 0 10px; }
.terms-scroll ul{ padding-left:20px; }
.terms-scroll li{ margin-bottom:5px; }
.terms-scrolled{
  margin:12px 0 0; font-size:.85rem; color:var(--steel-lt);
  font-family:var(--font-mono); letter-spacing:.04em;
}
.terms-scrolled.is-done{ color:var(--good); }

/* Boxes stay dimmed and inert until the terms have actually been read. */
.acks{ margin-top:8px; opacity:.45; pointer-events:none; transition:opacity .35s ease; }
.acks.is-unlocked{ opacity:1; pointer-events:auto; }

.signature{ margin-top:26px; padding-top:24px; border-top:1.5px dashed var(--line); }
.sig-input{
  font-family:"Segoe Script","Brush Script MT",cursive;
  font-size:1.5rem !important; letter-spacing:.02em; padding:12px 18px !important;
}
.sig-input:disabled{ background:#EDF1F4; color:var(--steel-lt); cursor:not-allowed; }

/* ---------- submit + success ---------- */
.book-submit{ text-align:center; padding:6px 0 10px; }
.btn-lg{ font-size:1.05rem; padding:18px 34px; }
#submitBtn.is-loading{ opacity:.7; cursor:progress; }
.book-reassure{ margin:14px 0 0; font-size:.88rem; color:var(--steel-lt); }







@media (max-width:640px){
  .book-hero{ padding-top:110px; }
  .book-step{ padding:26px 20px; }
  .terms-scroll{ padding:20px 18px; max-height:300px; }
  .book-done{ padding:40px 22px; }
}

/* ---------- Terms & privacy pages (terms.php / privacy.php) ---------- */
.terms-page{ font-size:1rem; line-height:1.75; color:#33424F; }
.terms-page h3{
  font-family:var(--font-display); font-weight:700; font-size:1.12rem;
  color:var(--ink); margin:30px 0 8px;
}
.terms-page h3:first-child{ margin-top:0; }
.terms-page p{ margin:0 0 14px; }
.terms-page ul{ margin:0 0 14px; padding-left:22px; }
.terms-page li{ margin-bottom:7px; }
.terms-page strong{ color:var(--ink); }
.terms-page a{ color:var(--info, #2E6DA8); text-decoration:underline; }

/* Keyboard / screen-reader route past the terms gate. */
.terms-read{ margin-top:10px; }
.acks[aria-disabled="true"] .check{ cursor:default; }
.acks input:disabled{ cursor:not-allowed; }