/* =============================================
   Kazazone Dark Mode — CSS Variables System
   ============================================= */

/* ---- LIGHT MODE (default) ---- */
:root,
[data-kz-theme="light"] {
  --kz-bg:           #ffffff;
  --kz-bg-alt:       #f8f9fa;
  --kz-bg-card:      #ffffff;
  --kz-border:       #e9ecef;
  --kz-text:         #1a1a1a;
  --kz-text-muted:   #666666;
  --kz-text-soft:    #888888;
  --kz-orange:       #F97316;
  --kz-red:          #E63946;
  --kz-blue:         #457B9D;
  --kz-shadow:       0 2px 12px rgba(0,0,0,0.08);
  --kz-shadow-hover: 0 8px 28px rgba(0,0,0,0.14);
  color-scheme: light;
}

/* ---- DARK MODE ---- */
[data-kz-theme="dark"] {
  --kz-bg:           #0D0D0D;
  --kz-bg-alt:       #161616;
  --kz-bg-card:      #1A1A1A;
  --kz-border:       #2A2A2A;
  --kz-text:         #F0F0F0;
  --kz-text-muted:   #AAAAAA;
  --kz-text-soft:    #666666;
  --kz-orange:       #F97316;
  --kz-red:          #E63946;
  --kz-blue:         #457B9D;
  --kz-shadow:       0 2px 12px rgba(0,0,0,0.45);
  --kz-shadow-hover: 0 8px 32px rgba(0,0,0,0.55);
  color-scheme: dark;
}

/* =============================================
   Apply variables to page elements
   ============================================= */

[data-kz-theme] body,
[data-kz-theme] .site {
  background-color: var(--kz-bg) !important;
  color: var(--kz-text) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- Navbar --- */
[data-kz-theme="dark"] .navbar,
[data-kz-theme="dark"] .site-header,
[data-kz-theme="dark"] #masthead {
  background-color: #111111 !important;
  border-bottom-color: #2A2A2A !important;
}
[data-kz-theme="light"] .navbar,
[data-kz-theme="light"] .site-header,
[data-kz-theme="light"] #masthead {
  background-color: #ffffff !important;
  border-bottom-color: #e9ecef !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
}

/* --- Nav links --- */
[data-kz-theme="dark"] .site-header a,
[data-kz-theme="dark"] .main-navigation a,
[data-kz-theme="dark"] .nav-links a {
  color: #AAAAAA !important;
}
[data-kz-theme="dark"] .site-header a:hover,
[data-kz-theme="dark"] .main-navigation a:hover {
  color: #F97316 !important;
}
[data-kz-theme="light"] .site-header a,
[data-kz-theme="light"] .main-navigation a {
  color: #333333 !important;
}
[data-kz-theme="light"] .site-header a:hover,
[data-kz-theme="light"] .main-navigation a:hover {
  color: #F97316 !important;
}

/* --- Cards & Articles --- */
[data-kz-theme] .ast-article-post,
[data-kz-theme] .post-card,
[data-kz-theme] .elementor-widget-wrap {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
[data-kz-theme="dark"] .ast-article-post {
  background: #1A1A1A !important;
  border-color: #2A2A2A !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
}
[data-kz-theme="light"] .ast-article-post {
  background: #ffffff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
}

/* --- Post titles --- */
[data-kz-theme="dark"] .entry-title,
[data-kz-theme="dark"] .entry-title a,
[data-kz-theme="dark"] h1, [data-kz-theme="dark"] h2,
[data-kz-theme="dark"] h3, [data-kz-theme="dark"] h4,
[data-kz-theme="dark"] h5, [data-kz-theme="dark"] h6 {
  color: #F0F0F0 !important;
}
[data-kz-theme="light"] .entry-title,
[data-kz-theme="light"] .entry-title a,
[data-kz-theme="light"] h1, [data-kz-theme="light"] h2,
[data-kz-theme="light"] h3, [data-kz-theme="light"] h4,
[data-kz-theme="light"] h5, [data-kz-theme="light"] h6 {
  color: #1a1a1a !important;
}

/* --- Body text --- */
[data-kz-theme="dark"] p,
[data-kz-theme="dark"] .entry-content p,
[data-kz-theme="dark"] .entry-meta,
[data-kz-theme="dark"] li {
  color: #AAAAAA !important;
}
[data-kz-theme="light"] p,
[data-kz-theme="light"] .entry-content p,
[data-kz-theme="light"] li {
  color: #444444 !important;
}

/* --- Footer --- */
[data-kz-theme="dark"] .site-footer,
[data-kz-theme="dark"] footer,
[data-kz-theme="dark"] #colophon {
  background-color: #0A0A0A !important;
  border-top-color: #2A2A2A !important;
  color: #888888 !important;
}
[data-kz-theme="dark"] .site-footer a,
[data-kz-theme="dark"] footer a {
  color: #888888 !important;
}
[data-kz-theme="dark"] .site-footer a:hover,
[data-kz-theme="dark"] footer a:hover {
  color: #F97316 !important;
}
[data-kz-theme="light"] .site-footer,
[data-kz-theme="light"] footer {
  background-color: #f8f9fa !important;
  border-top: 1px solid #e9ecef !important;
  color: #666666 !important;
}

