/* ============================================================================
   BookMySpot design system — "Organic Premium"

   A calm, warm visual language: deep forest green on a sage-cream canvas,
   near-white frosted surfaces, hairline borders, and terracotta reserved
   exclusively for money. Soft depth, generous air, nothing shouts.
   ========================================================================== */

:root {
  /* ---- surfaces: a warm canvas, not a white one ---- */
  --bg: #eeede7;               /* sage-cream page */
  --bg-2: #e7e6de;             /* deeper wash for alternating bands */
  --card: #fbfbf8;             /* near-white card */
  --card2: #f2f1ea;            /* inset / filled sub-surface */
  --glass: rgba(252, 252, 249, .74);
  --glass-line: rgba(255, 255, 255, .8);

  --line: #e3e2d8;             /* hairline */
  --line-strong: #d6d5c9;

  /* ---- ink ---- */
  --text: #14432a;             /* deep forest — headings, primary ink */
  --body: #5b6a60;             /* long-form copy */
  --muted: #7b8a80;            /* secondary / labels */
  --faint: #a4aea6;            /* placeholders, disabled */

  /* ---- brand ---- */
  --brand: #14432a;
  --brand-hover: #0d3220;
  --brand-deep: #0d3220;
  --brand-mid: #1f6b45;        /* lighter emerald for accents on green */
  --brand-soft: #e9efea;       /* tinted fill behind brand content */
  --brand-line: #cedcd3;
  --grad: linear-gradient(135deg, #14432a 0%, #1f6b45 100%);
  --grad-soft: linear-gradient(135deg, #eef2ec 0%, #e9efe9 100%);

  /* ---- accent: terracotta. Prices, and nothing but prices. ---- */
  --accent: #c05f36;
  --accent-hover: #a54e2a;
  --accent-soft: #f7ebe2;
  --accent-line: #ecd4c3;

  /* ---- status: muted, never harsh ---- */
  --good: #1f6b45;
  --good-soft: #e7f0e9;
  --good-line: #c9e0d2;
  --warn: #b06a2c;
  --warn-soft: #faf0e4;
  --warn-line: #eddabf;
  --bad: #9c3b2e;
  --bad-soft: #f8e9e5;
  --bad-line: #ebd0c9;
  --gold: #c08a2e;

  /* ---- geometry: soft and round throughout ---- */
  --r-xl: 26px;                /* dialogs */
  --r-lg: 22px;                /* cards */
  --radius: 22px;              /* legacy alias */
  --r-md: 13px;                /* buttons, inputs, tiles */
  --r-sm: 10px;
  --pill: 999px;

  /* ---- depth: warm, green-tinted, weightless ---- */
  --shadow-xs: 0 1px 2px rgba(20, 66, 44, .04);
  --shadow-sm: 0 2px 10px rgba(20, 66, 44, .05);
  --shadow-md: 0 10px 30px rgba(20, 66, 44, .07), 0 2px 6px rgba(20, 66, 44, .03);
  --shadow-lg: 0 24px 60px rgba(20, 66, 44, .10), 0 4px 14px rgba(20, 66, 44, .04);
  --shadow-glass: 0 8px 40px rgba(20, 66, 44, .08), inset 0 1px 0 rgba(255, 255, 255, .75);
  --ring: 0 0 0 4px rgba(20, 66, 44, .10);

  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--body);
  font-family: "Inter", "Segoe UI Variable Text", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: var(--brand); text-decoration: none; transition: color .16s var(--ease); }
a:hover { color: var(--brand-mid); }

::selection { background: rgba(31, 107, 69, .16); color: var(--text); }

/* Ambient light: warm sunlight from the top-left, a cool sage bloom top-right.
   Fixed, so content floats over it. Purely decorative. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 12% 0%, rgba(255, 252, 244, .9), transparent 62%),
    radial-gradient(60% 50% at 90% 4%, rgba(214, 224, 212, .55), transparent 66%),
    radial-gradient(50% 40% at 50% 100%, rgba(232, 230, 219, .5), transparent 70%);
}

/* ------------------------- glassmorphism smudge -------------------------- */

/* Heavily blurred colour blobs drifting behind everything. They give the
   frosted surfaces something to actually refract — without them, "backdrop
   blur" over a flat colour is invisible. Kept low-opacity and slow so the
   page still reads as calm. */
.bg-smudge {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;      /* blobs drift, but never scroll the page sideways */
  pointer-events: none;
}
.smudge {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .85;
  will-change: transform;
}
/* sage bloom, upper left — sits behind the nav so its blur has something to bite on */
.smudge.s1 {
  width: 46vw;
  height: 46vw;
  top: -10vw;
  left: -6vw;
  background: radial-gradient(circle, rgba(31, 107, 69, .5), rgba(31, 107, 69, 0) 66%);
  animation: drift1 34s ease-in-out infinite;
}
/* terracotta haze, upper right — the only warm note, kept faint */
.smudge.s2 {
  width: 42vw;
  height: 42vw;
  top: -8vw;
  right: -8vw;
  background: radial-gradient(circle, rgba(192, 95, 54, .34), rgba(192, 95, 54, 0) 66%);
  animation: drift2 42s ease-in-out infinite;
}
/* deep green, behind the hero + search pill, so the frosted bar reads as glass */
.smudge.s3 {
  width: 56vw;
  height: 56vw;
  top: 18vh;
  left: 22vw;
  background: radial-gradient(circle, rgba(20, 66, 44, .3), rgba(20, 66, 44, 0) 68%);
  animation: drift3 50s ease-in-out infinite;
}

@keyframes drift1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6vw, 4vh, 0) scale(1.12); }
}
@keyframes drift2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-5vw, 6vh, 0) scale(1.08); }
}
@keyframes drift3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-7vw, -5vh, 0) scale(1.1); }
}

/* ============================ typography ================================= */

h1, h2, h3, h4 {
  color: var(--text);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}
h1 { font-size: 34px; margin: 0 0 6px; }
h2 { font-size: 23px; margin: 0 0 4px; }
h3 { font-size: 17px; font-weight: 650; margin: 0; letter-spacing: -.012em; }

p { margin: 0 0 10px; }

.muted { color: var(--muted); }
b, strong { color: var(--text); font-weight: 650; }

/* Emphasis word in a headline — a soft green wash, never a loud one. */
.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Tiny uppercase label — "DATE & TIME", stat captions, section eyebrows. */
.eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
}

.stat {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1.15;
  transition: transform .25s var(--ease);
}

/* Money. The one place terracotta is allowed. */
.price { color: var(--accent); font-weight: 700; letter-spacing: -.01em; }

