/* Custom Styles for SOS Wholesale */

/* Color Theme Variables */
:root {
    --orange-primary: #FF6600;
    --gray-primary: #4A4A4A;
    --lime-green: #CCFF00;
}

/* Smooth transitions */
* {
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* Slider styles */
#heroSlider .flex,
#brandsSlider .flex {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

#heroSlider img {
    width: 100%;
    height: auto;
    display: block;
}

/* Hero Slider Dots */
.hero-slider-dot {
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.hero-slider-dot:hover {
    opacity: 1 !important;
}

.hero-slider-dot.active {
    opacity: 1 !important;
}

/* Brands Slider Dots */
.brands-slider-dot {
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.brands-slider-dot:hover {
    background-color: #6B7280 !important;
}

.brands-slider-dot.active {
    background-color: #4B5563 !important;
}

/* Mobile Menu Slide Animation from Right */
#mobileMenu {
    will-change: transform;
}

#mobileMenu.translate-x-0 {
    transform: translateX(0);
}

#mobileMenu.translate-x-full {
    transform: translateX(100%);
}

/* Simple Dropdown Menu Styles */
.submenu-parent {
    position: relative;
}

.submenu-parent-2 {
    position: relative;
}

/* Ensure submenus stay visible on hover */
.submenu-parent:hover .group-hover\/item\:opacity-100,
.submenu-parent:hover .group-hover\/item\:visible {
    opacity: 1 !important;
    visibility: visible !important;
}

.submenu-parent-2:hover .group-hover\/subitem\:opacity-100,
.submenu-parent-2:hover .group-hover\/subitem\:visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Smooth transitions */
.submenu-parent > div,
.submenu-parent-2 > div {
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Chevron animation on hover */
.submenu-parent:hover .fa-chevron-right,
.submenu-parent-2:hover .fa-chevron-right {
    transform: translateX(3px);
    transition: transform 0.2s ease;
}

/* Form focus styles */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Ensure full width on mobile */
    #heroSlider img {
        width: 100%;
        height: auto;
    }
    
    /* Adjust navigation for mobile */
    nav .flex {
        flex-direction: column;
    }
    
    nav .flex > * {
        width: 100%;
        text-align: center;
    }
}

/* Print styles */
@media print {
    header,
    footer,
    nav {
        display: none;
    }
}

/* Accessibility improvements */
a:focus,
button:focus {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Ensure lime green color matches design */
.bg-lime-400 {
    background-color: #CCFF00;
}

.hover\:bg-lime-500:hover {
    background-color: #B8E600;
}

/* Orange color matching */
.bg-[#eb5b1e] {
    background-color: #FF6600;
}

.hover\:bg-[#eb5b1e]:hover {
    background-color: #E55A00;
}

/* Gray color matching */
.bg-gray-700 {
    background-color: #4A4A4A;
}