:root {
  --bg: #000000;
  --panel-bg: #0d0d10;
  --field-bg: #e8e8e8;
  --red: #d31414;
  --white: #ffffff;
  --muted: #9a9a9a;
  --border: #2a2a2e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  /* Safety net: a native form control (date pickers have been the repeat
     offender -- see input[type="date"] notes below) ignoring its CSS width
     and rendering wider than the viewport would otherwise force the whole
     embedded page into horizontal panning, which is unusable inside a
     fixed-width Squarespace iframe. This guarantees that can't happen
     again regardless of which control misbehaves next. Added 2026-08-15. */
  overflow-x: hidden;
}

.page {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  min-height: 100vh;
}

@media (max-width: 860px) {
  .page { grid-template-columns: 1fr; }
}

/* LEFT COPY PANEL */
.copy-panel {
  padding: 48px 40px;
}

.brand { margin-bottom: 32px; }
.brand-name {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
}
.brand-sub {
  display: block;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 3px;
  text-transform: lowercase;
}

.copy-panel h1 {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.subhead {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 32px;
}

.step-block { margin-bottom: 28px; opacity: 0.35; transition: opacity .2s ease; }
.step-block.current { opacity: 1; }
.step-label {
  color: var(--red);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
}
.step-block h2 {
  font-size: 15px;
  text-transform: uppercase;
  margin: 6px 0;
}
.step-block p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* RIGHT FORM PANEL */
.form-panel {
  background: var(--panel-bg);
  padding: 40px 48px;
  border-left: 1px solid var(--border);
}

/* Mobile: the 48px side padding above eats a big chunk of a phone's narrow
   width, making the embedded form look narrower than the iframe it's in.
   Shrink it on small screens so the form fills the iframe width better --
   added 2026-08-14 per Aaron's request. */
@media (max-width: 600px) {
  .form-panel {
    padding: 24px 12px;
  }
}

/* iOS Safari's native <input type="date"> control has repeatedly ignored
   width/min-width/max-width CSS (confirmed across several rounds of
   testing 2026-08-15 -- it kept overflowing its grid/flex column no matter
   what sizing was applied), so trying to keep Date and Time side by side
   in a narrow mobile column isn't reliable. Stacking them full-width on
   phones instead sidesteps the problem entirely -- there's no adjacent
   column left for the date control to overflow into. Desktop/tablet keep
   the side-by-side layout above 600px, unaffected. */
@media (max-width: 600px) {
  .row.row-mobile-stack {
    flex-direction: column;
    gap: 0;
  }
  .row.row-mobile-stack input[type="date"] {
    /* NOT "none" -- that let iOS Safari's date control revert to its own
       oversized intrinsic width, wider than the phone screen itself, which
       forced the whole page into horizontal scrolling/panning. 100% caps
       it to the row's width like every other full-width input on mobile.
       Fixed 2026-08-15. */
    max-width: 100%;
  }
}

/* NOTE 2026-08-15: a .row-align-top CSS-grid + display:contents technique
   was tried here (2026-08-14/15) to fix the Date/Time row's labels being
   different heights. It kept misbehaving on mobile Safari in new ways each
   round (overlapping inputs, a <select> spanning the full row) and was
   abandoned. The actual fix is at the HTML level: the Time field's label
   text was shortened (its long "(please avoid drive time traffic if
   possible)" hint moved into a <small> sub-line) so both labels are close
   enough in height that the plain .row/.field flex layout below -- used
   everywhere else in this form -- handles it fine without any special
   casing. See booking-form-onepage.html's Delivery Details section.
   Removed the grid version, kept this note so nobody re-adds it. */

.header-promo {
  text-align: center;
  font-size: 16px; /* was 13px, bumped ~20% 2026-08-12 per Aaron's request */
  font-weight: 700;
  color: var(--red);
  margin: 0 0 20px;
}

.progress {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}
.progress-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--border);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.progress-dot.active { background: var(--red); color: var(--white); }
.progress-line { width: 32px; height: 2px; background: var(--border); }

.form-errors {
  background: #3a0d0d;
  border: 1px solid var(--red);
  color: #ffb3b3;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 16px;
}

.step { display: none; }
.step.active { display: block; }

.row { display: flex; gap: 16px; }
/* min-width:0 overrides a flex item's default min-width:auto, which sizes
   it to fit its content's minimum width even if that's wider than its
   share of the row. Text inputs never hit this in practice, but iOS
   Safari's native <input type="date"> control (day/month/year segments +
   calendar icon) refuses to shrink below its own preferred width, so
   without this the date box was overflowing into the Time field's column
   next to it on the Delivery Details row. Fixed 2026-08-15. */
.row .field { flex: 1; min-width: 0; }

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 15px; /* was 12px, unified with radio/song-grid/checkbox-row 2026-08-12 */
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}
.field label.radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  color: var(--white);
  margin-right: 20px;
  font-size: 15px; /* was 13px, unified 2026-08-12 */
}
.field small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 4px;
}

