/* ══════════════════════════════════════════════
   QuAI East Restaurant — Carta Interactiva
   style.css
══════════════════════════════════════════════ */

/* ─── CUSTOM PROPERTIES ─── */
:root {
  --gold:        #C9A84C;
  --gold-light:  #E8C97A;
  --gold-glow:   rgba(201,168,76,0.25);
  --bg:          #0a0a0a;
  --bg-card:     #161616;
  --bg-header:   rgba(10,10,10,0.97);
  --white:       #ffffff;
  --gray-1:      #f0f0f0;
  --gray-3:      #c0c0c0;
  --gray-5:      #888888;
  --gray-7:      #3a3a3a;
  --red:         #e74c3c;
  --radius:      16px;
  --radius-sm:   10px;
  --ease:        cubic-bezier(0.4,0,0.2,1);
  --header-h:    128px;
}

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--white);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;border:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}

/* ─── UTILITY ─── */
.hidden{display:none!important}

/* ══════════════════════
   HEADER
══════════════════════ */
.header{
  position:fixed;top:0;left:0;right:0;
  z-index:100;
  background:var(--bg-header);
  border-bottom:1px solid rgba(201,168,76,0.18);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

/* top row */
.header-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px 8px;
}

.logo{display:flex;align-items:center;gap:9px}
.logo-icon{font-size:26px;line-height:1;filter:drop-shadow(0 0 6px var(--gold-glow))}
.logo-name{
  font-family:'Playfair Display',serif;
  font-size:17px;font-weight:700;
  color:var(--gold);letter-spacing:.4px;line-height:1.1;
}
.logo-sub{display:block;font-size:10px;color:var(--gray-5);letter-spacing:1.2px;text-transform:uppercase;margin-top:1px}

/* mode toggle button */
.mode-btn{
  display:flex;align-items:center;gap:5px;
  background:rgba(201,168,76,0.12);
  border:1px solid rgba(201,168,76,0.35);
  color:var(--gold);
  padding:6px 14px;border-radius:20px;
  font-size:12.5px;font-weight:700;letter-spacing:.3px;
  transition:background .2s,transform .15s;
}
.mode-btn:active{background:rgba(201,168,76,0.28);transform:scale(.96)}
.mode-btn-icon{font-size:10px;transition:transform .3s var(--ease)}

/* main tabs */
.main-tabs{
  display:flex;gap:22px;
  padding:0 18px;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.main-tab{
  background:none;border:none;
  color:var(--gray-5);
  font-size:11.5px;font-weight:700;letter-spacing:1.4px;
  padding:7px 0;
  position:relative;transition:color .2s;
}
.main-tab.active{color:var(--white)}
.main-tab.active::after{
  content:'';position:absolute;bottom:-1px;left:0;right:0;
  height:2px;background:var(--gold);border-radius:1px;
}

/* category chips */
.cats-scroll-wrap{overflow:hidden}
.cats-nav{
  display:flex;gap:6px;
  padding:8px 16px 10px;
  overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.cats-nav::-webkit-scrollbar{display:none}

.cat-chip{
  flex-shrink:0;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  color:var(--gray-3);
  padding:5px 14px;border-radius:20px;
  font-size:12px;font-weight:500;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s;
}
.cat-chip.active{
  background:var(--gold);border-color:var(--gold);
  color:#000;font-weight:700;
}
.cat-chip:hover:not(.active){background:rgba(255,255,255,0.12);color:var(--white)}

/* ══════════════════════
   NORMAL MODE
══════════════════════ */
.view-normal{padding-top:var(--header-h);min-height:100vh}
.menu-wrap{padding:20px 14px 40px;max-width:1200px;margin:0 auto}

/* section */
.menu-section{margin-bottom:36px}
.menu-section.hidden{display:none}

.section-head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(201,168,76,0.25);
}
.section-emoji{font-size:20px;line-height:1}
.section-title{
  font-family:'Playfair Display',serif;
  font-size:19px;font-weight:700;color:var(--gold);
}
.section-count{margin-left:auto;font-size:11.5px;color:var(--gray-5)}

/* grid */
.menu-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
@media(min-width:560px){.menu-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.menu-grid{grid-template-columns:repeat(4,1fr)}}

/* card */
.menu-card{
  background:var(--bg-card);
  border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(255,255,255,0.07);
  cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s;
  position:relative;
}
.menu-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.6)}
.menu-card:active{transform:scale(.97)}

