/* ==========================================================
   AIHAR VILLAGE — schemes.css
   Government Schemes page. Inherits tokens from style.css.
   ========================================================== */

.page-schemes { background: var(--cream); }

/* ══════════════════════════════
   PAGE HEADER
   ══════════════════════════════ */
.page-hero {
  position: relative;
  padding: 8.5rem 1.5rem 4rem;
  text-align: center;
  overflow: hidden;
  background: var(--grad-temple);
  border-bottom: 1px solid rgba(201,148,26,0.28);
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232,82,10,0.16) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(201,148,26,0.09) 0%, transparent 55%);
  pointer-events: none;
}
.page-hero > .container { position: relative; z-index: 1; }

.breadcrumb {
  display: flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: rgba(255,235,185,0.5);
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--gold-light); transition: color 0.25s ease; }
.breadcrumb a:hover { color: var(--gold-bright); text-decoration: underline; }

.page-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 1.25;
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-light) 45%, var(--saffron-glow) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.35rem;
}
.page-title-hi {
  font-family: var(--font-devanagari);
  font-size: clamp(1.1rem, 3vw, 1.7rem);
  color: rgba(255,235,185,0.72);
  letter-spacing: 0.12em;
  line-height: 1.6;
}
/* In Hindi this line becomes English, so give it the Latin face */
html[data-lang="hi"] .page-title-hi {
  font-family: var(--font-heading);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: clamp(0.95rem, 2.4vw, 1.35rem);
}
/* …and the main title takes the Devanagari face */
html[data-lang="hi"] .page-title { font-family: var(--font-devanagari); line-height: 1.5; }

.page-lead {
  max-width: 62ch;
  margin: 0 auto;
  color: rgba(255,235,185,0.72);
  font-size: 1.02rem;
  line-height: 1.85;
}
.page-lead strong { color: var(--gold-light); }

.hero-stats {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}
.hero-stat {
  min-width: 130px;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, rgba(232,82,10,0.1), rgba(201,148,26,0.09));
  border: 1px solid rgba(201,148,26,0.25);
  border-radius: 8px;
}
.hs-num {
  display: block;
  font-family: var(--font-accent);
  font-size: 1.9rem; font-weight: 900; line-height: 1.2;
  background: linear-gradient(135deg, var(--gold-bright), var(--saffron-glow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hs-label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,235,185,0.55);
  margin-top: 0.25rem;
}

/* ══════════════════════════════
   FILTER BAR (sticky)
   ══════════════════════════════ */
.filter-bar {
  position: sticky;
  top: 64px;
  z-index: 90;
  /* Was `1.15rem 0` — .container carries no padding of its own, so the
     search box, level toggle and reset link all ran flush to the screen
     edges while the scheme grid below sat properly inset. */
  padding: 1.15rem 1.5rem 0.9rem;
  background: linear-gradient(180deg, rgba(26,0,0,0.97), rgba(44,4,0,0.96));
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(201,148,26,0.24);
  box-shadow: 0 6px 26px rgba(26,0,0,0.32);
}

.search-row {
  display: flex; gap: 0.9rem; align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.search-wrap {
  position: relative;
  flex: 1 1 320px;
  display: flex; align-items: center;
}
.search-icon {
  position: absolute; left: 14px;
  font-size: 0.95rem;
  opacity: 0.65;
  pointer-events: none;
}
#scheme-search {
  width: 100%;
  padding: 0.75rem 2.6rem 0.75rem 2.6rem;
  font-family: var(--font-body);
  /* Must stay at 16px: iOS Safari zooms the whole page in when a focused
     input's text is smaller than that, and the zoom never reverts. */
  font-size: 16px;
  color: var(--amber-light);
  background: linear-gradient(135deg, rgba(20,0,0,0.85), rgba(44,4,0,0.8));
  border: 1.5px solid rgba(201,148,26,0.35);
  border-radius: 100px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}
#scheme-search::placeholder { color: rgba(255,235,185,0.38); }
#scheme-search::-webkit-search-cancel-button { display: none; }
#scheme-search:focus {
  outline: none;
  border-color: rgba(232,82,10,0.75);
  box-shadow: 0 0 0 3px rgba(232,82,10,0.18), 0 0 18px rgba(201,148,26,0.16);
}
.search-clear {
  position: absolute; right: 10px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201,148,26,0.16);
  border: none; border-radius: 50%;
  color: var(--gold-light);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.25s ease;
}
.search-clear:hover { background: rgba(232,82,10,0.4); }
/* display:flex above would otherwise beat the [hidden] attribute */
.search-clear[hidden] { display: none; }

