/* ==========================================================================
   Col's Family Cafe — unified platform stylesheet
   Public site + booking engine + staff dashboard, one design system.
   ========================================================================== */

:root{
  --ink:#0d0d0d;
  --ink-2:#1c1c1c;
  --cream:#f6f2e8;
  --paper:#fbf9f4;
  --white:#fff;
  --gold:#b8965a;
  --gold-soft:#d9c9a6;
  --line:#e6dfd0;
  --line-2:#efeade;
  --text:#1c1a17;
  --muted:#6f6a61;
  --muted-2:#9c968b;
  --green:#3f8f5f;
  --green-bg:#eaf4ee;
  --amber:#b5822a;
  --amber-bg:#faf1de;
  --red:#b04a3c;
  --red-bg:#f9ecea;
  --r:4px;
  --r-lg:12px;
  --shadow:0 2px 16px rgba(35,28,15,.06);
  --shadow-lg:0 24px 60px rgba(35,28,15,.16);
  --serif:"Playfair Display",Georgia,serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --wrap:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--sans);font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
[hidden]{display:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.15;margin:0}
p{margin:0 0 14px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}
.center{text-align:center}
.hidden{display:none !important}

/* ---------- type helpers ---------- */
.kicker{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-2);font-weight:500;margin:0 0 14px;
}
.h-sec{font-size:clamp(28px,3.4vw,40px)}
.lede{color:var(--muted);max-width:46ch}
.about-contact-block{margin:18px 0 24px}
.flourish{color:var(--gold-soft);font-size:16px;letter-spacing:.3em;margin:0 0 8px}