/* ============================== chrome =================================== */

.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 16px 20px 0;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 10px 12px 10px 22px;
  border-radius: var(--pill);
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-glass);
}
/* Without backdrop-filter, legibility beats the effect. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: #fcfcf9; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 750;
  font-size: 19px;
  letter-spacing: -.03em;
  color: var(--text);
  white-space: nowrap;
}
.brand:hover { color: var(--text); }
.brand i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--grad);
  color: #fff;
  font-size: 15px;
  box-shadow: 0 4px 10px rgba(20, 66, 44, .22);
}

.nav-links { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }

/* Icons and text labels that exist only inside the mobile menu, where a bare
   icon would be cryptic. The desktop bar stays text-only, as in the reference. */
.nav-ico, .nav-label { display: none; }

/* Hamburger. Hidden on desktop; the only nav control below 720px. */
.nav-toggle {
  display: none;
  position: relative;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
  transition: background .2s var(--ease), box-shadow .2s;
}
.nav-toggle:hover { background: var(--brand-soft); }
.nav-toggle:focus-visible { outline: none; box-shadow: var(--ring); }
/* unread count is hidden inside the closed menu, so surface a dot on the button */
.nav-toggle .badge-dot { position: absolute; top: 9px; right: 10px; margin: 0; }

/* Nav items are quiet text until hovered; the single filled pill is the CTA. */
.nav-links .btn.ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--body);
  font-weight: 550;
  border-radius: var(--pill);
  padding: 8px 14px;
}
.nav-links .btn.ghost:hover {
  background: rgba(20, 66, 44, .06);
  border-color: transparent;
  color: var(--text);
  box-shadow: none;
}
.nav-links .btn.ghost.active {
  color: var(--text);
  font-weight: 700;
  background: rgba(20, 66, 44, .07);
}
.nav-links .btn:not(.ghost) { border-radius: var(--pill); }

/* role chip */
.nav-links .pill {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  color: var(--text);
  font-weight: 600;
  padding: 6px 12px;
  text-transform: capitalize;
}

.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 30px 24px 80px;
}

/* ------------------------------ footer ---------------------------------- */

.footer {
  margin-top: 72px;
  padding: 56px 24px 0;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
.footer-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 44px;
}
.footer h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}
.footer .brand { font-size: 20px; margin-bottom: 12px; }
.footer p { color: var(--muted); font-size: 14px; max-width: 42ch; }
.footer-links { display: grid; gap: 11px; }
.footer-links a { color: var(--muted); font-size: 14px; width: fit-content; }
.footer-links a:hover { color: var(--text); }

.footer-social { display: flex; gap: 8px; margin-top: 18px; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  box-shadow: var(--shadow-xs);
  transition: transform .2s var(--ease), color .2s, box-shadow .2s;
}
.footer-social a:hover { color: var(--text); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.footer-bottom {
  max-width: 1300px;
  margin: 44px auto 0;
  padding: 20px 0 26px;
  border-top: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-mid);
  margin-right: 7px;
  box-shadow: 0 0 0 3px rgba(31, 107, 69, .14);
}

/* ============================== buttons ================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand);
  color: #fff;
  border: 1px solid transparent;
  padding: 12px 22px;
  border-radius: var(--r-md);
  font-weight: 620;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.25;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(20, 66, 44, .18);
  transition: transform .18s var(--ease), box-shadow .22s var(--ease), background .2s, color .2s,
    border-color .2s;
}
.btn:hover {
  background: var(--brand-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(20, 66, 44, .24);
}
.btn:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(20, 66, 44, .2); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* Secondary: a hairline on near-white. */
.btn.ghost {
  background: var(--card);
  color: var(--text);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-xs);
}
.btn.ghost:hover {
  background: var(--card);
  color: var(--text);
  border-color: var(--brand-line);
  box-shadow: var(--shadow-md);
}

/* WhatsApp: the glyph carries the brand green so the button stays recognisable,
   while the button itself keeps the app's own ghost styling. A fully green
   WhatsApp button would fight the forest palette everywhere else on the card. */
.btn.ghost.wa:hover { border-color: #25d366; }
.btn.ghost.wa i { color: #25d366; font-size: 17px; }

.btn.sm { padding: 9px 15px; font-size: 13px; border-radius: var(--r-sm); gap: 6px; }
.btn.lg { padding: 15px 30px; font-size: 15px; }

/* The emphasis CTA — a whisper of a gradient, not a neon one. */
.btn.grad {
  background: var(--grad);
  background-size: 150% 150%;
  border: 0;
  box-shadow: 0 6px 20px rgba(20, 66, 44, .22);
}
.btn.grad:hover { background-position: 100% 0; box-shadow: 0 12px 30px rgba(20, 66, 44, .28); }

/* Destructive: muted brick, never a fire engine. */
.btn.bad { background: var(--bad); box-shadow: 0 4px 14px rgba(156, 59, 46, .18); }
.btn.bad:hover { background: #85311f; box-shadow: 0 10px 26px rgba(156, 59, 46, .24); }
.btn.good { background: var(--brand-mid); box-shadow: 0 4px 14px rgba(31, 107, 69, .2); }
.btn.good:hover { background: #185737; box-shadow: 0 10px 26px rgba(31, 107, 69, .26); }

/* Terracotta outline — the reference's "Schedule a Call". */
.btn.accent {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent-line);
  box-shadow: none;
}
.btn.accent:hover { background: var(--accent-soft); color: var(--accent-hover); border-color: var(--accent); }

.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* =============================== forms =================================== */

input, textarea {
  background: var(--card);
  border: 1px solid var(--line-strong);
  color: var(--text);
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}
input[type="radio"], input[type="checkbox"] {
  width: auto;
  min-width: 0;
  accent-color: var(--brand);
  cursor: pointer;
}

input::placeholder, textarea::placeholder { color: var(--faint); }

input:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: var(--brand-line);
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-mid);
  box-shadow: var(--ring);
  background-color: #fff;
}

textarea { min-height: 96px; resize: vertical; line-height: 1.55; }

label {
  display: block;
  font-size: 13px;
  font-weight: 620;
  color: var(--text);
  margin: 14px 0 7px;
  letter-spacing: -.005em;
}
label .muted { font-weight: 500; }

/* ---------------------------- password reveal ---------------------------- */

.pwfield { position: relative; }
/* Keep a long password clear of the eye sitting over the input's right edge. */
.pwfield input { padding-right: 44px; }

.pwfield-eye {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  border-radius: var(--r-md);
  transition: color .18s;
}
.pwfield-eye:hover { color: var(--brand-mid); }
.pwfield-eye:focus-visible {
  outline: none;
  color: var(--brand-mid);
  box-shadow: var(--ring);
}

/* ------------------------- date picker / calendar ------------------------ */

/* No native date/time inputs remain — their popups are OS chrome we can't theme,
   so both the calendar and the time wheels below are rendered by us. */

.datefield { position: relative; }

/* Reads as an input, behaves as a disclosure. */
.datefield-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s;
}
.datefield-btn:hover { border-color: var(--brand-line); }
.datefield-btn.open,
.datefield-btn:focus-visible {
  outline: none;
  border-color: var(--brand-mid);
  box-shadow: var(--ring);
}
.datefield-btn > i:first-child { color: var(--brand-mid); font-size: 16px; }
.datefield-btn span { flex: 1; }
.datefield-btn span.ph { color: var(--faint); }
.datefield-btn .chev { color: var(--muted); font-size: 16px; transition: transform .2s var(--ease); }
.datefield-btn.open .chev { transform: rotate(180deg); }

