/* =============================================================================
   Pro DJ Express — shared shell for /dj-events/ and the booking wizard.
   Tokens, header, footer and buttons are lifted verbatim from the verified
   homepage build (index.html) so these pages read as the same site.
   ============================================================================= */

:root {
  --teal-accent: #33cccc; /* THE brand color: headline accent spans */
  --teal-deep:   #0f7f73; /* Buttons + social tiles. Square corners. */
  --teal-light:  #3fd0c4; /* Hover */
  --black:       #000000;
  --white:       #ffffff;
  --star-gold:   #ff9900;
  --surface:     rgba(255, 255, 255, .06); /* elevated panels on black */
  --hairline:    rgba(255, 255, 255, .14);
  --muted:       rgba(255, 255, 255, .72);
  --danger:      #ff6b6b;
  --header-h: 124px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* An author `display` rule beats the UA stylesheet's [hidden] { display: none },
   so .wizard-wrap{display:grid} would keep showing while hidden. Make hidden win. */
[hidden] { display: none !important; }

body {
  background: var(--black);
  color: var(--white);
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3 { font-family: 'Lato', Helvetica, Arial, sans-serif; font-weight: 700; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

.accent { color: var(--teal-accent); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============ Header (from the homepage build) ============ */

.site-header {
  position: relative;
  z-index: 1000;
  background: var(--black);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}

.header-logo { flex-shrink: 0; }
.header-logo img { width: 141px; height: 82px; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--white);
  border-radius: 6px;
  color: var(--white);
  font: 600 14px 'Open Sans', sans-serif;
  padding: 8px 12px;
  cursor: pointer;
}

.primary-nav > ul {
  display: flex;
  align-items: center;
  gap: 22px;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
}

.primary-nav a { color: var(--white); padding: 8px 0; display: inline-block; transition: opacity .15s ease; }
.primary-nav a:hover, .primary-nav a:focus { opacity: .7; }

.caret { font-size: 11px; margin-left: 3px; }

/* Dropdowns: hidden until hover/focus (same as the homepage) */
.has-sub { position: relative; }

.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--black);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 8px 0;
  display: none;
  z-index: 1001;
}
.sub-menu .sub-menu { top: -9px; left: 100%; }
.has-sub:hover > .sub-menu, .has-sub:focus-within > .sub-menu { display: block; }
.sub-menu a { display: block; padding: 9px 20px; font-weight: 400; font-size: 14px; }
.sub-menu a:hover, .sub-menu a:focus { color: var(--teal-accent); background: rgba(255, 255, 255, .05); }

.header-right { display: flex; align-items: center; gap: 20px; white-space: nowrap; }
.header-socials { display: flex; gap: 8px; }

.header-socials a {
  width: 32px; height: 32px;
  background: var(--teal-deep);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s ease;
}
.header-socials a:hover, .header-socials a:focus { opacity: .8; }
.header-socials svg { width: 16px; height: 16px; fill: var(--white); }

.header-phone {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-weight: 500; font-size: 15px; color: var(--white);
  transition: opacity .15s ease;
}
.header-phone svg { width: 18px; height: 18px; fill: var(--white); }
.header-phone:hover, .header-phone:focus { opacity: .7; }

/* ============ Buttons ============ */

.btn {
  display: inline-block;
  background: var(--teal-deep);
  color: var(--white);
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.7;
  padding: 5px 17px;
  border: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: opacity .15s ease;
}
.btn:hover, .btn:focus { opacity: .85; }

/* Rounded tile button, as used on the homepage service tiles */
.btn-tile {
  display: inline-block;
  background: var(--teal-deep);
  color: var(--white);
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.7;
  padding: 5px 25px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity .15s ease;
}
.btn-tile:hover, .btn-tile:focus { opacity: .85; }

.btn[disabled], .btn-tile[disabled],
.btn.is-disabled, .btn-tile.is-disabled {
  background: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .45);
  cursor: not-allowed;
  opacity: 1;
}

.btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--muted);
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  padding: 10px 4px;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-ghost:hover, .btn-ghost:focus { color: var(--white); }

/* Visible keyboard focus everywhere (CheckCherry fails this; we don't) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--teal-accent);
  outline-offset: 2px;
}

/* ============ Footer (from the homepage build) ============ */

.site-footer { background: var(--black); padding: 70px 0 50px; }

.footer-inner {
  max-width: 1128px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start;
}

.footer-logo img { height: 96px; width: auto; }

.site-footer h3 {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-weight: 400; font-size: 25px; line-height: 25px;
  color: var(--white); text-transform: uppercase; margin-bottom: 20px;
}

.footer-links li { margin-bottom: 10px; }

.footer-links a, .footer-contact a, .footer-contact p {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 26px; color: var(--white);
  text-transform: uppercase; transition: opacity .15s ease;
}
.footer-links a:hover, .footer-links a:focus,
.footer-contact a:hover, .footer-contact a:focus { opacity: .7; }
.footer-contact p, .footer-contact a { display: block; margin-bottom: 10px; }

.copyright-bar {
  background: var(--black);
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 16px 24px; text-align: center;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 23.8px; color: var(--white);
}

/* ============ Shared page furniture ============ */

.page-wrap { max-width: 1072px; margin: 0 auto; padding: 0 24px; }

.page-head { text-align: center; padding: 64px 0 44px; }
.page-head h1 { font-size: 39px; line-height: 50.7px; color: var(--white); }
.page-head p { color: var(--muted); margin-top: 12px; }

/* Between the desktop layout and the hamburger the full header doesn't fit:
   logo 141 + nav 575 + socials/phone/CTA needs ~1058px. The live site solves
   this by scaling the logo with the row (78px at 990) and collapsing at Divi's
   980px. Mirror that: shrink the logo, tighten gaps, drop the phone. */
@media (max-width: 1180px) {
  .site-header { gap: 14px; }
  .header-logo img { width: 110px; height: 64px; } /* keeps the 312:182 aspect */
  .primary-nav > ul { gap: 12px; font-size: 14px; }
  .header-right { gap: 12px; }
  .header-phone { display: none; }
}

/* ============ /dj-events/ : the event-type cards ============ */

.event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 31px;
  padding-bottom: 72px;
}

.event-card {
  border: 1px solid var(--hairline);
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.event-card img { width: 100%; aspect-ratio: 756 / 503; object-fit: cover; }

.event-card-body { padding: 22px 20px 24px; display: flex; flex-direction: column; flex: 1; }

.event-card h2 {
  font-size: 24px;
  line-height: 1.25;
  color: var(--white);
  margin-bottom: 6px;
}

.event-card .price {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--teal-accent);
  margin-bottom: 12px;
}

.event-card .price .hours { color: var(--muted); font-weight: 400; font-size: 14px; }

.event-card p { font-size: 15px; line-height: 1.6; color: var(--muted); margin-bottom: 20px; }

