/* Dark Mode Components - assets/css/dark-mode-components.css */

/* ====== SPECIFIC FIXES FOR REPORTED ISSUES ====== */

/* DARK MODE FIXES */

/* Fix 1: Logo text - invert only the "ORANGE" part, keep "MOBILITY SERVICES" orange */
[data-theme="dark"] img[src*="logotextnobg"] {
  filter: invert(1) brightness(0.9) hue-rotate(180deg) saturate(1.2);
}

/* Fix 2: Shop button selectors - make unselected buttons have black text in dark mode */
[data-theme="dark"] .category-btn:not(.bg-orange-500) {
  background-color: #f8fafc !important;
  color: #111827 !important;
  border-color: #e2e8f0 !important;
}

[data-theme="dark"] .category-btn:not(.bg-orange-500):hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* LIGHT MODE FIXES */

/* Fix 3: Font color for text in front of background video should be white */
#home h1,
#home p,
#home button,
#home .text-white,
#home .relative.z-10 * {
  color: #ffffff !important;
}

/* Fix 4: Font color for text in front of any background image should be white (BOTH modes) */
/* Light mode - specific targeting for service detail overlays */
.relative .absolute + .relative.z-10 *,
.relative .absolute + .relative *,
[style*="background-image"] .relative *,
[style*="background-image"] h1,
[style*="background-image"] h2,
[style*="background-image"] h3,
[style*="background-image"] p,
[style*="background-image"] button,
/* Service detail page headers over background images */
.service-detail .absolute.bottom-0 h2,
.service-detail .absolute.bottom-0 p,
.service-detail .absolute.inset-0 + .relative h2,
.service-detail .absolute.inset-0 + .relative p,
.service-detail .relative.z-10 h2,
.service-detail .relative.z-10 p,
.service-detail .text-4xl.font-bold,
.service-detail .text-xl.opacity-90,
.service-detail .absolute.bottom-0.left-0.right-0 h2,
.service-detail .absolute.bottom-0.left-0.right-0 p,
/* More specific service detail selectors */
#service-subscription .text-4xl.font-bold.mb-2,
#service-subscription .text-xl.opacity-90,
#service-valet .text-4xl.font-bold.mb-2,
#service-valet .text-xl.opacity-90,
#service-healthcheck .text-4xl.font-bold.mb-2,
#service-healthcheck .text-xl.opacity-90,
#service-parts .text-4xl.font-bold.mb-2,
#service-parts .text-xl.opacity-90,
#service-callouts .text-4xl.font-bold.mb-2,
#service-callouts .text-xl.opacity-90,
#service-customisation .text-4xl.font-bold.mb-2,
#service-customisation .text-xl.opacity-90 {
  color: #ffffff !important;
}

/* Dark mode - same specific targeting */
[data-theme="dark"] .relative .absolute + .relative.z-10 *,
[data-theme="dark"] .relative .absolute + .relative *,
[data-theme="dark"] [style*="background-image"] .relative *,
[data-theme="dark"] [style*="background-image"] h1,
[data-theme="dark"] [style*="background-image"] h2,
[data-theme="dark"] [style*="background-image"] h3,
[data-theme="dark"] [style*="background-image"] p,
[data-theme="dark"] [style*="background-image"] button,
[data-theme="dark"] .service-detail .absolute.bottom-0 h2,
[data-theme="dark"] .service-detail .absolute.bottom-0 p,
[data-theme="dark"] .service-detail .absolute.inset-0 + .relative h2,
[data-theme="dark"] .service-detail .absolute.inset-0 + .relative p,
[data-theme="dark"] .service-detail .relative.z-10 h2,
[data-theme="dark"] .service-detail .relative.z-10 p,
[data-theme="dark"] .service-detail .text-4xl.font-bold,
[data-theme="dark"] .service-detail .text-xl.opacity-90,
[data-theme="dark"] .service-detail .absolute.bottom-0.left-0.right-0 h2,
[data-theme="dark"] .service-detail .absolute.bottom-0.left-0.right-0 p,
[data-theme="dark"] #service-subscription .text-4xl.font-bold.mb-2,
[data-theme="dark"] #service-subscription .text-xl.opacity-90,
[data-theme="dark"] #service-valet .text-4xl.font-bold.mb-2,
[data-theme="dark"] #service-valet .text-xl.opacity-90,
[data-theme="dark"] #service-healthcheck .text-4xl.font-bold.mb-2,
[data-theme="dark"] #service-healthcheck .text-xl.opacity-90,
[data-theme="dark"] #service-parts .text-4xl.font-bold.mb-2,
[data-theme="dark"] #service-parts .text-xl.opacity-90,
[data-theme="dark"] #service-callouts .text-4xl.font-bold.mb-2,
[data-theme="dark"] #service-callouts .text-xl.opacity-90,
[data-theme="dark"] #service-customisation .text-4xl.font-bold.mb-2,
[data-theme="dark"] #service-customisation .text-xl.opacity-90 {
  color: #ffffff !important;
}

/* Fix 5: Subscription cards text should be white */
.plan-card h3,
.plan-card p,
.plan-card li,
.plan-card .text-4xl,
.plan-card .text-xl,
.plan-card .text-2xl,
.plan-card .text-lg,
.plan-card .text-sm,
.plan-card .text-xs,
.plan-card span {
  color: #ffffff !important;
}

