/* Full-page wrapper based on Figma frame */
.page-frame {
    width: 100%;
    min-height: 100vh;

    /* Figma padding top */
    padding-top: 0px;

    /* This centers the content like your Figma frame */
    display: flex;
    justify-content: center;

    /* Background gradient from Figma */
    background: linear-gradient(
        180deg, 
        #0B0B0B 0%, 
        #131415 50%, 
        #0B0B0B 100%
    );
}

.automotive-card {
    width: 100%;
    background: rgba(255,255,255,0.02);
    border-radius: 32px;

    /* AutomotiveCard gains height based on internal content */
    padding: 0; /* Figma shows padding on VehicleDashboard instead */

    display: flex;
    justify-content: center;

    box-shadow: 0px 20px 60px rgba(0,0,0,0.5);
}


.vehicle-dashboard {
    width: 1400px;

    display: flex;
    flex-direction: column;
    gap: 48px;

    padding: 48px;

    /* no background unless you want it later */
}

#vehicle-hero {
    width: 1304px;
    height: 562px;

    border-radius: 32px;
    overflow: hidden;

    /* Exact gradient from Figma */
    background: linear-gradient(
        180deg,
        rgba(24, 24, 27, 0.60) 0%,
        rgba(9, 9, 11, 0.80) 100%
    );

    /* Stroke inside */
    border: 1px solid rgba(39, 39, 42, 0.3);

    /* Drop shadow (still placeholder unless you send the shadow panel) */
    box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.5);

    /* Since this card is centered inside VehicleDashboard */
    margin: 0 auto;

    position: relative;

}

.vh-gradient-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(255,255,255,0.20) 50%,
    rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 3;
}

/* Container 2 — faint empty box under the image (Figma: #0A0A0A @ 2%) */
.vh-image-tint {
  position: absolute;
  top: 56px;          /* Figma Y */
  left: 418.72px;     /* Figma X */
  width: 466.56px;    /* Figma W */
  height: 450px;      /* Figma H */
  background: #0A0A0A;
  opacity: 0.02;      /* 2% */
  z-index: 1;         /* behind content */
}

/* Container 3 (already created earlier). Keep it as a positioned wrapper. */
.vh-content {
  position: absolute;
  top: 1px;          /* Figma X=1, Y=1 inside the 1px hero stroke */
  left: 1px;
  width: 1302px;     /* Figma: W 1302 */
  height: 560px;     /* Figma: H 560 */
  /* no fill, no stroke, radius 0 */
  overflow: visible; /* Clip content is OFF in your panel */
  z-index: 2;
}


/* ImageBox (already positioned from your last step)
   X=549.59, Y=80, W=704.41, H=400, clip content ON */
.image-box {
  position: absolute;
  top: 80px;          /* ⬅️ back to original placement */
  left: 549.59px;
  width: 704.41px;
  height: 400px;
  overflow: hidden;
}



/* ImageWithFallback — fills ImageBox, clipped, with drop shadow */
.image-with-fallback {
  position: absolute;
  inset: 0;
  background: transparent;
  box-shadow: none;

  display: flex;
  align-items: flex-end;      /* car sits on “floor” */
  justify-content: center;
  padding-bottom: 22px;       /* tweak ride height */

  z-index: 1;
}

.image-with-fallback img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;

  /* only shadow – no blur on the car itself */
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.6));
}


/* blur — separate layer using same image, blurred behind the main image
   Figma: Layer blur (no radius) */

.image-blur {
      display: none;         /* match card rounding */
}

/* Ensure hero section can host absolutely positioned children */
#vehicle-hero {
  position: relative;
}

/* Top-right manufacturer logo */
.vh-make-logo {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 144px;
  height: 144px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
}

/* Bottom-right trim badge (e.g., BMW M Sport) */
.vh-trim-badge {
  position: absolute;
  bottom: 30px;
  right: 56px;
  width: 160px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
  display: block;  /* <--- show it for now */
}

.vh-make-logo,
.vh-trim-badge {
  z-index: 4;
}



/* InfoLeft was already positioned: X:48, Y:48, W:453.59, H:464 */

/* VehicleName */
.vehicle-name {
  position: absolute;
  left: 0px;           /* Figma X: 0 */
  top: 7px;            /* Figma Y: 7 */
  width: 453.59px;     /* Figma W */
  height: 210px;       /* Figma H */
  border-radius: 0;
  background: transparent;
  overflow: visible;   /* Clip content: off */
  /* (content comes later) */
}

/* 2×2 stats block */
.stats-2x2 {
  position: absolute;
  left: 0px;           /* Figma X: 0 */
  top: 249px;          /* Figma Y: 249 */
  width: 453.59px;     /* Figma W */
  height: 208px;       /* Figma H */
  border-radius: 0;
  background: transparent;
  overflow: visible;   /* Clip content: off */

  /* internal layout when we add cards:
     flow horizontal with row/column gaps of 16px (from your panel) */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  column-gap: 16px;
  row-gap: 16px;
}
/* ---------- InfoLeft placement (from your Figma panel) ---------- */
#vehicle-hero .info-left{
  position:absolute;
  left:48px;          /* X: 48 */
  top:62px;           /* Y: 62 */
  width:454px;        /* W: 453.59 */
  height:auto;        /* it will expand with content */
  display:flex;
  flex-direction:column;
  gap:16px;           /* visual breathing room between rows */
}

/* ---------- VehicleName block ---------- */
.vehicle-name{
  width:454px;        /* 453.59 in Figma */
  display:flex;
  flex-direction:column;
  gap:16px;           /* matches your 16px row gaps in later screenshots */
}

/* Year (container is just a 32px row) */
.vehicle-name .year{
  height:32px;        /* H: 32 */
  display:flex;
  align-items:center;
}
.vehicle-name .yeartext{
  font-family:"Arimo", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:400;              /* Regular */
  font-size:24px;               /* 24 */
  line-height:32px;             /* 32 */
  letter-spacing:0;             /* not tracked in Figma for this row */
  color:#71717B;                /* Fill: 71717B */
}

/* Model (48px row, light grey text) */
.vehicle-name .model{
  height:48px;        /* H: 48 */
  display:flex;
  align-items:center;
}
.vehicle-name .modeltext{
  font-family:"Arimo", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:400;              /* Regular */
  font-size:48px;               /* 48 */
  line-height:48px;             /* 48 */
  letter-spacing:-1.2px;        /* -1.2 px as per Figma */
  color:#9F9FA9;                /* Fill: 9F9FA9 */
  text-transform:none;
}

/* Make (48px row, white text) */
.vehicle-name .make{
  height:48px;        /* H: 48 */
  display:flex;
  align-items:center;
}
.vehicle-name .maketext{
  font-family:"Arimo", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:400;              /* Regular */
  font-size:48px;               /* 48 */
  line-height:48px;             /* 48 */
  letter-spacing:-1.2px;        /* -1.2 px as per Figma */
  color:#FFFFFF;                /* Fill: FFFFFF */
  text-transform:none;
}
/* Pill container */
.vehicle-name .premanalyticreport{
  display: inline-flex;
  align-items: center;
  gap: 8px;                    /* Figma spacing */
  padding: 9px 12px;           /* gives ~38px overall height like Figma */
  border-radius: 9999px;       /* huge corner radius */
  background: rgba(255,255,255,0.05);  /* Fill 5% */
  border: 1px solid rgba(255,255,255,0.10); /* Stroke 10% */
  width: max-content;
}

/* The green dot */
.vehicle-name .premanalyticreport .dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00D492;         /* your green */
  flex: 0 0 6px;
}

/* The text */
.vehicle-name .premanalyticreport .reporttext{
  font-family: "Arimo", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;            /* Regular */
  font-size: 14px;             /* Figma 14 */
  line-height: 20px;           /* Figma 20 */
  letter-spacing: 0;
  color: #D4D4D8;              /* Figma D4D4D8 */
  white-space: nowrap;
}

/* 2×2 cell: EngineFamily outer card */
.engine-family{
  width: 218.8px;
  height: 96px;
  box-sizing: border-box;
  padding: 21px;           /* Figma padding */
  border-radius: 16px;     /* Figma corner radius */
  background: rgba(255,255,255,0.03);          /* faint fill */
  border: 1px solid rgba(255,255,255,0.06);    /* inside stroke look */
  display: flex;           /* to position the inner box later */
  align-items: center;
}

/* Inner wrapper should be layout-only */
.enginefamilybox{
  display: flex;
  align-items: center;
  gap: 16px;         /* spacing between icon and text stack */
  width: auto;
  height: auto;
  padding: 0;
  background: transparent;   /* ← remove the inner card look */
  border: 0;                 /* ← remove stroke */
  border-radius: 0;          /* not needed */
  box-shadow: none;
  box-sizing: border-box;
}


/* 48×48 icon holder with 14 radius, faint panel */
.engineiconbox{
  width: 48px;
  height: 48px;
  border-radius: 14px;                         /* Corner radius: 14 */
  background: rgba(255,255,255,0.05);          /* Fill: FFFFFF @ 5% */
  border: 1px solid rgba(255,255,255,0.06);    /* Stroke: FFFFFF @ 6% */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;                            /* clip content: on */
}

/* 24×24 placeholder “gear” dot – swap for real SVG later */
.engineicon{
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #D4D4D8;                         /* Selection color: D4D4D8 */
}

/* -------- EngineFamily text stacks -------- */

/* container that holds title + description (already positioned by enginefamilybox) */
.eng_textbox{
  display:flex;
  flex-direction:column;
  gap:2px;                 /* Figma gap ≈ 2 */
}

/* title row */
.eng_titlebox{
  width:91.06px;          /* from Figma */
  height:32px;
  display:flex;
  align-items:center;     /* vertical center like Auto-layout */
}

/* “EA888” */
.enginetitletext{
  font-family:"Arimo", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:400;        /* Regular */
  font-size:24px;
  line-height:32px;       /* matches row height */
  letter-spacing:0;       /* Hug, no tracking */
  color:#FFFFFF;          /* Fill: FFFFFF */
}

