/* ==========================================================================
   Bellad Tata Motors — Premium Light Theme Enhancements
   --------------------------------------------------------------------------
   Adds richness, depth and texture to the light theme WITHOUT breaking the
   dark layout. Every rule is scoped under [data-theme="light"] so dark mode
   is completely untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LIGHT BODY — soft gradient wash + faint blueprint grid for depth
   -------------------------------------------------------------------------- */
[data-theme="light"] body {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(240, 124, 1, 0.10) 0%, transparent 55%),
    radial-gradient(1000px 500px at -10% 15%, rgba(56, 130, 246, 0.07) 0%, transparent 50%),
    radial-gradient(900px 700px at 50% 120%, rgba(240, 124, 1, 0.06) 0%, transparent 60%),
    var(--bg-obsidian);
  background-attachment: fixed;
}

/* --------------------------------------------------------------------------
   2. AMBIENT GLOW ORBS — floating colour accents (light version)
   -------------------------------------------------------------------------- */
[data-theme="light"] .ambient-halo {
  opacity: 0.55;
  mix-blend-mode: normal;
  filter: saturate(1.1);
}

[data-theme="light"] .ambient-halo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 124, 1, 0.10) 0%, transparent 70%);
}

/* --------------------------------------------------------------------------
   3. CARDS & PANELS — premium elevation, crisp hairline borders
   -------------------------------------------------------------------------- */
[data-theme="light"] .glass-panel,
[data-theme="light"] .card-luxury,
[data-theme="light"] .booking-console-card,
[data-theme="light"] .compare-console,
[data-theme="light"] .specs-lux-item,
[data-theme="light"] .form-card,
[data-theme="light"] .info-card,
[data-theme="light"] .team-card,
[data-theme="light"] .faq-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .blog-card {
  background: var(--light-surface-1);
  border: 1px solid var(--light-line-soft);
  box-shadow: var(--shadow-card);
}

[data-theme="light"] .glass-panel:hover,
[data-theme="light"] .card-luxury:hover,
[data-theme="light"] .booking-console-card:hover,
[data-theme="light"] .compare-console:hover,
[data-theme="light"] .specs-lux-item:hover,
[data-theme="light"] .form-card:hover,
[data-theme="light"] .info-card:hover,
[data-theme="light"] .team-card:hover,
[data-theme="light"] .faq-card:hover,
[data-theme="light"] .pricing-card:hover,
[data-theme="light"] .blog-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--light-line-strong);
}

/* --------------------------------------------------------------------------
   4. SECTION SURFACES — alternate subtle tones to separate content blocks
   -------------------------------------------------------------------------- */
[data-theme="light"] .services-section {
  background: linear-gradient(to bottom, var(--bg-obsidian) 0%, var(--light-surface-2) 100%);
}

[data-theme="light"] .silhouette-interactive-panel {
  background: transparent;
}

/* --------------------------------------------------------------------------
   5. FORMS — refined light inputs
   -------------------------------------------------------------------------- */
[data-theme="light"] .form-control-custom,
[data-theme="light"] .newsletter-fields input,
[data-theme="light"] .contact-form input,
[data-theme="light"] .contact-form textarea,
[data-theme="light"] .contact-form select {
  background: var(--light-surface-1);
  border: 1px solid var(--light-line-soft);
  color: var(--text-primary);
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.04);
}

[data-theme="light"] .form-control-custom:focus,
[data-theme="light"] .newsletter-fields input:focus,
[data-theme="light"] .contact-form input:focus,
[data-theme="light"] .contact-form textarea:focus,
[data-theme="light"] .contact-form select:focus {
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 3px rgba(240, 124, 1, 0.15);
  outline: none;
}

/* --------------------------------------------------------------------------
   6. STATS — soft number colour for light
   -------------------------------------------------------------------------- */
[data-theme="light"] .stat-num {
  color: var(--accent-orange);
  text-shadow: 0 2px 20px rgba(240, 124, 1, 0.25);
}

/* --------------------------------------------------------------------------
   7. BUTTONS — refined light ghost/secondary buttons
   -------------------------------------------------------------------------- */
[data-theme="light"] .btn-ghost,
[data-theme="light"] .btn-outline,
[data-theme="light"] .loc-btn-ghost,
[data-theme="light"] .curvv-btn-ghost {
  background: var(--light-surface-1);
  border-color: var(--light-line-strong);
  color: var(--text-primary);
}

[data-theme="light"] .btn-ghost:hover,
[data-theme="light"] .btn-outline:hover,
[data-theme="light"] .loc-btn-ghost:hover,
[data-theme="light"] .curvv-btn-ghost:hover {
  border-color: var(--accent-orange);
  color: var(--accent-orange);
  background: rgba(240, 124, 1, 0.05);
}

