/* ═══════════════════════════════════════════
   VINIS Global Theme — Dark/Light Mode
   Include via: <link rel="stylesheet" href="shared/theme.css">
   ═══════════════════════════════════════════ */

/* === DARK THEME (default) === */
:root, [data-theme="dark"] {
  --v-bg-body: #070b14;
  --v-bg-card: rgba(255,255,255,0.03);
  --v-bg-card-solid: #0f172a;
  --v-bg-nav: rgba(7,11,20,0.8);
  --v-bg-nav-scroll: rgba(7,11,20,0.95);
  --v-bg-mobile-nav: rgba(7,11,20,0.98);
  --v-bg-input: rgba(30,41,59,0.5);
  --v-bg-footer: #0f172a;
  --v-bg-tag: #1e293b;
  --v-bg-hover: rgba(255,255,255,0.05);
  --v-bg-badge: rgba(255,255,255,0.05);
  --v-border: rgba(255,255,255,0.06);
  --v-border-card: rgba(255,255,255,0.06);
  --v-border-input: #334155;
  --v-text: #e2e8f0;
  --v-text-secondary: #94a3b8;
  --v-text-muted: #64748b;
  --v-text-nav: rgba(255,255,255,0.6);
  --v-text-heading: #f1f5f9;
  --v-link: #60a5fa;
  --v-shadow: rgba(0,0,0,0.3);
  --v-canvas-opacity: 1;
  --v-invert: 0;
}

/* === LIGHT THEME === */
[data-theme="light"] {
  --v-bg-body: #f8fafc;
  --v-bg-card: rgba(255,255,255,0.8);
  --v-bg-card-solid: #ffffff;
  --v-bg-nav: rgba(255,255,255,0.85);
  --v-bg-nav-scroll: rgba(255,255,255,0.96);
  --v-bg-mobile-nav: rgba(248,250,252,0.98);
  --v-bg-input: rgba(241,245,249,0.8);
  --v-bg-footer: #ffffff;
  --v-bg-tag: #f1f5f9;
  --v-bg-hover: rgba(0,0,0,0.03);
  --v-bg-badge: rgba(59,130,246,0.06);
  --v-border: rgba(0,0,0,0.08);
  --v-border-card: #e2e8f0;
  --v-border-input: #cbd5e1;
  --v-text: #0f172a;
  --v-text-secondary: #475569;
  --v-text-muted: #64748b;
  --v-text-nav: rgba(15,23,42,0.7);
  --v-text-heading: #0f172a;
  --v-link: #2563eb;
  --v-shadow: rgba(0,0,0,0.08);
  --v-canvas-opacity: 1;
  --v-invert: 0;
}

/* === APPLY THEME === */
[data-theme="light"] body {
  background: var(--v-bg-body) !important;
  color: var(--v-text) !important;
}
[data-theme="light"] .nav-main {
  background: var(--v-bg-nav) !important;
  border-bottom-color: var(--v-border) !important;
}
[data-theme="light"] .nav-main.scrolled {
  background: var(--v-bg-nav-scroll) !important;
  box-shadow: 0 4px 30px var(--v-shadow) !important;
}
[data-theme="light"] .nav-link {
  color: var(--v-text-nav) !important;
}
[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active {
  color: #2563eb !important;
  background: rgba(37,99,235,0.06) !important;
}
[data-theme="light"] #mobileNav {
  background: var(--v-bg-mobile-nav) !important;
}
[data-theme="light"] #mobileNav a {
  color: var(--v-text-nav) !important;
}
[data-theme="light"] #mobileNav a:hover {
  color: #2563eb !important;
  background: rgba(37,99,235,0.04) !important;
}

/* Cards */
[data-theme="light"] .glow-card,
[data-theme="light"] .product-block {
  background: var(--v-bg-card) !important;
  border-color: var(--v-border-card) !important;
}
[data-theme="light"] .glow-card:hover,
[data-theme="light"] .product-block:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 12px 40px rgba(59,130,246,0.08) !important;
}