/* description row */
.enginedescriptionbox{
  width:91.06px;          /* same width as Figma row */
  height:16px;
  display:flex;
  align-items:center;
}

/* “ENGINE FAMILY” */
.engine-family-text{
  font-family:"Arimo", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:400;        /* Regular */
  font-size:12px;
  line-height:16px;       /* row height */
  letter-spacing:0.6px;   /* Figma shows ~0.6px */
  color:#71717B;          /* Fill: 71717B */
  text-transform:uppercase;
}


/* 2×2 grid (already present) — keep as-is
.stats-2x2 { 
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 16px;
}
*/

/* Generic stat tile (matches your existing card look) */
.stat-card{
  width: 218.8px;                 /* Figma W */
  height: 96px;                   /* Figma H */
  padding: 21px;                  /* Figma padding */
  border-radius: 16px;            /* Figma corner radius */
  background: rgba(255,255,255,0.03);      /* Fill 3% */
  border: 1px solid rgba(255,255,255,0.06);/* Stroke 6% (inside look) */
  display: flex;
  align-items: center;
  gap: 16px;                      /* space between icon and text */
  box-sizing: border-box;
}

/* 48×48 icon pane */
.stat-card .iconbox{
  width: 48px;
  height: 48px;
  border-radius: 14px;                       /* Figma 14 */
  background: rgba(255,255,255,0.05);        /* Fill 5% */
  border: 1px solid rgba(255,255,255,0.06);  /* Stroke 6% */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;                          /* like “clip content” */
}

/* placeholder icon (swap for SVG later) */
.stat-card .icon.placeholder{
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #D4D4D8; /* neutral placeholder */
}

/* text stack */
.stat-card .textstack{
  display: flex;
  flex-direction: column;
  gap: 2px;                    /* small vertical gap */
}

/* big value (use 24 like your EA888 tile) */
.stat-card .value{
  font-family:"Arimo", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: #FFFFFF;
  letter-spacing: 0;
}

/* small label */
.stat-card .label{
  font-family:"Arimo", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.6px;   /* matches the caps label look */
  color: #71717B;
  text-transform: uppercase;
}


/* Layout for the whole section (keep your existing width/height if you like) */
#performance_and_vhealthscore {
  width: 1304px;
  min-height: 666px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
}