/* --------------------------------------------------------------------------
   8. ACCENT TEXT — ensure gradient text stays readable & brand-coloured
   -------------------------------------------------------------------------- */
[data-theme="light"] .text-gradient-cyan {
  background: linear-gradient(120deg, var(--text-primary) 25%, var(--accent-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="light"] .text-gradient-orange {
  background: linear-gradient(120deg, #7a3c00 0%, var(--accent-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   9. DIVIDERS — softer hairlines in light
   -------------------------------------------------------------------------- */
[data-theme="light"] .divider-line,
[data-theme="light"] hr,
[data-theme="light"] .section-divider {
  border-color: var(--light-line-soft);
}

/* --------------------------------------------------------------------------
   10. MEGAMENU / DROPDOWN — clean light dropdown surface
   -------------------------------------------------------------------------- */
[data-theme="light"] .megamenu-custom,
[data-theme="light"] .dropdown-menu {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--light-line-soft);
  box-shadow: var(--shadow-panel);
}

/* --------------------------------------------------------------------------
   11. SCROLL PROGRESS + MARQUEE in light
   -------------------------------------------------------------------------- */
[data-theme="light"] #scrollProgressBar {
  box-shadow: 0 0 12px rgba(240, 124, 1, 0.4);
}

[data-theme="light"] .marquee-band {
  background: var(--light-surface-1);
  border-color: var(--light-line-soft);
}

/* --------------------------------------------------------------------------
   12. FOOTER stays dark for contrast (premium inversion) — keep text legible
   -------------------------------------------------------------------------- */
/* Footer intentionally remains dark to anchor the page. Nothing to change. */

/* --------------------------------------------------------------------------
   13. REDUCED-MOTION SAFETY
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-theme="light"] body {
    background-attachment: scroll;
  }
}

/* --------------------------------------------------------------------------
   14. TECHNICAL GRID / DOT TEXTURE — premium automotive blueprint feel
       Add class="light-grid-section" to any section to opt in.
   -------------------------------------------------------------------------- */
[data-theme="light"] .light-grid-section {
  position: relative;
}

[data-theme="light"] .light-grid-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.10) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7) 0%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   15. IMAGES & MEDIA — soften heavy drop shadows / keep contrast in light
   -------------------------------------------------------------------------- */
[data-theme="light"] img {
  -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   16. BADGES & PILLS — crisp light chips
   -------------------------------------------------------------------------- */
[data-theme="light"] .badge,
[data-theme="light"] .loc-badge,
[data-theme="light"] .chip,
[data-theme="light"] .tag {
  background: rgba(240, 124, 1, 0.08);
  border: 1px solid rgba(240, 124, 1, 0.25);
  color: #b35200;
}

/* --------------------------------------------------------------------------
   17. MODAL / OVERLAY SCROLLBARS & SELECTS in light
   -------------------------------------------------------------------------- */
[data-theme="light"] select,
[data-theme="light"] input,
[data-theme="light"] textarea {
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   18. ACTIVE NAV LINK accent in light
   -------------------------------------------------------------------------- */
[data-theme="light"] .nav-link-custom.active,
[data-theme="light"] .nav-link-custom:hover {
  color: var(--accent-orange) !important;
}

/* --------------------------------------------------------------------------
   19. BUY-INTENT CTA — premium glow on primary purchase buttons
   -------------------------------------------------------------------------- */
[data-theme="light"] .btn-primary-custom,
[data-theme="light"] .btn-luxury,
[data-theme="light"] .loc-btn-solid,
[data-theme="light"] .cta-btn,
[data-theme="light"] .btn-custom {
  background: linear-gradient(120deg, #f07c01 0%, #c95600 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(240, 124, 1, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

[data-theme="light"] .btn-primary-custom:hover,
[data-theme="light"] .btn-luxury:hover,
[data-theme="light"] .loc-btn-solid:hover,
[data-theme="light"] .cta-btn:hover,
[data-theme="light"] .btn-custom:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(240, 124, 1, 0.45);
  filter: brightness(1.05);
  color: #fff;
}

/* --------------------------------------------------------------------------
   20. PRODUCT IMAGES — premium, consistent treatment in light
   -------------------------------------------------------------------------- */
[data-theme="light"] .product-card img,
[data-theme="light"] .vehicle-card img,
[data-theme="light"] .showcase-card img,
[data-theme="light"] .model-card-media img,
[data-theme="light"] .collage-main {
  filter: brightness(1);
}

/* --------------------------------------------------------------------------
   21. SECTION HEADINGS — subtle accent rule for structure
   -------------------------------------------------------------------------- */
[data-theme="light"] .section-header::after,
[data-theme="light"] .loc-head::after {
  background: linear-gradient(90deg, var(--accent-orange), transparent);
}