/* =========================
   GLOBAL / THEME
   ========================= */
:root{
  /* Controls */
  --control-h: 44px;

  /* Accents */
  --accent:    #4ea9ff;

  /* Panel accents */
  --panel-stroke: rgba(255,255,255,.12);

  --ring: 2px;
}

/* Site background */
html, body { height:100%; min-height:100%; background-color:#0b0d10; }
body{
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(62,122,255,.18), transparent 60%),
    radial-gradient(1200px 800px at 100% 20%, rgba(0,212,255,.10), transparent 60%),
    #0b0d10;
  background-repeat:no-repeat;
  background-attachment:fixed, fixed, fixed;
}

/* Glassy surfaces & buttons */
.card.glass{
  background: rgba(18,22,27,.52);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.btn-accent{ background:linear-gradient(135deg,#4f8cff,#35c0ff); border:0; color:#0b0d10; font-weight:600; }
.btn-accent:hover{ filter:brightness(.95); color:#0b0d10; }
.btn-outline-accent{ border:1px solid #4f8cff; color:#e6eefb; }
.btn-outline-accent:hover{ background:rgba(79,140,255,.12); color:#fff; }

/* Inputs with icons */
.input-icon .input-group-text{ background:var(--glass-bg,transparent); }
.input-icon .icon, .input-icon svg{ display:block; opacity:.8; }
.btn-icon{ display:inline-flex; align-items:center; gap:.25rem; }
.btn-icon .icon{ pointer-events:none; }

@media (hover:hover){
  #btn-open-maps[disabled]{ pointer-events:none; opacity:.5; }
}

/* Utilities */
.text-danger{ color:#ff6b6b !important; }
.is-invalid{ border-color:#dc3545 !important; }
.icon { opacity: .85; display:inline-block; vertical-align: -2px; }

/* =========================
   UNIFIED WEEK PICKER (Step 4)
   Day/Time chip UI for desktop + mobile
   ========================= */

/* Day tabs */
.week-head{
  display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch;
}
.wk-head-pill{
  min-width:112px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#e8eef7;
  border-radius:10px;
  padding:.45rem .6rem;
  text-align:center;
  cursor:pointer;
  user-select:none;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.wk-head-pill .wk-dow{ font-size:.7rem; letter-spacing:.03em; opacity:.85; }
.wk-head-pill .wk-dom{ font-weight:700; margin-top:2px; }
.wk-head-pill:hover{ background:rgba(255,255,255,.10); }
.wk-head-pill.is-today{ border-color:var(--accent); }
.wk-head-pill.has-pick{ box-shadow: inset 0 0 0 2px var(--accent); }
.wk-head-pill.is-active{
  background:var(--accent);
  color:#0b1117;
  border-color:transparent;
  font-weight:700;
}

/* Card shell around segments + times */
.spm-card{
  margin-top:.75rem;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  padding:1rem;
}
.spm-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.spm-title{ font-weight:600; }

/* Segmented control */
.spm-seg-group{
  display:flex; gap:.5rem; margin-bottom:.75rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px; padding:.25rem;
}
.spm-seg{
  flex:1 1 0; text-align:center;
  border:1px solid transparent;
  background:transparent; color:#e8eef7;
  border-radius:999px; padding:.45rem .75rem;
  cursor:pointer; user-select:none;
}
.spm-seg.active{
  background:#111921;
  border-color:rgba(255,255,255,.15);
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* Time grid — responsive, robust */
.spm-times{
  display:grid; gap:.6rem;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* desktop auto-fit */
}
.spm-time{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#e8eef7; border-radius:12px;
  padding:.6rem .5rem; text-align:center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;                    /* keep “10:15 AM” on one line */
  cursor:pointer; user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.spm-time:hover{ background: rgba(255,255,255,.12); }

/* Selected = unmistakable */
.spm-time.selected{
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color:#0b1117 !important; font-weight:700;
  box-shadow: 0 0 0 2px rgba(78,169,255,.35);
}

.spm-empty{
  border:1px dashed rgba(255,255,255,.2);
  border-radius:12px; padding:.8rem; text-align:center; color:#9ba6b3;
}

/* Desktop breathing room */
@media (min-width: 992px){
  .wk-head-pill { min-width: 120px; }
  .spm-card { padding: 1rem 1.25rem; }
}

/* Phone: lock to 3 clean columns */
@media (max-width: 575.98px){
  .spm-times { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ===== Legend row (if used beneath picker) ===== */
.wk-legend{ display:flex; align-items:center; gap:18px; color:#9aa3ad; }
.wk-legend .swatch{
  width:12px; height:12px; border-radius:4px; display:inline-block;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); vertical-align:-2px;
}
.wk-legend .swatch.selected{ background:rgba(247,165,51,.384); }

/* =========================
   STEP 1 — STATUS CHIPS / LAYOUT
   ========================= */
#area_status .chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.15rem .5rem; border-radius:999px; font-size:.85rem;
  border:1px solid rgba(255,255,255,.15);
}
#area_status .ok{   background:rgba(40,167,69,.15); }
#area_status .warn{ background:rgba(255,193,7,.15); }
#area_status .err{  background:rgba(220,53,69,.15); }

#area_status .loading::after{
  content:''; animation:dots steps(4,end) 1.2s infinite;
}
@keyframes dots{
  0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}100%{content:''}
}

/* ---------- Step 1 layout polish ---------- */
#step1 {
  --border-soft: rgba(255,255,255,.08);
}
#step1 .card-body { padding-bottom: 12px; }
#step1 .form-text { color: rgba(255,255,255,.55) !important; }

#step1 .input-addon,
#step1 .btn-addon,
#step1 .btn-inline {
  height: 40px;
  min-width: 40px;
  padding: 0;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
}

/* State field */
#state {
  max-width: 72px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* CTA footer */
#step1_footer{
  display:flex;
  justify-content:flex-start;
  gap:12px;
  margin-top:10px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}
#btn-check-area{
  min-width:180px;
  height:44px;
  font-weight:600;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  max-width:100%;
}
#btn-check-area.disabled,
#btn-check-area[disabled]{
  opacity:.55 !important;
  cursor:not-allowed !important;
}
@media (max-width:640px){
  #step1_footer{ justify-content:flex-start; }
  #btn-check-area{ width:auto; min-width:180px; }
}

/* =========================
   STEP 2 — VEHICLE
   ========================= */
#step2 .row > [class*="col-"]{ display:flex; flex-direction:column; }
#step2 .form-label{ margin-bottom:.35rem; }
#step2 .form-text{ margin-top:.3rem; }
#step2 .row{ --bs-gutter-x:1.25rem; --bs-gutter-y:1rem; }
@media (max-width:991.98px){
  #step2 .row{ --bs-gutter-x:.75rem; --bs-gutter-y:.75rem; }
}
@media (max-width:575.98px){
  #step2 .card-body{ padding:1rem !important; }
}

/* Controls sizing */
#step2 .form-control,
#step2 .form-select,
#step2 .btn{ min-height:var(--control-h); }

/* Input groups & icons */
#step2 .input-group-text{
  background:transparent;
  border-color:var(--bs-border-color, rgba(255,255,255,.12));
  display:flex; align-items:center; justify-content:center; min-width:42px;
}
#step2 .input-group > .form-control{ min-width:0; }
#step2 .input-group .input-group-text svg{ display:block; opacity:.85; }
#step2 .input-icon-img{ border:none !important; background:transparent !important; }

/* VIN row bits */
#vin_status{ margin-top:.25rem; }
#step2 #vin_row .vin-head{ display:flex; align-items:center; flex-wrap:wrap; gap:.25rem; }
#step2 #vin_row .vin-head .btn-link{ margin-left:auto; }

/* Color swatch */
#color_swatch,
#step2 .input-group-text .swatch{
  width:16px; height:16px; border-radius:4px; border:1px solid rgba(255,255,255,.2);
  display:inline-block; background:var(--color-swatch,transparent);
}

/* Submodel datalist caret */
#submodel{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='currentColor' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6rem center; background-size:16px;
  padding-right:2rem;
}

/* Actions row */
#step2 .step-actions{
  display:flex; justify-content:space-between; align-items:center; gap:.75rem;
  margin-top:1rem; padding-top:1rem;
  border-top:1px solid var(--bs-border-color, rgba(255,255,255,.12));
}
#step2 .step-actions .btn{
  min-height:var(--control-h); padding:.55rem 1rem; min-width:118px; border-radius:.6rem;
}
@media (max-width:575.98px){
  #step2 .step-actions{ flex-direction:column-reverse; align-items:stretch; }
}