/* The popover: a frosted pane floating over the page. */
.datefield-pop {
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  left: 0;
  min-width: 300px;
  padding: 16px;
  border-radius: var(--r-lg);
  /* opaque enough that day numbers never fight whatever sits behind the glass */
  background: rgba(252, 252, 249, .93);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-lg);
  animation: popIn .2s var(--ease) both;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .datefield-pop { background: #fcfcf9; }
}
/* near the right edge of a narrow rail, tuck it back inside */
@media (max-width: 640px) {
  .datefield-pop { left: 50%; transform: translateX(-50%); }
}

/* A modal scrolls its own body, which would clip a floating popover. Inside one,
   the calendar expands inline and pushes the form down instead. */
.modal-card .datefield-pop {
  position: static;
  transform: none;
  width: 100%;
  min-width: 0;
  margin-top: 8px;
  box-shadow: var(--shadow-sm);
}

/* ------------------------------ select ---------------------------------- */

/* Same story as the calendar: a native <select> renders its option list as OS
   chrome, so no amount of styling on the control itself reaches the popup.
   The list below is ours. */

.selectfield { position: relative; }

/* Reads as an input, behaves as a disclosure — deliberately identical to
   .datefield-btn, minus the leading icon. */
.selectfield-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s;
}
.selectfield-btn:hover:not(:disabled) { border-color: var(--brand-line); }
.selectfield-btn.open,
.selectfield-btn:focus-visible {
  outline: none;
  border-color: var(--brand-mid);
  box-shadow: var(--ring);
}
.selectfield-btn:disabled { opacity: .55; cursor: not-allowed; }
.selectfield-btn > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selectfield-btn > span.ph { color: var(--faint); }
.selectfield-btn .chev { color: var(--muted); font-size: 16px; transition: transform .2s var(--ease); }
.selectfield-btn.open .chev { transform: rotate(180deg); }

/* The list: the same frosted pane the calendar floats in. */
.select-pop {
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  min-width: max-content;
  max-height: 264px;               /* ~7 options, then it scrolls */
  overflow-y: auto;
  padding: 6px;
  border-radius: var(--r-md);
  background: rgba(252, 252, 249, .93);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-lg);
  animation: popIn .2s var(--ease) both;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .select-pop { background: #fcfcf9; }
}

.select-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--body);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.select-opt > span { flex: 1; }
.select-opt > i { color: var(--brand-mid); font-size: 16px; }
/* Hover and keyboard cursor are one state — the pointer moves `active`. */
.select-opt.active { background: var(--brand-soft); color: var(--text); }
.select-opt.sel { color: var(--text); font-weight: 620; }
.select-opt:focus-visible { outline: none; box-shadow: var(--ring); }

/* Inside a modal the popover would be clipped by the modal's own scroll, so it
   expands inline and pushes the form down — as the calendar does. */
.modal-card .select-pop {
  position: static;
  width: 100%;
  margin-top: 8px;
  box-shadow: var(--shadow-sm);
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.cal-head b { font-size: 14px; letter-spacing: -.01em; }
.cal-nav {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.cal-nav:hover { background: var(--brand-soft); color: var(--text); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.cal-week {
  margin-bottom: 4px;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cal-week span { text-align: center; padding: 4px 0; }

.cal-day {
  display: grid;
  place-items: center;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  transition: background .16s, color .16s, transform .16s var(--ease);
}
.cal-day:hover:not(:disabled) { background: var(--brand-soft); }
.cal-day:focus-visible { outline: none; box-shadow: var(--ring); }
.cal-day:disabled { color: var(--faint); cursor: not-allowed; opacity: .5; }
/* today is ringed; the selected day is filled */
.cal-day.today { border-color: var(--brand-line); font-weight: 700; }
.cal-day.sel {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 700;
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(20, 66, 44, .24);
}

.cal-foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
}
.cal-foot .btn { width: 100%; }

/* ---------------------------- date + time pair --------------------------- */

/* Two buttons in a row sharing one panel below them. The panel is in normal
   flow, so it can't be clipped by a modal's scroll the way a popover would. */
.datetime { position: relative; }
.datetime-row { display: flex; gap: 8px; align-items: stretch; }
.datetime-row .datefield-btn { flex: 1 1 auto; min-width: 0; }
.datetime-row .datefield-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datetime-row .time-btn { flex: 0 0 138px; }

.dt-panel {
  margin-top: 8px;
  padding: 16px;
  border-radius: var(--r-lg);
  background: rgba(252, 252, 249, .93);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-md);
  animation: slideIn .2s var(--ease) both;
}

/* ------------------------------ time wheels ------------------------------ */

.time-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.time-col { display: grid; gap: 6px; min-width: 0; }
.time-col .eyebrow { text-align: center; }

/* Each wheel scrolls independently; the selected option is centred on open.
   The mask fades the half-scrolled rows at each end instead of slicing them. */
.time-scroll {
  display: grid;
  gap: 4px;
  max-height: 176px;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.time-scroll::-webkit-scrollbar { width: 6px; }
.time-scroll::-webkit-scrollbar-track { background: transparent; }
.time-scroll::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
}
.time-scroll::-webkit-scrollbar-thumb:hover { background: var(--brand-line); }

.time-opt {
  height: 36px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background .16s, color .16s, transform .16s var(--ease);
}
.time-opt:hover { background: var(--brand-soft); }
.time-opt:focus-visible { outline: none; box-shadow: var(--ring); }
.time-opt.sel {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(20, 66, 44, .22);
}

/* ---- validation ---- */
.req { color: var(--accent); margin-left: 2px; font-weight: 700; }
input.invalid, select.invalid, textarea.invalid {
  border-color: var(--bad-line);
  background-color: var(--bad-soft);
}
input.invalid:focus, select.invalid:focus, textarea.invalid:focus {
  border-color: var(--bad);
  box-shadow: 0 0 0 4px rgba(156, 59, 46, .10);
}
.field-error {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 550;
  color: var(--bad);
}

/* ========================= layout primitives ============================= */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}

.grid { display: grid; gap: 22px; }
/* auto-FILL, not auto-fit: auto-fit collapses the empty tracks, so a result set
   smaller than one row (a single venue after a narrow filter) stretched that one
   card across the whole grid. auto-fill keeps the tracks, so a lone card is card
   -sized. With a full row the two behave identically.
   The 320px floor keeps 3 roomy cards on a desktop — a 4th column would orphan
   the 5th venue and squeeze the card text into extra lines. */
.grid.cols { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 40px 0 20px;
}
.section-head p { margin: 3px 0 0; color: var(--muted); font-size: 14px; }

.page-head { margin-bottom: 26px; }
.page-head p { margin: 5px 0 0; color: var(--muted); }

/* Icon tile that leads a section heading, as in the reference's card headers. */
.head-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--text);
  font-size: 17px;
  flex: none;
}

