/* Pardesi Dera — site styles.
   One design for the whole site, taken from the scroll-story home page:
   ivory "day" for the café, maroon-black "night" for the restaurant, Plus Jakarta Sans, saffron accent,
   pill buttons, a blurred header. Pages pick the night look with <body class="theme-night">.
   home.css adds only the scroll-story parts on top of this file. */

/* ================================================================ fonts (self-hosted: no extra trip to Google, and the text never waits) */
@font-face{font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/plus-jakarta-sans-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/plus-jakarta-sans-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:800; font-display:swap; src:url(../fonts/plus-jakarta-sans-latin-800-normal.woff2) format('woff2');}

/* ================================================================ tokens */
:root{
  /* palette */
  --ivory:#FFF8EE; --ivory-dim:#F6EADA; --ink:#1C1210; --ink-soft:#5C4A40;
  --night:#140A0C; --night-2:#24121A; --moon:#FBF3E4; --moon-soft:rgba(251,243,228,.78);
  --saffron:#D89A2B; --saffron-light:#F2C46E; --saffron-ink:#94570F;      /* saffron-ink: saffron text on ivory (AA) */
  --maroon:#6E1423; --maroon-dark:#3E0B14; --terracotta:#BE5B2E; --emerald:#1F5C43; --live:#3FBF7F; --danger:#B3261E;
  --line:rgba(28,18,16,.12); --line-on-dark:rgba(251,243,228,.16);
  /* type */
  --font-display:'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-urdu:'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif;
  /* shape + motion */
  --radius:18px; --radius-sm:14px; --ease:cubic-bezier(.2,.7,.2,1);
  --nav-h:72px;
  --gutter:max(20px, env(safe-area-inset-left,0px));
  /* the page's current look (day) — every component reads these */
  --bg:var(--ivory); --fg:var(--ink); --soft:var(--ink-soft); --ln:var(--line);
  --card:#FFFFFF; --chip:rgba(28,18,16,.06); --kicker:var(--saffron-ink);
}
.theme-night{
  --bg:var(--night); --fg:var(--moon); --soft:var(--moon-soft); --ln:var(--line-on-dark);
  --card:var(--night-2); --chip:rgba(251,243,228,.08); --kicker:var(--saffron-light);
}