/* =========================
   MODAL (VIN Help + generic)
   ========================= */
.modal-lite.d-none{ display:none; }
.modal-lite{ position:fixed; inset:0; z-index:1060; }
.modal-lite__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(2px);
}
.modal-lite__card{
  position:relative; max-width:560px; margin:8vh auto; padding:1rem;
  background:rgba(30,33,40,.92);
  border:1px solid rgba(255,255,255,.08); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.4);
  color:var(--bs-body-color,#eaecef);
  outline:none;
}
.modal-lite__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.modal-lite__body{ line-height:1.5; }
#vinHelp img{
  border-radius:8px; background:rgba(255,255,255,.04); box-shadow:0 4px 12px rgba(0,0,0,.4);
}

/* =========================
   BOOKING / ESTIMATE SIDEBAR
   ========================= */

.btn-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.cart-empty {
  border: 1px dashed var(--bs-secondary);
  color: var(--bs-secondary);
  border-radius: .75rem;
  padding: 1.25rem;
  display: grid;
  place-items: start;
  background: color-mix(in oklab, var(--bs-secondary) 8%, transparent);
}

.cart-list .cart-item {
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.08));
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cart-list .cart-item:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.25);
}
.glass-soft { backdrop-filter: blur(6px); }

.btn-danger-subtle {
  background: rgba(220,53,69,.08);
  border: 1px solid rgba(220,53,69,.25);
}
.btn-danger-subtle:hover {
  background: rgba(220,53,69,.14);
}

.receipt .rowline {
  display:flex; justify-content:space-between; align-items:center;
  gap:.75rem; padding:.35rem 0;
}
.receipt .rowline span:first-child { color: var(--bs-secondary); }
.receipt .total {
  font-weight: 700;
  font-size: 1.05rem;
}

.badge.bg-secondary-subtle {
  background: rgba(255,255,255,.08) !important;
  color: var(--bs-secondary) !important;
  border: 1px solid rgba(255,255,255,.12);
}

/* Small refinement for selects/inputs line-up */
#step3 .form-label { margin-bottom: .35rem; }
#step3 .form-control, #step3 .form-select { height: 2.625rem; }

.estimate-disclaimer {
  padding: .5rem .75rem;
  background: rgba(255, 193, 7, .1);
  border: 1px solid rgba(255,193,7,.25);
  border-radius: .5rem;
}

/* Card shell */
.estimate-card { padding: 1.1rem; border: 1px solid var(--bs-border-color, rgba(255,255,255,.08)); }

/* Header */
.estimate-head { display:flex; align-items:center; gap:.5rem; margin-bottom:.75rem; }
.estimate-head .icon { opacity:.8; display:inline-flex; }
.estimate-head .title { font-weight:600; }
.badge-soft {
  margin-left:auto;
  font-size:.75rem; padding:.15rem .5rem; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}

/* Lines */
.estimate-lines { margin-top:.35rem; }
.rowline {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:.45rem 0; border-bottom:1px dashed rgba(255,255,255,.06);
  font-variant-numeric: tabular-nums;
}
.rowline:last-child { border-bottom:0; }
.rowline .label { color: var(--bs-secondary-color, #8a8f98); }

/* Total */
.estimate-total {
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:.75rem; padding-top:.75rem; border-top:1px solid rgba(255,255,255,.08);
  font-weight:700;
}

/* Notes */
.note-stack { display:grid; gap:.75rem; margin-top:1rem; }
.note {
  display:flex; gap:.5rem; align-items:flex-start; font-size:.9rem; line-height:1.3;
  border-radius:.75rem; padding:.6rem .75rem;
}
.note-warn { background:rgba(255, 193, 7, .08); border:1px solid rgba(255, 193, 7, .25); }
.note-info { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.note-ok   { background:rgba(25, 135, 84, .10); border:1px solid rgba(25, 135, 84, .25); }

.note-icon { line-height:1; margin-top:.05rem; }
.note-check { line-height:1; margin-top:.05rem; }

@media (max-width: 576px) {
  .estimate-card { padding:.85rem; }
  .rowline { padding:.35rem 0; }
}

/* Footer zone feel */
.estimate-footer {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Two-column notes on very large screens */
@media (min-width: 1200px) {
  .note-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem .75rem;
    align-items: start;
  }
}

/* Collapsible details */
.note-collapsible { overflow: hidden; transition: grid-template-rows .25s ease; display: grid; grid-template-rows: 0fr; }
.note-collapsible.open { grid-template-rows: 1fr; }
.note-collapsible > div { min-height: 0; }

.note-toggle {
  display:flex; align-items:center; gap:.4rem;
  margin-top:.5rem; font-size:.875rem; cursor:pointer; user-select:none;
  color: var(--bs-secondary-color, #98a2ad);
}
.note-toggle .chev { width:.85rem; height:.85rem; transition: transform .2s ease; }
.note-toggle.open .chev { transform: rotate(90deg); }

/* =========================
   QUICK PICKS / CLEAR ALL
   ========================= */
.quick-picks {
  display:flex; align-items:center; gap:.5rem;
  margin:.25rem 0 .75rem;
}
.quick-picks .qp-label {
  font-size:.85rem;
  color: var(--bs-secondary-color, rgba(255,255,255,.65));
  margin-right:.25rem;
}
.qp-btn{
  --qp-bg: rgba(255,255,255,.05);
  --qp-border: rgba(255,255,255,.15);
  --qp-text: rgba(255,255,255,.88);

  display:inline-flex; align-items:center; gap:.4rem;
  border:1px solid var(--qp-border); background:var(--qp-bg); color:var(--qp-text);
  padding:.35rem .6rem; border-radius:999px; font-size:.875rem; line-height:1;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
  user-select:none;
}
.qp-btn:focus-visible{ outline:2px solid rgba(13,110,253,.7); outline-offset:2px; }
.qp-btn:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); }
.qp-btn:active{ transform: translateY(1px); }
.qp-btn.is-active{ background:rgba(13,110,253,.16); border-color:rgba(13,110,253,.35); color:#cfe4ff; }
.qp-ico{ opacity:.9; }

#day_count{ font-variant-numeric: tabular-nums; opacity:.85; }
#day_count.is-full{ color:#ffc107; }
#day_count.is-zero{ opacity:.65; }

#clear_all{
  border:0; background:none; padding:0 .25rem;
  color: var(--bs-danger, #ff6b6b);
  text-decoration: underline; cursor: pointer;
}
#clear_all:disabled{ opacity:.45; cursor:not-allowed; text-decoration:none; }

/* =========================
   ADDRESS CARDS
   ========================= */
.address-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:.75rem;
}

.address-card {
  border:1px solid var(--bs-border-color);
  border-radius:1rem;
  background: rgba(255,255,255,.02);
  padding: 12px 14px;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}
.address-card:hover { transform: translateY(-1px); }
.address-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(78,169,255,.25);
}
.address-card .title { display:flex; align-items:center; gap:.5rem; font-weight:600; }
.address-card .meta { color: var(--bs-secondary-color); font-size:.9rem; margin-top:.25rem; }
.address-card .badge-default {
  margin-left:.25rem; font-size:.7rem; padding:.15rem .4rem;
  border:1px solid var(--bs-border-color); border-radius:.5rem;
}
.address-card .actions { display:flex; gap:.4rem; margin-left:auto; }
.address-card .btn-xxs { padding:.15rem .45rem; font-size:.75rem; border-radius:.5rem; }

.address-card.add-tile { border-style:dashed; text-align:center; color: var(--bs-secondary-color); }

/* Saved-address pills (re-usable) */
.addr-cards { display:flex; flex-wrap:wrap; gap:14px; align-items:stretch; }
.addr-card {
  display:grid; grid-template-columns: 22px 1fr auto; gap:10px;
  padding:12px 14px; min-width:280px; max-width:520px;
  border-radius:14px; border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.06));
  color: inherit; text-align:left;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.addr-card:hover { border-color: rgba(149,108,255,.45); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08)); }