.pm-card,
.vhs-card {
  height: 666px;
  border-radius: 24px;
  border: 1px solid rgba(39, 39, 42, 0.3);
  box-sizing: border-box;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  padding: 41px 48px;
  font-family: "Arimo", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* Performance card background (same as before) */
.pm-card {
  background: linear-gradient(180deg, #18181b 0%, #09090b 100%);
}

/* Vehicle Health Score background – slightly different fade */
.vhs-card {
  background:
    radial-gradient(130% 130% at 20% 0%, #18181f 0%, transparent 55%),
    linear-gradient(180deg, #111116 0%, #050508 100%);
}

/* ========== Performance Metrics (left) ========== */

.pm-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pm-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-title {
  font-size: 28px;
  line-height: 36px;
  font-weight: 400;
  color: #ffffff;
  margin: 0;
}

.pm-subtitle {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #71717b;
  margin: 0;
}

.pm-metric-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 8px;
}

.pm-metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pm-name {
  font-size: 16px;
  line-height: 24px;
  color: #e4e4e7;
}

.pm-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.pm-number {
  font-size: 20px;
  line-height: 28px;
  color: #ffffff;
}

.pm-unit {
  font-size: 14px;
  line-height: 20px;
  color: #a1a1aa;
}

.pm-bar-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #27272a;
  overflow: hidden;
}


.pm-bar-fill {
  height: 100%;
  border-radius: inherit;
  width: 0;                       /* start collapsed */
  transition: width 0.6s ease-out;/* animate width changes */
}

/* Individual bar colours only – width comes from JS */
.pm-accel .pm-bar-fill {
  background: linear-gradient(90deg, #00d492 0%, #00f6c8 100%);
}

.pm-topspeed .pm-bar-fill {
  background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
}

.pm-hp .pm-bar-fill {
  background: linear-gradient(90deg, #a855f7 0%, #c084fc 100%);
}

.pm-torque .pm-bar-fill {
  background: linear-gradient(90deg, #fb923c 0%, #f97316 100%);
}


/* ========== Vehicle Health Score (right) ========== */

.vhs-card {
  position: relative;            /* allow overlay panel inside */
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.vhs-header {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 36px;           /* space for info icon */
}

.vhs-title {
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  color: #ffffff;
  margin: 0;
}

.vhs-subtitle {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #71717b;
  margin: 0;
}

.vhs-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* Donut gauge */
/* --- Vehicle Health Score donut --- */

.vhs-main {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Container for SVG + inner content */
.vhs-gauge {
  position: relative;
  width: 256px;
  height: 256px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* The donut SVG fills the container */
.vhs-gauge-svg {
  width: 100%;
  height: 100%;
}

/* Background ring */
.vhs-ring-bg {
  fill: none;
  stroke: #202025;
  stroke-width: 16;
}

/* Foreground animated ring */
.vhs-ring-fg {
  fill: none;
  stroke: #00d492;
  stroke-width: 16;
  stroke-linecap: round;

  /* start from top instead of right */
  transform: rotate(-90deg);
  transform-origin: 100px 100px;

  /* circle length for r=80 → ~502px */
  stroke-dasharray: 502;
  stroke-dashoffset: 502;
}

/* keyframes use the custom property --vh-target-pct */
@keyframes vh-gauge-sweep {
  from {
    stroke-dashoffset: 502;
  }
  to {
    stroke-dashoffset: calc(
      502 - (502 * var(--vh-target-pct, 0) / 100)
    );
  }
}

/* Inner disc with the number in the centre */
.vhs-gauge-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62%;
  height: 62%;
  border-radius: 50%;
  background: linear-gradient(180deg, #111116 0%, #050508 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.vhs-score {
  font-size: 40px;
  line-height: 48px;
  color: #ffffff;
}

.vhs-score-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #71717b;
}




/* Bottom cards */
.vhs-cards {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vhs-info-card {
  height: 88px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  padding: 20px 24px;
  box-sizing: border-box;
  gap: 16px;
}

.vhs-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 999px;

  /* centre icon */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* keep the SVG nicely sized and centred */
.vhs-icon-circle svg {
  width: 20px;
  height: 20px;
  display: block;
}


/* Simple placeholder colors for icons; swap for real SVGs later */
.vhs-icon-circle.leaf {
  background: rgba(0, 212, 146, 0.15);
}

.vhs-icon-circle.shield {
  background: rgba(59, 130, 246, 0.15);
}

.vhs-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.vhs-card-title {
  font-size: 16px;
  line-height: 24px;
  color: #e4e4e7;
}

.vhs-card-subtitle {
  font-size: 14px;
  line-height: 20px;
  color: #a1a1aa;
}

.vhs-pill {
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

.vhs-pill-amber {
  background: rgba(250, 204, 21, 0.15);
  color: #facc15;
}

.vhs-value {
  font-size: 16px;
  line-height: 24px;
  color: #e4e4e7;
  white-space: nowrap;
}

.vhs-breakdown {
  border-radius: 16px;
  background: rgba(12, 12, 16, 0.9);
  border: 1px solid rgba(63, 63, 70, 0.9);
  padding: 16px 18px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vhs-breakdown-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vhs-breakdown-title {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #a1a1aa;
}

.vhs-breakdown-subtitle {
  font-size: 13px;
  line-height: 1.4;
  color: #71717b;
}

.vhs-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 24px;
  margin-top: 8px;
}

@media (max-width: 1100px) {
  .vhs-breakdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .vhs-breakdown-grid {
    grid-template-columns: 1fr;
  }
}

.vhs-breakdown-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.vhs-breakdown-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #a1a1aa;
}

.vhs-breakdown-value {
  font-size: 14px;
  font-weight: 500;
  color: #f4f4f5;
}

.vhs-breakdown-meta {
  font-size: 12px;
  color: #71717b;
}

.vhs-info-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(63, 63, 70, 0.9);
  background: rgba(24, 24, 27, 0.95);
  color: #e4e4e7;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  transition:
    background 0.15s ease-out,
    transform 0.15s ease-out,
    box-shadow 0.15s ease-out;
}

.vhs-info-toggle:hover {
  background: rgba(39, 39, 42, 0.98);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7);
}

.vhs-info-toggle:focus-visible {
  outline: 2px solid #22c55e;
  outline-offset: 2px;
}

/* Floating breakdown panel – overlays inside the card instead of pushing layout */
.vhs-breakdown-panel {
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 32px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.18s ease-out,
    transform 0.18s ease-out;
}

.vhs-breakdown-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* ===== Running Cost Summary + Production Timeline section ===== */

#runningcost_and_timeline {
  width: 1304px;
  min-height: 666px;
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
}

/* Shared card shell */
.rc-card,
.pt-card {
  height: 666px;
  border-radius: 24px;
  border: 1px solid rgba(39, 39, 42, 0.3);
  background: linear-gradient(180deg, #18181b 0%, #09090b 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  padding: 41px 48px;
  font-family: "Arimo", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* ------- Running Cost Summary (left) ------- */

.rc-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.rc-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rc-title {
  margin: 0;
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  color: #ffffff;
}

.rc-subtitle {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #71717b;
}

/* Tax card */

.rc-tax-card {
  height: 200px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  padding: 32px 36px;
  box-sizing: border-box;
  gap: 24px;
}

.rc-tax-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rc-tax-symbol {
  font-size: 28px;
  color: #e4e4e7;
}

.rc-tax-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.rc-tax-label {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e4e4e7;
}

.rc-tax-band {
  font-size: 14px;
  color: #a1a1aa;
}

.rc-tax-amount {
  font-size: 40px;
  line-height: 48px;
  color: #ffffff;
}

/* MPG section */

.rc-mpg-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.rc-mpg-heading {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #71717b;
}

/* Metric rows */

.rc-metric {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rc-metric-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rc-metric-name {
  font-size: 16px;
  line-height: 24px;
  color: #e4e4e7;
}

.rc-metric-right {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.rc-metric-avg {
  font-size: 12px;
  color: #a1a1aa;
}

.rc-metric-value {
  font-size: 16px;
  color: #ffffff;
}

/* Bars */

.rc-bar {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #27272a;
  overflow: hidden;
}

.rc-bar-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, #00d492 0%, #00f6c8 100%);
  border-radius: inherit;
  transition: width 0.7s ease-out; 
}

.rc-bar-marker {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 32px;
  background: #000000;
  border-radius: 999px;
  left: 0%;
  transform: translate(-50%, -50%);
  transition: left 0.7s ease-out;
}



/* Bottom banner */

.rc-banner {
  margin-top: 16px;
  height: 64px;
  border-radius: 16px;
  background: rgba(0, 212, 146, 0.1);
  border: 1px solid rgba(0, 212, 146, 0.3);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  box-sizing: border-box;
}

.rc-banner-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #00d492;
}

.rc-banner-text {
  font-size: 14px;
  color: #bbf7d0;
}

/* ------- Production Timeline (right) ------- */

.pt-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pt-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pt-title {
  margin: 0;
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  color: #ffffff;
}

.pt-subtitle {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #71717b;
}

/* Timeline */

.pt-timeline {
  position: relative;
  margin-top: 16px;
  padding: 24px 0 8px;
  display: flex;
  justify-content: space-between;
}

/* Static baseline track (from first to last node) */
.pt-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 40px; /* JS will fine-tune this to the circle centres */
  height: 2px;
  background: #18181b;
  border-radius: 999px;
  pointer-events: none;
}

/* Animated segments that get “drawn” left→right */
/* Animated segments that get “drawn” left→right */
.pt-line-segment {
  position: absolute;
  top: 40px; /* will be set precisely in JS */
  height: 2px;
  /* was: background: linear-gradient(90deg, #00d492 0%, #00f6c8 100%); */
  background: rgba(255, 255, 255, 0.3); /* same grey as circle outline */
  border-radius: 999px;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.5s ease-out,
    opacity 0.2s ease-out;
}


.pt-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1;

  /* initial animation state */
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  transition:
    transform 0.4s ease-out,
    opacity 0.4s ease-out;
}

.pt-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.4);

  /* centre the SVG icon */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* size + align the SVG itself */
.pt-icon-circle svg {
  width: 20px;
  height: 20px;
  display: block;
  color: #d4d4d8; /* if your SVG uses stroke="currentColor" */
}


.pt-year {
  font-size: 20px;
  line-height: 28px;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

.pt-label {
  font-size: 14px;
  color: #a1a1aa;
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

/* Info cards below */

.pt-info {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pt-info-card {
  height: 72px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-sizing: border-box;
}

.pt-info-label {
  font-size: 16px;
  color: #e4e4e7;
}

.pt-info-value {
  font-size: 16px;
  color: #ffffff;
}



/* ===== Ownership History ===== */

.oh-section {
  width: 1304px;
  margin: 48px auto 0;
}

/* Outer card shell */
/* Outer card shell */
.oh-card {
  /* height: 360px;   <-- remove this line */
  min-height: 360px;  /* keeps it at least this tall, but can grow */

  border-radius: 24px;
  border: 1px solid rgba(39, 39, 42, 0.3);
  background: linear-gradient(180deg, #18181b 0%, #09090b 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;

  /* now this *will* move the inner cards up/down */
  padding: 41px 48px 60px;

  font-family: "Arimo", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, sans-serif;
}


/* Heading */
.oh-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.oh-title {
  margin: 0;
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  color: #ffffff;
}

.oh-subtitle {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #71717b;
}

/* Track + connecting line */
.oh-track {
  position: relative;
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;         /* allow more than 1 row when lots of keepers */
  justify-content: center; /* ✅ centre 1–3 cards */
  gap: 24px;               /* spacing between cards */
}


.oh-track-line {
  position: absolute;
  top: 50%;
  left: 64px;             /* inset from card edges – tweak to match your circles */
  right: 64px;
  height: 2px;
  background: #27272a;
  transform: translateY(-50%);
  z-index: 0;             /* sit behind the cards */
}


/* Individual owner cards */
.oh-owner-card {
  position: relative;
  flex: 0 0 280px;   /* ✅ fixed width cards (tweak 280px to taste) */
  max-width: 280px;
  height: 210px;
  border-radius: 24px;
  background: rgba(15, 15, 18, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1; /* above track line */
}


/* Number badge – slightly lighter than card */
.oh-step-badge {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);          /* lighter grey */
  border: 1px solid rgba(255, 255, 255, 0.14);    /* stronger border */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #f4f4f5;
}

/* Owner title */
.oh-owner-title {
  margin-top: 8px;
  font-size: 18px;
  line-height: 24px;
  color: #ffffff;
}

/* Date row */
.oh-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.oh-date-icon {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e4e4e7;       /* icon stroke colour via currentColor */
  opacity: 0.9;
}

.oh-date-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}


.oh-date-text {
  font-size: 14px;
  line-height: 20px;
  color: #a1a1aa;
}

/* Duration pill */
.oh-duration-pill {
  margin-top: auto;
  align-self: flex-start;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 14px;
  line-height: 20px;
  color: #e4e4e7;
}

/* Current owner styling */
.oh-owner-current {
  background: radial-gradient(circle at top left, #00d49222 0%, transparent 55%),
    linear-gradient(180deg, #02281f 0%, #031e19 100%);
  border-color: rgba(0, 212, 146, 0.6);
}

.oh-step-current {
  background: rgba(0, 212, 146, 0.2);
  border-color: rgba(0, 212, 146, 0.75);
  color: #a7f3d0;
}

.oh-duration-current {
  background: rgba(0, 212, 146, 0.28);
  color: #6ee7b7;
}

/* ===== Plate Change History ===== */

.pch-section {
  width: 1304px;
  margin: 48px auto 0;
}

/* Outer card shell */
.pch-card {
  min-height: 420px;
  border-radius: 24px;
  border: 1px solid rgba(39, 39, 42, 0.3);
  background: linear-gradient(180deg, #18181b 0%, #09090b 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  padding: 41px 48px 40px;
  font-family: "Arimo", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* Heading */
.pch-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Container that will hold ALL transfer blocks (each pair of plates) */
.pch-rows {
  margin-top: 40px;          /* replaces the margin that used to be on .pch-transfer-row */
  display: flex;
  flex-direction: column;
  gap: 32px;                 /* vertical space between each pair row */
}

/* Wrapper for ONE transfer row + its dates row */
.pch-transfer-block {
  display: flex;
  flex-direction: column;
  gap: 20px;                 /* space between the row and its dates */
}


.pch-title {
  margin: 0;
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  color: #ffffff;
}

.pch-subtitle {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #71717b;
}

/* Transfer row (two plates + arrow) */

.pch-transfer-row {
  position: relative;
  /* margin-top: 40px;  <-- remove this, spacing now handled by .pch-rows/.pch-transfer-block */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 64px;
}


/* Plate cards */

.pch-plate-card {
  position: relative;

  /* keep the original short height */
  height: 140px;

  /* make the card longer horizontally */
  width: 520px;        /* tweak this number to taste (e.g. 480 / 540) */
  max-width: 520px;

  border-radius: 24px;
  box-sizing: border-box;
  padding: 32px 40px 26px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}



/* REMOVE inner split line */
.pch-plate-card::after {
  content: none;
}

/* original plate – solid neutral grey */
.pch-plate-original {
  background: #222226;
}

/* transfer plate – solid 2B7FFF @ 20% opacity */
.pch-plate-transfer {
  background: rgba(43, 127, 255, 0.1);
  border-color: rgba(43, 127, 255, 0.4); /* softer blue border */
}

/* plate text – reg numbers (YA66UTC / X9SNJ) */
.pch-plate-main {
  font-family: "Cousine", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: 1.8px;
  color: #ffffff;
}

/* plate labels */
.pch-plate-label {
  margin-top: 16px;
  font-family: "Arimo", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.7px;
  color: #a1a1aa; /* default for Original Plate */
}

/* blue label for Transfer Period */
.pch-plate-transfer .pch-plate-label {
  color: #51a2ff;
}

/* Arrow circle – neutral grey */

.pch-transfer-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pch-arrow-circle {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(156, 163, 175, 0.5);
  background: radial-gradient(circle at 30% 30%, #4b4b4f 0%, #18181b 65%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pch-arrow-icon {
  font-size: 24px;
  color: #f9fafb;
}

/* Date ranges row */

.pch-dates-row {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.pch-dates {
  text-align: center;
}

.pch-daterange {
  font-size: 14px;
  line-height: 20px;
  color: #e4e4e7;
}

.pch-duration {
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  color: #a1a1aa;
}

/* Current registration card */

.pch-current-card {
  margin-top: 40px;
  height: 140px;
  border-radius: 24px;
  padding: 28px 40px;
  box-sizing: border-box;
  /* solid 00BC7D @ 20% opacity */
  background: rgba(0, 188, 125, 0.1);
  border: 1px solid rgba(0, 188, 125, 0.4); /* softer border */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* CURRENT REGISTRATION label – Arimo 14 / 20 / 0.7px */
.pch-current-label {
  font-family: "Arimo", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.7px;
  color: #00d492;
}

/* current reg plate text */
.pch-current-plate {
  margin-top: 12px;
  font-family: "Cousine", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: 1.8px;
  color: #ffffff;
}

.pch-current-date {
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
  color: #a1a1aa;
}

/* Center arrow button */

.pch-transfer-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Make it a soft grey circle like your screenshot */
.pch-arrow-circle {
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);        /* soft grey fill */
  border: 1px solid rgba(255, 255, 255, 0.12);  /* subtle border */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);    /* glow underneath */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Simple white arrow in the middle */
.pch-arrow-icon {
  font-size: 20px;
  line-height: 1;
  color: #ffffff;
  transform: translateX(1px); /* tiny nudge to feel optically centered */
}

/* Allow multiple transfer rows to stack nicely */
#pch-transfer-rows {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;       /* space between row+dates blocks */
}

.pch-rows {
  margin-top: 32px;      /* space below header */
  display: flex;
  flex-direction: column;
  gap: 24px;            /* space between rows */
}

.pch-period {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pch-transfer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 51px;   /* spacing between left card, arrow, right card */
}


/* ===== Vehicle Specifications + Tuning & Modification Potential ===== */

.st-section {
  width: 1304px;
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
}

/* Shared card shell */
.st-card {
  border-radius: 24px;
  border: 1px solid rgba(39, 39, 42, 0.3);
  background: linear-gradient(180deg, #18181b 0%, #09090b 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  padding: 41px 48px 40px;
  font-family: "Arimo", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* Same height feel as Figma */
.st-card-left,
.st-card-right {
  min-height: 940px;
}

/* Headings */

.st-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.st-title {
  margin: 0;
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  color: #ffffff;
}

.st-subtitle {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #71717b;
}

/* ---------- LEFT: Vehicle Specifications ---------- */

.vs-group {
  margin-top: 40px;
}

.vs-group + .vs-group {
  margin-top: 40px;
}

.vs-group-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.vs-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);

  /* centre the SVG icon */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* remove grey placeholder square */
.vs-icon-dimensions::before,
.vs-icon-drivetrain::before,
.vs-icon-fuel::before {
  content: none;
}

.vs-icon-svg {
  width: 20px;
  height: 20px;
  display: block;
  color: #e4e4e7; /* used by stroke="currentColor" */
}


.vs-group-title {
  font-size: 16px;
  line-height: 24px;
  color: #e4e4e7;
}

.vs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}

.vs-label {
  font-size: 14px;
  line-height: 20px;
  color: #a1a1aa;
}

.vs-value {
  font-size: 14px;
  line-height: 20px;
  color: #f9fafb;
}

.vs-divider {
  height: 1px;
  background: rgba(39, 39, 42, 0.7);
}

/* ---------- RIGHT: Tuning & Modification Potential ---------- */

/* Engine info pill */
.tm-engine-pill {
  margin-top: 32px;
  padding: 20px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 16px;
}

.tm-engine-icon {
  width: 100px;
  height: 40px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);

  display: flex;
  align-items: center;
  justify-content: center;
}

.tm-engine-icon-svg {
  width: 20px;
  height: 20px;
  display: block;
  color: #e4e4e7;
}


.tm-engine-title {
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
}

.tm-engine-subtitle {
  margin-top: 2px;
  font-size: 14px;
  line-height: 20px;
  color: #a1a1aa;
}

/* Stage list */

.tm-stage-list {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tm-stage-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tm-stage-label {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tm-stage-badge {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #ffffff;
}

/* badge colours */
.tm-stage-badge-neutral {
  background: #4b5563;
}

.tm-stage-badge-green {
  background: #00d492;
}

.tm-stage-badge-blue {
  background: #2b7fff;
}

.tm-stage-badge-purple {
  background: #a855f7;
}

.tm-stage-name {
  font-size: 16px;
  line-height: 24px;
  color: #e4e4e7;
}

.tm-stage-meta {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  font-size: 14px;
  line-height: 20px;
  color: #a1a1aa;
}

.tm-stage-meta strong {
  color: #f9fafb;
}

/* bars */

.tm-stage-bar {
  margin-top: 4px;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #27272a;
  overflow: hidden;
}

.tm-stage-fill {
  height: 100%;
  border-radius: inherit;
}

/* approximate fill lengths to match Figma */
.tm-fill-neutral {
  width: 45%;
  background: #6b7280;
}

.tm-fill-green {
  width: 80%;
  background: #00d492;
}

.tm-fill-blue {
  width: 78%;
  background: #2b7fff;
}

.tm-fill-purple {
  width: 90%;
  background: #a855f7;
}

/* Recommended Upgrades card */

.tm-upgrades-card {
  margin-top: 40px;
  padding: 24px;
  border-radius: 16px;
  background: rgba(43, 127, 255, 0.05);
  border: 1px solid rgba(43, 127, 255, 0.10);
  box-sizing: border-box;
}


.tm-upgrades-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.tm-upgrades-icon {
  width: 40px;   /* ⬅ bigger circle */
  height: 40px;
  border-radius: 999px;
  background: rgba(43, 127, 255, 0.12);
  border: 1px solid rgba(43, 127, 255, 0.26);

  /* centre the mechanic SVG */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG inside the circle */
.tm-upgrades-icon-svg {
  width: 20px;
  height: 20px;
  display: block;
  color: #60a5ff;   /* or #e4e4e7 if you prefer white */
}


/* "RECOMMENDED UPGRADES" */
.tm-upgrades-title {
  font-family: "Arimo", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #51a2ff;
}

/* Recommended upgrades list styling */
.tm-upgrades-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
}

.tm-upgrades-columns ul {
  margin: 0;
  padding: 0;
  list-style: none; /* we’ll draw our own bullets */
}

.tm-upgrades-columns li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 20px;
  color: #9F9FA9;           /* text colour */
}

/* Custom bullet – blue dot */
.tm-upgrades-columns li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  line-height: 20px;
  color: #51A2FF;           /* bullet colour */
  font-size: 16px;
}



/* ===== Reliability & Safety Report ===== */

.rs-section {
  width: 1304px;
  margin: 48px auto 0;
}

.rs-card {
  border-radius: 24px;
  border: 1px solid rgba(39, 39, 42, 0.3);
  background: linear-gradient(180deg, #18181b 0%, #09090b 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  padding: 41px 48px 40px;
  font-family: "Arimo", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* Heading */

.rs-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rs-title {
  margin: 0;
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  color: #ffffff;
}

.rs-subtitle {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #71717b;
}

/* 3-column layout */

.rs-layout {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1fr;
  column-gap: 40px;
}

/* Section labels (icon + text) */

.rs-section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.rs-label-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* All RS header icons */
.rs-label-icon .rs-label-svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Per-type colouring (tweak to taste) */
.rs-icon-shield .rs-label-svg {
  color: #22c55e;   /* green – safety */
}

.rs-icon-audio .rs-label-svg {
  color: #38bdf8;   /* blue – noise */
}

.rs-icon-warning .rs-label-svg {
  color: #f97316;   /* orange – issues */
}


.rs-label-text {
  font-size: 16px;
  line-height: 24px;
  color: #e4e4e7;
}

/* ---------- Safety Rating ---------- */

.rs-column-safety {
  display: flex;
  flex-direction: column;
}

.rs-safety-card {
  width: 100%;
  height: 190px;
  border-radius: 20px;
  padding: 32px 32px 24px;
  box-sizing: border-box;

  /* warm brown / orange panel */
  background: rgba(255, 185, 0, 0.06);
  border: 1px solid rgba(254, 154, 0, 0.3);
}

.rs-stars-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.rs-star {
  font-size: 20px;
  color: #fdc700; /* star yellow */
}

/* Base star look: empty placeholders */
.rs-stars-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
}

.rs-star {
  font-size: 26px;
  line-height: 1;
  color: #27272f;        /* empty/placeholder */
  opacity: 0.35;
  transform-origin: center;
}

/* Filled star colour */
.rs-star--filled {
  color: #facc15;        /* warm yellow */
  opacity: 1;
}

/* Animation class – one per filled star */
.rs-star--animate {
  animation: rsStarEnter 0.55s cubic-bezier(0.22, 0.8, 0.3, 1.1) forwards;
  animation-delay: var(--rs-star-delay, 0s);
}

@keyframes rsStarEnter {
  0% {
    transform: translateY(36px) scale(0);
    opacity: 0;
  }
  60% {
    transform: translateY(-6px) scale(1.25); /* little bounce */
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}





.rs-score {
  text-align: center;
  font-size: 40px;
  line-height: 48px;
  color: #ffffff;
  margin-bottom: 4px;
}

.rs-score-label {
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: #e4e4e7;
}

.rs-safety-metrics {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rs-metric-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 20px;
  color: #e4e4e7;
}

.rs-metric-row span:last-child {
  color: #f9fafb;
}

/* ---------- Noise Levels ---------- */

.rs-column-noise {
  display: flex;
  flex-direction: column;
}

.rs-noise-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rs-noise-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rs-noise-header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 20px;
  color: #e4e4e7;
}

.rs-noise-value {
  color: #e4e4e7;
}

.rs-noise-bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #27272a;
  overflow: hidden;
}

.rs-noise-fill {
  width: 0;                /* important for animation */
  height: 8px;             /* whatever you already use */
  border-radius: 999px;
  transition: width 0.9s ease-out;
}

/* approximate fill lengths to match Figma screenshot */
.rs-noise-fill-green {
  width: 50%;
  background: #00d492;
}

.rs-noise-fill-blue {
  width: 70%;
  background: #2b7fff;
}

.rs-noise-fill-orange {
  width: 90%;
  background: #ff5a3c;
}

/* ---------- Known Issues ---------- */

.rs-column-issues {
  display: flex;
  flex-direction: column;
}

.rs-issues-card {
  margin-top: 4px;
  padding: 24px 24px 20px;
  border-radius: 20px;
  box-sizing: border-box;

  /* FE9A00 background with 5% fill and 20% stroke */
  background: rgba(254, 154, 0, 0.05);
  border: 1px solid rgba(254, 154, 0, 0.2);
}

.rs-issue {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.rs-issue:last-child {
  margin-bottom: 0;
}

.rs-issue-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ffb900; /* small yellow bullet */
  margin-top: 7px;
}

.rs-issue-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rs-issue-title {
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
}

.rs-issue-subtitle {
  font-size: 13px;
  line-height: 18px;
  color: #9f9fa9;
}

/* Known Issues pill – use the amber colour from Figma */
.rs-icon-warning {
  background: rgba(254, 154, 0, 0.20);           /* FE9A00 @ 20% */
  border-color: rgba(254, 154, 0, 0.40);         /* slightly stronger border */
}

.rs-icon-warning .rs-label-svg {
  color: #fe9a00;                                /* match the amber tone */
}

/* ===== Similar Vehicles ===== */

.sv-section {
  width: 1304px;
  margin: 48px auto 0;
}

.sv-card {
  border-radius: 24px;
  border: 1px solid rgba(39, 39, 42, 0.3); /* 27272A @ 30% */
  background: linear-gradient(180deg, #18181b 0%, #09090b 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  padding: 41px 48px 40px;
  font-family: "Arimo", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* Heading */

.sv-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sv-title {
  margin: 0;
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  color: #ffffff;
}

.sv-subtitle {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #71717b;
}

/* Card grid */

.sv-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 24px;
}

/* Individual vehicle card */

.sv-vehicle {
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02) 0%,
    rgba(0, 0, 0, 0.45) 100%
  ); /* soft vertical gradient */
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Top image area (placeholder gradient) */

.sv-vehicle-top {
  position: relative;
  height: 192px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02) 0%,
    rgba(0, 0, 0, 0.65) 100%
  );
}

/* Year pill */

.sv-year-pill {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 16px;
  color: #ffffff;
  background: rgba(24, 24, 27, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Card body */

.sv-vehicle-body {
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sv-name {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #ffffff;
}

.sv-trim {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #71717b;
}

/* Specs */

.sv-spec-row {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}

.sv-spec-label {
  font-size: 14px;
  line-height: 20px;
  color: #9f9fa9;
}

.sv-spec-value {
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
}

.sv-spec-unit {
  font-size: 12px;
  margin-left: 4px;
  color: #9f9fa9;
}

/* Divider line between specs and price */

.sv-divider {
  margin: 16px 0 18px;
  height: 1px;
  background: rgba(255, 255, 255, 0.06); /* subtle top rule */
}

/* Footer row: price + CTA */

.sv-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sv-from {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sv-from-label {
  font-size: 14px;
  line-height: 20px;
  color: #71717b;
}

.sv-price {
  font-size: 18px;
  line-height: 24px;
  color: #ffffff;
}

/* Arrow button */

.sv-cta {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  outline: none;
}

.sv-cta-arrow {
  font-size: 16px;
  line-height: 1;
  color: #ffffff;
}

/* optional hover for a tiny bit of life */
.sv-cta:hover {
  background: rgba(255, 255, 255, 0.08);
}

.sv-card {
  position: relative;
}

.sv-comingsoon-banner {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
}

.sv-comingsoon-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: #f9fafb;
  background: linear-gradient(135deg, #1f2933 0%, #020617 60%, #4b5563 100%);
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
}

.sv-comingsoon-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: radial-gradient(120% 120% at 0% 0%, #0b1120 0%, #020617 100%);
  border: 1px solid rgba(148, 163, 184, 0.4);
}

.sv-comingsoon-icon svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  color: #e5e7eb;
}

/* ===== Fuel Cost Calculator ===== */

.fuel-section {
  width: 1304px;
  margin: 48px auto 0;
}

/* Outer card */
.fuel-card {
  border-radius: 32px;
  border: 1px solid rgba(39, 39, 42, 0.3);
  background: linear-gradient(180deg, #18181B 0%, #09090B 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  padding: 48px;
  box-sizing: border-box;
  font-family: "Arimo", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* Header */
.fuel-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
}

.fuel-title {
  font-size: 32px;
  line-height: 40px;
  font-weight: 400;
  color: #ffffff;
  margin: 0;
}

.fuel-subtitle {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: #71717B;
}

/* Two-column layout */
.fuel-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.fuel-inputs {
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Input groups */
.fuel-input-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fuel-input-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
}

.fuel-input-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);

  /* NEW: centre the icon inside */
  display: flex;
  align-items: center;
  justify-content: center;
}

.fuel-input-field {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  padding: 20px 24px;
  font-size: 24px;
  line-height: 32px;
  color: #ffffff;

  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Actual <input> element inside the pretty box */
.fuel-input-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
}

/* optional: hide number spinners in WebKit if you want it cleaner */
.fuel-input-input::-webkit-outer-spin-button,
.fuel-input-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.fuel-input-input[type="number"] {
  -moz-appearance: textfield;
}


.fuel-input-main {
  font-size: 24px;
  line-height: 32px;
  color: #ffffff;
}

.fuel-input-subnote {
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  color: #71717B;
}

.fuel-input-note {
  font-size: 12px;
  line-height: 16px;
  color: #52525C;
}

/* Right column: summary */
.fuel-summary {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Estimated annual cost card */
.fuel-estimate-card {
  border-radius: 24px;
  padding: 32px 40px;
  background: linear-gradient(
    135deg,
    rgba(0, 188, 125, 0.16) 0%,
    rgba(0, 188, 125, 0.32) 100%
  );
  border: 1px solid rgba(0, 188, 125, 0.2);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fuel-estimate-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* this already exists but we’ll also use it to centre the icon */
.fuel-estimate-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(0, 212, 146, 0.12);
  border: 1px solid rgba(0, 212, 146, 0.3);
  display: flex;          /* keep */
  align-items: center;    /* keep */
  justify-content: center;/* keep */
}

.fuel-estimate-icon-symbol {
  font-size: 24px;
}

.fuel-estimate-textblock {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fuel-estimate-label {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #00D492;
}

.fuel-estimate-meta {
  font-size: 14px;
  line-height: 20px;
  color: #9F9FA9;
}

.fuel-estimate-value-row {
  display: flex;
  align-items: baseline;
}

.fuel-estimate-value {
  font-size: 64px;
  line-height: 72px;
  color: #ffffff;
  font-weight: 400;
}

.fuel-estimate-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: #00D492;
}

.fuel-estimate-arrow {
  font-size: 16px;
}

/* Small stats cards */
.fuel-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.fuel-stat-card {
  border-radius: 16px;
  padding: 24px 32px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fuel-stat-label {
  font-size: 14px;
  line-height: 20px;
  color: #9F9FA9;
}

.fuel-stat-value {
  font-size: 32px;
  line-height: 40px;
  color: #ffffff;
}

.fuel-stat-note {
  font-size: 12px;
  line-height: 16px;
  color: #71717B;
}

/* Shared styling for small fuel input icons */
.fuel-input-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Size/colour for inline SVG icons in the fuel inputs */
.fuel-input-icon svg {
  width: 18px;
  height: 18px;
  stroke: #e4e4e7;          /* soft light grey like your labels */
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}



/* make sure the actual SVG/emoji doesn’t have weird inline spacing */
.fuel-input-icon svg,
.fuel-estimate-icon svg,
.fuel-estimate-icon-symbol {
  display: block;
  line-height: 1;
}

/* ===== Complete Vehicle Report CTA ===== */

.report-cta-section {
  width: 1304px;
  margin: 48px auto 96px;
}

/* outer card */
.report-cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;

  padding: 32px 40px;
  border-radius: 24px;
  border: 1px solid rgba(39, 39, 42, 0.3);
  background: #050508;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

/* icon pill on the left */
.report-cta-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #27272a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* simple document glyph */
.report-cta-icon-doc {
  position: relative;
  width: 26px;
  height: 30px;
  border-radius: 6px;
  border: 2px solid #ffffff;
  box-sizing: border-box;
}

.report-cta-icon-doc::before,
.report-cta-icon-doc::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  height: 2px;
  background: #ffffff;
  border-radius: 999px;
}

.report-cta-icon-doc::before {
  top: 8px;
}

.report-cta-icon-doc::after {
  top: 16px;
}

/* copy */
.report-cta-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
}

.report-cta-title {
  margin: 0;
  font-family: "Arimo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.4px;
  color: #ffffff;
}

.report-cta-subtitle {
  margin: 0;
  font-family: "Arimo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.3px;
  color: #9f9fa9;
}

/* action buttons */
.report-cta-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.report-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: "Arimo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 15px;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease,
    box-shadow 0.18s ease, transform 0.08s ease;
}

/* share pill (dark) */
.btn-share {
  background: #18181b;
  border-color: rgba(39, 39, 42, 0.8);
  color: #ffffff;
}

.btn-share:hover {
  background: #1f1f23;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

/* download pill (white) */
.btn-download {
  background: #ffffff;
  color: #171717;
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8);
}

.btn-download:hover {
  background: #f3f3f3;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.95);
  transform: translateY(-1px);
}

/* optional: icon sizing (using emoji placeholders here) */
.share-icon,
.download-icon {
  font-size: 16px;
  line-height: 1;
}


/* =========================================================
   AUTH GATE OVERLAY (results page)
   ========================================================= */

.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 999; /* sit above sidebar + results content */
  display: none; /* hidden by default – JS toggles */
  align-items: center;
  justify-content: center;
  pointer-events: none; /* enabled when visible */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
}

.auth-gate:not(.hidden) {
  display: flex;
}

.auth-gate.hidden {
  display: none;
}

/* Dim + blur the results behind the card */
.auth-gate__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(10px);
}

/* Centered signup card */
.auth-gate__card {
  position: relative;
  pointer-events: auto; /* card remains clickable */
  background: #ffffff;
  border-radius: 24px;
  padding: 40px 48px 32px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.35);
  max-width: 520px;
  width: 90%;
}

/* Headline + subtext */
.signup-title {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111827;
}

.signup-subtitle {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
}

/* Google button */
.signup-google-btn {
  width: 100%;
  border: none;
  border-radius: 999px;
  background: #050b17;
  color: #ffffff;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(5, 11, 23, 0.45);
  transition: transform 0.12s ease, box-shadow 0.12s ease,
    filter 0.12s ease;
}

.signup-google-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 18px 40px rgba(5, 11, 23, 0.55);
}

.signup-google-btn:active {
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(5, 11, 23, 0.35);
}

/* Divider "or" */
.signup-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  color: #9ca3af;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.signup-divider::before,
.signup-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

.signup-divider span {
  padding: 0 10px;
}

/* Form layout */
.signup-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.signup-form-row {
  display: flex;
  gap: 12px;
}

.signup-field {
  flex: 1 1 0;      /* was: flex: 1;  */
  min-width: 0;     /* 🔑 allow shrinking on small screens */
  display: flex;
  flex-direction: column;
  gap: 4px;
}


/* Labels + inputs */
.signup-label {
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
}

.signup-input {
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  padding: 10px 14px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    background-color 0.15s ease;
  background: #ffffff;
}

.signup-input::placeholder {
  color: #9ca3af;
}

.signup-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35);
}

/* Primary submit button */
.signup-submit-btn {
  margin-top: 8px;
  width: 100%;
  border: none;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.12s ease,
    box-shadow 0.12s ease;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.35);
}

.signup-submit-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-0.5px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.45);
}

.signup-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.3);
}