/* Level toggle */
.level-toggle {
  display: flex;
  padding: 3px;
  background: linear-gradient(135deg, rgba(20,0,0,0.9), rgba(44,4,0,0.85));
  border: 1.5px solid rgba(201,148,26,0.35);
  border-radius: 100px;
  flex-shrink: 0;
}
.lvl-btn {
  padding: 0.5rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,212,95,0.6);
  background: none;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s ease, background 0.25s ease;
}
.lvl-btn:hover { color: var(--gold-bright); }
.lvl-btn.is-active {
  color: var(--btn-ink-dark);
  font-weight: 700;
  background: var(--btn-gold);
  box-shadow: 0 0 12px rgba(214,158,18,0.45);
}

/* Category chips */
.cat-chips {
  display: flex; gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  /* Fade the right edge so it reads as "there is more to scroll" */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 48px), transparent 100%);
}
/* Once scrolled to the end, drop the fade */
.cat-chips.at-end {
  -webkit-mask-image: none;
  mask-image: none;
}
.cat-chips::-webkit-scrollbar { height: 4px; }
.cat-chips::-webkit-scrollbar-thumb { background: rgba(201,148,26,0.35); border-radius: 2px; }

.cat-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0.48rem 0.95rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,235,185,0.72);
  background: linear-gradient(135deg, rgba(232,82,10,0.08), rgba(201,148,26,0.07));
  border: 1px solid rgba(201,148,26,0.28);
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition);
}
.cat-chip:hover {
  border-color: rgba(201,148,26,0.6);
  color: var(--gold-bright);
  transform: translateY(-1px);
}
.cat-chip.is-active {
  color: var(--btn-ink-dark);
  font-weight: 700;
  background: var(--btn-gold);
  border-color: var(--gold-bright);
  box-shadow: 0 3px 14px rgba(214,158,18,0.4);
}
.cat-chip .chip-count {
  font-size: 0.72rem;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

.result-line {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: rgba(255,235,185,0.55);
}
.reset-btn {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--gold-light);
  background: none;
  border: none;
  border-bottom: 1px dotted rgba(201,148,26,0.55);
  cursor: pointer;
  padding: 0 0 1px;
  transition: color 0.25s ease;
}
.reset-btn:hover { color: var(--saffron-glow); }

/* ══════════════════════════════
   SCHEME GRID
   ══════════════════════════════ */
.schemes-section { padding: 3rem 1.5rem 4rem; }

.scheme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}
/* display:grid outranks the UA's [hidden] rule, so state it explicitly */
.scheme-grid[hidden] { display: none; }

.scheme-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.5rem;
  text-align: left;
  background: var(--grad-warm);
  border: 1px solid rgba(201,148,26,0.28);
  border-radius: 12px;
  box-shadow: var(--shadow-warm);
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
  overflow: hidden;
}
.scheme-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--saffron), var(--gold-light), var(--turmeric));
  opacity: 0;
  transition: opacity 0.32s ease;
}
/* :focus-within picks up the .sc-more button inside the card */
.scheme-card:hover,
.scheme-card:focus-within {
  transform: translateY(-5px);
  border-color: rgba(201,148,26,0.65);
  box-shadow: 0 14px 38px rgba(61,0,0,0.16);
}
.scheme-card:hover::before,
.scheme-card:focus-within::before { opacity: 1; }

.sc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}
.sc-icon {
  font-size: 1.7rem;
  line-height: 1;
  flex-shrink: 0;
}
.sc-level {
  flex-shrink: 0;
  padding: 0.22rem 0.62rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 100px;
  white-space: nowrap;
}
.sc-level.central {
  color: #0E3820;
  background: linear-gradient(135deg, #A8E6C0, #6FD69A);
  border: 1px solid rgba(14,56,32,0.2);
}
.sc-level.state {
  color: #4A1200;
  background: linear-gradient(135deg, #FFD08A, #FFB05C);
  border: 1px solid rgba(74,18,0,0.18);
}

.sc-name {
  font-family: var(--font-accent);
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--deep-maroon);
  margin-bottom: 0.6rem;
}
html[data-lang="hi"] .sc-name { font-family: var(--font-devanagari); line-height: 1.7; }

.sc-chip {
  display: inline-block;
  align-self: flex-start;
  padding: 0.3rem 0.8rem;
  margin-bottom: 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--maroon);
  background: linear-gradient(135deg, rgba(232,82,10,0.13), rgba(201,148,26,0.13));
  border: 1px solid rgba(201,148,26,0.35);
  border-radius: 100px;
}

