/* ISHVA GLASS v1 (24-10-2026) -- site-wide. The Maker: "a visual experience and user experience equal or better than apple ... no licence
   problem". Our own design language: frosted warm glass in amber light, Ishva gold + cream, open fonts (Inter OFL + Noto Sans Telugu OFL,
   self-hosted), no Apple fonts, icons, logos or copied screens. Layered OVER site.css (that file is untouched).
   Real blur only where page content moves BEHIND the glass (sticky header, chat box, the phone menu); cards and panels on the still
   ambient light get the same look without a live blur (budget Android phones stay smooth).
   Fallbacks: no backdrop-filter / reduced transparency -> solid panels; reduced motion -> still; forced colours -> system colours. */
@font-face { font-family: "Ishva Sans"; src: url("fonts/inter-latin-opsz-normal.woff2") format("woff2-variations"), url("fonts/inter-latin-opsz-normal.woff2") format("woff2");
             font-weight: 100 900; font-style: normal; font-display: swap;
             unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20B9, U+2122, U+2190-2199, U+2212, U+FEFF; }
@font-face { font-family: "Ishva Sans"; src: url("fonts/noto-sans-telugu-wght-normal.woff2") format("woff2-variations"), url("fonts/noto-sans-telugu-wght-normal.woff2") format("woff2");
             font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0C00-0C7F, U+0951-0952, U+0964-0965, U+200C-200D, U+25CC; }

:root {
  --g-fill: rgba(255, 244, 222, 0.065);
  --g-fill-2: rgba(255, 244, 222, 0.035);
  --g-fill-strong: rgba(255, 244, 222, 0.12);
  --g-edge: rgba(255, 236, 200, 0.18);
  --g-edge-hi: rgba(255, 250, 235, 0.42);
  --g-shadow: 0 12px 32px rgba(0, 0, 0, 0.34), 0 2px 6px rgba(0, 0, 0, 0.22);
  --g-shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.42), 0 4px 10px rgba(0, 0, 0, 0.26);
  --g-blur: blur(22px) saturate(170%);
  --g-r: 22px;
  --g-r-sm: 14px;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --solid: rgba(32, 26, 19, 0.96);
  --amber: #f1c75b;
}