/* ================================================================ base */
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 72px); -webkit-text-size-adjust:100%;}
body{margin:0; font-family:var(--font-body); font-size:16px; color:var(--fg); background:var(--bg); -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom,0px);}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:var(--font-display); font-weight:800; margin:0; letter-spacing:-.03em; line-height:1.08; text-wrap:balance;}
p{line-height:1.65; margin:0;}
button, input, select, textarea{font-family:var(--font-body);}
:focus-visible{outline:3px solid var(--saffron); outline-offset:3px;}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--ivory); padding:12px 18px; border-radius:999px; z-index:100; font-weight:700;}
.skip-link:focus{left:12px; top:12px;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
#main{overflow-x:clip;}

/* ================================================================ shared parts */
.container{max-width:1160px; margin:0 auto; padding-left:var(--gutter); padding-right:max(20px, env(safe-area-inset-right,0px));}
.container-narrow{max-width:720px;}
section{padding:96px 0;}
.section-tight{padding:80px 0;}
.bg-dim{background:var(--ivory-dim);}
.theme-night .bg-dim{background:var(--night-2);}
.bg-maroon{background:var(--night); color:var(--moon);}
.center{text-align:center;}
.muted{color:var(--soft);}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.grid-2.align-start{align-items:start;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.h2{font-size:clamp(30px, 4.4vw, 44px);}
.h2-sm{font-size:clamp(26px, 3.6vw, 36px); margin:10px 0 18px;}
.section-head{text-align:center; margin-bottom:48px;}
.section-head p{max-width:560px; margin:14px auto 0; color:var(--soft);}

/* kicker line above a heading (sentence case, not shouty capitals) */
.eyebrow{font-size:15px; font-weight:700; letter-spacing:0; color:var(--kicker);}
.eyebrow-light{color:var(--saffron-light);}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border-radius:999px;
  font-weight:700; font-size:16px; letter-spacing:0; text-transform:none; cursor:pointer; border:1.5px solid transparent; text-align:center;
  transition:transform .25s var(--ease), box-shadow .25s, background-color .2s, border-color .2s; -webkit-tap-highlight-color:transparent;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:scale(.98);}
.btn[disabled], .btn.is-loading{opacity:.6; cursor:not-allowed; transform:none;}
.btn-primary{background:var(--saffron); color:#24150A; box-shadow:0 10px 24px rgba(216,154,43,.28);}
.btn-primary:hover{box-shadow:0 14px 30px rgba(216,154,43,.38);}
.btn-ghost, .btn-outline-dark{background:var(--chip); color:var(--fg); border-color:transparent;}
.btn-outline{background:transparent; border-color:var(--line-on-dark); color:var(--moon);}
.btn-dark{background:var(--ink); color:var(--ivory);}
.theme-night .btn-dark{background:var(--moon); color:var(--ink);}
.btn-block{width:100%;}
.btn-sm{min-height:44px; padding:0 18px; font-size:14px;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}
.link-arrow{color:var(--kicker); font-weight:700; text-decoration:none; background:linear-gradient(var(--saffron),var(--saffron)) left 92% / 100% 2px no-repeat; padding-bottom:2px;}

/* live open / closed badge (state is never shown by colour alone: the text says it) */
.live-badge{display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:999px; font-size:13px; font-weight:600; background:var(--chip); color:var(--fg); white-space:nowrap;}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--saffron); flex-shrink:0;}
.is-open > .live-dot, .live-badge.is-open .live-dot{background:var(--live); box-shadow:0 0 0 4px rgba(63,191,127,.2);}
.svc-badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; background:var(--chip); color:var(--soft); white-space:nowrap; vertical-align:middle;}
.svc-badge.is-open{background:rgba(63,191,127,.16); color:#1F8A56;}
.theme-night .svc-badge.is-open{color:#7FDCAB;}

/* photos and placeholders */
.photo{margin:0; border-radius:var(--radius); overflow:hidden; background:var(--ivory-dim); width:100%;}
.photo img{width:100%; height:100%; object-fit:cover;}
.img-ph{border-radius:var(--radius); background:radial-gradient(circle at 70% 30%, rgba(255,226,176,.9), transparent 45%), linear-gradient(150deg, #F3D7AE, #C98A4C 70%, #8A4B24);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; color:rgba(255,255,255,.88); text-align:center; padding:18px; width:100%;}
.img-ph svg{display:none;}
.img-caption{font-size:12px; font-weight:600;}
.divider-motif{display:flex; align-items:center; margin:14px 0 22px;}
.divider-motif.center{justify-content:center;}

/* ================================================================ header */
.nav-bar{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:background-color .6s var(--ease);}
.nav-bar::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ln); opacity:.6;}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; height:var(--nav-h); max-width:1160px; margin:0 auto;
  padding-left:var(--gutter); padding-right:max(20px, env(safe-area-inset-right,0px));}
.logo{display:flex; align-items:baseline; gap:10px; font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:-.02em; white-space:nowrap;}
.logo-urdu{font-family:var(--font-urdu); font-size:15px; font-weight:400; color:var(--saffron); line-height:1;}
.logo-en{color:var(--fg);}
.nav-links{display:flex; align-items:center; gap:30px; font-size:15px; font-weight:600;}
.nav-links a:not(.btn){padding:6px 0; color:var(--soft); background:linear-gradient(var(--saffron),var(--saffron)) left bottom / 0 2px no-repeat; transition:color .2s, background-size .3s var(--ease);}
.nav-links a:not(.btn):hover, .nav-links a.active{color:var(--fg); background-size:100% 2px;}
.nav-actions{display:flex; align-items:center; gap:10px;}
.nav-cta{min-height:46px; padding:0 22px; font-size:15px;}
.nav-toggle{display:none; width:46px; height:46px; border:1.5px solid var(--ln); background:transparent; border-radius:14px; align-items:center; justify-content:center; cursor:pointer; color:var(--fg);}
.nav-mobile-cta{display:none;}

/* flash messages */
.flash{padding:14px 0; font-size:15px; font-weight:600;}
.flash-success{background:#E2F2E8; color:#17583A;}
.flash-error{background:#FBE4E1; color:var(--danger);}
.flash-info{background:var(--ivory-dim); color:var(--ink-soft);}

/* ================================================================ footer (always night) */
.site-footer{background:var(--night); color:var(--moon); padding:72px 0 32px; position:relative; z-index:2;}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:56px; padding-bottom:44px; border-bottom:1px solid var(--line-on-dark);}
.footer-grid .eyebrow{margin-bottom:14px; color:var(--saffron-light);}
.logo-footer{color:var(--moon); margin-bottom:14px; font-size:22px;}
.logo-footer .logo-urdu{color:var(--saffron-light);}
.footer-tagline{color:var(--moon-soft); max-width:300px;}
.footer-address{color:var(--moon); margin-bottom:14px; line-height:1.5; font-weight:600;}
.footer-muted{color:var(--moon-soft); font-size:14px; margin-top:8px;}
.footer-muted a{text-decoration:underline; text-decoration-color:var(--saffron); text-underline-offset:3px;}
.footer-hours{margin:0; font-size:14px; color:var(--moon-soft); font-variant-numeric:tabular-nums;}
.footer-hours div{display:flex; gap:12px; justify-content:space-between; max-width:280px; padding:2px 0;}
.footer-hours dt{font-weight:600;} .footer-hours dd{margin:0; text-align:right;}
.footer-hours-wrap{display:grid; gap:14px;}
.site-footer .svc-hours-title{color:var(--moon); font-weight:700; font-size:14px; margin-bottom:4px;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:13px; color:rgba(251,243,228,.55); flex-wrap:wrap; gap:12px;}
.social-row{display:flex; gap:10px; margin-top:20px;}
.social-icon{width:44px; height:44px; border:1.5px solid var(--line-on-dark); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--moon); transition:border-color .2s, color .2s;}
.social-icon:hover{border-color:var(--saffron-light); color:var(--saffron-light);}
.footer-links a{display:block; padding:6px 0; font-size:15px; color:var(--moon-soft);}
.footer-links a:hover{color:var(--saffron-light);}
.footer-legal a{color:rgba(251,243,228,.75); text-decoration:underline; text-underline-offset:3px;}
.footer-legal a:hover{color:var(--saffron-light);}

/* ================================================================ forms (shared) */
.field{margin-bottom:18px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
label, .label{font-size:14px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--fg); display:block; margin-bottom:7px;}
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=search], select, textarea{
  font-size:16px; min-height:52px; padding:13px 15px; border:1.5px solid var(--ln); border-radius:var(--radius-sm); background:var(--card); color:var(--fg); width:100%;
  transition:border-color .2s, box-shadow .2s;}