/* Text overrides */
[data-theme="light"] .text-white {
  color: var(--v-text) !important;
}
[data-theme="light"] .text-white\/60,
[data-theme="light"] .text-white\/70,
[data-theme="light"] .text-white\/80,
[data-theme="light"] [class*="text-white/"] {
  color: var(--v-text-secondary) !important;
}
[data-theme="light"] .text-gray-400,
[data-theme="light"] .text-gray-500,
[data-theme="light"] .text-slate-400,
[data-theme="light"] .text-slate-500 {
  color: var(--v-text-secondary) !important;
}
[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-slate-300 {
  color: var(--v-text) !important;
}

/* ═══ PRESERVE WHITE TEXT ON DARK OVERLAYS ═══ */
/* Image overlays with dark gradients — text must stay white */
[data-theme="light"] [class*="from-black"] .text-white,
[data-theme="light"] [class*="from-black"] [class*="text-white/"],
[data-theme="light"] [class*="bg-black/"] .text-white,
[data-theme="light"] [class*="bg-black/"] [class*="text-white/"],
[data-theme="light"] [class*="bg-black"] .text-white {
  color: #ffffff !important;
}
/* CTA buttons with gradient backgrounds — keep white text */
[data-theme="light"] .cta-primary,
[data-theme="light"] .cta-btn[style*="background:linear-gradient"],
[data-theme="light"] a[style*="background:linear-gradient"][style*="color:#fff"],
[data-theme="light"] [style*="background:linear-gradient(135deg,#3b82f6"] {
  color: #ffffff !important;
}
/* Inline dark backgrounds — keep white text */
[data-theme="light"] [style*="background:rgba(0,0,0,"],
[data-theme="light"] [style*="background: rgba(0,0,0,"] {
  color: #ffffff !important;
}

/* ═══ HARDCODED PAGE STYLE OVERRIDES ═══ */
/* CTA outline buttons — hardcoded color:#e2e8f0 in page styles */
[data-theme="light"] .cta-outline {
  color: var(--v-text) !important;
  border-color: var(--v-border-card) !important;
}
[data-theme="light"] .cta-outline:hover {
  background: rgba(59,130,246,0.06) !important;
  border-color: #3b82f6 !important;
  color: #2563eb !important;
}
/* Pages with inline <style> using hardcoded dark colors */
[data-theme="light"] .step {
  background: rgba(0,0,0,0.02) !important;
  border-color: var(--v-border-card) !important;
}
[data-theme="light"] .step-title {
  color: var(--v-text) !important;
}
[data-theme="light"] .step-num {
  color: #ffffff !important;
}
/* Paragraph text override for pages with hardcoded p{color:rgba(255,255,255,...)} */
[data-theme="light"] p {
  color: var(--v-text-secondary) !important;
}
/* Heading overrides for pages with hardcoded heading colors */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4 {
  color: var(--v-text-heading) !important;
}
/* Keep gradient text visible */
[data-theme="light"] h1[style*="-webkit-text-fill-color"],
[data-theme="light"] [style*="background-clip:text"] {
  -webkit-text-fill-color: transparent !important;
}
/* Stat pill number */
[data-theme="light"] .stat-pill .num {
  color: inherit !important;
}
/* Table cells in pages with hardcoded border colors */
[data-theme="light"] table th,
[data-theme="light"] table td {
  border-color: var(--v-border-card) !important;
  color: var(--v-text) !important;
}
[data-theme="light"] table th {
  background: rgba(59,130,246,0.05) !important;
}
/* List items */
[data-theme="light"] li {
  color: var(--v-text-secondary) !important;
}
/* Code blocks on guide pages */
[data-theme="light"] code:not(pre code) {
  background: rgba(59,130,246,0.08) !important;
  color: #2563eb !important;
}
/* Info/warn/success boxes */
[data-theme="light"] .info {
  background: rgba(59,130,246,0.06) !important;
  border-color: rgba(59,130,246,0.2) !important;
}
[data-theme="light"] .warn {
  background: rgba(239,68,68,0.06) !important;
  border-color: rgba(239,68,68,0.2) !important;
}
[data-theme="light"] .success {
  background: rgba(34,197,94,0.06) !important;
  border-color: rgba(34,197,94,0.2) !important;
}
/* Subtitle / muted text */
[data-theme="light"] .subtitle {
  color: var(--v-text-muted) !important;
}
/* Mobile nav burger button */
[data-theme="light"] .text-xl.p-2,
[data-theme="light"] button[onclick*="mobileNav"] {
  color: var(--v-text) !important;
}
/* FAQ items */
[data-theme="light"] .faq-item {
  border-color: var(--v-border-card) !important;
  background: rgba(59,130,246,0.03) !important;
}
[data-theme="light"] .faq-item:hover {
  border-color: #3b82f6 !important;
}
/* Inline white/opacity backgrounds used as cards */
[data-theme="light"] [class*="bg-white/\["] {
  background: rgba(59,130,246,0.03) !important;
}
/* Strong tags with color classes */
[data-theme="light"] strong {
  color: var(--v-text) !important;
}
/* Footer link text */
[data-theme="light"] footer a {
  color: var(--v-link) !important;
}
/* Phone number accent colors → deeper blue in light mode */
[data-theme="light"] .text-blue-400 {
  color: #2563eb !important;
}
[data-theme="light"] .text-emerald-400 {
  color: #059669 !important;
}
[data-theme="light"] .text-red-400 {
  color: #dc2626 !important;
}
[data-theme="light"] .text-purple-400,
[data-theme="light"] .text-violet-400 {
  color: #7c3aed !important;
}
[data-theme="light"] .text-amber-400 {
  color: #d97706 !important;
}
[data-theme="light"] .text-green-400 {
  color: #16a34a !important;
}

/* Borders */
[data-theme="light"] .border-white\/5,
[data-theme="light"] .border-white\/6,
[data-theme="light"] .border-white\/8,
[data-theme="light"] .border-white\/10,
[data-theme="light"] [class*="border-white/"] {
  border-color: var(--v-border-card) !important;
}

/* Backgrounds */
[data-theme="light"] .bg-white\/3,
[data-theme="light"] .bg-white\/5,
[data-theme="light"] [class*="bg-white/"] {
  background: var(--v-bg-hover) !important;
}
[data-theme="light"] [class*="bg-slate-900"],
[data-theme="light"] [class*="bg-gray-900"] {
  background: var(--v-bg-card-solid) !important;
}

/* Canvas — light theme uses darker particles via JS; no CSS filter needed */
[data-theme="light"] #bgCanvas {
  opacity: 1 !important;
}

