/* ============================================================
   ARATI RESTAURANT — additional site components
   (loaded after style.css; uses the same CSS variables)
   ============================================================ */

/* ---------- Page header banner (inner pages) ---------- */
.page-banner{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--maroon) 0%,#320B14 100%);
  color:#fff;padding:104px clamp(16px,2.6vw,44px) 40px;
  display:flex;justify-content:center;
}
.page-banner::before{
  content:'';position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;
  background:radial-gradient(circle at 15% 20%,rgba(227,113,31,.25),transparent 45%),
             radial-gradient(circle at 85% 80%,rgba(201,152,47,.18),transparent 45%);
}

/* The slideshow + overlay now live INSIDE this framed card (see
   .page-banner-frame), so the sliding image is boxed to the same
   max-width as the rest of the page content — with rounded corners —
   instead of running full-bleed edge-to-edge. This applies to every
   inner page; the home page hero is a separate full-bleed component and
   is untouched.
   The frame carries its own min-height + padding directly (rather than
   stretching to fill a flex parent), so it has a definite size in every
   browser and the absolutely-positioned slideshow reliably fills it. */
.page-banner-frame{
  position:relative;z-index:1;width:100%;max-width:1560px;
  min-height:clamp(320px,40vh,460px);
  padding:70px 40px;border-radius:22px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}

/* Slideshow background: a set of dish photos crossfade on a continuous
   loop. Plain <img> tags (no video/JS), identical on every device, can't
   fail to autoplay. Each slide = a blurred "cover" copy filling the full
   banner (no empty bars) + a sharp "contain" copy on top so the whole
   dish photo is always fully visible, never cropped, at any size. */
.page-banner-slideshow{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:0;border-radius:inherit;}
.page-banner-slide{
  position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;pointer-events:none;will-change:opacity;
  animation-name:pageBannerSlideFade;
  animation-duration:calc(var(--slide-count,4) * var(--slide-seconds,5s));
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
.page-banner-slide-bg{
  position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transform:scale(1.15);
  filter:blur(24px) brightness(.55) saturate(1.1);
}
.page-banner-slide-fg{
  position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;
  object-fit:contain;object-position:right center;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.5));
}
/* Percentages assume the default 4-slide set (each slide owns a 25% slot:
   fade in, hold, fade out, then stay hidden for the rest of the loop
   until its animation-delay comes around again). */