.plan-card button {
  /* Keep button text as designed - usually contrasting */
}

/* Fix 6: Back to services button on Stairlift installation should be white */
#service-stairlifts button,
#service-stairlifts .relative.z-10 button {
  color: #ffffff !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

#service-stairlifts button:hover {
  background-color: rgba(249, 115, 22, 0.8) !important;
  color: #ffffff !important;
}

/* Fix 7: Quick Actions buttons should have white font color */
.bg-orange-500 button,
.bg-blue-500 button,
.bg-green-500 button,
button[data-nav][class*="bg-orange"],
button[data-nav][class*="bg-blue"],
button[data-nav][class*="bg-green"],
button[data-service][class*="bg-orange"],
button[data-service][class*="bg-blue"],
button[data-service][class*="bg-green"] {
  color: #ffffff !important;
}

/* Additional specific quick actions selectors */
button[data-nav="subscribe"],
button[data-nav="shop"],
button[data-service="healthcheck"],
.quick-actions button,
.bg-orange-500.text-white,
.bg-blue-500.text-white,
.bg-green-500.text-white {
  color: #ffffff !important;
}

/* Fix 8: Stairlift content text - black in light mode, white in dark mode */

/* Light mode: Stairlift content text should be black (override background image white text) */
#service-stairlifts .bg-white\/95 p,
#service-stairlifts .bg-white\/95 h3,
#service-stairlifts .bg-white\/95 h4,
#service-stairlifts .bg-white\/95 .text-gray-600,
#service-stairlifts .bg-white\/95 .text-gray-700,
#service-stairlifts .bg-white\/95 .text-2xl,
#service-stairlifts .bg-white\/95 .font-bold,
#service-stairlifts .bg-white\/95 .font-semibold {
  color: #111827 !important;
}

/* Light mode: Keep pricing orange */
#service-stairlifts .bg-white\/95 .text-2xl.font-bold.text-orange-500 {
  color: #f97316 !important;
}

/* Dark mode: Stairlift content text should be white for readability */
[data-theme="dark"] #service-stairlifts .bg-white\/95 p,
[data-theme="dark"] #service-stairlifts .bg-white\/95 h3,
[data-theme="dark"] #service-stairlifts .bg-white\/95 h4,
[data-theme="dark"] #service-stairlifts .bg-white\/95 .text-gray-600,
[data-theme="dark"] #service-stairlifts .bg-white\/95 .text-gray-700,
[data-theme="dark"] #service-stairlifts .bg-white\/95 .text-2xl,
[data-theme="dark"] #service-stairlifts .bg-white\/95 .font-bold,
[data-theme="dark"] #service-stairlifts .bg-white\/95 .font-semibold {
  color: #ffffff !important;
}

/* Dark mode: Keep pricing orange */
[data-theme="dark"] #service-stairlifts .bg-white\/95 .text-2xl.font-bold.text-orange-500 {
  color: #fb923c !important; /* Lighter orange for dark mode */
}

/* ====== NAVIGATION STYLES ====== */
#floating-nav {
  background-color: var(--nav-bg) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav-scrolled {
  box-shadow: 0 4px 20px var(--shadow-color) !important;
}

/* ====== FORM ELEMENTS ====== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea,
select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-primary) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--orange-primary) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1) !important;
}

/* ====== COMPONENT CARDS ====== */
.service-card,
.product-item,
.plan-card,
.trust-indicator {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color);
}

/* ====== HERO VIDEO OVERLAY ====== */
[data-theme="dark"] #hero-video + div {
  background: linear-gradient(to bottom, 
    rgba(15, 23, 42, 0.3), 
    rgba(15, 23, 42, 0.5), 
    rgba(15, 23, 42, 0.7)) !important;
}

/* ====== MOBILE MENU ====== */
[data-theme="dark"] #mobile-menu {
  background-color: var(--nav-bg) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ====== DROPDOWN MENUS ====== */
[data-theme="dark"] .group:hover .group-hover\:visible,
[data-theme="dark"] .opacity-0.invisible.group-hover\:opacity-100 {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color);
}

/* ====== SERVICE AREA MAP ====== */
[data-theme="dark"] .map-container {
  border: 1px solid var(--border-color);
}

[data-theme="dark"] .service-area.active {
  background-color: rgba(251, 146, 60, 0.2) !important;
  border-color: var(--orange-primary) !important;
}

/* ====== STAIRLIFT SECTION SPECIAL HANDLING ====== */
[data-theme="dark"] #service-stairlifts .bg-white\/95 {
  background-color: rgba(30, 41, 59, 0.95) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ====== LOADING STATES ====== */
[data-theme="dark"] .loading::after {
  border-color: var(--orange-primary) !important;
  border-top-color: transparent !important;
}

/* ====== SCROLL INDICATORS ====== */
[data-theme="dark"] .animate-bounce {
  color: var(--text-primary) !important;
}

/* ====== PROMOTIONAL BADGES ====== */
[data-theme="dark"] .promo-badge,
[data-theme="dark"] .sale-badge,
[data-theme="dark"] .intro-badge {
  color: #ffffff !important;
}