/* === Public booking page overrides (scoped) === */
body.booking header.brand{
  /* kill the flex row and center the whole block */
  position: static !important;
  display: block !important;
  width: 100%;
  max-width: 820px;
  margin: 0 auto 1.5rem !important;
  text-align: center !important;
  gap: 0 !important;
  align-items: initial !important;   /* neutralise global flex alignment */
}

body.booking .brand-inner{
  display: inline-block !important;  /* content-sized stack */
  text-align: inherit;               /* center via parent */
}

/* logo: restore natural aspect (don’t force round) */
body.booking header.brand img{
  height: 40px;
  width: auto !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  object-fit: contain;
  display: block;
  margin: 0 auto 0.5rem;
}

/* name */
body.booking header.brand h1{
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0.25rem 0 0.75rem;
  color: var(--fg);
}

/* language switch: centered pill below name */
body.booking header.brand .langswitch{
  position: static !important;  /* defeat absolute pinning */
  right: auto !important;
  top: auto !important;
  float: none !important;

  display: inline-block !important;
  margin: 0.5rem auto 0 !important;
  background: #0f1217;
  border: 1px solid #263040;
  border-radius: 999px;
  overflow: hidden;
  text-align: center;
  transform: none !important;
}

body.booking header.brand .langswitch a{
  display: inline-block;
  padding: 0.35rem 0.75rem;
  text-decoration: none;
  font-size: 0.85rem;
  color: #9ca3af;
  border-right: 1px solid #263040;
}
body.booking header.brand .langswitch a:last-child{ border-right: none; }
body.booking header.brand .langswitch a.active{ background: var(--acc); color: #0b0d12; font-weight: 700; }

@media (max-width: 420px){
  body.booking header.brand .langswitch a{ padding: 0.3rem 0.55rem; font-size: 0.8rem; }
}



    .daygrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: .5rem;
      margin: .25rem 0 1rem;
    }
    .daycell {
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      background:#0f1217; border:1px solid #263040; border-radius:12px;
      padding:.5rem .25rem; min-height:56px; cursor:pointer; user-select:none;
    }
    .daycell .w { display:block; font-size:.8rem; color:#9ca3af; line-height:1; }
    .daycell .d { display:block; margin-top:2px; font-size:.95rem; font-weight:700; color:var(--fg); line-height:1.2; }
    .daycell.sel { outline:2px solid var(--acc); }
    .daycell.disabled { opacity:.4; cursor:not-allowed; }
    @media (min-width: 480px) { .daycell { min-height:64px; } }
    .timegrid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
      gap: .5rem;
      margin: .5rem 0 0.25rem;
    }
    .timecell {
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      background:#0f1217; border:1px solid #263040; border-radius:12px;
      padding:.45rem .5rem; min-height:52px; cursor:pointer; user-select:none;
      color: var(--fg) !important; gap:.25rem;
    }
    .timecell.sel { outline:2px solid var(--acc); }
    .timecell.disabled { opacity:.45; cursor:not-allowed; color:#9ca3af !important; }
    .timecell .badge {
      position: static;
      font-size:.72rem; padding:.12rem .45rem; border-radius:999px;
      background:#16181d; border:1px solid #263040; color:var(--fg);
      line-height: 1; margin-top:.1rem;
    }
    .timecell.warn .badge { background:#1f2937; }
    .skeleton { border-radius:12px; height:44px; background: linear-gradient(90deg, #0f1217 25%, #2a2e3a 37%, #0f1217 63%); background-size: 400% 100%; animation: shimmer 1.2s ease-in-out infinite; border:1px solid #263040; }
    @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
    .timegrid, .skeleton { position: relative; z-index: 1; }
    .lastseat { display:inline-block; margin:.25rem 0 .5rem; padding:.2rem .55rem; border-radius:999px; border:1px solid #263040; background:#111827; color:#e5e7eb; font-size:.8rem; font-weight:600; }

    .card { background:#0f1217; border:1px solid #263040; border-radius:12px; padding:1rem; }
    .toolbar { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:.5rem; justify-content:center; }
    .muted { color:#9ca3af; }

  /* keep the card's text black */
  .test-card { color:#000; }

  /* put the helper text on its own line under the select */
  .test-card .test-toolbar { justify-content:center; }
  .test-card .test-toolbar .muted{
    color:#000 !important;
    flex: 0 0 100%;      /* <-- forces new line on wide screens */
    text-align:center;
    margin-top:.5rem;
  }

  /* Reveal-on-pick details */
  .details { margin-top:.75rem; }
  .details.hidden { display:none; }
  .details.animate { animation: detailsFade .18s ease-out; }
  @keyframes detailsFade { from {opacity:0; transform: translateY(4px);} to {opacity:1; transform:none;} }

  /* Mobile spacing nicety - was: 480 */
  @media (max-width: 240px) {
    .details label { display:block; }
    .details input, .details textarea { width:100%; }
  }

  /* Compact date row — hidden on larger screens */
.date-compact { display:none; margin: .25rem 0 .75rem; }
.btn-compact {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .8rem; border-radius:10px;
  background:#0f1217; border:1px solid #263040; color:#e5e7eb;
  font-weight:600;
}

/* On small phones: show compact row, hide the month grid - was: 480 */
@media (max-width: 240px) {
  .date-compact { display:block; }
  .daygrid { display:none; }
}

.field-label { font-weight: 600; font-size: .95rem; line-height: 1.2; margin-bottom: .1rem; }
.field { display: inline-flex; align-items: center; }
.field { margin-top: .6rem; } /* adjust spacing to taste */

/* Compact toggle switch */
.toggle { position: relative; display: inline-flex; align-items: center; height: 28px; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-ui {
  width: 44px; height: 24px; border-radius: 999px;
  background: #1f2937; border: 1px solid #263040;
  display: inline-block; position: relative; transition: background .15s ease;
}
.toggle-ui::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #e5e7eb; transition: transform .15s ease;
}
.toggle input:checked + .toggle-ui { background: var(--acc); }
.toggle input:checked + .toggle-ui::after { transform: translateX(20px); }

/* A11y helper (screen reader only) */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.col { display: block; }

.field-label {
  display: block;                /* force label on its own line */
  font-weight: 600;
  margin-bottom: .4rem;          /* space between label and control */
  line-height: 1.25;
}

.field { margin-top: 0; }        /* control sits right under label */

/* Below-the-row blocks spacing & alignment */
#lastSeat {
  display: inline-block;
  margin: 1rem 0 .75rem;   /* ↑ added top margin for space above */
  padding: .25rem .7rem;
  border-radius: 999px;
  border: 1px solid #263040;
  background: #111827;
  color: #e5e7eb;
  font-size: 1rem;         /* about +25% from before */
  font-weight: 600;
}


#timesWrap { margin-top: .75rem; }
#times, #timesMsg { text-align: left; }

/* Ensure both columns share the same structure and alignment */
.form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

/* Ensure both labels look consistent */
.form-row-2col label > span {
  display: block;
  font-size: 0.95rem;
  color: var(--fg);
  font-weight: 600;
  margin-bottom: 0.35rem;
}

/* --- LOCK PARTY SELECT WIDTH (non-responsive) --- */
:root { --party-select-width: 7.5ch; } /* room for “12” and caret */
/* Match toggle vertical position with the party select */
:root {
  /* tweak this until it visually lines up on your setup */
  --bar-toggle-top-offset: 1rem;
}

#party {
  width: var(--party-select-width) !important;
  min-width: var(--party-select-width) !important;
  max-width: var(--party-select-width) !important;
  padding: 0.25rem 0.4rem;   /* was 0.35rem → 15% reduction */
  font-size: 0.95rem;
  border-radius: 8px;
  border: 1px solid #263040;
  background: #0f1217;
  color: var(--fg);
  -webkit-appearance: menulist; /* Safari: avoid odd autosizing */
  appearance: menulist;
}

#party option {
  text-align: left;           /* left-align the menu items */
  padding-left: .3rem;
  min-width: 7em;             /* keeps “7+ (please call)” from clipping */
}


/* Toggle pill switch (centered) */
.switch-wrapper {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
  margin: 0 auto;
}

.switch-wrapper input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #555;
  border-radius: 34px;
  transition: 0.3s;
}

.slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.3s;
}

/* Active state */
.switch-wrapper input:checked + .slider {
  background-color: #16a34a; /* bright green */
}

.switch-wrapper input:checked + .slider::before {
  transform: translateX(22px);
}

/* Center the toggle under label */
.toggle-label {
  display: flex;
  flex-direction: column;
  align-items: center; /* keeps the pill centered */
  gap: var(--bar-toggle-top-offset);
}

/* If you prefer nudging only the pill (instead of using gap), use this: */
/* #bar-pref-wrap .switch-wrapper { margin-top: var(--bar-toggle-top-offset); } */

/* Hide entire right column (including label) when JS hides the wrapper */
#bar-pref-wrap[style*="display:none"] {
  display: none !important;
}

/* Center the booking cards themselves on wide screens */
@media (min-width: 720px) {
  .test-card,
  main.card {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Ensure padding/borders are accounted for symmetrically */
.test-card,
main.card {
  box-sizing: border-box;
}

/* --- Seating preference radio overrides --- */

/* The container: just a simple vertical stack of options */
.seating-pref-options {
  margin-top: 0.25rem;
}

/* Each option label: override global "label { display:flex; flex-direction:column; }" */
.seating-pref-option {
  display: block;              /* not flex */
  margin: 0.15rem 0;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Make radios normal-sized, with text to the right */
.seating-pref-option input[type="radio"] {
  /* Undo the huge square from global input styles */
  padding: 0;
  margin: 0 0.4rem 0 0;
  min-height: auto;
  border: none;
  background: transparent;

  vertical-align: middle;

  /* Colour: selected = blue, unselected = default (light) */
  accent-color: #2563eb;
}

/* Ensure the label text sits to the right on the same line */
.seating-pref-option span {
  display: inline;
  vertical-align: middle;
}