/* ================================ hero =================================== */

.hero {
  position: relative;
  text-align: center;
  padding: 60px 0 36px;
}
.hero h1 {
  font-size: clamp(34px, 5.2vw, 56px);
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1.08;
  margin: 0 auto 16px;
  max-width: 26ch;
}
.hero .muted {
  font-size: 17px;
  margin: 0 auto;
  max-width: 56ch;
  line-height: 1.6;
}

/* The reference's "Eco-Certified" capsule: cream fill, terracotta ink. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 8px 16px 8px 10px;
  border-radius: var(--pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  font-size: 13px;
  font-weight: 620;
  color: var(--accent-hover);
}
.hero-badge i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
}

/* ---------------------- search bar (frosted, floating) ------------------- */

.searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 940px;
  margin: 34px auto 0;
  padding: 10px 10px 10px 22px;
  border-radius: var(--pill);
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-lg);
  transition: box-shadow .3s var(--ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .searchbar { background: #fcfcf9; }
}
.searchbar:focus-within {
  box-shadow: 0 24px 60px rgba(20, 66, 44, .12), 0 0 0 4px rgba(20, 66, 44, .08);
}
.searchbar .search-ico { font-size: 18px; color: var(--brand-mid); display: flex; }
.searchbar .search-input {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  border: 0;
  padding: 11px 4px;
  background: transparent;
  color: var(--text);
}
.searchbar .search-input:hover,
.searchbar .search-input:focus { box-shadow: none; background: transparent; }
.searchbar .btn { border-radius: var(--pill); padding-inline: 24px; }
.searchbar .btn.ghost { box-shadow: none; }

.filter-panel { border-radius: var(--r-lg); }
.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  align-items: end;
}
.filters label { margin-top: 0; }

/* ============================ stats sentence ============================= */

/* One line of prose instead of a tile band — same figures, far less furniture.
   Sits in the same glass chip vocabulary as .hero-badge so the two read as a
   pair framing the search bar. */
.stats-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 40px auto 0;
  padding: 13px 24px;
  border-radius: var(--pill);
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-md);
  color: var(--muted);
  font-size: 15px;
  text-align: center;
  text-wrap: balance;
}
/* The figures carry the headline's gradient; tabular digits keep them from
   jittering as filters change the numbers. */
.stats-line b {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .stats-line { border-radius: var(--r-lg); padding: 12px 18px; font-size: 14px; }
}

/* ========================== venue (hall) cards =========================== */

.hall-card {
  display: flex;
  flex-direction: column;
  padding: 10px;
  overflow: hidden;
  cursor: pointer;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}
a.hall-card { display: flex; text-decoration: none; }
.hall-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-line);
}

.hall-media {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  isolation: isolate;
}
.hall-photo {
  height: 208px;
  border-radius: 15px;
  background-size: cover;
  background-position: center;
  background-color: var(--card2);
  transition: transform .7s var(--ease);
}
.hall-card:hover .hall-photo { transform: scale(1.05); }

/* Frosted price tag over the photo — money still reads terracotta. */
.price-chip {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  padding: 7px 13px;
  border-radius: var(--pill);
  background: rgba(252, 252, 249, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .9);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  box-shadow: 0 4px 14px rgba(20, 66, 44, .16);
}

.hall-body { padding: 18px 10px 8px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hall-body h3 { font-size: 17px; font-weight: 700; }

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
}
.rating-badge i { color: var(--gold); font-size: 13px; }
.rating-badge .muted { font-weight: 500; }
/* an unrated venue reads as "New", not as a zero-star rating */
.rating-badge.new {
  padding: 3px 10px;
  border-radius: var(--pill);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--text);
  font-size: 11.5px;
}

.hall-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  font-size: 13px;
  color: var(--muted);
}
.hall-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hall-meta i { color: var(--brand-mid); font-size: 14px; }

.hall-cta {
  display: block;
  margin-top: auto;
  padding: 11px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--text);
  text-align: center;
  font-size: 13.5px;
  font-weight: 650;
  transition: background .22s var(--ease), color .22s, border-color .22s, box-shadow .22s;
}
.hall-card:hover .hall-cta {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 6px 18px rgba(20, 66, 44, .22);
}

.hall-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-soft);
  color: var(--brand-line);
  font-size: 26px;
}

/* ========================= pills / chips / badges ======================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--pill);
  background: var(--card2);
  border: 1px solid var(--line);
  color: var(--muted);
  letter-spacing: -.005em;
  white-space: nowrap;
}
/* Only status values are title-cased — capitalising every pill would turn
   "applies to you" into "Applies To You" and audit actions into "Booking.create". */
.pill.status { text-transform: capitalize; }
.pill.good  { background: var(--good-soft);   color: var(--good);   border-color: var(--good-line); }
.pill.warn  { background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn-line); }
.pill.bad   { background: var(--bad-soft);    color: var(--bad);    border-color: var(--bad-line); }
.pill.brand { background: var(--brand-soft);  color: var(--text);   border-color: var(--brand-line); }
.pill.accent{ background: var(--accent-soft); color: var(--accent-hover); border-color: var(--accent-line); }

.stars { color: var(--gold); letter-spacing: 1px; display: inline-flex; gap: 1px; }
.stars i { font-size: 14px; }

.badge-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 4px;
}

/* ===================== availability: sessions & hours ==================== */