.addr-card.is-active {
  border-color: rgba(149,108,255,.8);
  box-shadow: 0 0 0 3px rgba(149,108,255,.22);
  background: linear-gradient(180deg, rgba(149,108,255,.10), rgba(149,108,255,.04));
}
.addr-card:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(149,108,255,.35); }

.addr-pin { font-size:24px; line-height:1; margin-top:2px; opacity:.9 }
.addr-lines { line-height:1.15; }
.addr-title { font-weight:700; display:flex; align-items:center; gap:8px; }
.addr-badge {
  font-size:.72rem; padding:.2rem .5rem; border-radius:999px;
  background: rgba(255,255,255,.08); color: var(--text-secondary, #b9b9c1);
}
.addr-meta {
  margin-top:2px; font-size:.9rem; color: var(--text-secondary, #b9b9c1);
  display:flex; flex-wrap:wrap; gap:.35rem; align-items:center;
}
.addr-meta .dot { opacity:.45; }
.addr-actions { display:flex; gap:8px; align-items:center; }
.addr-chip {
  font-size:.8rem; padding:.25rem .5rem; border-radius:10px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
  color: inherit;
}
.addr-chip.text-danger { color: #ff6b6b; border-color: rgba(255,107,107,.25); background: rgba(255,107,107,.08); }

.addr-card--new {
  grid-template-columns: 22px 1fr; min-width:260px;
  border-style: dashed; border-color: rgba(255,255,255,.18);
  background: transparent;
}
.addr-plus { font-weight:700; color:#9b86ff; }

/* Vehicle variant */
.veh-card .addr-pin { font-size:24px }
.addr-card.veh-card {
  display:flex; align-items:center; gap:12px; min-height:72px;
}
.addr-card.veh-card .addr-lines {
  display:flex; flex-direction:column; justify-content:center; min-height:44px;
}
.addr-card.veh-card .addr-pin {
  width:44px; height:44px; flex:0 0 44px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  margin-right:4px; background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.addr-card.veh-card .veh-logo img {
  width:74%; height:74%; object-fit:contain; opacity:.95;
  filter: invert(1) brightness(1.25) contrast(1.05);
}
.addr-card.veh-card .veh-logo img.veh-logo-color { filter:none; }
.addr-card.veh-card .veh-initials {
  font-weight:600; font-size:.9rem; letter-spacing:.3px; color:#e9eef7; opacity:.95;
}
.addr-card.veh-card .addr-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }

/* Chips hover/focus */
.addr-card .addr-chip{ cursor:pointer; padding:.35rem .6rem; line-height:1; border:1px solid transparent; border-radius:9999px; transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .05s; }
.addr-card .addr-chip:hover,
.addr-card .addr-chip:focus-visible{ background-color: rgba(13,110,253,.08); color:#0d6efd; border-color: rgba(13,110,253,.35); box-shadow: 0 0 0 2px rgba(13,110,253,.18) inset; outline:none; }
.addr-card .addr-chip.text-danger:hover,
.addr-card .addr-chip.text-danger:focus-visible{ background-color: rgba(220,53,69,.10); color:#dc3545; border-color: rgba(220,53,69,.35); box-shadow: 0 0 0 2px rgba(220,53,69,.18) inset; }
.addr-card .addr-chip:active{ transform: translateY(1px); }
.addr-card .addr-actions{ gap:.375rem; }
.addr-card.is-active{ outline:2px solid rgba(13,110,253,.15); outline-offset:2px; }

/* =========================
   SELECT (dark style)
   ========================= */
.form-select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-color:#11161c; color:#e6edf6;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:.5rem .875rem; padding-right:2.25rem;
  line-height:1.25; box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c7cddd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right .65rem center; background-size:18px 18px;
}
.form-select:focus{
  outline:none; border-color:rgba(123,97,255,.55);
  box-shadow:0 0 0 3px rgba(123,97,255,.20), inset 0 1px 0 rgba(255,255,255,.05);
}
.form-select:disabled{ opacity:.6; cursor:not-allowed; }
.form-select::-ms-expand{ display:none; }
.form-select option{ background-color:#0e141a; color:#e6edf6; }
.form-select option[disabled],
.form-select option[hidden],
.form-select:invalid{ color:#9aa7b5; }
.form-select.form-select-sm{ padding:.375rem .75rem; padding-right:2rem; font-size:.9rem; }

/* =========================
   FOOTER
   ========================= */
.footer-bar {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border-top: 1px solid var(--panel-stroke, rgba(255,255,255,.12));
  backdrop-filter: blur(6px);
  padding: 14px 0 18px;
}
.footer-bar.stacked .footer-line + .footer-line { margin-top: 6px; }

.check-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  background: rgba(78,169,255,.18);
  border: 1px solid rgba(78,169,255,.35);
  font-weight:700; line-height:1; font-size:13px; color:#8fc8ff;
}
.call-pill {
  display:inline-block; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  text-decoration:none;
}
.call-pill:hover { border-color: rgba(78,169,255,.55); }

/* =========================
   MISC BUTTONS
   ========================= */
.btn-ghost-danger{
  --ghost: rgba(220, 53, 69, 0.12);
  background: transparent;
  border: 1px solid transparent;
  color: #dc3545;
  transition: background-color .15s ease, border-color .15s ease, transform .06s ease;
}
.btn-ghost-danger:hover{
  background: var(--ghost);
  border-color: rgba(220, 53, 69, 0.25);
}
.btn-ghost-danger:active { transform: scale(0.98); }

/* Confirm modal width tweak */
#confirmClear .modal-lite__card { max-width: 420px; }

/* Schedule disclaimer tone */
.schedule-disclaimer{
  background: rgba(255, 193, 7, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.25);
  font-size: 0.8rem;
}

.week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .5rem;
  padding: .25rem .5rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
}

/* Center the day pills */
.week-head {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Arrows */
.week-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #e6eefb;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
  flex-shrink: 0;
}
.week-btn:hover {
  background: rgba(78,169,255,.15);
  border-color: rgba(78,169,255,.4);
  color: #4ea9ff;
}
.week-btn:active { transform: scale(.96); }
.week-btn:disabled { opacity: .45; cursor: not-allowed; }

:root{
  --wk-btn: 48px;   /* arrow size (tap target >=44px) */
  --wk-gap: 8px;    /* space between arrow and first/last pill */
}

/* Header row */
.week-nav{
  display:flex;
  align-items:center;
  position:relative;
  overflow:visible;            /* never clip */
}

/* The SCROLLER: must be flex */
#week_head{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:8px;

  overflow-x:auto;
  -webkit-overflow-scrolling:touch;

  /* NO padding-left/right here – padding caused the “can’t reach Monday” bug */
  padding:0 !important;
  background:transparent !important;
  border:0 !important;

  scroll-snap-type:x proximity;
  /* Snap should respect the sticky arrows */
  scroll-padding-left:  calc(var(--wk-btn) + var(--wk-gap));
  scroll-padding-right: calc(var(--wk-btn) + var(--wk-gap));
}

/* Real gutters so first/last pill are fully reachable */
#week_head::before,
#week_head::after{
  content:"";
  flex:0 0 calc(var(--wk-btn) + var(--wk-gap));
}

/* Pills never shrink; snap nicely */
#week_head > *{
  flex-shrink:0;
  scroll-snap-align:center;
}

/* Sticky arrows that LIVE INSIDE the scroller on all viewports */
.wk-nav-btn{
  position:sticky;
  top:0;                      /* stick to the scroller’s top */
  z-index:5;
  align-self:center;

  width:var(--wk-btn);
  height:var(--wk-btn);
  margin:0;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.wk-nav-btn:hover{ background:rgba(255,255,255,.12); transform:scale(1.03); }
.wk-nav-btn:active{ transform:scale(.98); }
.wk-nav-btn[disabled]{ opacity:.45; pointer-events:none; }
.wk-nav-btn i{ font-size:22px; line-height:1; }

/* Pin each side without causing layout shift */
.wk-nav-btn--left { left:0; }
.wk-nav-btn--right{ right:0; }

/* Hide the horizontal scrollbar on phones */
@media (max-width:640px){
  #week_head{ scrollbar-width:none; }
  #week_head::-webkit-scrollbar{ display:none; }
}

/* --- Week header: stop centering, allow full left reach --- */
.week-head,
#week_head {
  justify-content: flex-start !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  scroll-padding-left: 0 !important;
  scroll-padding-right: 0 !important;
}

/* no phantom spacers */
#week_head::before,
#week_head::after {
  content: none !important;
  flex: 0 0 0 !important;
}

/* Mobile-first: allow full scroll to the left edge */
.week-head,
#week_head{
  justify-content: flex-start !important;   /* mobile: start, so Monday is reachable */
  overflow-x: auto;
  padding-left: 0 !important;
  padding-right: 0 !important;
  scroll-padding-left: 0 !important;
  scroll-padding-right: 0 !important;
}
#week_head::before,
#week_head::after{
  content: none !important;                  /* no phantom gutters */
  flex: 0 0 0 !important;
}