/* ---------- brand mark (real Col's Family Cafe logo) ---------- */
.logo{display:inline-block;line-height:0;flex:none}
.logo img{height:46px;width:auto;display:block;transition:height .3s}
.logo .on-dark{display:block}
.logo .on-light{display:none}
/* on light surfaces, show the ink version */
.logo--ink .on-dark{display:none}
.logo--ink .on-light{display:block}
.logo--sm img{height:34px}
.logo--lg img{height:82px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border:1px solid transparent;border-radius:var(--r);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  transition:.2s ease;white-space:nowrap;
}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark:hover{background:#333;border-color:#333}
.btn-outline{border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-light{color:#fff;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.btn-light:hover{background:rgba(255,255,255,.16)}
.btn-ghost{border-color:var(--line);color:var(--muted);background:#fff}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-sm{padding:9px 18px;font-size:10px}
.btn-block{width:100%}
.btn:disabled{opacity:.35;pointer-events:none}

/* ---------- header ---------- */
.topbar{
  position:sticky;top:0;z-index:60;padding:16px 0;
  background:var(--paper);border-bottom:1px solid var(--line);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:22px}
.topbar nav{display:flex;align-items:center;gap:28px}
.topbar nav a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;opacity:.82;transition:.2s;color:var(--text)}
.topbar nav a:hover,.topbar nav a.is-active{opacity:1;color:var(--gold)}
.burger{display:none;font-size:20px;padding:4px 8px;color:var(--text)}

/* ---------- hero (split: copy left, photo right) ---------- */
.hero{
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  min-height:min(78vh,640px);background:var(--paper);
}
.hero__copy{
  display:flex;flex-direction:column;justify-content:center;gap:0;
  padding:56px 48px 56px max(28px,calc((100vw - var(--wrap))/2 + 28px));
}
.hero__copy .kicker{color:var(--gold)}
.hero h1{font-size:clamp(34px,3.6vw,52px);line-height:1.1;font-weight:500;color:var(--ink);margin:0 0 20px;letter-spacing:-.01em}
.hero__copy>p{max-width:42ch;color:var(--muted);margin:0 0 30px;font-size:15.5px;line-height:1.7}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero__note{
  display:flex;align-items:center;gap:8px;margin:28px 0 0;font-size:12.5px;
  color:var(--muted-2);max-width:none;
}
.hero__media{position:relative;overflow:hidden;background:var(--cream)}
.hero__slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;
  display:block;opacity:0;transition:opacity 1.1s ease;
}
.hero__slide.is-active{opacity:1}
.hero__media::before{
  content:"";position:absolute;inset:0 auto 0 0;width:22%;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--paper) 0%,rgba(251,249,244,.7) 40%,rgba(251,249,244,0) 100%);
}
.hero__dots{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;
  display:flex;gap:8px;padding:7px 10px;background:rgba(10,10,10,.28);border-radius:999px;
}
.hero__dots button{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);border:0;padding:0;transition:.25s;cursor:pointer}
.hero__dots button:hover{background:rgba(255,255,255,.85)}
.hero__dots button.is-active{background:#fff;width:20px;border-radius:5px}
.hero__cta .btn{padding:15px 30px}

/* ---------- feature strip ---------- */
.strip{background:var(--ink);color:#fff;padding:34px 0}
.strip__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.strip .ico{color:var(--gold-soft);margin-bottom:11px;display:flex;justify-content:center}
.strip .ico svg{width:26px;height:26px}
.strip strong{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;margin-bottom:4px}
.strip span.sub{font-size:12px;color:rgba(255,255,255,.5)}

/* ---------- about ---------- */
.about{background:var(--cream);padding:92px 0}
.about__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.about p{color:var(--muted);max-width:42ch}
.about h2{margin:0 0 18px}
.about .btn{margin-top:12px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.trio img{width:100%;height:280px;object-fit:cover;border-radius:var(--r-lg)}
.trio img:nth-child(2){height:310px;margin-top:-15px}
/* .trio.trio-- (not just .trio--N): the mobile breakpoint below sets
   grid-template-columns on the bare .trio selector too, and since both
   have equal specificity, whichever is later in the file wins regardless
   of which "looks" more specific. Compounding the selector here wins that
   fight at every width instead of just above 720px. */
.trio.trio--2{grid-template-columns:repeat(2,1fr)}
.trio.trio--1{grid-template-columns:1fr}
.trio--1 img{height:400px}

.menu-banner{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 44px}
.menu-banner img{width:100%;height:200px;object-fit:cover;border-radius:var(--r-lg)}
.menu-banner.menu-banner--5{grid-template-columns:repeat(5,1fr)}

/* ---------- menu highlights ---------- */
.highlights{padding:88px 0}
.highlights__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.highlights h2{margin:0 0 32px}
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:14px 10px;margin:0 0 32px;max-width:520px}
.cats span{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;font-size:11px;color:var(--muted)}
.cats b{display:flex;align-items:center;justify-content:center;flex:none;width:50px;height:50px;
  border-radius:50%;background:var(--cream);color:var(--ink);transition:.2s}
.cats b svg{width:21px;height:21px}
.cats span:hover b{background:var(--ink);color:#fff}
.highlights__photo img{width:100%;height:400px;object-fit:cover;border-radius:var(--r-lg)}

/* ---------- events banner ---------- */
.events{padding:0 0 88px}
.events__card{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:400px;display:flex;align-items:center;color:#fff}
.events__card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.events__card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,8,8,.93) 0%,rgba(8,8,8,.7) 46%,rgba(8,8,8,.1) 100%)}
.events__body{position:relative;z-index:2;padding:60px 54px;max-width:560px}
.events__body .kicker{color:rgba(255,255,255,.55)}
.events__body h2{color:#fff;margin:0 0 16px;font-size:clamp(28px,3.6vw,42px)}
.events__body p{color:rgba(255,255,255,.75);max-width:38ch;margin-bottom:26px}

/* ---------- gallery ---------- */
.gallery{padding:0 0 88px}
.gallery h2{margin:0 0 28px}
.gallery__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:32px}
.gallery__grid a{display:block;overflow:hidden;border-radius:var(--r)}
.gallery__grid img{width:100%;height:135px;object-fit:cover;transition:transform .5s}
.gallery__grid a:hover img{transform:scale(1.07)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.68);padding:60px 0 0}
.site-footer__grid{display:grid;grid-template-columns:1fr 1.05fr 1.05fr .85fr;gap:38px}
.site-footer h4{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:500;margin:0 0 16px}
.site-footer p,.site-footer li{font-size:13px;color:rgba(255,255,255,.6);margin:0 0 7px}
.site-footer a:hover{color:#fff}
.hours-row{display:flex;justify-content:space-between;gap:20px;max-width:230px}
.socials{display:flex;gap:10px;margin-top:6px}
.socials a{width:34px;height:34px;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:grid;place-items:center;font-size:13px;transition:.2s}
.socials a svg{width:16px;height:16px}
.socials a:hover{background:#fff;color:var(--ink);border-color:#fff}
.site-footer__bottom{margin-top:48px;border-top:1px solid rgba(255,255,255,.1);padding:18px 0;
  font-size:12px;color:rgba(255,255,255,.4);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- page head ---------- */
.page-head{text-align:center;padding:70px 0 34px}
.page-head h1{font-size:clamp(30px,4vw,44px);margin:0 0 8px}
.page-head p{color:var(--muted);margin:0}

.prose{max-width:700px;margin:0 auto;padding:0 0 90px}
.prose h2{font-size:20px;margin:38px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--muted);margin:0 0 14px;line-height:1.75}
.prose ul{margin:0 0 14px;padding-left:20px}
.prose a{color:var(--gold);text-decoration:underline}
.prose .updated{font-size:12.5px;color:var(--muted-2);margin-bottom:34px}

/* ==========================================================================
   MENU
   ========================================================================== */
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 34px}
.tab{padding:9px 20px;border-radius:999px;border:1px solid var(--line);background:#fff;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--muted);transition:.2s}
.tab:hover{border-color:var(--ink);color:var(--ink)}
.tab.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-bottom:20px}
.dish{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;transition:.25s}
.dish:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.dish img{width:100%;height:170px;object-fit:cover}
.dish__body{padding:14px 16px 18px}
.dish__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.dish h3{font-family:var(--sans);font-size:14px;font-weight:500}
.dish .price{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink)}
.dish p{font-size:12.5px;color:var(--muted);margin:5px 0 0;line-height:1.5}
.dish__tag{display:inline-block;margin-top:9px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.empty-note{text-align:center;color:var(--muted);padding:50px 0}

/* ==========================================================================
   BOOKING
   ========================================================================== */
.choose{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:820px;margin:0 auto;padding-bottom:80px}
.choose__card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:44px 32px;text-align:center;transition:.25s}
.choose__card:hover{border-color:var(--gold);box-shadow:var(--shadow);transform:translateY(-3px)}
.choose__card .ico{font-size:34px;color:var(--ink);display:block;margin-bottom:16px;line-height:1}
.choose__card h2{font-size:17px;letter-spacing:.12em;text-transform:uppercase;font-family:var(--sans);font-weight:500;margin:0 0 10px}
.choose__card p{color:var(--muted);font-size:13.5px;margin:0 0 22px}