@keyframes pageBannerSlideFade{
  0%    { opacity:0; }
  4%    { opacity:1; }
  21%   { opacity:1; }
  25%   { opacity:0; }
  100%  { opacity:0; }
}
@media(prefers-reduced-motion: reduce){
  .page-banner-slide{animation:none;opacity:0;}
  .page-banner-slide:first-child{opacity:1;}
}
.page-banner-overlay{
  position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(90deg,rgba(15,4,7,.88) 0%,rgba(15,4,7,.72) 32%,rgba(15,4,7,.30) 58%,rgba(15,4,7,.12) 100%);
}
.page-banner .eyebrow{position:relative;z-index:1;color:var(--gold-light);justify-content:flex-start;}
.page-banner .eyebrow::before{display:none;}
.page-banner h1{position:relative;z-index:1;color:#fff;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.2;margin:16px 0 14px;max-width:620px;overflow-wrap:anywhere;}
.page-banner p{position:relative;z-index:1;color:#E9D2C2;max-width:520px;font-size:1.02rem;line-height:1.65;overflow-wrap:anywhere;}
.page-banner .breadcrumb{position:relative;z-index:1;justify-content:flex-start;}

/* Tablet: content still left-aligned but narrower, slideshow stays visible behind it */
@media(max-width:980px){
  .page-banner{padding:96px 20px 32px;}
  .page-banner-frame{padding:64px 32px;text-align:center;min-height:0;}
  .page-banner .eyebrow,.page-banner .breadcrumb{justify-content:center;}
  .page-banner h1,.page-banner p{max-width:100%;margin-left:auto;margin-right:auto;}
  .page-banner-slide-fg{object-position:center center;}
  .page-banner-overlay{background:linear-gradient(180deg,rgba(15,4,7,.78) 0%,rgba(15,4,7,.55) 45%,rgba(15,4,7,.80) 100%);}
}

/* Phones: same img-based slideshow (nothing to swap out — no video/codec
   risk to begin with). The framed card is sized to its own content now
   (not a tall full-viewport banner), so it stays compact instead of
   leaving empty space above/below the text; a stronger top/bottom
   gradient keeps text legible over busy food photos. */
@media(max-width:640px){
  .page-banner{padding:72px 12px 20px;}
  .page-banner-frame{padding:36px 20px;border-radius:16px;min-height:0;height:auto;}
  .page-banner h1{font-size:clamp(1.9rem,8vw,2.8rem);line-height:1.25;}
  .page-banner p{font-size:.92rem;line-height:1.7;}
  .page-banner-slide-fg{object-position:center center;}
  .page-banner-overlay{background:linear-gradient(180deg,rgba(15,4,7,.62) 0%,rgba(15,4,7,.30) 40%,rgba(15,4,7,.78) 100%);}
}
.breadcrumb{margin-top:20px;font-size:.78rem;color:#D9BFAE;display:flex;gap:8px;justify-content:center;}
.breadcrumb a{color:#E9D2C2;}
.breadcrumb a:hover{color:var(--gold-light);}

/* ---------- Language switcher ---------- */
.lang-switch{
  display:flex;align-items:center;gap:2px;border-radius:999px;
  background:rgba(74,18,32,.06);padding:4px;
}
.lang-switch a{
  padding:6px 12px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.03em;
  color:#fff;opacity:.6;transition:.25s;
}
.lang-switch a.active{background:var(--saffron);color:#fff;opacity:1;}
@media (max-width:1560px){
  .lang-switch{display:none;}
}

/* ---------- Generic card grid ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
@media(max-width:980px){.card-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.card-grid{grid-template-columns:1fr;}}

/* ---------- Menu page layout (main content + drink sidebar) ---------- */
.menu-layout{display:grid;grid-template-columns:1fr 280px;gap:40px;align-items:start;}
.menu-main{min-width:0;}
.menu-sidebar{position:sticky;top:110px;}
.drink-sidebar{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);
  box-shadow:var(--shadow-card);padding:26px 24px 22px;
}
.drink-sidebar__title{
  font-size:1.3rem;color:var(--maroon);margin-bottom:4px;
  display:flex;align-items:center;gap:8px;
}
.drink-sidebar__title::before{content:'🍹';font-size:1.1rem;}
.drink-sidebar__sub{font-size:.76rem;color:var(--ink-soft);margin-bottom:18px;}
.drink-group{margin-bottom:16px;}
.drink-group:last-child{margin-bottom:0;}
.drink-group h4{
  font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--saffron-deep);margin-bottom:8px;padding-bottom:6px;
  border-bottom:1px solid var(--line);
}
.drink-group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.drink-group li{
  font-size:.9rem;color:var(--ink);padding-left:14px;position:relative;
}
.drink-group li::before{
  content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--gold);
}
@media(max-width:980px){
  .menu-layout{grid-template-columns:1fr;}
  .menu-sidebar{position:static;order:2;}
  .drink-sidebar{max-width:520px;margin:0 auto;}
}

/* ---------- Beer feature section ---------- */
.beer-feature{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.beer-copy{max-width:560px;}
.beer-copy .eyebrow{display:inline-flex;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--saffron-deep);margin-bottom:18px;}
.beer-copy h2{font-size:2.6rem;line-height:1.08;margin-bottom:18px;}
.beer-copy p{color:var(--ink-soft);font-size:1rem;line-height:1.8;margin-bottom:24px;}
.beer-media{border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-card);min-height:420px;background:#000;}
.beer-media video{width:100%;height:100%;object-fit:cover;display:block;}
@media(max-width:900px){.beer-feature{grid-template-columns:1fr;}.beer-media{min-height:320px;}}

/* ---------- Branch cards ---------- */
.branch-card{
  background:#fff;border-radius:var(--radius-l);overflow:hidden;
  box-shadow:var(--shadow-card);border:1px solid var(--line);
  display:flex;flex-direction:column;transition:transform .4s var(--ease);
}
.branch-card:hover{transform:translateY(-6px);}
.branch-card .media{height:200px;overflow:hidden;}
.branch-card .media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.branch-card:hover .media img{transform:scale(1.08);}
.branch-card .body{padding:26px 26px 28px;display:flex;flex-direction:column;gap:12px;flex:1;}
.branch-card h3{font-size:1.5rem;}
.branch-card .meta-row{display:flex;gap:10px;font-size:.86rem;color:var(--ink-soft);align-items:flex-start;}
.branch-card .meta-row svg{width:16px;height:16px;flex-shrink:0;margin-top:3px;color:var(--saffron-deep);}
.branch-card .branch-hours-list{display:grid;gap:9px;min-width:0;flex:1;}
.branch-card .branch-hours-day{display:grid;grid-template-columns:108px minmax(0,1fr);gap:8px;align-items:start;}
.branch-card .branch-hours-day-label{color:var(--ink);font-size:.82rem;line-height:1.45;}
.branch-card .branch-hours-details{display:grid;gap:3px;min-width:0;line-height:1.45;}
.branch-card .branch-hours-period{display:grid;grid-template-columns:48px minmax(0,1fr);gap:7px;}
.branch-card .branch-hours-period span:first-child{color:var(--ink);font-size:.8rem;font-weight:600;}
.branch-card .branch-hours-period span:last-child{overflow-wrap:anywhere;}
.branch-card .branch-hours-closed{color:var(--saffron-deep);font-weight:600;}
.branch-card .menu-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}
.menu-tag{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:6px 13px;border-radius:999px;background:var(--saffron-light);color:var(--saffron-deep);
  display:inline-block;transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
  cursor:pointer;
}
.menu-tag:hover,.menu-tag:focus-visible{background:var(--saffron);color:#fff;transform:translateY(-2px);}
.branch-card .actions{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap;padding-top:8px;}
@media(max-width:480px){.branch-card .branch-hours-day{grid-template-columns:1fr;gap:2px;}}

/* ---------- Branch select (menu flow step 1) ---------- */
.branch-pick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
@media(max-width:980px){.branch-pick-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.branch-pick-grid{grid-template-columns:1fr;}}
.branch-pick-card{
  background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-l);
  padding:26px;text-align:center;transition:.35s var(--ease);box-shadow:var(--shadow-card);
}
.branch-pick-card:hover{border-color:var(--saffron);transform:translateY(-5px);}
.branch-pick-card .media{height:150px;border-radius:var(--radius-m);overflow:hidden;margin-bottom:18px;}
.branch-pick-card .media img{width:100%;height:100%;object-fit:cover;}
.branch-pick-card h3{font-size:1.3rem;margin-bottom:8px;}
.branch-pick-card .menu-tags{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:14px 0 18px;}

/* ---------- Menu type tabs ---------- */
.menu-type-tabs{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:44px;}
.menu-type-tab{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:18px 30px;border-radius:var(--radius-m);border:1.5px solid var(--line);
  background:#fff;transition:.3s var(--ease);min-width:180px;text-align:center;
}
.menu-type-tab strong{font-family:var(--font-serif);font-size:1.3rem;color:var(--maroon);}
.menu-type-tab span{font-size:.76rem;color:var(--ink-soft);}
.menu-type-tab:hover{border-color:var(--saffron);transform:translateY(-3px);}
.menu-type-tab.active{background:linear-gradient(135deg,var(--saffron),var(--saffron-deep));border-color:transparent;}
.menu-type-tab.active strong,.menu-type-tab.active span{color:#fff;}

/* ---------- Category filter pills ---------- */
.cat-filter-bar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:44px;}
.cat-filter-bar button{
  padding:10px 20px;border-radius:999px;border:1.5px solid var(--line);
  background:#fff;font-size:.8rem;font-weight:600;color:var(--ink-soft);transition:.25s;
}
.cat-filter-bar button.active,.cat-filter-bar button:hover{
  background:var(--saffron);border-color:var(--saffron);color:#fff;
}

/* ---------- Home "Table" menu highlight — 3D flip cards ---------- */
.dish-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:32px;
}
.dish-card{
  perspective:1600px;
  height:420px;
}
.dish-card-inner{
  position:relative;width:100%;height:100%;
  transition:transform .8s var(--ease);
  transform-style:preserve-3d;
}
.dish-card:hover .dish-card-inner,
.dish-card:focus-within .dish-card-inner{transform:rotateY(180deg);}
.dish-face{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--radius-l);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  border:1px solid var(--line);
  display:flex;flex-direction:column;
  background:#fff;
}
.dish-front{
  transition:box-shadow .4s var(--ease);
}
.dish-card:hover .dish-front{box-shadow:0 22px 46px -18px rgba(74,18,32,.4);}
.dish-front > img{
  flex:0 0 230px;width:100%;height:230px;object-fit:cover;display:block;
  transition:transform .6s var(--ease);
}
.dish-card:hover .dish-front > img{transform:scale(1.06);}
.dish-tag{
  position:absolute;top:16px;left:16px;z-index:2;
  background:rgba(255,255,255,.95);color:var(--saffron-deep);
  font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;box-shadow:0 6px 16px -6px rgba(0,0,0,.25);
}
.dish-info{
  flex:1;min-height:0;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;
  padding:16px 22px 20px;background:#fff;
}
.dish-info h4{font-size:1.15rem;line-height:1.3;}
.dish-info .price{color:var(--saffron-deep);font-weight:800;font-family:var(--font-sans);font-size:1.15rem;}
.dish-back{
  transform:rotateY(180deg);
  background:linear-gradient(155deg,var(--maroon) 0%,#320B14 100%);
  color:#fff;padding:32px 28px;
  align-items:flex-start;justify-content:center;gap:14px;
}
.dish-back::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 85% 12%,rgba(227,113,31,.28),transparent 55%);
  pointer-events:none;
}
.dish-back h4{color:#fff;font-size:1.35rem;position:relative;}
.dish-back p{color:#EAD5C4;font-size:.9rem;line-height:1.7;position:relative;margin:0;}
.dish-back .spice{color:var(--gold-light);font-size:.78rem;font-weight:600;letter-spacing:.02em;position:relative;}
.dish-back .btn{position:relative;margin-top:4px;}
@media (max-width:600px){
  .dish-card{height:400px;}
  .dish-front > img{flex-basis:190px;height:190px;}
}

/* ---------- Menu item grid card ---------- */
.item-card{
  background:#fff;border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-card);
  border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .4s var(--ease);
}
.item-card:hover{transform:translateY(-6px);}
.item-card .media{position:relative;height:210px;overflow:hidden;}
.item-card .media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.item-card:hover .media img{transform:scale(1.08);}
.item-card .tag{
  position:absolute;top:14px;left:14px;background:rgba(255,255,255,.94);color:var(--saffron-deep);
  font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:6px 13px;border-radius:999px;
}
.item-card .veg-dot{
  position:absolute;top:14px;right:14px;width:24px;height:24px;border-radius:6px;background:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.15);
}
.item-card .veg-dot span{width:11px;height:11px;border-radius:50%;background:#2F7A40;}
.item-card .veg-dot.nonveg span{background:#B23A2E;}
.item-card .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1;}
.item-card h4,
.item-card h4 a{
  font-family:var(--font-serif) !important;
  font-size:1.6rem;line-height:1.15;font-weight:700 !important;letter-spacing:0;
  color:var(--maroon) !important;
}
.item-card .desc{font-size:.84rem;color:var(--ink-soft);flex:1;}
.item-card .branch-hint{
  display:inline-flex;align-self:flex-start;font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;color:var(--saffron-deep);
  background:var(--saffron-light);padding:3px 9px;border-radius:999px;cursor:help;
}
.item-card .row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;}
.item-card .price-wrap{display:inline-flex;align-items:center;}
.item-card .price{color:var(--maroon);font-weight:800;font-family:var(--font-sans);font-size:1.35rem;line-height:1;letter-spacing:.01em;}

/* ---------- Menu scan viewer ---------- */
.menu-scan-cta{
  text-align:center;margin:50px auto 10px;padding:34px;border:1.5px dashed var(--gold);
  border-radius:var(--radius-l);background:var(--saffron-light);
}
.menu-scan-cta p{color:var(--ink-soft);margin-bottom:16px;}
.menu-scan-thumbs{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:18px;}
.menu-scan-thumbs a{width:90px;height:120px;border-radius:10px;overflow:hidden;border:2px solid #fff;box-shadow:var(--shadow-card);display:block;}
.menu-scan-thumbs img{width:100%;height:100%;object-fit:cover;}

/* ---------- Item detail page ---------- */
.item-detail{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start;}
.item-detail .media{border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-card);position:sticky;top:110px;}
.item-detail .media img{width:100%;display:block;}
.item-detail .tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.item-detail .tags span{
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:6px 14px;border-radius:999px;background:var(--saffron-light);color:var(--saffron-deep);
}
.item-detail h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:14px;}
.item-detail .price-big{font-size:2rem;color:var(--saffron-deep);font-weight:700;font-family:var(--font-sans);margin-bottom:20px;}
.item-detail .desc{color:var(--ink-soft);font-size:1.02rem;line-height:1.8;margin-bottom:26px;}
.item-detail-facts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:30px;}
.fact-box{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-m);padding:16px 18px;}
.fact-box strong{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--saffron-deep);margin-bottom:6px;}
.fact-box span{color:var(--ink);}
.available-branches{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
.available-branches a{
  padding:8px 16px;border-radius:999px;border:1.5px solid var(--line);font-size:.8rem;color:var(--ink-soft);transition:.25s;
}
.available-branches a:hover{border-color:var(--saffron);color:var(--saffron-deep);}
@media(max-width:900px){.item-detail{grid-template-columns:1fr;}.item-detail .media{position:static;}}

/* ---------- Review cards ---------- */
.review-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);padding:26px;box-shadow:var(--shadow-card);}
.review-card .stars{color:var(--gold);font-size:1.05rem;letter-spacing:2px;margin-bottom:10px;}
.review-card h4{font-size:1.15rem;margin-bottom:6px;}
.review-card p{color:var(--ink-soft);font-size:.92rem;line-height:1.7;margin-bottom:14px;}
.review-card .meta{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:14px;}
.review-card .meta strong{color:var(--maroon);}