textarea{min-height:104px; resize:vertical; line-height:1.5;}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--saffron); box-shadow:0 0 0 4px rgba(216,154,43,.22);}
input::placeholder, textarea::placeholder{color:var(--soft); opacity:.75;}
.field-error{display:block; margin-top:6px; font-size:14px; font-weight:600; color:var(--danger);}
.has-error input, .has-error select, .has-error textarea{border-color:var(--danger);}
.check-line{display:flex; gap:10px; align-items:flex-start; margin:-4px 0 20px; font-size:15px; cursor:pointer;}
.check-line input{width:20px; height:20px; margin-top:2px; accent-color:var(--saffron-ink); flex-shrink:0;}
.check-line small{color:var(--soft);}
.hint{font-size:13px; color:var(--soft); margin-top:6px;}
.form-errors{border-radius:var(--radius-sm); background:#FBE4E1; color:var(--danger); padding:16px 20px; margin-bottom:24px; font-size:15px; font-weight:600;}
.form-errors ul{margin:8px 0 0; padding-left:18px; font-weight:500;}
.hp{position:absolute; left:-9999px;}
.link-back{display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:15px; font-weight:700; color:var(--kicker); margin-bottom:16px;}

/* choice cards (checkout toggles, payment options) */
.fulfillment-toggle{display:flex; gap:10px; margin:20px 0 28px;}
.toggle-btn{flex:1; position:relative;}
.toggle-btn input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer;}
.toggle-btn span{display:block; min-height:56px; padding:14px 16px; border:1.5px solid var(--ln); background:var(--card); border-radius:var(--radius-sm); font-weight:700; font-size:16px; text-align:left;}
.toggle-btn input:checked + span{border-color:var(--saffron); box-shadow:0 0 0 3px rgba(216,154,43,.22);}
.toggle-btn input:focus-visible + span{outline:3px solid var(--saffron); outline-offset:2px;}
.toggle-btn small{display:block; font-size:13px; font-weight:500; margin-top:2px; color:var(--soft);}
.pay-options{display:grid; gap:10px; margin-bottom:24px;}
.pay-option{display:flex; gap:14px; align-items:flex-start; border:1.5px solid var(--ln); background:var(--card); border-radius:var(--radius-sm); padding:16px 18px; cursor:pointer;}
.pay-option input{margin-top:3px; accent-color:var(--saffron-ink); width:20px; height:20px;}
.pay-option strong{display:block; font-size:16px;}
.pay-option span{font-size:14px; color:var(--soft);}
.pay-option:has(input:checked){border-color:var(--saffron); box-shadow:0 0 0 3px rgba(216,154,43,.22);}
.summary-card{border-radius:var(--radius); background:var(--card); border:1px solid var(--ln); padding:20px 22px; margin-bottom:28px;}
.summary-line{display:flex; justify-content:space-between; gap:16px; padding:8px 0; font-size:15px; font-variant-numeric:tabular-nums;}
.summary-line small{display:block; color:var(--soft); font-size:13px;}
.summary-total{display:flex; justify-content:space-between; padding-top:14px; margin-top:6px; border-top:1px solid var(--ln); font-weight:800; font-size:17px; font-variant-numeric:tabular-nums;}
.secure-note{display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; color:var(--soft); margin-top:12px;}
.consent-note{font-size:13px; color:var(--soft); text-align:center; margin-top:10px;}
.consent-note a, .legal a{color:var(--kicker); font-weight:700; text-decoration:underline; text-underline-offset:3px;}
.lookup-list{list-style:none; padding:0; margin:0 0 24px; display:grid; gap:10px;}
.lookup-list li{border-radius:var(--radius-sm); background:var(--card); border:1px solid var(--ln);}
.lookup-list a{display:flex; justify-content:space-between; gap:12px; padding:16px 18px; align-items:center; min-height:56px;}