.event-card .card-actions { margin-top: auto; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.event-card .card-actions .btn, .event-card .card-actions .btn-tile { width: 100%; text-align: center; }

.event-card .detail-link {
  font-size: 14px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.event-card .detail-link:hover, .event-card .detail-link:focus { color: var(--teal-accent); }

/* An empty body slot: Lifetime Celebrations has no real copy of its own yet */
.copy-pending {
  border: 1px dashed var(--hairline);
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
  font-style: italic;
  padding: 12px;
  margin-bottom: 20px;
}

/* ============ Wizard ============ */

.demo-banner {
  background: #2a2100;
  border-bottom: 1px solid #6b5600;
  color: #ffd479;
  font-size: 13px;
  line-height: 1.5;
  padding: 9px 44px 9px 16px;
  text-align: center;
  position: relative;
}
.demo-banner b { color: #ffe6ad; }
.demo-banner button {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  background: none; border: none; color: #ffd479; font-size: 20px; line-height: 1;
  cursor: pointer; padding: 8px 10px; min-width: 44px; min-height: 44px;
}

.wizard-wrap {
  max-width: 1128px;
  margin: 0 auto;
  padding: 28px 24px 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 40px;
  align-items: start;
}

/* --- stepper --- */

.stepper { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }

.stepper li { display: flex; align-items: center; gap: 8px; }

.stepper button, .stepper span.step-label {
  background: none; border: none; padding: 6px 2px;
  font-family: 'Open Sans', sans-serif; font-size: 14px;
  color: rgba(255, 255, 255, .45); cursor: default; white-space: nowrap;
}
.stepper .done button { color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.stepper .done button:hover { color: var(--white); }
.stepper .current span.step-label { color: var(--teal-accent); font-weight: 600; }
.stepper .sep { color: rgba(255, 255, 255, .25); }

.stepper-mobile { display: none; font-size: 14px; color: var(--muted); margin-bottom: 20px; }
.stepper-mobile b { color: var(--teal-accent); }

/* --- step content --- */

.step h1 { font-size: 30px; line-height: 1.25; margin-bottom: 6px; }
.step > .step-sub { color: var(--muted); margin-bottom: 26px; }
.step[hidden] { display: none; }

.wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; }
.wizard-nav .btn { min-height: 44px; }

/* --- package (step 1) --- */

.pkg-hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.pkg-head { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; margin: 22px 0 4px; }
.pkg-head h2 { font-size: 26px; line-height: 1.25; }
.pkg-price { font-family: 'Lato', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 26px; color: var(--teal-accent); }
.pkg-meta { color: var(--muted); font-size: 15px; margin-bottom: 24px; }
.pkg-meta span + span::before { content: ' · '; color: rgba(255,255,255,.35); }

.pkg-copy { border-top: 1px solid var(--hairline); padding-top: 22px; }
.pkg-copy p { margin-bottom: 14px; line-height: 1.7; }
.pkg-copy strong { color: var(--white); }
.pkg-copy h3 {
  font-family: 'Lato', Helvetica, Arial, sans-serif; font-weight: 700;
  font-size: 18px; color: var(--teal-accent); margin: 22px 0 8px; text-transform: none;
}
.pkg-copy ul { margin: 0 0 16px; padding-left: 0; }
.pkg-copy li { position: relative; padding-left: 22px; margin-bottom: 7px; color: var(--muted); }
.pkg-copy li::before { content: '✔'; position: absolute; left: 0; color: var(--teal-deep); }
.pkg-copy li strong { color: var(--white); }

/* --- forms --- */

.field { margin-bottom: 20px; }
.field label, .fieldset-legend {
  display: block; font-size: 14px; font-weight: 600; color: var(--white); margin-bottom: 7px;
}
.field .req { color: var(--teal-accent); }
.field .hint { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 6px; }

.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=date], .field select {
  width: 100%;
  min-height: 46px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--hairline);
  color: var(--white);
  font-family: 'Open Sans', sans-serif;
  font-size: 16px; /* 16px avoids iOS zoom-on-focus */
  padding: 10px 12px;
  border-radius: 0;
}
.field input:focus, .field select:focus { border-color: var(--teal-accent); outline: none; box-shadow: 0 0 0 1px var(--teal-accent); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--danger); }

/* Chrome/Safari autofill paints its own light-blue fill, which glares on the
   dark theme. Repaint the fill with an inset shadow (the only way WebKit
   allows) and keep the text white. Matches the .field input background. */
/* Date fields: render the native calendar dark, make the whole field a
   pointer target, and grow the tiny picker icon into a real button. */
.field input[type=date] { color-scheme: dark; cursor: pointer; }
.field input[type=date]::-webkit-calendar-picker-indicator {
  width: 24px; height: 24px; cursor: pointer; opacity: .85; margin-left: 6px;
}
.field input[type=date]::-webkit-calendar-picker-indicator:hover,
.field input[type=date]:focus::-webkit-calendar-picker-indicator { opacity: 1; }

