/* Booking form and confirmation — inherits tokens from style.css */

.demobar {
  background: #FFF4CC;
  border: 1px dashed var(--mark-ink);
  border-radius: 10px;
  padding: .8rem 1rem;
  margin: 1.5rem 0 0;
  font-size: .95rem;
}

.bgroup { margin-bottom: 2.2rem; }
/* Each section on this page gets its own accent colour rather than one flat
   navy rule throughout — "When suits you" is the speed pillar (orange, same
   hue as same-day badges sitewide), "Surcharges" ties to the environment/
   disposal pillar (green, same hue as .pulse and .qfree). Explicit modifier
   classes rather than :nth-of-type, since the surcharges block is inside a
   Jinja {% if %} and a positional selector would silently repaint the wrong
   heading if that block were ever genuinely empty. */
.bgroup--speed .qgroup__title { border-bottom-color: var(--mark); }
.bgroup--eco .qgroup__title { border-bottom-color: var(--sorted); }

.slotpicker { display: grid; gap: 1.1rem; }
.sday__label {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .9rem;
  color: var(--quiet);
  margin: 0 0 .5rem;
}
.sday__slots { display: flex; flex-wrap: wrap; gap: .6rem; }
.sbtn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  padding: .7rem 1rem;
  cursor: pointer;
  min-width: 150px;
  text-align: left;
}
.sbtn strong {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.1rem;
  color: var(--ink);
}
.sbtn span { font-size: .88rem; color: var(--quiet); }
.sbtn em {
  font-style: normal;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .06em;
  color: #96271A;
}
.sbtn:hover { border-color: var(--ink); }
.sbtn.is-on {
  border-color: var(--ink);
  background: #FFFBEA;
  box-shadow: inset 4px 0 0 var(--mark);
}
.sbtn:focus-visible { outline: 3px solid var(--sorted); outline-offset: 2px; }

.bfields { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.bfield { display: flex; flex-direction: column; gap: .3rem; }
.bfield--wide { grid-column: 1 / -1; }
.bfield > span {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .85rem;
  color: var(--ink-2);
}
.bfield > span em {
  font-style: normal;
  font-family: var(--text);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--quiet);
}
.bfield input, .bfield textarea {
  font-family: var(--text);
  font-size: 1rem;
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  padding: .65rem .8rem;
  background: var(--paper);
  color: var(--ink);
}
.bfield input:focus, .bfield textarea:focus {
  outline: 3px solid var(--sorted);
  outline-offset: 1px;
  border-color: var(--ink);
}

/* confirmation ------------------------------------------------------------ */

.done { max-width: 720px; }
.done__h1 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: var(--ink);
  margin: 0 0 .6rem;
}
.done__card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 5px solid var(--mark);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  margin: 1.8rem 0;
  box-shadow: var(--lift-lg);
}
.done__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.done__row:last-child { border-bottom: 0; }
.done__row strong { font-family: var(--display); font-size: 1.4rem; color: var(--ink); }
.done__row--due strong { color: var(--sorted); }
.done__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.done__list li {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .3rem .9rem;
  font-size: .93rem;
}

@media (max-width: 640px) {
  .bfields { grid-template-columns: 1fr; }
  .sbtn { flex: 1 1 100%; }
}

/* cancellation page */
.warnbox {
  border: 1px dashed #B3261E;
  background: #FFF4F3;
  border-radius: 12px;
  padding: .9rem 1.1rem;
  margin: 1rem 0;
}
.warnbox strong {
  display: block;
  font-family: var(--display);
  font-size: 1.15rem;
  text-transform: uppercase;
  color: #B3261E;
}
.warnbox span { font-size: .93rem; color: var(--ink-2); }
.warnbox ul.prohibited-list {
  margin: .5rem 0; padding-left: 1.2rem;
  font-size: .93rem; color: var(--ink-2);
}
.warnbox ul.prohibited-list li { margin-bottom: .2rem; }
.warnbox > p { margin: .6rem 0 0; font-size: .85rem; color: var(--ink-2); }
.cancel__cta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.4rem; }

