/* Nigal Counter home. Same foundations as the shop screens: SF stack, iOS greys, 8pt
   grid, 44pt targets. Photographs lead; the only glass is the bar that floats over them. */

@font-face { font-family: 'Noto Sans Tamil'; src: url('/fonts/noto-sans-tamil-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Noto Sans Tamil'; src: url('/fonts/noto-sans-tamil-600.woff2') format('woff2'); font-weight: 500 700; font-display: swap; }

:root {
  color-scheme: light;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', system-ui, sans-serif;
  --bg: #F2F2F7; --card: #FFFFFF; --label: #000000;
  --label-2: rgba(60,60,67,.80); --label-4: rgba(60,60,67,.38);
  --sep: rgba(60,60,67,.20); --fill: rgba(118,118,128,.12);
  --green: #34A853; --green-text: #298542; --red-text: #CB1D2B;
  --ink-brand: #1C1C1E;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 9999px;
  --ease: cubic-bezier(.25,.1,.25,1); --out: cubic-bezier(0,0,.58,1);
  --gut: 20px; --shell: 1180px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
html[lang="ta"] { --font: 'Noto Sans Tamil', -apple-system, system-ui, sans-serif; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--bg); color: var(--label); font-family: var(--font); font-size: 15px; line-height: 1.4; letter-spacing: -.2px; -webkit-font-smoothing: antialiased; }
html[lang="ta"] body { letter-spacing: 0; line-height: 1.55; }
.wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
a { color: inherit; text-decoration: none; }

.ico { display: inline-block; width: 18px; height: 18px; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.ico-search { -webkit-mask-image: url('/img/icons/search.svg'); mask-image: url('/img/icons/search.svg'); }

/* ---------- glass bar ----------
   Real refraction on Chromium through the #lg displacement filter; Safari and Firefox do
   not accept url() inside backdrop-filter, so they get the blur and saturate alone. */
.bar {
  position: sticky; top: 0; z-index: 40;
  padding-top: var(--safe-t);
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: url(#lg) blur(3px) saturate(180%);
  box-shadow: inset 0 1px 0 #ffffff5c, 0 .5px 0 var(--sep);
}
@supports not (backdrop-filter: url(#lg)) {
  .bar { backdrop-filter: blur(14px) saturate(180%); background: rgba(242,242,247,.72); }
}
.bar .row { display: flex; align-items: center; gap: 12px; height: 60px; }
.bar .mark { width: 34px; height: 34px; object-fit: contain; flex: none; }
.bar .id { min-width: 0; flex: 1 1 auto; }
.bar .id b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.bar .id span { display: block; font-size: 12px; color: var(--label-2); }

.lang { display: inline-flex; background: var(--fill); border-radius: var(--r-full); padding: 2px; height: 34px; flex: none; }
.lang button { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--label-2); padding: 0 12px; border-radius: var(--r-full); }
.lang button[aria-pressed="true"] { background: var(--card); color: var(--label); box-shadow: 0 1px 3px rgba(0,0,0,.14); }

/* ---------- intro ---------- */
.intro { padding: 36px 0 20px; }
.intro h1 { font-size: clamp(30px, 4.2vw, 44px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin: 0 0 10px; max-width: 20ch; }
html[lang="ta"] .intro h1 { font-size: clamp(24px, 3.2vw, 34px); letter-spacing: 0; line-height: 1.3; max-width: 26ch; }
.intro p { margin: 0; font-size: 17px; color: var(--label-2); max-width: 54ch; }

.search { margin: 20px 0 0; display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: var(--r-md); padding: 0 16px; height: 52px; box-shadow: 0 1px 2px rgba(0,0,0,.05), inset 0 0 0 .5px var(--sep); max-width: 640px; }
.search .ico { color: var(--label-4); flex: none; }
.search input { appearance: none; border: 0; background: transparent; font: inherit; font-size: 17px; color: var(--label); width: 100%; height: 100%; outline: none; }

/* ---------- category rail, the Swiggy "what's on your mind" row ---------- */
.sech { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 34px 0 14px; }
.sech h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.025em; }
.sech span { font-size: 13px; color: var(--label-2); }

.rail { display: flex; gap: 18px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.cat { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit; flex: none; width: 88px; text-align: center; }
/* dishes are free standing cut-outs, never cropped into a circle */
.cat .well { width: 80px; height: 80px; margin: 0 auto 8px; border-radius: 50%; background: radial-gradient(closest-side, var(--fill) 0%, var(--fill) 70%, transparent 71%); transition: transform 200ms var(--out); }
.cat .well img { width: 100%; height: 100%; object-fit: contain; display: block; transform: scale(1.12); filter: drop-shadow(0 8px 8px rgba(40,25,10,.25)); }
.cat:active .well { transform: scale(.95); }
.cat b { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; }
.cat[aria-pressed="true"] .well { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--ink-brand); }

/* ---------- shop cards ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.shop { display: block; background: var(--card); border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: transform 240ms var(--out), box-shadow 240ms var(--out); }
.shop:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -18px rgba(0,0,0,.4); }
.shop:active { transform: scale(.985); }
.shop:focus-visible { outline: 3px solid var(--ink-brand); outline-offset: 3px; }

.shop .pic { position: relative; aspect-ratio: 16 / 10; background: var(--fill); overflow: hidden; }
.shop .pic img.photo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--out); }
.shop:hover .pic img.photo { transform: scale(1.04); }
.shop .pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 48%); pointer-events: none; }

/* the notched ribbon, as Swiggy ships it on restaurant cards */
.ribbon { position: absolute; top: 12px; left: -4px; z-index: 2; background: #02060C; color: #F4F4F5; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px 5px 12px; border-radius: 0 4px 4px 0; }
.ribbon::after { content: ''; position: absolute; left: 0; bottom: -4px; border-width: 4px 0 0 4px; border-style: solid; border-color: #3A3C41 transparent transparent transparent; }
html[lang="ta"] .ribbon { letter-spacing: 0; text-transform: none; }

/* the shop's own logo on a glass disc over its photograph */
.shop .logo {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  width: 64px; height: 64px; border-radius: var(--r-md); overflow: hidden;
  background: rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 #ffffff9c, 0 6px 18px -8px rgba(0,0,0,.5);
  display: grid; place-items: center; padding: 6px;
}
.shop .logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shop .logo[hidden] { display: none; }

.shop .body { padding: 14px 16px 16px; }
.shop h3 { margin: 0 0 6px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.shop .meta { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.rating { display: inline-flex; align-items: center; gap: 4px; color: #fff; background: var(--green-text); border-radius: 6px; padding: 2px 7px; font-size: 13px; font-weight: 700; }
.star { width: 11px; height: 11px; background: currentColor; clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--label-4); }
.shop .sub { margin: 6px 0 0; font-size: 14px; color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop .feat { margin: 10px 0 0; padding-top: 10px; border-top: .5px solid var(--sep); font-size: 13px; color: var(--label-2); line-height: 1.45; }

/* ---------- coming next ---------- */
.soon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.soon .c { background: var(--card); border-radius: var(--r-lg); padding: 16px; box-shadow: inset 0 0 0 .5px var(--sep); }
.soon .c b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.015em; margin: 8px 0 4px; }
.soon .c p { margin: 0; font-size: 13px; color: var(--label-2); line-height: 1.45; }
.pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--label-2); background: var(--fill); border-radius: 5px; padding: 3px 7px; }
html[lang="ta"] .pill { letter-spacing: 0; text-transform: none; }

.empty { padding: 28px 0; color: var(--label-2); font-size: 15px; }
.foot { padding: 40px 0 calc(48px + var(--safe-b)); color: var(--label-2); font-size: 13px; }
.foot b { color: var(--label); font-weight: 600; }

@media (max-width: 1023px) { .grid { grid-template-columns: repeat(2, 1fr); } .soon { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 759px) {
  :root { --gut: 16px; }
  .grid, .soon { grid-template-columns: 1fr; gap: 16px; }
  .intro { padding: 22px 0 8px; }
  .intro p { font-size: 15px; }
  .cat { width: 76px; } .cat .well { width: 68px; height: 68px; }
  .sech { margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }