/* Styles for authenticated header */
.header-authenticated {
    background-color: #ffffff;
}

.header-unauthenticated {
    background-color: rgb(255, 255, 255);
}

.iconset:hover {
    color: #106eea;
}
/* End styles for authenticated header */

.iconset:hover .icon,
.iconset:hover .text,
.iconset:hover a {
    color: #106eea;
}

#siteNav > li.active {
    background-color: #f0f0f0 ;
}
#siteNav > li.active > a {
    color: #333 !important;
}

#siteNav > li:hover > a, #siteNav > li > a:hover:hover, #siteNav > li > a:hover {
    color: #106eea;
}

#siteNav > li > a::after {
    background-color: #106eea;
}

/* Styles for user manual */
#userLinks li a:hover {
    color: #106eea;
}

#userLinks li a:hover::after, #userLinks li a:focus::after {
    width: 45%;
}

#userLinks li a::after {
    content: "";
    width: 0;
    height: 1px;
    display: block;
    background-color: #106eea;
}

#userManualLinks li a:hover {
    color: #106eea;
}

#userManualLinks li a:hover::after, #userManualLinks li a:focus::after {
    width: 45%;
}

#userManualLinks li a::after {
    content: "";
    width: 0;
    height: 1px;
    display: block;
    background-color: #106eea;
}
/* End styles user manual */

/* Styles for mega menu categories */
.subLinks {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.subLinks li {
    padding: 10px;
}

.subLinks li,
.subLinks li > a {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.subLinks div:hover {
    background-color: #f0f0f0;
}

.subLinks div.active > a,
.subLinks div:hover > a {
    color: #333;
}

.subLinks div a {
    color: #333;
    text-decoration: none;
    display: block;
    padding: 10px;
}

.subLinks div:hover > a {
    color: #000;
}

.menu-brand-logo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

#siteNav .menu-brand-logo {
    width: 100% !important;
    margin: 0;
    padding: 0;
}

.menu-outer.menu-categories #siteNav > li > a {
    text-transform: capitalize;
}

#siteNav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#siteNav > li .megamenu .menu-title {
    font-weight: normal !important;
    text-transform: capitalize;
}

#siteNav .menu-brand-logo a {
    margin: 0 !important;
    border: none !important;
    text-align: center;
    padding: 5px;
    transition: background-color 0.3s;
    width: 100%;
    height: 100%;
}

#siteNav .menu-brand-logo a:hover {
    background-color: #f0f0f0;
}

.menu-categories {
    background-color: #f0f8ff !important;
    font-family: 'Raleway', sans-serif;
    font-weight: normal;
}

#siteNav > li.lvl1.parent.category.megamenu > a {
    padding: 10px !important;
}

.featured-product-title {
    color: #106eea;
}

.featured-product-name {
    color: #929292;
}

.buy-featured-product {
    color: #106eea !important;
}

.buy-featured-product:hover {
    text-decoration: underline!important;
}
.menu-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    padding: 0;
}

.menu-brand-logo img.initial {
    max-width: 100px;
    max-height: 100px;
}

.menu-brand-logo img.rectangular {
    aspect-ratio: 16 / 9;
    max-width: 150px;
    max-height: 100px;
    margin: 0 auto;
}

.menu-brand-logo img.square {
    aspect-ratio: 1 / 1;
    max-width: 100px;
    max-height: 100px;
    margin: 0 auto;
}

.menu-brand-logo .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    color: #333;
    font-size: 16px;
    text-align: center;
    border: 1px solid #ccc;
    box-sizing: border-box;
    transition: color 0.3s;
}

.menu-brand-logo .placeholder:hover {
    color: #106eea;
}

.megamenu-top{
    top: 0;
}

.megamenu-down{
    bottom: 0;
}

.featured-product-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* End styles menu categories */

/* Styles header.html.twig */
@media (max-width: 991.98px) {
        .user-link.dropdown .btn {
            background: none !important;
            border: none !important;
            padding: 0 !important;
            color: #333 !important;
            text-decoration: none !important;
        }
        
        .user-link.dropdown .btn:hover {
            color: #333 !important;
            text-decoration: none !important;
            background: none !important;
        }
        
        .user-link.dropdown .btn:focus {
            box-shadow: none !important;
            color: #333 !important;
            background: none !important;
        }
        
        .user-link.dropdown .btn:active {
            color: #333 !important;
            background: none !important;
            border: none !important;
        }
        
        .user-link.dropdown .btn::after {
            display: none; /* Ocultar la flecha del dropdown */
        }
        
        .user-link .dropdown-menu {
            min-width: 150px;
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        
        .user-link .dropdown-item {
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
        }
        
        .user-link .dropdown-item:hover {
            background-color: #f8f9fa;
        }
        
        /* Asegurar que otros iconsets estén alineados */
        .iconset {
            margin: 0 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .iconset:hover {
            transform: scale(1.1);
        }
        
        .iconset i {
            font-size: 18px;
            color: #333;
        }
    }

/* End styles header.html.twig */