.sc-about {
  font-size: 0.89rem;
  line-height: 1.75;
  color: var(--text-medium);
  margin-bottom: 1.15rem;
  flex-grow: 1;
}

.sc-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(201,148,26,0.2);
}
.sc-cat {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--text-light);
}
.sc-more {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0.35rem 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--saffron);
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
}
/* Stretched hit area: the button owns the whole card, so a tap anywhere
   opens the scheme while the accessible name stays on a real control. */
.sc-more::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
}
.scheme-card:hover .sc-more { color: var(--maroon); }
.sc-more > span:last-child { transition: transform 0.28s ease; }
.scheme-card:hover .sc-more > span:last-child { transform: translateX(3px); }
/* Ring the whole card rather than the small text button — but only where
   :has() exists, so older engines keep the button's own focus ring
   instead of losing the indicator altogether. */
@supports selector(:has(*)) {
  .sc-more:focus-visible { outline: none; }
  .scheme-card:has(.sc-more:focus-visible) {
    outline: 3px solid var(--saffron-light);
    outline-offset: 3px;
  }
}

/* search highlight */
.scheme-card mark {
  background: linear-gradient(180deg, transparent 55%, rgba(255,212,95,0.75) 55%);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

/* No results */
.no-results {
  text-align: center;
  padding: 4rem 1.5rem;
  color: var(--text-medium);
}
.no-results .nr-icon { font-size: 3rem; display: block; margin-bottom: 1rem; }
.no-results p { font-size: 1.1rem; font-weight: 600; color: var(--deep-maroon); }
.no-results .nr-sub { font-size: 0.9rem; font-weight: 400; color: var(--text-light); margin: 0.4rem 0 1.5rem; }

.btn-solid {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.7rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--btn-ink-light);
  background: var(--btn-saffron);
  border: 1px solid rgba(255,196,110,0.5);
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(216,60,10,0.34);
  transition: var(--transition);
}
.btn-solid:hover {
  transform: translateY(-2px);
  color: #FFFDF6;
  background: var(--btn-saffron-hover);
  box-shadow: 0 8px 28px rgba(232,82,10,0.5);
}

/* ══════════════════════════════
   DETAIL DIALOG
   ══════════════════════════════ */
.scheme-dialog {
  /* Centre explicitly rather than relying on the UA default, which
     differs between browsers once an explicit width is set. */
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(760px, calc(100vw - 2rem));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 1px solid rgba(201,148,26,0.4);
  border-radius: 14px;
  background: var(--grad-amber);
  color: var(--text-dark);
  box-shadow: 0 30px 80px rgba(26,0,0,0.5);
  overflow: hidden;
}
.scheme-dialog::backdrop {
  background: rgba(20,0,0,0.72);
  backdrop-filter: blur(4px);
}
body.dialog-open { overflow: hidden; }
.scheme-dialog[open] { animation: dlg-in 0.32s cubic-bezier(0.25,0.46,0.45,0.94) both; }
@keyframes dlg-in {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.dlg-close {
  position: absolute; top: 12px; right: 12px;
  z-index: 5;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  color: var(--gold-light);
  background: linear-gradient(135deg, rgba(26,0,0,0.9), rgba(61,0,0,0.85));
  border: 1px solid rgba(201,148,26,0.45);
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition);
}
.dlg-close:hover {
  background: linear-gradient(135deg, var(--saffron), var(--maroon));
  color: var(--gold-bright);
  transform: rotate(90deg);
}