/* Desktop and up: center the pills, no horizontal scroll needed */
@media (min-width: 992px){
  .week-head,
  #week_head{
    justify-content: center !important;
    overflow-x: visible;                      /* no scrollbars on wide screens */
  }
}

/* ===== Compact week pills for mobile ===== */
@media (max-width: 640px) {
  .wk-head-pill {
    min-width: 84px !important;       /* narrower pills */
    padding: .35rem .45rem !important;
    border-radius: 8px !important;
  }
  .wk-head-pill .wk-dow {
    font-size: .65rem !important;
  }
  .wk-head-pill .wk-dom {
    font-size: .9rem !important;
  }

  /* tighter gaps between days */
  #week_head {
    gap: 4px !important;
  }

  /* make arrows smaller but still tappable */
  .wk-nav-btn {
    width: 38px !important;
    height: 38px !important;
  }
}


/* Hide week arrows entirely on mobile */
@media (max-width: 640px) {
  #wk_prev,
  #wk_next {
    display: none !important;
  }

  /* Slightly re-center the week head now that arrows are gone */
  #week_head {
    padding: 0 !important;
    justify-content: flex-start !important;
  }
}

/* ===== Step 4 header controls ===== */
.cal-bar{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.cal-title{ min-width:0; }  /* allow text to wrap nicely */
.cal-controls{
  display:flex; gap:.5rem; align-items:center;
}
.cal-btn{
  display:inline-flex; align-items:center; gap:.45rem;
  height:40px; padding:.4rem .7rem; border-radius:10px;
}
.cal-btn svg{ display:block; opacity:.95; }

/* Primary highlight for Today */
.cal-btn--primary{
  box-shadow: 0 6px 16px rgba(78,169,255,.18);
}

/* ---- Mobile tweaks ---- */
@media (max-width:640px){
  .cal-bar{
    flex-direction:column; align-items:stretch; gap:.6rem;
  }

  .cal-title .small{
    margin-top:.35rem !important;
  }

  .cal-controls{
    gap:.45rem;
  }

  /* Icon-first, text optional */
  .cal-btn{
    flex:1 1 0; justify-content:center;
    height:42px; padding:.4rem .5rem; border-radius:12px;
  }
  .cal-btn .lbl{
    display:none;            /* icon-only on mobile */
  }
  .cal-btn svg{
    width:20px; height:20px;
  }
}

/* ============================================
   Step 4 — Separated Segment Buttons
   ============================================ */
.spm-seg-group {
  display: flex;
  justify-content: center;
  gap: 0.6rem;                            /* space between each button */
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.spm-seg {
  flex: 1 1 0;
  text-align: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: #e6edf6;
  font-weight: 600;
  letter-spacing: .2px;
  padding: .55rem .9rem;
  transition: all .18s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.spm-seg:hover {
  background: rgba(255,255,255,0.10);
}

.spm-seg.active {
  background: linear-gradient(135deg, #4f8cff, #35c0ff);
  color: #0b1117;
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(78,169,255,.28), 0 6px 14px rgba(78,169,255,.25);
}

.spm-seg:active {
  transform: translateY(1px);
}

/* mobile sizing tweaks */
@media (max-width: 640px) {
  .spm-seg-group {
    gap: 0.5rem;
  }
  .spm-seg {
    padding: .5rem .8rem;
    font-size: .95rem;
  }
}

/* ============================================
   Step 4 — Empty message full-width fix
   ============================================ */
.spm-empty {
  width: 100% !important;
  min-height: 100px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  line-height: 1.5;
  color: rgba(255,255,255,.75);
  border: 1px dashed rgba(255,255,255,.25);
  border-radius: 12px;
  padding: 1rem !important;
  margin-top: .75rem;
  box-sizing: border-box;
  background: rgba(255,255,255,.03);
}

/* Ensure parent container allows full width */
/* Only make the container flex when it's showing the empty-state block */
#spm_times:has(.spm-empty){
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
}

/* Selected Slots — readable card list */
#picked_list{
  display: grid;
  gap: .6rem;
}

.picked-item{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .6rem .8rem;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.08));
  border-radius: .75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* index badge */
.picked-item .slot-badge,
.picked-item .badge{
  font-weight: 700;
  font-size: .8rem;
  padding: .2rem .45rem;
  border-radius: .5rem;
  background: rgba(78,169,255,.18);
  color: #aeddff;
  border: 1px solid rgba(78,169,255,.35);
}

/* date + time stack */
.picked-item .slot-row{
  display:flex;
  align-items: baseline;
  gap: .8rem;
  min-width: 0;
}
.picked-item .slot-date{
  white-space: nowrap;
  font-weight: 600;
  color: #dfe7f3;
  opacity: .95;
}
.picked-item .slot-time{
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 1.02rem;
  color: #ffffff;
  white-space: nowrap;
}

/* shrink gracefully on small screens */
@media (max-width: 520px){
  .picked-item{
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .picked-item .slot-row{
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: .45rem .8rem;
  }
}

/* remove button as a small ghost pill with icon */
.picked-item .slot-remove{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .55rem;
  font-size: .85rem;
  border-radius: .5rem;
  background: transparent;
  border: 1px solid rgba(220,53,69,.28);
  color: #ff7777;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.picked-item .slot-remove:hover{
  background: rgba(220,53,69,.12);
  border-color: rgba(220,53,69,.45);
}
.picked-item .slot-remove:active{ transform: translateY(1px); }
.picked-item .slot-remove svg{ width: 14px; height: 14px; opacity: .9; }

/* subtle “new item” flash */
.picked-item.in{ animation: fadeInUp .18s ease both; }
@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(4px); }
  to  { opacity:1; transform: translateY(0); }
}


