/* Theme Styles */
.theme-light {
    background-color: #fff !important;
    color: #000 !important;
}

.theme-light .bg-gray-1100,
.theme-light section.bg-gray-1100 {
    background-color: #fff !important;
}

.theme-light .header-section,
.theme-light .header-section *,
.theme-light .header-section a,
.theme-light .header-section .nav-link,
.theme-light .header-section .navbar-nav .nav-link {
    color: #000 !important;
}

.theme-light .bg-gray-3100,
.theme-light section.bg-gray-3100 {
    background-color: #f5f5f5 !important;
}

.theme-light .text-white,
.theme-light h1.text-white,
.theme-light h2.text-white,
.theme-light h3.text-white,
.theme-light h4.text-white,
.theme-light h5.text-white,
.theme-light h6.text-white {
    color: #000 !important;
}

.theme-light .product-title a {
    color: #000 !important;
}

.theme-light main,
.theme-light #content {
    background-color: #fff !important;
    color: #000 !important;
}

.theme-dark {
    background-color: #131722 !important;
    color: #fff !important;
}

.theme-dark .bg-gray-1100,
.theme-dark section.bg-gray-1100 {
    background-color: #131722 !important;
}

.theme-dark .header-section,
.theme-dark .header-section *,
.theme-dark .header-section a,
.theme-dark .header-section .nav-link,
.theme-dark .header-section .navbar-nav .nav-link {
    color: yellow !important;
}

.theme-dark .bg-gray-3100,
.theme-dark section.bg-gray-3100 {
    background-color: #1c212e !important;
}

.theme-dark .text-white,
.theme-dark h1.text-white,
.theme-dark h2.text-white,
.theme-dark h3.text-white,
.theme-dark h4.text-white,
.theme-dark h5.text-white,
.theme-dark h6.text-white {
    color: #fff !important;
}

.theme-dark .product-title a {
    color: #fff !important;
}

.theme-dark main,
.theme-dark #content {
    background-color: #131722 !important;
    color: #fff !important;
}

/* Theme Toggle Button */
#themeToggle,
#themeToggleMobile {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 8px;
    transition: opacity 0.3s;
}

#themeToggle:hover,
#themeToggleMobile:hover {
    opacity: 0.7;
}

#themeToggle svg,
#themeToggleMobile svg {
    vertical-align: middle;
}