/* UdyamWeb – theme layer (loaded last on every page)
 * 1. Dark-glass WhatsApp buttons (both themes)
 * 2. Light theme, enabled by <html class="light"> via js/theme.js
 * 3. Theme toggle button
 * Uses !important on purpose: several pages define .btn-green / colours in
 * inline <style> blocks or the Tailwind CDN, and this file must win over all of them.
 */

/* ───────── 1. WhatsApp: dark glass ───────── */
.btn-green,
a[href*="wa.me"][class*="bg-green-"],
a[href*="wa.me"][class*="bg-emerald-"] {
  background: rgba(10, 30, 22, 0.55) !important;
  background-image: none !important;
  border: 1px solid rgba(37, 211, 102, 0.45) !important;
  color: #E9FFF2 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px -12px rgba(37, 211, 102, 0.55) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}
.btn-green:hover,
a[href*="wa.me"][class*="bg-green-"]:hover,
a[href*="wa.me"][class*="bg-emerald-"]:hover {
  background: rgba(37, 211, 102, 0.14) !important;
  border-color: rgba(37, 211, 102, 0.85) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 28px -6px rgba(37, 211, 102, 0.55) !important;
}
.btn-green svg,
a[href*="wa.me"][class*="bg-green-"] svg,
a[href*="wa.me"][class*="bg-emerald-"] svg { color: #25D366 !important; fill: currentColor; }

html.light .btn-green,
html.light a[href*="wa.me"][class*="bg-green-"],
html.light a[href*="wa.me"][class*="bg-emerald-"] {
  background: rgba(37, 211, 102, 0.08) !important;
  border-color: rgba(5, 150, 105, 0.5) !important;
  color: #065F46 !important;
  box-shadow: 0 6px 18px -12px rgba(5, 150, 105, 0.6) !important;
}
html.light .btn-green:hover,
html.light a[href*="wa.me"][class*="bg-green-"]:hover,
html.light a[href*="wa.me"][class*="bg-emerald-"]:hover {
  background: rgba(37, 211, 102, 0.16) !important;
  border-color: rgba(5, 150, 105, 0.85) !important;
}
html.light .btn-green svg { color: #059669 !important; }

/* ───────── 2. Light theme ───────── */
html.light { color-scheme: light; }
html.light body { background-color: #F6F7FB !important; color: #1E293B !important; }

/* Page / section backgrounds */
html.light [class*="bg-brand-bg"],
html.light [class*="bg-slate-950"],
html.light [class*="bg-gray-950"],
html.light [class*="bg-[#0B"],
html.light [class*="bg-[#0b"] { background-color: rgba(246, 247, 251, 0.92) !important; }

/* Cards / panels */
html.light .glass-panel,
html.light [class*="bg-brand-card"],
html.light [class*="bg-slate-900"],
html.light [class*="bg-gray-900"],
html.light [class*="bg-[#11"],
html.light [class*="bg-[#12"] { background-color: rgba(255, 255, 255, 0.9) !important; }
html.light [class*="bg-slate-800"],
html.light [class*="bg-gray-800"] { background-color: #EEF1F6 !important; }
html.light .glass-panel { box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.25); }

/* Dark gradient sections */
html.light [class*="from-slate-9"],
html.light [class*="from-slate-8"],
html.light [class*="from-gray-9"],
html.light [class*="from-brand-bg"],
html.light [class*="from-[#0"] { background-image: none !important; background-color: #F6F7FB !important; }

/* Borders */
html.light [class*="border-slate-8"],
html.light [class*="border-slate-7"],
html.light [class*="border-gray-8"],
html.light [class*="border-gray-7"],
html.light .glass-panel { border-color: #E2E8F0 !important; }
html.light [class*="divide-slate-8"] > * { border-color: #E2E8F0 !important; }

/* Text */
html.light .text-white { color: #0F172A !important; }
html.light .text-slate-100,
html.light .text-slate-200,
html.light .text-gray-100,
html.light .text-gray-200 { color: #1E293B !important; }
html.light .text-slate-300,
html.light .text-gray-300 { color: #334155 !important; }
html.light .text-slate-400,
html.light .text-gray-400 { color: #475569 !important; }
html.light .text-slate-500,
html.light .text-gray-500 { color: #64748B !important; }
html.light .hover\:text-white:hover,
html.light .group:hover .group-hover\:text-white,
html.light .group:hover .group-hover\:text-slate-100 { color: #0F172A !important; }
html.light .text-amber-300,
html.light .text-amber-200 { color: #B45309 !important; }
html.light .text-amber-100 { color: #92400E !important; }
html.light .text-emerald-400 { color: #059669 !important; }
html.light .text-blue-400 { color: #2563EB !important; }
html.light .text-gradient-primary {
  background-image: linear-gradient(90deg, #0F172A, #1E3A8A, #2563EB) !important;
}

/* Keep white text on coloured buttons / badges */
html.light :is(.btn-primary, .btn-amber, [class*="bg-blue-6"], [class*="bg-indigo-6"], [class*="from-blue-6"], [class*="from-indigo-6"]),
html.light :is(.btn-primary, .btn-amber, [class*="bg-blue-6"], [class*="bg-indigo-6"], [class*="from-blue-6"], [class*="from-indigo-6"]) :is(.text-white, .text-slate-100, .text-slate-200) { color: #FFFFFF !important; }
html.light .btn-amber { color: #0F172A !important; }
html.light .btn-secondary { background-color: #FFFFFF !important; color: #1E293B !important; border-color: #CBD5E1 !important; }

/* Forms */
html.light input, html.light select, html.light textarea { color: #0F172A; }
html.light input::placeholder, html.light textarea::placeholder { color: #94A3B8; }

/* Diwali hero canvas: slightly softer on light background */
html.light #diwali-canvas { opacity: .9 !important; }

/* ───────── 3. Toggle button ───────── */
.uw-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0; margin-left: 10px;
  border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(15, 23, 42, 0.6); color: #FCD34D; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.uw-theme-toggle:hover { border-color: rgba(252, 211, 77, 0.7); transform: rotate(-12deg); }
.uw-theme-toggle:focus-visible { outline: 2px solid #3B82F6; outline-offset: 2px; }
.uw-theme-toggle svg { width: 18px; height: 18px; }
.uw-theme-toggle .uw-sun { display: none; }
html.light .uw-theme-toggle { background: #FFFFFF; border-color: #CBD5E1; color: #4338CA; }
html.light .uw-theme-toggle .uw-sun { display: none; }
html.light .uw-theme-toggle .uw-moon { display: block; }
html:not(.light) .uw-theme-toggle .uw-moon { display: none; }
html:not(.light) .uw-theme-toggle .uw-sun { display: block; }
.uw-theme-toggle.uw-floating { position: fixed; left: 16px; bottom: 16px; z-index: 60; margin: 0; }
@media (prefers-reduced-motion: reduce) { .uw-theme-toggle { transition: none; } .uw-theme-toggle:hover { transform: none; } }

/* ───────── 4. Header menu: one line on every page, responsive spacing ───────── */
header nav a, header .btn-primary, header a.group span { white-space: nowrap; }
header nav { flex-wrap: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) {
  header nav { gap: 11px !important; font-size: 12.5px !important; }
  header .btn-primary { padding-left: 12px !important; padding-right: 12px !important; }
  header .uw-theme-toggle { margin-left: 6px; width: 34px; height: 34px; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  header nav { gap: 18px !important; }
}