/*
 * RideLynk Global Theme
 * Primary:      #E2BC3D  (Gold)
 * Primary Light:#F5D97A  (Light Gold)
 * Secondary:    #C9A52A  (Dark Gold)
 * Button Grad:  #E2BC3D → #FF8C42
 * Background:   White / Light Gray
 */

:root {
  --primary:        #E2BC3D;
  --primary-light:  #F5D97A;
  --secondary:      #C9A52A;
  --btn-grad-start: #E2BC3D;
  --btn-grad-end:   #FF8C42;
  --primary-rgb:    226, 188, 61;
  --bg-dark:        #ffffff;
  --bg-card:        #ffffff;
  --bg-page:        #f8f6f0;
  --text-primary:   #1a1a1a;
  --text-secondary: #555555;
  --border-color:   rgba(226, 188, 61, 0.3);
}

/* ── Page background ── */
body {
  background: #ffffff !important;
  color: #1a1a1a !important;
}

/* ── Remove dark animated gradient on home page ── */
.animated-gradient {
  display: none !important;
}

.overlay {
  display: none !important;
}

.bg-overlay {
  background: rgba(0, 0, 0, 0.55) !important;
}

/* ── Cards ── */
.card,
.stat-card {
  background: #ffffff !important;
  border: 1px solid rgba(226, 188, 61, 0.2) !important;
  box-shadow: 0 2px 12px rgba(226, 188, 61, 0.08) !important;
  color: #1a1a1a !important;
}

.card:hover,
.stat-card:hover {
  border-color: rgba(226, 188, 61, 0.45) !important;
  box-shadow: 0 6px 24px rgba(226, 188, 61, 0.18) !important;
  transform: translateY(-2px);
}

.card-title,
.card h2,
.card h3,
.section-title {
  color: #1a1a1a !important;
}

.card-value,
.stat-value {
  color: #E2BC3D !important;
}

.card-label,
.stat-label,
.card-subtitle {
  color: #666666 !important;
}