/* --- Inputs & Forms --- */
[data-kz-theme="dark"] input,
[data-kz-theme="dark"] textarea,
[data-kz-theme="dark"] select,
[data-kz-theme="dark"] .search-input {
  background-color: #1A1A1A !important;
  border-color: #2A2A2A !important;
  color: #F0F0F0 !important;
}
[data-kz-theme="dark"] input::placeholder {
  color: #555555 !important;
}
[data-kz-theme="light"] input,
[data-kz-theme="light"] textarea,
[data-kz-theme="light"] select {
  background-color: #ffffff !important;
  border-color: #dddddd !important;
  color: #1a1a1a !important;
}

/* --- Borders & Dividers --- */
[data-kz-theme="dark"] hr,
[data-kz-theme="dark"] .ast-section-divider {
  border-color: #2A2A2A !important;
}
[data-kz-theme="light"] hr {
  border-color: #e9ecef !important;
}

/* --- Sections with backgrounds --- */
[data-kz-theme="dark"] .trending-section,
[data-kz-theme="dark"] .section {
  background-color: #0D0D0D !important;
}
[data-kz-theme="dark"] .deals-banner {
  background-color: #161616 !important;
  border-top: 1px solid #2A2A2A;
  border-bottom: 1px solid #2A2A2A;
}
[data-kz-theme="light"] .deals-banner {
  background-color: #1a1a2e !important;
}

/* =============================================
   TOGGLE BUTTON STYLES
   ============================================= */

.kz-theme-toggle {
  position: fixed;
  bottom: 24px;
  left: 24px;  /* LTR default */
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  user-select: none;
}

/* RTL support */
html[dir="rtl"] .kz-theme-toggle,
body.rtl .kz-theme-toggle {
  left: auto;
  right: 24px;
}

.kz-toggle-track {
  width: 54px;
  height: 28px;
  border-radius: 100px;
  background: #2A2A2A;
  border: 1px solid #3A3A3A;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  position: relative;
  transition: background 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

[data-kz-theme="light"] .kz-toggle-track {
  background: #e9ecef;
  border-color: #d0d0d0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.kz-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #F97316;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  z-index: 1;
}

[data-kz-theme="light"] .kz-thumb {
  transform: translateX(26px);
  background: #F97316;
}

.kz-icon {
  font-size: 12px;
  line-height: 1;
  z-index: 0;
  transition: opacity 0.2s;
}

.kz-sun  { color: #FFD60A; }
.kz-moon { color: #8B8FA8; }

[data-kz-theme="light"] .kz-sun  { opacity: 0.4; }
[data-kz-theme="dark"]  .kz-moon { opacity: 0.4; }

.kz-toggle-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--kz-text-muted, #888);
  min-width: 32px;
  font-family: Cairo, sans-serif;
  transition: color 0.3s;
}

[data-kz-theme="dark"]  .kz-toggle-label { color: #888; }
[data-kz-theme="light"] .kz-toggle-label { color: #666; }

/* Hover glow effect */
.kz-theme-toggle:hover .kz-toggle-track {
  border-color: #F97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.15);
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .kz-theme-toggle {
    bottom: 16px;
    left: 16px;
  }
  html[dir="rtl"] .kz-theme-toggle,
  body.rtl .kz-theme-toggle {
    left: auto;
    right: 16px;
  }
  .kz-toggle-label { display: none; }
}