/* ============================================================
   MOPAR REBATE CENTER — Desktop layout
   Builds on mopar-theme.css tokens. Desktop-first, with a
   single-column fallback under 900px.
   ============================================================ */

html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-2);
  -webkit-font-smoothing: antialiased;
}

.dt-page { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- Top nav ----------------------------------------- */
.dt-nav {
  position: sticky; top: 0; z-index: 30;
  background: #fff; border-bottom: 1px solid var(--border-1);
}
.dt-nav__inner {
  max-width: 1200px; margin: 0 auto; height: 70px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 32px; gap: 24px;
}
.dt-nav__brand { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.dt-nav__brand .sep { width: 1px; height: 26px; background: var(--border-2); }
.dt-nav__brand .lbl { font-size: 14px; font-weight: 600; color: var(--fg-2); }
.dt-nav__actions { display: flex; align-items: center; gap: 14px; }

.dt-lang {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px;
  background: var(--bg-2); border: 1px solid var(--border-1); border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600; color: var(--fg-1); cursor: pointer;
}
.dt-lang:hover { background: var(--bg-3); }

/* ---------- Container --------------------------------------- */
.dt-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; width: 100%; box-sizing: border-box; }

/* ---------- Hero -------------------------------------------- */
.dt-hero { position: relative; overflow: hidden; background: #1c2733; }
.dt-hero__photo {
  position: absolute; inset: 0;
  background-image: url("assets/hero-car-burnout.jpeg");
  background-size: cover; background-position: 58% center; background-repeat: no-repeat;
  filter: brightness(1.2) saturate(1.2) hue-rotate(14deg);
}
.dt-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,12,28,.9) 0%, rgba(0,16,39,.72) 34%, rgba(0,16,39,.15) 60%, rgba(0,16,39,0) 80%);
}
.dt-hero__inner { position: relative; min-height: 540px; display: flex; align-items: center; padding: 56px 32px; }
.dt-hero__text { max-width: 560px; }
.dt-hero__text .mp-eyebrow { color: var(--mopar-blue-bright); }
.dt-hero h1 { font-size: 52px; font-weight: var(--fw-black); line-height: 1.04; letter-spacing: -0.025em; margin: 14px 0 0; color: #fff; text-shadow: 0 2px 24px rgba(0,10,30,.6); }
.dt-hero h1 .accent { color: var(--mopar-blue-bright); }
.dt-hero p { font-size: 18px; line-height: 1.5; color: rgba(255,255,255,.85); margin: 16px 0 0; max-width: 30em; text-shadow: 0 1px 14px rgba(0,10,30,.6); }

/* ---------- Offer strip ------------------------------------- */
.dt-strip { background: var(--mopar-ink); color: #fff; }
.dt-strip__inner { max-width: 1200px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* ---------- Sections ---------------------------------------- */
.dt-section { padding: 64px 0; }
.dt-section h2 { font-size: 34px; font-weight: var(--fw-bold); letter-spacing: -0.02em; margin: 0 0 8px; }
.dt-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dt-card { background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.dt-card--pad { padding: 28px; }

.dt-step-num {
  width: 30px; height: 30px; border-radius: 50%; background: var(--mopar-ink); color: #fff;
  font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dt-howicon {
  width: 56px; height: 56px; border-radius: 14px; background: var(--blue-50); color: var(--mopar-blue);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}

/* ---------- Footer ------------------------------------------ */
.dt-footer { margin-top: auto; background: var(--mopar-ink); color: rgba(255,255,255,.7); }
.dt-footer__inner { max-width: 1200px; margin: 0 auto; padding: 40px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dt-footer__brands { background: #fff; border-radius: var(--radius-lg); padding: 14px 22px; }

/* ---------- Wizard ------------------------------------------ */
.dt-wizard { max-width: 1040px; margin: 0 auto; padding: 44px 32px 72px; display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: start; width: 100%; box-sizing: border-box; }
.dt-rail { position: sticky; top: 102px; display: flex; flex-direction: column; gap: 18px; }
.dt-rail__offer { background: linear-gradient(150deg,#002A5C,#001631); color: #fff; border-radius: var(--radius-xl); padding: 22px; }
.dt-steplist { display: flex; flex-direction: column; gap: 2px; }
.dt-steprow { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--radius-md); }
.dt-steprow.is-active { background: var(--blue-50); }
.dt-steprow__dot {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  background: var(--gray-200); color: var(--fg-3);
}
.dt-steprow.is-done .dt-steprow__dot { background: var(--success); color: #fff; }
.dt-steprow.is-active .dt-steprow__dot { background: var(--mopar-blue); color: #fff; }
.dt-steprow__lbl { font-size: 14.5px; font-weight: 600; color: var(--fg-3); }
.dt-steprow.is-active .dt-steprow__lbl, .dt-steprow.is-done .dt-steprow__lbl { color: var(--fg-1); }

.dt-panel { background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); overflow: hidden; }
.dt-panel__head { padding: 28px 36px 0; }
.dt-panel__head .kick { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--mopar-blue); }
.dt-panel__head h2 { font-size: 28px; font-weight: var(--fw-bold); letter-spacing: -0.02em; margin: 6px 0 0; }
.dt-panel__body { padding: 24px 36px; }
.dt-panel__foot { padding: 20px 36px; border-top: 1px solid var(--border-1); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--bg-1); }

.dt-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* buttons reuse mp-btn; desktop sizing tweaks */
.dt-btn { width: auto; min-width: 200px; }
.dt-btn--full { width: 100%; }

/* ---------- Responsive fallback ----------------------------- */
@media (max-width: 980px) {
  .dt-hero__inner { padding: 40px 24px; min-height: 460px; align-items: flex-end; }
  .dt-hero__photo { background-position: 64% center; }
  .dt-hero__scrim { background: linear-gradient(0deg, rgba(0,12,28,.94) 0%, rgba(0,16,39,.55) 44%, rgba(0,16,39,.12) 100%); }
  .dt-hero__text { max-width: 100%; }
  .dt-hero h1 { font-size: 34px; }
  .dt-grid-3 { grid-template-columns: 1fr; }
  .dt-wizard { grid-template-columns: 1fr; gap: 22px; padding: 28px 20px 56px; }
  .dt-rail { position: static; }
  .dt-container, .dt-nav__inner, .dt-strip__inner, .dt-footer__inner, .dt-hero__inner { padding-left: 20px; padding-right: 20px; }
  .dt-section { padding: 44px 0; }
}
@media (max-width: 560px) {
  .dt-formgrid { grid-template-columns: 1fr; }
  .dt-panel__head, .dt-panel__body, .dt-panel__foot { padding-left: 20px; padding-right: 20px; }
  .dt-nav__brand .lbl { display: none; }
}