/* Explain: Styles for UI components, including product cards, mega menus, and theme toggles. - */
.product-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.mega-menu {
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

[x-cloak] { display: none !important; }

html.dark .dark-hidden { display: none !important; }
html:not(.dark) .light-hidden { display: none !important; }

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.swiper-pagination-bullet-active {
    background: var(--primary-color) !important;
}

/* Order Status Badge Theme Adaptation */
.order-status-badge {
    background-color: #000000 !important;
    color: #ffffff !important;
}

html.dark .order-status-badge {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Theme Toggle Slider */
html:not(.dark) .theme-toggle-track {
    background-color: #d1d5db; /* gray-300 */
}
html.dark .theme-toggle-track {
    background-color: #374151; /* gray-700 */
}
html:not(.dark) .theme-toggle-thumb {
    transform: translateX(0.25rem); /* translate-x-1 */
}
html.dark .theme-toggle-thumb {
    transform: translateX(1.75rem); /* translate-x-7 */
}

/* High Contrast Toggle Switch for Dark & Light Themes */
.toggle {
    border: 1.5px solid #94a3b8;
    background-color: #e2e8f0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

html.dark .toggle {
    border: 1.5px solid #64748b !important;
    background-color: #1e293b !important;
}

html.dark .toggle:not(:checked) {
    background-color: #1e293b !important;
    border-color: #64748b !important;
    box-shadow: 0 0 0 1px #475569 inset !important;
}

html.dark .toggle:checked {
    border-color: transparent !important;
}

html.dark .toggle:checked.toggle-success {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
}

html.dark .toggle:checked.toggle-info {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

html.dark .toggle:checked.toggle-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

html.dark .toggle:checked:not(.toggle-success):not(.toggle-info):not(.toggle-primary) {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}