/* ============================================================================
   DeeJay's Event Center — booking wizard stylesheet
   Step 5, item 6 (dressing-last). Styles the EXISTING wizard markup: the shared
   base shell, the four pages (date / event / details / review), and the
   _calendar.html fragment. No markup was invented for this file.

   Palette is taken straight from the brand logo (the vinyl disc):
     bright disc blue  #1395DA   deep disc blue #0B6FA8   vinyl black #0B0B0C
   Boldness is spent in ONE place — the calendar (black header over a light,
   blue-tinted grid). Everything else stays quiet: white cards, ink-black
   buttons, blue reserved for the interactive month.
   ============================================================================ */

:root{
  --brand-blue:#4A9FD4;        /* official brand primary — accents, chevrons, borders */
  --brand-blue-deep:#1A5A8A;   /* official deep blue — selected date, weekday labels,
                                  and all white-on-blue fills (badge/selected) so text
                                  stays legible on the lighter primary                 */
  --blue-tint:#F1F8FC;         /* open-day cell fill (tint of the official primary)    */
  --blue-line:#D5E9F5;         /* open-day cell border                                 */
  --ink:#0D0D0D;               /* official vinyl black — text, header bar, buttons     */
  --ink-soft:#5C6470;          /* secondary text                               */
  --surface:#FFFFFF;
  --page:#F4F6F8;
  --line:#E1E6EC;
  --muted:#828C9A;
  --faint:#C4CBD2;             /* too-soon / adjacent day numbers               */
  --booked-bg:#EEF1F4;
  --booked-fg:#9AA1A9;
  --err-bg:#FDE8E8;  --err-fg:#A01423;  --err-line:#F5C2C7;
  --note-bg:#FBF7EA; --note-line:#EFE3BF; --note-fg:#6B5D2F;
  --radius:14px; --radius-sm:10px;
  --focus:#33AEEA;
}

*{box-sizing:border-box}

body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  margin:0;padding:24px;background:var(--page);color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:480px;margin:0 auto}

/* --- page header shell (base.html) --- */
.brandbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.brandmark{width:52px;height:52px;border-radius:50%;flex:none;display:block}
.eyebrow{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand-blue-deep);font-weight:600;margin:0 0 6px;
}
.brandbar .eyebrow{margin:0}
h1{margin:0 0 6px;font-size:26px;line-height:1.15;letter-spacing:-.01em}
.lede{color:var(--ink-soft);margin:0 0 18px;font-size:14px;line-height:1.5}
.lede b{color:var(--ink);font-weight:600}

.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;margin-bottom:14px;
}

/* --- shared footer / buttons / links --- */
.foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.continue,.confirm{
  background:var(--ink);color:#fff;border:none;border-radius:var(--radius-sm);
  font-weight:600;cursor:pointer;font-family:inherit;
  transition:background-color .12s ease;
}
.continue{padding:11px 20px;font-size:14px}
.confirm{padding:13px 24px;font-size:15px}
.continue:hover,.confirm:hover{background:#000}
.back{color:var(--ink-soft);text-decoration:none;font-size:14px}
.back:hover{color:var(--ink)}

/* --- error + focus (quality floor) --- */
.wiz-error{
  background:var(--err-bg);color:var(--err-fg);border:1px solid var(--err-line);
  padding:9px 12px;border-radius:8px;margin:0 0 10px;font-size:13px;
}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ============================================================================
   Calendar — bookings/wizard/_calendar.html  (the A + C combo)
   ============================================================================ */
#calendar .nav{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--ink);border-radius:var(--radius-sm);
  padding:12px 14px;margin-bottom:12px;
}
#calendar .month{color:#fff;font-weight:500;font-size:16px;letter-spacing:.01em}
#calendar .chev{
  background:transparent;border:none;color:var(--brand-blue);
  font-size:19px;line-height:1;width:28px;height:28px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-family:inherit;
  transition:color .12s ease;
}
#calendar .chev:hover{color:#7CBCE2}
#calendar .chev[aria-disabled="true"]{color:#3A3F45;cursor:not-allowed}

.dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:2px}
.dow span{
  text-align:center;font-size:12px;font-weight:500;padding:5px 0;
  color:var(--brand-blue-deep);
}