/* required confirmation checkboxes — shared with skip_hire.html, which
   already used this class name before it had anywhere defining it. */
.vancheck {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: 1rem 0; font-size: .9rem; color: var(--ink-2); cursor: pointer;
}
.vancheck input { width: 18px; height: 18px; accent-color: var(--mark); flex: none; margin-top: .15rem; }
.cancel__keep { text-align: center; margin-top: 1rem; font-size: .93rem; }
.cancel__keep a { text-decoration: underline; color: var(--quiet); }

/* neutral variant — informational, not an alarm */
.warnbox--note {
  border-color: var(--rule);
  background: var(--sheet);
  display: block;
}
.warnbox--note strong {
  display: inline;
  font-family: var(--text);
  font-size: .93rem;
  text-transform: none;
  color: var(--ink);
}
.warnbox--note span { display: inline; }

/* bolder, colour-blocked variant for the prohibited-items box specifically —
   Sajjad liked the punch of a solid-fill warning panel, so this trades the
   pale dashed-border treatment for MovingMoving's own brand mark colour
   rather than a competitor's amber/purple. --mark-deep is already proven
   AA-safe with white text elsewhere (.btn--mark), so every child colour
   here just inherits white/near-white rather than re-deriving its own
   contrast. */
.warnbox--prohibited {
  border: none;
  background: var(--mark-deep);
  border-radius: var(--r-lg, 14px);
  padding: 1.1rem 1.3rem;
  box-shadow: 0 12px 26px -14px rgba(122, 22, 16, .55);
}
.warnbox--prohibited strong {
  color: #fff;
  font-size: 1.2rem;
}
.warnbox--prohibited ul.prohibited-list { color: #fff; }
.warnbox--prohibited ul.prohibited-list li::marker { color: rgba(255,255,255,.7); }
.warnbox--prohibited > p { color: rgba(255,255,255,.9); }

/* "Forgot something?" add-on links — same box as the quote builder's
   stepper buttons, but <a> tags so the qty steps still work with no JS.
   Filled circles rather than hover-only colour, for more visual punch in
   this one section. */
.stepper a {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 50%; border: 1px solid var(--mark); background: var(--mark);
  font-size: 1.1rem; font-weight: 700; color: #fff;
  text-decoration: none; line-height: 1;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.stepper a:hover { background: var(--mark-ink); border-color: var(--mark-ink); transform: scale(1.06); }
.stepper a[aria-disabled="true"] { opacity: .3; pointer-events: none; transform: none; }

/* colour-badge icons for the surcharge tiles only — the quiet, un-badged
   icon style everywhere else in the quote builder is a deliberate choice
   ("a measurement mark, not a colour wash", quote.css) and stays as-is. */
.surcharge-items .qitem__icon {
  background: var(--mark-wash);
  border-radius: 50%;
  color: var(--mark-ink);
}
.surcharge-items .qitem.is-on .qitem__icon { background: var(--mark); color: #fff; }

/* A styled drop-zone standing in for the raw file input's own "Choose
   files" button, which every browser renders differently and none of
   them handsomely. The real <input> sits on top, fully transparent,
   still keyboard- and screen-reader-reachable — clicking anywhere in the
   box opens the file picker exactly as clicking the old button did. */
.upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; text-align: center; position: relative;
  background: var(--sheet); border: 1.5px dashed var(--rule);
  border-radius: var(--r-lg); padding: 1.7rem 1rem;
  cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.upload:hover { border-color: var(--ink); background: var(--paper); box-shadow: var(--lift); }
.upload:has(.upload__input:focus-visible) { border-color: var(--ink); outline: 3px solid var(--sorted); outline-offset: 1px; }
.upload__input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; margin: 0;
}
.upload__icon { width: 30px; height: 30px; color: var(--ink-2); }
.upload__label { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: .95rem; }
.upload__count { font-size: .8rem; color: var(--quiet); min-height: 1.2em; }