.dlg-body {
  max-height: min(88vh, 900px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dlg-header {
  position: relative;
  padding: 2rem 3.5rem 1.6rem 2rem;
  background: var(--grad-temple);
  border-bottom: 1px solid rgba(201,148,26,0.3);
}
.dlg-header::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--saffron), var(--gold-light), var(--saffron), transparent);
}
.dlg-badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.dlg-title {
  font-family: var(--font-accent);
  font-size: clamp(1.2rem, 3.2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.4;
  background: linear-gradient(135deg, var(--gold-bright), var(--saffron-glow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}
html[data-lang="hi"] .dlg-title { font-family: var(--font-devanagari); line-height: 1.65; }
.dlg-dept {
  font-size: 0.82rem;
  color: rgba(255,235,185,0.55);
}
.dlg-chip {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.45rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--btn-ink-dark);
  background: var(--btn-gold);
  border-radius: 100px;
  box-shadow: 0 3px 14px rgba(214,158,18,0.38);
}

.dlg-content { padding: 1.75rem 2rem 2.25rem; }

.dlg-about {
  font-size: 0.97rem;
  line-height: 1.9;
  color: var(--text-medium);
  padding-bottom: 1.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(201,148,26,0.22);
}

.dlg-block { margin-top: 1.75rem; }
.dlg-block h3 {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 700;
  color: var(--deep-maroon);
  margin-bottom: 0.85rem;
  letter-spacing: 0.02em;
}
.dlg-block h3 .bi { font-size: 1.1rem; }

.dlg-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.dlg-list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--text-medium);
}
.dlg-list li::before {
  content: '◆';
  position: absolute; left: 0; top: 0;
  font-size: 0.6rem;
  color: var(--saffron);
  line-height: 2.6;
}
.dlg-list.excluded li::before { content: '✕'; color: #B33; font-size: 0.72rem; line-height: 2.2; }

/* numbered process steps */
.dlg-steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 0.85rem; }
.dlg-steps li {
  position: relative;
  counter-increment: step;
  padding: 0.15rem 0 0.15rem 2.4rem;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--text-medium);
}
.dlg-steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0.15rem;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-accent);
  font-size: 0.78rem; font-weight: 700;
  color: var(--btn-ink-dark);
  background: var(--btn-gold);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(214,158,18,0.34);
}

.dlg-links { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 0.35rem; }
.dlg-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0.6rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-light);
  background: linear-gradient(135deg, var(--maroon), var(--deep-maroon));
  border: 1px solid rgba(201,148,26,0.4);
  border-radius: 6px;
  transition: var(--transition);
}
.dlg-link:hover {
  transform: translateY(-2px);
  color: var(--gold-bright);
  border-color: var(--gold-light);
  box-shadow: 0 6px 20px rgba(61,0,0,0.28);
}

.dlg-helpline {
  display: flex; align-items: center; gap: 0.9rem;
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(232,82,10,0.1), rgba(201,148,26,0.1));
  border: 1px solid rgba(201,148,26,0.3);
  border-left: 4px solid var(--saffron);
  border-radius: 8px;
}
.dlg-helpline .hl-icon { font-size: 1.5rem; }
.dlg-helpline .hl-label {
  display: block;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 0.15rem;
}
.dlg-helpline .hl-num {
  font-family: var(--font-accent);
  font-size: 1.05rem; font-weight: 700;
  color: var(--deep-maroon);
}

.dlg-note {
  margin-top: 1.5rem;
  padding: 0.9rem 1.1rem;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-light);
  background: rgba(201,148,26,0.07);
  border: 1px dashed rgba(201,148,26,0.35);
  border-radius: 6px;
}

/* ══════════════════════════════
   SHARE A SCHEME
   WhatsApp first — it is how this information actually reaches people
   here, and how a villager carries a scheme to the Jan Seva Kendra.
   ══════════════════════════════ */
.dlg-actions {
  margin-top: 1.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(201,148,26,0.25);
}
.dlg-actions-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: 0.8rem;
}
.dlg-actions-row {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
}
.dlg-action {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.62rem 1.15rem;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--btn-ink-dark);
  background: var(--btn-gold);
  border: 1px solid rgba(255,240,190,0.8);
  border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(214,158,18,0.32);
  transition: var(--transition);
}
.dlg-action:hover {
  transform: translateY(-2px);
  background: var(--btn-gold-hover);
  box-shadow: 0 6px 20px rgba(240,190,40,0.5);
}
.dlg-action span[aria-hidden] { font-size: 1rem; line-height: 1; }