/* Footer text + link */
.signup-footer {
  margin-top: 18px;
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}

.signup-footer a {
  color: #2563eb;
  font-weight: 500;
  text-decoration: none;
}

.signup-footer a:hover {
  text-decoration: underline;
}

/* Responsive tweaks */
@media (max-width: 600px) {
  .auth-gate__card {
    padding: 24px 18px 20px;  /* slightly tighter on mobile */
    border-radius: 18px;
  }

  .signup-title {
    font-size: 22px;
  }

  /* Keep first + last name on the same row on mobile */
  .signup-form-row {
    flex-direction: row;      /* or simply remove this line entirely */
    gap: 10px;
  }

  .signup-field {
    flex: 1 1 0;
  }
}


.signup-google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.signup-google-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.signup-google-btn__label {
  white-space: nowrap;
}

.auth-gate__notice {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  display: none;
  align-items: center;
  gap: 8px;
  border: 1px solid #06b6d4;
  background: #ecfeff;
  color: #0f172a;
}

.auth-gate__notice--error {
  border-color: #f97373;
  background: #fef2f2;
  color: #7f1d1d;
}

.auth-gate__notice-icon {
  font-size: 1px;
}

.auth-gate__notice.visible {
  display: flex;
}


.signup-google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.signup-google-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 🔽 force the icon to a sensible size */
.signup-google-btn__icon img,
.signup-google-btn__icon svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.signup-google-btn__label {
  white-space: nowrap;
}


