/* ============================================================
   MOPAR REBATE CENTER — Consumer theme
   Foundation: Snipp Design System tokens (type, spacing, radii,
   motion, semantic states). Recolored to Mopar brand:
   Mopar Blue #0066CC + Black, bold automotive feel.
   Host Grotesk typeface (per Snipp system; swap for Mopar's
   licensed face on production).
   ============================================================ */

/* ---------- Fonts (Host Grotesk) ----------------------------- */
@font-face { font-family:"Host Grotesk"; font-weight:300; font-style:normal;
  src:url("./fonts/HostGrotesk-Light.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Host Grotesk"; font-weight:400; font-style:normal;
  src:url("./fonts/HostGrotesk-Regular.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Host Grotesk"; font-weight:500; font-style:normal;
  src:url("./fonts/HostGrotesk-Medium.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Host Grotesk"; font-weight:600 700; font-style:normal;
  src:url("./fonts/HostGrotesk-Bold.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Host Grotesk"; font-weight:800 900; font-style:normal;
  src:url("./fonts/HostGrotesk-Black.otf") format("opentype"); font-display:swap; }

:root {
  /* Mopar brand */
  --mopar-blue:        #0066CC;   /* primary mark blue (PMS 293 / true blue) */
  --mopar-blue-bright: #1A85FF;   /* brighter interactive accent */
  --mopar-blue-hover:  #0057AD;
  --mopar-blue-press:  #004A93;
  --mopar-navy:        #002A5C;   /* deep brand navy */
  --mopar-navy-deep:   #001631;   /* darkest panel */
  --mopar-ink:         #0A0E14;   /* near-black body */
  --mopar-black:       #000000;

  /* Tints / surfaces */
  --blue-50:  #EAF3FC;
  --blue-100: #D2E6FA;
  --blue-200: #A9CEF3;

  /* Neutrals (Snipp gray scale) */
  --gray-0:   #FFFFFF;
  --gray-50:  #F6F8FA;
  --gray-100: #EFF2F6;
  --gray-200: #E2E8F0;
  --gray-300: #D2DAE4;
  --gray-400: #B4BFCC;
  --gray-500: #8794A3;
  --gray-600: #5E6B7A;
  --gray-700: #3C4654;
  --gray-800: #232B36;
  --gray-900: #0F1720;

  /* Semantic (from Snipp) */
  --success:#10B981; --success-bg:#E6F8F1; --success-fg:#0B7355;
  --warning:#EAB308; --warning-bg:#FEF6DB; --warning-fg:#7A5A0A;
  --danger:#EF4444;  --danger-bg:#FDECEC;  --danger-fg:#A21A1A;
  --info:#0066CC;    --info-bg:#EAF3FC;    --info-fg:#004A93;

  /* Foreground / background semantic */
  --fg-1: var(--gray-900);
  --fg-2: var(--gray-700);
  --fg-3: var(--gray-500);
  --fg-inverse: #FFFFFF;
  --bg-1: #FFFFFF;
  --bg-2: var(--gray-50);
  --bg-3: var(--gray-100);

  --border-1: var(--gray-200);
  --border-2: var(--gray-300);

  /* Type */
  --font-sans:"Host Grotesk","Arial","Helvetica Neue",system-ui,sans-serif;

  /* Type scale (mobile-tuned) */
  --fs-hero:34px; --fs-display:28px; --fs-h1:24px; --fs-h2:20px; --fs-h3:17px;
  --fs-body:16px; --fs-body-s:14px; --fs-caption:12.5px; --fs-micro:11px;

  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;

  --lh-tight:1.08; --lh-snug:1.2; --lh-normal:1.4; --lh-relaxed:1.55;
  --tracking-tight:-0.02em; --tracking-caps:0.1em; --tracking-wide:0.04em;

  /* Spacing (4px base) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px; --space-10:64px;

  /* Radii */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px;
  --radius-xl:16px; --radius-2xl:22px; --radius-pill:999px;

  /* Shadows */
  --shadow-xs:0 1px 2px rgba(10,14,20,.05);
  --shadow-sm:0 1px 3px rgba(10,14,20,.07),0 1px 2px rgba(10,14,20,.05);
  --shadow-md:0 6px 16px rgba(10,14,20,.08),0 2px 6px rgba(10,14,20,.05);
  --shadow-lg:0 18px 40px rgba(10,14,20,.14),0 6px 14px rgba(10,14,20,.07);
  --shadow-blue:0 10px 24px rgba(0,102,204,.28);
  --shadow-focus:0 0 0 3px rgba(0,102,204,.28);

  /* Motion */
  --ease-standard:cubic-bezier(.2,.8,.2,1);
  --ease-emphatic:cubic-bezier(.16,1,.3,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
}

* { box-sizing:border-box; }

/* ---------- App shell ---------------------------------------- */
.mp-app {
  font-family:var(--font-sans);
  color:var(--fg-1);
  background:var(--bg-2);
  height:100%;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.mp-scroll {
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.mp-scroll::-webkit-scrollbar{ width:0; height:0; }

/* ---------- Brand wordmark (placeholder) --------------------- */
.mp-logo {
  font-family:var(--font-sans);
  font-weight:var(--fw-black);
  letter-spacing:-0.04em;
  font-size:22px;
  line-height:1;
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:2px;
}
.mp-logo .om {
  display:inline-flex; align-items:center; justify-content:center;
  width:1.05em; height:1.05em; margin-right:1px;
}
.mp-logo--ink { color:var(--mopar-ink); }
.mp-logo--blue { color:var(--mopar-blue); }

/* ---------- Top app bar -------------------------------------- */
.mp-appbar {
  padding:62px 16px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--mopar-ink);
  color:#fff;
  position:relative; z-index:5;
}
.mp-appbar--blue { background:var(--mopar-blue); }
.mp-appbar__actions { display:flex; align-items:center; gap:8px; }

/* language pill */
.mp-lang {
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 10px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius-pill);
  color:#fff; font-size:13px; font-weight:var(--fw-semibold);
  cursor:pointer; transition:background var(--dur-fast) var(--ease-standard);
}
.mp-lang:hover{ background:rgba(255,255,255,.2); }
.mp-iconbtn {
  width:36px; height:36px; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  color:#fff; cursor:pointer; transition:background var(--dur-fast) var(--ease-standard);
}
.mp-iconbtn:hover{ background:rgba(255,255,255,.2); }
.mp-iconbtn svg{ width:18px; height:18px; }

/* ---------- Progress stepper --------------------------------- */
.mp-steps {
  display:flex; align-items:center; gap:6px;
  padding:10px 16px;
  background:var(--bg-1); border-bottom:1px solid var(--border-1);
}
.mp-steps__seg { flex:1; height:4px; border-radius:var(--radius-pill); background:var(--gray-200); overflow:hidden; }
.mp-steps__seg i { display:block; height:100%; width:0; background:var(--mopar-blue);
  transition:width var(--dur-slow) var(--ease-emphatic); }
.mp-steps__seg.is-done i{ width:100%; }
.mp-steps__seg.is-active i{ width:50%; }
.mp-steplabel { padding:0 16px 10px; background:var(--bg-1); }
.mp-steplabel small{ color:var(--fg-3); font-size:12px; font-weight:var(--fw-semibold);
  text-transform:uppercase; letter-spacing:var(--tracking-caps); }
.mp-steplabel div{ font-size:18px; font-weight:var(--fw-bold); margin-top:2px; }

/* ---------- Typography helpers ------------------------------- */
.mp-eyebrow { font-size:12px; font-weight:var(--fw-bold); text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--mopar-blue); }
.mp-eyebrow--light{ color:var(--mopar-blue-bright); }
.mp-hero-h { font-size:var(--fs-hero); font-weight:var(--fw-black); line-height:var(--lh-tight);
  letter-spacing:var(--tracking-tight); }
.mp-h1 { font-size:var(--fs-h1); font-weight:var(--fw-bold); line-height:var(--lh-snug);
  letter-spacing:var(--tracking-tight); }
.mp-h2 { font-size:var(--fs-h2); font-weight:var(--fw-bold); line-height:var(--lh-snug); }
.mp-h3 { font-size:var(--fs-h3); font-weight:var(--fw-semibold); line-height:var(--lh-snug); }
.mp-body { font-size:var(--fs-body); font-weight:var(--fw-regular); line-height:var(--lh-relaxed); color:var(--fg-2); }
.mp-body-s { font-size:var(--fs-body-s); line-height:var(--lh-normal); color:var(--fg-2); }
.mp-caption { font-size:var(--fs-caption); line-height:var(--lh-normal); color:var(--fg-3); }
.mp-muted { color:var(--fg-3); }

/* ---------- Buttons ------------------------------------------ */
.mp-btn {
  font-family:var(--font-sans); font-size:16px; font-weight:var(--fw-bold);
  border-radius:var(--radius-md); border:1px solid transparent;
  padding:0 20px; height:52px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform var(--dur-fast) var(--ease-standard),
             background var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
  width:100%;
}
.mp-btn svg{ width:18px; height:18px; }
.mp-btn--primary { background:var(--mopar-blue); color:#fff; box-shadow:var(--shadow-blue); }
.mp-btn--primary:hover { background:var(--mopar-blue-hover); }
.mp-btn--primary:active { background:var(--mopar-blue-press); transform:translateY(1px); }
.mp-btn--dark { background:var(--mopar-ink); color:#fff; }
.mp-btn--dark:hover { background:#1a222e; }
.mp-btn--ghost { background:transparent; color:var(--mopar-blue); border-color:var(--border-2); }
.mp-btn--ghost:hover { background:var(--blue-50); border-color:var(--mopar-blue); }
.mp-btn--small { height:42px; font-size:14px; padding:0 16px; width:auto; }
.mp-btn:disabled, .mp-btn[aria-disabled="true"] { opacity:.45; cursor:not-allowed; box-shadow:none; transform:none; }

.mp-textlink { color:var(--mopar-blue); font-weight:var(--fw-semibold); cursor:pointer;
  text-decoration:none; }
.mp-textlink:hover { color:var(--mopar-blue-hover); text-decoration:underline; text-underline-offset:2px; }

/* ---------- Cards -------------------------------------------- */
.mp-card {
  background:var(--bg-1); border:1px solid var(--border-1);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-sm);
}
.mp-card--pad { padding:var(--space-5); }
.mp-card--flat { box-shadow:none; }

/* ---------- Inputs ------------------------------------------- */
.mp-field { display:flex; flex-direction:column; gap:6px; }
.mp-label { font-size:13px; font-weight:var(--fw-semibold); color:var(--fg-2); }
.mp-input {
  font-family:var(--font-sans); font-size:16px; color:var(--fg-1);
  height:50px; padding:0 14px; width:100%;
  background:var(--bg-1); border:1px solid var(--border-2); border-radius:var(--radius-md);
  transition:border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.mp-input::placeholder{ color:var(--gray-400); }
.mp-input:focus { outline:none; border-color:var(--mopar-blue); box-shadow:var(--shadow-focus); }
.mp-input--err { border-color:var(--danger); }
.mp-input.mono { font-variant-numeric:tabular-nums; letter-spacing:.18em; text-transform:uppercase; font-weight:var(--fw-semibold); }
.mp-help { font-size:12px; color:var(--fg-3); }
.mp-err { font-size:12px; color:var(--danger-fg); font-weight:var(--fw-semibold); }

/* ---------- Chips / badges ----------------------------------- */
.mp-chip {
  display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 12px; border-radius:var(--radius-pill);
  font-size:12.5px; font-weight:var(--fw-semibold);
  background:var(--bg-3); color:var(--fg-2); border:1px solid var(--border-1);
}
.mp-badge { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px;
  border-radius:var(--radius-pill); font-size:12px; font-weight:var(--fw-bold);
  text-transform:uppercase; letter-spacing:.04em; }
.mp-badge svg{ width:14px; height:14px; }
.mp-badge--success{ background:var(--success-bg); color:var(--success-fg); }
.mp-badge--warning{ background:var(--warning-bg); color:var(--warning-fg); }
.mp-badge--info{ background:var(--info-bg); color:var(--info-fg); }
.mp-badge--danger{ background:var(--danger-bg); color:var(--danger-fg); }

/* ---------- Selectable option cards -------------------------- */
.mp-option {
  display:flex; align-items:center; gap:14px;
  padding:16px; border:1.5px solid var(--border-2); border-radius:var(--radius-lg);
  background:var(--bg-1); cursor:pointer; width:100%; text-align:left;
  transition:border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.mp-option:hover { border-color:var(--mopar-blue); }
.mp-option.is-sel { border-color:var(--mopar-blue); background:var(--blue-50); box-shadow:var(--shadow-focus); }
.mp-radio { width:22px; height:22px; border-radius:50%; border:2px solid var(--border-2); flex-shrink:0; position:relative; }
.mp-option.is-sel .mp-radio { border-color:var(--mopar-blue); }
.mp-option.is-sel .mp-radio::after { content:""; position:absolute; inset:4px; border-radius:50%; background:var(--mopar-blue); }

/* ---------- Dropzone ----------------------------------------- */
.mp-dz {
  border:2px dashed var(--gray-300); border-radius:var(--radius-lg);
  padding:28px 18px; text-align:center; background:var(--bg-2);
  transition:border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
  cursor:pointer;
}
.mp-dz:hover { border-color:var(--mopar-blue); background:var(--blue-50); }
.mp-dz__icon { width:48px; height:48px; border-radius:14px; background:var(--blue-50);
  color:var(--mopar-blue); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.mp-dz__icon svg{ width:24px; height:24px; }

.mp-file { display:flex; align-items:center; gap:12px; padding:12px;
  border:1px solid var(--border-1); border-radius:var(--radius-md); background:var(--bg-1); }
.mp-file__thumb { width:42px; height:42px; border-radius:8px; background:var(--blue-50);
  color:var(--mopar-blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.mp-file__thumb svg{ width:20px; height:20px; }
.mp-file__thumb img{ width:100%; height:100%; object-fit:cover; }
.mp-progress { height:5px; background:var(--gray-200); border-radius:var(--radius-pill); overflow:hidden; }
.mp-progress i{ display:block; height:100%; background:var(--mopar-blue); transition:width var(--dur-base) linear; }

/* ---------- Screen layout (body grows, footer pins bottom) ---- */
.mp-screen { display:flex; flex-direction:column; min-height:100%; }
.mp-screen > .mp-footer { margin-top:auto; }

/* ---------- Sheet footer (sticky CTA) ------------------------ */
.mp-footer {
  padding:14px 16px 26px;
  background:var(--bg-1); border-top:1px solid var(--border-1);
  position:relative; z-index:4;
}

/* ---------- Misc --------------------------------------------- */
.mp-divider{ height:1px; background:var(--border-1); border:0; }
.mp-row{ display:flex; align-items:center; }
.mp-spread{ display:flex; align-items:center; justify-content:space-between; }
.mp-stack{ display:flex; flex-direction:column; }
.mp-pad{ padding:var(--space-5); }
.mp-list-reset{ list-style:none; margin:0; padding:0; }

@keyframes mp-fade-up { from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }
@keyframes mp-fade { from{ opacity:0;} to{ opacity:1; } }
@keyframes mp-spin { to{ transform:rotate(360deg); } }
.mp-anim-up{ animation:mp-fade-up var(--dur-slow) var(--ease-emphatic) both; }
.mp-anim-fade{ animation:mp-fade var(--dur-base) var(--ease-standard) both; }
.mp-spin{ animation:mp-spin 900ms linear infinite; }
@media (prefers-reduced-motion: reduce){
  .mp-anim-up,.mp-anim-fade{ animation:none; }
}