/* =====================================================================
   MOVA Transit — Design System
   by Parko Mobility · original brand styling
   ===================================================================== */

:root {
  /* Brand palette */
  --mova-teal:        #06B6A4;
  --mova-teal-600:    #059b8c;
  --mova-teal-300:    #5fd8cb;
  --mova-navy:        #0B1F33;
  --mova-navy-700:    #122c47;
  --mova-navy-600:    #1a3a5c;
  --mova-amber:       #FFB020;
  --mova-success:     #22C55E;
  --mova-danger:      #EF4444;
  --mova-surface:     #F4F7FA;
  --mova-line:        rgba(255,255,255,0.08);
  --mova-line-dark:   rgba(11,31,51,0.08);

  --mova-radius:      16px;
  --mova-radius-sm:   10px;
  --mova-shadow:      0 10px 30px -12px rgba(11,31,51,0.25);
  --mova-shadow-lg:   0 24px 60px -20px rgba(6,182,164,0.35);
  --mova-font: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--mova-font);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* ---- Brand wordmark ---- */
.mova-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.mova-wordmark img { height: 34px; width: 34px; }
.mova-wordmark .mw-name { font-size: 1.25rem; line-height: 1; }
.mova-wordmark .mw-sub {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 0.6; display: block; margin-top: 2px;
}

/* ---- Gradients ---- */
.mova-gradient-teal { background: linear-gradient(135deg, #06B6A4 0%, #0EA5A0 60%, #0a8d80 100%); }
.mova-gradient-navy { background: linear-gradient(160deg, #0B1F33 0%, #0f2942 100%); }
.mova-mesh {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(6,182,164,0.22), transparent 60%),
    radial-gradient(700px 500px at 10% 110%, rgba(255,176,32,0.10), transparent 60%),
    linear-gradient(160deg, #0B1F33 0%, #0c2238 100%);
}

/* ---- Cards ---- */
.mova-card {
  background: #fff;
  border-radius: var(--mova-radius);
  box-shadow: var(--mova-shadow);
  border: 1px solid var(--mova-line-dark);
}
.mova-card-dark {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--mova-line);
  border-radius: var(--mova-radius);
  backdrop-filter: blur(8px);
}

/* ---- Buttons ---- */
.mova-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.92rem;
  padding: 0.7rem 1.3rem; border-radius: 999px;
  border: none; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, opacity .2s;
}
.mova-btn:active { transform: translateY(1px) scale(0.99); }
.mova-btn-primary { background: var(--mova-teal); color: #04231f; box-shadow: 0 8px 20px -8px rgba(6,182,164,0.6); }
.mova-btn-primary:hover { background: var(--mova-teal-300); }
.mova-btn-ghost { background: rgba(255,255,255,0.08); color: #fff; }
.mova-btn-ghost:hover { background: rgba(255,255,255,0.16); }
.mova-btn-amber { background: var(--mova-amber); color: #3a2700; }

/* ---- Icon (SVG sprite) sizing ---- */
.ic { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -0.18em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-lg { width: 1.6em; height: 1.6em; }

/* ---- Stat pill ---- */
.stat-trend-up { color: var(--mova-success); }
.stat-trend-down { color: var(--mova-danger); }

/* ---- Badges / chips ---- */
.chip { display:inline-flex; align-items:center; gap:6px; font-size:0.72rem; font-weight:700; padding:3px 10px; border-radius:999px; }
.chip-valid { background: rgba(34,197,94,0.15); color:#15803d; }
.chip-invalid { background: rgba(239,68,68,0.15); color:#b91c1c; }
.chip-duplicate { background: rgba(255,176,32,0.18); color:#a16207; }
.chip-expired { background: rgba(100,116,139,0.18); color:#475569; }

/* ---- Live pulse dot ---- */
.live-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--mova-success); }
.live-dot::after { content:''; position:absolute; inset:-4px; border-radius:50%; background: var(--mova-success); opacity:.5; animation: movaPulse 1.6s ease-out infinite; }
@keyframes movaPulse { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(2.6);opacity:0} }

/* ---- Animations ---- */
@keyframes movaFadeUp { from { opacity:0; transform: translateY(14px);} to {opacity:1; transform:none;} }
.fade-up { animation: movaFadeUp .5s cubic-bezier(.16,.84,.44,1) both; }
.delay-1{animation-delay:.06s}.delay-2{animation-delay:.12s}.delay-3{animation-delay:.18s}.delay-4{animation-delay:.24s}

/* scrollbar */
.mova-scroll::-webkit-scrollbar{width:8px;height:8px}
.mova-scroll::-webkit-scrollbar-thumb{background:rgba(6,182,164,.3);border-radius:8px}