/* Steps inside auth gate */
.gate-step {
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.gate-step.hidden {
  display: none;
  opacity: 0;
  transform: translateY(8px);
}

.gate-step--plate .signup-title {
  font-size: 22px;
}

/* Google button tweaks */
.signup-google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.signup-google-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.signup-google-btn__icon img,
.signup-google-btn__icon svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.signup-google-btn__label {
  white-space: nowrap;
}

/* Vehicle-owner options */
.gate-owner-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 14px;
}

.gate-owner-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.gate-owner-option input[type="radio"] {
  accent-color: #10b981; /* teal-ish tick */
}

.gate-owner-option:hover {
  border-color: #a5b4fc;
  background: #f5f3ff;
  box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.25);
}

/* Notice (if you haven't added it yet) */
.auth-gate__notice {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  display: none;
  align-items: center;
  gap: 8px;
  border: 1px solid #06b6d4;
  background: #ecfeff;
  color: #0f172a;
}

.auth-gate__notice--error {
  border-color: #f97373;
  background: #fef2f2;
  color: #7f1d1d;
}

.auth-gate__notice.visible {
  display: flex;
}


/* =========================================================
   Mobile responsiveness overrides (results page only)
   Paste at the VERY BOTTOM of results.css so it wins.
   ========================================================= */