/* Delivery Details' "please avoid drive time traffic" hint. Used to live
   inline inside the Time field's <label>, which made that label taller
   than the Date field's label next to it and pushed the two input boxes
   to different heights (visually reading as overlap on narrow screens).
   Moved to its own full-width line below both fields instead -- so both
   labels stay short and the two boxes line up -- and styled as regular
   white body text per Aaron's request (not the smaller muted hint style
   used elsewhere in the form). Added 2026-08-15. */
.delivery-time-note {
  color: var(--white);
  font-size: 15px;
  margin: 8px 0 18px;
}

/* Required-field asterisks -- red instead of inheriting the white label
   color, so required fields are visually scannable at a glance. */
.required-star {
  color: var(--red);
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 3px;
  border: none;
  background: var(--field-bg);
  color: #111;
  font-size: 14px;
}
/* Mobile Safari renders <input type="date"> as a fixed-width native widget
   that it centers within the box rather than filling/left-aligning like a
   normal text input, so stretching it to the full column width (as with
   every other input) just adds a lot of empty space on both sides of the
   date text. Capping its width keeps the box close-fitting around the
   actual date instead of stretching to match the Time field's column.
   Font size is untouched -- only the box's own width/padding shrank.
   Added 2026-08-15 per Aaron's request. */
input[type="date"] {
  max-width: 170px;
  padding-left: 8px;
  padding-right: 8px;
}
/* Placeholder text (e.g. "Type N/A if not applicable", "Type the song
   title(s) here") defaults to a light browser grey -- force it to match
   the same near-black used for actually-typed text. */
input[type="text"]::placeholder, input[type="email"]::placeholder,
input[type="tel"]::placeholder, input[type="date"]::placeholder,
input[type="number"]::placeholder, textarea::placeholder {
  color: #111;
  opacity: 1;
}
textarea { min-height: 70px; resize: vertical; }
select[multiple] { min-height: 110px; }

.tip-input { width: 100px; }

hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.section-note {
  text-align: center;
  font-size: 15px; /* was 12px, unified 2026-08-12 */
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 16px;
}

.rush-banner {
  background: #3a0d0d;
  border-left: 4px solid var(--red);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 18px;
}

.summary-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.summary-table td { padding: 8px 4px; border-bottom: 1px solid var(--border); font-size: 14px; }
.summary-table td:last-child { text-align: right; }
.summary-table .total-row td { font-weight: 800; font-size: 16px; border-bottom: none; }
.tax-note { font-size: 11px; color: var(--muted); margin-bottom: 20px; }

.payment-fields { margin: 16px 0; }
.hosted-field-mount {
  display: block;
  width: 100%;
  background: var(--field-bg);
  border: none;
  border-radius: 3px;
  min-height: 40px;
  padding: 10px 12px;
  color: #111;
  font-size: 14px;
  box-sizing: border-box;
}
.hosted-field-mount::placeholder { color: #111; opacity: 1; }

/* Browser autofill (Chrome/Safari/Edge) overrides our text color with its
   own washed-out grey styling on autofilled fields (name, email, phone,
   address, etc). Force the field-bg color and #111 text back in on
   autofill so those fields don't look grey compared to un-autofilled
   selects like State/Occasion. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #111 !important;
  -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--field-bg) inset !important;
  caret-color: #111;
  transition: background-color 5000s ease-in-out 0s;
}

.nav-row {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}

.btn {
  background: #d9d9d9;
  color: #111;
  border: none;
  padding: 10px 28px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.btn:hover { background: var(--white); }
.btn.secondary { background: transparent; color: var(--muted); border: 1px solid var(--border); }

/* Rush fee popup
   Rendered in-flow (not position:fixed) so it stays visible when this form
   is embedded in a tall, non-scrolling iframe (Squarespace HTML Code Block).
   A fixed/full-screen overlay would center on the iframe's entire internal
   height instead of whatever portion of the page is actually on screen. */
.modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.modal-box {
  background: var(--panel-bg);
  border: 1px solid var(--red);
  border-radius: 6px;
  padding: 28px;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}
.modal-box h3 { margin-top: 0; color: var(--red); font-size: 16px; }
.modal-box p { color: var(--white); font-size: 14px; line-height: 1.5; }
.modal-box .btn { margin-top: 12px; }

.modal-overlay[hidden] {
  display: none;
}

/* Song selection — checkbox grid (replaces the old <select multiple>).
   Same dark panel / border treatment as the rest of the form's fields. */
.song-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 16px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 14px 16px;
}
.song-grid label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-weight: 400;
  font-size: 15px; /* was 13px, unified 2026-08-12 */
  color: var(--white);
  cursor: pointer;
  line-height: 1.3;
  padding: 4px 0;
}
.song-grid input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--red);
}
.song-grid label.disabled {
  color: var(--muted);
  cursor: not-allowed;
}
@media (max-width: 560px) {
  .song-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Add-on checkbox rows (Step 4) */
.addon-field { margin-bottom: 14px; }
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 700;
  font-size: 15px; /* was 13px, unified 2026-08-12 */
  color: var(--white);
  cursor: pointer;
  margin-bottom: 6px;
}
.checkbox-row input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}
.checkbox-row small {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}
.addon-field select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}