/* ══════════════════════════════════════════════════════════════════════════════
   EMPOWER EXPRESS — Dark / Light Theme System
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─── Global transition for theme switching ─────────────────────────────────── */
html[data-theme] *,
html[data-theme] *::before,
html[data-theme] *::after {
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease,
    color 0.35s ease,
    box-shadow 0.4s ease;
}

/* Exclude elements that already have their own critical transitions/animations */
html[data-theme] .hero-canvas,
html[data-theme] .hero-bg-img,
html[data-theme] .reviews-track,
html[data-theme] .ai-fill,
html[data-theme] .mpin-pulse,
html[data-theme] .qf-spinner,
html[data-theme] .wc-fill,
html[data-theme] .hero-moving {
  transition: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════════════════════════ */

.theme-toggle {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
  outline: none;
  overflow: hidden;
}

.theme-toggle:hover {
  background: rgba(255,106,0,0.15);
  border-color: rgba(255,106,0,0.4);
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(255,106,0,0.2);
}

.theme-toggle:active {
  transform: scale(0.95);
}

/* Icons */
.theme-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  transition:
    opacity 0.35s ease,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dark mode: show moon, hide sun */
[data-theme="dark"] .sun-icon {
  opacity: 0;
  transform: scale(0.5) rotate(-90deg);
}
[data-theme="dark"] .moon-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  stroke: #fff;
}

/* Light mode: show sun, hide moon */
[data-theme="light"] .sun-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  stroke: #FF6A00;
}
[data-theme="light"] .moon-icon {
  opacity: 0;
  transform: scale(0.5) rotate(90deg);
}