@media (max-width: 768px) {
  /* Give the page real side padding on mobile (desktop stays centered) */
  .page-frame {
    justify-content: stretch;
    padding: 0 12px;
  }

  /* Your dashboard is fixed at 1400px + 48px padding (Figma) → shrink it on mobile */
  .vehicle-dashboard {
    width: 100%;
    padding: 18px 0 28px;
    gap: 28px;
  }

  /* ===== HERO: switch from fixed/absolute Figma layout to a mobile flow ===== */
  #vehicle-hero {
    width: 100%;
    height: auto;
    border-radius: 24px;
    margin: 0;
  }

  /* Remove the faint image tint box on mobile (it’s positioned with fixed px values) */
  .vh-image-tint {
    display: none;
  }

  /* The hero wrapper is fixed size + absolute positioned → make it normal flow */
  .vh-content {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
  }

  /* Left info area is absolute in desktop → make it flow */
  .info-left {
    position: static;
    width: 100%;
    height: auto;
  }

  .vehicle-name {
    position: static;
    width: 100%;
    height: auto;
    gap: 10px;
  }

  /* Big headings are 48px desktop → clamp them for small screens */
  .maketext,
  .modeltext {
    font-size: clamp(26px, 7vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.4px;
    width: 100%;
  }

  .yeartext {
    font-size: 16px;
    line-height: 22px;
  }

  /* Stats grid is absolute with fixed width/height → make it responsive */
  .stats-2x2 {
    position: static;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .stat-card,
  .engine-family {
    width: 100%;
    height: auto;
    padding: 16px;
    box-sizing: border-box;
  }

  /* Image box is absolute with hard-coded left/top → make it full-width below stats */
  .image-box {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 220px;
    margin-top: 4px;
  }

  .image-with-fallback {
    height: 100%;
  }

  #vh-main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Top-right/bottom-right badges: keep them, just shrink a bit */
  .vh-make-logo {
    width: 44px;
    height: 44px;
    top: 14px;
    right: 14px;
  }

  .vh-trim-badge {
    right: 14px;
    bottom: 14px;
    max-width: 88px;
    max-height: 36px;
  }

  /* ===== Make every 1304px fixed section fluid on mobile ===== */
  #performance_and_vhealthscore,
  #runningcost_and_timeline,
  .oh-section,
  .pch-section,
  .st-section,
  .rs-section,
  .sv-section {
    width: 100%;
    margin: 28px auto 0;
  }

  /* Performance + VHS (was 2-col) → stack */
  #performance_and_vhealthscore {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .pm-card,
  .vhs-card {
    width: 100%;
    height: auto;
    padding: 22px 18px;
    box-sizing: border-box;
  }

  /* Running cost + timeline (was 2-col, 666px tall) → stack + auto height */
  #runningcost_and_timeline {
    min-height: unset;
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .rc-card,
  .pt-card {
    height: auto;
    padding: 22px 18px;
  }

  .rc-tax-card {
    height: auto;
    padding: 18px;
    gap: 14px;
  }

  .rc-tax-amount {
    font-size: 32px;
    line-height: 38px;
  }

  /* Plate change transfer row (3 columns) → stack */
  .pch-transfer-row {
    grid-template-columns: 1fr;
    row-gap: 12px;
    column-gap: 0;
  }

  .pch-period {
    width: 100%;
  }

  .pch-plate-main {
    font-size: clamp(24px, 8vw, 32px);
    letter-spacing: 0.12em;
  }

  /* Specs & tuning (2 columns + min-height) → stack */
  .st-section {
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: unset;
  }

  .st-card {
    padding: 22px 18px;
  }

  /* Reliability (3 columns) → stack */
  .rs-layout {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  /* Similar vehicles (4 columns) → 2 columns */
  .sv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .sv-vehicle-top {
    height: 150px;
  }
}

/* Extra-tight phones (e.g. 360–420px): reduce grids to 1 column */
@media (max-width: 420px) {
  .stats-2x2 {
    grid-template-columns: 1fr;
  }

  .sv-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   HERO (mobile-only) — reorder + stop overflow
   ========================================================= */
@media (max-width: 768px) {
  /* Make hero content flow instead of Figma absolute positioning */
  #vehicle-hero {
    width: 100%;
    height: auto;
    border-radius: 24px;
    overflow: hidden; /* prevents any hero children bleeding off-screen */
  }

  .vh-content {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
  }

  /* IMPORTANT: let children of .info-left participate in .vh-content ordering */
  .info-left {
    position: static;
    width: 100%;
    height: auto;
    display: contents; /* key: vehicle-name + stats become direct flex items */
  }

  /* 1) Premium pill top-right + title beneath on the left */
  .vehicle-name {
    order: 1;
    position: static;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .premanalyticreport {
    align-self: flex-end;   /* pill in top-right */
    margin: 0 0 4px 0;
    max-width: 100%;
  }

  .maketext,
  .modeltext,
  .yeartext {
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* 2) Car image under the title */
  .image-box {
    order: 2;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 220px;
    margin: 0;
    overflow: hidden;
  }

  .image-with-fallback,
  #vh-main-image {
    width: 100%;
    height: 100%;
  }

  #vh-main-image {
    object-fit: contain;
  }

  /* 3) Stats underneath the image */
  .stats-2x2 {
    order: 3;
    position: static;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .stat-card,
  .engine-family {
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }

  /* Avoid overlap in the top-right corner (logo vs pill).
     If you want the make logo kept, tell me and we’ll reposition it. */
  .vh-make-logo {
    display: none;
  }
}

/* Extra-small phones: stats go 1-column */
@media (max-width: 420px) {
  .stats-2x2 {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   MOBILE HERO FIX — full width, no overflow, stacked layout
   Order: pill (top-right) -> title (left) -> image -> stats (1 per row)
   ========================================================= */
@media (max-width: 768px) {

  /* Prevent the page padding from creating horizontal overflow */
  .page-frame {
    box-sizing: border-box;
    width: 100%;
    padding: 0 12px;
    overflow-x: hidden;
  }

  /* Make the dashboard fluid on mobile (and include padding inside width) */
  .vehicle-dashboard {
    box-sizing: border-box;
    width: 100%;
    padding: 18px 0 18px;
  }

  /* HERO card must never exceed the viewport */
  #vehicle-hero {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: hidden; /* stops anything bleeding off right */
  }

  /* Turn the hero into a simple vertical flow */
  #vehicle-hero .vh-content {
    box-sizing: border-box;
    position: relative !important;
    top: auto !important;
    left: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    padding: 18px !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  /* KEY: lets us interleave image between title and stats without HTML edits */
  #vehicle-hero .info-left {
    display: contents !important;
  }

  /* 1) Pill top-right, then title under it on the left */
  #vehicle-hero .vehicle-name {
    order: 1 !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  #vehicle-hero .premanalyticreport {
    align-self: flex-end !important; /* top-right */
    max-width: 100%;
  }

  #vehicle-hero .maketext,
  #vehicle-hero .modeltext,
  #vehicle-hero .yeartext {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  /* 2) Image full width under the title */
  #vehicle-hero .image-box {
    order: 2 !important;

    position: relative !important;
    top: auto !important;
    left: auto !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 220px !important;

    margin: 0 !important;
    overflow: hidden !important;
  }

  #vehicle-hero #vh-main-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* 3) Stats underneath — 2 by 2 grid */
#vehicle-hero .stats-2x2 {
  order: 3 !important;

  position: static !important;
  width: 100% !important;
  height: auto !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 2×2 */
  gap: 12px !important;
}

