/* GOODLOAD — ऑनलाइन सेवा
   ═══════════════════════════════════════════════════════════════
   सेवा की टाइलें, अर्ज़ी का सफ़र, और वह क़ानूनी पट्टी जो हर
   सरकारी काम वाले पन्ने पर रहनी ही चाहिए।
   ═══════════════════════════════════════════════════════════════ */

/* ⚠️ पहले यह टूटा हुआ था (23 सित. की जाँच में पकड़ा): दो कतार का फ़ैसला
   पर्दे की चौड़ाई (26rem) से होता था, अक्षर के नाप से नहीं। बड़े अक्षर
   वाले 430px फ़ोन पर भी दो कतार बनती थीं और "GST return" वाला डिब्बा
   दाईं तरफ़ कट जाता था। अब हर डिब्बे की कम से कम चौड़ाई अक्षर के
   साथ बढ़ती है — जगह न हो तो अपने-आप एक कतार। दो से ज़्यादा कभी नहीं। */
.sv-grid{
  display:grid; gap:8px;
  grid-template-columns:repeat(auto-fill, minmax(max(min(12rem, 100%), calc((100% - 8px) / 2)), 1fr));
}
.sv{ min-width:0; }

.sv{
  display:flex; align-items:center; gap:10px; width:100%; text-align:start;
  appearance:none; font:inherit; cursor:pointer;
  background:#fff; border:1px solid var(--border); border-radius:.85rem;
  padding:10px 11px; box-shadow:var(--shadow-sm);
}
.sv:active{ transform:scale(.99); }
.sv-ic{
  flex:none; width:2.4rem; height:2.4rem; border-radius:.75rem;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--sv,#1B54B0) 14%, #fff);
  color:var(--sv,#1B54B0);
}
.sv-ic .ci{ width:var(--ic-md); height:var(--ic-md); }
.sv-txt{ flex:1; min-width:0; }
.sv-n{ display:block; font-size:.82rem; font-weight:800; color:#0E1D33; line-height:1.25; }
.sv-d{ display:block; font-size:.66rem; font-weight:600; color:var(--txt3); line-height:1.35; margin-top:1px; }
.sv-m{
  display:inline-block; margin-top:5px; border-radius:.5rem; padding:2px 7px;
  font-size:.6rem; font-weight:800;
  background:#EEF1F7; color:var(--txt2);
}
.sv-m.auto{ background:#E7F4EE; color:var(--green); }
.sv-m.semi{ background:#FFF8E5; color:#8D6E00; }
.sv-m.man { background:#FDECEE; color:#B3261E; }

/* अभी चालू न हुई सेवाएँ — दिखें, पर दबें नहीं */
.sv.band{ opacity:.62; cursor:default; box-shadow:none; }
.sv.band:active{ transform:none; }

/* सेवा के पन्ने का सिर */
.sv-sir{
  display:flex; align-items:center; gap:11px; margin-bottom:14px;
  background:color-mix(in srgb, var(--sv,#1B54B0) 9%, #fff);
  border:1px solid color-mix(in srgb, var(--sv,#1B54B0) 22%, #fff);
  border-radius:.9rem; padding:12px 13px;
}
.sv-sir b{ display:block; font-size:.95rem; font-weight:800; color:#0E1D33; line-height:1.3; }
.sv-sir small{ display:block; font-size:.68rem; font-weight:600; color:var(--txt2); margin-top:2px; }

/* ── अर्ज़ी का सफ़र ─────────────────────────────────────────
   ⚠️ लकीर पर भरोसा मत कीजिए — रंग-अंधे आदमी को भी पता चले,
      इसलिए हर क़दम का हाल शब्दों में भी लिखा है।            */
.safar{ margin-bottom:16px; }
.safar-q{ display:flex; gap:11px; padding-bottom:14px; position:relative; }
.safar-q:last-child{ padding-bottom:0; }
.safar-q::before{
  content:''; position:absolute; inset-inline-start:.52rem; top:1.2rem; bottom:0;
  width:2px; background:var(--border);
}
.safar-q:last-child::before{ display:none; }
.safar-g{
  flex:none; width:1.1rem; height:1.1rem; margin-top:.15rem; border-radius:50%;
  background:#fff; border:2.5px solid var(--border); z-index:1;
}
.safar-q.ho-gaya .safar-g{ background:var(--green); border-color:var(--green); }
.safar-q.ho-gaya::before{ background:var(--green); }
.safar-q.abhi .safar-g{ background:var(--acc); border-color:var(--acc); box-shadow:0 0 0 4px rgba(240,112,13,.18); }
.safar-t b{ display:block; font-size:.82rem; font-weight:800; color:var(--txt2); line-height:1.3; }
.safar-t small{ display:block; font-size:.68rem; font-weight:600; color:var(--txt3); line-height:1.45; margin-top:1px; }
.safar-q.ho-gaya .safar-t b, .safar-q.abhi .safar-t b{ color:#0E1D33; }

/* अर्ज़ी की सूची में हाल की पट्टी */
.haal-bheja{ background:#EAF0FB; color:var(--p2); }
.haal-mila { background:#F4EAF8; color:#6A1B9A; }
.haal-chal { background:#FFF4E5; color:#9A5B00; }
.haal-hua  { background:#E7F4EE; color:var(--green); }
.haal-wapas{ background:#FDECEE; color:var(--red); }

/* ── क़ानूनी पट्टी ──────────────────────────────────────────
   Master Prompt का न टूटने वाला नियम: हर सरकारी काम वाले
   पन्ने पर यह लिखा रहेगा कि GOODLOAD सरकारी विभाग नहीं है। */
.sv-kanoon{
  display:flex; gap:9px; margin-top:18px;
  background:#FFF8E9; border:1px solid #F3D9A4; border-radius:.8rem;
  padding:12px 13px;
  font-size:.72rem; font-weight:600; color:#7A5210; line-height:1.7;
}
.sv-kanoon .ci{ width:var(--ic); height:var(--ic); flex:none; color:#C77700; margin-top:2px; }

/* ── गाड़ी के काग़ज़ की पट्टी ─────────────────────────────────
   ⚠️ रंग अकेला काफ़ी नहीं होता — रंग-अंधे आदमी को भी उतना ही
      साफ़ दिखना चाहिए। इसलिए हर पट्टी में दिन शब्दों में भी लिखे
      हैं ("12 दिन बचे", "3 दिन पहले ख़त्म हो गया")।            */
.kg-patti{
  display:inline-block; border-radius:.5rem; padding:3px 9px;
  font-size:.66rem; font-weight:800; line-height:1.4;
  background:#E7F4EE; color:var(--green);
}
.kg-patti.gaya{ background:#FDECEE; color:#B3261E; }
.kg-patti.aaj { background:#FFE9DC; color:#9A3B00; }
.kg-patti.jald{ background:#FFF8E5; color:#8D6E00; }
.kg-patti.nahi{ background:#EEF1F7; color:var(--txt2); }

/* ── काग़ज़ों की तारीख़ वाली सूची ──────────────────────────── */
.kg{
  background:#fff; border:1px solid var(--border);
  border-inline-start:4px solid var(--green);
  border-radius:.85rem; padding:11px 12px; margin-bottom:9px;
  box-shadow:var(--shadow-sm);
}
.kg.gaya{ border-inline-start-color:var(--red);  background:#FFF7F8; }
.kg.aaj { border-inline-start-color:#E8720C;     background:#FFFBF7; }
.kg.jald{ border-inline-start-color:#C9A227;     background:#FFFDF6; }
.kg.nahi{ border-inline-start-color:var(--border); }

.kg-top{ display:flex; align-items:center; gap:8px; }
.kg-top b{ flex:1; min-width:0; font-size:.88rem; font-weight:800; color:#0E1D33; }
.kg-no{
  flex:none; border-radius:.5rem; padding:2px 8px;
  background:#EAF0FB; color:var(--p2);
  font-size:.66rem; font-weight:800; letter-spacing:.02em;
}
.kg-din{ margin-top:3px; font-size:.74rem; font-weight:700; color:var(--txt2); }
.kg.gaya .kg-din{ color:#B3261E; }
.kg.aaj  .kg-din{ color:#9A3B00; }
.kg .lbtn{ margin-top:9px; }