.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #16191b inset;
  -webkit-text-fill-color: var(--white);
  caret-color: var(--white);
  transition: background-color 99999s ease-out 0s;
}

.field-error { display: block; color: var(--danger); font-size: 13px; margin-top: 6px; }
.field-error:empty { display: none; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* A field that needs the full row width inside a .field-row (the start-time
   pill picker, which wraps to several lines at half width). */
.field-full { grid-column: 1 / -1; }

fieldset { border: none; margin-bottom: 20px; }

.check {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 0; cursor: pointer; font-size: 15px; color: var(--muted);
  min-height: 44px;
}
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--teal-deep); flex-shrink: 0; }
.check span { line-height: 1.55; }
.check .lead { color: var(--white); display: block; }
.check small { display: block; font-size: 12.5px; color: rgba(255,255,255,.55); line-height: 1.5; margin-top: 3px; }

.consent-box { border: 1px solid var(--hairline); background: var(--surface); padding: 4px 16px; margin-bottom: 20px; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.reassure { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 12px; }

/* --- add-ons (step 4) --- */

.addon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.addon-card { border: 1px solid var(--hairline); background: var(--surface); display: flex; flex-direction: column; }
.addon-card.is-added { border-color: var(--teal-deep); box-shadow: inset 0 0 0 1px var(--teal-deep); }

.addon-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 14px 14px 8px; }
.addon-card-head h3 { font-size: 16px; line-height: 1.3; }

.info-btn {
  background: none; border: 1px solid var(--hairline); color: var(--muted);
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; flex-shrink: 0;
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.info-btn:hover { color: var(--teal-accent); border-color: var(--teal-accent); }

.addon-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.addon-card .addon-blurb { font-size: 13.5px; color: var(--muted); padding: 12px 14px 0; flex: 1; line-height: 1.55; }
.addon-card .addon-foot { padding: 14px; }
.addon-card .addon-foot button { width: 100%; min-height: 44px; }

.addon-added { background: transparent; border: 2px solid var(--teal-deep); color: var(--white); }

/* modal */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0, 0, 0, .75);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-panel {
  background: #0d0d0d; border: 1px solid var(--hairline);
  max-width: 640px; width: 100%; max-height: 88vh; overflow-y: auto;
}
.modal-panel img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.modal-body { padding: 22px 24px 26px; }
.modal-body h2 { font-size: 22px; margin-bottom: 4px; }
.modal-price { color: var(--teal-accent); font-family: 'Lato', sans-serif; font-weight: 700; font-size: 20px; margin-bottom: 14px; }
.modal-body p { color: var(--muted); margin-bottom: 12px; line-height: 1.7; font-size: 15px; }
.modal-body h3 { font-size: 15px; color: var(--white); margin: 18px 0 6px; }
.modal-actions { display: flex; gap: 12px; margin-top: 20px; }
.modal-actions button { min-height: 44px; }
.modal-close { position: absolute; top: 10px; right: 14px; }

/* --- review (step 5) --- */

.lines { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.lines th, .lines td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--hairline); font-size: 15px; }
.lines th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.5); font-weight: 600; }
.lines td.num, .lines th.num { text-align: right; white-space: nowrap; }
.lines .line-sub { display: block; font-size: 13px; color: rgba(255,255,255,.55); }
.lines tfoot td { border-bottom: none; padding-top: 14px; }
.lines tfoot .total td { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 20px; color: var(--white); }
.lines tfoot .due td { color: var(--teal-accent); font-weight: 700; }
.lines tfoot .bal td { color: var(--muted); }

.terms-box {
  border: 1px solid var(--hairline); background: var(--surface);
  padding: 18px; max-height: 220px; overflow-y: auto; margin-bottom: 8px; font-size: 14px; color: var(--muted);
}
.terms-box h3 { color: var(--white); font-size: 15px; margin-bottom: 8px; }
.terms-box p { margin-bottom: 10px; line-height: 1.65; }

