/* Schedule Pickup's approved cinematic skin; booking rules remain in the existing modules. */
.booking-page {
  --booking-gold: #efc17e;
  --booking-silver: #dbe3ef;
  --booking-blue: #0561f8;
  --booking-muted: #b8c8d9;
  --booking-line: #8ba0b544;
  background: #06111f;
  color: #f5f7fb;
}
.booking-page .study { max-width: none; }
.booking-page #main {
  background: #071727;
  color: #f5f7fb;
}
.booking-page #main::before {
  background:
    radial-gradient(ellipse at 76% 9%, #21426730, transparent 42%),
    radial-gradient(ellipse at 6% 42%, #94704b0e, transparent 38%),
    linear-gradient(180deg, #071727, #061421 68%, #071727);
}

/* The shared header keeps its links and mobile menu behavior. */
.booking-page .public-header {
  height: 80px;
  min-height: 80px;
  padding: 10px clamp(24px, 4.9vw, 82px);
  gap: 30px;
  background: #050f1de8;
  border-bottom: 1px solid #d7e5f323;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.booking-page .study .public-header .brand {
  display: block;
  width: 164px;
  height: 55px;
  flex: none;
  background: url('assets/approved-cinematic-logo.png') center / contain no-repeat;
}
.booking-page .public-header .brand > * { visibility: hidden; }
.booking-page .public-header .navigation {
  gap: clamp(20px, 2.3vw, 36px);
  font: 500 13px/1.4 var(--sans);
  letter-spacing: .01em;
}
.booking-page .public-header .navigation a { color: #f1f5fa; }
.booking-page .public-header .navigation a:hover { color: var(--booking-gold); }
.booking-page .public-header .header-login {
  min-width: 84px;
  width: auto;
  height: 40px;
  border: 1px solid #deebf58c;
  border-radius: 22px;
  padding: 8px 18px;
  background: #ffffff0b;
  box-shadow: none;
  color: #f3f7fb;
  font: 500 12px var(--sans);
}
.booking-page .public-header .header-login:hover { background: #ffffff1f; border-color: #eef5ff; }
.booking-page .public-header .menu-toggle { border-color: #d2d9e177; color: #f3f7fb; background: #102238aa; }

/* The booking page follows the prototype's editorial type and spacious navy canvas. */
.booking-page .booking-shell {
  width: min(calc(100% - 2 * clamp(24px, 4.9vw, 82px)), 1200px);
  padding: 54px 0 88px;
}
.booking-page .booking-shell > .eyebrow,
.booking-page .booking-step-label {
  color: var(--booking-gold);
  font-weight: 500;
  letter-spacing: .18em;
}
.booking-page .booking-shell h1 {
  font: 400 clamp(58px, 6vw, 86px)/.96 var(--serif);
  letter-spacing: -.025em;
  margin: 14px 0 19px;
}
.booking-page .booking-intro { color: var(--booking-silver); font-size: 16px; margin-bottom: 38px; }
.booking-page .booking-step {
  padding: clamp(22px, 3vw, 42px);
  border: 1px solid #d8c09b70;
  border-radius: 16px;
  background: #071727e8;
  box-shadow: 0 20px 50px #02091345;
}
.booking-page .booking-shell h2 { color: #f5f7fb; }
.booking-page #booking-view #box-title { font: 400 clamp(38px, 4.2vw, 55px)/1 var(--serif); margin: 15px 0; }
.booking-page .booking-help,
.booking-page .booking-capacity-note,
.booking-page .booking-note { color: var(--booking-muted); }
.booking-page .booking-option {
  border-color: #8ba0b566;
  background: #0b1d30;
  box-shadow: inset 0 1px 0 #eef6ff0a;
  text-shadow: none;
}
.booking-page .booking-option[data-selected=true] { border-color: var(--booking-gold); }
.booking-page .booking-option:hover { border-color: var(--booking-gold); }
.booking-page .booking-shell :is(a,button):focus-visible,
.booking-page :is(input,select,textarea,summary):focus-visible { outline: 2px solid var(--booking-gold); outline-offset: 4px; }
.booking-page :is(input[type=radio],input[type=checkbox]) { accent-color: var(--booking-blue); }

/* Keep the approved two-column anatomy and existing catalog-populated content. */
.booking-page .box-selection-layout { grid-template-columns: minmax(0,1.5fr) minmax(290px,1fr); gap: clamp(28px, 4vw, 55px); margin-top: 38px; }
.booking-page #booking-view .box-selection-choices .booking-option[data-box] {
  border-bottom-color: #8ba0b570;
  background: transparent;
}
.booking-page #booking-view .box-selection-choices .booking-option[data-box]:first-child { border-top-color: #8ba0b570; }
.booking-page #booking-view .box-selection-choices .booking-option[data-box][data-selected=true] { border-bottom-color: var(--booking-gold); }
.booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-capacity,
.booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-item-estimate,
.booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-price small { color: var(--booking-muted); }
.booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-quantity { border-color: #8497ad; }
.booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-quantity button:hover:not(:disabled) { background: #efc17e1c; color: var(--booking-gold); }
.booking-page .box-selection-summary { background: #11263f; border-top-color: var(--booking-blue); }
.booking-page .box-selection-summary h3 { color: #f5f7fb; }
.booking-page .box-selection-summary-top strong { font-size: 36px; }
.booking-page .box-selection-credit { border-top-color: #70859d80; }
.booking-page .box-selection-summary :is(p,small) { color: #b9c8d9; }
.booking-page .box-policy-link { color: var(--booking-gold); text-decoration-color: #efc17e99; }
.booking-page .box-policy-link:hover { color: #ffe0aa; }
.booking-page .booking-selection { color: var(--booking-gold); }

/* The existing native policy dialog retains its wording, focus flow and catalog table. */
.booking-page .box-policy-dialog {
  border-color: #d8c09b8c;
  border-radius: 12px;
  background: #11263f;
  box-shadow: 0 26px 90px #000b;
}
.booking-page .box-policy-dialog::backdrop { background: #020914d9; }
.booking-page .box-policy-dialog #box-policy-title { color: #f5f7fb; }
.booking-page .box-policy-rules strong,
.booking-page .box-policy-weights thead th { color: var(--booking-gold); }
.booking-page .box-policy-weights thead th { background: #efc17e0b; }
.booking-page .box-policy-packing { border-color: #d8c09b55; background: #efc17e0a; }
.booking-page .box-policy-close:hover { background: #efc17e1a; }

/* Shared button geometry and restrained gold detail across the page. */
.booking-page .button.primary {
  min-height: 49px;
  border: 1px solid transparent;
  border-radius: 28px;
  background: var(--booking-blue);
  color: #fff;
  box-shadow: 0 5px 18px #0061ff55;
  font-weight: 500;
}
.booking-page .button.primary:hover:not(:disabled) { background: #287aff; box-shadow: 0 7px 22px #0061ff66; }
.booking-page .button.outline { border-color: #d8c09b8c; background: #0a1a2d; color: #f5f7fb; box-shadow: none; }
.booking-page .button.outline:hover:not(:disabled) { border-color: var(--booking-gold); color: var(--booking-gold); }
.booking-page .booking-care,
.booking-page .booking-preferences,
.booking-page .booking-detergents,
.booking-page .booking-delivery,
.booking-page .booking-summary,
.booking-page .review-section { border-color: var(--booking-line); }
.booking-page .booking-summary .booking-subtotal,
.booking-page .review-total { border-color: var(--booking-line); color: var(--booking-gold); }

/* The shared footer source remains synchronized with every public page. */
.booking-page .site-footer { background: #06111f; border-top: 1px solid #34485e; }
.booking-page .site-footer-logo {
  display: block;
  width: 185px;
  height: 62px;
  background: url('assets/approved-cinematic-logo.png') center / contain no-repeat;
}
.booking-page .site-footer-logo > * { visibility: hidden; }
.booking-page .site-footer-tagline { color: var(--booking-gold); }
.booking-page .site-footer a:hover { color: var(--booking-gold); }

@media (min-width: 701px) and (max-width: 960px) {
  .booking-page .public-header { flex-wrap: nowrap; }
  .booking-page .public-header .menu-toggle { display: none; }
  .booking-page .public-header .navigation,
  .js .booking-page .public-header .navigation { display: flex; position: absolute; left: 50%; top: 0; transform: translateX(-50%); order: 0; width: auto; height: 100%; padding: 0; gap: 18px; font-size: 12px; }
  .booking-page .public-header .header-actions { margin-left: auto; }
}
@media (max-width: 850px) {
  .booking-page .box-selection-layout { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 700px) {
  .booking-page .public-header { height: 68px; min-height: 68px; padding: 8px 22px; gap: 10px; }
  .booking-page .study .public-header .brand { width: 132px; height: 48px; }
  .booking-page .public-header .menu-toggle { display: flex; margin-left: auto; min-height: 44px; }
  .booking-page .public-header .navigation,
  .js .booking-page .public-header .navigation { position: absolute; top: 100%; left: 0; right: 0; transform: none; display: none; width: 100%; height: auto; order: 0; padding: 12px 22px 20px; flex-direction: column; align-items: stretch; gap: 0; background: #050f1d; border-bottom: 1px solid #d7e5f323; }
  .booking-page .public-header .navigation.open,
  .js .booking-page .public-header .navigation.open { display: flex; }
  .booking-page .public-header .navigation a { min-height: 44px; }
  .booking-page .public-header .header-actions { margin-left: 0; }
  .booking-page .public-header .header-login { min-width: 72px; height: 44px; padding: 8px 12px; }
  .booking-page .booking-shell { width: calc(100% - 44px); padding: 36px 0 60px; }
  .booking-page .booking-shell h1 { font-size: clamp(48px, 10vw, 64px); }
  .booking-page .booking-intro { margin-bottom: 28px; }
  .booking-page .booking-step { padding: 22px; }
  .booking-page #booking-view #box-title { font-size: 43px; }
  .booking-page .box-selection-layout { margin-top: 27px; }
}
@media (max-width: 380px) {
  .booking-page .public-header { padding-inline: 16px; }
  .booking-page .study .public-header .brand { width: 116px; height: 43px; }
  .booking-page .public-header .header-login { min-width: 66px; }
  .booking-page .booking-shell { width: calc(100% - 32px); }
  .booking-page .booking-step { padding: 18px; }
  .booking-page #booking-view #box-title { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .booking-page .button { transition: none; }
}

/* Active cinematic pages share the approved logo, navigation, and compact footer. */
.booking-page .study .public-header .brand {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  height: auto;
  background: none;
  padding: 0;
}
.booking-page .public-header .brand > * { visibility: visible; }
.booking-page .public-header .brand-art { display: block; width: 100%; aspect-ratio: 2172 / 585; overflow: hidden; }
.booking-page .public-header .brand-art img { display: block; width: 100%; height: auto; }
.booking-page .public-header .brand-tagline,
.booking-page .cinematic-footer .brand-tagline { display: block; width: 100%; color: #e8f1f8; font: 500 8px/1 var(--sans); letter-spacing: .1em; text-align: center; white-space: nowrap; }
.booking-page .public-header .navigation .nav-unavailable { color: #c6d1df; cursor: default; }
.booking-page .public-header .navigation .nav-unavailable:last-child { display: inline-flex; align-items: center; justify-content: center; min-width: 84px; min-height: 38px; padding: 8px 17px; border: 1px solid #deebf58c; border-radius: 20px; background: #ffffff0b; }
.booking-page .cinematic-footer .brand { display: inline-flex; flex-direction: column; width: 185px; gap: 1px; }
.booking-page .cinematic-footer .brand-art { display: block; width: 100%; aspect-ratio: 2172 / 585; overflow: hidden; }
.booking-page .cinematic-footer .brand-art img { display: block; width: 100%; height: auto; }
.booking-page .cinematic-footer .brand-tagline { font-size: 9px; }
@media (max-width: 700px) {
  .booking-page .public-header .navigation .nav-unavailable { display: flex; min-height: 44px; align-items: center; }
  .booking-page .public-header .navigation .nav-unavailable:last-child { align-self: flex-start; min-height: 40px; margin-top: 8px; }
}
.booking-page .public-header {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
}
.booking-page .public-header .navigation,
.js .booking-page .public-header .navigation {
  position: static;
  display: flex;
  grid-column: 2;
  align-items: center;
  gap: clamp(20px, 2.3vw, 36px);
  width: auto;
  height: 100%;
  margin: 0;
  padding: 0;
  transform: none;
}
.booking-page .public-header .navigation a,
.booking-page .public-header .navigation .nav-unavailable { display: inline-flex; align-items: center; height: 100%; white-space: nowrap; }
.booking-page .public-header .navigation .header-login { position: absolute; right: clamp(24px, 4.9vw, 82px); top: 50%; transform: translateY(-50%); height: 40px; }
@media (max-width: 700px) {
  .booking-page .public-header { display: flex; height: 68px; min-height: 68px; padding: 8px 22px; }
  .booking-page .public-header .menu-toggle { display: flex; margin-left: auto; }
  .booking-page .public-header .navigation,
  .js .booking-page .public-header .navigation { position: absolute; top: 100%; left: 0; right: 0; display: none; width: 100%; height: auto; padding: 12px 22px 20px; flex-direction: column; align-items: stretch; gap: 0; background: #050f1d; }
  .booking-page .public-header .navigation.open,
  .js .booking-page .public-header .navigation.open { display: flex; }
  .booking-page .public-header .navigation a,
  .booking-page .public-header .navigation .nav-unavailable { min-height: 44px; height: auto; }
  .booking-page .public-header .navigation .header-login { position: static; align-self: flex-start; transform: none; height: 40px; }
}
@media (max-width: 380px) { .booking-page .public-header { padding-inline: 16px; } }

/* Luxe shell, owner-approved from the 2026-10-24 Schedule Pickup study:
   cinematic hero that compacts after Step 1, numbered progress rail with a
   glowing marker, step numerals and a gold step action. Presentation only. */
.booking-page #main { position: relative; overflow-x: clip; }
.booking-page .booking-hero-art { position: absolute; top: 0; right: 0; z-index: 0; width: 68%; height: 470px; pointer-events: none; transition: height .45s ease; }
.booking-page .booking-hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 45% 42%; }
.booking-page .booking-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #071727 0%, #071727b8 14%, #0717271f 45%, transparent 70%), linear-gradient(0deg, #071727 0%, #071727e6 18%, #0717278c 36%, transparent 62%); }
.booking-page .booking-shell { position: relative; z-index: 1; padding-top: 84px; transition: padding .45s ease; }
.booking-page .booking-shell h1 { margin: 0; font-size: clamp(64px, 8vw, 124px); line-height: .86; letter-spacing: -.035em; }
.booking-page .booking-shell h1 em { font-style: normal; color: var(--booking-gold); }
.booking-page .booking-intro { margin: 22px 0 0; font-size: 18px; color: #dbe3ef; }

.booking-page .booking-progress { margin: 64px 0 40px; }
.booking-page .booking-progress ol { gap: 0; border-top: 1px solid #efc17e47; }
.booking-page .booking-progress li { gap: 12px; padding: 18px 12px 18px 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #93a6bb; font: 500 13px/1.3 var(--sans); text-shadow: 0 1px 10px #000c; }
.booking-page .booking-progress li::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--booking-gold); transition: width .5s ease; }
.booking-page .booking-progress li:is([data-complete=true], [aria-current=step])::before { width: 100%; }
.booking-page .booking-progress li span { width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid #7f93aa88; color: #7f93aa; font: 600 12px/1 var(--sans); }
.booking-page .booking-progress li strong { font-weight: 500; }
.booking-page .booking-progress li[data-complete=true] { color: #f5f7fb; }
.booking-page .booking-progress li[data-complete=true] span { border-color: var(--booking-gold); color: var(--booking-gold); }
.booking-page .booking-progress li[aria-current=step] { color: #fff; background: none; box-shadow: none; }
.booking-page .booking-progress li[aria-current=step] span { border-color: var(--booking-gold); background: var(--booking-gold); color: #111a26; }
.booking-page .booking-progress li[aria-current=step]::after { content: ""; position: absolute; top: -5px; right: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fff3dc; box-shadow: 0 0 0 2px #efc17e, 0 0 10px 3px #efc17ecc, 0 0 26px 8px #efc17e55; animation: booking-glow 2.6s ease-in-out infinite, booking-arrive .55s ease-out; }
@keyframes booking-glow { 50% { box-shadow: 0 0 0 2px #efc17e, 0 0 14px 5px #efc17eee, 0 0 40px 14px #efc17e77; } }
@keyframes booking-arrive { from { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.35); } to { transform: scale(1); } }

/* Steps 2-4 keep the brand moment but give the form the space. */
.booking-page[data-booking-step]:not([data-booking-step=boxes]) .booking-hero-art { height: 290px; }
.booking-page[data-booking-step]:not([data-booking-step=boxes]) .booking-shell { padding-top: 40px; }
.booking-page[data-booking-step]:not([data-booking-step=boxes]) .booking-shell h1 { font-size: clamp(44px, 4.6vw, 64px); }
.booking-page[data-booking-step]:not([data-booking-step=boxes]) .booking-intro { display: none; }
.booking-page[data-booking-step]:not([data-booking-step=boxes]) .booking-progress { margin-top: 32px; }

/* Large Inter numeral beside each step heading (Cormorant digits read as letters). */
.booking-page [data-step-number]::before { content: attr(data-step-number); float: left; margin: 2px clamp(18px, 2.4vw, 34px) 0 0; font: 400 clamp(56px, 5.6vw, 80px)/.9 var(--sans); letter-spacing: -.05em; color: var(--booking-gold); }
.booking-page [data-step-number] > h2 ~ .booking-help ~ * { clear: left; }

/* Owner decision: the step action is gold. */
.booking-page .booking-flow-navigation .button.primary { border: 0; background: linear-gradient(180deg, #f3cb8c, #e3b06a); color: #111a26; box-shadow: 0 8px 24px #efc17e2e; }
.booking-page .booking-flow-navigation .button.primary:hover:not(:disabled) { background: linear-gradient(180deg, #f6d49c, #e8b874); box-shadow: 0 12px 28px #efc17e44; transform: translateY(-1px); }
.booking-page .booking-flow-navigation .button.primary:disabled { opacity: 1; background: #3a4a5e; color: #9aaabb; box-shadow: none; }

@media (max-width: 760px) {
  .booking-page .booking-hero-art { width: 100%; height: 420px; }
  .booking-page .booking-hero-art img { object-position: 78% 40%; }
  .booking-page .booking-hero-art::after { background: linear-gradient(180deg, #071727db 0%, #07172799 48%, #071727 100%); }
  .booking-page .booking-shell { padding-top: 52px; }
  .booking-page .booking-intro { font-size: 15px; }
  .booking-page .booking-progress { margin: 44px 0 28px; }
  .booking-page .booking-progress ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .booking-page .booking-progress li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 4px 12px 0; font-size: 11px; }
  .booking-page .booking-progress li span { width: 26px; height: 26px; flex-basis: 26px; font-size: 11px; }
  .booking-page[data-booking-step]:not([data-booking-step=boxes]) .booking-hero-art { height: 250px; }
  .booking-page[data-booking-step]:not([data-booking-step=boxes]) .booking-shell { padding-top: 30px; }
  .booking-page [data-step-number]::before { float: none; display: block; margin: 0 0 6px; font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .booking-page .booking-hero-art, .booking-page .booking-shell, .booking-page .booking-progress li::before { transition: none; }
  .booking-page .booking-progress li[aria-current=step]::after { animation: none; }
}

/* Phase 2 — Step 1 box rows from the luxe study: decorative box photo scaled by
   size, serif name and price, gold pill stepper. Catalog values stay script-populated. */
.booking-page #booking-view .box-selection-choices .booking-option[data-box] { grid-template-columns: 132px minmax(0, 1fr) auto 128px; column-gap: 22px; row-gap: 0; padding: 22px 0; transition: background .25s; }
.booking-page #booking-view .box-selection-choices .booking-option[data-box][data-selected=true] { background: linear-gradient(90deg, transparent, #efc17e0d 40%, transparent); }
.booking-page .booking-box-photo { grid-column: 1; grid-row: 1 / 4; display: block; height: 92px; overflow: hidden; border: 1px solid #ffffff1f; border-radius: 3px; background: #dfe5ee; box-shadow: inset 0 1px 0 #ffffff33, 0 16px 26px -12px #000000d9, 0 4px 10px #00000066; transition: box-shadow .25s; }
.booking-page .booking-box-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.booking-page [data-box=mizoor] .booking-box-photo img { transform: scale(1.14); }
.booking-page [data-box=family] .booking-box-photo img { transform: scale(1.3); }
.booking-page [data-box][data-selected=true] .booking-box-photo { box-shadow: inset 0 1px 0 #ffffff40, 0 0 0 1px #efc17e8c, 0 20px 32px -14px #efc17e40, 0 6px 14px #00000080; }
.booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-option-top { grid-column: 2; grid-row: 1; align-self: end; }
.booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-box-name { font: 400 30px/1 var(--serif); }
.booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-capacity { grid-column: 2; grid-row: 2; margin-top: 8px; color: #dbe3ef; font-size: 12.5px; }
.booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-item-estimate { grid-column: 2; grid-row: 3; align-self: start; margin-top: 3px; color: var(--booking-muted); font-size: 12px; }
.booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-price { grid-column: 3; grid-row: 1 / 4; text-align: right; font: 400 32px/1 var(--serif); }
.booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-price small { margin-top: 6px; color: #7f93aa; font: 500 10.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-quantity { grid-column: 4; grid-row: 1 / 4; grid-template-columns: 42px 40px 42px; height: 46px; overflow: hidden; border: 1px solid #d8c09b80; border-radius: 24px; }
.booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-quantity button { height: 44px; border-radius: 22px; background: none; color: #f5f7fb; font-size: 19px; }
.booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-quantity button:disabled { color: #4c6077; }
.booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-quantity-value { font-size: 15px; font-weight: 500; }
@media (max-width: 1100px) and (min-width: 851px) {
  .booking-page #booking-view .box-selection-choices .booking-option[data-box] { grid-template-columns: 104px minmax(0, 1fr) auto; }
  .booking-page .booking-box-photo { height: 76px; }
  .booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-price { grid-row: 1 / 3; }
  .booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-quantity { grid-column: 3; grid-row: 3; margin-top: 10px; }
}
@media (max-width: 600px) {
  .booking-page #booking-view .box-selection-choices .booking-option[data-box] { grid-template-columns: 88px minmax(0, 1fr) auto; column-gap: 14px; padding: 20px 0; }
  .booking-page .booking-box-photo { height: 72px; grid-row: 1 / 4; }
  .booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-option-top,
  .booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-capacity,
  .booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-item-estimate { grid-column: 2 / 4; }
  .booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-box-name { font-size: 26px; }
  .booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-capacity { margin-top: 5px; }
  .booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-price { grid-column: 1 / 3; grid-row: 4; align-self: center; margin-top: 14px; text-align: left; font-size: 27px; }
  .booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-price small { display: inline; margin-left: 6px; }
  .booking-page #booking-view .box-selection-choices .booking-option[data-box] .booking-quantity { grid-column: 3; grid-row: 4; margin-top: 14px; grid-template-columns: 42px 34px 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .booking-page #booking-view .box-selection-choices .booking-option[data-box], .booking-page .booking-box-photo { transition: none; }
}
/* One soft gold hairline between all box rows; selection shows on the photo and row glow. */
.booking-page #booking-view .box-selection-choices .booking-option[data-box],
.booking-page #booking-view .box-selection-choices .booking-option[data-box][data-selected=true] { border-bottom-color: #d8c09b40; }
.booking-page #booking-view .box-selection-choices .booking-option[data-box]:first-child { border-top-color: #d8c09b40; }

/* Phase 3 — Step 2 from the luxe study: segmented customization mode, box rail,
   active-box band, static depth on product cards and "Your boxes" in the summary. */
.booking-page .customization-mode .customization-actions { display: inline-flex; flex-wrap: nowrap; gap: 0; margin: 16px 0 12px; padding: 3px; border: 1px solid #d8c09b80; border-radius: 26px; }
.booking-page .customization-mode .customization-actions .button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 22px; background: none; box-shadow: none; color: var(--booking-muted); font-size: 13px; }
.booking-page .customization-mode .customization-actions .button:hover:not(:disabled) { color: #f5f7fb; }
.booking-page .customization-mode .customization-actions .button[aria-pressed=true],
.booking-page .customization-mode .customization-actions .button[aria-pressed=true]:hover:not(:disabled) { background: var(--booking-gold); color: #111a26; }

.booking-page .customization-boxes { display: flex; gap: 10px; margin: 18px 0 6px; padding: 2px 2px 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.booking-page .customization-boxes:empty { display: none; }
.booking-page .customization-boxes button,
.booking-page .summary-your-boxes button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; color: #f5f7fb; text-align: left; cursor: pointer; font: inherit; }
.booking-page .customization-boxes button { flex: 0 0 auto; width: 210px; min-height: 56px; padding: 10px 14px; border: 1px solid #ffffff26; border-radius: 3px; background: #0b1b2e; scroll-snap-align: start; transition: border-color .2s, background .2s, box-shadow .2s; }
.booking-page .customization-boxes button:hover { border-color: #d8c09b80; }
.booking-page .customization-boxes span { font: 600 14px/1.3 var(--sans); }
.booking-page :is(.customization-boxes, .summary-your-boxes) small { max-width: 100%; overflow: hidden; color: var(--booking-muted); font: 400 11.5px/1.35 var(--sans); white-space: nowrap; text-overflow: ellipsis; }
.booking-page .customization-boxes button[aria-pressed=true] { border-color: var(--booking-gold); background: #efc17e14; box-shadow: inset 0 2px 0 var(--booking-gold), 0 12px 24px -14px #efc17e55; }
.booking-page .customization-boxes button[aria-pressed=true] span { color: #f6d9a8; }

.booking-page .customization-progress { margin: 14px 0 0; padding: 14px 16px; border-left: 2px solid var(--booking-gold); background: #efc17e0a; font: 400 24px/1.15 var(--serif); }
.booking-page .customization-progress:empty { display: none; }
.booking-page .booking-detergents > .customization-actions { justify-content: space-between; margin-top: 28px; padding-top: 20px; border-top: 1px dashed #d8c09b33; }
.booking-page #customization-next { border: 1px solid var(--booking-gold); background: #efc17e12; box-shadow: none; color: #f6d9a8; }
.booking-page #customization-next:hover:not(:disabled) { background: #efc17e24; box-shadow: none; }

.booking-page :is(.booking-temperature, .booking-detergent, .booking-softener) { background-image: radial-gradient(120% 70% at 50% 0%, #ffffff12, transparent 60%), linear-gradient(180deg, #132841, #0a1a2c); box-shadow: inset 0 1px 0 #ffffff1f, inset 0 -1px 0 #00000066, 0 1px 0 #00000080, 0 12px 24px -12px #000000b3; transition: box-shadow .3s, border-color .2s; }
.booking-page :is(.booking-temperature, .booking-detergent, .booking-softener):hover { box-shadow: inset 0 1px 0 #ffffff2e, inset 0 -1px 0 #00000066, 0 1px 0 #00000080, 0 16px 28px -12px #000000d9; }
.booking-page :is(.booking-temperature, .booking-detergent, .booking-softener):has(input:checked) { border-color: var(--booking-gold); background-image: radial-gradient(120% 70% at 50% 0%, #efc17e24, transparent 62%), linear-gradient(180deg, #1a2f47, #0f2136); box-shadow: inset 0 1px 0 #f6d9a84d, inset 0 -1px 0 #00000066, 0 0 0 1px #efc17e33, 0 16px 30px -12px #efc17e2e, 0 20px 36px -18px #000000e6; }
.booking-page :is(.booking-detergent, .booking-softener) img { filter: drop-shadow(0 12px 12px #000000a6) drop-shadow(0 2px 3px #00000080); }

.booking-page .summary-your-boxes { display: none; margin-top: 16px; padding-top: 14px; border-top: 1px solid #d8c09b2b; }
@media (min-width: 851px) { .booking-page[data-booking-step=laundry] .summary-your-boxes:not([hidden]) { display: block; } }
.booking-page .summary-your-boxes h3,
.booking-page .summary-your-boxes summary { margin: 0 0 8px; color: var(--booking-gold); font: 600 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.booking-page .summary-your-boxes summary { display: flex; align-items: center; min-height: 32px; cursor: pointer; }
.booking-page .summary-your-boxes ul { margin: 0; padding: 0; list-style: none; }
.booking-page .summary-your-boxes button { width: 100%; min-height: 44px; padding: 7px 10px; border: 0; border-left: 2px solid transparent; border-radius: 0 3px 3px 0; background: none; }
.booking-page .summary-your-boxes button:hover { background: #ffffff08; }
.booking-page .summary-your-boxes button[aria-pressed=true] { border-left-color: var(--booking-gold); background: #efc17e0f; }
.booking-page .summary-your-boxes span { font: 500 13px/1.3 var(--sans); }
@media (max-width: 600px) {
  .booking-page .customization-mode .customization-actions { display: flex; width: 100%; }
  .booking-page .customization-mode .customization-actions .button { flex: 1; padding: 0 8px; }
  .booking-page .customization-boxes button { width: 168px; min-height: 52px; padding: 8px 12px; }
  .booking-page .booking-detergents > .customization-actions .button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .booking-page :is(.booking-temperature, .booking-detergent, .booking-softener), .booking-page .customization-boxes button { transition: none; }
}
/* Step 2 details aligned with the gold system (replaces the earlier blue accents). */
.booking-page .booking-flow-panel[data-booking-step=laundry] .booking-quantity { display: inline-grid; grid-template-columns: 42px minmax(36px, 1fr) 42px; gap: 0; height: 46px; overflow: hidden; border: 1px solid #d8c09b80; border-radius: 24px; background: none; }
.booking-page .booking-flow-panel[data-booking-step=laundry] .booking-quantity button { height: 44px; border: 0; border-radius: 22px; background: none; color: #f5f7fb; font-size: 19px; }
.booking-page .booking-flow-panel[data-booking-step=laundry] .booking-quantity button:hover:not(:disabled) { background: #efc17e14; color: var(--booking-gold); }
.booking-page .booking-flow-panel[data-booking-step=laundry] .booking-quantity button:disabled { color: #4c6077; }
.booking-page .booking-separation .booking-quantity { width: 150px; }
.booking-page .separation-pricing { color: #f6d9a8; }
.booking-page .temperature-badge { border-color: #efc17e66; color: var(--booking-gold); }
.booking-page .booking-flow-panel[data-booking-step=laundry] input[type=radio] { accent-color: var(--booking-gold); }
.booking-page .detergent-box-heading { margin: 18px 0 10px; padding: 0; border: 0; background: none; box-shadow: none; color: #f5f7fb; font-size: 28px; }
.booking-page :is(.detergent-included, .detergent-box-charge span, .softener-price, .softener-charge span, .detergent-dose-breakdown) { color: #f6d9a8; }
.booking-page :is(.booking-temperature, .booking-detergent, .booking-softener):has(input:focus-visible),
.booking-page :is(.customization-progress, .customization-actions button, #customization-apply, .detergent-box-section .booking-quantity button, .customization-boxes button, .summary-your-boxes button):focus-visible { outline: 2px solid var(--booking-gold); outline-offset: 4px; }
/* Two product cards per row below desktop width keeps Step 2 short on phones. */
@media (max-width: 999px) {
  .booking-page :is(.detergent-options, .softener-options) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 600px) {
  .booking-page :is(.booking-detergent, .booking-softener) { padding: 12px 10px; }
  .booking-page :is(.detergent-image, .softener-image) { height: 72px; }
  .booking-page .booking-detergent .detergent-name, .booking-page .booking-softener .softener-name { font-size: 20px; }
  .booking-page .booking-detergent .booking-description { font-size: 11.5px; }
}

/* One soft gold hairline family across Steps 1-2 and the order summary. */
.booking-page { --booking-line: #d8c09b40; }
.booking-page .customization-mode { border-color: #d8c09b40; }
.booking-page .box-softener { border-top-color: #d8c09b40; }
.booking-page .booking-flow-panel[data-booking-step=laundry] .booking-option { border-color: #d8c09b38; }
.booking-page .booking-flow-panel[data-booking-step=laundry] .booking-option:hover { border-color: #d8c09b80; }
.booking-page .booking-flow-panel[data-booking-step=laundry] .booking-option:has(input:checked) { border-color: var(--booking-gold); }
.booking-page .booking-care summary { border-color: #d8c09b66; color: #f6d9a8; }
.booking-page .customization-boxes button { border-color: #d8c09b38; }
.booking-page .customization-boxes button[aria-pressed=true] { border-color: var(--booking-gold); }
.booking-page .booking-detergents > .customization-actions { border-top-style: solid; border-top-color: #d8c09b40; }
/* Summary card: a single hairline between rows, no doubled rules. */
.booking-page .delivery-order-card .delivery-summary-compact .booking-subtotal { margin-top: 0; padding-top: 9px; border-top: 0; }
.booking-page .delivery-order-card .delivery-summary-compact > div:last-child { border-bottom: 0; }
.booking-page .delivery-order-card #delivery-summary-boxes { white-space: nowrap; }
.booking-page .delivery-order-card[data-summary-step=boxes] .delivery-summary-compact > div:nth-last-child(2) { border-bottom: 0; }
/* Only Save & Next Box remains below the products; boxes are reachable from the rail. */
.booking-page .booking-detergents > .customization-actions { justify-content: flex-end; }
/* Customization mode sits in the "Customize Your Boxes" header as a compact pill. */
.booking-page .detergents-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.booking-page .detergents-head .booking-section-title { margin: 0; }
.booking-page .detergents-head .customization-mode { margin: 0; padding: 0; border: 0; }
.booking-page .detergents-head .customization-mode .customization-actions { margin: 0; }
.booking-page .detergents-head .customization-mode .customization-actions .button { height: auto; min-height: 32px; padding: 0 14px; font-size: 12.5px; }
.booking-page #customization-mode-note { margin: 10px 0 0; }
@media (max-width: 600px) {
  .booking-page .detergents-head .customization-mode { width: 100%; }
  .booking-page .detergents-head .customization-mode .customization-actions .button { padding: 0 8px; font-size: 12px; }
}
/* The legacy rule targets #box-customization; match its weight so the compact pill applies. */
.booking-page #box-customization [data-customization-mode] { width: auto; height: auto; min-height: 32px; padding: 0 14px; font-size: 12.5px; line-height: 1.2; white-space: nowrap; }
@media (max-width: 600px) {
  .booking-page #box-customization .customization-actions { display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; }
  .booking-page #box-customization [data-customization-mode] { flex: 1 1 0; min-width: 0; min-height: 38px; padding: 4px 8px; border-radius: 19px; font-size: 11.5px; line-height: 1.15; white-space: normal; text-align: center; }
  .booking-page #box-customization .customization-actions { border-radius: 22px; }
}
/* "Same Settings for All Boxes": one shared product panel, no per-box navigation. */
.booking-page .booking-detergents[data-customization-mode=all] :is(#customization-boxes, .detergent-box-heading),
.booking-page .booking-detergents[data-customization-mode=all] > .customization-actions,
.booking-page .booking-detergents[data-customization-mode=all] > .customization-actions + .booking-help { display: none; }

/* Whites question (owner decision 2026-10-24): Yes / No / Not sure, then an order-wide white item count. */
.booking-page .booking-separation { margin-top: 18px; padding: 22px 24px; border: 1px solid #d8c09b38; border-radius: 12px; background-image: radial-gradient(120% 70% at 50% 0%, #ffffff0d, transparent 60%), linear-gradient(180deg, #11253d, #0a1a2c); box-shadow: inset 0 1px 0 #ffffff17, 0 12px 24px -12px #000000b3; }
.booking-page .booking-separation[data-selected=true] { border-color: #efc17e99; }
.booking-page .booking-separation h3 { margin: 0 0 6px; font: 400 26px/1.2 var(--serif); }
.booking-page .separation-choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.booking-page .separation-choice { position: relative; cursor: pointer; }
.booking-page .separation-choice input { position: absolute; opacity: 0; }
.booking-page .separation-choice span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border: 1px solid #d8c09b55; border-radius: 24px; font-size: 14px; transition: border-color .2s, background .2s, color .2s; }
.booking-page .separation-choice:hover span { border-color: #d8c09b99; }
.booking-page .separation-choice input:checked + span { border-color: var(--booking-gold); background: var(--booking-gold); color: #111a26; font-weight: 500; }
.booking-page .separation-choice input:focus-visible + span { outline: 2px solid var(--booking-gold); outline-offset: 3px; }
.booking-page .separation-choice input:disabled + span { opacity: .55; cursor: not-allowed; }
.booking-page .separation-unsure { margin-top: 12px; }
.booking-page .separation-details { margin-top: 18px; padding-top: 16px; border-top: 1px solid #d8c09b33; }
.booking-page .separation-details .separation-pricing { margin: 0 0 12px; font-size: 13.5px; }
.booking-page .separation-count { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.booking-page .separation-count-label { font-size: 15px; font-weight: 500; }
.booking-page .separation-count .booking-quantity { width: 150px; }
.booking-page .separation-charge { margin: 12px 0 0; font-size: 13.5px; color: var(--booking-muted); }
.booking-page .separation-charge strong { color: #f6d9a8; font-weight: 600; }
.booking-page .separation-confirm { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; min-height: 44px; padding: 10px 12px; border: 1px solid #d8c09b40; border-radius: 8px; cursor: pointer; font-size: 14px; }
.booking-page .separation-confirm input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--booking-gold); }
.booking-page .separation-confirm:has(input:checked) { border-color: var(--booking-gold); background: #efc17e0f; }
.booking-page .separation-confirm:has(input:focus-visible) { outline: 2px solid var(--booking-gold); outline-offset: 3px; }
@media (max-width: 600px) {
  .booking-page .booking-separation { padding: 18px; }
  .booking-page .separation-choice { flex: 1 1 100%; }
  .booking-page .separation-choice span { width: 100%; justify-content: center; }
}

/* Phase 4 — Step 3 from the luxe study: gold-hairline fields, locked launch city/state,
   delivery services as one list (name and description left, upgrade price right). */
.booking-page .booking-delivery { border-top-color: #d8c09b40; }
.booking-page .booking-delivery :is(input:not([type=radio]):not([type=checkbox]), textarea, select) { border-color: #d8c09b4d; background: #06121f; color: #f5f7fb; transition: border-color .2s, box-shadow .2s; }
.booking-page .booking-delivery :is(input:not([type=radio]):not([type=checkbox]), textarea, select):hover { border-color: #d8c09b80; }
.booking-page .booking-delivery :is(input, textarea, select):focus-visible { outline: none; border-color: var(--booking-gold); box-shadow: 0 0 0 3px #efc17e2e; }
.booking-page .booking-delivery :is(input, textarea, select)[aria-invalid=true] { border-color: #ffb7b7; }
.booking-page .booking-delivery input[readonly] { border-color: transparent; background: #efc17e0a; color: #f6d9a8; cursor: default; box-shadow: none; }
.booking-page .booking-delivery :is(input[type=checkbox], input[type=radio]) { accent-color: var(--booking-gold); }
.booking-page .booking-delivery input[type=date] { color-scheme: dark; }
.booking-page .delivery-phone-input { border-color: #d8c09b4d; background: #06121f; transition: border-color .2s, box-shadow .2s; }
.booking-page .delivery-phone-input:focus-within { border-color: var(--booking-gold); box-shadow: 0 0 0 3px #efc17e2e; }
.booking-page .delivery-phone-input > span { border-right-color: #d8c09b4d; color: var(--booking-muted); }
.booking-page .delivery-phone-input input[type=tel]:focus-visible { box-shadow: none; }
.booking-page .delivery-distance-pending { color: #f6d9a8; }

.booking-page .delivery-services { display: block; margin-top: 12px; border-top: 1px solid #d8c09b40; }
.booking-page .booking-delivery-service { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; min-height: 0; padding: 14px 16px; border: 0; border-bottom: 1px solid #d8c09b40; border-radius: 0; background: none; box-shadow: none; cursor: pointer; transition: background .2s; }
.booking-page .booking-delivery-service:hover { border-color: #d8c09b40; background: #ffffff06; }
.booking-page .booking-delivery-service:has(input:checked) { background: #efc17e0d; box-shadow: inset 3px 0 0 var(--booking-gold); }
.booking-page .booking-delivery-service:has(input:focus-visible) { outline: 2px solid var(--booking-gold); outline-offset: -2px; }
.booking-page .booking-delivery-service .delivery-service-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 3px; align-items: center; }
.booking-page .booking-delivery-service .delivery-service-name { grid-column: 1; grid-row: 1; font: 500 15px/1.3 var(--sans); }
.booking-page .booking-delivery-service .delivery-service-description { grid-column: 1; grid-row: 2; font-size: 12.5px; color: var(--booking-muted); }
.booking-page .booking-delivery-service .delivery-service-price { grid-column: 2; grid-row: 1 / 3; color: #f6d9a8; font: 400 23px/1 var(--serif); white-space: nowrap; }
@media (max-width: 600px) {
  .booking-page .booking-delivery-service { padding: 12px 10px; gap: 12px; }
  .booking-page .booking-delivery-service .delivery-service-price { font-size: 20px; }
}
/* Same weight as the general field rule above, so the locked launch city/state styling applies. */
.booking-page .booking-delivery input[readonly]:not([type=radio]):not([type=checkbox]) { border-color: transparent; background: #efc17e0a; color: #f6d9a8; cursor: default; box-shadow: none; }

/* Phase 5 — Review in the same two-column layout as Steps 2-3: details left, sticky summary right. */
.booking-page [data-summary-slot="review"] { width: auto; margin: 0; }
.booking-page [data-summary-slot="review"] .delivery-order-card { position: sticky; top: 90px; }
.booking-page .review-layout { margin-top: 18px; }
.booking-page .review-section { padding: 20px 0; border-bottom: 1px solid #d8c09b40; }
.booking-page .review-section:first-child { padding-top: 0; }
.booking-page .review-section h3 { margin: 0 0 6px; font: 400 26px/1.2 var(--serif); }
.booking-page .review-list strong { color: #f6d9a8; }
.booking-page #review-product-list li + li { border-top-color: #d8c09b33; }
.booking-page .review-details > div { border-color: #d8c09b2b; }
.booking-page .review-details dt { color: var(--booking-muted); }
.booking-page .review-edit-link { color: var(--booking-gold); text-decoration-color: #efc17e88; }
.booking-page .review-edit-link:hover { color: #ffe0aa; }
.booking-page :is(.review-edit-link, .review-problems a, .review-focus-target):focus-visible { outline: 2px solid var(--booking-gold); outline-offset: 4px; }
.booking-page .review-status { margin-top: 18px; }
@media (max-width: 850px) { .booking-page [data-summary-slot="review"] .delivery-order-card { position: static; } }
/* Per-box Edit link under each box in the review's Laundry Products list. */
.booking-page .review-box-edit { margin-top: 4px; min-height: 36px; }

/* Phase 6 — phone dock with estimated subtotal and the step action (owner-approved study pattern). */
.booking-page .booking-dock { position: fixed; inset: auto 0 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(8, 20, 35, .95); border-top: 1px solid #d8c09b80; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.booking-page .booking-dock[hidden] { display: none; }
.booking-page .booking-dock span { display: block; color: var(--booking-muted); font: 500 10px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.booking-page .booking-dock strong { color: var(--booking-gold); font: 400 28px/1 var(--serif); font-variant-numeric: tabular-nums; }
.booking-page .booking-dock .button.primary { height: auto; min-width: 140px; min-height: 44px; padding: 0 22px; border: 0; background: linear-gradient(180deg, #f3cb8c, #e3b06a); color: #111a26; font-size: 14px; box-shadow: 0 8px 24px #efc17e2e; }
.booking-page .booking-dock .button.primary:disabled { background: #3a4a5e; color: #9aaabb; box-shadow: none; }
@media (max-width: 760px) { .booking-page .site-footer.cinematic-footer { padding-bottom: 96px; } }

/* Schedule Pickup in the official MIZOOR design (approved 2026-10-31).
   Loaded after the earlier skins, so it only restyles: booking rules, markup hooks and behavior are unchanged. */
.booking-official {
  --serif: 'Outfit', 'Albert Sans', system-ui, sans-serif;
  --sans: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --booking-gold: #3cc7e2;
  --booking-silver: #cdd6e0;
  --booking-blue: #3cc7e2;
  --booking-muted: #8e9cad;
  --booking-line: rgba(205,214,224,.14);
  --b-card: #1b2331;
  --b-card-2: #202a3a;
  --b-line: rgba(205,214,224,.14);
  --b-line-strong: rgba(205,214,224,.26);
  background: #131925;
  color: var(--silver);
}
.booking-official .study { font-size: 16px; line-height: 1.6; }
.booking-official #main { background: radial-gradient(60% 50% at 80% 0%, #22304a 0%, rgba(34,48,74,0) 70%), #131925; color: var(--silver); padding-top: 120px; }
.booking-official #main::before { display: none; }

/* Generated mapping: gold accents from the earlier skins shown in the logo cyan */
.booking-official { --booking-gold: #3cc7e2; }
.booking-official .booking-step { border: 1px solid #3cc7e270; }
.booking-official #booking-view .box-selection-choices .booking-option[data-box] .booking-quantity button:hover:not(:disabled) { background: #3cc7e21c; }
.booking-official .box-policy-link { text-decoration-color: #3cc7e299; }
.booking-official .box-policy-link:hover { color: #3cc7e2; }
.booking-official .box-policy-dialog { border-color: #3cc7e28c; }
.booking-official .box-policy-weights thead th { background: #3cc7e20b; }
.booking-official .box-policy-packing { border-color: #3cc7e255; background: #3cc7e20a; }
.booking-official .box-policy-close:hover { background: #3cc7e21a; }
.booking-official .button.outline { border-color: #3cc7e28c; }
.booking-official .booking-progress ol { border-top: 1px solid #3cc7e247; }
.booking-official .booking-progress li[aria-current=step]::after { background: #3cc7e2; box-shadow: 0 0 0 2px #3cc7e2, 0 0 10px 3px #3cc7e2cc, 0 0 26px 8px #3cc7e255; }
.booking-official .booking-flow-navigation .button.primary { background: linear-gradient(180deg, #3cc7e2, #3cc7e2); box-shadow: 0 8px 24px #3cc7e22e; }
.booking-official .booking-flow-navigation .button.primary:hover:not(:disabled) { background: linear-gradient(180deg, #3cc7e2, #3cc7e2); box-shadow: 0 12px 28px #3cc7e244; }
.booking-official #booking-view .box-selection-choices .booking-option[data-box][data-selected=true] { background: linear-gradient(90deg, transparent, #3cc7e20d 40%, transparent); }
.booking-official [data-box][data-selected=true] .booking-box-photo { box-shadow: inset 0 1px 0 #ffffff40, 0 0 0 1px #3cc7e28c, 0 20px 32px -14px #3cc7e240, 0 6px 14px #00000080; }
.booking-official #booking-view .box-selection-choices .booking-option[data-box] .booking-quantity { border: 1px solid #3cc7e280; }
.booking-official #booking-view .box-selection-choices .booking-option[data-box], .booking-official #booking-view .box-selection-choices .booking-option[data-box][data-selected=true] { border-bottom-color: #3cc7e240; }
.booking-official #booking-view .box-selection-choices .booking-option[data-box]:first-child { border-top-color: #3cc7e240; }
.booking-official .customization-mode .customization-actions { border: 1px solid #3cc7e280; }
.booking-official .customization-boxes button:hover { border-color: #3cc7e280; }
.booking-official .customization-boxes button[aria-pressed=true] { background: #3cc7e214; box-shadow: inset 0 2px 0 var(--booking-gold), 0 12px 24px -14px #3cc7e255; }
.booking-official .customization-boxes button[aria-pressed=true] span { color: #3cc7e2; }
.booking-official .customization-progress { background: #3cc7e20a; }
.booking-official .booking-detergents > .customization-actions { border-top: 1px dashed #3cc7e233; }
.booking-official #customization-next { background: #3cc7e212; color: #3cc7e2; }
.booking-official #customization-next:hover:not(:disabled) { background: #3cc7e224; }
.booking-official :is(.booking-temperature, .booking-official .booking-detergent, .booking-official .booking-softener):has(input:checked) { background-image: radial-gradient(120% 70% at 50% 0%, #3cc7e224, transparent 62%), linear-gradient(180deg, #1a2f47, #0f2136); box-shadow: inset 0 1px 0 #3cc7e24d, inset 0 -1px 0 #00000066, 0 0 0 1px #3cc7e233, 0 16px 30px -12px #3cc7e22e, 0 20px 36px -18px #000000e6; }
.booking-official .summary-your-boxes { border-top: 1px solid #3cc7e22b; }
.booking-official .summary-your-boxes button[aria-pressed=true] { background: #3cc7e20f; }
.booking-official .booking-flow-panel[data-booking-step=laundry] .booking-quantity { border: 1px solid #3cc7e280; }
.booking-official .booking-flow-panel[data-booking-step=laundry] .booking-quantity button:hover:not(:disabled) { background: #3cc7e214; }
.booking-official .separation-pricing { color: #3cc7e2; }
.booking-official .temperature-badge { border-color: #3cc7e266; }
.booking-official :is(.detergent-included, .booking-official .detergent-box-charge span, .booking-official .softener-price, .booking-official .softener-charge span, .booking-official .detergent-dose-breakdown) { color: #3cc7e2; }
.booking-official { --booking-line: #3cc7e240; }
.booking-official .customization-mode { border-color: #3cc7e240; }
.booking-official .box-softener { border-top-color: #3cc7e240; }
.booking-official .booking-flow-panel[data-booking-step=laundry] .booking-option { border-color: #3cc7e238; }
.booking-official .booking-flow-panel[data-booking-step=laundry] .booking-option:hover { border-color: #3cc7e280; }
.booking-official .booking-care summary { border-color: #3cc7e266; color: #3cc7e2; }
.booking-official .customization-boxes button { border-color: #3cc7e238; }
.booking-official .booking-detergents > .customization-actions { border-top-color: #3cc7e240; }
.booking-official .booking-separation { border: 1px solid #3cc7e238; }
.booking-official .booking-separation[data-selected=true] { border-color: #3cc7e299; }
.booking-official .separation-choice span { border: 1px solid #3cc7e255; }
.booking-official .separation-choice:hover span { border-color: #3cc7e299; }
.booking-official .separation-details { border-top: 1px solid #3cc7e233; }
.booking-official .separation-charge strong { color: #3cc7e2; }
.booking-official .separation-confirm { border: 1px solid #3cc7e240; }
.booking-official .separation-confirm:has(input:checked) { background: #3cc7e20f; }
.booking-official .booking-delivery { border-top-color: #3cc7e240; }
.booking-official .booking-delivery :is(input:not([type=radio]):not([type=checkbox]), .booking-official textarea, .booking-official select) { border-color: #3cc7e24d; }
.booking-official .booking-delivery :is(input:not([type=radio]):not([type=checkbox]), .booking-official textarea, .booking-official select):hover { border-color: #3cc7e280; }
.booking-official .booking-delivery :is(input, .booking-official textarea, .booking-official select):focus-visible { box-shadow: 0 0 0 3px #3cc7e22e; }
.booking-official .booking-delivery input[readonly] { background: #3cc7e20a; color: #3cc7e2; }
.booking-official .delivery-phone-input { border-color: #3cc7e24d; }
.booking-official .delivery-phone-input:focus-within { box-shadow: 0 0 0 3px #3cc7e22e; }
.booking-official .delivery-phone-input > span { border-right-color: #3cc7e24d; }
.booking-official .delivery-distance-pending { color: #3cc7e2; }
.booking-official .delivery-services { border-top: 1px solid #3cc7e240; }
.booking-official .booking-delivery-service { border-bottom: 1px solid #3cc7e240; }
.booking-official .booking-delivery-service:hover { border-color: #3cc7e240; }
.booking-official .booking-delivery-service:has(input:checked) { background: #3cc7e20d; }
.booking-official .booking-delivery-service .delivery-service-price { color: #3cc7e2; }
.booking-official .booking-delivery input[readonly]:not([type=radio]):not([type=checkbox]) { background: #3cc7e20a; color: #3cc7e2; }
.booking-official .review-section { border-bottom: 1px solid #3cc7e240; }
.booking-official .review-list strong { color: #3cc7e2; }
.booking-official #review-product-list li + li { border-top-color: #3cc7e233; }
.booking-official .review-details > div { border-color: #3cc7e22b; }
.booking-official .review-edit-link { text-decoration-color: #3cc7e288; }
.booking-official .review-edit-link:hover { color: #3cc7e2; }
.booking-official .booking-dock { border-top: 1px solid #3cc7e280; }
.booking-official .booking-dock .button.primary { background: linear-gradient(180deg, #3cc7e2, #3cc7e2); box-shadow: 0 8px 24px #3cc7e22e; }
.booking-official .booking-progress li[data-complete=true] { color:#3cc7e2; border-color:#3cc7e270; }
.booking-official .booking-progress li[aria-current=step] { border-color:#3cc7e2; box-shadow:inset 0 2px 0 #3cc7e2; }
.booking-official .booking-flow-navigation { border-top:1px solid #3cc7e242; }
.booking-official .delivery-group { border-bottom:1px solid #3cc7e242; }
.booking-official .delivery-group>h3 { color:#3cc7e2; }
.booking-official .delivery-order-card { border:1px solid #3cc7e270; border-top:2px solid #3cc7e2; }
.booking-official .delivery-order-card .delivery-summary-compact>div { border-bottom:1px solid #3cc7e22b; }
.booking-official .delivery-order-card .delivery-summary-compact .booking-subtotal dd { color:#3cc7e2; }
.booking-official .delivery-summary-details summary { color:#3cc7e2; }
.booking-official .delivery-summary-details summary:focus-visible { outline:2px solid #3cc7e2; }
.booking-official .delivery-summary-compact small { color:#3cc7e2; }

/* Official header and footer: undo the older skins' brand rules */
.booking-official .site-header .brand { width: auto; height: auto; background: none; flex: none; }
.booking-official .site-header .brand > * { visibility: visible; }
.booking-official .site-header .brand-emblem { width: 3rem; height: auto; }
.booking-official .site-header .brand-name { width: 0; min-width: 100%; height: auto; }
.booking-official .site-header .brand-line { font-family: var(--sans); }
.booking-official .site-header .site-nav a, .booking-official .site-header .button-small { font-family: var(--sans); }
@media (max-width: 760px) { .booking-official .site-header .brand-emblem { width: 3rem; height: auto; } }
@media (max-width: 480px) { .booking-official .site-header .brand-emblem { width: 2.8rem; } }
.booking-official .site-footer .footer-col a, .booking-official .site-footer .footer-col span { font-family: var(--sans); }
.booking-official .site-footer h2 { font-family: var(--serif); }

.booking-official .site-header .header-actions { display: flex !important; order: initial; width: auto; margin-left: 0; border: 0; padding: 0; gap: 1.4rem; justify-content: flex-end; white-space: nowrap; }
.booking-official .site-header .site-nav { display: flex !important; }

.booking-official .site-header { background: rgba(15, 20, 31, .96); }

/* Page title and progress */
.booking-official .booking-shell { width: min(calc(100% - 2 * var(--gutter)), 1240px); padding: clamp(2.5rem, 5vw, 4rem) 0 5rem; }
.booking-official .booking-shell h1 { font: 600 clamp(2.8rem, 6vw, 5.4rem)/1.02 var(--serif); letter-spacing: -.02em; color: #f4f6f8; margin: 0 0 .9rem; }
.booking-official .booking-intro { color: var(--silver); font-size: 1.1rem; margin-bottom: 2.5rem; }
.booking-official .booking-shell { padding-top: clamp(2.5rem, 5vw, 4rem); }
.booking-official .booking-shell h1 { line-height: 1.02; }
.booking-official .booking-progress ol { border-top-color: var(--b-line); }
.booking-official .booking-progress li { text-shadow: none; }
.booking-official .booking-progress li::before { background: var(--cyan); }
.booking-official .booking-progress li[aria-current=step]::after { display: none; }
.booking-official[data-booking-step]:not([data-booking-step=boxes]) .booking-shell h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.booking-official .booking-flow-navigation .button.primary { background: var(--linen); color: var(--ink); box-shadow: none; }
.booking-official .booking-flow-navigation .button.primary:hover:not(:disabled) { background: #fff; box-shadow: none; transform: none; }
.booking-official .booking-flow-navigation .button.primary:disabled { background: rgba(243,241,234,.18); color: rgba(243,241,234,.55); }
.booking-official .booking-progress li { color: var(--silver-dim); font-family: var(--sans); }
.booking-official .booking-progress li strong { font-weight: 500; }
.booking-official .booking-progress li span { border-color: var(--b-line-strong); background: transparent; color: var(--silver); box-shadow: none; font-family: var(--sans); }
.booking-official .booking-progress li[aria-current=step] { color: #fff; }
.booking-official .booking-progress li[aria-current=step] span { background: var(--linen); border-color: var(--linen); color: var(--ink); }
.booking-official .booking-progress li[data-complete=true] span { border-color: var(--cyan); color: var(--cyan); background: transparent; }
.booking-official .booking-progress li[data-complete=true] span,
.booking-official .booking-progress li.complete span { border-color: var(--cyan); color: var(--cyan); }

/* Step panels */
.booking-official .booking-step { border: 1px solid var(--b-line); border-radius: 24px; background: rgba(27,35,49,.72); box-shadow: 0 40px 80px -50px rgba(0,0,0,.7); }
.booking-official .booking-shell h2,
.booking-official #booking-view #box-title,
.booking-official .booking-flow-panel > h2,
.booking-official .booking-review > h2 { font: 600 clamp(2rem, 3.6vw, 3rem)/1.05 var(--serif); letter-spacing: -.02em; color: #f4f6f8; }
.booking-official .booking-shell h3,
.booking-official .booking-section-title { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; color: #f4f6f8; }
.booking-official .booking-help,
.booking-official .booking-capacity-note,
.booking-official .booking-note { color: var(--silver-dim); }
.booking-official [data-step-number]::before,
.booking-official .booking-flow-panel::before { display: none !important; content: none !important; }

/* Cards and options */
.booking-official .booking-option { border-color: var(--b-line); background: var(--b-card); box-shadow: none; border-radius: 16px; }
.booking-official .booking-option:hover { border-color: var(--b-line-strong); }
.booking-official .booking-option[data-selected=true],
.booking-official .booking-option:has(input:checked) { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; }
.booking-official :is(input[type=radio], input[type=checkbox]) { accent-color: var(--cyan); }

/* Box rows: a drawn box sized to its capacity replaces the old generated photos */
.booking-official #booking-view .box-selection-choices .booking-option[data-box] { grid-template-columns: 72px minmax(0, 1fr) auto 132px; column-gap: 22px; border-radius: 0; background: none; box-shadow: none; border-color: transparent; border-bottom: 1px solid var(--b-line); }
.booking-official #booking-view .box-selection-choices .booking-option[data-box]:first-child { border-top: 1px solid var(--b-line); }
.booking-official #booking-view .box-selection-choices .booking-option[data-box][data-selected=true] { background: linear-gradient(90deg, rgba(60,199,226,.07), rgba(60,199,226,0) 70%); border-bottom-color: var(--cyan); box-shadow: none; }
.booking-official #booking-view .box-selection-choices .booking-option[data-box]::before {
  content: ""; grid-column: 1; grid-row: 1 / 4; justify-self: center; align-self: center; width: var(--box-w, 46px); aspect-ratio: 1.45;
  border-radius: 4px 4px 7px 7px; border-top: 5px solid #f3f6f9;
  background: radial-gradient(closest-side, rgba(19,25,37,.55) 96%, transparent) 50% 34% / 34% 12% no-repeat, linear-gradient(180deg, #dfe6ee, #aab6c4);
  box-shadow: 0 -2px 0 #9fb0c1, 0 14px 22px -12px rgba(0,0,0,.8);
}
.booking-official #booking-view [data-box=small]::before { --box-w: 44px; }
.booking-official #booking-view [data-box=mizoor]::before { --box-w: 54px; }
.booking-official #booking-view [data-box=family]::before { --box-w: 66px; }
.booking-official #booking-view .box-selection-choices .booking-option[data-box] .booking-box-name { font: 600 1.6rem/1.1 var(--serif); color: #f4f6f8; }
.booking-official #booking-view .box-selection-choices .booking-option[data-box] .booking-capacity { color: var(--silver); font-size: .9rem; }
.booking-official #booking-view .box-selection-choices .booking-option[data-box] .booking-item-estimate { color: var(--silver-dim); font-size: .85rem; }
.booking-official #booking-view .box-selection-choices .booking-option[data-box] .booking-price { font: 600 1.9rem/1 var(--serif); color: #fff; }
.booking-official #booking-view .box-selection-choices .booking-option[data-box] .booking-price small { font: 400 .75rem/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--silver-dim); }

/* Quantity steppers */
.booking-official .booking-quantity { border: 1px solid var(--b-line-strong) !important; border-radius: 999px; background: rgba(10,14,22,.4); }
.booking-official .booking-quantity button { color: #fff; border-radius: 999px; }
.booking-official .booking-quantity button:hover:not(:disabled) { background: rgba(205,214,224,.12) !important; color: #fff !important; }
.booking-official .booking-quantity-value { font-family: var(--sans); color: #fff; }

/* Order summary card: the outer card carries the frame, the inner summary is flat */
.booking-official .delivery-order-card { background: var(--b-card) !important; border: 1px solid var(--b-line) !important; border-top: 1px solid var(--b-line) !important; border-radius: 20px !important; box-shadow: none !important; padding: 1.6rem !important; }
.booking-official .delivery-order-card .booking-summary { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
.booking-official .delivery-order-card :is(h2, h3) { font: 600 1.45rem/1.15 var(--serif) !important; color: #fff !important; letter-spacing: -.01em; }
.booking-official .delivery-order-card :is(dt, p, small, summary) { color: var(--silver-dim) !important; }
.booking-official .delivery-order-card dd { color: #fff !important; font-family: var(--sans); }
.booking-official .delivery-order-card dl > div { border-color: var(--b-line) !important; }
.booking-official .delivery-order-card summary { color: var(--cyan) !important; }

/* Links and buttons */
.booking-official .box-policy-link,
.booking-official .booking-shell a:not(.button) { color: var(--cyan); text-decoration-color: rgba(60,199,226,.5); }
.booking-official .booking-selection { color: var(--silver); }
.booking-official .booking-shell .button,
.booking-official .booking-dock .button { height: auto; min-height: 3rem; padding: 0 1.6rem; font: 650 1rem/1 var(--sans); border-radius: 999px; box-shadow: none; text-shadow: none; }
.booking-official .booking-shell .button.primary,
.booking-official .booking-dock .button.primary { background: var(--linen) !important; color: var(--ink) !important; border: 0 !important; }
.booking-official .booking-shell .button.primary:hover:not(:disabled) { background: #fff !important; }
.booking-official .booking-shell .button.primary:disabled { background: rgba(243,241,234,.18) !important; color: rgba(243,241,234,.5) !important; }
.booking-official .booking-shell .button.outline { background: transparent !important; color: #fff !important; border: 1px solid var(--b-line-strong) !important; }
.booking-official .booking-shell .button.outline:hover { border-color: #fff !important; }
/* Selected option in two-way switches (e.g. Same settings for all boxes / Customize each box): solid linen with dark text, readable on phones */
.booking-official .booking-shell .customization-actions .button.outline { border-color: transparent !important; }
.booking-official .booking-shell .button.outline[aria-pressed=true],
.booking-official .booking-shell .button.outline[aria-pressed=true]:hover:not(:disabled) { background: var(--linen) !important; background-image: none !important; color: var(--ink) !important; border-color: transparent !important; }
.booking-official .booking-shell :is(a, button):focus-visible,
.booking-official :is(input, select, textarea, summary):focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Form fields on step 3 */
.booking-official .booking-shell :is(input[type=text], input[type=tel], input[type=date], input:not([type]), select, textarea) { background: rgba(10,14,22,.55) !important; border: 1px solid var(--b-line-strong) !important; border-radius: 12px !important; color: #fff !important; font-family: var(--sans); }
.booking-official .booking-shell :is(input, select, textarea):focus { border-color: var(--cyan) !important; }
.booking-official .booking-shell :is(input, select, textarea):disabled { opacity: .6; }
.booking-official .booking-shell :is(label, legend) { color: var(--silver); }

/* Dialogs keep their wording; the policy title is shown in sentence case */
.booking-official .box-policy-dialog { background: #1b2331 !important; border: 1px solid var(--b-line) !important; border-radius: 22px !important; color: var(--silver); }
.booking-official .box-policy-dialog::backdrop { background: rgba(10,14,22,.82); }
.booking-official .box-policy-dialog h2 { font: 600 1.6rem/1.15 var(--serif) !important; color: #fff !important; text-transform: lowercase; }
.booking-official .box-policy-dialog h2::first-letter { text-transform: uppercase; }
.booking-official .box-policy-rules strong,
.booking-official .box-policy-weights thead th { color: #fff !important; }

/* Phone dock and footer */
.booking-official .booking-dock { background: rgba(19,25,37,.96); border-top: 1px solid var(--b-line); }
.booking-official .booking-dock strong { font-family: var(--serif); color: #fff; }
.booking-official .booking-footer { padding-top: 3.5rem; }
.booking-official .booking-footer .footer-main { margin-top: 0; }

@media (max-width: 860px) {
  .booking-official #main { padding-top: 175px; }
}
@media (max-width: 600px) {
  .booking-official #booking-view .box-selection-choices .booking-option[data-box] { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .booking-official #booking-view .box-selection-choices .booking-option[data-box] .booking-price { grid-column: 1 / 3; grid-row: 4; text-align: left; align-self: center; margin-top: .8rem; display: flex; align-items: baseline; gap: .4rem; }
  .booking-official #booking-view .box-selection-choices .booking-option[data-box] .booking-price small { display: inline; margin: 0; }
  .booking-official #booking-view .box-selection-choices .booking-option[data-box] .booking-quantity { grid-column: 3; grid-row: 4; justify-self: end; margin-top: .8rem; }
}

/* Headings that receive focus from script when a step opens: no box around them */
.booking-official :is(h1, h2, h3)[tabindex="-1"]:focus { outline: none; }
.booking-official .booking-dock span { text-transform: none; letter-spacing: 0; font-family: var(--sans); color: var(--silver-dim); }

/* Life on the booking page: bubbles behind the title, steps that arrive, boxes that lift when chosen */
.booking-official #main { position: relative; isolation: isolate; }
.booking-official .booking-bubbles { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 620px; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.booking-official .booking-shell { position: relative; z-index: 1; }
.booking-official #main:has(.booking-bubbles) .booking-shell > :is(h1, .booking-intro, .booking-progress) { position: relative; }
.booking-official .booking-shell h1.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.booking-official .booking-shell h1.split .w > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .booking-official [data-booking-step]:not([hidden]) { animation: step-in .7s var(--ease) both; }
  .booking-official #booking-view .box-selection-choices .booking-option[data-box]::before { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
  .booking-official #booking-view .box-selection-choices .booking-option[data-box][data-selected=true]::before { transform: translateY(-4px) rotate(-3deg); box-shadow: 0 -2px 0 #9fb0c1, 0 18px 26px -12px rgba(60,199,226,.55); }
  .booking-official .booking-option { transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease); }
  .booking-official .booking-option:has(input:checked) { transform: translateY(-2px); }
  .booking-official .booking-progress li::before { transition: width .8s var(--ease); }
}
@keyframes step-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Box supply choice (step 1) and no-answer choice (step 3) */
.booking-official .box-supply { border: 0; padding: 0; margin: 2.2rem 0 0; min-width: 0; }
.booking-official .box-supply legend { padding: 0; font-size: 1.35rem; margin-bottom: .4rem; }
.booking-official .box-supply-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.booking-official .box-supply-option { position: relative; display: grid; align-content: start; gap: .35rem; padding: 1.1rem 1.1rem 1.2rem 2.9rem; cursor: pointer; }
.booking-official .box-supply-option input { position: absolute; left: 1.1rem; top: 1.25rem; margin: 0; }
.booking-official .box-supply-name { font: 600 1.05rem/1.2 var(--serif); color: #fff; }
.booking-official .box-supply-price { font-weight: 600; color: var(--cyan); font-size: .95rem; }
.booking-official .box-supply-option .booking-help { font-size: .85rem; line-height: 1.5; margin: 0; }
.booking-official .box-supply-option[data-selected=true] { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; background: rgba(60,199,226,.06); }
.booking-official .box-supply-option:has(input:disabled) { cursor: not-allowed; opacity: .55; }
.booking-official .review-supply { margin: .4rem 0 .2rem; color: #fff; }
.booking-official .delivery-no-answer { border: 0; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .6rem; }
.booking-official .delivery-no-answer legend { font-weight: 600; color: #fff; margin-bottom: .2rem; padding: 0; }
.booking-official .delivery-no-answer .no-answer-option { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: .8rem; padding: .9rem 1.1rem; cursor: pointer; min-height: 0; }
.booking-official .no-answer-option input { margin: 0; flex: none; }
@media (max-width: 760px) { .booking-official .box-supply-options { grid-template-columns: 1fr; } }

/* Optional products fold away; the review shows the cancellation rule */
.booking-official details.optional-products { margin-top: 1.4rem; border: 1px solid var(--b-line); border-radius: 16px; padding: 0 1.1rem; }
.booking-official details.optional-products > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; font: 600 1.05rem/1.2 var(--serif); color: #fff; }
.booking-official details.optional-products > summary::-webkit-details-marker { display: none; }
.booking-official details.optional-products > summary span { color: var(--silver-dim); font: 400 .9rem var(--sans); margin-right: auto; }
.booking-official details.optional-products > summary::after { content: "+"; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border: 1px solid var(--b-line-strong); border-radius: 50%; font: 400 1.1rem/1 var(--sans); color: #fff; flex: none; }
.booking-official details.optional-products[open] > summary::after { content: "\2212"; }
.booking-official details.optional-products[open] { padding-bottom: 1.1rem; }
.booking-official details.optional-products .softener-choice-group legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.booking-official .review-cancel { margin: 1.2rem 0 .6rem; padding: .9rem 1.1rem; border-radius: 14px; background: rgba(60,199,226,.07); border: 1px solid rgba(60,199,226,.25); color: var(--silver); }
.booking-official .summary-your-boxes :is(h3, summary) { text-transform: none !important; letter-spacing: -.01em !important; font: 600 1.2rem/1.2 var(--serif) !important; color: #fff !important; }

/* Box drawing (owner request 2026-11-01): a three-quarter view with lid, front, side and a handle, so it reads as a box, not a flat tray. */
.booking-official #booking-view .box-selection-choices .booking-option[data-box]::before {
  --d: 10px; --hw: 16px;
  width: var(--bw, 58px); height: var(--bh, 40px); aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none;
  clip-path: polygon(0 var(--d), var(--d) 0, 100% 0, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0 100%);
  background:
    /* handle cut into the front */
    radial-gradient(closest-side, #1a2232 82%, transparent) calc((var(--bw, 58px) - var(--d) - var(--hw)) / 2) calc(var(--d) + (var(--bh, 40px) - var(--d)) * .32) / var(--hw) 5px no-repeat,
    /* lid rim along the top of the front */
    linear-gradient(#f7f9fb, #c9d3de) 0 var(--d) / calc(100% - var(--d)) 4px no-repeat,
    /* soft light from the top left */
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.14)),
    /* lid, side and front faces meeting at the near top corner */
    conic-gradient(from 0deg at calc(100% - var(--d)) var(--d), #f1f5f9 0 45deg, #8a99aa 45deg 180deg, #cfd8e2 180deg 270deg, #f1f5f9 270deg);
  filter: drop-shadow(0 10px 10px rgba(0,0,0,.45));
}
.booking-official #booking-view [data-box=small]::before { --bw: 48px; --bh: 34px; --d: 8px; --hw: 13px; }
.booking-official #booking-view [data-box=mizoor]::before { --bw: 58px; --bh: 40px; --d: 10px; --hw: 16px; }
.booking-official #booking-view [data-box=family]::before { --bw: 70px; --bh: 48px; --d: 12px; --hw: 19px; }
.booking-official #booking-view .booking-option[data-box][data-selected=true]::before { filter: drop-shadow(0 10px 12px rgba(60,199,226,.35)); }
@media (prefers-reduced-motion: no-preference) {
  .booking-official #booking-view .box-selection-choices .booking-option[data-box]::before { transition: transform .5s var(--ease), filter .5s var(--ease); }
  .booking-official #booking-view .box-selection-choices .booking-option[data-box][data-selected=true]::before { transform: translateY(-5px); box-shadow: none; }
}
@media (max-width: 640px) {
  .booking-official #booking-view [data-box=small]::before { --bw: 38px; --bh: 27px; --d: 6px; --hw: 10px; }
  .booking-official #booking-view [data-box=mizoor]::before { --bw: 45px; --bh: 31px; --d: 8px; --hw: 12px; }
  .booking-official #booking-view [data-box=family]::before { --bw: 54px; --bh: 37px; --d: 9px; --hw: 15px; }
}

/* Real box photo (owner request 2026-11-01): the blue MIZOOR crate replaces the drawn boxes; it matches the real boxes. Bigger sizes show a bigger crate. */
.booking-official #booking-view .box-selection-choices .booking-option[data-box]::before {
  width: var(--bw, 60px); height: auto; aspect-ratio: 1.5; clip-path: none; filter: none;
  border-radius: 8px; border: 1px solid rgba(205,214,224,.18);
  background: url('assets/box.webp') 50% 62% / 128% auto no-repeat, #c9d3dc;
  box-shadow: 0 12px 20px -12px rgba(0,0,0,.8);
}
.booking-official #booking-view [data-box=small]::before { --bw: 50px; }
.booking-official #booking-view [data-box=mizoor]::before { --bw: 60px; }
.booking-official #booking-view [data-box=family]::before { --bw: 72px; }
.booking-official #booking-view .booking-option[data-box][data-selected=true]::before { filter: none; border-color: rgba(60,199,226,.7); box-shadow: 0 0 0 1px rgba(60,199,226,.5), 0 14px 22px -12px rgba(60,199,226,.55); }
@media (max-width: 640px) {
  .booking-official #booking-view [data-box=small]::before { --bw: 40px; }
  .booking-official #booking-view [data-box=mizoor]::before { --bw: 48px; }
  .booking-official #booking-view [data-box=family]::before { --bw: 56px; }
}
@media (min-width: 861px) {
  .booking-official #booking-view .box-selection-choices .booking-option[data-box] { grid-template-columns: 100px minmax(0, 1fr) auto 132px; }
  .booking-official #booking-view [data-box=small]::before { --bw: 72px; }
  .booking-official #booking-view [data-box=mizoor]::before { --bw: 86px; }
  .booking-official #booking-view [data-box=family]::before { --bw: 100px; }
}

/* Box supply cards (owner request 2026-11-01): short cards, full rules behind Learn more. */
.booking-official .box-supply-item { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.booking-official .box-supply-item > .box-supply-option { flex: 1; }
.booking-official .box-supply-more { align-self: flex-start; min-height: 44px; padding: 0 .25rem; border: 0; background: none; color: #7fdcf0; font: 600 .92rem/1 var(--sans, 'Albert Sans', sans-serif); text-decoration: underline; text-underline-offset: .22em; cursor: pointer; }
.booking-official .box-supply-more:hover { color: #fff; }
.booking-official .box-supply-dialog h2 { text-transform: none; }
.booking-official .box-supply-item { position: relative; gap: 0; }
.booking-official .box-supply-item > .box-supply-option { padding-bottom: 3rem; }
.booking-official .box-supply-more { position: absolute; left: 2.65rem; bottom: .35rem; }

.launch-note { margin: .6rem 0 0; padding: .7rem 1rem; border-left: 3px solid var(--cyan, #3cc7e2); border-radius: 0 10px 10px 0; background: rgba(60,199,226,.12); font-weight: 600; }

/* Date and time fields never wider than their card (iPhone date fields have their own minimum width). */
.booking-official .delivery-scheduling-fields { min-width: 0; }
.booking-official .delivery-scheduling-fields label { display: block; min-width: 0; max-width: 100%; }
.booking-official .booking-shell :is(input[type=date], select) { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.booking-official .booking-shell input[type=date] { -webkit-appearance: none; appearance: none; text-align: left; min-height: 3rem; }
.booking-official .booking-shell input[type=date]::-webkit-date-and-time-value { text-align: left; }

/* Empty date field shows "Choose a date" (iPhone leaves an empty date field blank). */
.booking-official .date-field { position: relative; display: block; }
.booking-official .date-placeholder { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--silver-dim, #8b97a8); pointer-events: none; font-size: 1rem; }
.booking-official .date-field input:not(.has-value)::-webkit-datetime-edit { color: transparent; }
.booking-official .date-field input:focus::-webkit-datetime-edit { color: inherit; }
.booking-official .date-field input.has-value + .date-placeholder,
.booking-official .date-field input:focus + .date-placeholder { display: none; }
/* Phone menu on the booking page: same three-line menu as the other pages. */
@media (max-width: 860px) {
  .has-menu .booking-official .site-header .site-nav { display: none !important; }
  .has-menu .booking-official .site-header.menu-open .site-nav { display: flex !important; }
}