/* WhatsApp keeps its own green so it is recognisable at a glance */
.dlg-action.is-wa {
  color: #05291B;
  background: linear-gradient(135deg, #7BE39B 0%, #37C46B 50%, #1FA653 100%);
  border-color: rgba(200,255,220,0.75);
  box-shadow: 0 2px 12px rgba(31,166,83,0.35);
}
.dlg-action.is-wa:hover {
  background: linear-gradient(135deg, #9BF0B4 0%, #4BD87E 50%, #27BC60 100%);
  box-shadow: 0 6px 20px rgba(31,166,83,0.5);
}

/* Confirmation state after Copy link */
.dlg-action.is-done {
  background: linear-gradient(135deg, #A8E6C0, #6FD69A);
  border-color: rgba(14,56,32,0.25);
  color: #0E3820;
}

@media (max-width: 480px) {
  /* Full-width stack: easier to hit, and the Hindi labels are longer */
  .dlg-actions-row { flex-direction: column; }
  .dlg-action { width: 100%; justify-content: center; }
}

/* ══════════════════════════════
   WHERE TO APPLY
   ══════════════════════════════ */
.where-section { background: var(--warm-white); }

.where-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.35rem;
  counter-reset: none;
}
.where-card {
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--grad-amber);
  border: 1px solid rgba(201,148,26,0.3);
  border-radius: 10px;
  box-shadow: var(--shadow-warm);
  transition: var(--transition);
}
.where-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201,148,26,0.6);
  box-shadow: 0 12px 32px rgba(61,0,0,0.14);
}
.where-num {
  position: absolute; top: -14px; left: 1.5rem;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-accent);
  font-size: 0.95rem; font-weight: 900;
  color: var(--gold-bright);
  background: linear-gradient(135deg, var(--saffron), var(--maroon));
  border: 1px solid rgba(255,180,60,0.4);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(232,82,10,0.4);
}
.where-card h3 {
  font-family: var(--font-accent);
  font-size: 1.02rem;
  color: var(--deep-maroon);
  margin: 0.5rem 0 0.7rem;
  line-height: 1.5;
}
.where-card p {
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--text-medium);
}
.where-card strong { color: var(--maroon); }

.tip-box,
.warn-box {
  display: flex; align-items: flex-start; gap: 1.15rem;
  margin-top: 2.5rem;
  padding: 1.6rem 1.75rem;
  border-radius: 10px;
}
.tip-box {
  background: linear-gradient(135deg, rgba(26,123,110,0.09), rgba(201,148,26,0.08));
  border: 1px solid rgba(26,123,110,0.28);
  border-left: 4px solid var(--peacock);
}
.tip-box .tip-icon,
.warn-box .warn-icon { font-size: 1.7rem; flex-shrink: 0; line-height: 1.2; }
.tip-box strong {
  display: block;
  font-family: var(--font-accent);
  font-size: 1rem;
  color: var(--peacock);
  margin-bottom: 0.45rem;
}
.tip-box p, .warn-box p {
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--text-medium);
}
.tip-box p strong { display: inline; font-family: var(--font-body); font-size: inherit; color: var(--maroon); }

/* ══════════════════════════════
   HELPLINES
   ══════════════════════════════ */
.helpline-section {
  background: var(--grad-temple);
  position: relative;
  overflow: hidden;
}
.helpline-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(232,82,10,0.1) 0%, transparent 60%);
  pointer-events: none;
}
.helpline-section > .container { position: relative; z-index: 1; }