/* Light mode toggle button style */
[data-theme="light"] .theme-toggle {
  background: rgba(15,23,42,0.06);
  border-color: rgba(15,23,42,0.12);
}
[data-theme="light"] .theme-toggle:hover {
  background: rgba(255,106,0,0.1);
  border-color: rgba(255,106,0,0.35);
  box-shadow: 0 0 20px rgba(255,106,0,0.12);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .theme-toggle {
    width: 38px;
    height: 38px;
    order: -1;
    margin-right: auto;
  }
  .theme-icon {
    width: 18px;
    height: 18px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Body & Root ───────────────────────────────────────────────────────────── */
[data-theme="light"] body {
  background: #F8FAFC;
  color: #0F172A;
}

/* ─── Utilities ─────────────────────────────────────────────────────────────── */
[data-theme="light"] .btn-dark {
  background: rgba(15,23,42,0.06);
  color: #0F172A;
  border-color: #E2E8F0;
}
[data-theme="light"] .btn-dark:hover {
  background: rgba(15,23,42,0.1);
}

/* ─── Section headers ───────────────────────────────────────────────────────── */
[data-theme="light"] .section-title {
  color: #0F172A;
}
[data-theme="light"] .section-desc {
  color: #475569;
}
[data-theme="light"] .section-tag {
  background: rgba(255,106,0,0.08);
  border-color: rgba(255,106,0,0.2);
}

/* ═════════════════════════════════════════════════════════════════════════════
   NAVBAR — Light
═════════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .navbar {
  background: rgba(248,250,252,0.88);
  border-bottom-color: #E2E8F0;
}
[data-theme="light"] .navbar.scrolled {
  background: rgba(248,250,252,0.96);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
[data-theme="light"] .logo-top {
  color: #0F172A;
}
[data-theme="light"] .nl {
  color: #475569;
}
[data-theme="light"] .nl:hover {
  color: #0F172A;
}
[data-theme="light"] .nl.active {
  color: #FF6A00;
}
[data-theme="light"] .phone-num {
  color: #0F172A;
}
[data-theme="light"] .phone-sub {
  color: #94A3B8;
}
[data-theme="light"] .hamburger span {
  background: #0F172A;
}
/* Logo icon bars in light mode */
[data-theme="light"] .logo-icon svg rect {
  fill: #0F172A;
}

/* ═════════════════════════════════════════════════════════════════════════════
   HERO — Light
═════════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .hero {
  background: #e8edf2;
}
[data-theme="light"] .hero-bg-overlay {
  background:
    linear-gradient(95deg,
      rgba(248,250,252,0.92) 0%,
      rgba(248,250,252,0.80) 25%,
      rgba(248,250,252,0.45) 48%,
      rgba(248,250,252,0.10) 68%,
      rgba(248,250,252,0.02) 100%),
    linear-gradient(180deg,
      rgba(248,250,252,0.55) 0%,
      transparent 18%,
      transparent 65%,
      rgba(248,250,252,0.80) 100%);
}
[data-theme="light"] .hero-h1 {
  color: #0F172A;
  text-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
[data-theme="light"] .hero-sub {
  color: #475569;
}
[data-theme="light"] .hero-badge {
  background: rgba(255,255,255,0.7);
  border-color: rgba(255,106,0,0.3);
  color: #0F172A;
  backdrop-filter: blur(8px);
}

/* Quote Card — Light */
[data-theme="light"] .quote-card {
  background: rgba(255,255,255,0.92);
  border-color: #E2E8F0;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.03);
  backdrop-filter: blur(20px);
}
[data-theme="light"] .qc-header {
  background: rgba(255,106,0,0.04);
  border-bottom-color: #E2E8F0;
  color: #0F172A;
}
[data-theme="light"] .qf-group label {
  color: #475569;
}
[data-theme="light"] .qf-input {
  background: #F8FAFC;
  border-color: #E2E8F0;
  color: #0F172A;
}
[data-theme="light"] .qf-input::placeholder {
  color: #94A3B8;
}
[data-theme="light"] .qf-input:focus {
  border-color: #FF6A00;
  background: #fff;
}
[data-theme="light"] .qf-select {
  background: #F8FAFC;
  border-color: #E2E8F0;
  color: #0F172A;
}
[data-theme="light"] .qf-select option {
  background: #fff;
  color: #0F172A;
}
[data-theme="light"] .qf-select:focus {
  border-color: #FF6A00;
}
[data-theme="light"] .qf-divider {
  background: #E2E8F0;
}
[data-theme="light"] .qf-textarea {
  color: #0F172A;
}

/* Feature bar — Light */
[data-theme="light"] .feature-bar {
  background: rgba(255,255,255,0.85);
  border-top-color: #E2E8F0;
  backdrop-filter: blur(12px);
}
[data-theme="light"] .feature-item {
  color: #0F172A;
}
[data-theme="light"] .feature-item + .feature-item {
  border-left-color: #E2E8F0;
}

/* ═════════════════════════════════════════════════════════════════════════════
   STATS BAR — Light
═════════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .stats-bar {
  background: #F8FAFC;
}
[data-theme="light"] .stats-inner {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.05);
}
[data-theme="light"] .stat-icon-wrap {
  border-color: rgba(255,106,0,0.2);
  background: rgba(255,106,0,0.06);
  color: #FF6A00;
}
[data-theme="light"] .stat-icon-wrap svg {
  stroke: #FF6A00;
}
[data-theme="light"] .stat-num {
  color: #0F172A;
}
[data-theme="light"] .stat-suf {
  color: #0F172A;
}
[data-theme="light"] .stat-lbl {
  color: #475569;
}
[data-theme="light"] .stat-divider {
  background: #E2E8F0;
}

/* ═════════════════════════════════════════════════════════════════════════════
   SERVICES — Light
═════════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .services-section {
  background: #F8FAFC;
}
[data-theme="light"] .service-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
[data-theme="light"] .service-card:hover {
  border-color: rgba(255,106,0,0.35);
  background: rgba(255,106,0,0.02);
  box-shadow: 0 8px 30px rgba(255,106,0,0.08);
}
[data-theme="light"] .service-card h3 {
  color: #0F172A;
}
[data-theme="light"] .service-card p {
  color: #475569;
}

/* ═════════════════════════════════════════════════════════════════════════════
   WHY US — Light
═════════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .why-section {
  background: #FFFFFF;
}
[data-theme="light"] .why-section .section-desc {
  color: #475569 !important;
}
[data-theme="light"] .why-feat h4 {
  color: #0F172A;
}
[data-theme="light"] .why-feat p {
  color: #475569;
}
[data-theme="light"] .wc {
  background: #F8FAFC;
  border-color: #E2E8F0;
}
[data-theme="light"] .wc-head {
  color: #0F172A;
}
[data-theme="light"] .wc-bar {
  background: #E2E8F0;
}
[data-theme="light"] .wc-labels {
  color: #475569;
}
[data-theme="light"] .wc-meta {
  color: #475569;
}
[data-theme="light"] .wcs-n {
  color: #0F172A;
}
[data-theme="light"] .wcs-l {
  color: #475569;
}
[data-theme="light"] .wc-pod-h {
  color: #0F172A;
}
[data-theme="light"] .wc-pod-b {
  color: #475569;
}

/* ═════════════════════════════════════════════════════════════════════════════
   FLEET — Light
═════════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .fleet-section {
  background: #F1F5F9;
}
[data-theme="light"] .fleet-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
[data-theme="light"] .fc-head {
  color: #0F172A;
}
[data-theme="light"] .fc-id {
  color: #0F172A;
}
[data-theme="light"] .fc-rt {
  color: #475569;
}
[data-theme="light"] .fc-status.idle {
  background: rgba(15,23,42,0.06);
  color: #94A3B8;
}
[data-theme="light"] .fleet-ai {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
[data-theme="light"] .ai-head {
  color: #0F172A;
}
[data-theme="light"] .ai-sub {
  color: #475569;
}
[data-theme="light"] .ai-row span {
  color: #475569;
}
[data-theme="light"] .ai-bar {
  background: #E2E8F0;
}
/* Fleet section already has dark-title, override */
[data-theme="light"] .fleet-section .section-title.dark-title {
  color: #0F172A;
}
[data-theme="light"] .fleet-section .section-desc.dark-desc {
  color: #475569;
}

/* ═════════════════════════════════════════════════════════════════════════════
   INDUSTRIES — Light
═════════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .industries-section {
  background: #FFFFFF;
}
[data-theme="light"] .ind-card {
  background: #F8FAFC;
  border-color: #E2E8F0;
}
[data-theme="light"] .ind-card:hover {
  border-color: rgba(255,106,0,0.35);
  background: rgba(255,106,0,0.02);
}
[data-theme="light"] .ind-card h3 {
  color: #0F172A;
}
[data-theme="light"] .ind-card p {
  color: #475569;
}

/* ═════════════════════════════════════════════════════════════════════════════
   TECHNOLOGY — Light
═════════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .tech-section {
  background: #F8FAFC;
}
[data-theme="light"] .tech-section .section-tag.dark {
  background: rgba(255,106,0,0.08);
}
[data-theme="light"] .tech-section .section-title.dark-title {
  color: #0F172A;
}
[data-theme="light"] .tech-section .section-desc.dark-desc {
  color: #475569;
}
[data-theme="light"] .tf {
  color: #0F172A;
}
[data-theme="light"] .tf:hover {
  background: rgba(15,23,42,0.03);
}
[data-theme="light"] .tf h4 {
  color: #0F172A;
}
[data-theme="light"] .tf p {
  color: #475569;
}
[data-theme="light"] .dash-img {
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}

/* ═════════════════════════════════════════════════════════════════════════════
   HOW IT WORKS — Light
═════════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .how-section {
  background: #FFFFFF;
}
[data-theme="light"] .step h3 {
  color: #0F172A;
}
[data-theme="light"] .step p {
  color: #475569;
}
[data-theme="light"] .step-ico {
  background: #F8FAFC;
  border-color: rgba(255,106,0,0.3);
}
[data-theme="light"] .step-line {
  background: #E2E8F0;
}

/* ═════════════════════════════════════════════════════════════════════════════
   REVIEWS — Light
═════════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .reviews-section {
  background: #F1F5F9;
}
[data-theme="light"] .reviews-section .section-title.dark-title {
  color: #0F172A;
}
[data-theme="light"] .reviews-section .section-tag.dark {
  background: rgba(255,106,0,0.08);
}
[data-theme="light"] .review-card {
  background: #FFFFFF;
  border-color: #E2E8F0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
[data-theme="light"] .review-card p {
  color: #334155;
}
[data-theme="light"] .rv-name {
  color: #0F172A;
}
[data-theme="light"] .rv-role {
  color: #475569;
}
[data-theme="light"] .rv-btn {
  background: rgba(15,23,42,0.06);
  border-color: #E2E8F0;
  color: #0F172A;
}
[data-theme="light"] .rv-btn:hover {
  background: #FF6A00;
  border-color: #FF6A00;
  color: #fff;
}
[data-theme="light"] .dot {
  background: #CBD5E1;
}
[data-theme="light"] .dot.active {
  background: #FF6A00;
}

/* ═════════════════════════════════════════════════════════════════════════════
   CTA BANNER — Light  (keeps orange gradient, but lightens white text for more pop)
═════════════════════════════════════════════════════════════════════════════ */
/* CTA banner intentionally stays the same bold orange in both modes */

/* ═════════════════════════════════════════════════════════════════════════════
   FOOTER — Light
═════════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .footer {
  background: #0F172A;
}
/* Footer stays dark in light mode for premium contrast — this is an intentional
   design choice used in most high-end sites. The footer text colors are already
   light on dark. No further overrides needed. */

/* ═════════════════════════════════════════════════════════════════════════════
   MOBILE NAV MENU — Light
═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  [data-theme="light"] .nav-links {
    background: rgba(248,250,252,0.98) !important;
    border-top-color: #E2E8F0 !important;
  }
  [data-theme="light"] .feature-item + .feature-item {
    border-top-color: #E2E8F0;
    border-left: none;
  }
  [data-theme="light"] .feature-item:first-child {
    border-top: none;
  }
}

/* Map pin labels light override */
[data-theme="light"] .mpin span {
  color: #0F172A;
  text-shadow: 0 1px 3px rgba(255,255,255,0.8);
}