.demo-note {
  border: 1px solid #6b5600; background: #2a2100; color: #ffd479;
  padding: 12px 14px; font-size: 14px; margin: 18px 0;
}

.sig-input { max-width: 380px; }
.sig-input input { font-family: 'Patrick Hand SC', cursive; font-size: 22px !important; }

/* --- sidebar --- */

.sidebar {
  position: sticky; top: 20px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  padding: 20px;
}
.sidebar h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .07em; color: var(--white); margin-bottom: 16px; }

.sb-row { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 10px 0; font-size: 14px; }
.sb-row .sb-name { color: var(--white); line-height: 1.4; }
.sb-row .sb-name small { display: block; color: rgba(255,255,255,.55); font-size: 12.5px; }
.sb-row .sb-amt { white-space: nowrap; color: var(--white); }
.sb-hr { border: none; border-top: 1px solid var(--hairline); margin: 6px 0; }
.sb-sec-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.5); margin: 10px 0 2px; }

.sb-x {
  background: none; border: none; color: rgba(255,255,255,.45); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 6px; min-width: 32px; min-height: 32px;
}
.sb-x:hover { color: var(--danger); }

.sb-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.sb-total .lbl { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 16px; }
.sb-total .amt { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 24px; color: var(--teal-accent); }

.sb-empty { color: rgba(255,255,255,.5); font-size: 14px; }

.sb-card { border-top: 1px solid var(--hairline); margin-top: 14px; padding-top: 14px; }
.sb-card h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.55); margin-bottom: 8px; display: flex; justify-content: space-between; }
.sb-card p { font-size: 14px; color: var(--white); line-height: 1.5; }
.sb-card a.edit { font-size: 12px; color: var(--teal-accent); text-decoration: underline; text-transform: none; letter-spacing: 0; }

/* mobile sticky bar */
.mobile-bar { display: none; }

/* --- confirmation --- */

.confirm-wrap { max-width: 720px; margin: 0 auto; padding: 56px 24px 90px; text-align: center; }
.confirm-tick { width: 64px; height: 64px; border: 2px solid var(--teal-deep); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; font-size: 30px; color: var(--teal-accent); }
.confirm-wrap h1 { font-size: 32px; margin-bottom: 10px; }
.confirm-wrap > p { color: var(--muted); margin-bottom: 28px; }
.confirm-card { border: 1px solid var(--hairline); background: var(--surface); padding: 22px; text-align: left; margin-bottom: 22px; }
.confirm-card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.55); margin-bottom: 12px; }
.next-list { text-align: left; counter-reset: n; }
.next-list li { position: relative; padding-left: 34px; margin-bottom: 12px; color: var(--muted); }
.next-list li::before {
  counter-increment: n; content: counter(n);
  position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border: 1px solid var(--teal-deep); border-radius: 50%;
  color: var(--teal-accent); font-size: 12px; display: flex; align-items: center; justify-content: center;
}

@media (max-width: 980px) {
  .event-grid { grid-template-columns: repeat(2, 1fr); }
  .addon-grid { grid-template-columns: repeat(2, 1fr); }
  .wizard-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 120px; }

  /* Sidebar becomes the sticky bottom bar; tapping the total expands it */
  .sidebar {
    position: fixed; inset: auto 0 0 0; z-index: 2500;
    border: none; border-top: 1px solid var(--hairline);
    background: #0b0b0b;
    padding: 0;
    max-height: 78vh; display: flex; flex-direction: column;
  }
  .sidebar h2 { display: none; }
  .sidebar .sb-scroll {
    display: none; overflow-y: auto; padding: 16px 16px 4px;
    border-bottom: 1px solid var(--hairline);
  }
  .sidebar.open .sb-scroll { display: block; }
  .mobile-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .mobile-bar .mb-total { background: none; border: none; color: var(--white); text-align: left; cursor: pointer; padding: 4px; min-height: 44px; }
  .mobile-bar .mb-total .lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.55); }
  .mobile-bar .mb-total .amt { font-family: 'Lato', sans-serif; font-weight: 700; font-size: 20px; color: var(--teal-accent); }
  .mobile-bar .mb-total .chev { font-size: 10px; color: var(--muted); margin-left: 6px; }
  .mobile-bar .btn { flex: 1; max-width: 220px; text-align: center; min-height: 44px; }
  .sb-total { display: none; }
  .wizard-nav .btn-next { display: none; } /* Continue lives in the bottom bar on mobile */
}