/* ================================================================ pages not redesigned yet (kept tidy) */
.hero{position:relative; padding:0; overflow:hidden; background:var(--night); color:var(--moon);}
.hero-urdu{font-family:var(--font-urdu); font-size:30px; color:var(--saffron-light); line-height:1.6;}
.page-hero{background:var(--night); color:var(--moon); text-align:center; padding:88px 0 80px;}
.page-hero h1{font-size:clamp(36px, 6vw, 56px); margin:14px 0;}
.page-hero p{max-width:560px; margin:0 auto; color:var(--moon-soft);}
.page-hero .hero-urdu{font-size:28px; margin:12px 0;}
.feature{display:flex; flex-direction:column; gap:12px; align-items:flex-start;}
.feature svg{color:var(--saffron-light);}
.feature h3{font-size:18px; color:var(--moon);}
.feature p{font-size:15px; color:var(--moon-soft);}
.meaning-card{border-radius:var(--radius); background:var(--card); border:1px solid var(--ln); padding:30px; text-align:center;}
.meaning-word{font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--fg); margin-bottom:8px;}
.legal{max-width:720px;}
.legal h2{font-size:24px; margin:40px 0 12px;}
.legal p{margin-bottom:14px;}
.legal ul{margin:0 0 16px; padding-left:22px; line-height:1.7;}
.legal li{margin-bottom:6px;}
.legal-contact{background:var(--ivory-dim); border-radius:var(--radius-sm); padding:16px 20px;}
.note{max-width:640px; margin:0 auto; text-align:center; color:var(--soft); font-size:15px;}
.confirm-card{border-radius:24px; background:var(--card); border:1px solid var(--ln); padding:44px; text-align:center; max-width:640px; margin:0 auto;}
.confirm-card h1, .confirm-card h2{font-size:30px; margin:12px 0 14px;}
.order-number{font-weight:800; font-size:24px; letter-spacing:-.01em; color:var(--fg);}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:28px 0; list-style:none; padding:0;}
.steps li{padding-top:12px; border-top:4px solid var(--ln); font-size:13px; font-weight:700; color:var(--soft);}
.steps li.done{border-color:var(--saffron); color:var(--fg);}
.order-lines{text-align:left; margin-top:24px;}
.status-pill{display:inline-block; padding:6px 14px; border-radius:999px; background:var(--ink); color:var(--ivory); font-size:13px; font-weight:700;}
.status-pill.ok{background:#1F8A56; color:#fff;}
.spinner{width:36px; height:36px; border:3px solid var(--ln); border-top-color:var(--saffron); border-radius:50%; margin:0 auto 18px; animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.info-row{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--ln);}
.info-row:last-child{border-bottom:none;}
.info-row svg{color:var(--saffron); flex-shrink:0; margin-top:2px;}
.info-label{font-size:14px; font-weight:700; color:var(--soft); margin-bottom:4px;}
.info-row dl{margin:0;} .info-row dl div{display:flex; gap:16px;} .info-row dt{min-width:96px; font-weight:600;} .info-row dd{margin:0;}
.info-hours{margin:0; font-size:15px; font-variant-numeric:tabular-nums;}
.info-hours div{display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid var(--ln);}
.info-hours dt{font-weight:600; white-space:nowrap;} .info-hours dd{margin:0; text-align:right; white-space:nowrap;}
.info-hours-wrap{display:grid; gap:18px;}
.svc-hours-title{font-size:15px; font-weight:800; color:var(--fg); margin-bottom:6px;}
.map-frame{border:0; border-radius:var(--radius); width:100%; aspect-ratio:4/3; display:block;}
.thanks{border-radius:var(--radius); background:var(--card); border:1px solid var(--ln); padding:30px; text-align:center;}

/* ================================================================ menu page */
.m-top{padding:34px 0 0;}
.m-title{font-size:clamp(38px, 9vw, 64px); letter-spacing:-.045em; line-height:1;}
.m-lede{margin:10px 0 0; color:var(--soft); font-size:17px; max-width:44ch;}
.m-switch{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; margin:22px 0 0; border-radius:var(--radius); background:var(--chip); max-width:560px;}
.m-switch a{display:flex; flex-direction:column; justify-content:center; gap:3px; min-height:60px; padding:10px 14px; border-radius:var(--radius-sm); color:var(--soft); transition:background-color .3s, box-shadow .3s, color .3s;}
.m-switch a:hover{color:var(--fg);}
.m-switch b{font-size:17px; letter-spacing:-.01em; color:var(--fg);}
.m-switch .m-st{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600;}
.m-switch a[aria-current="page"]{background:var(--card); color:var(--soft); box-shadow:0 4px 16px rgba(0,0,0,.08);}
.theme-night .m-switch a[aria-current="page"]{background:rgba(251,243,228,.14); box-shadow:inset 0 0 0 1px rgba(251,243,228,.12);}
.m-note{display:flex; align-items:flex-start; gap:10px; margin:16px 0 0; padding:12px 14px; border-radius:var(--radius-sm); background:var(--chip); font-size:14px; line-height:1.45; max-width:560px;}
.m-note .live-dot{margin-top:5px;}
.m-note.is-open .live-dot{background:var(--live); box-shadow:0 0 0 4px rgba(63,191,127,.2);}
.m-note.is-closed{background:rgba(216,154,43,.16);}
.m-key{margin:10px 0 0; font-size:13px; color:var(--soft); display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.m-key span{display:inline-flex; align-items:center; gap:6px;}

.m-cats{position:sticky; top:var(--nav-h); z-index:40; margin-top:22px; background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);}
.m-cats-inner{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; max-width:1160px; margin:0 auto; padding:12px max(20px, env(safe-area-inset-right,0px)) 12px var(--gutter); scroll-padding-inline:20px;}
.m-cats-inner::-webkit-scrollbar{display:none;}
.cat-pill{flex:none; display:inline-flex; align-items:center; min-height:44px; padding:0 17px; border-radius:999px; font-size:15px; font-weight:700; background:var(--chip); color:var(--soft); white-space:nowrap; transition:background-color .25s, color .25s;}
.cat-pill:hover{color:var(--fg);}
.cat-pill.active{background:var(--fg); color:var(--bg);}

.menu-body{padding-bottom:140px;}
.menu-section{padding:30px 0 6px;}
.menu-section h2{font-size:clamp(24px, 5vw, 32px); letter-spacing:-.03em; margin:0 0 4px;}
.menu-grid{display:grid; grid-template-columns:1fr; gap:0 48px;}
.m-dish{display:grid; grid-template-columns:minmax(0,1fr) 104px; gap:16px; padding:18px 0; border-bottom:1px solid var(--ln); align-items:start;}
.m-dish h3{font-size:18px; line-height:1.25; letter-spacing:-.015em; font-weight:700; display:flex; align-items:center; flex-wrap:wrap; gap:6px;}
.m-desc{margin:5px 0 0; font-size:14.5px; line-height:1.45; color:var(--soft); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.m-meta{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:10px;}
.price{font-weight:700; font-size:16px; white-space:nowrap; font-variant-numeric:tabular-nums;}
.m-tag{display:inline-flex; align-items:center; min-height:22px; padding:0 9px; border-radius:999px; font-size:12px; font-weight:700; background:rgba(216,154,43,.18); color:var(--kicker);}
.m-side{position:relative; width:104px; height:104px;}
.m-thumb{width:104px; height:104px; border-radius:var(--radius); overflow:hidden; background:var(--ivory-dim);}
.m-thumb img{width:100%; height:100%; object-fit:cover;}
.m-thumb-ph{display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg, rgba(216,154,43,.22), rgba(216,154,43,.06)); color:var(--kicker);}
.theme-night .m-thumb-ph{background:linear-gradient(150deg, rgba(242,196,110,.18), rgba(242,196,110,.04));}
.m-side.no-photo{height:auto; min-height:48px;}
.m-side.no-photo .m-thumb{display:none;}

/* + / − control on the photo: a round + that grows into "− 2 +" */
.stepper{display:flex; align-items:center; gap:2px; position:absolute; right:-6px; bottom:-8px; padding:2px; border-radius:999px; background:var(--bg); box-shadow:0 6px 16px rgba(0,0,0,.14);}
.m-side.no-photo .stepper{position:static; justify-content:flex-end; box-shadow:none; background:none; padding:0; margin-left:auto; width:max-content;}
.step-btn{width:44px; height:44px; border-radius:50%; border:0; background:var(--chip); color:var(--fg); font-size:22px; font-weight:600; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  transition:transform .15s var(--ease), background-color .2s; -webkit-tap-highlight-color:transparent;}
.step-btn:active{transform:scale(.9);}
.step-btn.add{background:var(--saffron); color:#24150A;}
.step-qty{min-width:22px; text-align:center; font-weight:800; font-size:16px; font-variant-numeric:tabular-nums;}
.step-btn.add.is-added{background:var(--live); color:#fff;}
.empty-menu{padding:80px 0; text-align:center; color:var(--soft);}

/* veg + chilli marks */
.tag{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; font-size:10px; font-weight:800; flex-shrink:0; font-family:var(--font-body);}
.tag-veg{border:1.5px solid #2E8B57; color:#2E8B57;}
.theme-night .tag-veg{border-color:#7FDCAB; color:#7FDCAB;}
.tag-spicy{color:var(--terracotta); width:14px; margin-right:-4px;}
.theme-night .tag-spicy{color:#F08A5D;}
.spice-hint{font-size:13px; color:var(--kicker); margin-top:4px; font-weight:700;}

/* floating cart pill (menu page) */
.cart-bar{position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; justify-content:center; pointer-events:none;
  padding:0 max(16px, env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px));}
.cart-bar:not([hidden]){animation:cart-rise .45s var(--ease);}
@keyframes cart-rise{from{transform:translateY(130%);}}
.cart-pill{pointer-events:auto; display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; max-width:520px; min-height:60px; padding:6px 6px 6px 22px; border:0; border-radius:999px; cursor:pointer;
  background:var(--ink); color:var(--ivory); font:700 16px var(--font-body); box-shadow:0 16px 36px rgba(0,0,0,.3); text-align:left;}
.theme-night .cart-pill{background:var(--moon); color:var(--ink);}
.cart-pill-cta{flex:none; display:inline-flex; align-items:center; min-height:48px; padding:0 20px; border-radius:999px; background:var(--saffron); color:#24150A; font-size:15px;}

/* ================================================================ cart drawer + spice sheet (menu and home) */
.drawer-overlay{position:fixed; inset:0; z-index:80; display:flex; justify-content:flex-end; color:var(--ink);}
.drawer-overlay[hidden], .cart-bar[hidden]{display:none;}
.drawer-backdrop{position:absolute; inset:0; background:rgba(14,7,9,.55); animation:fade-in .25s ease;}
.drawer-panel{position:relative; width:440px; max-width:100%; height:100%; background:var(--ivory); display:flex; flex-direction:column; box-shadow:-16px 0 40px rgba(0,0,0,.2);
  border-radius:24px 0 0 24px; animation:drawer-in .35s var(--ease);}
@keyframes drawer-in{from{transform:translateX(40px); opacity:.4;}}
@keyframes fade-in{from{opacity:0;}}
.drawer-header{display:flex; align-items:center; justify-content:space-between; padding:20px 22px 16px 26px; padding-top:max(20px, env(safe-area-inset-top,0px));}
.drawer-header h2{font-size:26px; letter-spacing:-.03em;}
.drawer-body{flex:1; overflow-y:auto; padding:0 26px 12px;}
.drawer-footer{padding:18px 22px calc(22px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line);}
.drawer-subtotal{display:flex; justify-content:space-between; font-weight:800; margin-bottom:14px; font-size:18px; font-variant-numeric:tabular-nums;}
.drawer-line{padding:16px 0; border-bottom:1px solid var(--line);}
.drawer-line-row{display:flex; justify-content:space-between; align-items:center; gap:12px;}
.drawer-line-name{font-weight:700; font-size:16px; letter-spacing:-.01em;}
.drawer-line-meta{font-size:13px; color:var(--ink-soft); margin-top:2px; font-variant-numeric:tabular-nums;}
.drawer-line-right{display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
.drawer-line-right .stepper{position:static; box-shadow:none; background:rgba(28,18,16,.05);}
.drawer-line-right .step-btn{width:40px; height:40px; font-size:20px; background:transparent; color:var(--ink);}
.drawer-line-right .step-btn.add{background:var(--saffron); color:#24150A;}
.drawer-line-right .step-qty{color:var(--ink);}
.drawer-line-total{font-size:14px; font-weight:700; color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.drawer-line-note{margin-top:10px; font-size:15px !important; min-height:44px !important; padding:10px 12px !important; background:#fff !important; color:var(--ink) !important; border-color:var(--line) !important;}
.link-note{background:none; border:none; padding:0; min-height:36px; margin-top:2px; font-size:14px; font-weight:700; color:var(--saffron-ink); cursor:pointer;}
.icon-btn{width:46px; height:46px; border-radius:50%; border:0; background:rgba(28,18,16,.06); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink);}
.empty-cart{text-align:center; padding:48px 0; color:var(--ink-soft);}
body.drawer-open{overflow:hidden;}

.spice-overlay{align-items:flex-end; justify-content:center;}
.spice-dialog{position:relative; width:100%; max-width:520px; background:var(--ivory); color:var(--ink); border-radius:26px 26px 0 0; padding:24px 20px calc(18px + env(safe-area-inset-bottom,0px)); animation:sheet-up .35s var(--ease);
  box-shadow:0 -16px 40px rgba(0,0,0,.2);}
@keyframes sheet-up{from{transform:translateY(60%);}}
.spice-dialog .eyebrow{color:var(--saffron-ink);}
.spice-dialog h2{font-size:24px; margin:4px 0 18px; letter-spacing:-.03em;}
.spice-choices{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:8px;}
.spice-choice{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:72px; padding:10px 6px; border:1.5px solid var(--line); background:#fff; border-radius:var(--radius-sm); font-weight:800; font-size:16px; cursor:pointer; color:var(--ink);}
.spice-choice small{font-size:12px; font-weight:500; color:var(--ink-soft);}
.spice-choice:hover, .spice-choice:focus-visible{border-color:var(--saffron);}
.spice-mild{--sp:#2E8B57;} .spice-medium{--sp:#B7791F;} .spice-hot{--sp:var(--danger);}
.spice-choice::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--sp, var(--saffron)); margin-bottom:4px;}
.spice-dialog .link-note{display:block; width:100%; min-height:48px; margin:0; color:var(--ink-soft); font-size:15px;}
.spice-tag{display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:700; vertical-align:middle; background:rgba(28,18,16,.07);}

/* ================================================================ our story (chapters) */
.st-intro{padding:72px 0 64px;}
.st-title{font-size:clamp(40px, 10vw, 80px); line-height:.98; letter-spacing:-.045em; max-width:12ch; margin-top:8px;}
.st-lede{margin-top:16px; font-size:18px; color:var(--soft); max-width:40ch;}
.st-cue{display:flex; align-items:center; gap:10px; margin-top:34px; font-size:13px; font-weight:700; color:var(--soft);}
.st-cue span{display:block; width:2px; height:30px; background:linear-gradient(var(--saffron), transparent); border-radius:2px;}
.chap{position:relative; padding:0; background:var(--night); color:var(--moon);}
.chap-on .chap{height:170vh; height:170svh;}
.chap-pin{position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; padding:110px 0 64px;}
.chap-on .chap-pin{position:sticky; top:0; height:100vh; height:100svh;}
.chap-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:none;}
.chap-on .chap.no-pin{height:auto;}
.chap-on .chap.no-pin .chap-pin{position:relative; height:auto; min-height:100vh; min-height:100svh;}
.chap-on .chap-photo{transform:scale(calc(1.1 - var(--p,0) * .1));}
.chap-on .chap.is-live .chap-photo{will-change:transform;}
.chap-pin::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,10,12,.25) 0%, rgba(20,10,12,.2) 30%, rgba(20,10,12,.82) 68%, rgba(20,10,12,.94) 100%);}
.chap-ph-dawn{background:radial-gradient(circle at 72% 26%, #FFE2B0, transparent 42%), linear-gradient(160deg, #F3D7AE, #C98A4C 55%, #6B3A1E);}
.chap-ph-road{background:radial-gradient(circle at 25% 30%, rgba(255,214,140,.7), transparent 40%), linear-gradient(160deg, #D9A066, #8E4A2A 55%, #3E0B14);}
.chap-ph-fire{background:radial-gradient(circle at 30% 72%, #FF9C4A, transparent 38%), radial-gradient(circle at 70% 60%, rgba(216,154,43,.6), transparent 35%), linear-gradient(160deg, #5A1220, #2B0C12 65%, #140A0C);}
.chap-ph-night{background:radial-gradient(circle at 75% 25%, rgba(251,243,228,.35), transparent 22%), radial-gradient(circle at 20% 70%, rgba(216,154,43,.35), transparent 35%), linear-gradient(160deg, #3E0B14, #1E0A10 60%, #140A0C);}
.chap-t{position:relative; z-index:2; width:100%; max-width:1160px;}
.chap-t .eyebrow{color:var(--saffron-light);}
.chap-on .chap-t > *{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.chap-on .chap.in .chap-t > *{opacity:1; transform:none;}
.chap-on .chap.in .chap-t > :nth-child(2){transition-delay:.08s;} .chap-on .chap.in .chap-t > :nth-child(3){transition-delay:.16s;}
.chap-on .chap.in .chap-t > :nth-child(4){transition-delay:.24s;} .chap-on .chap.in .chap-t > :nth-child(5){transition-delay:.32s;}
.chap-big{font-size:clamp(30px, 7.4vw, 60px); line-height:1.04; letter-spacing:-.04em; margin:6px 0 14px; max-width:16ch; color:var(--moon);}
.chap-urdu{font-family:var(--font-urdu); font-size:clamp(34px, 8vw, 56px); line-height:1.7; color:var(--saffron-light); margin:0 0 -6px;}
.chap-p{font-size:16px; line-height:1.6; color:var(--moon-soft); max-width:58ch;}
.chap-p + .chap-p{margin-top:10px;}
.chap-words{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 14px; max-width:720px;}
.chap-words div{padding:14px 16px; border-radius:var(--radius-sm); background:rgba(251,243,228,.09); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);}
.chap-words dt{font-weight:800; font-size:18px; letter-spacing:-.02em;}
.chap-words dd{margin:4px 0 0; font-size:14px; line-height:1.45; color:var(--moon-soft);}
.st-end{padding:88px 0 96px; text-align:center;}
.st-end-title{font-size:clamp(32px, 7vw, 56px); letter-spacing:-.04em; margin:8px 0 24px;}
.st-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

/* ================================================================ find us */
.fu-top{padding:40px 0 56px;}
.fu-grid{display:grid; grid-template-columns:1fr; gap:28px; align-items:start;}
.fu-title{margin:16px 0 0; display:flex; flex-direction:column; gap:8px;}
.fu-title .eyebrow{font-size:16px; letter-spacing:0;}
.fu-addr{font-size:clamp(34px, 8.6vw, 60px); line-height:1.02; letter-spacing:-.045em; font-weight:800;}
.fu-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;}
.fu-today{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:10px;}
.fu-svc{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-radius:var(--radius); background:var(--card); border:1px solid var(--ln);}
.fu-svc b{display:block; font-size:18px; letter-spacing:-.015em;}
.fu-svc div span{font-size:14px; color:var(--soft); font-variant-numeric:tabular-nums;}
.fu-svc-restaurant{background:var(--night); color:var(--moon); border-color:transparent;}
.fu-svc-restaurant div span{color:var(--moon-soft);}
.fu-badge{flex:none; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; font-size:13px; font-weight:700; background:rgba(216,154,43,.16); color:var(--saffron-ink);}
.fu-svc-restaurant .fu-badge{background:rgba(242,196,110,.16); color:var(--saffron-light);}
.fu-badge.is-open{background:rgba(63,191,127,.16); color:#17703F;}
.fu-svc-restaurant .fu-badge.is-open{color:#7FDCAB;}
.fu-map{aspect-ratio:4/3; background:var(--ivory-dim);}
.fu-week-sec{padding:0 0 64px;}
.fu-h2{font-size:clamp(26px, 5vw, 36px); letter-spacing:-.035em; margin:4px 0 14px;}
.fu-week-wrap{overflow-x:auto;}
.fu-week{width:100%; border-collapse:collapse; font-size:15px; font-variant-numeric:tabular-nums;}
.fu-week th, .fu-week td{text-align:left; padding:13px 10px 13px 0; border-top:1px solid var(--ln); white-space:nowrap;}
.fu-week thead th{border-top:0; font-size:13px; color:var(--soft); font-weight:700; padding-top:0;}
.fu-week tbody th{font-weight:700;}
.fu-week tbody th small{font-weight:500; color:var(--soft); font-size:13px; margin-left:4px;}
.fu-week td.is-closed{color:var(--soft);}
.fu-week tr.is-today th, .fu-week tr.is-today td{background:rgba(216,154,43,.12);}
.fu-week tr.is-today th{border-radius:12px 0 0 12px; padding-left:12px;}
.fu-week tr.is-today td:last-child{border-radius:0 12px 12px 0;}
.fu-week tr.is-today + tr th, .fu-week tr.is-today + tr td{border-top-color:transparent;}
.fu-contact{padding:64px 0 88px; background:var(--ivory-dim);}
.fu-contact-grid{display:grid; grid-template-columns:1fr; gap:28px;}
.fu-links{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:2px;}
.fu-links li{display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--ln); font-size:15px;}
.fu-links span{color:var(--soft);}
.fu-links a{font-weight:700; text-decoration:underline; text-decoration-color:var(--saffron); text-underline-offset:4px; overflow-wrap:anywhere; text-align:right;}
.fu-form{background:var(--card); border-radius:24px; padding:22px 20px; box-shadow:0 10px 30px rgba(60,30,10,.06);}

/* ================================================================ checkout */
.co{padding:28px 0 72px;}
.co-title{font-size:clamp(36px, 8vw, 56px); letter-spacing:-.045em; line-height:1;}
.co-progress{display:flex; gap:6px; margin:16px 0 22px; max-width:420px;}
.co-progress span{flex:1; height:4px; border-radius:4px; background:var(--chip);}
.co-progress span.on{background:var(--saffron);}
.co-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:6px;}
.co-sum{border-radius:var(--radius); background:var(--card); border:1px solid var(--ln); padding:0 18px; align-self:start;}
.co-sum summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:58px; font-weight:800; font-size:16px; cursor:pointer;}
.co-sum summary::-webkit-details-marker{display:none;}
.co-sum-toggle{width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin:-4px 4px 0 0; transition:transform .25s var(--ease);}
.co-sum[open] .co-sum-toggle{transform:rotate(-135deg); margin-top:4px;}
.co-sum-body{padding:0 0 16px; border-top:1px solid var(--ln);}
.co-sum-body .summary-line:first-child{padding-top:14px;}
.co-sub{border-top:1px solid var(--ln); margin-top:6px; padding-top:12px !important;}
.co-edit{display:inline-flex; align-items:center; min-height:44px; margin-top:6px; font-weight:700; font-size:14px; color:var(--kicker);}
.co-form{min-width:0;}
.co-step{border:0; margin:0; padding:22px 0 6px; min-width:0;}
.co-step legend{display:flex; align-items:center; gap:10px; padding:0; margin-bottom:14px; font-size:21px; font-weight:800; letter-spacing:-.02em;}
.co-num{display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--fg); color:var(--bg); font-size:14px;}
.co-step .fulfillment-toggle{margin:0 0 18px;}
.co-pickup{margin:0 0 16px; color:var(--soft); font-size:15px;}
.co-when .label{margin-bottom:10px;}
.co-when input{position:absolute; opacity:0; width:1px; height:1px;}
.co-asap{display:block; position:relative; margin-bottom:12px; cursor:pointer;}
.co-asap span{display:block; min-height:60px; padding:12px 16px; border:1.5px solid var(--ln); border-radius:var(--radius-sm); background:var(--card);}
.co-asap b{display:block; font-size:16px;}
.co-asap small{font-size:13px; color:var(--soft);}
.co-slot-day{margin:4px 0 8px; font-size:13px; font-weight:700; color:var(--soft);}
.co-slots{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 2px 8px; margin:0 -2px 4px;}
.co-slots::-webkit-scrollbar{display:none;}
.co-slot{position:relative; flex:none; cursor:pointer;}
.co-slot span{display:inline-flex; align-items:center; min-height:48px; padding:0 16px; border:1.5px solid var(--ln); border-radius:999px; background:var(--card); font-weight:700; font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap;}
.co-asap input:checked + span{border-color:var(--saffron); box-shadow:0 0 0 3px rgba(216,154,43,.22);}
.co-slot input:checked + span{background:var(--fg); color:var(--bg); border-color:var(--fg);}
.co-when input:focus-visible + span{outline:3px solid var(--saffron); outline-offset:2px;}
.co-when.has-error .co-asap span, .co-when.has-error .co-slot span{border-color:var(--danger);}
.co-paybar{position:sticky; bottom:0; z-index:20; margin:18px calc(-1 * var(--gutter)) 0; padding:12px var(--gutter) calc(14px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--ln);}
.co-paybar .btn{min-height:56px; font-size:17px;}
.co-paybar .secure-note{margin-top:8px;}
.co-closed{border-radius:var(--radius); background:var(--card); border:1px solid var(--ln); padding:24px; display:grid; gap:16px; justify-items:start; max-width:560px;}
.co-closed p{font-size:17px; font-weight:600;}

/* ================================================================ track order (night) */
.tr{padding:40px 0 80px;}
.tr-narrow{max-width:640px;}
.tr-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:32px; align-items:start;}
.tr-thanks{margin:10px 0 0; font-size:17px; font-weight:700; color:var(--moon);}
.tr-status{margin:8px 0 10px; font-size:clamp(36px, 9vw, 60px); line-height:1; letter-spacing:-.045em;}
.tr-status.is-ready{color:var(--saffron-light);}
.tr-sub{font-size:16px; color:var(--soft); max-width:46ch;}
.tr-sub b{color:var(--fg);}
.tr-steps{list-style:none; margin:28px 0 0; padding:0; display:grid;}
.tr-steps li{position:relative; display:grid; grid-template-columns:32px 1fr; gap:14px; padding-bottom:22px;}
.tr-steps li::before{content:""; position:absolute; left:15px; top:32px; bottom:0; width:2px; background:var(--ln);}
.tr-steps li:last-child{padding-bottom:0;} .tr-steps li:last-child::before{display:none;}
.tr-steps li.done::before{background:var(--saffron);}
.tr-mk{position:relative; z-index:1; width:32px; height:32px; border-radius:50%; border:2px solid var(--ln); background:var(--bg); display:grid; place-items:center;}
.tr-steps li.done .tr-mk{background:var(--saffron); border-color:var(--saffron);}
.tr-steps li.done .tr-mk::after{content:""; width:12px; height:7px; border-left:2.5px solid #24150A; border-bottom:2.5px solid #24150A; transform:translateY(-2px) rotate(-45deg);}
.tr-steps li.cur .tr-mk{border-color:var(--saffron); box-shadow:0 0 0 6px rgba(216,154,43,.18);}
.tr-steps li.cur .tr-mk::after{content:""; width:12px; height:12px; border-radius:50%; background:var(--saffron); animation:tr-pulse 1.6s ease-in-out infinite;}
@keyframes tr-pulse{50%{transform:scale(.5); opacity:.5;}}
.tr-steps b{display:block; font-size:17px; padding-top:4px;}
.tr-steps li:not(.done):not(.cur) b{color:var(--soft);}
.tr-steps small{font-size:14px; color:var(--soft);}
.tr-live{display:flex; align-items:center; gap:10px; margin-top:22px; font-size:14px; color:var(--soft);}
.tr-live .live-dot{background:var(--live); box-shadow:0 0 0 4px rgba(63,191,127,.2);}
.tr-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;}
.tr-card{border-radius:24px; background:var(--card); padding:22px 20px;}
.tr-card h2{font-size:20px; margin-bottom:8px;}
.tr-card .summary-line{border-top:1px solid var(--ln);}
.tr-card .summary-line:first-of-type{border-top:0;}
.tr-note{margin-top:12px; font-size:14px; color:var(--soft);}
.tr-form{margin-top:26px;}
.page-track .lookup-list li{background:var(--card);}
.page-track .status-pill{background:rgba(251,243,228,.12); color:var(--moon);}
.page-track .status-pill.ok{background:#1F8A56; color:#fff;}
.page-track .form-errors{background:rgba(179,38,30,.18); color:#FFB4AB; margin-top:20px;}
.page-track .field-error{color:#FFB4AB;}
.page-track .has-error input{border-color:#FFB4AB;}
.page-track .muted{color:var(--soft);}

/* ================================================================ privacy */
.lg-top{padding:48px 0 8px;}
.lg-title{font-size:clamp(36px, 8vw, 56px); letter-spacing:-.045em; line-height:1; margin:8px 0 12px;}
.lg-lede{font-size:18px; color:var(--soft);}
.lg-date{margin-top:14px; font-size:14px; color:var(--soft);}
.lg-body{padding:24px 0 88px;}
.legal p, .legal li{font-size:16.5px; line-height:1.7; max-width:66ch;}
.legal h2{font-size:clamp(22px, 4vw, 28px); letter-spacing:-.025em; padding-top:18px; border-top:1px solid var(--ln);}

/* ================================================================ 404 (night) */
.lost{position:relative; overflow:hidden; min-height:min(78vh, 720px); display:flex; align-items:center; padding:64px 0;}
.lost-moon{position:absolute; right:-40px; top:40px; width:min(46vw, 260px); aspect-ratio:1; border-radius:50%; background:var(--moon); box-shadow:0 0 90px rgba(251,243,228,.3); opacity:.92;}
.lost-moon::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--night); transform:translate(22%, -12%);}
.lost .container{position:relative; z-index:1; width:100%;}
.lost-num{font-size:clamp(96px, 26vw, 200px); font-weight:800; letter-spacing:-.07em; line-height:.85; color:var(--saffron-light); margin:0 0 18px;}
.lost-title{font-size:clamp(30px, 7vw, 52px); letter-spacing:-.04em; max-width:14ch;}
.lost-lede{margin-top:12px; font-size:17px; color:var(--soft); max-width:36ch;}
.lost-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px;}

/* ================================================================ responsive */
@media (min-width:900px){
  .menu-grid{grid-template-columns:1fr 1fr;}
  .fu-grid{grid-template-columns:1.05fr 1fr; gap:56px; align-items:center;}
  .fu-map{aspect-ratio:1/1;}
  .fu-contact-grid{grid-template-columns:1fr 1.1fr; gap:64px; align-items:start;}
  .fu-form{padding:30px 28px;}
  .chap-pin{padding-bottom:88px;}
  .co-grid{grid-template-columns:minmax(0,1fr) 380px; gap:48px; align-items:start;}
  .co-sum{order:2; position:sticky; top:calc(var(--nav-h) + 20px); margin-top:22px;}
  .co-form{order:1;}
  .co-sum summary{pointer-events:none;} .co-sum-toggle{display:none;}
  .co-paybar{position:static; margin:24px 0 0; padding:16px 0 20px; border-radius:0; border-top:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none;}
  .co-slots{flex-wrap:wrap; overflow:visible;}
  .tr-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:64px;}
  .tr{padding-top:64px;}
  .spice-overlay{align-items:center;}
  .spice-dialog{border-radius:26px; max-width:440px; padding:28px 26px 18px;}
}
@media (max-width:1000px){
  .nav-links{gap:22px;}
}
@media (max-width:900px){
  :root{--nav-h:68px;}
  .nav-cta{display:none;}
  .nav-toggle{display:flex;}
  .nav-links{display:none; position:absolute; left:0; right:0; top:100%; background:var(--bg); flex-direction:column; align-items:stretch; gap:0;
    padding:6px var(--gutter) 22px; box-shadow:0 20px 30px rgba(0,0,0,.12); border-radius:0 0 24px 24px;}
  .nav-links.open{display:flex; animation:fade-in .2s ease;}
  .nav-links a:not(.btn){padding:15px 0; font-size:20px; font-weight:700; color:var(--fg); border-bottom:1px solid var(--ln); background:none;}
  .nav-links a.active{color:var(--kicker);}
  .nav-mobile-cta{display:flex; margin-top:18px;}
  .logo{font-size:19px; gap:8px;} .logo-urdu{font-size:13px;}
  .grid-2{grid-template-columns:1fr; gap:32px;}
  .grid-4{grid-template-columns:repeat(2,1fr); gap:22px;}
  section, .section-tight{padding:60px 0;}
  .page-hero{padding:64px 0 56px;}
  .footer-grid{grid-template-columns:1fr; gap:34px;}
  .site-footer{padding:56px 0 calc(28px + env(safe-area-inset-bottom,0px));}
  .confirm-card{padding:30px 20px;}
  .field-row{grid-template-columns:1fr;}
  .drawer-panel{border-radius:0;}
  /* no live blur on phones: blurring what scrolls underneath is one of the most expensive things a phone can do */
  .nav-bar, .m-cats, .co-paybar, .chap-words div{backdrop-filter:none; -webkit-backdrop-filter:none;}
  .nav-bar{background:color-mix(in srgb, var(--bg) 97%, transparent);}
  .m-cats{background:var(--bg);}
  .co-paybar{background:var(--bg);}
  .chap-words div{background:rgba(20,10,12,.55);}
  .page-menu .site-footer{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px));}
}
@media (max-width:480px){
  .grid-4{grid-template-columns:1fr;}
  .chap-words{grid-template-columns:1fr;}
  .chap-p{font-size:15px;}
  .fu-actions .btn{flex:1 1 100%;}
  .m-dish{grid-template-columns:minmax(0,1fr) 96px; gap:14px;}
  .m-side, .m-thumb{width:96px; height:96px;}
}
/* phones held sideways: keep the header and chips slim */
@media (max-height:500px) and (orientation:landscape){
  :root{--nav-h:60px;}
  .chap-on .chap{height:auto;}
  .chap-on .chap-pin{position:relative; height:auto; min-height:100vh;}
  .chap-on .chap-t > *{opacity:1; transform:none;}
  .m-cats-inner{padding-top:8px; padding-bottom:8px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}