/* 1) Day pills: spacing + active clarity */
.week-head { gap: .6rem; }
.wk-head-pill {
  min-width: 120px;
  padding: .55rem .8rem;
}
.wk-head-pill.is-active {
  box-shadow: 0 0 0 2px rgba(78,169,255,.35), 0 6px 14px rgba(78,169,255,.22);
}

/* 2) Segments: equal widths + balanced gutters */
.spm-seg-group {
  display:flex; gap:.5rem; padding:.25rem .5rem; border-radius:999px;
}
.spm-seg { flex:1 1 0; }

/* 3) Times: focus, disabled/unfit, consistent height */
.spm-time {
  min-height: 42px;
  font-weight: 700;
}
.spm-time:focus-visible {
  outline: 3px solid rgba(78,169,255,.45);
  outline-offset: 2px;
}
.spm-time.is-disabled,
.spm-time[disabled],
.spm-time.nofit {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.2);
}

/* 4) Selected Slots: align text & calm the remove button */
#picked_list { gap: .7rem; }
.picked-item { gap: .9rem; }
.picked-item .slot-row { gap: 1rem; }
.picked-item .slot-time { font-size: 1.06rem; letter-spacing: .25px; }
.picked-item .slot-remove {
  padding: .28rem .5rem;
}
@media (max-width: 520px){
  .picked-item .slot-remove span { display:none; } /* icon-only on small screens */
}

