/* ============================================================
   MENU BOOK MODAL · CART DRAWER · AUTH MODAL
   ============================================================ */

/* ── generic modal ─────────────────────────────────────── */
.modal{ position:fixed; inset:0; z-index:300; visibility:hidden; }
.modal.is-open{ visibility:visible; }
.modal__scrim{
  position:absolute; inset:0;
  background:radial-gradient(90% 90% at 50% 40%, rgba(30,16,10,.78), rgba(6,4,3,.94));
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transition:opacity .55s var(--ease);
}
.modal.is-open .modal__scrim{ opacity:1; }

.modal__close{
  position:absolute; top:-4px; right:-4px; z-index:20;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(20,16,16,.9); border:1px solid var(--line);
  color:var(--text-dim); backdrop-filter:blur(10px);
  transition:transform .45s var(--ease-out), color .3s, border-color .3s, background .3s;
}
.modal__close:hover{ transform:rotate(90deg); color:#fff; background:var(--chilli); border-color:var(--chilli); }
.modal__close svg{ width:19px; height:19px; }
.modal__close--inset{ top:14px; right:14px; }

/* ── menu modal stage ──────────────────────────────────── */
.menu-modal__stage{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:clamp(16px,3vw,40px);
  opacity:0; transform:scale(.94) translateY(20px);
  transition:opacity .5s var(--ease-out), transform .65s var(--ease-out);
}
.modal.is-open .menu-modal__stage{ opacity:1; transform:none; }
.menu-modal .modal__close{ top:clamp(12px,2vw,26px); right:clamp(12px,2vw,26px); }

/* ── the book ──────────────────────────────────────────── */
.book{
  position:relative;
  width:min(1080px, 94vw);
  height:min(660px, calc(100svh - 230px));
  border-radius:6px 14px 14px 6px;
  overflow:hidden;
  box-shadow:0 50px 110px rgba(0,0,0,.7), 0 0 0 1px rgba(240,169,59,.12);
  background:#2A1109;
}

/* leather boards + spine visible under the leaves */
.book__board{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      #55190F 0%, #6B2213 8%, #5A1B10 44%,
      #2E0D08 49%, #1E0805 50%, #2E0D08 51%,
      #5A1B10 56%, #6B2213 92%, #55190F 100%);
}
.book__board::after{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.18; mix-blend-mode:overlay;
}
.book__shadow{
  position:absolute; left:50%; top:0; bottom:0; width:120px; translate:-50% 0; z-index:60;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.42) 42%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.42) 58%, transparent);
  pointer-events:none;
  transition:opacity .5s;
}
.book[data-mode="single"] .book__shadow{ opacity:0; }

/* ── paper surface, shared by resting pages and the turning sheet ── */
.leaf__face,.book__page{
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 20% 0%, #FFFAF0 0%, var(--paper) 40%, var(--paper-2) 100%);
  color:#3A251A;
}

/* the two resting pages — never transformed, so they scroll and hit-test
   normally (a rotated leaf inside an overflow:hidden ancestor does not) */
.book__static{ position:absolute; inset:0; z-index:1; }
.book__page{ position:absolute; top:0; bottom:0; width:50%; }
.book__page--left{ left:0; }
.book__page--right{ left:50%; }
.book[data-mode="single"] .book__page--left{ display:none; }
.book[data-mode="single"] .book__page--right{ left:0; width:100%; }
.book__page.is-blank{ background:none; }

/* ── the single turning sheet ── */
.book__leaves{
  position:absolute; inset:0; z-index:2;
  perspective:2600px;
  pointer-events:none;          /* purely decorative while it animates */
}
.leaf{
  position:absolute; top:0; bottom:0; left:50%; width:50%;
  transform-origin:left center;
  transform-style:preserve-3d;
  transition:transform 1.05s cubic-bezier(.62,.02,.28,1);
  will-change:transform;
}
.leaf[hidden]{ display:none; }
.leaf.is-flipped{ transform:rotateY(-180deg); }
.book[data-mode="single"] .leaf{ left:0; width:100%; }

.leaf__face{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.leaf__face--back{ transform:rotateY(180deg); }

/* spine shading — always on the edge nearest the gutter */
.leaf__face::before,.book__page::before{
  content:""; position:absolute; top:0; bottom:0; width:46px; pointer-events:none; z-index:3;
}
.leaf__face--front::before,.book__page--right::before{
  left:0; background:linear-gradient(90deg, rgba(90,45,20,.30), transparent);
}
.leaf__face--back::before,.book__page--left::before{
  right:0; background:linear-gradient(270deg, rgba(90,45,20,.30), transparent);
}
.book[data-mode="single"] .leaf__face::before,
.book[data-mode="single"] .book__page::before{ display:none; }

/* paper grain */
.leaf__face::after,.book__page::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23p)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.book__page.is-blank::before,.book__page.is-blank::after{ display:none; }