/* ---------- type ---------- */
html { -webkit-text-size-adjust: 100%; }
body, button, input, select, textarea {
  font-family: "Ishva Sans", "Nirmala UI", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
body { font-size: 16.5px; line-height: 1.55; letter-spacing: -0.011em; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.026em; line-height: 1.08; text-wrap: balance; }
h1 { letter-spacing: -0.034em; }
h3 { letter-spacing: -0.018em; }
p { text-wrap: pretty; }
nav a, .tabs a, .btn, .chip, .chipsq button, .menu { font-weight: 560; letter-spacing: -0.012em; }
.sold .big, .sold .fit, .card .cs .num, td.n { font-variant-numeric: tabular-nums lining-nums; }
.sold .big, .sold .fit { letter-spacing: -0.04em; font-weight: 750; }
.sold .lbl, .card .cs .lb { letter-spacing: 0.14em; }

/* ---------- the light the glass sits in (glass needs colour behind it) ---------- */
body { background: #120e0a; }
body::before {
  content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 12% 6%, rgba(241, 199, 91, 0.20), transparent 70%),
    radial-gradient(34vmax 28vmax at 94% 26%, rgba(214, 120, 52, 0.14), transparent 70%),
    radial-gradient(40vmax 34vmax at 40% 96%, rgba(170, 120, 40, 0.16), transparent 72%);
}

/* ---------- real glass: content moves behind it ---------- */
header {
  background: rgba(24, 19, 14, 0.58);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border-bottom: 1px solid rgba(255, 236, 200, 0.10);
  box-shadow: inset 0 -1px 0 rgba(255, 236, 200, 0.06), 0 10px 30px rgba(0, 0, 0, 0.28);
}
.box {                                            /* the Ask Ishva question box, fixed at the bottom */
  background: linear-gradient(rgba(18, 14, 10, 0), rgba(18, 14, 10, 0.55) 40%);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
}
nav a { border-radius: 999px; transition: background 0.35s var(--ease), color 0.25s; }
nav a:hover, nav a[aria-current] { background: var(--g-fill-strong); box-shadow: inset 0 1px 0 var(--g-edge-hi); }

/* ---------- the glass look without a live blur: cards, panels, tiles ---------- */
.card, .panel, .store, .pack, .offer, .sold, .quick a, .lst li, .tw, .fm, .msg.me div, .chipsq button, .chip, .tabs, .btn.ghost, .menu {
  background: linear-gradient(180deg, var(--g-fill), var(--g-fill-2));
  border: 1px solid var(--g-edge);
  box-shadow: inset 0 1px 0 var(--g-edge-hi), inset 0 -1px 0 rgba(0, 0, 0, 0.16), var(--g-shadow);
}
.card { border-radius: var(--g-r); overflow: hidden; position: relative; isolation: isolate; }
.panel, .sold, .offer, .tw, .fm { border-radius: var(--g-r); position: relative; }
.store, .pack, .quick a, .lst li { border-radius: var(--g-r-sm); }
.msg.me div { border-radius: 18px 18px 6px 18px; }
.chip, .chipsq button, .tabs, .menu { border-radius: 999px; }
.tw { padding: 2px; }
.fm { padding: 18px 20px; }
.sold { padding: 14px 18px; display: inline-block; max-width: 100%; }

/* share buttons: glass discs; their brand colours still come on hover (share.css hover rules are more specific) */
.share .sh {
  background: linear-gradient(180deg, var(--g-fill), var(--g-fill-2)); border: 1px solid var(--g-edge);
  box-shadow: inset 0 1px 0 var(--g-edge-hi), 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.35s var(--spring), background 0.25s, box-shadow 0.3s;
}
.share .sh:active { transform: scale(0.94); transition-duration: 0.12s; }

/* the lit rim: brighter top-left, like light on a curved edge */
.card::before, .panel::before, .sold::before, .offer::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(140deg, rgba(255, 250, 235, 0.50), rgba(255, 236, 200, 0.07) 36%, rgba(255, 236, 200, 0.02) 64%, rgba(241, 199, 91, 0.26));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}

/* ---------- buttons ---------- */
.btn {
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 252, 240, 0.55), inset 0 -2px 0 rgba(0, 0, 0, 0.14), 0 8px 22px rgba(241, 199, 91, 0.18);
  transition: transform 0.35s var(--spring), box-shadow 0.3s var(--ease), filter 0.2s;
}
.btn:not(.ghost) { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 55%); }
.btn.ghost { border-radius: 14px; }
.chip[aria-pressed=true], .tabs a[aria-selected=true] { background: var(--g-fill-strong); box-shadow: inset 0 1px 0 var(--g-edge-hi), 0 0 0 1px rgba(241, 199, 91, 0.35); }
.tabs { padding: 4px; }
.tabs a { border-radius: 999px; transition: background 0.35s var(--ease), color 0.25s; }

/* ---------- inputs: clear glass with an amber focus ring ---------- */
.find input, .pinfind input, .rfind input, .fm input, .fm select, .fm textarea, .box textarea, .box input {
  background: rgba(255, 244, 222, 0.06); border: 1px solid var(--g-edge); color: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28), inset 0 -1px 0 rgba(255, 250, 235, 0.10);
  transition: border-color 0.2s, box-shadow 0.25s var(--ease), background 0.2s;
}
.find input:focus, .pinfind input:focus, .rfind input:focus, .fm input:focus, .fm select:focus, .fm textarea:focus, .box textarea:focus, .box input:focus {
  outline: none; background: rgba(255, 244, 222, 0.09); border-color: rgba(241, 199, 91, 0.75);
  box-shadow: 0 0 0 4px rgba(241, 199, 91, 0.18), inset 0 1px 2px rgba(0, 0, 0, 0.22);
}
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ---------- tables, footer ---------- */
th { background: rgba(255, 244, 222, 0.06); }
th, td { border-color: rgba(255, 236, 200, 0.10); }
footer { background: linear-gradient(180deg, rgba(255, 244, 222, 0.025), rgba(255, 244, 222, 0.05)); border-top: 1px solid rgba(255, 236, 200, 0.10); }