/* stepper */
.stepper{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:0 0 26px;border-bottom:1px solid var(--line-2);margin-bottom:30px}
.step{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted-2)}
.step b{width:24px;height:24px;border-radius:50%;background:var(--line-2);color:var(--muted);
  display:grid;place-items:center;font-size:11px;font-weight:500;transition:.2s}
.step.is-active{color:var(--text)}
.step.is-active b{background:var(--ink);color:#fff}
.step.is-done b{background:var(--green);color:#fff}
.step-line{flex:1;min-width:18px;height:1px;background:var(--line)}

.booking-shell{max-width:960px;margin:0 auto;padding:0 28px 90px}
.panel{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:34px 36px;box-shadow:var(--shadow)}
.panel h2{font-size:26px;margin:0 0 24px}
.panel__grid{display:grid;grid-template-columns:1fr 1.1fr .8fr;gap:32px;align-items:start}
.panel__grid--2{grid-template-columns:1.4fr .8fr}

.field{display:block;margin-bottom:18px}
.field>span.label{display:block;font-size:12px;font-weight:500;margin-bottom:8px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=date],
.field select,.field textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);background:#fff;font-size:14px;transition:.2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--ink)}
.field textarea{min-height:82px;resize:vertical}
.hint{font-size:11.5px;color:var(--muted-2);margin:6px 0 0}
.hint--block{margin:0 0 14px}
.hp-group-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);font-weight:500;margin:0 0 12px}
.hp-group-label:not(:first-child){margin-top:26px}
.field--top{margin-top:14px}

.counter{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r);width:150px;overflow:hidden}
.counter button{width:42px;height:42px;font-size:17px;color:var(--muted);transition:.15s}
.counter button:hover{background:var(--cream);color:var(--ink)}
.counter span,.counter input{flex:1;text-align:center;font-size:15px;font-weight:500}
.counter input{border:0;background:transparent;width:0;padding:0;font-family:inherit;color:var(--text)}
.counter input::-webkit-outer-spin-button,.counter input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.counter input[type=number]{-moz-appearance:textfield;appearance:textfield}
.counter input:focus{outline:none}