/* ---------- Star input (review form) ---------- */
.star-input{display:flex;gap:6px;}
.star-input-star{font-size:1.8rem;color:var(--line);cursor:pointer;transition:.2s;}
.star-input-star.active{color:var(--gold);}

/* ---------- Lightbox ---------- */
.lightbox-overlay{
  position:fixed;inset:0;background:rgba(20,8,6,.92);z-index:3000;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;
  opacity:0;pointer-events:none;transition:opacity .35s;padding:30px;
}
.lightbox-overlay.open{opacity:1;pointer-events:auto;}
.lightbox-frame{
  width:100%;max-width:min(1100px,95vw);max-height:82vh;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  touch-action:none;
}
.lightbox-img{
  max-width:100%;max-height:82vh;border-radius:14px;box-shadow:0 30px 60px rgba(0,0,0,.5);
  cursor:zoom-in;transition:transform .25s var(--ease);transform-origin:center center;
  image-rendering:auto;
}
.lightbox-img.zoomed{cursor:grab;}
.lightbox-caption{color:#F3E4D6;font-size:.88rem;}
.lightbox-close{
  position:absolute;top:24px;right:28px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.6rem;line-height:1;display:flex;align-items:center;justify-content:center;
}
.lightbox-close:hover{background:var(--saffron);}
.lightbox-zoom-btn{
  position:absolute;top:24px;right:82px;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;
}
.lightbox-zoom-btn svg{width:19px;height:19px;}
.lightbox-zoom-btn:hover{background:var(--saffron);}
@media(max-width:640px){
  .lightbox-close{top:14px;right:16px;width:38px;height:38px;font-size:1.3rem;}
  .lightbox-zoom-btn{top:14px;right:62px;width:38px;height:38px;}
  .lightbox-zoom-btn svg{width:16px;height:16px;}
}

/* ---------- Branch map modal ---------- */
.map-trigger{display:inline-flex;align-items:center;gap:7px;}
.map-trigger svg{flex-shrink:0;}
.map-modal-overlay{
  position:fixed;inset:0;background:rgba(20,8,6,.88);z-index:3000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
  padding:24px;
}
.map-modal-overlay.open{opacity:1;pointer-events:auto;}
.map-modal{
  width:100%;max-width:820px;background:#fff;border-radius:var(--radius-l);
  overflow:hidden;box-shadow:0 40px 80px -20px rgba(0,0,0,.55);
  transform:translateY(24px) scale(.97);transition:transform .4s var(--ease);
}
.map-modal-overlay.open .map-modal{transform:translateY(0) scale(1);}
.map-modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 24px;background:linear-gradient(120deg,var(--maroon),var(--maroon-soft));
}
.map-modal-head h4{color:#fff;font-size:1.15rem;margin:0;}
.map-modal-close{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.15);color:#fff;font-size:1.4rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .25s;
}
.map-modal-close:hover{background:var(--saffron);}
.map-modal-frame{position:relative;width:100%;aspect-ratio:4/3;background:var(--cream);}
.map-modal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
@media (max-width:600px){
  .map-modal-frame{aspect-ratio:1/1;}
}

