/* products-fix.css
   Overrides to ensure Products page supports light mode and removes hardcoded white text
*/

/* Define variables for light theme when active */
body[data-theme="light"] {
  --bg1: #ffffff;
  --card-bg: rgba(2,6,23,0.04);
  --brand: #036e7e;
  --brand-dark: #025a66;
  --accent: #036e7e;
  --muted: rgba(7,35,38,0.6);
  --text: #072326;
  --border: rgba(2,6,23,0.08);
  /* Override page background to remove dark gradient behind products-hero */
  background: linear-gradient(180deg, #ffffff 0%, #fbfeff 45%, #f9fdfd 100%) !important;
}

/* Page background and general text */
body[data-theme="light"] .products-hero {
  background: linear-gradient(180deg, #ffffff 0%, #fbfeff 45%, #f9fdfd 100%) !important;
  color: var(--text) !important;
}

body[data-theme="light"] .products-hero p.text-muted {
  color: var(--muted) !important;
}

/* Product cards */
body[data-theme="light"] .prod-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(244,247,250,0.72)) !important;
  border: 1px solid rgba(255,255,255,0.82) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  color: var(--text) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

body[data-theme="light"] .prod-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.72), rgba(255,255,255,0.08) 42%, rgba(3,110,126,0.04));
  pointer-events: none;
}

body[data-theme="light"] .prod-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 54px rgba(15,23,42,0.12), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  border-color: rgba(3,110,126,0.15) !important;
}

body[data-theme="light"] .prod-icon {
  background: linear-gradient(135deg, rgba(255,255,255,0.86), rgba(3,110,126,0.08)) !important;
  color: var(--brand) !important;
  box-shadow: 0 18px 30px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.95) !important;
  border: 1px solid rgba(255,255,255,0.82) !important;
}

body[data-theme="light"] .prod-icon::before {
  background: radial-gradient(circle, rgba(255,255,255,0.8), rgba(3,110,126,0.06) 60%, rgba(255,255,255,0.08) 100%) !important;
  opacity: 1 !important;
}

body[data-theme="light"] .prod-eyebrow {
  color: var(--muted) !important;
}

body[data-theme="light"] .prod-name {
  color: var(--brand) !important;
  letter-spacing: -0.02em;
}

body[data-theme="light"] .prod-desc {
  color: rgba(7,35,38,0.72) !important;
}

body[data-theme="light"] .prod-body,
body[data-theme="light"] .prod-body * {
  position: relative;
  z-index: 1;
}

/* Buttons */
body[data-theme="light"] .btn-primary-ghost,
body[data-theme="light"] .btn-primary,
body[data-theme="light"] .btn-secondary {
  color: var(--text) !important;
}

body[data-theme="light"] .btn-primary-ghost {
  background: linear-gradient(90deg, var(--brand), var(--brand-dark)) !important;
  color: #fff !important;
}

body[data-theme="light"] .btn-primary {
  background: linear-gradient(90deg, var(--brand), var(--brand-dark)) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(1,70,81,0.08) !important;
}

body[data-theme="light"] .btn-secondary {
  background: var(--card-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* make sure scroll reveal text is visible */
body[data-theme="light"] .scroll-reveal { opacity: 0; }
body[data-theme="light"] .scroll-reveal.visible { opacity: 1; }

/* Small helper: ensure text-white classes don't stay white in light mode */
body[data-theme="light"] .text-white { color: var(--text) !important; }

/* Divider consistency */
body[data-theme="light"] hr.footer-divider { box-shadow: none; }

/* Map product page buttons to Home button styles */
.btn-primary-ghost,
.btn-primary,
.btn-secondary {
  border-radius: 999px !important;
  font-weight: 700 !important;
}

.btn-primary-ghost {
  background: linear-gradient(90deg, var(--brand), var(--brand-dark)) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(1,70,81,0.12) !important;
}

.btn-primary {
  background: linear-gradient(90deg, var(--brand), var(--brand-dark)) !important;
  color: #fff !important;
}