/* ---------- motion: lift on hover (pointer devices only), springy press everywhere ---------- */
@media (hover: hover) and (pointer: fine) {
  .card { transition: transform 0.45s var(--spring), box-shadow 0.35s var(--ease); }
  .card:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 var(--g-edge-hi), var(--g-shadow-lift); }
  .btn:hover, .quick a:hover, .chipsq button:hover { transform: translateY(-2px); }
  .card img { transition: transform 0.8s var(--ease); }
  .card:hover img { transform: scale(1.035); }
}
.btn:active, .chip:active, .chipsq button:active, .card:active { transform: scale(0.97); transition-duration: 0.12s; }

/* ---------- v1.2 (24-10, the Maker's review) ---------- */
/* the menu: the pill must hold the whole word (desktop links had no padding, the text ran past the pill) */
@media (min-width: 561px) {
  nav { gap: 2px; }
  nav a { padding: 7px 11px; }
}

/* the page-level styles of Millets, Recipes and Nutrition sit inside <body>, after this file: "body" makes these rules win */
body .rtile, body .ntile, body .mbig, body .msmall, body .mpill, body .npill, body .nball {
  background: linear-gradient(180deg, var(--g-fill), var(--g-fill-2));
  border-color: var(--g-edge);
  box-shadow: inset 0 1px 0 var(--g-edge-hi), inset 0 -1px 0 rgba(0, 0, 0, 0.16), var(--g-shadow);
}
body .ntile.tall, body .ntile.wide, body .mbig {
  background: linear-gradient(140deg, rgba(241, 199, 91, 0.14), rgba(255, 244, 222, 0.045) 55%, rgba(255, 244, 222, 0.02));
}
body .rtile, body .ntile, body .mbig { position: relative; overflow: hidden; isolation: isolate; }
body .rtile::before, body .ntile::before, body .mbig::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(140deg, rgba(255, 250, 235, 0.45), rgba(255, 236, 200, 0.06) 36%, rgba(255, 236, 200, 0.02) 64%, rgba(241, 199, 91, 0.24));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
body .rtile .rpic { overflow: hidden; }

/* the grain circles (Millets, Recipes): a glass dome -- a soft highlight on top, a rim of light, a shade at the foot */
body .mball .ring, body .gtile .ring {
  position: relative; overflow: hidden;
  border-color: rgba(255, 236, 200, 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.35), 0 10px 26px rgba(0, 0, 0, 0.38);
}
body .mball .ring::after, body .gtile .ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(120% 75% at 32% 12%, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 46%),
              linear-gradient(to top, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 42%);
}
body .gtile[aria-current=true] .ring { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(241, 199, 91, 0.5), 0 0 24px rgba(241, 199, 91, 0.35), 0 10px 26px rgba(0, 0, 0, 0.38); }

@media (hover: hover) and (pointer: fine) {
  body .rtile, body .ntile, body .mbig, body .msmall, body .mpill, body .npill, body .nball {
    transition: transform 0.45s var(--spring), box-shadow 0.35s var(--ease), border-color 0.25s;
  }
  body .rtile:hover, body .ntile:hover, body .mbig:hover, body .msmall:hover, body .mpill:hover, body .npill:hover, body .nball:hover {
    transform: translateY(-4px); border-color: rgba(241, 199, 91, 0.55);
    box-shadow: inset 0 1px 0 var(--g-edge-hi), 0 18px 40px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(241, 199, 91, 0.22), 0 0 28px rgba(241, 199, 91, 0.12);
  }
  body .rtile .rpic img { transition: transform 0.8s var(--ease); }
  body .rtile:hover .rpic img { transform: scale(1.05); }
  body .mball .ring, body .gtile .ring { transition: transform 0.45s var(--spring), box-shadow 0.35s var(--ease), border-color 0.25s; }
  body .mball:hover .ring, body .gtile:hover .ring {
    transform: translateY(-4px) scale(1.05); border-color: rgba(241, 199, 91, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.45), 0 16px 34px rgba(0, 0, 0, 0.45), 0 0 26px rgba(241, 199, 91, 0.28);
  }
}
body .rtile:active, body .ntile:active, body .mpill:active, body .npill:active, body .nball:active, body .mball:active .ring, body .gtile:active .ring {
  transform: scale(0.97); transition-duration: 0.12s;
}