/* ── Sidebar ── */
.sidebar {
  background: linear-gradient(180deg, #1a1200 0%, #0d0900 100%) !important;
  border-right: 1px solid rgba(226, 188, 61, 0.2) !important;
}

.sidebar-logo {
  color: #E2BC3D !important;
}

.menu-item {
  color: rgba(255, 255, 255, 0.75) !important;
}

.menu-item:hover {
  background: rgba(226, 188, 61, 0.12) !important;
  color: #F5D97A !important;
}

.menu-item.active {
  background: rgba(226, 188, 61, 0.18) !important;
  border-left-color: #E2BC3D !important;
  color: #F5D97A !important;
}

.sidebar-footer .logout-btn {
  background: rgba(226, 188, 61, 0.15) !important;
  border-color: rgba(226, 188, 61, 0.3) !important;
  color: #F5D97A !important;
}

.sidebar-footer .logout-btn:hover {
  background: rgba(226, 188, 61, 0.28) !important;
}

/* ── Topbar ── */
.topbar {
  background: #ffffff !important;
  border: 1px solid rgba(226, 188, 61, 0.15) !important;
  box-shadow: 0 2px 10px rgba(226, 188, 61, 0.08) !important;
}

.topbar-title {
  color: #1a1a1a !important;
}

.menu-toggle {
  color: #1a1a1a !important;
}

/* ── Status toggle ── */
.status-toggle {
  background: rgba(226, 188, 61, 0.08) !important;
  border: 1px solid rgba(226, 188, 61, 0.2) !important;
}

.status-toggle span {
  color: #1a1a1a !important;
}

.toggle-switch {
  background: #ddd !important;
}

.toggle-switch.active {
  background: linear-gradient(135deg, #E2BC3D 0%, #FF8C42 100%) !important;
  box-shadow: 0 0 12px rgba(226, 188, 61, 0.4) !important;
}

/* ── Driver avatar ── */
.driver-avatar {
  background: linear-gradient(135deg, #E2BC3D 0%, #C9A52A 100%) !important;
  color: #0a0a0a !important;
  box-shadow: 0 4px 12px rgba(226, 188, 61, 0.35) !important;
}

.driver-name {
  color: #1a1a1a !important;
}

.driver-rating {
  color: #666666 !important;
}

/* ── Banner ── */
.banner {
  background: linear-gradient(135deg, #E2BC3D 0%, #C9A52A 100%) !important;
  color: #0a0a0a !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(226, 188, 61, 0.3) !important;
}

.banner-content h2,
.banner-content p {
  color: #0a0a0a !important;
}

/* ── Buttons ── */
.btn-primary,
#nextBtn,
.btn-theme {
  background: linear-gradient(135deg, #E2BC3D 0%, #FF8C42 100%) !important;
  color: #0a0a0a !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(226, 188, 61, 0.35) !important;
}

.btn-primary:hover,
#nextBtn:hover,
.btn-theme:hover {
  box-shadow: 0 8px 25px rgba(226, 188, 61, 0.55) !important;
  transform: translateY(-2px);
}

.btn-secondary,
#prevBtn {
  background: #f0ece0 !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(226, 188, 61, 0.3) !important;
}

.btn-secondary:hover,
#prevBtn:hover {
  background: #e8e0cc !important;
}

/* ── Login button ── */
.btn-login {
  background: linear-gradient(135deg, #E2BC3D 0%, #FF8C42 100%) !important;
  color: #0a0a0a !important;
  box-shadow: 0 4px 15px rgba(226, 188, 61, 0.4) !important;
}

.btn-login:hover {
  box-shadow: 0 8px 30px rgba(226, 188, 61, 0.6) !important;
}

/* ── Inputs ── */
input:focus,
select:focus,
textarea:focus {
  border-color: #E2BC3D !important;
  box-shadow: 0 0 0 3px rgba(226, 188, 61, 0.15) !important;
  outline: none !important;
}

/* ── Empty state ── */
.empty-state {
  background: #ffffff !important;
  border: 1px solid rgba(226, 188, 61, 0.15) !important;
}

.empty-text {
  color: #555555 !important;
}

.empty-subtext {
  color: #999999 !important;
}

/* ── Progress steps ── */
.progress-fill {
  background: #E2BC3D !important;
}

.step.active .step-circle {
  background: #E2BC3D !important;
  border-color: #E2BC3D !important;
  color: #0a0a0a !important;
}

.step.completed .step-circle {
  background: #4caf50 !important;
  border-color: #4caf50 !important;
}

/* ── File upload ── */
.file-upload {
  background: #faf8f2 !important;
  border-color: #e0d8c0 !important;
}

.file-upload:hover {
  border-color: #E2BC3D !important;
  background: rgba(226, 188, 61, 0.05) !important;
}

/* ── Filter buttons ── */
.filter-btn {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 2px solid #e0d8c0 !important;
}

.filter-btn.active {
  background: linear-gradient(135deg, #E2BC3D 0%, #FF8C42 100%) !important;
  color: #0a0a0a !important;
  border-color: transparent !important;
}

.filter-btn:hover {
  border-color: #E2BC3D !important;
}

/* ── Tables ── */
.earnings-table th {
  background: #faf8f2 !important;
  color: #1a1a1a !important;
  border-bottom: 2px solid rgba(226, 188, 61, 0.3) !important;
}

.earnings-table td {
  color: #333333 !important;
  border-bottom: 1px solid #f0ece0 !important;
}

.earnings-table tr:hover {
  background: #faf8f2 !important;
}

/* ── Admin panel ── */
.top-bar h1,
.content-header h2,
.role-card-header h3,
.stat-card h3,
.chart-card h3 {
  color: #E2BC3D !important;
}

table.dataTable thead th {
  color: #E2BC3D !important;
  background: rgba(226, 188, 61, 0.06) !important;
}

/* ── Privacy / Terms pages ── */
.last-updated,
.back-btn {
  background: rgba(226, 188, 61, 0.12) !important;
  border-color: rgba(226, 188, 61, 0.35) !important;
  color: #C9A52A !important;
}

.back-btn:hover {
  background: rgba(226, 188, 61, 0.25) !important;
}

.card h2 .icon {
  background: rgba(226, 188, 61, 0.12) !important;
}

.highlight-box {
  border-left-color: #E2BC3D !important;
  background: rgba(226, 188, 61, 0.08) !important;
  color: #555555 !important;
}

.logo {
  color: #E2BC3D !important;
}

/* ── Connect banner ── */
.connect-banner-btn {
  background: linear-gradient(135deg, #E2BC3D 0%, #FF8C42 100%) !important;
  color: #0a0a0a !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f0ece0;
}

::-webkit-scrollbar-thumb {
  background: rgba(226, 188, 61, 0.4) !important;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(226, 188, 61, 0.65) !important;
}

/* ── Sidebar overlay ── */
.sidebar-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* ── Onboarding sidebar ── */
.onboarding-wrapper .sidebar {
  background: linear-gradient(180deg, #1a1200 0%, #0d0900 100%) !important;
}

/* ── Step items in onboarding ── */
.step-item.active {
  background: rgba(226, 188, 61, 0.2) !important;
}

.step-item.active .step-number {
  background: #E2BC3D !important;
  color: #0a0a0a !important;
}

/* ── Chart ── */
#earningsChart {
  filter: none;
}


/* ════════════════════════════════════════
   HOME PAGE (index.html) SPECIFIC OVERRIDES
   White background + #F5D97A gold text
   ════════════════════════════════════════ */

/* Nav links */
.nav-links a {
  color: #1a1a1a !important;
}

.nav-links a:hover {
  color: #E2BC3D !important;
}

/* Hamburger */
.hamburger {
  color: #1a1a1a !important;
}

/* Hero section */
.hero {
  background: #ffffff !important;
  color: #1a1a1a !important;
}

.hero h1,
.hero-title {
  color: #1a1a1a !important;
}

.hero h1 span,
.hero-title span,
.highlight {
  color: #F5D97A !important;
}

.hero p,
.hero-subtitle {
  color: #555555 !important;
}

/* Section headings */
section h2,
.section-title-main,
.section h2 {
  color: #1a1a1a !important;
}

section h2 span,
.section h2 span {
  color: #F5D97A !important;
}

section p,
.section-desc {
  color: #555555 !important;
}

/* Feature cards */
.feature-card,
.service-card,
.cab-card,
.step-card {
  background: #ffffff !important;
  border: 1px solid rgba(226, 188, 61, 0.2) !important;
  box-shadow: 0 4px 20px rgba(226, 188, 61, 0.08) !important;
  color: #1a1a1a !important;
}

.feature-card:hover,
.service-card:hover,
.cab-card:hover {
  border-color: rgba(226, 188, 61, 0.45) !important;
  box-shadow: 0 8px 30px rgba(226, 188, 61, 0.18) !important;
}

.feature-card h3,
.service-card h3,
.cab-card h3,
.step-card h3 {
  color: #1a1a1a !important;
}

.feature-card p,
.service-card p,
.cab-card p,
.step-card p,
.cab-description {
  color: #555555 !important;
}

/* Icon backgrounds */
.feature-icon,
.service-icon {
  background: rgba(226, 188, 61, 0.12) !important;
  color: #E2BC3D !important;
}

/* Primary button */
.btn-primary {
  background: linear-gradient(135deg, #E2BC3D 0%, #FF8C42 100%) !important;
  color: #0a0a0a !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(226, 188, 61, 0.35) !important;
}

.btn-primary:hover {
  box-shadow: 0 8px 25px rgba(226, 188, 61, 0.55) !important;
}

/* Secondary button */
.btn-secondary {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 2px solid rgba(226, 188, 61, 0.4) !important;
}

.btn-secondary:hover {
  background: rgba(226, 188, 61, 0.08) !important;
  border-color: #E2BC3D !important;
}

/* Driver / Admin buttons */
.btn-driver,
.btn-admin {
  background: rgba(226, 188, 61, 0.1) !important;
  color: #1a1a1a !important;
  border: 2px solid rgba(226, 188, 61, 0.4) !important;
}

.btn-driver:hover,
.btn-admin:hover {
  background: rgba(226, 188, 61, 0.2) !important;
}

/* Stats section */
.stat-number,
.stats-number {
  color: #E2BC3D !important;
}

.stat-text,
.stats-label {
  color: #555555 !important;
}

/* Testimonials */
.testimonial-card,
.review-card {
  background: #ffffff !important;
  border: 1px solid rgba(226, 188, 61, 0.2) !important;
  color: #1a1a1a !important;
}

.testimonial-card p,
.review-card p {
  color: #555555 !important;
}

/* Footer */
footer,
.footer {
  background: #1a1200 !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.footer-links a,
footer a {
  color: rgba(255, 255, 255, 0.75) !important;
}

.footer-links a:hover,
footer a:hover {
  color: #F5D97A !important;
}

/* Contact form */
.form-field input,
.form-field textarea,
.newsletter-form input {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 2px solid rgba(226, 188, 61, 0.3) !important;
}

.form-field input::placeholder,
.form-field textarea::placeholder,
.newsletter-form input::placeholder {
  color: #aaaaaa !important;
}

.form-field label {
  color: #1a1a1a !important;
}

/* Cab/service feature list items */
.cab-feature,
.feature-list li {
  color: #555555 !important;
}

/* Section backgrounds alternating */
.section-alt,
.bg-light-section {
  background: #faf8f2 !important;
}

/* Step numbers */
.step-number {
  background: linear-gradient(135deg, #E2BC3D 0%, #FF8C42 100%) !important;
  color: #0a0a0a !important;
}

/* Carousel arrows */
.owl-prev,
.owl-next,
.carousel-btn {
  background: rgba(226, 188, 61, 0.15) !important;
  border: 2px solid rgba(226, 188, 61, 0.4) !important;
  color: #E2BC3D !important;
}

.owl-prev:hover,
.owl-next:hover,
.carousel-btn:hover {
  background: #E2BC3D !important;
  color: #0a0a0a !important;
}

/* App download section */
.app-section,
.download-section {
  background: linear-gradient(135deg, #1a1200 0%, #0d0900 100%) !important;
}

/* Badges / tags */
.badge,
.tag {
  background: rgba(226, 188, 61, 0.15) !important;
  color: #C9A52A !important;
  border: 1px solid rgba(226, 188, 61, 0.3) !important;
}


/* ════════════════════════════════════════
   FIX: Section stacking / overlay issues
   ════════════════════════════════════════ */

/* Particles must stay inside hero only */
.particles {
  position: absolute !important;
  z-index: 0 !important;
}

/* Hero stays in normal flow */
.hero {
  position: relative !important;
  z-index: 1 !important;
  background: #ffffff !important;
}

/* All sections must have white bg and normal stacking */
section,
.stats,
.features,
.services,
.cta-section,
.testimonials,
.how-it-works,
.cab-section,
.contact-section,
.newsletter-section {
  position: relative !important;
  z-index: 1 !important;
  background: #ffffff !important;
}

/* Alternating section bg */
.stats,
.how-it-works,
.newsletter-section {
  background: #faf8f2 !important;
}

/* Remove all dark overlays from sections */
section::before,
section::after {
  display: none !important;
}

/* Buttons must always be visible */
.btn-primary,
.btn-secondary,
.btn-driver,
.btn-admin,
.hero-buttons,
.hero-buttons a,
.hero-buttons button {
  position: relative !important;
  z-index: 5 !important;
}

/* Hero content above particles */
.hero-content {
  position: relative !important;
  z-index: 2 !important;
}

.hero-car {
  position: relative !important;
  z-index: 2 !important;
}


/* ════════════════════════════════════════
   FIX: Stats/Impact section overlap
   ════════════════════════════════════════ */

/* Hero must clip its children */
.hero {
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Stats section must be completely below hero */
.stats {
  position: relative !important;
  z-index: 2 !important;
  background: #faf8f2 !important;
  margin-top: 0 !important;
  padding-top: 80px !important;
  border-top: 3px solid rgba(226, 188, 61, 0.2) !important;
  isolation: isolate !important;
}

/* Stat items - remove scale transform that causes layout shift */
.stat-item {
  opacity: 0;
  transform: translateY(20px) !important;
  transition: all 0.6s ease !important;
}

.stat-item.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Section title in stats */
.stats .section-title,
.stats h2 {
  color: #1a1a1a !important;
  margin-bottom: 50px !important;
}


/* ════════════════════════════════════════
   FIX: Download App Section text visibility
   ════════════════════════════════════════ */

.download-app,
.download-app * {
  -webkit-text-fill-color: unset !important;
}

.download-app {
  background: linear-gradient(135deg, #1a1200 0%, #0d0900 100%) !important;
}

.download-text h2 {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
}

.download-text p,
.download-text > p {
  color: rgba(255, 255, 255, 0.85) !important;
}

.app-features li {
  color: rgba(255, 255, 255, 0.85) !important;
}

.app-btn small {
  color: rgba(255, 255, 255, 0.7) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
}

.app-btn strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.app-btn-icon {
  fill: white !important;
}

.app-btn:hover small,
.app-btn:hover strong {
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
}

.app-btn:hover .app-btn-icon {
  fill: #0a0a0a !important;
}


/* ════════════════════════════════════════
   Font Awesome Icons Styling
   ════════════════════════════════════════ */

/* Feature icons */
.feature-icon {
  width: 75px !important;
  height: 75px !important;
  border-radius: 50% !important;
  background: rgba(226, 188, 61, 0.12) !important;
  border: 2px solid rgba(226, 188, 61, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 20px !important;
  font-size: 1rem !important;
}

.feature-icon i {
  font-size: 1.8rem !important;
  color: #E2BC3D !important;
}

.feature-card:hover .feature-icon {
  background: linear-gradient(135deg, #E2BC3D, #FF8C42) !important;
}

.feature-card:hover .feature-icon i {
  color: #0a0a0a !important;
}

/* Step icons */
.step-icon {
  width: 55px !important;
  height: 55px !important;
  border-radius: 50% !important;
  background: rgba(226, 188, 61, 0.12) !important;
  border: 2px solid rgba(226, 188, 61, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 10px auto !important;
}

.step-icon i {
  font-size: 1.4rem !important;
  color: #E2BC3D !important;
}

/* Safety icons */
.safety-icon {
  width: 65px !important;
  height: 65px !important;
  border-radius: 50% !important;
  background: rgba(226, 188, 61, 0.12) !important;
  border: 2px solid rgba(226, 188, 61, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 15px !important;
}

.safety-icon i {
  font-size: 1.6rem !important;
  color: #E2BC3D !important;
}

/* Testimonial stars */
.stars {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.stars i {
  color: #E2BC3D !important;
  font-size: 0.95rem !important;
}

/* App features list icons */
.app-features li i {
  color: #E2BC3D !important;
  margin-right: 8px !important;
  width: 18px !important;
  text-align: center !important;
}

/* Contact icon */
.contact-icon {
  width: 45px !important;
  height: 45px !important;
  border-radius: 50% !important;
  background: rgba(226, 188, 61, 0.12) !important;
  border: 2px solid rgba(226, 188, 61, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.contact-icon i {
  font-size: 1.1rem !important;
  color: #E2BC3D !important;
}


/* ════════════════════════════════════════
   Clean SVG Icons Styling
   ════════════════════════════════════════ */

/* Feature icon SVGs */
.feature-icon svg {
  width: 36px !important;
  height: 36px !important;
  stroke: #E2BC3D !important;
  color: #E2BC3D !important;
}

.feature-card:hover .feature-icon svg {
  stroke: #0a0a0a !important;
}

/* Step icon SVGs */
.step-icon svg {
  width: 28px !important;
  height: 28px !important;
  stroke: #E2BC3D !important;
}

/* Safety icon SVGs */
.safety-icon svg {
  width: 32px !important;
  height: 32px !important;
  stroke: #E2BC3D !important;
}

/* Stars SVGs */
.stars svg {
  width: 18px !important;
  height: 18px !important;
}

/* List icons */
.list-icon {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
  display: inline-block !important;
}

/* Contact icon SVG */
.contact-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #E2BC3D !important;
}


/* Override inline safety-icon font-size that was showing emojis */
.safety-icon {
  font-size: 0 !important;
  width: 65px !important;
  height: 65px !important;
  border-radius: 50% !important;
  background: rgba(226, 188, 61, 0.12) !important;
  border: 2px solid rgba(226, 188, 61, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 20px !important;
}

.safety-icon svg {
  width: 30px !important;
  height: 30px !important;
  stroke: #E2BC3D !important;
  display: block !important;
}


/* Contact icons SVG fix */
.contact-icon {
  font-size: 0 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(226, 188, 61, 0.12) !important;
  border: 2px solid rgba(226, 188, 61, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.contact-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #E2BC3D !important;
  display: block !important;
}


/* ════════════════════════════════════════
   FULL RESPONSIVE OVERRIDES
   ════════════════════════════════════════ */

/* ── All sections white bg on all screens ── */
section,
.hero, .features, .stats, .cab-types,
.how-it-works, .testimonials, .safety-section,
.faq-section, .cta-section, .contact-section {
  background: #ffffff !important;
}

.stats, .how-it-works, .newsletter-section, .faq-section {
  background: #faf8f2 !important;
}

.download-app, .footer {
  background: linear-gradient(135deg, #1a1200 0%, #0d0900 100%) !important;
}

/* ── Nav mobile menu ── */
@media (max-width: 768px) {
  .nav-links {
    background: #ffffff !important;
    border-bottom: 2px solid rgba(226, 188, 61, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
  }

  .nav-links a {
    color: #1a1a1a !important;
    border-bottom: 1px solid rgba(226, 188, 61, 0.1) !important;
    padding: 12px 0 !important;
  }

  .nav-links a:hover {
    color: #E2BC3D !important;
  }

  /* Hero */
  .hero {
    padding: 100px 20px 50px !important;
    text-align: center !important;
  }

  .hero h1 {
    font-size: 2.2rem !important;
    line-height: 1.3 !important;
    color: #1a1a1a !important;
  }

  .hero p {
    font-size: 1rem !important;
    color: #555 !important;
  }

  .hero-buttons {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  .hero-car {
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  /* Section titles */
  .section-title {
    font-size: 1.8rem !important;
    color: #1a1a1a !important;
  }

  /* Features */
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 !important;
  }

  .feature-card {
    padding: 25px 20px !important;
  }

  .feature-card h3 {
    font-size: 1.2rem !important;
    color: #1a1a1a !important;
  }

  .feature-card p {
    color: #555 !important;
    font-size: 0.9rem !important;
  }

  /* Stats */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .stat-number {
    font-size: 2rem !important;
  }

  .stat-label {
    font-size: 0.85rem !important;
    color: #555 !important;
  }

  /* Cab cards */
  .cab-card {
    min-width: 270px !important;
    padding: 25px 20px !important;
  }

  .cab-name {
    font-size: 1.3rem !important;
    color: #1a1a1a !important;
  }

  .cab-description {
    color: #555 !important;
    font-size: 0.9rem !important;
  }

  .cab-features li {
    color: #333 !important;
    font-size: 0.85rem !important;
  }

  /* Steps */
  .steps-container {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }

  .step-arrow {
    display: none !important;
  }

  .step-card {
    width: 100% !important;
    max-width: 400px !important;
    padding: 25px 20px !important;
  }

  .step-card h3 {
    color: #1a1a1a !important;
  }

  .step-card p {
    color: #555 !important;
  }

  /* Testimonials */
  .testimonials-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .testimonial-card {
    padding: 25px 20px !important;
  }

  .testimonial-text {
    color: #333 !important;
    font-size: 0.95rem !important;
  }

  /* Safety */
  .safety-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .safety-card {
    padding: 25px 20px !important;
  }

  .safety-card h3 {
    color: #1a1a1a !important;
    font-size: 1rem !important;
  }

  .safety-card p {
    color: #555 !important;
    font-size: 0.85rem !important;
  }

  /* Download */
  .download-content {
    flex-direction: column !important;
    text-align: center !important;
    gap: 30px !important;
  }

  .app-buttons {
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .app-btn {
    width: 100% !important;
    max-width: 280px !important;
    justify-content: center !important;
  }

  .app-screen-img {
    max-width: 220px !important;
  }

  /* FAQ */
  .faq-question h3 {
    font-size: 0.95rem !important;
    color: #1a1a1a !important;
  }

  /* Contact */
  .contact-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .contact-info {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 25px 20px !important;
  }

  .contact-info h2 {
    color: #1a1a1a !important;
    font-size: 1.8rem !important;
  }

  .contact-info p {
    color: #555 !important;
  }

  .contact-details li {
    gap: 12px !important;
  }

  .contact-details strong {
    color: #1a1a1a !important;
  }

  /* Newsletter */
  .newsletter-form {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .newsletter-form input,
  .newsletter-form button {
    width: 100% !important;
  }

  /* CTA */
  .cta-section h2 {
    font-size: 1.8rem !important;
    color: #1a1a1a !important;
  }

  .cta-section p {
    color: #555 !important;
  }

  /* Footer */
  .footer-links {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }

  /* Padding for all sections */
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ── Extra small (480px) ── */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.8rem !important;
  }

  .section-title {
    font-size: 1.5rem !important;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
  }

  .stat-number {
    font-size: 1.7rem !important;
  }

  .safety-grid {
    grid-template-columns: 1fr !important;
  }

  .features-grid {
    grid-template-columns: 1fr !important;
  }

  .cab-card {
    min-width: 240px !important;
  }

  .btn {
    font-size: 0.9rem !important;
    padding: 12px 20px !important;
  }

  .download-text h2 {
    font-size: 1.6rem !important;
  }

  .app-screen-img {
    max-width: 180px !important;
  }

  nav {
    padding: 12px 15px !important;
  }
}

/* ── Tablet (1024px) ── */
@media (max-width: 1024px) {
  .hero {
    padding: 100px 40px 50px !important;
    gap: 40px !important;
  }

  .hero h1 {
    font-size: 2.8rem !important;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .safety-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  section {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}


/* ════════════════════════════════════════
   FIX: animated-text double text issue
   ════════════════════════════════════════ */

.animated-text {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  display: inline-block !important;
  width: 100% !important;
}

/* Prevent theme.css h2 color from overriding gradient text */
section h2.animated-text,
.section-title.animated-text {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}


/* ════════════════════════════════════════
   DRIVER DASHBOARD SPECIFIC OVERRIDES
   Light theme — white sidebar, gold accents
   ════════════════════════════════════════ */

/* Driver dashboard body */
body.driver-page {
  background: #f5f6fa !important;
}

/* Sidebar — white for driver dashboard */
body.driver-page .sidebar,
.app-wrapper .sidebar {
  background: #ffffff !important;
  border-right: 1px solid #f0f0f0 !important;
  box-shadow: 2px 0 12px rgba(0,0,0,0.06) !important;
}

/* Nav items */
.app-wrapper .nav-item {
  color: #666666 !important;
  background: transparent !important;
  border-left: 3px solid transparent !important;
}

.app-wrapper .nav-item:hover {
  background: #fafafa !important;
  color: #1a1a1a !important;
  border-left-color: rgba(226,188,61,0.4) !important;
}

.app-wrapper .nav-item.active {
  background: linear-gradient(135deg, rgba(226,188,61,0.1), rgba(255,140,66,0.06)) !important;
  border-left-color: #e2bc3d !important;
  color: #c9a52a !important;
  font-weight: 600 !important;
}

/* Sidebar logo */
.app-wrapper .sidebar-logo {
  border-bottom: 1px solid #f5f5f5 !important;
}

.app-wrapper .logo-text {
  color: #1a1a1a !important;
}

/* Sidebar footer logout */
.app-wrapper .sidebar-footer {
  border-top: 1px solid #f5f5f5 !important;
}

.app-wrapper .logout-btn {
  background: #fff5f5 !important;
  color: #dc3545 !important;
  border: 1px solid #fecaca !important;
}

.app-wrapper .logout-btn:hover {
  background: #fee2e2 !important;
}

/* Topbar */
.app-wrapper .topbar {
  background: #ffffff !important;
  border-bottom: 1px solid #f0f0f0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  height: 64px !important;
  padding: 0 24px !important;
}

.app-wrapper .topbar-title {
  color: #1a1a1a !important;
}

.app-wrapper .menu-toggle {
  color: #666 !important;
  background: none !important;
  border: none !important;
  border-radius: 8px !important;
}

.app-wrapper .menu-toggle:hover {
  background: #f5f5f5 !important;
}

/* Status toggle */
.app-wrapper .status-toggle {
  background: #f8f9fa !important;
  border: 1px solid #e9ecef !important;
  border-radius: 24px !important;
}

.app-wrapper .status-text {
  color: #666 !important;
}

/* Page content background */
.app-wrapper .page-content {
  background: #f5f6fa !important;
}

/* Stat cards */
.app-wrapper .stat-card {
  background: #ffffff !important;
  border: 1px solid #f0f0f0 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  border-radius: 16px !important;
}

.app-wrapper .stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important;
  border-color: rgba(226,188,61,0.2) !important;
}

.app-wrapper .stat-value {
  color: #1a1a1a !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
}

.app-wrapper .stat-label {
  color: #9ca3af !important;
  font-size: 0.75rem !important;
}

.app-wrapper .stat-trend {
  color: #9ca3af !important;
  font-size: 0.75rem !important;
}

/* Banner */
.app-wrapper .banner-card {
  background: linear-gradient(135deg, #e2bc3d 0%, #ff8c42 100%) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(226,188,61,0.3) !important;
}

.app-wrapper .banner-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.app-wrapper .banner-subtitle {
  color: rgba(255,255,255,0.88) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.88) !important;
}

/* Quick action cards */
.app-wrapper .quick-action-card {
  background: #ffffff !important;
  border: 2px solid transparent !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  border-radius: 16px !important;
}

.app-wrapper .quick-action-card:hover {
  border-color: #e2bc3d !important;
  box-shadow: 0 6px 20px rgba(226,188,61,0.15) !important;
}

.app-wrapper .quick-action-label {
  color: #1a1a1a !important;
}

/* Ride requests card */
.app-wrapper .ride-requests-card {
  background: #ffffff !important;
  border: 1px solid #f0f0f0 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  border-radius: 16px !important;
}

/* Empty state */
.app-wrapper .empty-state {
  background: transparent !important;
  border: none !important;
}

.app-wrapper .empty-title {
  color: #6b7280 !important;
}

.app-wrapper .empty-desc {
  color: #9ca3af !important;
}

/* Section title */
.app-wrapper .section-title {
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a !important;
}

/* Main content bg */
.app-wrapper .main-content {
  background: #f5f6fa !important;
}