.sessions { display: grid; gap: 10px; }
.session {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--card);
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s var(--ease);
}
.session:hover {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  transform: translateX(2px);
}
.session .muted { font-size: 12.5px; }
.session.busy {
  cursor: not-allowed;
  color: var(--faint);
  background: var(--card2);
  border-color: var(--line);
  transform: none;
}
.session.busy b { text-decoration: line-through; color: var(--faint); }
.session.busy:hover { border-color: var(--line); background: var(--card2); transform: none; }
.session.sel {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 8px 22px rgba(20, 66, 44, .22);
  transform: none;
}
.session.sel b { color: #fff; }
.session.sel .muted { color: rgba(255, 255, 255, .78); }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.slot {
  padding: 11px 8px;
  border-radius: var(--r-sm);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--card);
  transition: border-color .16s, background .16s, color .16s, box-shadow .16s;
}
.slot:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.slot.busy {
  cursor: not-allowed;
  text-decoration: line-through;
  color: var(--faint);
  background: var(--card2);
  border-color: var(--line);
}
.slot.busy:hover { border-color: var(--line); background: var(--card2); color: var(--faint); }
.slot.sel {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 4px 12px rgba(20, 66, 44, .22);
}

.duration-bar {
  margin-top: 12px;
  padding: 11px 15px;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  font-size: 13px;
  color: var(--text);
}

/* -------------------- booking panel (the right rail) -------------------- */

/* NOT sticky. The rail holds this panel AND the "Contact venue" card below it,
   so pinning the panel meant the contact card scrolled up underneath it — and a
   sticky box is *positioned*, so it painted over its static sibling and hid the
   card outright. The panel's whole sticky travel (rail height minus its own)
   happened to equal the gap to that card, so every pixel of the effect was spent
   covering it. Re-pinning this requires the panel to be the only thing in the
   rail. */
.booking-panel { padding: 0; overflow: hidden; }
.booking-panel > .panel-head {
  padding: 20px 24px;
  background: var(--grad-soft);
  border-bottom: 1px solid var(--line);
}
.booking-panel > .panel-head h3 { font-size: 18px; }
.booking-panel > .panel-head p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.booking-panel > .panel-body { padding: 22px 24px 24px; }

/* The reference's "Total Estimate": a hairline rule, a caption, a big green
   number, and the currency in terracotta. No dark slab. */
.total-box {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.total-box .total-when { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.total-box .total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}
.total-box b {
  color: var(--text);
  font-size: 32px;
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1.1;
}
.total-box .cur {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent);
}

/* Line items above the total (venue, buffer, fees). */
.sum-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 13.5px;
  color: var(--body);
}
.sum-line b { color: var(--text); font-weight: 620; }

.trust-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  color: var(--muted);
}
.trust-row span { display: inline-flex; align-items: center; gap: 5px; }
.trust-row i { color: var(--brand-mid); }

/* ============================== tables =================================== */

.table-wrap { overflow-x: auto; border-radius: var(--r-md); }
.table-card { padding: 10px; }

table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
thead th {
  background: var(--card2);
  color: var(--muted);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: left;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
thead th:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
thead th:last-child  { border-radius: 0 var(--r-md) var(--r-md) 0; }
td {
  text-align: left;
  padding: 15px;
  border-bottom: 1px solid var(--line);
  color: var(--body);
  vertical-align: middle;
}
td b { color: var(--text); }
tbody tr { transition: background .18s; }
tbody tr:hover { background: rgba(20, 66, 44, .025); }
tbody tr:last-child td { border-bottom: 0; }

.countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  padding: 4px 12px;
  border-radius: var(--pill);
  font-size: 13px;
}

/* =============================== tabs ==================================== */

.tabbar {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 26px;
  flex-wrap: wrap;
  padding: 5px;
  border-radius: var(--pill);
  background: rgba(20, 66, 44, .05);
  border: 1px solid var(--line);
}
.tabbar a {
  padding: 9px 20px;
  border-radius: var(--pill);
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
  font-size: 13.5px;
  text-transform: capitalize;
  transition: background .22s var(--ease), color .22s, box-shadow .22s;
}
.tabbar a:hover { color: var(--text); background: rgba(255, 255, 255, .6); }
.tabbar a.active {
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* ============================== modals =================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 44, 34, .38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-card {
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 26px;
  border-radius: var(--r-xl);
  border-color: var(--glass-line);
  box-shadow: 0 36px 90px rgba(20, 66, 44, .26);
}
/* nowrap: a long title ("Reschedule · Skyline Conference Hall") would otherwise
   push the close button onto its own line */
.modal-card > .row.between:first-child {
  margin-bottom: 8px;
  flex-wrap: nowrap;
  gap: 14px;
  align-items: flex-start;
}
.modal-card > .row.between:first-child h2 { font-size: 22px; min-width: 0; }
.modal-card > .row.between:first-child .btn.ghost.sm {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  font-size: 17px;
  color: var(--muted);
}
.modal-card > .row.between:first-child .btn.ghost.sm:hover { color: var(--bad); border-color: var(--bad-line); }

.checkout-venue {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
  padding: 13px;
  border-radius: var(--r-md);
  background: var(--grad-soft);
  border: 1px solid var(--line);
}
.checkout-venue .hall-photo { flex: 0 0 88px; height: 64px; border-radius: 10px; }
.checkout-venue b { display: block; letter-spacing: -.01em; }

/* ------------------------- cancellation modal --------------------------- */

.cancel-summary {
  padding: 15px 17px;
  border-radius: var(--r-md);
  background: var(--card2);
  border: 1px solid var(--line);
  margin-bottom: 18px;
}
.refund-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 19px;
  border-radius: var(--r-md);
  font-size: 15px;
}
.refund-box b { font-size: 24px; letter-spacing: -.03em; }
.refund-box.good { background: var(--good-soft); border: 1px solid var(--good-line); color: var(--good); }
.refund-box.good b { color: var(--good); }
.refund-box.none { background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn); }
.refund-box.none b { color: var(--warn); }

.policy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.policy-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  border: 1px solid transparent;
  color: var(--muted);
}
.policy-list li b { color: var(--text); font-weight: 650; }
.policy-list li.active {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  color: var(--text);
}

/* =========================== venue gallery =============================== */

.gallery-main {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.gallery-main .hall-photo { height: 400px; border-radius: var(--r-lg); }
.gallery-main:hover .hall-photo { transform: scale(1.03); }
.gallery-zoom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(252, 252, 249, .88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 18px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.gallery-main:hover .gallery-zoom,
.gallery-main:focus-visible .gallery-zoom { opacity: 1; transform: none; }

.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.gallery-thumb {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 12px;
  line-height: 0;
  overflow: hidden;
}
.gallery-thumb .hall-photo {
  height: 76px;
  width: 108px;
  border-radius: 12px;
  opacity: .62;
  transition: opacity .22s, transform .35s var(--ease);
}
.gallery-thumb:hover .hall-photo { opacity: 1; transform: scale(1.06); }
.gallery-thumb.active .hall-photo { opacity: 1; box-shadow: 0 0 0 2.5px var(--brand) inset; }

/* ------------------------------ lightbox -------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 30, 23, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 40px;
  cursor: zoom-out;
}
.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: var(--r-md);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
  cursor: default;
}
.lightbox-close, .lightbox-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  transition: background .2s, transform .2s var(--ease);
}
.lightbox-close { top: 22px; right: 26px; width: 42px; height: 42px; font-size: 22px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 28px; }
.lightbox-nav.prev { left: 22px; }
.lightbox-nav.next { right: 22px; }
.lightbox-close:hover { background: rgba(255, 255, 255, .26); transform: scale(1.06); }
.lightbox-nav:hover { background: rgba(255, 255, 255, .26); transform: translateY(-50%) scale(1.06); }
.lightbox-count {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, .12);
  color: #eef2ee;
  font-size: 13px;
  letter-spacing: .04em;
}

/* ========================= bookings & directory ========================== */

.booking-card { display: flex; gap: 20px; align-items: stretch; padding: 18px; }
.booking-card:hover { box-shadow: var(--shadow-md); border-color: var(--brand-line); }
.booking-thumb { flex: 0 0 172px; display: block; border-radius: var(--r-md); overflow: hidden; }
.booking-thumb .hall-photo { height: 100%; min-height: 122px; border-radius: var(--r-md); }
.booking-thumb:hover .hall-photo { transform: scale(1.05); }
.booking-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.booking-body h3 { font-size: 17px; }
.booking-body h3 a { color: inherit; text-decoration: none; }
.booking-body h3 a:hover { color: var(--brand-mid); }

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.fact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: background .2s, border-color .2s;
}
.fact:hover { background: var(--brand-soft); border-color: var(--brand-line); }
.fact span { font-size: 13px; }
.fact span:first-child { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.fact b { font-size: 13.5px; text-align: right; }

.auth-card { max-width: 450px; margin: 48px auto; padding: 32px; }
.auth-card .tabbar { display: flex; width: 100%; margin-bottom: 24px; }
.auth-card .tabbar a { flex: 1; text-align: center; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.step { text-align: center; padding: 28px 22px; }
.step-ico {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--text);
  font-size: 22px;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease);
}
.step:hover .step-ico {
  transform: translateY(-3px) rotate(-4deg);
  box-shadow: 0 10px 24px rgba(20, 66, 44, .14);
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 13.5px; margin: 0; }

/* Section band with the deeper wash (full-bleed inside .container). */
.band {
  margin: 64px -24px 0;
  padding: 52px 24px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band > * { max-width: 1300px; margin-inline: auto; }

/* ---------------------------- empty states ------------------------------ */

.empty {
  text-align: center;
  padding: 60px 24px;
  border-radius: var(--r-lg);
  border: 1px dashed var(--line-strong);
  background: rgba(252, 252, 249, .5);
  color: var(--muted);
}
.empty i { font-size: 34px; color: var(--brand-line); display: block; margin-bottom: 14px; }
.empty b { display: block; font-size: 17px; margin-bottom: 4px; }

/* --------------------------- loading states ----------------------------- */

/* Skeletons breathe with a slow sheen instead of a spinner. */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--card2);
  border-radius: var(--r-sm);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  animation: shimmer 1.5s infinite;
}
.sk-photo { height: 208px; border-radius: 15px; }
.sk-line { height: 12px; border-radius: 6px; margin-top: 12px; }
.sk-line.w60 { width: 60%; }
.sk-line.w40 { width: 40%; }
.sk-line.tall { height: 34px; border-radius: var(--r-md); margin-top: 18px; }

/* ------------------------------ tooltips -------------------------------- */

[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 7px 11px;
  border-radius: var(--r-sm);
  background: rgba(20, 66, 44, .95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12px;
  font-weight: 550;
  line-height: 1.35;
  letter-spacing: -.005em;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  z-index: 30;
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* Anything near the top edge (the nav) tips downward instead. */
[data-tip].tip-below::after {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translate(-50%, -4px);
}
[data-tip].tip-below:hover::after,
[data-tip].tip-below:focus-visible::after { transform: translate(-50%, 0); }

/* =============================== toast =================================== */

.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(40px);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(20, 66, 44, .95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 14px 24px;
  border-radius: var(--pill);
  box-shadow: 0 20px 48px rgba(20, 66, 44, .3);
  font-size: 14px;
  font-weight: 550;
  opacity: 0;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  z-index: 90;
  max-width: 90vw;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.good { background: rgba(31, 107, 69, .96); }
.toast.warn { background: rgba(176, 106, 44, .96); }
.toast.bad  { background: rgba(156, 59, 46, .96); }

/* ============================ page grids ================================= */

.detail-grid { grid-template-columns: 1.55fr 1fr; align-items: start; }
.contact-grid { grid-template-columns: 1fr 1.15fr; gap: 22px; align-items: start; }

/* ============================== icons ==================================== */

/* ---------- account avatar + menu ---------- */
.user-menu { position: relative; display: inline-flex; }
.avatar {
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--brand-line); border-radius: 50%;
  background: var(--grad); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  font-family: inherit; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.avatar:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.avatar:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.avatar.lg { width: 42px; height: 42px; font-size: 15px; flex-shrink: 0; }

.menu-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  min-width: 244px; padding: 8px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  animation: popIn .16s var(--ease) both;
}
.menu-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.menu-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-id b { font-size: 14px; }
.menu-id .muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.menu-id .pill { align-self: flex-start; margin-top: 3px; font-size: 10px; }

.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 10px; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text);
  font-family: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
}
.menu-item i { font-size: 16px; color: var(--muted); }
.menu-item:hover { background: var(--card2); }
.menu-item.danger { color: var(--bad); }
.menu-item.danger i { color: var(--bad); }
.menu-item.danger:hover { background: var(--bad-soft); }

/* Consequences spelled out before an irreversible action. */
.danger-note {
  display: flex; gap: 10px; margin-bottom: 16px; padding: 12px 14px;
  background: var(--bad-soft); border: 1px solid var(--bad-line);
  border-radius: var(--r-md);
}
.danger-note i { flex-shrink: 0; color: var(--bad); font-size: 18px; }
.danger-note p { margin: 4px 0 0; font-size: 13px; }
.field-note { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }
.form-divider {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13px; font-weight: 700;
}