#vehicle-hero .stat-card,
#vehicle-hero .engine-family {
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;          /* prevents overflow in grid */
  box-sizing: border-box !important;
}
}


@media (max-width: 768px) {
  /* Make sure title block never overflows the hero */
  #vehicle-hero .vehicle-name {
    overflow: hidden;
  }

  /* Long make/model: wrap + clean line height */
  #vehicle-hero .maketext,
  #vehicle-hero .modeltext {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.05 !important;
  }

  /* OPTIONAL: clamp model to 2 lines (recommended for very long trims) */
  #vehicle-hero .modeltext {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }
}
@media (max-width: 768px) {
  /* Bigger icon container on mobile */
  #vehicle-hero .stat-icon {
    width: 52px !important;   /* was smaller */
    height: 52px !important;
    flex: 0 0 52px !important;
  }

  #vehicle-hero .stat-icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Give the text a tiny bit more room next to the bigger icon */
  #vehicle-hero .stat-card,
  #vehicle-hero .engine-family {
    gap: 12px !important;
  }
}
/* =========================================================
   Mobile hero title: unlimited wrapping, no overlap
   Mobile stats icon box: slightly larger
   ========================================================= */
@media (max-width: 768px) {

  /* Ensure the title container can grow */
  #vehicle-hero .vehicle-name {
    height: auto !important;
    gap: 10px !important;
  }

  /* These are the REAL cause of overlap: fixed heights */
  #vehicle-hero .vehicle-name .make,
  #vehicle-hero .vehicle-name .model,
  #vehicle-hero .vehicle-name .year {
    height: auto !important;
    align-items: flex-start !important;
  }

  /* Unlimited wrapping (and explicitly undo any clamp rules) */
  #vehicle-hero .maketext,
  #vehicle-hero .modeltext,
  #vehicle-hero .yeartext {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: initial !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* If you ever added -webkit-line-clamp earlier, this disables it */
  #vehicle-hero .modeltext {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }

  /* Optional: better mobile sizing so long models don’t look ridiculous */
  #vehicle-hero .maketext {
    font-size: clamp(28px, 9vw, 40px) !important;
    line-height: 1.05 !important;
  }

  #vehicle-hero .modeltext {
    font-size: clamp(22px, 7vw, 34px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.6px !important;
  }

  #vehicle-hero .yeartext {
    font-size: 16px !important;
    line-height: 22px !important;
  }

  /* ---- Bigger icon box on stats cards (your class is .iconbox) ---- */
  #vehicle-hero .stat-card .iconbox,
  #vehicle-hero .engine-family .iconbox {
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px !important;
    border-radius: 16px !important;
  }

  #vehicle-hero .stat-card .iconbox svg,
  #vehicle-hero .engine-family .iconbox svg {
    width: 24px !important;
    height: 24px !important;
  }
}

@media (max-width: 768px) {
  /* =========================
     Make car image larger
     ========================= */
  #vehicle-hero .image-box {
    height: clamp(240px, 60vw, 340px) !important; /* bigger image area */
  }

  /* =========================
     Keep stat text inside cards (2×2 grid)
     ========================= */
  #vehicle-hero .stat-card,
  #vehicle-hero .engine-family {
    padding: 14px !important;     /* was 21px -> frees horizontal space */
    gap: 10px !important;         /* was 16px -> frees horizontal space */
    overflow: hidden !important;  /* safety: nothing can visually escape */
  }

  /* Text column must be allowed to shrink inside a flex row */
  #vehicle-hero .textstack {
    min-width: 0 !important;
  }

  /* Allow label to wrap instead of spilling out */
  #vehicle-hero .label {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;

    font-size: 11px !important;      /* slightly smaller on mobile */
    line-height: 13px !important;
    letter-spacing: 0.4px !important; /* reduces width pressure */
  }

  /* Slightly reduce value size to prevent tight layouts */
  #vehicle-hero .value {
    font-size: 22px !important;
    line-height: 28px !important;
  }
}

/* =========================================================
   Mobile hero image: wider + taller (no stretching)
   ========================================================= */
@media (max-width: 768px) {
  /* Make the image section extend closer to the screen edges */
  #vehicle-hero .image-box {
    /* your .vh-content has padding; this cancels it just for the image */
    margin-left: -18px !important;
    margin-right: -18px !important;
    width: calc(100% + 36px) !important;

    /* bigger image area */
    height: clamp(300px, 80vw, 460px) !important;

    overflow: hidden !important;
  }

  /* Scale the car up without stretching (maintains aspect ratio) */
  #vehicle-hero #vh-main-image {
    width: 112% !important;      /* makes it visually wider */
    max-width: none !important;
    height: 100% !important;

    object-fit: contain !important;  /* keeps it un-stretched */
    object-position: center !important;

    /* centers the slightly oversized image */
    display: block !important;
    margin: 0 auto !important;
  }
}
/* =========================================================
   Mobile hero image: MUCH bigger + closer to edges (no stretch)
   ========================================================= */
@media (max-width: 768px) {
  /* Make the image block bleed to the hero edges (cancels vh-content padding) */
  #vehicle-hero .image-box {
    order: 2 !important;
    position: relative !important;

    /* bleed out of the 18px padding you have on .vh-content */
    margin: 6px -18px 0 !important;
    width: calc(100% + 36px) !important;

    /* make the image area a lot taller */
    height: clamp(360px, 95vw, 560px) !important;

    overflow: hidden !important;
  }

  /* Remove the “sit on floor” constraints so it can fill the area */
  #vehicle-hero .image-with-fallback {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-bottom: 0 !important;
  }

  /* Zoom the car (keeps aspect ratio; not stretched) */
  #vehicle-hero #vh-main-image {
    width: auto !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center !important;

    transform: scale(0.4) !important; /* increase to 1.35 if you want even bigger */
  }
}
/* =========================================================
   MOBILE HERO IMAGE — no cropping, centered, less vertical space
   ========================================================= */
@media (max-width: 768px) {
  /* Optional knobs you can tweak per taste */
  #vehicle-hero {
    --hero-img-x: 1vw;          /* small right nudge (fixes “looks slightly left”) */
    --hero-img-y: 0px;          /* vertical nudge if ever needed */
  }

  #vehicle-hero .image-box {
    /* keep the “bleed to edges” look */
    margin: 6px -18px 8px !important;
    width: calc(100% + 36px) !important;

    /* reduce big empty vertical space */
    height: clamp(260px, 72vw, 380px) !important;

    overflow: hidden !important; /* keeps everything inside the hero card */
    position: relative !important;
  }

  #vehicle-hero .image-with-fallback {
    position: absolute !important;
    inset: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important; /* removes the previous “floor” spacing */
  }

  /* THE IMPORTANT PART: no scaling => no cropping */
  #vehicle-hero #vh-main-image {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;        /* never crops */
    object-position: 50% 50% !important;   /* true center in the box */

    /* slight visual centering nudge (transparent padding differs per PNG) */
    transform: translate(var(--hero-img-x), var(--hero-img-y)) !important;
  }
}
@media (max-width: 768px) {
  /* Reduce spacing between image and stats */
  #vehicle-hero .vh-content {
    gap: 10px !important; /* was ~14px+ */
  }

  #vehicle-hero .image-box {
    margin-bottom: 2px !important; /* was larger */
  }

  /* If stats still feel too far down, tighten their own top spacing */
  #vehicle-hero .stats-2x2 {
    margin-top: 0 !important;
  }
}
/* =========================
   Plate Change History — MOBILE
   ========================= */
