/* GOODLOAD — रंग और बुनियाद
   ═══════════════════════════════════════════════════════════════
   यहाँ सिर्फ़ वो चीज़ें हैं जो पूरी app में एक जैसी रहेंगी —
   रंग, font, और नाप के नियम।

   ⚠️ नाप का नियम: कहीं भी pixel में चौड़ाई मत ठोकना।
      सब कुछ rem, %, clamp() और flex/grid में — तभी app
      320px वाले पुराने फ़ोन से लेकर computer तक नहीं टूटेगी।
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── ब्रांड के रंग (पुरानी app से वही) ── */
  --p:      #0A2144;   /* गहरा नीला */
  --p2:     #1B54B0;   /* शाही नीला */
  --p3:     #3B82F6;   /* चमकीला नीला */
  --acc:    #F0700D;   /* नारंगी */
  --acc2:   #FFA83D;   /* हल्का नारंगी */

  --bg:     #EEF3FC;
  --bg2:    #F7FAFF;
  --card:   #FFFFFF;
  --border: #DCE4F5;

  --txt:    #111B33;
  --txt2:   #64719A;
  --txt3:   #8A99BE;

  --green:  #0E9268;
  --red:    #DC3545;

  --shadow:    0 8px 28px rgba(10,33,68,.10), 0 2px 8px rgba(10,33,68,.06);
  --shadow-sm: 0 3px 12px rgba(10,33,68,.07), 0 1px 3px rgba(10,33,68,.05);
  --ring:      0 0 0 3px rgba(27,84,176,.35);

  --r-card: 1rem;

  /* ── icon की पाँच तय सीढ़ियाँ ──────────────────────────────
     ⚠️ पहले हर जगह अपनी-अपनी नाप लिखी थी — 1, 1.05, 1.1, 1.2,
        1.25, 1.3, 1.4 — यानी आठ अलग नाप। पास-पास रखे icon
        बड़े-छोटे-बड़े दिखते थे और आँख को खटकता था। अब सिर्फ़ ये
        पाँच ही चलेंगी; नई जगह भी इन्हीं में से चुनिए।

     ⚠️ rem में हैं, em में नहीं। em होने पर icon का नाप आस-पास
        की लिखावट से बदल जाता था — इसीलिए हर डिब्बे में अलग
        दिखता था। rem फ़ोन की अपनी font setting से बढ़ता-घटता
        है, इसलिए बड़े अक्षर वालों का आदर भी बना रहता है।       */
  --ic-sm: 1rem;      /* छोटे चिप, पट्टियाँ, पंक्ति के अंदर */
  --ic:    1.15rem;   /* आम — लिखावट के साथ वाले icon        */
  --ic-md: 1.25rem;   /* बटन, मेनू, नीचे का nav              */
  --ic-lg: 1.4rem;    /* ऊपर की पट्टी, बड़े चुनाव वाले बटन     */
  --ic-xl: 3rem;      /* ख़ाली पर्दे का बड़ा icon              */

  /* सबसे बड़ी चौड़ाई — बड़े फ़ोन/tablet/computer पर बीच में टिकेगी */
  --maxw: 34rem;
}

*, *::before, *::after{ box-sizing:border-box; }

html{
  /* आदमी के फ़ोन की font setting का आदर — इसे कभी px में मत बाँधना */
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:'Plus Jakarta Sans','Noto Sans Devanagari',
              'Noto Sans Gujarati','Noto Sans Gurmukhi','Noto Sans Bengali',
              'Noto Sans Tamil','Noto Sans Telugu','Noto Sans Kannada',
              'Noto Sans Malayalam','Noto Sans Oriya',
              system-ui, Roboto, sans-serif;
  line-height:1.5;
  /* पुराने फ़ोन पर भी साफ़ दिखे */
  -webkit-font-smoothing:antialiased;
}

p, h1, h2, h3, ul{ margin:0; }
ul{ padding:0; list-style:none; }

/* हर पन्ने का बीच वाला डिब्बा — यही चौड़ाई सँभालता है */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:clamp(.75rem, 3.5vw, 1.25rem);
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  box-shadow:var(--shadow);
  padding:clamp(.9rem, 3.5vw, 1.15rem);
}

/* ── छूने लायक़ नाप ──────────────────────────────────────────
   हर दबाने वाली चीज़ कम से कम 44px — ड्राइवर के हाथ मोटे और
   गंदे होते हैं, और गाड़ी हिलती रहती है।                      */
button{
  font:inherit;
  color:inherit;
  min-height:2.75rem;   /* 44px */
  cursor:pointer;
  border:0;
  background:none;
}

/* ── keyboard और screen-reader ──────────────────────────────
   हर दबाने वाली चीज़ पर दिखने वाला घेरा। पुरानी app में यह
   छूट गया था — TalkBack वाले आदमी के लिए app बेकार थी।        */
:focus-visible{
  outline:none;
  box-shadow:var(--ring);
  border-radius:.5rem;
}

/* SVG icon — रंग बाहर से आता है, अंदर ठुका नहीं */
.ci{
  width:var(--ic); height:var(--ic);
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ── जिनका फ़ोन हिलना-डुलना बंद रखता है, उनका आदर ── */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}