/* ── page content ──────────────────────────────────────── */
.page{
  position:relative; z-index:4;
  height:100%; overflow:hidden;
  display:flex; flex-direction:column;
  padding:clamp(22px,3.2vw,40px) clamp(22px,3.4vw,44px) clamp(14px,1.8vw,22px);
}
.page__items{
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  padding-right:10px; margin-right:-6px;
  scrollbar-width:thin; scrollbar-color:rgba(120,70,35,.35) transparent;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 26px),transparent 100%);
}
.page__items::-webkit-scrollbar{ width:5px }
.page__items::-webkit-scrollbar-track{ background:transparent }
.page__items::-webkit-scrollbar-thumb{ background:rgba(120,70,35,.32); border-radius:6px; border:0 }
.page__head,.page__rule,.page__note,.page__num{ flex:0 0 auto; }

.page__frame{
  position:absolute; inset:14px; border:1px solid rgba(150,90,45,.32);
  border-radius:3px; pointer-events:none;
}
.page__frame::before,.page__frame::after{
  content:""; position:absolute; width:34px; height:34px;
  border:1px solid rgba(190,120,50,.5);
}
.page__frame::before{ top:6px; left:6px; border-right:0; border-bottom:0; }
.page__frame::after{ bottom:6px; right:6px; border-left:0; border-top:0; }

