/* ==========================================================================
   theme.css — Design tokens + base layer
   Palette extracted verbatim from https://indtransport.online/
   Single source of truth for colour, elevation, typography and components.
   ========================================================================== */

:root{

  /* ------------------------- PRIMARY BRAND ------------------------- */
  --brand:            #1d4ed8;   /* primary blue — buttons, links, active step */
  --brand2:           #0ea5e9;   /* sky blue — gradient partner, accents */

  /* ----------------------------- TEXT ----------------------------- */
  --ink:              #111827;   /* headings + body */
  --muted:            #475569;   /* secondary / helper text */

  /* --------------------------- SURFACES --------------------------- */
  --soft:             #f4f6fb;   /* page background */
  --card:             #ffffff;   /* card / panel */
  --border:           #e2e8f0;   /* all 1px borders */

  /* ---------------------------- DEPTH ----------------------------- */
  --shadow:           0 16px 30px rgba(15,23,42,.08);
  --shadow-sm:        0 6px 15px rgba(0,0,0,.08);
  --shadow-focus:     0 6px 18px rgba(29,78,216,.16);
  --shadow-brand:     0 10px 22px rgba(13,110,253,.25);
  --radius:           18px;
  --radius-sm:        14px;
  --radius-pill:      999px;

  /* -------------------------- GRADIENTS --------------------------- */
  --grad-brand:       linear-gradient(135deg, #1d4ed8, #0ea5e9);
  --grad-brand-alt:   linear-gradient(135deg, #1d4ed8, #38bdf8);
  --grad-brand-flat:  linear-gradient(90deg, #1d4ed8 0%, #0ea5e9 100%);
  --grad-soft:        linear-gradient(90deg, #e6f0ff 0%, #eef6ff 100%);
  --grad-dark:        linear-gradient(180deg, #0b1220 0%, #0f172a 100%);

  /* ----------------- DARK SURFACES / GLASS ------------------------ */
  --dark-900:         #0b1220;
  --dark-800:         #0f172a;
  --dark-700:         #111827;
  --overlay:          linear-gradient(90deg, rgba(11,18,32,.75), rgba(11,18,32,.15));
  --glass-nav:        rgba(255,255,255,.92);
  --glass-card:       rgba(255,255,255,.06);
  --glass-card2:      rgba(255,255,255,.08);

  /* --------------------------- ACCENTS ---------------------------- */
  --orange:           #f97316;   /* primary accent */
  --orange-600:       #ea580c;   /* hover */
  --orange-50:        #fff2e2;   /* tint bg */
  --orange-200:       #ffd8af;   /* tint border */
  --orange-800:       #c45a00;   /* tint text */

  --blue-600:         #2563eb;
  --blue-50:          #e9f2ff;
  --blue-100:         #cfe2ff;
  --blue-soft:        #eef4ff;
  --blue-soft2:       #eef6ff;
  --blue-soft3:       #e6f0ff;

  --green:            #16a34a;   /* success / verified */
  --green-50:         #e9f9ef;
  --green-100:        #c8f1d4;

  --yellow:           #fde68a;   /* notice band */
  --yellow-800:       #9a5a00;   /* notice text */

  --indigo-800:       #2f3c78;
  --sky-400:          #38bdf8;

  --danger:           #dc2626;
  --danger-50:        #fef2f2;

  /* --------------------------- TYPEFACES -------------------------- */
  --font-body:        "Manrope", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-head:        "Space Grotesk", "Manrope", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  /* --------------------------- MOTION ----------------------------- */
  --t-fast:           .25s ease;
  --t-step:           .35s ease;
  --nav-h:            72px;
}

/* ==========================================================================
   BASE
   ========================================================================== */

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

body{
  margin:0;
  padding-top:0;
  background:var(--soft);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6,.section-title{
  font-family:var(--font-head);
  letter-spacing:-.01em;
  font-weight:700;
  color:var(--ink);
}

a{ color:var(--brand); text-decoration:none; transition:color var(--t-fast); }
a:hover{ color:var(--brand2); }

img{ max-width:100%; height:auto; }

:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
  border-radius:6px;
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* ---------- Sticky site header & glass navbar ---------- */
.site-header{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1040;
  width: 100%;
}
.nav-glass{
  position: relative;
  width: 100%;
  background: var(--glass-nav);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.brand-badge{
  width:38px; height:38px; flex:0 0 auto;
  border-radius:12px; display:grid; place-items:center;
  background:var(--grad-brand); color:#fff;
  font-weight:900; letter-spacing:.04em;
  box-shadow:var(--shadow-brand);
}
.navbar-nav .nav-link{ font-weight:700; color:var(--ink) !important; font-size:15px; padding:8px 12px; }
.navbar-nav .nav-link.active{ color:var(--brand) !important; }

/* ---------- Buttons ---------- */
.btn-brand{
  background:var(--grad-brand); color:#fff; border:none;
  border-radius:var(--radius-pill);
  padding:13px 30px; font-weight:700;
  box-shadow:var(--shadow-brand);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.btn-brand:hover{ transform:translateY(-2px); color:#fff; box-shadow:0 12px 25px rgba(29,78,216,.3); }

.btn-outline-brand{
  background:transparent; color:var(--ink);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:13px 30px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:all var(--t-fast);
}
.btn-outline-brand:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }

.btn-accent{
  background:var(--orange); color:#fff; border:none;
  border-radius:var(--radius-pill); padding:13px 30px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background var(--t-fast), transform var(--t-fast);
}
.btn-accent:hover{ background:var(--orange-600); transform:translateY(-2px); color:#fff; }

/* ---------- Cards & panels ---------- */
.card-surface{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
}

/* Service cards on the home page (the coloured grid matching numberplatessolution.online) */
.service-card{
  border-radius:var(--radius);
  padding:26px 20px;
  margin-bottom:18px;
  text-align:center;
  color:#fff;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.service-card h4{ color:inherit; margin-bottom:12px; font-size:1.25rem; }
.service-card p{ font-size:14px; opacity:.92; margin-bottom:16px; }

.service-card--plate      { background:var(--brand); }
.service-card--twowheeler { background:var(--indigo-800); }
.service-card--sticker    { background:var(--orange); }
.service-card--fourwheeler{ background:var(--brand2); }
.service-card--threewheeler{ background:var(--green); }
.service-card--ev         { background:var(--orange-50); color:var(--orange-800); }

/* ---------- Trust / feature icon bubbles ---------- */
.icon-bubble{
  width:56px; height:56px; border-radius:16px;
  display:grid; place-items:center; font-size:24px;
  border:1px solid transparent;
}
.icon-bubble.orange{ background:var(--orange-50); border-color:var(--orange-200); color:var(--orange-800); }
.icon-bubble.blue  { background:var(--blue-50);   border-color:var(--blue-100);   color:var(--blue-600); }
.icon-bubble.green { background:var(--green-50);  border-color:var(--green-100);  color:var(--green); }

/* ---------- Inputs (icon-prefixed, 55px block) ---------- */
.input-group-custom{
  display:flex; align-items:center;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:box-shadow var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.input-group-custom:focus-within{
  border-color:var(--brand);
  box-shadow:var(--shadow-focus);
  transform:translateY(-1px);
}
.input-icon{
  width:55px; min-width:55px; height:55px;
  background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
}
.input-group-custom input,
.input-group-custom select,
.input-group-custom textarea{
  border:none; outline:none; background:var(--card);
  padding:14px; font-size:16px; width:100%;
  font-family:var(--font-body); color:var(--ink);
}
.input-group-custom textarea{ height:90px; resize:none; }
.field-error{ border-color:var(--danger) !important; }
.field-error-text{ color:var(--danger); font-size:13px; margin-top:6px; font-weight:600; display:none; }
.note{ font-size:13px; color:var(--muted); margin-top:6px; }

/* ---------- Wizard step indicator ---------- */
.steps{ display:flex; justify-content:space-between; position:relative; margin-bottom:30px; }
.steps::before{
  content:""; position:absolute; left:0; right:0; top:11px; height:2px;
  background:var(--border); z-index:0;
}
.step{ position:relative; z-index:1; padding:0 10px; font-size:14px; font-weight:600;
       color:var(--muted); background:var(--card); border-radius:6px; }
.step.active{ color:var(--brand); font-weight:800; }
.step.done{ color:var(--green); }

.form-step{ display:none; animation:stepIn var(--t-step); }
.form-step.active{ display:block; }
@keyframes stepIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---------- Progress (processing panel + dashboard bars) ---------- */
.progress-track{ height:8px; background:var(--border); border-radius:var(--radius-pill); overflow:hidden; }
.progress-fill { height:100%; width:0; background:var(--grad-brand-flat); border-radius:var(--radius-pill);
                 transition:width .2s linear; }

/* ---------- Notice / disclaimer band ---------- */
.notice-band{
  background:var(--yellow);
  color:var(--yellow-800);
  border-radius:var(--radius-sm);
  padding:14px 18px;
  font-weight:600;
  border-left:4px solid var(--orange);
}

/* ---------- Dark sections & footer ---------- */
.section-dark{
  background:var(--grad-dark);
  color:#fff;
  padding:60px 0;
}
.section-dark .glass-card{
  background:var(--glass-card);
  border:1px solid var(--glass-card2);
  border-radius:var(--radius);
  padding:24px;
}
.footer{ background:var(--grad-dark); color:#fff; padding:60px 0 24px; }
.footer a{ color:#fff; text-decoration:none; font-weight:600; }
.footer a:hover{ color:var(--sky-400); }
.footer-bottom{ border-top:1px solid var(--glass-card2); margin-top:36px; padding-top:20px;
                font-size:14px; color:rgba(255,255,255,.7); }

/* ---------- Utility ---------- */
.band-soft{ background:var(--grad-soft); padding:50px 0; }
.text-muted-ink{ color:var(--muted); }
.amount{ color:var(--brand); font-weight:800; font-size:32px; }
.badge-soft{ background:var(--blue-soft); color:var(--blue-600); border-radius:var(--radius-pill);
             padding:6px 14px; font-weight:700; font-size:13px; display:inline-block; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .progress-fill{ transition:none; }
}