/* ---------- hall form ---------- */
/* A 6-column grid, so every field lands on the same rails no matter how many
   sit in a row. The old flex rows sized each field by its row's count, which is
   why a 5-up row never lined up with a 3-up one. */
.hall-form {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px 14px;
  align-items: start;   /* an inline error grows its own cell, not its neighbours */
}
.hall-form .f { grid-column: span 2; min-width: 0; }   /* a third */
.hall-form .f.half { grid-column: span 3; }
.hall-form .f.full { grid-column: span 6; }
.hall-form label { margin: 0 0 6px; }
.hall-form .field-error { margin-top: 5px; }

/* Section headers group the form into Basics / Location / … */
.hall-form .sec {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0 -4px; color: var(--muted);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.hall-form .sec::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.hall-form .sec:first-child { margin-top: 0; }

/* Actions stay reachable while the (tall) form scrolls under them. */
/* Every button row: spaced and right-aligned. Kept unscoped so dialogs outside
   the hall form (e.g. admin venue verification) get the spacing too. */
.form-actions {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}

/* Inside the long hall form the row also docks to the bottom as a sticky footer. */
.hall-form .form-actions {
  grid-column: 1 / -1;
  position: sticky; bottom: -20px; z-index: 1;
  margin: 6px -20px -20px; padding: 14px 20px;
  background: var(--card); border-top: 1px solid var(--line);
}
.hall-form .form-actions .btn { min-width: 108px; }
.form-hint { grid-column: 1 / -1; margin: 0; font-size: 13px; }

@media (max-width: 560px) {
  .hall-form .f, .hall-form .f.half { grid-column: span 6; }
}

/* ---------- photo upload (hall form) ---------- */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 24px 16px; text-align: center; cursor: pointer;
  background: var(--card2); border: 2px dashed var(--line-strong); border-radius: 12px;
  transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: var(--brand); }
.dropzone.over { border-color: var(--brand); background: var(--brand-soft); }
.dropzone i { font-size: 26px; color: var(--brand); }
.dropzone p { margin: 0; font-size: 13px; }
.dropzone .muted { font-size: 12px; }
.dropzone .ri-loader-4-line { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px; margin-top: 12px;
}
.photo-thumb {
  position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line);
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-remove, .photo-promote {
  position: absolute; top: 4px; display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(15, 23, 42, .62); color: #fff; font-size: 14px; line-height: 1;
}
.photo-remove { right: 4px; }
.photo-promote { left: 4px; }
.photo-remove:hover { background: var(--bad); }
.photo-promote:hover { background: var(--brand); }
.photo-cover {
  position: absolute; left: 4px; top: 4px; padding: 2px 7px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}

/* ---------- admin console ---------- */
/* Its own shell: dark sidebar, no booker chrome. Deliberately reads as a
   back-office tool rather than the customer-facing site. */
.admin-shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.admin-side {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 14px; background: #0f172a; color: #cbd5e1;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-brand {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 4px 8px 16px; color: #fff; font-weight: 800; font-size: 18px; letter-spacing: -.02em;
}
.admin-brand span {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: rgba(45, 212, 191, .16); color: #5eead4;
}
.admin-nav { display: flex; flex-direction: column; gap: 2px; }
.admin-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 9px; color: #cbd5e1; font-size: 14px; font-weight: 500;
  transition: background .15s, color .15s;
}
.admin-nav a:hover { background: rgba(148, 163, 184, .14); color: #fff; }
.admin-nav a.active { background: var(--brand); color: #fff; font-weight: 600; }
.admin-badge {
  margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; text-align: center;
}
.admin-nav a.active .admin-badge { background: rgba(255, 255, 255, .25); }

/* The console's own sign-in screen — deliberately nothing like the booker one. */
.admin-login {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px; background: #0f172a;
}
.admin-login-card {
  width: 100%; max-width: 400px; padding: 28px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.admin-login-card h2 { margin: 0 0 4px; }
.admin-login-brand {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 22px; font-weight: 800; font-size: 20px; letter-spacing: -.02em;
}
.admin-login-brand span {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand);
}
.admin-login-exit { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--muted); }
.admin-login-exit:hover { color: var(--brand); }

.admin-main { display: flex; flex-direction: column; min-width: 0; }
.admin-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 26px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(12px);
}
.admin-who { display: flex; align-items: center; gap: 10px; }
.admin-body { padding: 24px 26px 56px; min-width: 0; }
.admin-body h1 { margin-top: 0; }
/* Tables here are wide (8+ columns) — let them scroll inside the card. */
.admin-body .card { overflow-x: auto; }
.admin-hint { margin: 4px 0 0; font-size: 13px; }
.admin-tile { color: inherit; display: block; }
.admin-tile .card { transition: border-color .15s, box-shadow .15s; }
.admin-tile:hover .card { border-color: var(--brand); box-shadow: var(--shadow-md); }
.admin-filters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0 16px; margin-bottom: 22px;
}
.admin-filters label { margin-top: 0; }
.admin-message p { margin: 10px 0; }
/* Free-text cells (audit details, enquiry messages) must not blow the layout. */
.admin-clamp {
  max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { position: static; height: auto; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; }
}

[class^="ri-"], [class*=" ri-"] { vertical-align: -.125em; line-height: 1; }

/* ============================== motion =================================== */