@media (max-width: 768px) {
  /* Make the whole section/card fit the viewport */
  .pch-section {
    width: 100%;
    margin: 24px 0 0;
    padding: 0 14px;
    box-sizing: border-box;
  }

  .pch-card {
    padding: 22px 16px 18px;
    box-sizing: border-box;
  }

  .pch-rows {
    margin-top: 18px;
    gap: 18px;
  }

  /* 2 boxes + arrow in the middle (always fits screen) */
  .pch-transfer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    column-gap: 10px;
    align-items: start; /* important: periods include dates below */
    justify-items: stretch;
    width: 100%;
    max-width: 100%;
  }

  .pch-period {
    width: 100%;
    min-width: 0; /* critical so grid items can shrink */
    align-items: stretch;
  }

  /* The two plate “boxes” */
  .pch-plate-card {
    width: 100%;
    max-width: 100%;
    height: 104px;
    padding: 18px 12px 14px;
    border-radius: 20px;
    box-sizing: border-box;
  }

  /* Plate text */
  .pch-plate-main {
    font-size: clamp(18px, 5.2vw, 26px);
    line-height: 1.1;
    letter-spacing: 1.1px;

    /* Plates are short, but this guarantees zero overflow */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pch-plate-label {
    margin-top: 10px;
    font-size: 12px;
    line-height: 16px;
  }

  /* Arrow: keep it visually aligned with the CARD (not the dates text) */
  .pch-transfer-arrow {
    width: 40px;
    margin-top: 32px; /* (cardHeight - arrowSize) / 2 => (104 - 40)/2 */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pch-arrow-circle {
    width: 40px;
    height: 40px;
  }

  .pch-arrow-icon {
    font-size: 18px;
  }

  /* Dates under each card */
  .pch-dates {
    width: 100%;
    text-align: center;
  }

  .pch-daterange {
    font-size: 12px;
    line-height: 16px;
  }

  .pch-duration {
    margin-top: 3px;
    font-size: 11px;
    line-height: 14px;
  }

  /* Current registration: always full width, always one line, larger */
  .pch-current-card {
    width: 100%;
    max-width: 100%;
    margin-top: 18px;
    height: auto;
    padding: 18px 16px;
    border-radius: 22px;
    box-sizing: border-box;
  }

  .pch-current-plate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(30px, 9vw, 44px);
    line-height: 1.05;
  }

  .pch-current-date {
    margin-top: 6px;
    font-size: 12px;
    line-height: 16px;
  }
}

/* =========================
   Ownership History — MOBILE compact grid
   ========================= */
@media (max-width: 768px) {
  .oh-section {
    width: 100%;
    margin: 24px 0 0;
    padding: 0 14px;
    box-sizing: border-box;
  }

  .oh-card {
    min-height: unset;
    padding: 22px 16px 18px;
    box-sizing: border-box;
  }

  .oh-title {
    font-size: 22px;
    line-height: 28px;
  }

  .oh-subtitle {
    font-size: 14px;
    line-height: 20px;
  }

  /* 2 cards per row */
  .oh-track {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    justify-content: stretch;
  }

  /* The connecting line doesn't make sense once we have multiple rows */
  .oh-track-line {
    display: none;
  }

  /* Compact cards */
  .oh-owner-card {
    flex: initial;
    max-width: 100%;
    height: auto;
    min-height: 160px;
    padding: 16px 14px 14px;
    border-radius: 20px;
    gap: 10px;
  }

  .oh-step-badge {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    font-size: 16px;
  }

  .oh-owner-title {
    margin-top: 4px;
    font-size: 15px;
    line-height: 20px;
  }

  .oh-date-row {
    gap: 8px;
  }

  .oh-date-icon {
    width: 18px;
    height: 18px;
    border-radius: 6px;
  }

  .oh-date-icon svg {
    width: 12px;
    height: 12px;
  }

  /* Allow date text to wrap so it never forces card height huge */
  .oh-date-text {
    font-size: 12px;
    line-height: 16px;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .oh-duration-pill {
    font-size: 12px;
    line-height: 16px;
    padding: 5px 12px;
  }
}

/* Extra-small phones: fall back to 1 column */
@media (max-width: 360px) {
  .oh-track {
    grid-template-columns: 1fr;
  }
}


/* =========================
   Similar Vehicles carousel (mobile)
   ========================= */
@media (max-width: 768px) {
  /* Make the grid a horizontal swipe track */
  #similar-vehicles .sv-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;

    scroll-snap-type: x mandatory !important;

    gap: 16px !important;
    padding: 8px 14px 14px !important;

    /* helps iOS rubber-band not show weird edges */
    overscroll-behavior-x: contain;
  }

  /* Hide scrollbar (iOS/Chrome) */
  #similar-vehicles .sv-grid::-webkit-scrollbar {
    display: none;
  }

  /* Each card becomes a slide */
  #similar-vehicles .sv-vehicle {
    flex: 0 0 84% !important;          /* how wide each slide is */
    scroll-snap-align: center !important;

    transform-origin: center center;
    will-change: transform, opacity;

    transition: transform 140ms ease, opacity 140ms ease;
  }
}

@media (max-width: 768px) {
  /* The wrench icon in the engine pill */
  .tm-engine-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    flex: 0 0 56px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Override the inline SVG size (it has width/height attributes) */
  .tm-engine-icon svg {
    width: 24px !important;
    height: 24px !important;
  }
}
/* =========================================================
   Mobile: Fuel Cost Calculator + Report CTA wrap properly
   ========================================================= */
@media (max-width: 768px) {
  /* ---------- Fuel Cost Calculator ---------- */
  .fuel-section{
    width: 100% !important;
    margin: 28px 0 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
  }

  .fuel-card{
    padding: 22px 16px !important;
    box-sizing: border-box !important;
  }

  /* two columns -> stack */
  .fuel-layout{
    flex-direction: column !important;
    gap: 18px !important;
  }

  .fuel-inputs{
    width: 100% !important;
    gap: 18px !important;
  }

  .fuel-summary{
    width: 100% !important;
    gap: 18px !important;
  }

  /* make the big number responsive */
  .fuel-estimate-card{
    padding: 20px 18px !important;
    border-radius: 20px !important;
    gap: 14px !important;
  }

  .fuel-estimate-value{
    font-size: clamp(36px, 10vw, 52px) !important;
    line-height: 1.05 !important;
  }

  /* keep 2-up stats but ensure they can shrink (no overflow) */
  .fuel-stats-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .fuel-stat-card{
    padding: 16px 14px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* ---------- Complete Vehicle Report CTA ---------- */
  .report-cta-section{
    width: 100% !important;
    margin: 28px 0 64px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
  }

  /* row -> column so it never spills off-screen */
  .report-cta-card{
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
  }

  .report-cta-icon{
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
  }

  .report-cta-content{
    width: 100% !important;
  }

  .report-cta-title{
    font-size: 20px !important;
    line-height: 26px !important;
  }

  .report-cta-subtitle{
    font-size: 13px !important;
    line-height: 18px !important;
  }

  /* buttons wrap nicely */
  .report-cta-actions{
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .report-cta-btn{
    flex: 1 1 calc(50% - 5px) !important;
    justify-content: center !important;
    padding: 12px 14px !important;
    white-space: nowrap !important;
  }
}

/* extra-small: stack CTA buttons */
@media (max-width: 420px) {
  .report-cta-btn{
    flex: 1 1 100% !important;
  }
  .fuel-stats-grid{
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 768px) {
  /* Put Monthly / Cost per Mile / Weekly / Daily into a 2x2 grid */
  .fuel-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .fuel-stat-card {
    padding: 16px 14px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .fuel-stat-value {
    font-size: 28px !important;
    line-height: 34px !important;
  }
}

/* Only collapse to 1 column on REALLY tiny screens */
@media (max-width: 340px) {
  .fuel-stats-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 768px) {
  /* Top row: icon + text side-by-side. Second row: actions spanning full width */
  .report-cta-card {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr) !important;
    grid-template-areas:
      "icon content"
      "actions actions" !important;
    gap: 14px 14px !important;

    padding: 20px 16px !important;
    box-sizing: border-box !important;
    align-items: center !important;
  }

  .report-cta-icon {
    grid-area: icon !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    margin: 0 !important;
  }

  .report-cta-content {
    grid-area: content !important;
    width: 100% !important;
  }

  .report-cta-actions {
    grid-area: actions !important;
    width: 100% !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    flex-wrap: unset !important; /* overrides older wrap rules */
  }

  .report-cta-btn {
    width: 100% !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
}

/* If you ever hit ultra-small widths, allow buttons to stack */
@media (max-width: 320px) {
  .report-cta-actions {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  /* Give Download more width than Share */
  .report-cta-actions {
    grid-template-columns: 0.85fr 1.15fr !important; /* Share smaller, Download larger */
  }

  /* Ensure both buttons never overflow their own pill */
  .report-cta-btn {
    min-width: 0 !important;
    padding: 12px 12px !important;
  }

  /* Keep icon + text nicely contained */
  .report-cta-btn span,
  .report-cta-btn .btn-text {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Hide mobile bottom nav while the auth gate overlay is open */
.bottom-nav {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body.auth-gate-open .bottom-nav {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}


/* When the auth gate is open, prevent background scrolling */
html.auth-gate-open,
body.auth-gate-open {
  overflow: hidden;
  height: 100%;
}

/* iOS Safari fix: prevent auto-zoom that makes the page feel "too wide" after login */
@media (max-width: 768px) {
  #auth-gate input,
  #auth-gate select,
  #auth-gate textarea {
    font-size: 16px !important;
  }
}

/* =========================================================
   MOBILE HERO: pill top-left + logo top-right (final override)
   Paste at the VERY BOTTOM of results.css so it wins.
   ========================================================= */
@media (max-width: 768px) {
  /* Pill should not be aligned top-right on mobile */
  #vehicle-hero .premanalyticreport {
    align-self: flex-start !important;
    right: auto !important;
  }

  /* When JS makes the pill absolute, keep the headings from jumping up underneath it */
  #vehicle-hero .vehicle-name {
    padding-top: 52px !important;
  }

  /* Ensure logo isn't suppressed by earlier mobile rules */
  #vehicle-hero .vh-make-logo {
    display: block !important;
  }
}

/* Mobile tweak: Mercedes-Benz logo was sitting too close to the headings */
@media (max-width: 768px) {
  #vh-make-logo[data-logo-make^="MERCEDES"] {
    /* Slightly smaller and nudged further to the right */
    transform: translateX(10px) scale(0.92);
  }
}

/* Mobile: make trim badges (M / AMG / Audi Sport) a bit larger */
@media (max-width: 768px) {
  .vh-trim-badge {
    width: 150px;
    bottom: 32px;
    right: 40px;
  }
}