/* 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;
}

/* High Contrast Informational & Alert Boxes */
.info-box-blue {
    background-color: #eff6ff !important;
    border: 1.5px solid #93c5fd !important;
    color: #0f172a !important;
}
.info-box-blue .info-box-title {
    color: #1e3a8a !important;
    font-weight: 700 !important;
}
.info-box-blue .info-box-icon {
    color: #2563eb !important;
}
.info-box-blue li, .info-box-blue p, .info-box-blue span {
    color: #1e293b !important;
}
.info-box-blue strong {
    color: #0f172a !important;
}

html.dark .info-box-blue {
    background-color: #0f172a !important;
    border: 1.5px solid #1e3a8a !important;
    color: #f8fafc !important;
}
html.dark .info-box-blue .info-box-title {
    color: #93c5fd !important;
}
html.dark .info-box-blue .info-box-icon {
    color: #60a5fa !important;
}
html.dark .info-box-blue li, html.dark .info-box-blue p, html.dark .info-box-blue span {
    color: #e2e8f0 !important;
}
html.dark .info-box-blue strong {
    color: #ffffff !important;
}

.info-box-amber {
    background-color: #fffbeb !important;
    border: 1.5px solid #fcd34d !important;
    color: #0f172a !important;
}
.info-box-amber .info-box-title {
    color: #78350f !important;
    font-weight: 700 !important;
}
.info-box-amber .info-box-icon {
    color: #d97706 !important;
}
.info-box-amber li, .info-box-amber p, .info-box-amber span {
    color: #451a03 !important;
}

html.dark .info-box-amber {
    background-color: #1c1917 !important;
    border: 1.5px solid #78350f !important;
    color: #fef3c7 !important;
}
html.dark .info-box-amber .info-box-title {
    color: #fde68a !important;
}
html.dark .info-box-amber .info-box-icon {
    color: #f59e0b !important;
}
html.dark .info-box-amber li, html.dark .info-box-amber p, html.dark .info-box-amber span {
    color: #fef3c7 !important;
}

/* Delivery Profile Incomplete Warning Banner */
.profile-warning-banner {
    background-color: #fffbeb !important;
    border: 1.5px solid #fcd34d !important;
    color: #451a03 !important;
}
.profile-warning-banner .banner-title {
    color: #78350f !important;
    font-weight: 800 !important;
}
.profile-warning-banner .banner-desc {
    color: #713f12 !important;
    font-weight: 500 !important;
}
.profile-warning-banner .banner-btn {
    background-color: #ea580c !important;
    color: #ffffff !important;
}
.profile-warning-banner .banner-btn:hover {
    background-color: #c2410c !important;
}

html.dark .profile-warning-banner {
    background-color: #1c1917 !important;
    border: 1.5px solid #78350f !important;
    color: #fef3c7 !important;
}
html.dark .profile-warning-banner .banner-title {
    color: #fde68a !important;
}
html.dark .profile-warning-banner .banner-desc {
    color: #fef3c7 !important;
}
html.dark .profile-warning-banner .banner-btn {
    background-color: #ea580c !important;
    color: #ffffff !important;
}
html.dark .profile-warning-banner .banner-btn:hover {
    background-color: #c2410c !important;
}