.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{
  position:relative;aspect-ratio:1/1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:var(--radius-sm);
  font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;
}
.day.open{
  background:var(--blue-tint);border-color:var(--blue-line);color:var(--ink);
  cursor:pointer;transition:border-color .12s ease,background-color .12s ease;
}
.day.open input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.day.open:hover{border-color:var(--brand-blue)}
.day.open:has(input:checked){
  background:var(--brand-blue-deep);border-color:var(--brand-blue-deep);color:#fff;
}
.day.taken{background:var(--booked-bg);color:var(--booked-fg)}
.day.dim,.day.adjacent{color:var(--faint)}

/* "Booked" label on taken days. Scoped as `.day .tag` (specificity 0,2,0) so it
   wins over the review page's inline `.tag` (0,1,0) — see review section. */
.day .tag{
  font-size:9px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;
  margin-top:1px;color:var(--booked-fg);
}

/* Interest badge (item 5). Suppressed on the chosen day (item-6 decision). */
.interest{
  position:absolute;top:-5px;right:-5px;
  min-width:18px;height:18px;padding:0 4px;border-radius:999px;
  background:var(--brand-blue-deep);color:#fff;   /* deep blue: white stays legible */
  font-size:11px;font-weight:600;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.day.open:has(input:checked) .interest{display:none}

/* date-page extras */
.chosen{font-size:13px;color:var(--ink-soft)}
.chosen b{color:var(--ink)}
.legend{margin-top:12px;font-size:12px;color:var(--muted)}

/* ============================================================================
   Details page — form fields
   ============================================================================ */
.field{margin-bottom:14px}
.label{font-weight:600;font-size:14px;margin-bottom:5px;display:block}
.opt-note{font-weight:400;color:var(--muted);font-size:12px}
.card input[type=text],
.card input[type=email],
.card input[type=tel],
.card input[type=number]{
  font-size:15px;padding:9px 10px;border:1px solid #D7DDE3;border-radius:9px;
  width:100%;font-family:inherit;color:var(--ink);background:#fff;
  transition:border-color .12s ease;
}
.card input[type=number]{width:140px}
.card input:focus{border-color:var(--brand-blue);outline:none}
.card input:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.hint{font-size:12px;color:var(--muted);margin:5px 0 0}

/* ============================================================================
   Event page — package + start time + guest count
   ============================================================================ */
.pkg{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pkg-name{font-size:18px;font-weight:700}
.pkg-price{font-size:22px;font-weight:700;color:var(--ink)}
.incl{margin:10px 0 6px;padding-left:18px;color:var(--ink-soft);font-size:13.5px;line-height:1.5}
.incl li{margin:2px 0}
.pkg-note{font-size:12px;color:var(--muted);margin:0 0 6px}
.card hr{border:none;border-top:1px solid #EEF1F4;margin:16px 0}
fieldset{border:none;margin:0 0 16px;padding:0}
legend{font-weight:600;font-size:14px;padding:0;margin-bottom:6px}
.opt{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:15px;cursor:pointer}
.opt input{width:18px;height:18px;accent-color:var(--brand-blue-deep)}

/* ============================================================================
   Review page — summary rows + money + disclosure
   ============================================================================ */
.row{
  display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  font-size:14.5px;border-bottom:1px solid #F2F4F6;
}
.row:last-child{border-bottom:none}
.row .k{color:var(--ink-soft)}
.row .v{font-weight:600;text-align:right}
.money .row.total .v{font-size:17px}
.tag{font-size:11px;color:var(--muted);font-weight:400}
.disclosure{
  background:var(--note-bg);border:1px solid var(--note-line);
  border-radius:var(--radius-sm);padding:11px 13px;
  font-size:12.5px;color:var(--note-fg);line-height:1.5;margin-bottom:14px;
}
.after{font-size:12px;color:var(--muted);text-align:center;margin-top:10px}

/* ============================================================================
   Mobile
   ============================================================================ */
@media (max-width:420px){
  body{padding:16px}
  h1{font-size:23px}
  .brandmark{width:46px;height:46px}
  .grid{gap:5px}
  .day{font-size:15px}
  .foot{flex-direction:column;align-items:stretch}
  .continue,.confirm{width:100%}
  .back{text-align:center}
}

/* Respect reduced-motion (quality floor). */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}