/* ─────────────────────────────────────────────────────────
   Landing Page CSS — pos_single
   Primary: #cb202d  |  Amber: #ffab00
───────────────────────────────────────────────────────── */

:root {
  --primary:       #cb202d;
  --primary-d:     #a81a25;
  --primary-l:     #fde8ea;
  --primary-m:     #f9c0c4;
  --amber:         #ffab00;
  --amber-l:       #fff8e8;
  --amber-m:       #ffe28a;
  --text:          #111827;
  --muted:         #6b7280;
  --radius:        14px;
  --nav-h:         64px;
  --max:           1152px;
  --border:        #e5e7eb;
  --card:          #fff;
}

* { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; color: var(--text); }
h1,h2,h3,h4,h5 { font-family: 'Lexend', sans-serif; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; vertical-align: middle; }

/* ── Scroll-reveal ───────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.1s; }
.reveal-d2 { transition-delay:.2s; }
.reveal-d3 { transition-delay:.3s; }
.reveal-d4 { transition-delay:.4s; }

/* ── Header ──────────────────────────────────────────────── */
#site-header {
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(203,32,45,.12);
  transition:box-shadow .3s;
}
#site-header.scrolled { box-shadow:0 4px 24px rgba(0,0,0,.08); }

#mobile-menu { max-height:0; overflow:hidden; transition:max-height .35s ease; }
#mobile-menu.open { max-height:420px; }

/* ── Hero Slider ─────────────────────────────────────────── */
.slide { position:absolute; inset:0; opacity:0; transition:opacity 1s ease; }
.slide.active { opacity:1; }
.slider-dot { background:rgba(255,255,255,.4); border:none; cursor:pointer; }
.slider-dot.active-dot { background:#fff; width:28px; border-radius:6px; }
.slide-text { opacity:0; transition:opacity 1s ease; }
.slide-text-active { opacity:1; }

/* ── Cards / lift ────────────────────────────────────────── */
.card-lift { transition:transform .25s ease,box-shadow .25s ease; }
.card-lift:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.12); }

.step-icon { transition:transform .3s ease,box-shadow .3s ease; }
.step-card:hover .step-icon { transform:scale(1.12); box-shadow:0 8px 24px rgba(203,32,45,.3); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
  background:var(--primary); color:#fff; border-radius:9999px;
  padding:.65rem 1.6rem; font-family:'Lexend',sans-serif;
  font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:6px;
  transition:background .2s,transform .15s,box-shadow .2s;
  border:2px solid transparent; text-decoration:none;
}
.btn-primary:hover { background:var(--primary-d); transform:translateY(-1px); box-shadow:0 6px 20px rgba(203,32,45,.35); }

.btn-outline {
  background:transparent; color:#fff; border-radius:9999px;
  padding:.65rem 1.6rem; font-family:'Lexend',sans-serif;
  font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:6px;
  transition:background .2s,transform .15s;
  border:2px solid rgba(255,255,255,.7); text-decoration:none;
}
.btn-outline:hover { background:rgba(255,255,255,.15); transform:translateY(-1px); }

/* ── Testimonial quote ───────────────────────────────────── */
.quote-bg::before {
  content:'\201C';
  position:absolute; top:-12px; left:12px;
  font-size:120px; font-family:Georgia,serif;
  color:rgba(203,32,45,.07); line-height:1; pointer-events:none; z-index:0;
}

/* ── Menu section ────────────────────────────────────────── */
.menu-heading { max-width:var(--max); margin:0 auto; padding:52px 24px 28px; text-align:center; }
.menu-badge { display:inline-block; font-size:13px; font-weight:600; padding:6px 16px; border-radius:20px; margin-bottom:14px; background:var(--primary-l); color:var(--primary); font-family:'Inter',sans-serif; }
.menu-wrap { display:flex; gap:24px; align-items:flex-start; max-width:var(--max); margin:0 auto; padding:0 16px 64px; }
@media(min-width:768px) { .menu-wrap { padding:0 24px 64px; } }
@media(max-width:767px) { .menu-wrap { padding:0 12px 48px; gap:0; } }