/* 5) Primary/secondary buttons consistency in the right rail */
#submit_booking.btn.btn-accent {
  width: 100%;
  font-weight: 800;
}

@keyframes pulse { from{ box-shadow:0 0 0 0 rgba(78,169,255,.45);} to{ box-shadow:0 0 0 12px rgba(78,169,255,0);} }
.btn.pulse { animation: pulse .45s ease-out; }

/* Make primary booking button text white */
#submit_booking.btn,
#submit_booking.btn.btn-accent {
  color: #fff !important;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Optional: stronger hover contrast */
#submit_booking.btn:hover {
  filter: brightness(1.05);
}

/* Optional: disabled state still readable */
#submit_booking.btn:disabled {
  color: rgba(255,255,255,.6) !important;
  filter: brightness(0.9);
}


/* ---------------------------------------------
   WEEK HEADER DAY PILL STYLES
--------------------------------------------- */

/* Subtle highlight for "today" */
.wk-head-pill.is-today {
  box-shadow: inset 0 0 0 2px rgba(78, 169, 255, .35);
}

/* Past days: grayed out + not clickable */
.wk-head-pill.is-disabled,
.wk-head-pill[disabled] {
  opacity: .45;
  filter: grayscale(.2);
  cursor: not-allowed;
  pointer-events: none;
}