/* Stat pills */
[data-theme="light"] .stat-pill {
  background: var(--v-bg-card-solid) !important;
  border-color: var(--v-border-card) !important;
}

/* Section badge */
[data-theme="light"] .sec-badge {
  border-color: var(--v-border-card) !important;
  color: var(--v-text-secondary) !important;
}

/* Footer */
[data-theme="light"] footer,
[data-theme="light"] .blog-footer {
  background: var(--v-bg-footer) !important;
  border-top-color: var(--v-border-card) !important;
  color: var(--v-text-secondary) !important;
}

/* Float buttons */
[data-theme="light"] .float-btns .float-btn {
  box-shadow: 0 4px 15px rgba(0,0,0,0.12) !important;
}

/* Gradient text - keep visible in light */
[data-theme="light"] .grad-blue,
[data-theme="light"] .grad-purple,
[data-theme="light"] .grad-green,
[data-theme="light"] .grad-red {
  filter: saturate(1.3) brightness(0.7);
}

/* Feature icon backgrounds */
[data-theme="light"] .feat-icon {
  opacity: 0.9;
}

/* Forms */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: var(--v-bg-input) !important;
  border-color: var(--v-border-input) !important;
  color: var(--v-text) !important;
}

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track { background: #f8fafc; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; }

/* ═══ PRODUCTS DROPDOWN MENU ═══ */
.nav-dropdown{position:relative;display:inline-flex}
.nav-dd-trigger{display:flex;align-items:center;gap:5px}
.nav-dd-trigger .fa-chevron-down{font-size:9px;transition:transform .2s}
.nav-dropdown:hover .nav-dd-trigger .fa-chevron-down{transform:rotate(180deg)}
.nav-dd-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:8px;z-index:200}
.nav-dropdown:hover .nav-dd-menu{display:block}
.nav-dd-panel{background:var(--v-bg-card-solid,#0f172a);border:1px solid var(--v-border-card,rgba(255,255,255,.06));border-radius:16px;padding:8px;min-width:280px;box-shadow:0 20px 60px rgba(0,0,0,.4);backdrop-filter:blur(20px)}
.nav-dd-panel a{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:10px;font-size:15px;font-weight:500;color:var(--v-text-secondary,#94a3b8);text-decoration:none;transition:all .15s}
.nav-dd-panel a:hover{background:rgba(59,130,246,.08);color:var(--v-link,#60a5fa)}
.nav-dd-panel a .dd-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.nav-dd-panel a .dd-label{font-weight:600;font-size:15px;color:var(--v-text,#e2e8f0);line-height:1.3}
.nav-dd-panel a .dd-desc{font-size:12px;color:var(--v-text-muted,#64748b);font-weight:400}
.nav-dd-panel a:hover .dd-label{color:var(--v-link,#60a5fa)}
/* Light theme dropdown */
[data-theme="light"] .nav-dd-panel{background:#fff;border-color:var(--v-border-card);box-shadow:0 20px 60px rgba(0,0,0,.1)}
[data-theme="light"] .nav-dd-panel a:hover{background:rgba(37,99,235,.06)}
[data-theme="light"] .nav-dd-panel a .dd-label{color:var(--v-text)}
[data-theme="light"] .nav-dd-panel a:hover .dd-label{color:#2563eb}
/* Mobile dropdown */
.mob-product-group{padding:4px 0;border-top:1px solid var(--v-border,rgba(255,255,255,.06));border-bottom:1px solid var(--v-border,rgba(255,255,255,.06));margin:4px 0}
.mob-product-label{display:block;padding:10px 28px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--v-text-muted,#64748b);pointer-events:none}

/* ═══ FOOTER CONTRAST FIX ═══ */
footer .footer-text{color:var(--v-text-secondary,#94a3b8)!important}
footer .footer-link{color:var(--v-text-secondary,#94a3b8)!important;transition:color .2s}
footer .footer-link:hover{color:var(--v-link,#60a5fa)!important}
footer .footer-muted{color:var(--v-text-muted,#64748b)!important}
footer h4{color:var(--v-text,#e2e8f0)!important}
[data-theme="light"] footer .footer-text{color:var(--v-text-secondary)!important}
[data-theme="light"] footer .footer-link{color:var(--v-text-secondary)!important}
[data-theme="light"] footer .footer-link:hover{color:var(--v-link)!important}
[data-theme="light"] footer .footer-muted{color:var(--v-text-muted)!important}

/* ═══ THEME TOGGLE BUTTON ═══ */
.vinis-theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--v-border-input, #334155);
  background: transparent;
  color: var(--v-text-secondary, #94a3b8);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vinis-theme-toggle:hover {
  background: rgba(59,130,246,0.1);
  color: #60a5fa;
  border-color: #3b82f6;
}
[data-theme="dark"] .vinis-theme-toggle .fa-moon { display: none; }
[data-theme="light"] .vinis-theme-toggle .fa-sun { display: none; }

/* ═══ LANGUAGE SWITCHER ═══ */
.vinis-lang-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.vinis-lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--v-border-input, #334155);
  background: transparent;
  color: var(--v-text-secondary, #94a3b8);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.vinis-lang-btn:hover {
  background: rgba(59,130,246,0.1);
  color: #60a5fa;
  border-color: #3b82f6;
}
.vinis-lang-btn .flag {
  font-size: 16px;
  line-height: 1;
}
.vinis-lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--v-bg-card-solid, #0f172a);
  border: 1px solid var(--v-border-card, rgba(255,255,255,0.06));
  border-radius: 10px;
  padding: 6px;
  min-width: 160px;
  box-shadow: 0 12px 40px var(--v-shadow, rgba(0,0,0,0.3));
  z-index: 200;
}
.vinis-lang-dropdown.open {
  display: block;
}
.vinis-lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--v-text-secondary, #94a3b8);
  cursor: pointer;
  transition: all 0.15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.vinis-lang-option:hover,
.vinis-lang-option.active {
  background: rgba(59,130,246,0.08);
  color: var(--v-link, #60a5fa);
}
.vinis-lang-option .flag {
  font-size: 18px;
}
.vinis-lang-option .lang-name {
  flex: 1;
  font-weight: 500;
}
.vinis-lang-option .lang-code {
  font-size: 11px;
  opacity: 0.6;
  text-transform: uppercase;
}