@keyframes fadeUp  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn   { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes pulse   { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes shimmer { to { transform: translateX(100%); } }

.hero { animation: fadeUp .5s var(--ease) both; }
.searchbar { animation: fadeUp .5s .06s var(--ease) both; }
.stats-line { animation: fadeUp .5s .12s var(--ease) both; }
.filter-panel { animation: slideIn .24s var(--ease) both; }
.page-head { animation: fadeUp .38s var(--ease) both; }

/* Cards arrive in a short stagger rather than all at once. */
.grid > * { animation: fadeUp .46s var(--ease) both; }
.grid > *:nth-child(1) { animation-delay: .02s; }
.grid > *:nth-child(2) { animation-delay: .07s; }
.grid > *:nth-child(3) { animation-delay: .12s; }
.grid > *:nth-child(4) { animation-delay: .17s; }
.grid > *:nth-child(5) { animation-delay: .22s; }
.grid > *:nth-child(6) { animation-delay: .27s; }
.grid > *:nth-child(n + 7) { animation-delay: .3s; }

/* Page-level "Loading…" breathes so a slow request doesn't look frozen.
   Scoped to #app's direct child so muted em-dashes in table cells don't pulse. */
#app > p.muted:only-child { animation: pulse 1.4s ease-in-out infinite; }

.modal-backdrop { animation: fadeIn .18s ease both; }
.modal-card { animation: popIn .28s var(--ease) both; }
.lightbox { animation: fadeIn .2s ease both; }
.lightbox img { animation: popIn .3s var(--ease) both; }

.duration-bar, .refund-box, .field-error, .total-box { animation: slideIn .22s var(--ease) both; }
.slot.sel, .session.sel { animation: popIn .2s var(--ease) both; }

.card:hover > .stat { transform: scale(1.03); }

/* Anyone who asked their OS for less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================ responsive ================================= */

@media (max-width: 1024px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-inner > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .detail-grid, .contact-grid { grid-template-columns: 1fr; }
  .booking-panel { position: static; }
  .gallery-main .hall-photo { height: 320px; }
}

@media (max-width: 720px) {
  .nav-wrap { padding: 12px 12px 0; }
  /* relative: the menu panel hangs off the pill */
  .nav { position: relative; padding: 8px 8px 8px 18px; }
  .nav-toggle { display: grid; }

  /* The links stop being a row and become a menu. */
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    padding: 12px;
    border-radius: var(--r-lg);
    /* Nearly opaque on purpose: this panel sits over body copy, and a 74%-alpha
       surface let headings ghost straight through the menu items. Glass must
       never cost legibility — the blur still does the work behind it. */
    background: rgba(252, 252, 249, .97);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid var(--glass-line);
    box-shadow: 0 24px 60px rgba(20, 66, 44, .18), 0 4px 14px rgba(20, 66, 44, .06);
    animation: slideIn .22s var(--ease) both;
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav-links.open { background: #fcfcf9; }
  }

  .nav-links.open .nav-ico,
  .nav-links.open .nav-label { display: inline; }

  /* full-width rows, left-aligned, generous tap targets */
  .nav-links.open .btn {
    width: 100%;
    justify-content: flex-start;
    gap: 11px;
    padding: 13px 14px;
    font-size: 14.5px;
    border-radius: var(--r-md);
  }
  .nav-links.open .btn.ghost { background: transparent; color: var(--text); box-shadow: none; }
  .nav-links.open .btn.ghost:hover,
  .nav-links.open .btn.ghost.active { background: var(--brand-soft); color: var(--text); }
  .nav-links.open .btn.ghost .nav-ico,
  .nav-links.open .btn.ghost > i:first-child { color: var(--brand-mid); font-size: 17px; }

  /* the role chip heads the menu */
  .nav-links.open .nav-who { align-self: flex-start; margin: 2px 2px 9px; }

  /* the one filled action (Logout / Get started) sits apart at the foot */
  .nav-links.open .btn:not(.ghost) {
    margin-top: 10px;
    justify-content: center;
  }

  .container { padding: 22px 16px 60px; }
  .band { margin-inline: -16px; padding-inline: 16px; }
}

@media (max-width: 640px) {
  h1 { font-size: 27px; }
  .hero { padding: 36px 0 26px; }
  .hero .muted { font-size: 15.5px; }

  /* the search pill unrolls into a stacked card on phones */
  .searchbar {
    flex-wrap: wrap;
    border-radius: var(--r-lg);
    padding: 14px;
    gap: 10px;
  }
  .searchbar .search-ico { display: none; }
  .searchbar .search-input {
    flex-basis: 100%;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    padding: 12px 14px;
  }
  .searchbar .btn { flex: 1; }

  .card { padding: 20px; }
  .facts { grid-template-columns: 1fr; }
  .booking-card { flex-direction: column; }
  .booking-thumb { flex-basis: auto; }
  .booking-thumb .hall-photo { height: 150px; }
  .gallery-main .hall-photo { height: 230px; }
  .gallery-thumb .hall-photo { height: 58px; width: 82px; }
  .modal-card { padding: 22px; border-radius: var(--r-lg); }
  .tabbar { display: flex; width: 100%; overflow-x: auto; }
  .footer-inner { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { justify-content: center; text-align: center; }
  .lightbox { padding: 16px; }
  .lightbox-nav { width: 40px; height: 40px; font-size: 24px; }
  /* tooltips would clip on narrow screens */
  [data-tip]::after { display: none; }
}

/* ============================ Compare venues ============================ */
/* Toggle over a browse card's photo — mirrors the price chip on the right. */
.compare-toggle {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--pill);
  background: rgba(252, 252, 249, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .9);
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.compare-toggle:hover:not(:disabled) { background: #fff; transform: translateY(-1px); }
.compare-toggle.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.compare-toggle:disabled { opacity: .5; cursor: not-allowed; }

/* Floating bar that collects the picked venues. */
.compare-bar {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--pill);
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-line);
  box-shadow: 0 18px 40px -18px rgba(20, 67, 42, .5);
  animation: popIn .28s var(--ease) both;
}
.compare-bar-items { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.compare-bar-ico { color: var(--brand-mid); font-size: 18px; }
.compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  padding: 5px 6px 5px 12px;
  border-radius: var(--pill);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compare-chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(20, 67, 42, .08);
  color: var(--brand);
  cursor: pointer;
  flex: 0 0 auto;
}
.compare-chip button:hover { background: var(--bad-soft); color: var(--bad); }

/* Side-by-side comparison table inside the modal. */
.cmp-scroll { overflow-x: auto; }
.compare-grid {
  display: grid;
  grid-template-columns: 132px 1fr 1fr;
  min-width: 440px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cmp-corner { background: var(--card2); }
.cmp-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px;
  background: var(--card2);
  border-left: 1px solid var(--line);
}
.cmp-head .hall-photo { height: 92px; border-radius: var(--r-sm); margin-bottom: 4px; }
.cmp-name { font-weight: 700; color: var(--text); font-size: 14.5px; line-height: 1.25; }
.cmp-name:hover { color: var(--brand-mid); text-decoration: underline; }
/* display:contents lets each row's three cells flow straight into the grid. */
.cmp-row { display: contents; }
.cmp-label,
.cmp-cell {
  padding: 10px 12px;
  font-size: 13px;
  border-top: 1px solid var(--line);
}
.cmp-label { color: var(--muted); background: var(--card2); }
.cmp-cell { border-left: 1px solid var(--line); }
.cmp-win { color: var(--good); font-weight: 700; background: var(--good-soft); }

.cmp-amenities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
  margin-top: 18px;
}
@media (max-width: 560px) {
  .cmp-amenities { grid-template-columns: 1fr; }
  .compare-bar { border-radius: var(--r-lg); }
}