/* ==========================================================================
   COMPONENT: GSAP ROLLING ODOMETER (NEXWEB ADAPTIVE SPEC)
   Role: Menampilkan data performa EV (0-100 km/h, Range km, Kapasitas kWh)
   Sifat: Adaptif di Kanvas Terang & Otomatis Menyala di Zona Gelap
   ========================================================================== */

/* 1. Bar Pembungkus Grid */
.nx-odometer-bar {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: clamp(18px, 3vw, 32px) !important;
  width: 100% !important;
  padding-top: 32px !important;
  border-top: 1px solid var(--nx-c-border, #e2e8f0) !important;
  margin-top: 48px !important;
}

@media (min-width: 768px) {
  .nx-odometer-bar {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* 2. Item Satuan */
.nx-odo-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: center !important;
  text-align: center !important;
}

/* 3. Nilai Angka Utama (Kontras Tinggi) */
.nx-odo-value-wrap {
  display: inline-flex !important;
  align-items: baseline !important;
  font-family: var(--font-heading, "Space Grotesk", sans-serif) !important;
  font-size: clamp(2.25rem, 3.8vw, 3.25rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--nx-c-heading, #0f172a) !important; /* Slate 900 di bodi terang */
}

/* 4. Logika GSAP Rolling Wheel */
.nx-odometer {
  display: inline-flex !important;
  align-items: center !important;
  font-variant-numeric: tabular-nums !important;
}

.nx-odo-col {
  display: inline-flex !important;
  flex-direction: column !important;
  height: 1em !important;
  line-height: 1em !important;
  overflow: hidden !important;
  position: relative !important;
  width: auto !important;
}

.nx-odo-list {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  will-change: transform !important;
}

.nx-odo-list span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 1em !important;
  line-height: 1em !important;
  text-align: center !important;
}

/* 5. Unit Satuan (km, s, kWh, hp) */
.nx-odo-unit {
  font-family: var(--font-heading, "Space Grotesk", sans-serif) !important;
  font-size: 0.875rem !important;
  color: var(--nx-c-accent, #0284c7) !important; /* Sky 600 di bodi terang */
  margin-left: 6px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* 6. Label Keterangan */
.nx-odo-label {
  font-family: var(--font-body, "Inter", sans-serif) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--nx-c-muted, #64748b) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* ==========================================================================
   DARK ZONE OVERRIDES (Jika Odometer Masuk Hero / CTA / Floating Card)
   ========================================================================== */
.nx-hero-showcase .nx-odometer-bar,
.nx-floating-card .nx-odometer-bar,
.nx-coming-soon .nx-odometer-bar,
.nx-cta-box .nx-odometer-bar {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

.nx-hero-showcase .nx-odo-value-wrap,
.nx-floating-card .nx-odo-value-wrap,
.nx-coming-soon .nx-odo-value-wrap,
.nx-cta-box .nx-odo-value-wrap {
  color: #ffffff !important;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
}

.nx-hero-showcase .nx-odo-unit,
.nx-floating-card .nx-odo-unit,
.nx-coming-soon .nx-odo-unit,
.nx-cta-box .nx-odo-unit {
  color: #38bdf8 !important; /* Sky 400 terang menyala di zona gelap */
}

.nx-hero-showcase .nx-odo-label,
.nx-floating-card .nx-odo-label,
.nx-coming-soon .nx-odo-label,
.nx-cta-box .nx-odo-label {
  color: #94a3b8 !important;
}