/* v1.3 (24-10, the Maker: on a millet's page the recipe list items touched and overlapped on hover): each item is its own glass
   row with space between, padding inside, and a small lift that never reaches the neighbour */
.lst { display: grid; gap: 8px; margin: 10px 0; }
.lst li { padding: 0; border-bottom: 0; }
.lst li a { display: block; padding: 12px 16px; border-radius: inherit; }
@media (hover: hover) and (pointer: fine) {
  .lst li { transition: transform 0.35s var(--spring), box-shadow 0.3s var(--ease), border-color 0.25s; }
  .lst li:hover { transform: translateY(-2px); border-color: rgba(241, 199, 91, 0.55); box-shadow: inset 0 1px 0 var(--g-edge-hi), 0 12px 28px rgba(0, 0, 0, 0.38), 0 0 18px rgba(241, 199, 91, 0.10); }
}
@media (prefers-reduced-motion: reduce) { .lst li:hover { transform: none; } }

/* v1.3.1 (24-10, the Maker: the contact form's drop list showed white text on white): the opened list is drawn by the system, so it is
   told the control is dark and each option gets a solid dark ground with light text */
select { color-scheme: dark; }
select option, select optgroup { background-color: #201a13; color: #f6efe1; }

/* ---------- phones: lighter blur, slightly tighter radius ---------- */
@media (max-width: 480px) {
  :root { --g-blur: blur(14px) saturate(150%); --g-r: 18px; --g-r-sm: 12px; --g-shadow: 0 8px 22px rgba(0, 0, 0, 0.32), 0 2px 5px rgba(0, 0, 0, 0.2); }
  .fm { padding: 14px 15px; }
  .sold { padding: 12px 14px; }
  .share { gap: 4px; } .share .sh { width: 34px; height: 34px; }   /* all 8 share icons on one line (8 x 34 + 7 x 4 = 300 px) */
}

/* ---------- fallbacks ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header { background: var(--solid); }
  .box { background: linear-gradient(rgba(18, 14, 10, 0), var(--solid) 40%); }
}
@media (prefers-reduced-transparency: reduce) {
  header, .box { background: var(--solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body .rtile, body .ntile, body .mbig, body .msmall, body .mpill, body .npill, body .nball { background: var(--solid); }
  .card, .panel, .store, .pack, .offer, .sold, .quick a, .lst li, .tw, .fm, .msg.me div, .chipsq button, .chip, .tabs, .btn.ghost, .menu { background: var(--solid); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .card:hover, .btn:hover, .card:hover img, body .rtile:hover, body .ntile:hover, body .mbig:hover, body .mpill:hover, body .npill:hover, body .nball:hover,
  body .rtile:hover .rpic img, body .mball:hover .ring, body .gtile:hover .ring { transform: none; }
}
@media (forced-colors: active) {
  body::before, .card::before, .panel::before, .sold::before, .offer::before, body .rtile::before, body .ntile::before, body .mbig::before,
  body .mball .ring::after, body .gtile .ring::after { display: none; }
  header, .box, .card, .panel, .store, .pack, .offer, .sold, .quick a, .lst li, .tw, .fm, .chip, .tabs, .btn, .menu { background: Canvas; box-shadow: none; border-color: CanvasText; }
}