/*Nuevo Header*/

.euro-header {
    z-index: 100;
}

.euro-header__container {
    padding: 1.5rem 2rem;
}

.euro-header__left {
}

.euro-header__logo {
    margin-right: 1rem;
}

.euro-header__logo-image {
    height: 4.5rem;
}

.euro-header__nav {
    font-size: 0.875rem; 
    font-weight: 500;
}

@media (min-width: 1440px) {
    .euro-header__nav {
        font-size: 0.9rem; 
    }
}

.euro-header__nav-item {
}

.euro-header__right {
}

.euro-header__language-text {
    font-size: 0.85rem;
    font-weight: 600;
}

.euro-header__user {
    border-right: 1px solid #ffffff;
    padding-right: 15px;
}

.euro-header__user-name {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.75rem; /* 12px */
    line-height: 1.2;
    color: var(--black-color);
}

@media (min-width: 1024px) {
    .euro-header__user-name {
        font-size: 0.875rem; /* 14px */
    }
}

.euro-header__user-company {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.75rem; /* 12px */
    line-height: 1.2;
    color: #ffffff;
}

@media (min-width: 1024px) {
    .euro-header__user-company {
        font-size: 0.875rem; /* 14px */
    }
}

/* Contenedor del select */
.euro-header__user-currency {
    @apply relative;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.75rem; /* 12px */
    line-height: 1.2;
    color: #ffffff;
}

@media (min-width: 1024px) {
    .euro-header__user-currency {
        font-size: 0.875rem; /* 14px */
    }
}

/* Select estilizado */

.euro-header__user-currency-select {
    @apply border-none px-3 py-1 cursor-pointer appearance-none focus:ring-0 focus:outline-none;
    background: transparent;
}

    /* Quitar la flecha por defecto en Chrome, Edge y Safari */
    .euro-header__user-currency-select::-webkit-appearance,
    .euro-header__user-currency-select::-moz-appearance {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    /* Opciones dentro del select */
    .euro-header__user-currency-select option {
        background-color: #ffffff;
        color: var(--main-color);
    }

        /* Cambiar el color de la opción cuando se selecciona */
        .euro-header__user-currency-select option:checked {
            background-color: var(--black-color);
            color: white !important;
        }

        /* Estilos al pasar el mouse sobre una opción */
        .euro-header__user-currency-select option:hover {
            background-color: var(--main-color) !important;
            color: white !important;
        }


.euro-header__user-language-select {
    @apply border-none px-3 py-1 cursor-pointer appearance-none focus:ring-0 focus:outline-none;
    background: transparent;
}

    /* Quitar la flecha por defecto en Chrome, Edge y Safari */
    .euro-header__user-language-select::-webkit-appearance,
    .euro-header__user-language-select::-moz-appearance {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    /* Opciones dentro del select */
    .euro-header__user-language-select option {
        background-color: #ffffff;
        color: var(--main-color);
    }

        /* Cambiar el color de la opción cuando se selecciona */
        .euro-header__user-language-select option:checked {
            background-color: var(--black-color);
            color: white !important;
        }

        /* Estilos al pasar el mouse sobre una opción */
        .euro-header__user-language-select option:hover {
            background-color: var(--main-color) !important;
            color: white !important;
        }

.euro-header__buttons {
}

.euro-header__button {
    width: 110px;
}

.euro-header__menu {
    color: var(--company-text);
    border: none;
    background: none;
    cursor: pointer;
}

.euro-header__menu .menu-icon::before {
    content: '\f0c9'; /* Código del ícono de barras */
    font-family: 'Font Awesome 6 Free';
}

.euro-header__menu.active .menu-icon::before {
    content: '\f00d'; /* Código del ícono X */
}

/*Nuevo Header*/
.euro-header__products-nav {
    background: #fff;
}

.nav-item {
    list-style: none;
}

.euro-header__currency-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.2rem;
    border-right: 1px solid #ffffff;
    padding-right: 15px;
    margin-right: 10px;
    color: var(--company-text);
    font-size: 0.75rem; /* 12px */
}

@media (min-width: 1024px) {
    .euro-header__currency-section {
        font-size: 0.875rem; /* 14px */
        
    }
}

.euro-header__currency {
    /*border-left: 1px solid #ffffff;
    padding-left: 15px;
    padding-right: 5px;*/
}

.euro-header__exchange-rate {
    color: var(--company-text);
}

.euro-header__exchange-rate:hover {
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--company-text);
    transition: all 0.3s ease;
}

.euro-header__exchange-rate span{
    font-size: 0.85rem;
}

.nav__link {
    color: var(--company-text);
}

.euro-header__user {
    color: var(--company-text);
}

/*icono menu*/
.euro-header__menu {
    color: var(--company-text);
}

/* Estilos para el botón de categorías en móvil */
.euro-header__products-toggle {
    display: none;
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--white-color);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    border: none;
    font-size: 0.875rem; /* 14px */
}

.euro-header__products-toggle i {
    margin-right: 0.5rem;
}

/* Contenedor de productos */
.euro-header__products-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    padding: 0.4rem 1rem;
}



/* Estilos responsive */
@media (max-width: 768px) {

    .euro-header__currency-section {
        font-size: 0.875rem; /* 14px */
        align-items: flex-start;
        padding-right: 10px;
        margin-right: 0px;
    }

    .euro-header__currency-section span {
        font-size: 0.6rem;
        
    }

    .euro-header__currency select{
        font-size: 0.6rem;
    }

    .euro-header__products-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .euro-header__products-container {
        display: none;
        flex-direction: column;
        padding: 0;
        background: #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .euro-header__products-container.active {
        display: flex;
    }

    .euro-header__products-container a {
        padding: 0rem 1rem;
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .euro-header__products-container a:last-child {
        border-bottom: none;
    }

    .euro-header__container {
        padding: 4.5rem 2rem 1.5rem 2rem;
    }

}

/* Agregar estos estilos al archivo CSS existente */
.euro-header__products-toggle i {
    transition: transform 0.3s ease;
}

.euro-header__products-container {
    transition: all 0.3s ease;
}

.euro-header__products-container span {
    font-size: 0.75rem; /* 12px */
    transition: all 0.3s ease;
}

.euro-header__products-container span:hover {
    color: var(--main-color);
    transform: translateY(-2px);
    /* text-decoration: underline;
    text-decoration-color: var(--main-color);
    text-underline-offset: 4px; */
}

.euro-header__products-container span:focus,
.euro-header__products-container span:active {
    color: var(--main-color);
    outline: none;
    transform: translateY(-1px);
}

@media (min-width: 1024px) {x
    .euro-header__products-container span {
        font-size: 0.875rem; /* 14px */
    }
}

.euro-header__product-text {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.75rem; /* 12px */
    line-height: 1.2;
    color: var(--black-color);
    transition: all 0.3s ease; /* Agregamos transición suave */
    text-decoration: none;
}

/* Efecto hover en el texto */
.euro-header__product-text:hover,
a:hover .euro-header__product-text {
    color: var(--main-color);
    transform: translateY(-2px); /* Pequeño efecto de elevación */
    text-decoration: none;
    
}

@media (min-width: 1024px) {
    .euro-header__product-text {
        font-size: 0.875rem; /* 14px */
    }
}

.euro-header__product-icon {
    color: var(--black-color);
    transition: all 0.3s ease;
}

/* Efecto hover en el icono */
.euro-header__product-icon:hover,
a:hover .euro-header__product-icon {
    color: var(--main-color);
    transform: scale(1.1);
}

/* Responsive */
@media (min-width: 768px) {
    .euro-header__product-icon {
        font-size: 1.5rem;
    }
}

/* Estilos para los items del menú principal */
.euro-header__nav a {
    text-decoration: none;
    color: var(--company-text);
    position: relative;
    transition: all 0.3s ease;
    padding: 2px 0; /* Agregar padding para que no salte al elevarse */
}

.euro-header__nav a:hover {
    text-decoration: none;
    color: var(--company-text);
    transform: translateY(-2px); /* Eleva el texto */
}

/* Solo subrayado para el estado activo */
.euro-header__nav a.active {
    color: var(--company-text);
    text-decoration: none;
    border-bottom: 2px solid var(--company-text);
}

/* Quitar efectos adicionales en hover cuando está activo */
.euro-header__nav a.active:hover {
    transform: none; /* No se eleva si está activo */
}

/* Responsive */
@media (max-width: 768px) {
    .euro-header__nav a.active {
        border-bottom: none; /* Opcional: quitar subrayado en móvil */
        /* O puedes usar un estilo diferente para móvil */
        background-color: rgba(var(--main-color), 0.1);
    }
}

/* Estilos para el botón de WhatsApp */
.euro-header__whatsapp {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #25D366;
    padding: 8px 10px;
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.euro-header__whatsapp:hover {
    background-color: #128C7E;
    transform: translateY(-2px);
    text-decoration: none;  /* Agregado para asegurar que no hay subrayado en hover */
}

.euro-header__whatsapp i {
    color: #ffffff;
    font-size: 1.25rem;
}

.euro-header__whatsapp-text {
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
}

@media (min-width: 1024px) {
    .euro-header__whatsapp-text {
        font-size: 0.875rem;
    }
}

@media (max-width: 768px) {
    .euro-header__whatsapp-text {
        display: none;
    }
}

/* Estilos para el menú móvil */
.euro-header__mobile-menu {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.euro-header__mobile-nav {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.euro-header__mobile-nav a {
    display: block;
    padding: 1rem;
    color: var(--company-text);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
    border-radius: 4px;
}

.euro-header__mobile-nav a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
    text-decoration: none;
}

.euro-header__mobile-nav a.active {
    background-color: rgba(255, 255, 255, 0.15);
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .euro-header__mobile-nav {
        padding: 0.5rem;
    }

    .euro-header__mobile-nav a {
        font-size: 14px;
        padding: 0.75rem;
        border-bottom: 1px solid #eee;
    }
}


@media (max-width: 768px){
  /* Cuando tenga la clase .active, muéstrarlo */
  .euro-header__products-toggle.active + .euro-header__products-container{
    display: block;
  }
}