/* calendar */
.cal{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;background:#fff}
.cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal__head b{font-family:var(--serif);font-size:15px;font-weight:500}
.cal__head button{width:26px;height:26px;border-radius:50%;color:var(--muted);font-size:14px}
.cal__head button:hover{background:var(--cream);color:var(--ink)}
/* minmax(0,1fr), not 1fr: a bare 1fr is minmax(auto,1fr), and that auto
   floor stops columns shrinking below their content width — so on a narrow
   screen (or with the browser's text size turned up, as Samsung Internet
   allows) the seven columns overflow the card and Saturday gets clipped. */
.cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;text-align:center}
.cal__dow{font-size:10px;color:var(--muted-2);padding:4px 0;letter-spacing:.04em}
.cal__day{aspect-ratio:1;display:grid;place-items:center;border-radius:50%;font-size:12.5px;color:var(--text);transition:.15s}
.cal__day:hover:not(:disabled){background:var(--cream)}
.cal__day:disabled{color:#d3cec3;cursor:not-allowed}
.cal__day.is-sel{background:var(--gold);color:#fff;font-weight:500}
.cal__day.is-today{box-shadow:inset 0 0 0 1px var(--gold-soft)}
.cal__day.is-full:disabled{color:var(--red);opacity:.6;text-decoration:line-through}
.cal--lg{max-width:640px;margin:0 auto 30px;padding:22px 26px}
.cal--lg .cal__head{margin-bottom:16px}
.cal--lg .cal__head b{font-size:19px}
.cal--lg .cal__head button{width:34px;height:34px;font-size:16px}
.cal--lg .cal__grid{gap:6px}
.cal--lg .cal__dow{font-size:11.5px;padding:6px 0}
.cal--lg .cal__day{font-size:15px}
@media (max-width:640px){
  .cal--lg{max-width:none;padding:18px}
  .cal--lg .cal__grid{gap:4px}
  .cal--lg .cal__day{font-size:14px}
}
/* Narrow handsets: reclaim the padding so the day circles stay big enough
   to tap accurately rather than shrinking to fit the chrome around them. */
@media (max-width:400px){
  .cal--lg{padding:12px}
  .cal--lg .cal__grid{gap:2px}
  .cal--lg .cal__dow{font-size:10px}
}

/* note card */
.note{background:var(--cream);border-radius:var(--r-lg);padding:20px 22px;position:relative;overflow:hidden}
.note b{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px}
.note p{font-size:12.5px;color:var(--muted);margin:0;max-width:26ch}
.note .leaf{position:absolute;right:10px;bottom:6px;font-size:34px;color:var(--gold-soft);opacity:.5;line-height:1}

/* time slots */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.slot{padding:12px 6px;border:1px solid var(--line);border-radius:var(--r);background:#fff;text-align:center;transition:.18s}
.slot b{display:block;font-size:14px;font-weight:500}
.slot small{font-size:10.5px;color:var(--muted-2)}
.slot:hover:not(:disabled){border-color:var(--ink)}
.slot.is-sel{background:var(--ink);border-color:var(--ink);color:#fff}
.slot.is-sel small{color:rgba(255,255,255,.65)}
.slot:disabled{opacity:1;cursor:not-allowed;background:var(--red-bg);border-color:var(--red-bg);color:var(--red)}
.slot:disabled small{color:var(--red)}
.slot-group{margin-bottom:24px}
.slot-group h4{font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin:0 0 10px}

/* checkbox grid */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.check{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--ink);cursor:pointer}

/* summary */
.summary{background:var(--cream);border-radius:var(--r-lg);padding:22px 24px}
.summary h4{font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.summary__row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06);font-size:13px}
.summary__row:last-child{border:0}
.summary__row span{color:var(--muted)}
.summary__row b{font-weight:500;text-align:right}

.panel__foot{display:flex;justify-content:space-between;gap:14px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line-2)}
.panel__foot--tight{justify-content:flex-end;margin-top:16px;padding-top:16px}

/* confirmation */
.confirm-wrap{max-width:520px;margin:0 auto;text-align:center;padding:40px 28px 90px;position:relative}
.confetti{position:absolute;inset:0 0 auto;height:200px;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;width:7px;height:7px;border-radius:1px;opacity:.85;animation:fall 3.2s ease-in infinite}
@keyframes fall{0%{transform:translateY(-30px) rotate(0);opacity:0}
  15%{opacity:.9}100%{transform:translateY(210px) rotate(320deg);opacity:0}}
.tick{width:70px;height:70px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;
  margin:0 auto 22px;font-size:28px;position:relative;z-index:2}
.tick--pending{border-style:dashed;animation:tick-pulse 1.6s ease-in-out infinite}
@keyframes tick-pulse{0%,100%{opacity:.4}50%{opacity:1}}
.confirm-wrap h1{font-size:32px;margin:0 0 10px}
.confirm-wrap>p{color:var(--muted);margin:0 0 26px}
.receipt{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:8px 20px;text-align:left;margin-bottom:22px}
.receipt__row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.receipt__row:last-child{border:0}
.receipt__row span{color:var(--muted)}
.receipt__row b{font-weight:500}
.sent-note{font-size:12.5px;color:var(--muted-2);margin:0 0 24px}

/* ==========================================================================
   STAFF — login
   ========================================================================== */
.login-shell{min-height:100vh;display:grid;place-items:center;padding:40px 24px;background:var(--cream)}
.login-box{width:100%;max-width:410px;text-align:center}
.login-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:36px 34px;box-shadow:var(--shadow);text-align:left;margin-top:26px}
.login-card h1{font-size:26px;margin:0 0 6px}
.login-card .sub{color:var(--muted);font-size:13.5px;margin:0 0 24px}
.login-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:-4px 0 20px;font-size:12.5px}
.login-row a{color:var(--gold)}
.demo-note{background:var(--cream);border-radius:var(--r);padding:11px 14px;font-size:12px;color:var(--muted);margin:18px 0 0;text-align:center}
.demo-note b{color:var(--text);font-weight:500}
.form-error{color:var(--red);font-size:12.5px;margin:12px 0 0;min-height:18px}
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.login-foot{font-size:12px;color:var(--muted-2);margin-top:22px}