@media (max-width: 980px) {
  :root { --header-h: 84px; }
  .site-header { padding: 0 16px; }
  .header-logo img { width: 110px; height: 64px; }
  .nav-toggle { display: block; }
  .header-socials, .header-phone { display: none; }
  .primary-nav { display: none; }
  .primary-nav.open {
    display: block; position: absolute; top: var(--header-h); left: 0; right: 0;
    background: var(--black); border-top: 1px solid var(--hairline);
    padding: 12px 20px 24px; z-index: 1001;
  }
  .primary-nav.open > ul { flex-direction: column; align-items: stretch; gap: 0; white-space: normal; }
  .primary-nav.open a { padding: 12px 0; }

  /* Mobile: flyouts become indented always-visible lists (same as the homepage) */
  .sub-menu, .has-sub:hover > .sub-menu {
    display: block; position: static; border: none;
    border-left: 1px solid rgba(255, 255, 255, .18);
    margin-left: 12px; padding: 0 0 0 12px; min-width: 0;
  }
  .caret { display: none; }
  .btn { padding: 10px 16px; font-size: 15px; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; }
  .footer-logo img { margin: 0 auto; }
  .page-head { padding: 40px 0 28px; }
  .page-head h1 { font-size: 30px; line-height: 1.3; }

  .stepper { display: none; }
  .stepper-mobile { display: block; }
  .step h1 { font-size: 24px; }
}

@media (max-width: 620px) {
  .event-grid, .addon-grid { grid-template-columns: 1fr; gap: 20px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .wizard-wrap { padding-left: 16px; padding-right: 16px; }
  .lines th, .lines td { padding: 10px 4px; font-size: 14px; }
  .lines .col-qty, .lines .col-unit { display: none; } /* keep the table readable at 375px */
}

/* ============ Standalone booking entity chrome ============
   Owner call 2026-07-18: the booking experience is its own entity (like
   CheckCherry was), linked FROM the site; it does not carry the site nav. */
.entity-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 24px; background: var(--black); border-bottom: 1px solid var(--hairline);
}
.entity-header img { width: 110px; height: 64px; object-fit: contain; }
.entity-header nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) { .entity-header nav { gap: 12px; } .entity-header nav .header-socials { display: none; } }
.entity-header nav a { color: var(--white); font-size: 15px; }
.entity-header nav a:hover, .entity-header nav a:focus { color: var(--teal-accent); }
.entity-footer {
  border-top: 1px solid var(--hairline); text-align: center;
  padding: 26px 24px 34px; color: var(--muted); font-size: 14px;
}
.entity-footer a { color: var(--white); }
.entity-footer a:hover, .entity-footer a:focus { color: var(--teal-accent); }

/* ---- Hours pill picker (Loom feedback 2026-07-22) ----
   Replaces the native "How many hours?" dropdown in the four booking
   wizards: every option is visible at once, CheckCherry-style, so nothing
   hides inside an OS popup. The original select stays in the DOM (hidden)
   as the single source of truth for the schedule code. */