.helpline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.9rem;
}
.help-card {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, rgba(232,82,10,0.09), rgba(201,148,26,0.08));
  border: 1px solid rgba(201,148,26,0.28);
  border-left: 3px solid rgba(201,148,26,0.6);
  border-radius: 8px;
  transition: var(--transition);
}
.help-card:hover {
  transform: translateY(-3px);
  border-color: rgba(201,148,26,0.7);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
}
.help-card.urgent { border-left-color: var(--saffron); }
.hc-num {
  font-family: var(--font-accent);
  font-size: 1.25rem; font-weight: 900;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, var(--gold-bright), var(--saffron-glow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hc-label {
  font-size: 0.79rem;
  line-height: 1.55;
  color: rgba(255,235,185,0.62);
}

.warn-box {
  background: linear-gradient(135deg, rgba(232,82,10,0.14), rgba(123,21,21,0.16));
  border: 1px solid rgba(232,82,10,0.4);
  border-left: 4px solid var(--saffron-light);
}
.warn-box strong {
  display: block;
  font-family: var(--font-accent);
  font-size: 1rem;
  color: var(--gold-light);
  margin-bottom: 0.45rem;
}
.warn-box p { color: rgba(255,235,185,0.72); }
.warn-box p strong { display: inline; font-family: var(--font-body); font-size: inherit; color: var(--gold-bright); }

/* ══════════════════════════════
   DISCLAIMER
   ══════════════════════════════ */
.disclaimer-section {
  padding: 3rem 1.5rem;
  background: var(--cream);
  border-top: 1px solid rgba(201,148,26,0.25);
}
.disclaimer {
  max-width: 780px;
  margin: 0 auto;
  padding: 1.75rem 2rem;
  background: rgba(255,255,255,0.55);
  border: 1px dashed rgba(140,98,57,0.4);
  border-radius: 10px;
  text-align: center;
}
.disclaimer h2 {
  font-family: var(--font-accent);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.85rem;
}
.disclaimer p {
  font-size: 0.87rem;
  line-height: 1.85;
  color: var(--text-medium);
}
.disclaimer strong { color: var(--maroon); }
.disc-meta {
  margin-top: 1rem;
  font-size: 0.78rem !important;
  color: var(--text-light) !important;
  font-style: italic;
}

/* ══════════════════════════════
   RESPONSIVE
   ══════════════════════════════ */
@media (max-width: 900px) {
  .scheme-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

@media (max-width: 768px) {
  .page-hero { padding: 7rem 1.1rem 3rem; }
  .filter-bar { top: 64px; padding: 0.9rem 1.1rem 0.7rem; }
  .search-row { gap: 0.7rem; }
  .level-toggle { width: 100%; justify-content: space-between; }
  .lvl-btn { flex: 1; padding: 0.5rem 0.6rem; text-align: center; }

  /* Bleed the chip strip to the screen edges so it reads as scrollable.
     The offsets must match .filter-bar's padding above, or the strip
     lands off-centre — they previously assumed a 1.5rem inset that the
     bar did not actually have. */
  .cat-chips {
    margin: 0 -1.1rem;
    padding: 0 1.1rem 0.5rem;
  }

  .scheme-grid { grid-template-columns: 1fr; gap: 1.15rem; }
  .schemes-section { padding: 2.5rem 1.1rem 3rem; }

  .scheme-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
    border: none;
  }
  .dlg-body { max-height: 100dvh; }
  .dlg-header { padding: 1.75rem 3.25rem 1.4rem 1.35rem; }
  .dlg-content { padding: 1.4rem 1.35rem 3rem; }

  .helpline-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 0.7rem; }
  .help-card { padding: 0.9rem 1rem; }
  .hc-num { font-size: 1.05rem; }
  .hc-label { font-size: 0.73rem; }

  .tip-box, .warn-box { flex-direction: column; gap: 0.75rem; padding: 1.3rem 1.25rem; }
  .disclaimer { padding: 1.4rem 1.25rem; }
}

@media (max-width: 480px) {
  .hero-stats { gap: 0.6rem; }
  .hero-stat { min-width: 0; flex: 1 1 30%; padding: 0.8rem 0.6rem; }
  .hs-num { font-size: 1.5rem; }
  .hs-label { font-size: 0.64rem; letter-spacing: 0.08em; }
  .sc-name { font-size: 1rem; }
}

/* ══════════════════════════════
   REDUCED MOTION
   ══════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .scheme-card:hover,
  .where-card:hover,
  .help-card:hover,
  .dlg-link:hover,
  .btn-solid:hover { transform: none; }
  .scheme-dialog[open] { animation: none; }
  .dlg-close:hover { transform: none; }
}

/* ══════════════════════════════
   PRINT — make a scheme printable
   ══════════════════════════════ */
@media print {
  #navbar, .filter-bar, .back-to-top, .scroll-progress,
  .page-hero, .helpline-section, .where-section, #footer, .skip-link { display: none !important; }
  .scheme-card { break-inside: avoid; box-shadow: none; border: 1px solid #999; }
  .scheme-dialog { position: static; max-height: none; box-shadow: none; }
  .dlg-close { display: none; }
  body { background: #fff; }

  /* Printing from an open dialog should yield that one scheme, not the
     scheme behind 58 cards' worth of grid. */
  body.dialog-open .schemes-section,
  body.dialog-open .disclaimer-section { display: none !important; }
  .dlg-body { max-height: none !important; overflow: visible !important; }
  .dlg-actions { display: none !important; }   /* buttons are useless on paper */

  /* The header's gradient text prints as nothing without this */
  .dlg-title {
    -webkit-text-fill-color: #000 !important;
    color: #000 !important;
    background: none !important;
  }
  .dlg-header { background: none !important; border-bottom: 1px solid #999; }
  .dlg-dept, .dlg-chip { color: #000 !important; background: none !important; }
}