/* ---------- Alerts / flash messages ---------- */
.alert{padding:16px 20px;border-radius:var(--radius-m);font-size:.9rem;margin-bottom:26px;display:flex;align-items:center;gap:12px;}
.alert-success{background:#E6F4E9;color:#2F7A40;}
.alert-error{background:#FBEAE8;color:#B23A2E;}
.alert svg{width:18px;height:18px;flex-shrink:0;}

/* ---------- Simple pagination-ish "load more" spacing ---------- */
.center-cta{text-align:center;margin-top:50px;}

/* ---------- Auth / login card ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--cream);padding:30px;}
.auth-card{
  width:100%;max-width:420px;background:#fff;border-radius:var(--radius-l);box-shadow:var(--shadow-soft);
  padding:clamp(30px,5vw,48px);border:1px solid var(--line);
}
.auth-card .brand{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:22px;}
.auth-card h1{text-align:center;font-size:1.8rem;margin-bottom:6px;}
.auth-card p.sub{text-align:center;color:var(--ink-soft);font-size:.88rem;margin-bottom:30px;}
.auth-field{margin-bottom:18px;}
.auth-field label{display:block;font-size:.78rem;font-weight:600;color:var(--maroon);margin-bottom:7px;text-transform:uppercase;letter-spacing:.06em;}
.auth-field input,.auth-field select,.auth-field textarea{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;font-family:var(--font-sans);font-size:.92rem;
  background:var(--cream);outline:none;transition:.2s;
}
.auth-field input:focus,.auth-field select:focus,.auth-field textarea:focus{border-color:var(--saffron);box-shadow:0 0 0 3px rgba(227,113,31,.14);}
.auth-card .btn{width:100%;margin-top:6px;}
.auth-card .back-link{display:block;text-align:center;margin-top:22px;font-size:.82rem;color:var(--ink-soft);}
.auth-card .back-link:hover{color:var(--saffron-deep);}
.auth-demo-note{margin-top:22px;padding:14px 16px;background:var(--saffron-light);border-radius:10px;font-size:.76rem;color:var(--saffron-deep);text-align:center;}

/* ---------- Admin form grid ---------- */
.admin-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.admin-form-grid .full{grid-column:1/-1;}
.admin-image-preview{width:140px;height:140px;border-radius:var(--radius-m);overflow:hidden;border:1.5px solid var(--line);margin-bottom:10px;background:var(--cream);}
.admin-image-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.admin-field input[type="file"]{
  width:100%;padding:11px 14px;border:1.5px dashed var(--line);border-radius:10px;font-family:var(--font-sans);font-size:.86rem;
  background:var(--cream);cursor:pointer;
}
.admin-field{display:flex;flex-direction:column;gap:7px;}
.admin-field label{font-size:.76rem;font-weight:600;color:var(--maroon);text-transform:uppercase;letter-spacing:.06em;}
.admin-field input,.admin-field select,.admin-field textarea{
  width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:10px;font-family:var(--font-sans);font-size:.88rem;outline:none;transition:.2s;
}
.admin-field input:focus,.admin-field select:focus,.admin-field textarea:focus{border-color:var(--saffron);box-shadow:0 0 0 3px rgba(227,113,31,.14);}
.admin-field textarea{min-height:100px;resize:vertical;}
.checkbox-group{display:flex;gap:16px;flex-wrap:wrap;}
.checkbox-group label{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:500;text-transform:none;color:var(--ink);}
@media(max-width:700px){.admin-form-grid{grid-template-columns:1fr;}}

/* ---------- Discount pricing ---------- */
.price-wrap{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;}
.price-old{color:var(--ink-soft);font-size:.86rem;text-decoration:line-through;text-decoration-color:var(--saffron-deep);font-family:var(--font-sans);}
.price-new{color:#B23A2E;}
.discount-badge{
  display:inline-flex;align-items:center;justify-content:center;
  background:#B23A2E;color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.03em;
  padding:3px 9px;border-radius:999px;line-height:1.4;
}
.discount-badge--mega{
  background:linear-gradient(135deg,#E3711F 0%,#B23A2E 100%);
  padding:4px 11px;box-shadow:0 4px 10px -4px rgba(178,58,46,.65);
  animation:megaPulse 1.9s ease-in-out infinite;
}
.item-card .discount-ribbon{
  position:absolute;top:12px;left:12px;background:#B23A2E;color:#fff;
  font-size:.64rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;z-index:2;box-shadow:0 6px 14px -6px rgba(178,58,46,.6);
  line-height:1.15;text-align:center;
}
/* Deep discounts (50%+ off) get a bolder "half price" style badge so they
   read differently at a glance from a regular, smaller markdown. */
.item-card .discount-ribbon--mega{
  background:linear-gradient(135deg,#E3711F 0%,#B23A2E 100%);
  padding:7px 13px 6px;font-size:.7rem;
  box-shadow:0 8px 18px -6px rgba(178,58,46,.75);
  animation:megaPulse 1.9s ease-in-out infinite;
}
.item-card .discount-ribbon--mega::after{
  content:'HALF PRICE';display:block;font-size:.5rem;font-weight:700;
  letter-spacing:.06em;opacity:.94;margin-top:1px;
}
@keyframes megaPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}
@media(prefers-reduced-motion:reduce){.discount-badge--mega,.item-card .discount-ribbon--mega{animation:none;}}
.item-card .discount-ribbon + .tag{top:52px;}

/* ---------- Blog / Events ----------
   Card is one connected unit: media+details up top (short), featured
   items as a compact horizontal strip below — no more sprawling
   multi-row grid that made the whole card too tall. */
.blog-post{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);
  overflow:hidden;box-shadow:var(--shadow-card);margin-bottom:34px;
}
.blog-post:nth-child(even) .blog-event{order:2;}
.blog-event{padding:26px clamp(22px,3vw,40px);display:flex;flex-direction:column;justify-content:center;position:relative;}
.blog-event-media{position:relative;min-height:180px;max-height:230px;height:100%;overflow:hidden;background:var(--maroon);}
.blog-event-media img{width:100%;height:100%;object-fit:cover;min-height:180px;display:block;}
.blog-event-date{
  position:absolute;top:14px;left:14px;background:#fff;color:var(--maroon);
  border-radius:var(--radius-m);padding:7px 12px;text-align:center;box-shadow:var(--shadow-card);
  font-family:var(--font-serif);line-height:1.1;min-width:52px;
}
.blog-event-date strong{display:block;font-size:1.2rem;color:var(--saffron-deep);}
.blog-event-date span{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);}
.blog-event h3{font-size:clamp(1.2rem,1.8vw,1.5rem);margin:6px 0 8px;line-height:1.2;}
.blog-event .desc{
  color:var(--ink-soft);font-size:.86rem;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-event .blog-event-date-inline{
  display:inline-flex;align-items:center;gap:6px;color:var(--saffron-deep);
  font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px;
}
.blog-items{
  grid-column:1/-1;background:var(--paper);padding:16px clamp(18px,2.6vw,32px) 20px;
  border-top:1px solid var(--line);display:flex;flex-direction:column;
}
.blog-items-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--saffron-deep);font-weight:700;margin-bottom:12px;}
/* Compact, connected horizontal strip — grows sideways (scrolls), never
   pushes the card taller, no matter how many featured items a post has. */
.blog-items-grid{
  display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.blog-items-grid::-webkit-scrollbar{height:6px;}
.blog-items-grid::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;}
.blog-items-grid .item-card{flex:0 0 132px;scroll-snap-align:start;}
.blog-items-grid .item-card .media{height:92px;}
.blog-items-grid .item-card h4{font-size:.78rem;line-height:1.2;}
.blog-items-grid .item-card .body{padding:8px 10px 10px;gap:4px;}
.blog-items-grid .item-card .row{margin-top:2px;}
.blog-items-grid .item-card .price{font-size:.82rem;}
.blog-items-grid .price-old{font-size:.68rem;}
.blog-items-grid .discount-badge,.blog-items-grid .discount-badge--mega{font-size:.56rem;padding:2px 7px;}
.blog-empty-items{
  color:var(--ink-soft);font-size:.8rem;border:1.5px dashed var(--line);border-radius:var(--radius-m);
  padding:16px;text-align:center;
}
@media(max-width:900px){
  .blog-post{grid-template-columns:1fr;}
  .blog-post:nth-child(even) .blog-event{order:0;}
  .blog-event-media{min-height:180px;max-height:200px;}
  .blog-event-media img{min-height:180px;}
}
@media(max-width:480px){
  .blog-event{padding:22px 18px;}
  .blog-items{padding:14px 16px 18px;}
  .blog-items-grid .item-card{flex:0 0 112px;}
  .blog-items-grid .item-card .media{height:78px;}
}

/* ---------- misc ---------- */
.text-center{text-align:center;}
.mt-40{margin-top:40px;}
.empty-state{text-align:center;padding:60px 20px;color:var(--ink-soft);}
.empty-state svg{width:50px;height:50px;color:var(--gold);margin-bottom:16px;}

/* ---------- Nav "Takeout Order" pill button (sits in nav-right, before
   the language switch, so it reads as a clear call-to-action rather than
   just another text link buried in the middle of the nav list) ---------- */
.nav-takeout-btn{
  display:flex;align-items:center;gap:6px;flex-shrink:0;max-width:100%;
  padding:9px 14px;border-radius:999px;
  background:var(--saffron);
  color:#fff !important;font-size:clamp(.72rem,.9vw,.8rem);font-weight:700;white-space:nowrap;
  box-shadow:0 4px 14px -4px rgba(212,120,38,.55);
  transition:transform .2s,box-shadow .2s,background .2s;
}
.nav-takeout-btn::after{display:none;} /* don't inherit the underline hover effect used by plain nav links */
.nav-takeout-btn svg{width:15px;height:15px;flex-shrink:0;}
.nav-takeout-btn:hover{background:var(--saffron-deep);transform:translateY(-1px);box-shadow:0 6px 18px -4px rgba(212,120,38,.65);}
.nav-takeout-btn.active{background:var(--saffron-deep);box-shadow:0 4px 14px -4px rgba(196,89,15,.6);}
.nav-takeout-btn--text{max-width:140px;overflow:hidden;text-overflow:ellipsis;justify-content:center;}
/* Keep the external ordering trigger the same size as the existing takeout button. */
.nav-right .glf-button{display:flex;align-items:center;gap:6px;flex-shrink:0;padding:9px 14px;border-radius:999px;background:var(--saffron);color:#fff !important;font-size:clamp(.72rem,.9vw,.8rem);font-weight:700;line-height:normal;white-space:nowrap;text-decoration:none;}
.nav-right .glf-button::after{display:none;}
@media(max-width:1450px){
  .nav-takeout-btn{padding:9px 12px;}
}
/* Below this width the navbar is too narrow to fit the logo + full
   "Takeout Order" pill + search + language switch + hamburger on one
   row without crowding (this is what was causing the takeout button to
   overlap/misbehave on mid-size phones and small tablets) — collapse it
   to a plain icon button, same treatment the search icon already gets. */
@media(max-width:900px){
  .nav-takeout-btn,
  .nav-takeout-btn--icon,
  .nav-takeout-btn--text{
    height:40px;padding:0 12px;border-radius:999px;justify-content:center;
    max-width:140px;overflow:hidden;text-overflow:ellipsis;
  }
  .nav-takeout-btn span,
  .nav-takeout-btn--text span{display:inline;}
  .nav-takeout-btn svg,
  .nav-takeout-btn--icon svg,
  .nav-takeout-btn--text svg{width:18px;height:18px;}
  .nav-right .glf-button{width:auto;height:40px;max-width:118px;padding:0 10px;border-radius:999px;font-size:.68rem;overflow:hidden;text-overflow:ellipsis;}
}
@media(max-width:760px){
  .nav-takeout-btn,
  .nav-takeout-btn--icon,
  .nav-takeout-btn--text{height:38px;padding:0 10px;max-width:120px;font-size:.64rem;}
  .nav-right .glf-button{height:38px;max-width:112px;padding:0 9px;font-size:.64rem;}
  .nav-takeout-group{max-width:calc(100% - 52px);}
  .nav-branch-select{max-width:120px;min-height:36px;font-size:.58rem;padding:0 28px 0 10px;}
}
@media(max-width:480px){
  .nav-right{flex-wrap:wrap;justify-content:flex-end;}
  .nav-takeout-group{width:100%;justify-content:flex-end;}
  .lang-switch{display:none;}
  .nav-takeout-btn{max-width:130px;padding:0 10px;font-size:.58rem;}
  .nav-takeout-btn span{display:inline;}
  .nav-branch-select-wrap{max-width:116px;flex:1;}
  .nav-branch-select{width:100%;max-width:116px;min-height:36px;font-size:.58rem;padding:0 28px 0 10px;}
}

/* ---------- Scrolling word ticker (includes/marquee.php) ----------
   Originally lived only in index.php's own <style> block; moved here so
   every page that includes marquee.php gets it without duplicating CSS. */
.strip{background:var(--maroon);padding:18px 0;overflow:hidden;white-space:nowrap;}
.strip-track{display:flex;width:max-content;animation:scrollx 100s linear infinite;will-change:transform;backface-visibility:hidden;}
.strip-group{display:flex;align-items:center;flex-shrink:0;}
.strip-track span{color:#F3E4D6;font-family:var(--font-serif);font-style:italic;font-size:1.2rem;display:inline-flex;align-items:center;padding:0 24px;}
.strip-track span::after{content:'✦';color:var(--gold);font-style:normal;margin-left:24px;}
@keyframes scrollx{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
@media(prefers-reduced-motion:reduce){.strip-track{animation:none;}}
.strip:hover .strip-track{animation-play-state:paused;}
@media(max-width:640px){
  .strip{padding:14px 0;}
  .strip-track{animation-duration:45s;}
  .strip-track span{font-size:1rem;padding:0 16px;}
  .strip-track span::after{margin-left:16px;}
}