.hour-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.hour-pill {
  font-family: 'Lato', sans-serif; font-size: 15px; line-height: 1;
  padding: 12px 16px; min-width: 64px;
  background: transparent; color: var(--white);
  border: 1px solid var(--hairline); border-radius: 0; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.hour-pill:hover, .hour-pill:focus-visible { border-color: var(--teal-accent); color: var(--teal-accent); }
.hour-pill:focus-visible { outline: 2px solid var(--teal-accent); outline-offset: 2px; }
.hour-pill[aria-checked="true"] {
  background: var(--teal-deep); border-color: var(--teal-deep); color: var(--white); font-weight: 700;
}

/* ---- Start-time pill picker (Loom feedback 2026-07-23) ----
   Same treatment as the hours, for the same reason. Angel's Windows Chrome
   painted the native start-time popup as a blank white panel (see the
   `option` rule below for the root cause), and he had already said he
   preferred every choice being visible. 64 quarter-hour options will not fit
   in one flat row, so the control is two tiers: pick the hour, then the
   minute. The hidden <select id="startTime"> stays the source of truth. */
.time-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.time-pills + .time-pills { margin-top: 10px; }
.time-pill {
  font-family: 'Lato', sans-serif; font-size: 14px; line-height: 1;
  padding: 10px 12px; min-width: 56px;
  background: transparent; color: var(--white);
  border: 1px solid var(--hairline); border-radius: 0; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.time-pill:hover, .time-pill:focus-visible { border-color: var(--teal-accent); color: var(--teal-accent); }
.time-pill:focus-visible { outline: 2px solid var(--teal-accent); outline-offset: 2px; }
.time-pill[aria-checked="true"] {
  background: var(--teal-deep); border-color: var(--teal-deep); color: var(--white); font-weight: 700;
}
.time-pill-label {
  display: block; font-family: 'Open Sans', sans-serif; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px;
}
.time-pills + .time-pill-label { margin-top: 16px; }

/* ---- Discount code (Angel's Loom 2026-07-23) ----
   Collapsed by default so a booking with no code reads exactly as it did
   before, and an empty promo box never nudges a customer to go hunting for
   one. Angel opens it for the client when he hands a code out on a call. */
.sb-promo { border-top: 1px solid var(--hairline); padding: 14px 0 4px; }
.sb-promo-toggle {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: 'Open Sans', sans-serif; font-size: 13px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.sb-promo-toggle:hover, .sb-promo-toggle:focus-visible { color: var(--teal-accent); }
.sb-promo-panel { margin-top: 10px; }
.sb-promo-row { display: flex; gap: 8px; }
.sb-promo-row input {
  flex: 1 1 auto; min-width: 0; min-height: 40px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--hairline);
  color: var(--white); font-family: 'Open Sans', sans-serif; font-size: 16px;
  padding: 8px 10px; border-radius: 0; text-transform: uppercase;
}
.sb-promo-row input:focus { border-color: var(--teal-accent); outline: none; }
.btn-apply {
  flex: 0 0 auto; min-height: 40px; padding: 8px 16px;
  background: var(--teal-deep); border: 1px solid var(--teal-deep); color: var(--white);
  font-family: 'Lato', sans-serif; font-size: 14px; cursor: pointer; border-radius: 0;
}
.btn-apply:hover:not(:disabled) { background: var(--teal-accent); border-color: var(--teal-accent); color: #000; }
.btn-apply:disabled { opacity: .55; cursor: default; }
.sb-promo-msg { margin: 8px 0 0; font-size: 13px; min-height: 1em; color: var(--muted); }
.sb-promo-msg.ok { color: var(--teal-accent); }
.sb-promo-msg.bad { color: var(--danger); }
.sb-row-discount .sb-amt { color: var(--teal-accent); }
/* Shown on the confirmation screen when the server's re-price dropped a code
   that had been applied in the sidebar. */
.confirm-note { margin-top: 14px; font-size: 14px; color: var(--danger); }
.confirm-note[hidden] { display: none; }
.lines tr.disc td { color: var(--teal-accent); }

/* Root cause of the blank dropdown Angel filmed on 2026-07-23: `.field select`
   sets `color: var(--white)`, and the native popup on Windows Chrome paints
   its options with that inherited white text on a white system background, so
   the list reads as empty apart from the row under the cursor (which the OS
   highlight makes legible). Every native select on the site inherits the same
   bug, so this is set globally rather than per-field. */
.field select option,
.field select optgroup {
  background: #111111;
  color: var(--white);
}