/**
 * Theme Fix CSS
 * Fixes for specific elements that need color adjustments
 */

/* Hero section background fixes */
.theme-dark .hero-section {
  background-color: #1A1D2E !important;
}

.theme-light .hero-section {
  background-color: #F8FAFC !important;
}

/* Store page header background fix */
.theme-dark .page-header {
  background-color: #0F172A !important;
}

.theme-light .page-header {
  background-color: #F1F5F9 !important;
}

/* Hero title gradient fix */
.theme-dark .hero-title {
  background: linear-gradient(135deg, #7B70FA, #7D7AFF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #7B70FA !important;
}

.theme-light .hero-title {
  background: linear-gradient(135deg, #6C5CE7, #5352ED);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #6C5CE7 !important;
}

/* Browse store button fix */
.theme-dark .btn-primary {
  background-color: #7B70FA !important;
  color: #FFFFFF !important;
  border-color: #7B70FA !important;
}

.theme-light .btn-primary {
  background-color: #6C5CE7 !important;
  color: #FFFFFF !important;
  border-color: #6C5CE7 !important;
}

.theme-dark .btn-primary:hover {
  background-color: #6C5CE7 !important;
  border-color: #6C5CE7 !important;
}

.theme-light .btn-primary:hover {
  background-color: #5B51D6 !important;
  border-color: #5B51D6 !important;
}

/* Theme icon fix */
.theme-dark #lightIcon {
  color: #E2E8F0 !important;
}

.theme-light #darkIcon {
  color: #1E293B !important;
}

/* Force icon display */
html.theme-dark #darkIcon {
  display: none !important;
}

html.theme-dark #lightIcon {
  display: block !important;
}

html.theme-light #darkIcon {
  display: block !important;
}

html.theme-light #lightIcon {
  display: none !important;
}

/* Make sure both icons are properly styled */
#darkIcon, #lightIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
  transition: none !important;
}

/* Fix other gradient elements */
.theme-dark .brand-logo,
.theme-dark .z-brand-logo i {
  background: linear-gradient(135deg, #7B70FA, #7D7AFF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.theme-light .brand-logo,
.theme-light .z-brand-logo i {
  background: linear-gradient(135deg, #6C5CE7, #5352ED);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}