/* ── MenuHub Default Theme — light, fresh food-delivery style ───────
   Light background throughout, including the nav/footer/sidebar chrome
   (not a dark frame around a light body). Green is the primary brand
   accent (buttons, active states, ratings-adjacent highlights); blue is
   secondary (info panels, badges, the second stop in brand gradients).
   Sora (display) against Inter (body/UI) for real typographic contrast.
   The hero section keeps a dark photo-scrim + white text — that's a
   legibility need for text over food photography, not a theme choice,
   so it stays regardless of the site being light. */
:root {
    --t-ink:         #FFFFFF;
    --t-ink-2:       #F1F5F9;
    --t-ink-border:  #E2E8F0;
    --t-ink-text:    #0F172A;
    --t-ink-muted:   #64748B;

    --t-bg:       #F7F9FB;
    --t-surface:  #FFFFFF;
    --t-card:     #FFFFFF;
    --t-border:   #E2E8F0;
    --t-text:     #0F172A;
    --t-muted:    #64748B;

    --t-green:      #16A34A;
    --t-green-dark: #15803D;
    --t-blue:      #2563EB;
    --t-blue-dark: #1D4ED8;
    /* Kept as aliases (not new colors) so every existing --t-gold/--t-accent*
       reference throughout this file and the page templates resolves to the
       new brand colors automatically — renaming ~25+ call sites individually
       would be the same outcome with far more chances to miss one. */
    --t-gold:      var(--t-green);
    --t-gold-dark: var(--t-green-dark);
    --t-accent:    var(--t-green);
    --t-accent2:   var(--t-blue);
    --t-danger:    #DC2626;

    --t-radius:   14px;
    --t-shadow:   0 10px 28px rgba(15,23,42,.08);
    --t-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --t-font-display: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body   { margin:0; font-family:var(--t-font); background:var(--t-bg); color:var(--t-text); font-size:16px; line-height:1.65 }
a      { color:var(--t-blue); text-decoration:none }
a:hover{ color:var(--t-blue-dark) }
img    { max-width:100%; display:block }
h1,h2,h3,h4,h5,h6 { font-family:var(--t-font-display) }

/* ── Nav (restaurant-scoped pages) ───────────────────────── */
.t-nav { position:sticky;top:0;z-index:100;background:var(--t-ink);border-bottom:1px solid var(--t-ink-border);padding:.9rem 0 }
.t-nav-inner { max-width:1160px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;gap:1.5rem }
.t-logo { font-family:var(--t-font-display);font-size:1.4rem;font-weight:700;color:var(--t-ink-text);letter-spacing:-.02em;flex-shrink:0 }
.t-logo span { color:var(--t-gold) }
.t-nav-links { display:flex;gap:.1rem;list-style:none;padding:0;margin:0 auto }
.t-nav-links a { padding:.45rem .85rem;border-radius:6px;color:var(--t-ink-muted);font-size:.88rem;font-weight:500;transition:all .15s }
.t-nav-links a:hover,.t-nav-links a.active { color:var(--t-ink-text);background:rgba(15,23,42,.05) }
.t-nav-cta { background:var(--t-gold);color:#fff!important;padding:.45rem 1.1rem;border-radius:8px;font-weight:700;font-size:.85rem;flex-shrink:0 }
.t-nav-cta:hover { background:var(--t-gold-dark) }
.t-nav-mobile-btn { display:none;background:none;border:1px solid var(--t-ink-border);border-radius:8px;padding:.4rem .6rem;color:var(--t-ink-text);cursor:pointer;margin-left:auto }
.t-mobile-menu { display:none;background:var(--t-ink-2);border-top:1px solid var(--t-ink-border);padding:1rem 1.5rem }
.t-mobile-menu.open { display:block }
.t-mobile-menu a { display:block;padding:.65rem 0;color:var(--t-ink-muted);border-bottom:1px solid var(--t-ink-border);font-size:.9rem }

/* ── Hero (kept dark — text sits over a food photo, needs the scrim
   regardless of the site's light theme) ─────────────────── */
.t-hero { position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;background:#0D0D0D }
.t-hero::before { content:'';position:absolute;top:-20%;right:-10%;width:60%;height:80%;
    background:radial-gradient(circle, rgba(22,163,74,.30) 0%, transparent 70%);pointer-events:none }
.t-hero-bg { position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.4) }
.t-hero-gradient { position:absolute;inset:0;background:linear-gradient(to right,rgba(12,15,29,.9) 40%,transparent 85%) }
.t-hero-content { position:relative;max-width:1160px;margin:0 auto;padding:5rem 1.5rem;width:100% }
.t-hero-tag { display:inline-block;background:rgba(22,163,74,.16);color:var(--t-gold);border:1px solid rgba(22,163,74,.4);border-radius:20px;padding:.3rem 1rem;font-size:.8rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:1.25rem }
.t-hero-title { font-family:var(--t-font-display);font-size:clamp(2.2rem,5vw,4rem);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:#fff;margin:0 0 1rem;max-width:600px }
.t-hero-sub { font-size:1.1rem;color:#C7CCD6;margin:0 0 2.25rem;max-width:480px }
.t-hero-actions { display:flex;gap:.75rem;flex-wrap:wrap }
.t-btn { display:inline-flex;align-items:center;gap:.4rem;padding:.75rem 1.75rem;border-radius:10px;font-weight:600;font-size:.92rem;cursor:pointer;border:none;transition:all .2s }
.t-btn-primary { background:var(--t-gold);color:#fff }
.t-btn-primary:hover { background:var(--t-gold-dark);color:#fff }
.t-btn-outline { background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25) }
.t-btn-outline:hover { background:rgba(255,255,255,.1);color:#fff }
.t-hero-stats { display:flex;gap:2.5rem;margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.12) }
.t-hero-stat-num { font-family:var(--t-font-display);font-size:1.8rem;font-weight:700;color:#fff;line-height:1 }
.t-hero-stat-lbl { font-size:.78rem;color:#9CA3AF;margin-top:.2rem }

/* ── Sections ────────────────────────────────────────────── */
.t-section { padding:5rem 0 }
.t-section-sm { padding:3rem 0 }
.t-container { max-width:1160px;margin:0 auto;padding:0 1.5rem }
.t-section-header { text-align:center;margin-bottom:3rem }
.t-section-tag { display:inline-block;background:rgba(22,163,74,.12);color:var(--t-gold-dark);border-radius:20px;padding:.15rem .6rem;font-size:.66rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.3rem }
.t-section-title { font-family:var(--t-font-display);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700;letter-spacing:-.02em;color:var(--t-text);margin:0 0 .75rem }
.t-section-sub { color:var(--t-muted);font-size:1rem;max-width:520px;margin:0 auto }

/* ── Cards ───────────────────────────────────────────────── */
.t-card { background:var(--t-card);border:1px solid var(--t-border);border-radius:var(--t-radius);overflow:hidden;transition:transform .2s,box-shadow .2s;box-shadow:var(--t-shadow) }
.t-card:hover { transform:translateY(-3px);box-shadow:0 16px 36px rgba(15,23,42,.12) }
.t-card-body { padding:1.25rem }
.t-card-img { width:100%;aspect-ratio:4/3;object-fit:cover }

/* ── Menu ────────────────────────────────────────────────── */
.t-menu-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem }
.t-menu-item { display:flex;flex-direction:column;background:var(--t-card);border:1px solid var(--t-border);border-radius:18px;overflow:hidden;box-shadow:var(--t-shadow) }
.t-menu-item-img { width:100%;height:104px;object-fit:cover;flex-shrink:0;background:var(--t-bg) }
.t-menu-item-info { flex:1;min-width:0;padding:.7rem .8rem .85rem }
.t-menu-item-name { font-family:var(--t-font-display);font-weight:600;color:var(--t-text);margin-bottom:.25rem }
.t-menu-item-desc { font-size:.8rem;color:var(--t-muted);margin-bottom:.5rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical }
.t-menu-item-price { font-weight:800;color:var(--t-gold-dark);font-size:1rem }
.t-menu-item-sale { text-decoration:line-through;color:var(--t-muted);font-size:.8rem;margin-left:.4rem }
.t-dietary-badge { display:inline-block;font-size:.62rem;padding:.1rem .4rem;border-radius:4px;background:rgba(22,163,74,.1);color:var(--t-green-dark);border:1px solid rgba(22,163,74,.22) }

/* ── Gallery ─────────────────────────────────────────────── */
.t-gallery-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.75rem }
.t-gallery-item { aspect-ratio:4/3;border-radius:var(--t-radius);overflow:hidden;cursor:pointer;position:relative }
.t-gallery-item img,.t-gallery-item video { width:100%;height:100%;object-fit:cover;transition:transform .35s }
.t-gallery-item:hover img,.t-gallery-item:hover video { transform:scale(1.06) }
.t-gallery-item-overlay { position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(0,0,0,.6));opacity:0;transition:opacity .2s;display:flex;align-items:flex-end;padding:.75rem }
.t-gallery-item:hover .t-gallery-item-overlay { opacity:1 }
.t-gallery-item-caption { color:#fff;font-size:.82rem;font-weight:500 }

/* ── Blog ────────────────────────────────────────────────── */
.t-blog-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem }
.t-blog-cover { aspect-ratio:16/9;object-fit:cover;width:100% }
.t-blog-meta { font-size:.78rem;color:var(--t-muted);margin-bottom:.5rem }
.t-blog-title { font-family:var(--t-font-display);font-size:1.05rem;font-weight:600;color:var(--t-text);line-height:1.35;margin-bottom:.5rem }
.t-blog-excerpt { font-size:.85rem;color:var(--t-muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical }

/* ── Forms ───────────────────────────────────────────────── */
.t-form { background:var(--t-card);border:1px solid var(--t-border);border-radius:var(--t-radius);padding:2rem;box-shadow:var(--t-shadow) }
.t-form-title { font-family:var(--t-font-display);font-size:1.3rem;font-weight:600;color:var(--t-text);margin:0 0 1.5rem }
.t-label { display:block;font-size:.82rem;font-weight:600;color:var(--t-muted);margin-bottom:.4rem;letter-spacing:.02em }
.t-input { width:100%;background:var(--t-surface);border:1px solid var(--t-border);border-radius:8px;padding:.65rem .9rem;color:var(--t-text);font-size:.9rem;transition:border-color .15s;outline:none }
.t-input:focus { border-color:var(--t-gold);box-shadow:0 0 0 3px rgba(22,163,74,.15) }
.t-input::placeholder { color:var(--t-muted) }
.t-mb { margin-bottom:1rem }
.t-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem }
.t-row-3 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem }
.t-submit { background:var(--t-gold);color:#fff;border:none;border-radius:10px;padding:.8rem 2rem;font-weight:700;font-size:.95rem;cursor:pointer;transition:background .2s;width:100% }
.t-submit:hover { background:var(--t-gold-dark) }

/* ── Stars ───────────────────────────────────────────────── */
.t-stars { color:var(--t-accent2);font-size:1rem }
.t-stars-input { display:flex;gap:.35rem;margin-bottom:1rem }
.t-stars-input input { display:none }
.t-stars-input label { font-size:1.5rem;color:var(--t-border);cursor:pointer;transition:color .1s }
.t-stars-input input:checked ~ label,
.t-stars-input label:hover,
.t-stars-input label:hover ~ label { color:var(--t-accent2) }

/* ── Info panels ─────────────────────────────────────────── */
.t-info-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem }
.t-info-item { background:var(--t-card);border:1px solid var(--t-border);border-radius:var(--t-radius);padding:1.25rem;display:flex;gap:.85rem;align-items:flex-start;box-shadow:var(--t-shadow) }
.t-info-icon { width:40px;height:40px;border-radius:8px;background:rgba(37,99,235,.12);color:var(--t-blue);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0 }
.t-info-label { font-size:.75rem;color:var(--t-muted);margin-bottom:.15rem }
.t-info-value { font-size:.9rem;font-weight:600;color:var(--t-text) }

/* ── Flash / alerts ──────────────────────────────────────── */
.t-alert { padding:1rem 1.25rem;border-radius:10px;margin-bottom:1.5rem;display:flex;gap:.75rem;align-items:flex-start }
.t-alert-success { background:rgba(21,128,61,.08);border:1px solid rgba(21,128,61,.25);color:#15803d }
.t-alert-error   { background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.25);color:#dc2626 }

/* ── Page header ─────────────────────────────────────────── */
.t-page-header { background:var(--t-surface);border-bottom:1px solid var(--t-border);padding:.75rem 0 .7rem }
.t-page-header-title { font-family:var(--t-font-display);font-size:1.2rem;font-weight:700;color:var(--t-text);letter-spacing:-.01em;line-height:1.25 }
.t-breadcrumb { font-size:.82rem;color:var(--t-muted);margin-top:.4rem }
.t-breadcrumb a { color:var(--t-muted) }
.t-breadcrumb a:hover { color:var(--t-text) }

/* ── Hall cards ──────────────────────────────────────────── */
.t-hall-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem }
.t-hall-badge { display:inline-block;background:rgba(37,99,235,.12);color:var(--t-blue);border-radius:20px;padding:.2rem .7rem;font-size:.72rem;font-weight:600 }

/* ── Footer ──────────────────────────────────────────────── */
.t-footer { background:var(--t-ink);border-top:1px solid var(--t-ink-border);padding:3rem 0 1.5rem;margin-top:5rem;color:var(--t-ink-muted) }

/* ── App shell (customer-facing ordering UI) ─────────────────────────── */
.t-appbar {
    position:sticky; top:0; z-index:90; overflow:hidden;
    background:linear-gradient(180deg, #FFF3E9 0%, var(--t-surface) 62%);
    padding:calc(.9rem + env(safe-area-inset-top)) 1.1rem .9rem;
    border-bottom:1px solid var(--t-border);
    /* Scoped to this header only — the rest of the app (buttons, admin
       panel, hero gradients) stays on the real green/blue brand colors;
       only these two custom properties change if the accent ever needs
       adjusting, nothing hardcoded repeatedly below. */
    --t-appbar-accent:      #F97316;
    --t-appbar-accent-dark: #EA580C;
}
/* Soft decorative blobs behind the brand row — evokes a designed "hero"
   header without depending on any food-photo asset we don't have; degrades
   to a plain tinted background with no layout impact if a browser doesn't
   render them for any reason, since they're purely decorative and z-index 0. */
.t-appbar-blob { position:absolute; border-radius:50%; z-index:0; opacity:.35; pointer-events:none }
.t-appbar-blob-1 { width:150px; height:150px; top:-60px; right:-40px; background:radial-gradient(circle, var(--t-appbar-accent) 0%, transparent 70%) }
.t-appbar-blob-2 { width:110px; height:110px; top:20px; right:60px; background:radial-gradient(circle, var(--t-appbar-accent-dark) 0%, transparent 70%) }

.t-appbar-brand-row { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem }
.t-appbar-brand { display:flex; align-items:center; gap:.6rem }
.t-appbar-brand-icon { width:40px; height:40px; border-radius:12px; box-shadow:0 4px 10px rgba(15,23,42,.14) }
.t-appbar-logo { font-family:var(--t-font-display); font-weight:800; font-size:1.05rem; color:var(--t-text); letter-spacing:-.01em; line-height:1.1 }
.t-appbar-logo span { color:var(--t-appbar-accent) }
.t-appbar-tagline { font-size:.68rem; color:var(--t-muted); font-weight:600; margin-top:.1rem }

.t-appbar-actions { display:flex; align-items:center; gap:.5rem }
.t-appbar-icon-btn {
    position:relative; width:38px; height:38px; border-radius:50%; background:var(--t-surface);
    border:1px solid var(--t-border); display:flex; align-items:center; justify-content:center;
    color:var(--t-text); font-size:1.05rem; text-decoration:none; box-shadow:0 2px 6px rgba(15,23,42,.08);
}
.t-appbar-avatar { background:var(--t-appbar-accent); border-color:var(--t-appbar-accent); color:#fff }
.t-appbar-icon-dot { position:absolute; top:6px; right:7px; width:8px; height:8px; border-radius:50%; background:var(--t-danger); border:1.5px solid var(--t-surface) }

.t-appbar-datetime-row {
    position:relative; z-index:1; display:flex; align-items:center; gap:.4rem;
    font-size:.76rem; font-weight:600; color:var(--t-muted); margin-bottom:.85rem;
}
.t-appbar-datetime-row i { color:var(--t-appbar-accent) }

.t-appbar-location { position:relative; z-index:1; display:flex;align-items:center;gap:.6rem;color:var(--t-text);font-weight:700;font-size:.88rem;margin-bottom:.7rem;background:var(--t-surface);border:1px solid var(--t-border);border-radius:100px;padding:.7rem .9rem }
.t-appbar-location-icon { width:28px; height:28px; border-radius:50%; background:rgba(22,163,74,.14); display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.t-appbar-location-icon i { color:var(--t-green); font-size:.85rem }
.t-appbar-location .chev { margin-left:auto;color:var(--t-muted);font-size:.8rem }
.t-search { position:relative; z-index:1; display:flex;align-items:center;gap:.6rem;background:var(--t-surface);border:1px solid var(--t-border);border-radius:999px;padding:.7rem 1.05rem }
.t-search i { color:var(--t-appbar-accent) }
.t-search input { flex:1;background:none;border:none;outline:none;color:var(--t-text);font-size:.88rem;font-family:var(--t-font) }
.t-search input::placeholder { color:var(--t-muted) }

/* ── Live search dropdown — shared by the mobile .t-search and desktop
   .t-dtopbar-search bars, which are otherwise differently shaped, so
   this only needs position/overflow, not their pill-vs-bar chrome. ──── */
.t-search-live-results {
    display:none; position:absolute; top:calc(100% + .5rem); left:0; right:0;
    background:var(--t-card); border:1px solid var(--t-border); border-radius:14px;
    box-shadow:0 16px 40px rgba(15,23,42,.14); max-height:70vh; overflow-y:auto;
    z-index:120; text-align:left;
}
.t-search-live-results.show { display:block }
.t-search-live-group-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--t-muted); padding:.7rem 1rem .3rem }
.t-search-live-item { display:flex; align-items:center; gap:.7rem; padding:.55rem 1rem; text-decoration:none; color:inherit; cursor:pointer }
.t-search-live-item:hover { background:var(--t-bg) }
.t-search-live-thumb { width:36px; height:36px; border-radius:8px; object-fit:cover; flex-shrink:0; background:var(--t-bg) }
.t-search-live-thumb-ph { width:36px; height:36px; border-radius:8px; flex-shrink:0; background:linear-gradient(135deg,rgba(22,163,74,.16),rgba(37,99,235,.12)); display:flex; align-items:center; justify-content:center; font-size:1rem }
.t-search-live-name { font-size:.85rem; font-weight:600; color:var(--t-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.t-search-live-sub { font-size:.74rem; color:var(--t-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.t-search-live-empty { padding:1rem; font-size:.82rem; color:var(--t-muted); text-align:center }
.t-search-live-footer { display:block; padding:.65rem 1rem; text-align:center; font-size:.8rem; font-weight:600; color:var(--t-green-dark); text-decoration:none; border-top:1px solid var(--t-border) }

/* ── Home hero carousel — swipeable, snap-scrolling, with a peek of the
   next slide (matches native app carousel feel rather than a plain
   full-width static banner). ─────────────────────────────────────── */
.t-hero-carousel {
    display:flex; gap:.7rem; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding:1rem 1.1rem 0; margin-bottom:.6rem;
    /* Fades the trailing edge of whatever slide is peeking in from the
       right, so that peek reads as a deliberate "there's more" hint
       rather than a card that's just been abruptly cut off mid-shape. */
    -webkit-mask-image: linear-gradient(to right, #000 91%, transparent 100%);
    mask-image: linear-gradient(to right, #000 91%, transparent 100%);
}
.t-hero-carousel::-webkit-scrollbar { display:none }
.t-hero-slide {
    flex:0 0 88%; scroll-snap-align:start; border-radius:20px; padding:1.4rem 1.3rem;
    position:relative; overflow:hidden; text-decoration:none; display:block;
    aspect-ratio:2.6/1; box-shadow:0 10px 26px rgba(15,23,42,.16);
}
.t-hero-dots { display:flex; justify-content:center; gap:.4rem; padding-bottom:.9rem }
.t-hero-dot { width:6px; height:6px; border-radius:50%; background:var(--t-border); transition:all .2s }
.t-hero-dot.active { width:16px; border-radius:100px; background:var(--t-gold) }

/* ── Hero slide content — flex column so the CTA always anchors to the
   bottom regardless of how long the title/subtitle run, instead of the
   old fixed-margin approach that only lined up by coincidence at one
   particular text length. The icon badge is a proper glass-morphism
   squircle (blurred fill, soft border ring, its own shadow) pinned to
   the top-right, clear of the text column at every width — not a flat
   circle sharing vertical space with the button the way it used to. */
.t-hero-slide-content { position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start }
.t-hero-slide-text { max-width:68%; padding-right:.5rem }
.t-hero-slide-title { color:#fff; font-family:var(--t-font-display); font-weight:800; font-size:1.05rem; line-height:1.3 }
.t-hero-slide-sub { color:rgba(255,255,255,.85); font-size:.76rem; margin-top:.35rem; line-height:1.4 }
.t-hero-slide-cta {
    display:inline-flex; align-items:center; gap:.35rem; background:#fff; font-size:.8rem; font-weight:700;
    padding:.55rem 1.15rem; border-radius:100px; box-shadow:0 6px 14px rgba(0,0,0,.16);
}
.t-hero-slide-icon {
    position:absolute; top:0; right:0; width:3.4rem; height:3.4rem; border-radius:16px;
    background:rgba(255,255,255,.16); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.28); box-shadow:0 8px 18px rgba(0,0,0,.18);
    display:flex; align-items:center; justify-content:center; font-size:1.65rem;
}

/* ── "Recommended for you" — reuses the standard .t-menu-item card
   (same one the grid uses) inside a horizontal-scroll row instead of a
   grid, so it needs an explicit width the grid normally provides via
   its column tracks. ─────────────────────────────────────────────── */
.t-rec-items-row::-webkit-scrollbar { display:none }
.t-rec-items-row .t-menu-item { width:150px; flex-shrink:0 }
.t-rest-card, .t-menu-item, .t-hero-slide, .t-chip, .t-dcard {
    -webkit-tap-highlight-color:transparent; transition:transform .12s ease, box-shadow .12s ease;
}
.t-rest-card:active, .t-menu-item:active, .t-hero-slide:active, .t-dcard:active { transform:scale(.97) }

/* ── AJAX navigation loading overlay ─────────────────────────────────── */
.mh-spa-loader {
    display:none; position:fixed; inset:0; z-index:9000;
    background:rgba(247,249,251,.88); align-items:center; justify-content:center;
}
.mh-spa-loader.show { display:flex }
.mh-spa-spinner {
    width:36px; height:36px; border-radius:50%;
    background:conic-gradient(from 0deg,#16A34A,#2563EB,transparent);
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
    animation:mhSpaSpin .7s linear infinite;
}
@keyframes mhSpaSpin { to { transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .mh-spa-spinner { animation-duration:.01ms } }

.t-chip-row { display:flex;gap:.55rem;overflow-x:auto;padding:1rem 1.1rem;scrollbar-width:none }
.t-chip-row::-webkit-scrollbar { display:none }
.t-chip { flex-shrink:0;display:inline-flex;align-items:center;gap:.35rem;background:var(--t-surface);border:1px solid var(--t-border);color:var(--t-muted);
    border-radius:999px;padding:.45rem 1rem;font-size:.8rem;font-weight:600;white-space:nowrap;transition:all .15s }
.t-chip.active,.t-chip:hover { background:rgba(22,163,74,.12);border-color:var(--t-gold);color:var(--t-gold-dark) }

.t-rest-list { display:flex;flex-direction:column;gap:1rem;padding:1.1rem 1.1rem 6.5rem;background:var(--t-bg) }
.t-rest-card { display:flex;gap:1rem;background:var(--t-card);border:1px solid var(--t-border);border-radius:var(--t-radius);overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--t-shadow) }
.t-rest-card:hover { border-color:var(--t-gold) }
.t-rest-card-img { width:104px;height:104px;object-fit:cover;flex-shrink:0;background:var(--t-bg) }
.t-rest-card-img-ph { width:104px;height:104px;flex-shrink:0;background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(22,163,74,.14));display:flex;align-items:center;justify-content:center;font-size:1.8rem }
.t-rest-card-body { padding:.8rem .9rem .8rem 0;min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center }
.t-rest-card-name { font-family:var(--t-font-display);font-weight:600;color:var(--t-text);font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.t-rest-card-tag { font-size:.78rem;color:var(--t-muted);margin-top:.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.t-rest-card-meta { display:flex;align-items:center;gap:.7rem;margin-top:.5rem;font-size:.76rem;color:var(--t-muted) }
.t-rest-card-meta .rating { color:var(--t-gold-dark);font-weight:700;display:flex;align-items:center;gap:.2rem }

.t-tabbar { position:fixed;left:0;right:0;bottom:0;z-index:95;display:flex;background:var(--t-ink);border-top:1px solid var(--t-ink-border);
    padding:.5rem 0 max(.5rem, env(safe-area-inset-bottom)) }
.t-tabbar-item { flex:1;display:flex;flex-direction:column;align-items:center;gap:.2rem;color:var(--t-ink-muted);text-decoration:none;font-size:.66rem;font-weight:600;position:relative }
.t-tabbar-item i { font-size:1.25rem }
.t-tabbar-item.active { color:var(--t-gold) }
.t-tabbar-badge { position:absolute;top:-2px;right:calc(50% - 18px);background:var(--t-danger);color:#fff;font-size:.6rem;font-weight:700;border-radius:999px;min-width:15px;height:15px;display:flex;align-items:center;justify-content:center;padding:0 3px }
body.t-has-tabbar { padding-bottom:4.75rem }

/* ── Desktop layout (sidebar shell) ──────────────────────────────────── */
.t-desktop-only { display:none }

@media (min-width:900px) {
    .t-appbar, .t-chip-row, .t-tabbar { display:none !important }
    body.t-has-tabbar { padding-bottom:0 }
    .t-mobile-only { display:none !important }
    .t-desktop-only { display:block }
    .t-chip-row.t-desktop-only { display:flex }
}

.t-dtopbar { display:flex;align-items:center;gap:1.25rem;padding:1rem 2rem;border-bottom:1px solid var(--t-ink-border);background:var(--t-ink) }
.t-dtopbar-logo { font-family:var(--t-font-display);font-weight:700;font-size:1.15rem;color:var(--t-ink-text);flex-shrink:0 }
.t-dtopbar-logo span { color:var(--t-gold) }
.t-dtopbar-addr { display:flex;align-items:center;gap:.5rem;background:rgba(22,163,74,.14);border:1px solid rgba(22,163,74,.35);color:var(--t-gold-dark);
    border-radius:999px;padding:.55rem 1.1rem;font-size:.85rem;font-weight:700;cursor:pointer;flex-shrink:0 }
.t-dtopbar-search { flex:1;display:flex;align-items:center;gap:.6rem;background:var(--t-ink-2);border:1px solid var(--t-ink-border);border-radius:999px;padding:.6rem 1.1rem;max-width:420px }
.t-dtopbar-search input { flex:1;background:none;border:none;outline:none;color:var(--t-ink-text);font-size:.86rem;font-family:var(--t-font) }
.t-dtopbar-search i { color:var(--t-ink-muted)!important }
.t-dtopbar-link { color:var(--t-ink-muted);font-size:.85rem;font-weight:600;white-space:nowrap }
.t-dtopbar-link:hover { color:var(--t-ink-text) }

.t-dshell { display:flex;max-width:1400px;margin:0 auto;background:var(--t-bg) }
.t-dsidebar { width:220px;flex-shrink:0;padding:1.75rem 1rem;background:var(--t-ink);border-right:1px solid var(--t-ink-border);position:sticky;top:0;align-self:flex-start;height:100vh }
.t-dsidebar-item { display:flex;align-items:center;gap:.85rem;padding:.7rem .85rem;border-radius:10px;color:var(--t-ink-muted);font-weight:600;font-size:.9rem;margin-bottom:.2rem }
.t-dsidebar-item i { font-size:1.15rem;width:20px;text-align:center }
.t-dsidebar-item.active,.t-dsidebar-item:hover { background:rgba(22,163,74,.12);color:var(--t-gold-dark) }
.t-dmain { flex:1;min-width:0;padding:2rem 2.5rem 4rem;background:var(--t-bg) }

.t-dhero { position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;background:var(--t-ink);
    border-radius:20px;padding:3rem;margin-bottom:3rem;overflow:hidden;box-shadow:0 20px 48px rgba(15,23,42,.10);border:1px solid var(--t-ink-border) }
.t-dhero::before { content:'';position:absolute;top:-30%;right:-15%;width:55%;height:100%;
    background:radial-gradient(circle, rgba(22,163,74,.24) 0%, transparent 70%);pointer-events:none }
.t-dhero-visual { position:relative;aspect-ratio:4/3;border-radius:16px;background:linear-gradient(135deg,var(--t-gold) 0%,var(--t-blue) 130%);
    display:flex;align-items:center;justify-content:center;font-size:5rem;box-shadow:0 12px 32px rgba(22,163,74,.22) }
.t-dhero-title { position:relative;font-family:var(--t-font-display);font-size:2.2rem;font-weight:700;line-height:1.15;color:var(--t-ink-text);margin:0 0 1rem;letter-spacing:-.02em }
.t-dhero-sub { position:relative;color:var(--t-ink-muted);font-size:1rem;margin-bottom:1.75rem;max-width:420px }
.t-dhero-actions { position:relative;display:flex;gap:.85rem }

.t-dcarousel-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem }
.t-dcarousel-head h2 { font-family:var(--t-font-display);font-size:1.3rem;font-weight:700;color:var(--t-text);margin:0 }
.t-dcarousel { display:grid;grid-auto-flow:column;grid-auto-columns:260px;gap:1.25rem;overflow-x:auto;padding-bottom:.5rem;scroll-behavior:smooth }
.t-dcard { background:var(--t-card);border:1px solid var(--t-border);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;display:block;box-shadow:var(--t-shadow) }
.t-dcard:hover { border-color:var(--t-gold) }
.t-dcard-img { width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--t-bg) }
.t-dcard-img-ph { width:100%;aspect-ratio:16/10;background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(22,163,74,.14));display:flex;align-items:center;justify-content:center;font-size:2.2rem }
.t-dcard-body { padding:.9rem 1rem }
.t-dcard-name { font-family:var(--t-font-display);font-weight:600;color:var(--t-text);font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.t-dcard-meta { font-size:.78rem;color:var(--t-muted);margin-top:.3rem;display:flex;gap:.6rem;align-items:center }
.t-dcard-meta .rating { color:var(--t-gold-dark);font-weight:700 }

/* ── Ad slot ──────────────────────────────────────────────────────────── */
.t-ad-slot { position:relative;border-radius:var(--t-radius);overflow:hidden;background:var(--t-card);border:1px solid var(--t-border) }
.t-ad-slot img { width:100%;display:block }
.t-ad-slot-label { position:absolute;top:.6rem;left:.6rem;background:rgba(12,15,29,.65);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:5px;padding:.15rem .5rem }

.t-footer-grid { display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem;margin-bottom:2rem }
.t-footer-brand { font-family:var(--t-font-display);font-size:1.3rem;font-weight:700;color:var(--t-ink-text);margin-bottom:.75rem }
.t-footer-brand span { color:var(--t-gold) }
.t-footer-desc { color:var(--t-ink-muted);font-size:.85rem;line-height:1.7 }
.t-footer-heading { font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t-ink-text);margin-bottom:.85rem }
.t-footer-links { list-style:none;padding:0;margin:0 }
.t-footer-links li { margin-bottom:.45rem }
.t-footer-links a { color:var(--t-ink-muted);font-size:.85rem;transition:color .15s }
.t-footer-links a:hover { color:var(--t-ink-text) }

/* ── Page loader ─────────────────────────────────────────────────────── */
#mh-page-loader {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: linear-gradient(90deg, var(--t-green), var(--t-blue));
    z-index: 99999; opacity: 0; pointer-events: none;
    box-shadow: 0 0 8px rgba(22,163,74,.5);
}
.t-footer-socials { display:flex;gap:.5rem;margin-top:.85rem }
.t-footer-socials a { width:34px;height:34px;border-radius:8px;background:var(--t-ink-2);border:1px solid var(--t-ink-border);color:var(--t-ink-muted);display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:all .15s }
.t-footer-socials a:hover { background:var(--t-gold);border-color:var(--t-gold);color:#fff }
.t-footer-bottom { border-top:1px solid var(--t-ink-border);padding-top:1.25rem;font-size:.78rem;color:var(--t-ink-muted);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem }
.t-powered { color:var(--t-ink-muted);font-size:.72rem }
.t-powered a { color:var(--t-ink-muted) }

/* ── Lightbox (kept dark — a fullscreen photo viewer needs a dark
   surround regardless of site theme) ────────────────────── */
.t-lightbox { position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.95);display:none;align-items:center;justify-content:center }
.t-lightbox.open { display:flex }
.t-lightbox img,.t-lightbox video { max-width:90vw;max-height:88vh;object-fit:contain;border-radius:8px }
.t-lightbox-close { position:absolute;top:1.25rem;right:1.25rem;background:rgba(255,255,255,.15);border:none;color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .t-nav-links { display:none }
    .t-nav-cta { display:none }
    .t-nav-mobile-btn { display:block }
    .t-hero-stats { gap:1.25rem;flex-wrap:wrap }
    .t-footer-grid { grid-template-columns:1fr }
    .t-row,.t-row-3 { grid-template-columns:1fr }
    .t-hero { min-height:70vh }
    .t-section { padding:3rem 0 }
}

/* ── Made-to-order date picker (flatpickr) ─────────────────────────────
   Themes the calendar popup used on the item modal's "When would you
   like this?" field to match the rest of the site, rather than leaving
   flatpickr's plain default look. Blocked dates (restaurant_blocked_dates,
   passed in as flatpickr's `disable` list) render struck-through and
   faded — visually distinct from a date that's simply in a different
   month, so it reads as "unavailable", not just "greyed because it's
   not this month". */
.t-date-picker-input {
    width:100%;background:var(--t-bg);border:1px solid var(--t-border);border-radius:8px;
    padding:.6rem 2.4rem .6rem .8rem;color:var(--t-text);font-size:.85rem;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748B' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right .8rem center;background-size:16px;
}
.t-date-picker-input:focus { outline:none;border-color:var(--t-gold);box-shadow:0 0 0 3px rgba(249,115,22,.15) }

.flatpickr-calendar {
    background:var(--t-surface);border:1px solid var(--t-border);border-radius:14px;
    box-shadow:0 16px 40px rgba(15,23,42,.16);font-family:inherit;
}
.flatpickr-calendar.arrowTop:before { border-bottom-color:var(--t-border) }
.flatpickr-calendar.arrowTop:after  { border-bottom-color:var(--t-surface) }
.flatpickr-months { padding:.75rem .6rem 0 }
.flatpickr-month { color:var(--t-text) }
.flatpickr-current-month { font-size:.92rem;font-weight:700;color:var(--t-text);padding:0 }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year { color:var(--t-text);font-weight:700 }
.flatpickr-current-month .flatpickr-monthDropdown-months:hover { background:transparent }
.flatpickr-prev-month, .flatpickr-next-month { padding:.5rem !important }
.flatpickr-prev-month svg, .flatpickr-next-month svg { fill:var(--t-muted) }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg { fill:var(--t-gold) }
.flatpickr-weekdays { margin-top:.5rem }
.flatpickr-weekday { color:var(--t-muted);font-weight:700;font-size:.68rem;text-transform:uppercase }
.flatpickr-days { border:none }
.flatpickr-day { color:var(--t-text);border-radius:8px;font-size:.82rem }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color:var(--t-muted);opacity:.35 }
.flatpickr-day.today { border-color:var(--t-gold) }
.flatpickr-day.today:hover { border-color:var(--t-gold) }
.flatpickr-day:hover { background:rgba(249,115,22,.12);border-color:transparent }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus {
    background:var(--t-gold);border-color:var(--t-gold);color:#fff;font-weight:700;
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
    color:var(--t-muted);opacity:.4;text-decoration:line-through;background:transparent;
    cursor:not-allowed;border-color:transparent;
}
.numInputWrapper span.arrowUp:after   { border-bottom-color:var(--t-muted) }
.numInputWrapper span.arrowDown:after { border-top-color:var(--t-muted) }