/* ── Sidebar ─────────────────────────────────────────────── */
.menu-sidebar { width:210px; flex-shrink:0; position:sticky; top:80px; display:flex; flex-direction:column; gap:14px; }
@media(max-width:767px) { .menu-sidebar { display:none; } }
.sbar-box { background:#fff; border-radius:14px; padding:16px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.sbar-title { display:flex; align-items:center; gap:8px; font-family:'Lexend',sans-serif; font-size:12px; font-weight:700; color:#374151; margin-bottom:12px; text-transform:uppercase; letter-spacing:.5px; }
.sbar-icon { font-size:17px!important; color:var(--primary); }
.sbar-sk { height:34px; border-radius:8px; margin-bottom:8px; background:linear-gradient(90deg,#f0f0f5 25%,#e4e4ec 50%,#f0f0f5 75%); background-size:200% 100%; animation:sk-sh 1.4s infinite; }
@keyframes sk-sh { from{background-position:200% 0} to{background-position:-200% 0} }
.sbar-cate-btn { display:flex; align-items:flex-start; gap:1px; width:100%; padding:9px 12px; border-radius:10px; border:none; background:transparent; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:#374151; cursor:pointer; text-align:left; transition:all .18s; margin-bottom:3px; flex-direction:column; }
.sbar-cate-btn:hover { background:var(--primary-l); color:var(--primary); }
.sbar-cate-btn.active { background:var(--primary); color:#fff; }
.sbar-food { display:flex; flex-direction:column; gap:6px; }
.sbar-food-btn { display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border-radius:10px; border:1.5px solid #e5e7eb; background:#f9fafb; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:#374151; cursor:pointer; transition:all .18s; }
.sbar-food-btn:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-l); }
.sbar-food-active { background:var(--primary)!important; border-color:var(--primary)!important; color:#fff!important; }
.sbar-food-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* ── Products column ─────────────────────────────────────── */
.menu-products { flex:1; min-width:0; }
.m-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:900px) { .m-grid-3 { grid-template-columns:repeat(2,1fr); gap:16px; } }
@media(max-width:767px) { .m-grid-3 { grid-template-columns:1fr; gap:14px; } }

/* ── Skeleton ────────────────────────────────────────────── */
.m-sk-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.m-sk-img { height:180px; background:linear-gradient(90deg,#f0f0f5 25%,#e4e4ec 50%,#f0f0f5 75%); background-size:200% 100%; animation:sk-sh 1.4s infinite; }
.m-sk-body { padding:14px; display:flex; flex-direction:column; gap:10px; }
.m-sk-line { height:12px; border-radius:6px; background:linear-gradient(90deg,#f0f0f5 25%,#e4e4ec 50%,#f0f0f5 75%); background-size:200% 100%; animation:sk-sh 1.4s infinite; }
.m-sk-line.short { width:60%; }
.m-sk-line.xshort { width:35%; }

/* ── Item cards ──────────────────────────────────────────── */
.m-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.07); cursor:pointer; transition:transform .2s,box-shadow .2s; }
.m-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.12); }
.m-card-img { height:180px; overflow:hidden; background:var(--primary-l); }
.m-card-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
.m-card:hover .m-card-img img { transform:scale(1.06); }
.m-card-img-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:40px; background:linear-gradient(135deg,var(--primary-l),var(--primary-m)); }
.m-card-body { padding:14px; }
.m-card-badges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.m-card-badge { font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; font-family:'Inter',sans-serif; }
.m-card-name { font-family:'Lexend',sans-serif; font-weight:700; font-size:14px; color:#111827; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35; }
.m-card-desc { font-size:12px; color:#6b7280; line-height:1.5; margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.m-card-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.m-card-price { font-family:'Lexend',sans-serif; font-weight:800; font-size:15px; color:#111827; }
.m-card-btn { padding:8px 16px; border:none; border-radius:10px; font-family:'Lexend',sans-serif; font-weight:700; font-size:13px; color:#fff; cursor:pointer; background:var(--primary); transition:background .2s; display:flex; align-items:center; gap:5px; white-space:nowrap; }
.m-card-btn:hover { background:var(--primary-d); }
.m-card-btn.added { background:#16a34a; }
.no-items { text-align:center; padding:48px 20px; color:#6b7280; font-size:15px; grid-column:1/-1; }

/* ── Mobile filter bar ───────────────────────────────────── */
.mob-bar { background:#fff; border-bottom:1px solid #e5e7eb; position:sticky; top:64px; z-index:80; box-shadow:0 2px 6px rgba(0,0,0,.06); }
@media(min-width:768px) { .mob-bar { display:none!important; } }
.mob-cates-wrap { overflow-x:auto; scrollbar-width:none; border-bottom:1px solid #f3f4f6; }
.mob-cates-wrap::-webkit-scrollbar { display:none; }
.mob-cates-scroll { display:flex; gap:6px; padding:10px 14px; }
.mob-cate-btn { flex-shrink:0; padding:6px 14px; border-radius:20px; border:1.5px solid #e5e7eb; background:#f9fafb; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:#374151; cursor:pointer; white-space:nowrap; transition:all .2s; }
.mob-cate-btn:hover,.mob-cate-btn.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.mob-food-row { display:flex; gap:8px; padding:8px 14px 10px; overflow-x:auto; scrollbar-width:none; }
.mob-food-row::-webkit-scrollbar { display:none; }
.mob-food-btn { flex-shrink:0; display:flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; border:1.5px solid #e5e7eb; background:#f9fafb; font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:#374151; cursor:pointer; white-space:nowrap; transition:all .2s; }
.mob-food-active { background:var(--primary)!important; border-color:var(--primary)!important; color:#fff!important; }
.mob-food-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ── Item modal ──────────────────────────────────────────── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000; align-items:center; justify-content:center; padding:16px; }
.modal-overlay.open { display:flex; }
.modal-sheet { background:#fff; border-radius:20px; max-width:480px; width:100%; max-height:90vh; overflow-y:auto; position:relative; box-shadow:0 24px 48px rgba(0,0,0,.2); }
.modal-close { position:absolute; top:12px; right:12px; z-index:10; width:32px; height:32px; border-radius:50%; border:none; background:#f3f4f6; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.modal-close:hover { background:#e5e7eb; }
.modal-img { width:100%; height:220px; object-fit:cover; border-radius:20px 20px 0 0; display:block; }
.modal-img-ph { width:100%; height:220px; background:var(--primary-l); display:flex; align-items:center; justify-content:center; font-size:64px; border-radius:20px 20px 0 0; }
.modal-body { padding:20px; }
.modal-name { font-family:'Lexend',sans-serif; font-weight:800; font-size:18px; color:#111827; margin-bottom:8px; }
.modal-desc { font-size:13px; color:#6b7280; line-height:1.6; margin-bottom:16px; }
.modal-section-title { font-family:'Lexend',sans-serif; font-size:12px; font-weight:700; color:#374151; text-transform:uppercase; letter-spacing:.5px; margin:14px 0 10px; }
.size-options { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.size-opt { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-radius:12px; border:1.5px solid #e5e7eb; cursor:pointer; transition:all .18s; background:#f9fafb; }
.size-opt:hover { border-color:var(--primary); background:var(--primary-l); }
.size-opt.selected { border-color:var(--primary); background:var(--primary-l); }
.size-opt label { font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:#374151; cursor:pointer; }
.size-opt .size-price { font-family:'Lexend',sans-serif; font-weight:800; font-size:14px; color:var(--primary); }
.addon-group { margin-bottom:14px; }
.addon-group-title { font-size:11px; font-weight:700; color:#374151; text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; }
.addon-item { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-radius:10px; border:1.5px solid #e5e7eb; margin-bottom:6px; cursor:pointer; transition:all .18s; background:#f9fafb; }
.addon-item:hover,.addon-item.selected { border-color:var(--primary); background:var(--primary-l); }
.addon-item label { font-family:'Inter',sans-serif; font-size:13px; color:#374151; cursor:pointer; font-weight:500; }
.addon-item .addon-price { font-size:12px; font-weight:700; color:var(--primary); }
.modal-footer { display:flex; align-items:center; gap:12px; margin-top:20px; padding-top:16px; border-top:1px solid #f0f0f5; }
.qty-control { display:flex; align-items:center; gap:12px; background:#f3f4f6; border-radius:10px; padding:6px 10px; }
.qty-btn { width:28px; height:28px; border:none; border-radius:8px; background:#fff; font-size:16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#374151; transition:background .15s; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.qty-btn:hover { background:var(--primary-l); color:var(--primary); }
.qty-num { font-family:'Lexend',sans-serif; font-weight:700; font-size:16px; color:#111827; min-width:20px; text-align:center; }
.modal-add-btn { flex:1; padding:12px 0; border:none; border-radius:12px; font-family:'Lexend',sans-serif; font-weight:700; font-size:14px; color:#fff; cursor:pointer; background:var(--primary); transition:background .2s; }
.modal-add-btn:hover { background:var(--primary-d); }

/* ── Cart bar ─────────────────────────────────────────────── */
.cart-bar { position:fixed; bottom:0; left:0; right:0; z-index:900; background:var(--primary); color:#fff; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; transform:translateY(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); box-shadow:0 -4px 20px rgba(203,32,45,.3); }
.cart-bar.visible { transform:translateY(0); }
.cart-bar-info { display:flex; flex-direction:column; }
.cart-bar-count { font-family:'Lexend',sans-serif; font-weight:700; font-size:14px; }
.cart-bar-total { font-size:12px; opacity:.8; }
.cart-bar-btn { background:#fff; color:var(--primary); border:none; border-radius:20px; padding:10px 22px; font-family:'Lexend',sans-serif; font-weight:700; font-size:14px; cursor:pointer; transition:transform .15s; }
.cart-bar-btn:hover { transform:scale(1.04); }

/* ── Language switcher ───────────────────────────────────── */
.lang-switcher { position:relative; }
.lang-btn { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:none; background:rgba(203,32,45,.1); color:var(--primary); cursor:pointer; transition:background .2s; font-size:18px; }
.lang-btn:hover { background:rgba(203,32,45,.2); }
.lang-dropdown { display:none; position:absolute; top:calc(100% + 8px); right:0; background:#fff; border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.14); min-width:160px; overflow:hidden; z-index:200; }
.lang-dropdown.open { display:block; }
.lang-option { display:block; width:100%; padding:10px 16px; text-align:left; border:none; background:transparent; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:#374151; cursor:pointer; transition:background .15s; text-decoration:none; }
.lang-option:hover { background:var(--primary-l); color:var(--primary); }
.lang-option.active { background:var(--primary); color:#fff; }

/* ── Brand utilities ─────────────────────────────────────── */
.icon-brand { background:var(--primary); }
.text-brand  { color:var(--primary); }
.text-amber  { color:var(--amber); }
.text-green  { color:#71dd37; }
.icon-bg-light { background:var(--primary-l); }
.icon-bg-green { background:#f0fdf4; }

/* ── Nav cart ────────────────────────────────────────────── */
.nav-cart-btn { background:var(--primary); border:none; cursor:pointer; color:#fff; }
.nav-cart-badge {
  display:none; position:absolute; top:-4px; right:-4px;
  background:var(--amber); color:#fff; font-size:10px; font-weight:700;
  min-width:18px; height:18px; border-radius:9px;
  align-items:center; justify-content:center; padding:0 4px;
}

/* ── Section backgrounds ─────────────────────────────────── */
.section-gray         { background:#f9fafb; }
.section-light        { background:#f4f5f9; }
.section-testimonials { background:#f0f0ff; }
.section-cta          { background:linear-gradient(135deg,#8b0000 0%,var(--primary) 50%,#e53945 100%); }
.section-app          { background:linear-gradient(135deg,#0f172a 0%,#1e293b 60%,#0c1a2e 100%); }
.site-footer          { background:#111827; }

/* ── Badges / section labels ─────────────────────────────── */
.section-badge { background:var(--primary-l); color:var(--primary); }
.hero-badge    { background:rgba(203,32,45,.25); color:var(--primary-l); border:1px solid rgba(253,232,234,.3); }
.hero-overlay  { background:linear-gradient(90deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.4) 55%,rgba(0,0,0,.12) 100%); }

/* ── Step icons & numbers ────────────────────────────────── */
.step-icon-red   { background:linear-gradient(135deg,var(--primary),var(--primary-d)); }
.step-icon-amber { background:linear-gradient(135deg,var(--amber),#fbbf24); }
.step-icon-blue  { background:linear-gradient(135deg,#03c3ec,#38bdf8); }
.step-num-red    { background:var(--primary); }
.step-num-amber  { background:var(--amber); }

/* ── Stats row ───────────────────────────────────────────── */
.stat-val { font-size:clamp(1rem,3vw,1.4rem); }

/* ── About / mission callout ─────────────────────────────── */
.mission-callout { background:var(--amber-l); border-left:4px solid var(--amber); }

/* ── Food-type dots ──────────────────────────────────────── */
.dot-red    { background:var(--primary); }
.dot-green  { background:#16a34a; }
.dot-danger { background:#dc2626; }

/* ── Testimonial stars ───────────────────────────────────── */
.star-filled { color:#fbbf24; font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; }
.star-empty  { color:#e5e7eb; font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; }

/* ── CTA section ─────────────────────────────────────────── */
.btn-white       { background:#fff!important; color:var(--primary)!important; border-color:transparent!important; }
.btn-white:hover { background:#f3f4f6!important; }

/* ── Contact form ────────────────────────────────────────── */
.form-input,.form-select {
  border:1.5px solid var(--border);
  background:#f9fafb;
  transition:border-color .18s,background .18s;
}
.form-input:focus,.form-select:focus { border-color:var(--primary)!important; background:#fff!important; outline:none; }
.btn-submit       { background:var(--primary); }
.btn-submit:hover { background:var(--primary-d); }
.form-success { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.form-error   { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }

/* ── Footer ──────────────────────────────────────────────── */
.footer-muted     { color:#9ca3af; }
.footer-copyright { color:#6b7280; }
.footer-border    { border-color:#1f2937; }
.footer-social    { background:rgba(255,255,255,.08); transition:background .2s; }
.footer-social:hover { background:#25d366; }

/* ── Mobile app section ──────────────────────────────────── */
.app-tag { background:rgba(203,32,45,.2); color:#fca5a5; border:1px solid rgba(203,32,45,.35); }

.app-store-btn {
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.15);
  color:#fff;
  text-decoration:none;
}
.app-store-btn:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); }
.app-store-label { color:#9ca3af; }

.app-phone-wrap  { position:relative; }
.app-phone-glow  {
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(203,32,45,.3) 0%,transparent 65%);
  filter:blur(50px);
  transform:scale(1.4);
}
.app-phone-frame {
  position:relative; z-index:10;
  width:260px;
  background:#111827;
  border-radius:44px;
  padding:10px;
  box-shadow:0 40px 80px rgba(0,0,0,.6),
             0 0 0 1px rgba(255,255,255,.08),
             inset 0 0 0 1px rgba(255,255,255,.04);
}
.app-phone-notch { height:28px; display:flex; align-items:center; justify-content:center; }
.app-phone-pill  { width:72px; height:10px; background:#000; border-radius:8px; }
.app-phone-screen { border-radius:32px; overflow:hidden; line-height:0; }
.app-phone-screen img { width:100%; display:block; border-radius:32px; }
.app-phone-home  { height:24px; display:flex; align-items:center; justify-content:center; }
.app-phone-bar   { width:48px; height:4px; background:rgba(255,255,255,.18); border-radius:4px; }