/* ══════════════════════════════════════════════════════════════
   Chote Vyapari — shared foundation
   Loaded by every page. Tokens, resets, buttons, forms, atoms.
   ══════════════════════════════════════════════════════════════ */

:root{
  --saffron:#F57C20; --saffron-deep:#E2650B; --saffron-soft:#FFF3E8;
  --green:#0E7A3C;   --green-deep:#064323;   --green-soft:#E9F5EE;
  --navy:#0B3D91;

  --ink:#14181F; --body:#4B5565; --muted:#7D8899; --faint:#9AA3B0;
  --line:#E9E6E0; --line-2:#DEDAD2;
  --surface:#FFFFFF; --canvas:#FBF8F3; --sunk:#F5F2EC;

  --danger:#D6392B; --danger-soft:#FDF1F0;
  --warn:#C9760A;   --warn-soft:#FEF5E7;
  --info:#0B63B8;   --info-soft:#EDF4FC;

  --r:16px; --r-sm:12px; --r-xs:9px;
  --sh-1:0 1px 2px rgba(20,24,31,.05);
  --sh-2:0 1px 2px rgba(20,24,31,.04), 0 10px 26px -14px rgba(20,24,31,.22);
  --sh-3:0 2px 4px rgba(20,24,31,.05), 0 26px 60px -22px rgba(20,24,31,.34);

  --font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-in:"Noto Sans Devanagari",var(--font);

  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

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

/* Some UA stylesheets lose this once a parent is grid/flex. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

::selection{ background:#FFE0C2; }

/* ── Ashoka chakra, pure CSS ───────────────────────────────── */
.chakra{
  position:relative; border-radius:50%; aspect-ratio:1; flex:none;
  color:var(--navy);
  background:
    radial-gradient(circle at 50% 50%, currentColor 0 11%, transparent 11.5%),
    repeating-conic-gradient(from 0deg, currentColor 0deg .85deg, transparent .85deg 15deg);
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 0 49.5%, transparent 50%);
          mask:radial-gradient(circle at 50% 50%, #000 0 49.5%, transparent 50%);
}
.chakra::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2.5px solid currentColor; }
/* below ~26px the 24 spokes turn to mush — 12 fatter spokes read correctly */
.chakra--sm{
  background:
    radial-gradient(circle at 50% 50%, currentColor 0 17%, transparent 18%),
    repeating-conic-gradient(from 0deg, currentColor 0deg 2.6deg, transparent 2.6deg 30deg);
}
.chakra--sm::after{ border-width:2px; }
.chakra--spin{ animation:spin 1.1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.tiranga{
  height:4px; width:100%;
  background:linear-gradient(90deg,var(--saffron) 0 33.33%,#F2EFE8 33.33% 66.66%,var(--green) 66.66% 100%);
}
.flagdot{ display:inline-flex; gap:3px; }
.flagdot i{ width:5px; height:5px; border-radius:50%; display:block; }
.flagdot i:nth-child(1){ background:var(--saffron); }
.flagdot i:nth-child(2){ background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.12); }
.flagdot i:nth-child(3){ background:#2CA05A; }

/* ── buttons ───────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:46px; padding:0 18px;
  font-size:14.5px; font-weight:700; letter-spacing:.005em;
  border-radius:var(--r-sm); border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:box-shadow .16s, background .16s, transform .1s, border-color .16s;
}
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.btn--primary{
  color:#fff; background:linear-gradient(135deg,var(--saffron),var(--saffron-deep));
  box-shadow:0 8px 20px -8px rgba(226,101,11,.75);
}
.btn--primary:hover:not(:disabled){ box-shadow:0 12px 26px -8px rgba(226,101,11,.9); }
.btn--green{ color:#fff; background:linear-gradient(135deg,#12904A,var(--green)); box-shadow:0 8px 20px -9px rgba(14,122,60,.7); }
.btn--ghost{ background:var(--surface); border-color:var(--line-2); color:var(--ink); }
.btn--ghost:hover{ background:var(--sunk); border-color:#CFCBC3; }
.btn--quiet{ background:transparent; color:var(--body); }
.btn--quiet:hover{ background:var(--sunk); color:var(--ink); }
.btn--light{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); color:#fff; backdrop-filter:blur(6px); }
.btn--light:hover{ background:rgba(255,255,255,.24); }
.btn--lg{ height:54px; font-size:15.5px; padding:0 24px; border-radius:14px; }
.btn--sm{ height:36px; font-size:13px; padding:0 13px; border-radius:var(--r-xs); }
.btn--block{ width:100%; }

.link{ color:var(--saffron-deep); font-weight:700; cursor:pointer; }
.link:hover{ text-decoration:underline; }

/* ── forms ─────────────────────────────────────────────────── */
.field{ display:grid; gap:7px; }
.field > label{ font-size:13.5px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:6px; }
.opt{ font-weight:500; color:var(--muted); font-size:12.5px; }

.inwrap{ position:relative; display:flex; align-items:center; }
.inwrap > svg{ position:absolute; left:14px; color:var(--muted); pointer-events:none; transition:color .16s; }
.inwrap:focus-within > svg{ color:var(--saffron-deep); }

.input,.select{
  width:100%; height:52px; padding:0 14px 0 42px;
  font:inherit; font-size:16px;      /* 16px stops iOS zooming on focus */
  color:var(--ink); background:var(--surface);
  border:1.5px solid var(--line-2); border-radius:var(--r-sm);
  outline:none; appearance:none; -webkit-appearance:none;
  transition:border-color .15s, box-shadow .15s;
}
.input::placeholder{ color:#A8B0BC; }
.input:hover,.select:hover{ border-color:#CFCBC3; }
.input:focus,.select:focus{ border-color:var(--saffron); box-shadow:0 0 0 4px rgba(245,124,32,.14); }
.input.is-invalid{ border-color:var(--danger); }
.input.is-invalid:focus{ box-shadow:0 0 0 4px rgba(214,57,43,.13); }

.phone{ display:flex; }
.phone__code{
  display:flex; align-items:center; gap:7px; padding:0 12px; height:52px;
  border:1.5px solid var(--line-2); border-right:0;
  border-radius:var(--r-sm) 0 0 var(--r-sm);
  background:var(--sunk); font-size:15px; font-weight:600; color:var(--body); white-space:nowrap;
}
.phone .input{ border-radius:0 var(--r-sm) var(--r-sm) 0; padding-left:14px; }
.phone:focus-within .phone__code{ border-color:var(--saffron); }

.reveal{
  position:absolute; right:6px; width:40px; height:40px;
  display:grid; place-items:center; border:0; background:transparent;
  cursor:pointer; color:var(--muted); border-radius:9px;
}
.reveal:hover{ color:var(--ink); background:var(--sunk); }
.input--pw{ padding-right:48px; }

.check{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:13.5px; color:var(--body); line-height:1.5; }
.check input{
  appearance:none; -webkit-appearance:none;
  width:20px; height:20px; flex:none; margin-top:1px;
  border:1.5px solid #CFCCC5; border-radius:6px; background:#fff; cursor:pointer; transition:.15s;
}
.check input:checked{
  background:var(--green); border-color:var(--green);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:14px; background-repeat:no-repeat; background-position:center;
}
.check input:focus-visible{ box-shadow:0 0 0 4px rgba(14,122,60,.16); }

.hint{ font-size:12.5px; color:var(--muted); line-height:1.5; }
.error{ font-size:12.5px; color:var(--danger); font-weight:600; }

.strength{ display:flex; gap:5px; margin-top:2px; }
.strength i{ height:4px; flex:1; border-radius:3px; background:var(--line); transition:background .25s; }
.strength[data-level="1"] i:nth-child(-n+1){ background:#E0562F; }
.strength[data-level="2"] i:nth-child(-n+2){ background:var(--saffron); }
.strength[data-level="3"] i:nth-child(-n+3){ background:#8FB93B; }
.strength[data-level="4"] i{ background:var(--green); }

/* ── pills, cards, misc ────────────────────────────────────── */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700; white-space:nowrap;
  background:var(--sunk); color:var(--body); border:1px solid var(--line);
}
.pill--ok{ background:var(--green-soft); color:#0A5C2E; border-color:#CDE6D8; }
.pill--warn{ background:var(--warn-soft); color:#95590A; border-color:#F5E2C2; }
.pill--danger{ background:var(--danger-soft); color:#96261B; border-color:#F6D6D2; }
.pill--saffron{ background:var(--saffron-soft); color:var(--saffron-deep); border-color:#F7DFC6; }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-1); }
.card--pad{ padding:18px; }

.toast{
  position:fixed; left:50%; bottom:calc(24px + var(--safe-bottom)); transform:translateX(-50%);
  z-index:9999; background:var(--ink); color:#fff;
  padding:12px 18px; border-radius:12px; font-size:14px; font-weight:600;
  box-shadow:var(--sh-3); display:flex; align-items:center; gap:10px;
  max-width:calc(100vw - 32px); animation:toastin .26s cubic-bezier(.2,.8,.3,1);
}
.toast--bad{ background:#8E211A; }
@keyframes toastin{ from{ transform:translate(-50%,14px); opacity:0 } }

.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

:focus-visible{ outline:none; }
.btn:focus-visible,.link:focus-visible,a:focus-visible{ box-shadow:0 0 0 4px rgba(245,124,32,.3); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}