/* ==========================================================================
   STAFF — dashboard
   ========================================================================== */
.staff{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
/* mobile-only header bar with the hamburger that opens the sidebar drawer;
   hidden on desktop where the sidebar is just always visible */
.dashboard-topbar{
  display:none;align-items:center;justify-content:space-between;gap:14px;
  background:var(--ink);color:#fff;padding:14px 18px;position:sticky;top:0;z-index:190;
}
.dashboard-topbar .logo img{height:30px}
.dashboard-topbar__burger{font-size:22px;line-height:1;color:#fff;padding:4px 8px}
.sidebar{background:var(--ink);color:rgba(255,255,255,.72);padding:26px 18px;display:flex;flex-direction:column;gap:26px;position:sticky;top:0;height:100vh}
.sidebar .logo{align-self:flex-start;margin-left:6px}
.sidebar nav{display:flex;flex-direction:column;gap:3px;flex:1}
.sidebar nav a{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:var(--r);font-size:13px;transition:.18s}
.sidebar nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar nav a.is-active{background:rgba(255,255,255,.1);color:#fff}
.sidebar nav a .ico{width:16px;flex:none;opacity:.8;display:inline-flex}
.sidebar nav a .ico svg,.sidebar__foot .ico svg{width:16px;height:16px}
.sidebar__foot{border-top:1px solid rgba(255,255,255,.1);padding-top:16px}
.sidebar__foot button,.sidebar__foot a{display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:var(--r);
  font-size:13px;color:rgba(255,255,255,.6);width:100%;transition:.18s}
.sidebar__foot button:hover,.sidebar__foot a:hover{background:rgba(255,255,255,.07);color:#fff}

.staff__main{padding:32px 38px 60px;background:var(--paper);min-width:0}
.staff__head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.staff__head h1{font-size:28px}
.owner{display:flex;align-items:center;gap:9px;font-size:13px}
.owner .av{width:30px;height:30px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:30px}
.stat{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:18px 20px}
.stat p{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin:0 0 6px}
.stat b{font-family:var(--serif);font-size:32px;font-weight:500;line-height:1}
.stat small{display:block;font-size:11.5px;color:var(--muted-2);margin-top:4px}
.walkin-counter{display:flex;align-items:center;gap:12px}
.walkin-counter b{font-family:var(--serif);font-size:32px;font-weight:500;line-height:1;min-width:24px;text-align:center}
.walkin-counter .icon-btn{padding:6px 12px;font-size:15px;line-height:1}

.card{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;margin-bottom:24px}
.card--warn{border-color:var(--amber)}
.needs-check-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--line-2)}
.needs-check-row:last-child{border-bottom:0}
.needs-check-row .meta{font-size:13px}
.needs-check-row .meta b{font-weight:500}
.needs-check-row .meta span{color:var(--muted-2);font-size:12px;display:block}
.needs-check-row .actions{display:flex;gap:8px}
.floor-badge{font-size:10.5px;padding:3px 9px;border-radius:999px;font-weight:500}
.floor-badge--waiting{background:var(--line-2);color:var(--muted)}
.floor-badge--seated{background:var(--green-bg);color:var(--green)}
.floor-badge--overdue{background:var(--amber-bg);color:var(--amber)}
.floor-badge--left{background:var(--line-2);color:var(--muted-2)}
.card__head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.card__head h2{font-size:19px}
.card__tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.card__tools select,.card__tools input{padding:8px 11px;border:1px solid var(--line);border-radius:var(--r);font-size:12.5px;background:#fff}
.card__body{padding:22px}

/* Scrolls contained within its own card at any screen size, instead of the
   table bleeding past the card edge (and the last column/actions getting
   cut off) once there are more columns than fit the viewport. */
.table-scroll{overflow-x:auto}

table.data{width:100%;border-collapse:separate;border-spacing:0}
table.data th{
  text-align:left;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
  font-weight:500;padding:12px 22px;border-bottom:1px solid var(--line-2);white-space:nowrap}
table.data td{padding:14px 22px;border-bottom:1px solid var(--line-2);font-size:13.5px;vertical-align:middle}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:#fcfaf6}
table.data .nm{font-weight:500}
table.data .sub{font-size:11.5px;color:var(--muted-2)}
/* Keeps a long name/note from wrapping onto several lines and making just
   that one row taller than the rest -- the full text is still there on
   hover via the title attribute. */
table.data td.td-trunc{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Pin the actions column to the right of the scroll area (see
   .table-scroll above) so Edit/Delete/etc. are always reachable without
   scrolling all the way across a wide table -- the point of a table-scroll
   wrapper is that the DATA scrolls, not the row's own controls. Needs its
   own opaque background (matching the row's normal/hover state) since a
   sticky cell sits on top of whatever scrolls underneath it.
   The flex layout for the buttons themselves lives on an inner
   <div class="row-actions">, never on this <td> directly -- display:flex
   on a table cell pulls it out of table layout entirely, so Chrome stops
   stretching it to match the row's height like every other cell. That
   was the actual cause of a taller row's Status dropdown showing through
   beside the icons instead of staying cleanly hidden behind them. */
table.data th.actions-col,
table.data td.sticky-actions{
  position:sticky;right:0;background:#fff;
  box-shadow:-6px 0 8px -6px rgba(0,0,0,.1);
}
table.data th.actions-col{background:#fdfcfa}
table.data tbody tr:hover td.sticky-actions{background:#fcfaf6}

.pill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:11px;font-weight:500}
.pill--confirmed{background:var(--green-bg);color:var(--green)}
.pill--requested{background:var(--amber-bg);color:var(--amber)}
.pill--cancelled{background:var(--red-bg);color:var(--red)}
.pill--table{background:var(--line-2);color:var(--muted)}
.pill--event{background:#efe7f5;color:#6d4b8c}
.pill--payment-paid{background:var(--green-bg);color:var(--green)}
.pill--payment-pending{background:var(--amber-bg);color:var(--amber)}
.pill--payment-failed{background:var(--red-bg);color:var(--red)}
.pill--payment-deposit_paid{background:var(--amber-bg);color:var(--amber)}

.row-actions{display:flex;gap:6px;justify-content:flex-end}
.icon-btn{padding:5px 10px;border:1px solid var(--line);border-radius:var(--r);font-size:11px;color:var(--muted);transition:.18s;white-space:nowrap}
.icon-btn:hover{border-color:var(--ink);color:var(--ink)}
.icon-btn--danger:hover{border-color:var(--red);color:var(--red)}
/* Icon-only variant (bookings table row actions) -- a fixed square instead
   of text-sized padding, so 2-4 actions per row stay compact. The svg
   itself is pointer-events:none so a click anywhere on the icon still
   lands on the button (and its data-action), not a path inside it. */
.icon-btn--sq{width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.icon-btn--sq svg{pointer-events:none}

.bulk-bar{display:flex;align-items:center;gap:12px;padding:11px 22px;background:var(--cream);
  border-bottom:1px solid var(--line-2);font-size:12.5px;color:var(--text);flex-wrap:wrap}
.bulk-bar b{font-weight:600}
.bulk-bar .spacer{flex:1}
.bulk-bar select{padding:7px 10px;border:1px solid var(--line);border-radius:var(--r);font-size:12px;background:#fff}
table.data th input[type=checkbox],table.data td input[type=checkbox]{width:15px;height:15px;accent-color:var(--ink);cursor:pointer}
.gallery-tile{position:relative}
.gallery-tile__check{position:absolute;top:8px;left:8px;z-index:2;width:18px;height:18px;
  accent-color:var(--ink);cursor:pointer;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}

/* staff calendar */
.month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
.month__dow{background:#fff;padding:9px;text-align:center;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.month__cell{background:#fff;min-height:104px;padding:8px;font-size:12px}
.month__cell.is-out{background:#fbfaf7;color:var(--muted-2)}
.month__cell .d{font-size:11.5px;color:var(--muted);margin-bottom:5px}
.month__cell.is-today .d{background:var(--ink);color:#fff;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;font-size:10.5px}
.chip{display:block;font-size:10.5px;padding:3px 6px;border-radius:3px;margin-bottom:3px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;background:var(--cream);color:var(--text)}
.chip--event{background:#efe7f5;color:#5c3f77}
.chip--req{background:var(--amber-bg);color:var(--amber)}

/* settings */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.table-group-row{display:grid;grid-template-columns:1fr 90px 90px 90px auto;gap:10px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line-2)}
.table-group-row:last-child{border-bottom:0}
.table-group-row input{padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);font-size:13px;width:100%}
.table-group-row .subtotal{font-size:12.5px;color:var(--muted-2);text-align:right;white-space:nowrap}
.table-group-row--form{border-top:1px solid var(--line-2);border-bottom:0;padding-top:16px;margin-top:4px}
.category-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line-2)}
.category-row:last-child{border-bottom:0}
.category-row input{padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);font-size:13px;width:100%}
.category-add-form{grid-template-columns:1fr auto}
.venue-slot-row{display:grid;grid-template-columns:1.4fr 100px 100px 100px 110px auto;gap:10px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line-2)}
.venue-slot-row:last-child{border-bottom:0}
.venue-slot-row input[type=text],.venue-slot-row input[type=time],.venue-slot-row input[type=number]{
  padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);font-size:13px;width:100%}
.venue-slot-row--form{border-top:1px solid var(--line-2);border-bottom:0;padding-top:16px;margin-top:4px}
.venue-slot-row--head{padding:0 0 8px;border-bottom:0;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.vs-fullday-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted-2);white-space:nowrap}
.package-card{padding:10px 0;border-bottom:1px solid var(--line-2)}
.package-card:last-child{border-bottom:0}
.package-card--form{border-top:1px solid var(--line-2);border-bottom:0;padding-top:12px;margin-top:4px}
.package-row{display:grid;grid-template-columns:1.2fr 110px 100px 100px 1.3fr auto auto;gap:10px;align-items:center}
.package-row input[type=text],.package-row input[type=number],.package-row select{
  padding:7px 9px;border:1px solid var(--line);border-radius:var(--r);font-size:12px;width:100%}
.pk-addvenue-label{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted-2);white-space:nowrap}
.pk-slots{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pk-slot-chip{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted-2);
  background:var(--cream);border:1px solid var(--line-2);border-radius:999px;padding:4px 10px 4px 8px}
.tables-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.tables-grid--photos{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.field--narrow{max-width:260px}
.gallery-tile{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.gallery-tile img{width:100%;height:110px;object-fit:cover;display:block}
.gallery-tile__body{padding:8px}
.gallery-tile select{width:100%;font-size:11px;padding:5px 6px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:6px}
.gallery-tile .icon-btn{width:100%}
.gallery-tile__label{font-size:10.5px;color:var(--muted);margin:0 0 6px;font-weight:500}
.gallery-tile__placeholder{height:110px;background:var(--line-2)}
.gallery-tile input[type=file]{width:100%;font-size:10px}
.table-tile{border:1px solid var(--line);border-radius:var(--r);padding:12px;text-align:center;background:#fff}
.table-tile b{display:block;font-size:13px;font-weight:500}
.table-tile small{font-size:11px;color:var(--muted-2)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  background:rgba(15,12,8,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal[hidden]{display:none}
.modal__card{background:#fff;border-radius:var(--r-lg);width:100%;max-width:520px;max-height:88vh;overflow:auto;
  padding:30px 32px;box-shadow:var(--shadow-lg);position:relative}
.modal__card h3{font-size:22px;margin:0 0 4px}
.modal__card .sub{color:var(--muted);font-size:13px;margin:0 0 22px}
.modal__close{position:absolute;top:14px;right:16px;font-size:20px;color:var(--muted-2);line-height:1}
.modal__close:hover{color:var(--ink)}
.modal__foot{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}

/* ---------- radio option rows (payment choice, package choice) ---------- */
.pay-choice{padding:16px 20px;border-top:1px solid var(--line-2)}
.pay-choice h4{margin:0 0 10px;font-size:14px}
.pay-choice__opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;
  border:1px solid var(--line-2);border-radius:10px;margin-bottom:8px;cursor:pointer}
.pay-choice__opt:has(input:checked){border-color:var(--ink);background:var(--cream,#faf6ee)}
.pay-choice__opt input{margin-top:3px;flex-shrink:0}
.pay-choice__opt span{font-size:13px;color:var(--muted)}
.pay-choice__opt b{color:var(--ink);font-size:13px}
#package-options .pay-choice__opt{margin-bottom:10px}
#package-options small{display:block;color:var(--muted-2);font-weight:400;margin-top:2px}
#package-options .pkg-includes{margin:4px 0 0;padding-left:16px;color:var(--muted-2);font-weight:400;font-size:12.5px}
#package-options .pkg-includes li{margin-bottom:1px}

/* ---------- toast ---------- */
.toast-wrap{position:fixed;right:20px;bottom:20px;z-index:300;display:flex;flex-direction:column;gap:10px}
.toast{background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r);font-size:13px;
  box-shadow:var(--shadow-lg);animation:slide .3s ease}
@keyframes slide{from{transform:translateY(12px);opacity:0}}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  .about__grid,.highlights__grid,.settings-grid{grid-template-columns:1fr;gap:36px}
  .panel__grid,.panel__grid--2{grid-template-columns:1fr}
  .menu-grid{grid-template-columns:repeat(2,1fr)}
  .gallery__grid{grid-template-columns:repeat(3,1fr)}
  .staff{grid-template-columns:1fr}
  .dashboard-topbar{display:flex}
  /* off-canvas drawer, not the squeezed horizontal bar this used to be */
  .sidebar{
    position:fixed;inset:0 auto 0 0;width:270px;height:100vh;z-index:210;
    transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--shadow-lg);
  }
  .sidebar.is-open{transform:translateX(0)}
  .sidebar nav{flex-direction:column}
  .sidebar-backdrop{
    position:fixed;inset:0;background:rgba(10,10,10,.45);z-index:200;
    opacity:0;pointer-events:none;transition:opacity .25s ease;
  }
  .sidebar-backdrop.is-open{opacity:1;pointer-events:auto}
  .staff__main{padding:24px 20px 50px}
  table.data{min-width:660px}
  /* Same fix as table.data above: these admin row-grids have too many
     fixed-width columns to ever fit a phone screen -- letting them shrink
     just squeezes every field down to nothing (a name field showing one
     visible letter). Give them a real min-width and let their .table-scroll
     wrapper scroll horizontally instead, so every column stays usable. */
  .table-group-row,.table-group-row--form{min-width:520px}
  .venue-slot-row,.venue-slot-row--form,.venue-slot-row--head{min-width:700px}
  .package-row{min-width:900px}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero__copy{padding:44px 24px 36px}
  .hero__media{min-height:320px}
  .hero__media::before{
    inset:0 0 auto 0;width:auto;height:26%;
    background:linear-gradient(180deg,var(--paper) 0%,rgba(251,249,244,.7) 45%,rgba(251,249,244,0) 100%);
  }
}
@media(max-width:720px){
  .topbar nav{display:none}
  .burger{display:block}
  .topbar.is-mobile-open nav{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--paper);
    flex-direction:column;gap:0;padding:8px 24px 18px;border-bottom:1px solid var(--line)}
  .topbar.is-mobile-open nav a{padding:10px 0;color:var(--text)}
  .strip__grid{grid-template-columns:1fr 1fr;gap:26px}
  .trio{grid-template-columns:1fr 1fr}
  .trio img:nth-child(3){display:none}
  .menu-banner,.menu-banner.menu-banner--5{grid-template-columns:repeat(2,1fr)}
  .cats{grid-template-columns:repeat(3,1fr);gap:22px 12px;max-width:none}
  .menu-grid,.choose{grid-template-columns:1fr}
  .gallery__grid{grid-template-columns:repeat(2,1fr)}
  .site-footer__grid{grid-template-columns:1fr 1fr}
  .events__body{padding:44px 28px}
  .panel{padding:26px 22px}
  .checks{grid-template-columns:1fr}
  .month__cell{min-height:74px}
}