.card-img-wrap{
  position:relative;width:100%;padding-top:68%;
  overflow:hidden;background:#1e1e1e;
}
.card-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transition:transform .4s var(--ease);
}
.menu-card:hover .card-img{transform:scale(1.06)}

.card-badge{
  position:absolute;top:8px;left:8px;
  background:var(--gold);color:#000;
  font-size:9.5px;font-weight:800;
  padding:3px 8px;border-radius:10px;
  text-transform:uppercase;letter-spacing:.5px;z-index:2;
}
.card-spicy{position:absolute;top:8px;right:8px;font-size:15px;z-index:2;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.card-play{
  position:absolute;bottom:8px;right:8px;
  background:rgba(0,0,0,.65);backdrop-filter:blur(6px);
  color:#fff;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;z-index:2;border:1px solid rgba(255,255,255,.2);
}

/* shimmer while loading */
.card-img-wrap.loading{
  background:linear-gradient(90deg,#1a1a1a 25%,#282828 50%,#1a1a1a 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

.card-body{padding:10px 11px 12px}
.card-name{
  font-size:12.5px;font-weight:600;color:var(--white);
  line-height:1.35;margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-desc{
  font-size:11px;color:var(--gray-5);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:9px;
}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:6px}
.card-price{font-family:'Playfair Display',serif;font-size:15px;font-weight:700;color:var(--gold)}
.card-opt-btn{
  background:rgba(201,168,76,0.12);
  border:1px solid rgba(201,168,76,0.3);
  color:var(--gold);font-size:11px;font-weight:600;
  padding:4px 10px;border-radius:12px;
  transition:background .18s,color .18s;
}
.card-opt-btn:hover,.card-opt-btn:active{background:var(--gold);color:#000}

/* ══════════════════════
   REELS MODE
══════════════════════ */
.view-reels{
  position:fixed;inset:0;z-index:200;
  background:#000;
}
.reels-track{
  width:100%;height:100%;
  overflow-y:scroll;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
.reels-track::-webkit-scrollbar{display:none}

/* individual reel */
.reel{
  position:relative;
  width:100%;
  height:100vh;height:100dvh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  overflow:hidden;background:#000;
}

.reel-media{position:absolute;inset:0;width:100%;height:100%}
.reel-img{width:100%;height:100%;object-fit:cover}
.reel-iframe{width:100%;height:100%;border:none;pointer-events:none}

/* gradient overlay */
.reel-grad{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.45) 0%,
    transparent 28%,
    transparent 48%,
    rgba(0,0,0,.65) 72%,
    rgba(0,0,0,.96) 100%
  );
}

/* reel top bar */
.reel-top{
  position:absolute;top:0;left:0;right:0;
  padding:env(safe-area-inset-top,12px) 16px 12px;
  display:flex;align-items:center;justify-content:space-between;
  z-index:3;
}
.reel-close{
  width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.5);backdrop-filter:blur(8px);
  color:#fff;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.15);
}
.reel-brand{
  font-family:'Playfair Display',serif;
  color:var(--gold);font-size:13px;font-weight:700;
  text-shadow:0 1px 6px rgba(0,0,0,.8);
}

/* right action column */
.reel-actions{
  position:absolute;right:13px;bottom:130px;
  z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.reel-act{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:#fff;
}
.reel-act-icon{
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.14);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  transition:background .18s,transform .15s;
}
.reel-act:active .reel-act-icon{transform:scale(.88);background:rgba(255,255,255,.25)}
.reel-act.liked .reel-act-icon{background:rgba(231,76,60,.28);border-color:var(--red)}
.reel-act-lbl{font-size:10.5px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.9)}

/* bottom info strip */
.reel-info{
  position:absolute;bottom:0;left:0;
  right:70px;
  padding:16px 16px calc(env(safe-area-inset-bottom,0px) + 28px);
  z-index:3;
}
.reel-cat-tag{
  display:inline-block;
  background:var(--gold);color:#000;
  font-size:9.5px;font-weight:800;
  padding:3px 10px;border-radius:10px;
  text-transform:uppercase;letter-spacing:.6px;
  margin-bottom:7px;
}
.reel-name{
  font-family:'Playfair Display',serif;
  font-size:21px;font-weight:700;color:#fff;
  line-height:1.2;margin-bottom:6px;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}
.reel-desc{
  font-size:13px;color:rgba(255,255,255,.85);line-height:1.5;
  margin-bottom:12px;
  text-shadow:0 1px 5px rgba(0,0,0,.9);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.reel-price-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.reel-price{
  font-family:'Playfair Display',serif;
  font-size:26px;font-weight:700;color:var(--gold);
  text-shadow:0 2px 8px rgba(0,0,0,.9);
}
.reel-cta{
  background:var(--gold);color:#000;
  font-size:13px;font-weight:800;
  padding:9px 22px;border-radius:24px;
  letter-spacing:.3px;transition:opacity .15s,transform .15s;
}
.reel-cta:active{opacity:.88;transform:scale(.96)}
.reel-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.reel-tag{
  background:rgba(255,255,255,.12);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.9);font-size:11px;
  padding:3px 10px;border-radius:12px;
}

/* counter pill */
.reels-counter{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
  color:#fff;font-size:11.5px;font-weight:700;
  padding:4px 13px;border-radius:12px;
  z-index:300;pointer-events:none;letter-spacing:.3px;
}

/* swipe hint */
.reels-hint{
  position:fixed;bottom:40px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.6);font-size:12px;font-weight:500;
  z-index:300;pointer-events:none;
  animation:fadeHint 3s forwards;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
@keyframes fadeHint{0%{opacity:1}70%{opacity:1}100%{opacity:0}}

/* ══════════════════════
   MODAL (bottom sheet)
══════════════════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.82);
  display:flex;align-items:flex-end;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.modal-sheet{
  background:#181818;
  width:100%;max-height:88vh;
  border-radius:22px 22px 0 0;
  overflow-y:auto;position:relative;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 28px);
  animation:slideUp .32s var(--ease);
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

.modal-handle{
  width:36px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.18);
  margin:10px auto 4px;
}
.modal-close-btn{
  position:absolute;top:14px;right:14px;
  background:rgba(255,255,255,.1);color:#fff;
  width:32px;height:32px;border-radius:50%;
  font-size:13px;display:flex;align-items:center;justify-content:center;
  z-index:1;transition:background .18s;
}
.modal-close-btn:hover{background:rgba(255,255,255,.2)}

.modal-hero-img{
  width:100%;height:220px;object-fit:cover;
  border-radius:16px 16px 0 0;
}
.modal-body-inner{padding:18px 18px 0}

.modal-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.modal-badge-gold{
  background:var(--gold);color:#000;
  font-size:10px;font-weight:800;
  padding:3px 10px;border-radius:10px;text-transform:uppercase;letter-spacing:.5px;
}
.modal-badge-tag{
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);
  font-size:10.5px;padding:3px 10px;border-radius:10px;
}
.modal-title{
  font-family:'Playfair Display',serif;
  font-size:22px;font-weight:700;color:#fff;
  line-height:1.2;margin-bottom:5px;
}
.modal-units{font-size:12px;color:var(--gray-5);margin-bottom:10px}
.modal-price{
  font-family:'Playfair Display',serif;
  font-size:28px;font-weight:700;color:var(--gold);margin-bottom:14px;
}
.modal-desc{
  font-size:13.5px;color:var(--gray-3);line-height:1.7;
  margin-bottom:18px;padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.modal-attrs{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.modal-attr{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--gray-3)}

.modal-action-row{
  display:flex;gap:10px;
  padding:0 18px;
}
.modal-whatsapp-btn{
  flex:1;
  background:#25D366;color:#fff;
  font-size:14px;font-weight:700;
  padding:14px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:opacity .18s;
}
.modal-whatsapp-btn:active{opacity:.85}
.modal-share-btn{
  background:rgba(255,255,255,.1);color:#fff;
  width:52px;border-radius:14px;
  font-size:20px;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s;
}
.modal-share-btn:active{background:rgba(255,255,255,.2)}

/* ══════════════════════
   TOAST
══════════════════════ */
.toast{
  position:fixed;
  bottom:80px;left:50%;transform:translateX(-50%);
  background:rgba(201,168,76,.95);color:#000;
  font-size:13.5px;font-weight:700;
  padding:10px 22px;border-radius:22px;
  z-index:900;white-space:nowrap;
  pointer-events:none;
  animation:toastPop .25s var(--ease);
}
@keyframes toastPop{from{opacity:0;transform:translateX(-50%) scale(.88)}to{opacity:1;transform:translateX(-50%) scale(1)}}

/* ══════════════════════
   RESPONSIVE TWEAKS
══════════════════════ */
@media(min-width:768px){
  .reel-name{font-size:26px}
  .reel-price{font-size:32px}
  .reel-actions{bottom:150px}
  .reel-info{right:90px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}