.page__head{ text-align:center; margin-bottom:22px; }
.page__urdu{ font-family:var(--ff-urdu); font-size:1.35rem; color:#A8451F; line-height:2.1; }
.page__title{
  font-family:var(--ff-display); font-size:clamp(1.5rem,2.5vw,2.1rem); font-weight:600;
  color:#4A2412; letter-spacing:-.02em; margin:.05em 0 .25em;
}
.page__sub{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:#9A6A44; margin:0; }
.page__rule{
  display:flex; align-items:center; justify-content:center; gap:10px; margin:16px 0 20px;
  color:#C88A3A;
}
.page__rule::before,.page__rule::after{
  content:""; height:1px; flex:1; max-width:110px;
  background:linear-gradient(90deg,transparent,rgba(200,138,58,.75));
}
.page__rule::after{ background:linear-gradient(270deg,transparent,rgba(200,138,58,.75)); }
.page__rule i{ width:7px; height:7px; rotate:45deg; background:#C88A3A; }

/* menu item row */
.mitem{
  display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:start;
  padding:12px 0; border-bottom:1px dashed rgba(150,90,45,.26);
}
.mitem:last-child{ border-bottom:0; }
.mitem__main{ min-width:0; }
.mitem__name{
  font-family:var(--ff-display); font-size:1.02rem; font-weight:600; color:#3A2010;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; line-height:1.25;
}
.mitem__badge{
  font-family:var(--ff-body); font-size:.55rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:.28em .6em; border-radius:4px; color:#fff; background:#A8451F;
}
.mitem__badge--veg{ background:#5B7F4A; }
.mitem__badge--new{ background:#C88A3A; color:#2A1109; }
.mitem__urdu{ font-family:var(--ff-urdu); font-size:.85rem; color:#A8451F; line-height:1.9; }
.mitem__desc{ font-size:.79rem; color:#7A5A42; margin:.1em 0 0; line-height:1.5; }
.mitem__heat{ display:inline-flex; gap:2px; vertical-align:middle; }
.mitem__heat i{ width:5px; height:5px; border-radius:50%; background:rgba(168,69,31,.22); }
.mitem__heat i.on{ background:#C1362C; }
.mitem__price{
  font-family:var(--ff-display); font-size:1rem; font-weight:600; color:#5A3218;
  white-space:nowrap; padding-top:2px;
}
.mitem__add{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center;
  border:1px solid rgba(168,69,31,.45); color:#A8451F;
  transition:background .3s, color .3s, transform .35s var(--ease-out), border-color .3s;
}
.mitem__add svg{ width:14px; height:14px; stroke-width:2.6; }
.mitem__add:hover{ background:#A8451F; color:#FBF4E8; transform:scale(1.12) rotate(90deg); border-color:#A8451F; }
.mitem__add.is-added{ background:#5B7F4A; border-color:#5B7F4A; color:#fff; }

.page__note{
  margin-top:20px; padding:14px 16px; border-radius:8px;
  background:rgba(200,138,58,.12); border:1px solid rgba(200,138,58,.3);
  font-size:.76rem; color:#7A5228; font-style:italic;
}
.page__num{
  display:block; text-align:center; padding-top:12px;
  font-size:.66rem; letter-spacing:.24em; color:#B08050; z-index:5;
}
.page--cover .page__num{ position:absolute; bottom:18px; left:0; right:0; padding:0; }

/* cover page */
.page--cover{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  background:
    radial-gradient(110% 80% at 50% 12%, rgba(255,255,255,.12), transparent 62%),
    linear-gradient(160deg,#8E2A1C 0%,#6B1D14 45%,#3B1009 100%);
  color:var(--cream); padding:clamp(24px,4vw,48px);
}
.page--cover .page__frame{ border-color:rgba(240,169,59,.45); }
.page--cover .page__frame::before,.page--cover .page__frame::after{ border-color:rgba(240,169,59,.7); }
.page--cover .page__num{ color:rgba(251,235,210,.5); }
.cover__mark{ width:74px; height:74px; margin-bottom:20px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.5)); }
.cover__mark svg{ width:100%; height:100%; stroke:none; }
.cover__kicker{ font-size:.66rem; letter-spacing:.34em; text-transform:uppercase; color:rgba(247,200,100,.9); }
.cover__title{
  font-family:var(--ff-display); font-size:clamp(2.4rem,5vw,3.6rem); font-weight:600;
  letter-spacing:-.03em; margin:.16em 0 .1em; color:#FBEBD2;
}
.cover__urdu{ font-family:var(--ff-urdu); font-size:1.5rem; color:var(--saffron); line-height:2.2; }
.cover__line{ width:120px; height:1px; background:linear-gradient(90deg,transparent,rgba(240,169,59,.9),transparent); margin:20px 0; }
.cover__desc{ font-size:.86rem; color:rgba(251,235,210,.72); max-width:34ch; margin:0 0 22px; line-height:1.7; }
.cover__meta{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; }
.cover__meta div{ text-align:center; }
.cover__meta strong{ display:block; font-family:var(--ff-display); font-size:1.3rem; color:var(--saffron); }
.cover__meta span{ font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(251,235,210,.55); }
.cover__hint{
  margin-top:26px; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(251,235,210,.5); display:inline-flex; align-items:center; gap:8px;
}
.cover__hint svg{ width:14px; height:14px; animation:hintNudge 1.8s var(--ease-in-out) infinite; }
@keyframes hintNudge{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(5px) } }

/* ── book controls ─────────────────────────────────────── */
.book__controls{
  display:flex; align-items:center; gap:10px;
  max-width:100%;
}
.book__nav{
  width:44px; height:44px; flex-shrink:0; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(20,16,16,.7);
  color:var(--text-dim); backdrop-filter:blur(10px);
  transition:color .3s, border-color .3s, background .3s, transform .4s var(--ease-out), opacity .3s;
}
.book__nav svg{ width:19px; height:19px; }
.book__nav:hover:not(:disabled){ color:var(--ink); background:var(--grad-spice); border-color:transparent; transform:scale(1.08); }
.book__nav:disabled{ opacity:.28; cursor:not-allowed; }

.book__tabs{
  display:flex; gap:6px; overflow-x:auto; padding:4px;
  scrollbar-width:none; -ms-overflow-style:none;
  border-radius:999px;
  background:rgba(20,16,16,.6); border:1px solid var(--line);
  backdrop-filter:blur(12px);
}
.book__tabs::-webkit-scrollbar{ display:none }
.book__tab{
  flex:0 0 auto; padding:.5em 1em; border-radius:999px;
  font-size:.75rem; font-weight:500; color:var(--text-mute); white-space:nowrap;
  transition:color .3s, background .3s;
}
.book__tab:hover{ color:var(--cream); background:rgba(246,238,226,.06); }
.book__tab.is-active{ color:#2A1206; background:var(--grad-spice); font-weight:600; }

.book__footbar{
  display:flex; align-items:center; gap:18px; justify-content:center; flex-wrap:wrap;
}
.book__page-label{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-mute); }
.book__cart-count{
  display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px;
  border-radius:999px; background:rgba(42,18,6,.22); font-size:.68rem; font-weight:700;
}

/* fly-to-cart ghost */
.fly-ghost{
  position:fixed; z-index:500; pointer-events:none;
  width:26px; height:26px; border-radius:50%;
  background:var(--grad-spice); box-shadow:0 0 20px rgba(240,169,59,.8);
  transition:transform .85s cubic-bezier(.5,-.2,.7,1), opacity .85s ease-in;
}

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart-panel__body{ flex:1; overflow-y:auto; padding:18px var(--gutter); }
.cart-empty{ text-align:center; padding:56px 10px; color:var(--text-mute); }
.cart-empty svg{ width:64px; height:64px; margin:0 auto 20px; color:var(--ink-4); stroke-width:1.1; }
.cart-empty h4{ font-size:1.2rem; color:var(--text); margin-bottom:.4em; }
.cart-empty p{ font-size:.85rem; margin-bottom:22px; }

.cart-item{
  display:grid; grid-template-columns:58px 1fr auto; gap:14px; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--line-2);
  animation:cartItemIn .45s var(--ease-out) both;
}
@keyframes cartItemIn{ from{ opacity:0; transform:translateX(18px) } }
.cart-item.is-removing{ animation:cartItemOut .35s var(--ease) forwards; }
@keyframes cartItemOut{ to{ opacity:0; transform:translateX(28px); height:0; padding:0; margin:0; } }
.cart-item__thumb{
  width:58px; height:58px; border-radius:12px; overflow:hidden;
  background:radial-gradient(65% 65% at 50% 45%, rgba(240,169,59,.2), rgba(14,11,8,.6));
  border:1px solid var(--line-2);
}
.cart-item__thumb svg{ width:100%; height:100% }
.cart-item__name{ display:block; font-size:.92rem; font-weight:500; color:var(--text); line-height:1.3; }
.cart-item__meta{ display:block; font-size:.74rem; color:var(--text-mute); margin-top:3px; }
.cart-item__side{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.cart-item__price{ font-family:var(--ff-display); font-size:.98rem; color:var(--cream); }
.qty{
  display:inline-flex; align-items:center; gap:2px;
  border:1px solid var(--line); border-radius:999px; padding:2px;
  background:rgba(0,0,0,.3);
}
.qty button{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  color:var(--text-dim); transition:background .25s, color .25s;
}
.qty button:hover{ background:var(--saffron); color:var(--ink); }
.qty svg{ width:12px; height:12px; stroke-width:2.6; }
.qty span{ min-width:22px; text-align:center; font-size:.8rem; font-weight:600; color:var(--text); }

.cart-panel__foot{
  padding:20px var(--gutter) 28px; border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(14,11,8,0),rgba(14,11,8,.6));
  display:grid; gap:10px;
}
.cart-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:.88rem; }
.cart-row--muted{ color:var(--text-mute); font-size:.8rem; }
.cart-row--total{
  padding-top:12px; margin-top:2px; border-top:1px solid var(--line);
  font-size:1rem;
}
.cart-row--total strong{ font-family:var(--ff-display); font-size:1.5rem; color:var(--saffron); }
.cart-panel__foot.is-empty{ display:none; }

/* ============================================================
   AUTH MODAL
   ============================================================ */
.auth-card{
  position:absolute; top:50%; left:50%;
  width:min(880px,92vw); max-height:92svh; overflow:hidden;
  display:grid; grid-template-columns:.85fr 1fr;
  border-radius:var(--r-xl);
  background:linear-gradient(170deg,var(--ink-3),var(--ink-1));
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  opacity:0; transform:translate(-50%,-46%) scale(.95);
  transition:opacity .45s var(--ease-out), transform .55s var(--ease-out);
}
.modal.is-open .auth-card{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.auth-card__art{
  position:relative; padding:34px 30px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:
    radial-gradient(80% 70% at 50% 30%, rgba(240,169,59,.22), transparent 65%),
    linear-gradient(170deg,#5A1B10,#2A0F09);
  overflow:hidden;
}
.auth-card__art-inner{ position:absolute; inset:-6% -14% 22% -14%; opacity:.95; }
.auth-card__art-inner svg{ width:100%; height:100%; }
.auth-card__art-quote{
  position:relative; margin:0;
  font-family:var(--ff-display); font-size:1.18rem; font-style:italic; color:#FBEBD2; line-height:1.45;
}
.auth-card__art-quote span{
  display:block; margin-top:8px;
  font-family:var(--ff-body); font-style:normal; font-size:.74rem; color:rgba(251,235,210,.6);
  letter-spacing:.06em;
}

.auth-card__form{ padding:clamp(28px,3.4vw,44px); overflow-y:auto; }
.auth-card__form h3{ font-size:1.85rem; margin:.3em 0 1.1em; }
.auth-card__form form{ display:grid; gap:14px; }
.auth-card__switch{ margin:20px 0 6px; font-size:.85rem; color:var(--text-mute); text-align:center; }
.auth-card__switch button{ color:var(--saffron); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.auth-card__switch button:hover{ color:var(--saffron-lt); }
.auth-card__legal{ font-size:.7rem; color:var(--text-mute); text-align:center; margin:0; opacity:.7; }