/* Closed days: visible flag but still clickable */
.wk-head-pill.is-closed {
  position: relative;
}

/* Remove pseudo duplicate text */
.wk-head-pill.is-closed::after {
  content: none !important;
}

/* Closed day tag (with icon) */
.wk-head-pill .closed-tag {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .65rem;
  line-height: 1;
  padding: .15rem .4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #cfd7e3;
  pointer-events: none;
}

.wk-head-pill .closed-ico {
  display: inline-flex;
  opacity: .9;
}

/* ---------------------------------------------
   CLOSED DAY PANEL (Time selection area)
--------------------------------------------- */

.spm-closed {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .8rem .9rem;
  border-radius: .6rem;
  background: rgba(255, 193, 7, 0.10);
  border: 1px solid rgba(255, 193, 7, .25);
  color: #e7e7ee;
}

.spm-closed .ico {
  display: inline-flex;
  margin-top: .15rem;
  opacity: .95;
}

.spm-closed .reason {
  opacity: .9;
  margin-top: .15rem;
  color: #ffc2c2;
  font-weight: 600;
}

.wk-head-pill.is-closed {
  box-shadow: inset 0 0 0 1px rgba(255, 193, 7, 0.25);
}

.wk-head-pill .closed-tag {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.spm-closed {
  padding: 1rem 1rem;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  color: #cfd7e3;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 0.4rem 0.8rem;
  transition: all 0.2s ease;
}
.back-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}
.back-btn i {
  font-size: 1rem;
  opacity: 0.85;
}


#back_to_cart {
  margin-top: 1.25rem;
}
@media (max-width: 768px) {
  #back_to_cart {
    display: block;
    margin: 1.25rem auto 0;
  }
}


.account-hint{
  display:flex; align-items:flex-start; gap:.6rem;
  margin:.5rem 0 1rem;
  padding:.6rem .75rem;
  border-radius:.6rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.72);
  position: relative;
}

.account-hint .hint-ico{
  display:inline-flex; width:28px; height:28px;
  align-items:center; justify-content:center;
  border-radius:999px;
  background: rgba(78,169,255,.15);
  border: 1px solid rgba(78,169,255,.35);
  color: #8fc8ff;
  margin-top:.05rem;
}

.account-hint .ti { font-size: 16px; line-height: 1; }

.account-hint-link{
  color: var(--accent,#4ea9ff);
  font-weight:600; text-decoration:none;
}
.account-hint-link:hover{ text-decoration:underline; }

.hint-dismiss{
  appearance:none; border:0; background:transparent;
  color: rgba(255,255,255,.55);
  position:absolute; top:6px; right:8px;
  padding:.25rem; line-height:1; border-radius:.35rem;
  cursor:pointer;
}
.hint-dismiss:hover{ color:#fff; background:rgba(255,255,255,.06); }


/* Inline "?" help dot used in form labels */
button.help-dot {
  appearance: none;
  border: 0;
  padding: 0;
  margin-left: .5rem;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 700;
  font-size: 12px;
  color: #cfd7e3;                   /* text */
  background: rgba(255,255,255,.08); /* base fill */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  vertical-align: middle;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, color .15s ease, transform .05s ease;
}

button.help-dot:hover {
  background: rgba(78, 169, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(78,169,255,.45);
  color: #e8f3ff;
}

button.help-dot:active {
  transform: translateY(1px);
}

button.help-dot:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(0,0,0,.6),
    0 0 0 4px rgba(78,169,255,.75);
  color: #fff;
}

/* keep label and dot on one line and aligned nicely */
.form-label .help-dot { vertical-align: middle; }

/* ===== Modal: full-viewport, centered, scroll-safe ===== */
.modal-lite {
  position: fixed;             /* take over the viewport */
  inset: 0;                    /* top:0 right:0 bottom:0 left:0 */
  z-index: 1050;
  display: grid;               /* center the card */
  place-items: center;
  padding: 2vh 16px;           /* breathing room on narrow screens */
  /* Prevent background scroll when visible (JS toggles body.modal-open, too) */
}

.modal-lite.d-none { display: none; }

.modal-lite__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

.modal-lite__card {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100dvh - 4vh);  /* use dynamic VH so mobile chrome doesn't clip */
  overflow: auto;                   /* scroll content inside the card */
  border-radius: 12px;
  background: #1c1f26;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  padding: 20px;
}

/* Keep the head/Close visible when content scrolls */
.modal-lite__head {
  position: sticky;
  top: 0;
  background: inherit;
  padding-bottom: .5rem;
  margin-bottom: .75rem;
  z-index: 1;
}

/* Media: extra-narrow devices */
@media (max-width: 576px) {
  .modal-lite {
    padding: 1.5vh 10px;
  }
  .modal-lite__card {
    max-height: calc(100dvh - 3vh);
    padding: 16px;
  }
}

/* Images scale nicely */
.modal-lite__card img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 12px;
  border-radius: 8px;
}