/* /css/header-style.css */

/* Estilo general del header */
.navbar {
    padding: 0.5rem 1rem;
    transition: background-color 0.3s ease;
}

/* Estilo para los enlaces de navegación */
.navbar .nav-link {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.3s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #ffffff;
}

/* Estilo del dropdown de categorías */
.dropdown-menu-categorias {
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    margin-top: 0; 
    padding: 1rem; /* Añadido padding general */
    width: 550px; /* Ancho base para escritorio, ligeramente aumentado */
    max-width: 95vw; /* Previene desbordamiento en ventanas muy estrechas */
}

/* Contenedor interno para las columnas (para controlar padding) */
.dropdown-menu-categorias .row {
    margin: 0 !important; /* Anula márgenes negativos de Bootstrap si los hubiera */
}

/* Ajuste para pantallas pequeñas (Tablets y Móviles) */
@media (max-width: 991.98px) { /* Usamos el punto de quiebre de Bootstrap para menú colapsado (lg) */
    .navbar-collapse .dropdown-menu-categorias { /* Selector más específico */
        width: 100%; /* Ocupa todo el ancho del contenedor del menú colapsado */
        padding-left: 0;  /* Elimina padding izquierdo */
        padding-right: 0; /* Elimina padding derecho */
        padding-top: 0.5rem; /* Mantiene un poco de padding vertical */
        padding-bottom: 0.5rem;
        box-shadow: none; /* Opcional: Quita la sombra en móvil */
        border: none; /* Opcional: Quita el borde en móvil */
    }
    
    /* Mantenemos el apilado vertical y ajuste de padding de items */
    .navbar-collapse .dropdown-menu-categorias .col-md-4 {
        width: 100% !important; 
        padding-left: 0; /* Asegura no tener padding extra en la columna */
        padding-right: 0;
    }
    
    .navbar-collapse .dropdown-menu-categorias .dropdown-item {
        padding: 0.5rem 1rem; /* Ajusta padding de los enlaces internos */
        text-align: center; /* Centra el texto de las categorías */
    }
}

/* Estilo para el ícono y contador del carrito */
#cartDropdown .badge {
    transform: translate(-5px, -5px);
}

/* /css/header-style.css */

/* Estilos para el contenedor de resultados de búsqueda */
#search-results-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid #ddd;
    border-top: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1050; /* Debe estar por encima de otros elementos */
    max-height: 400px;
    overflow-y: auto;
    display: none; /* Oculto por defecto */
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: #333;
}

.search-result-item:hover {
    background-color: #f8f9fa;
}

.search-result-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin-right: 15px;
    border-radius: 4px;
}

.search-result-item .info h6 {
    margin: 0;
    font-weight: bold;
}

.search-result-item .info p {
    margin: 0;
    font-size: 0.85rem;
    color: #6c757d;
}

/* Estilos para el dropdown de notificaciones */
/* Estilos base para ESCRITORIO */
#notificationsDropdown + .dropdown-menu { 
    width: 380px; /* Ancho ajustado para escritorio */
    max-width: 95vw; /* Previene desbordamiento en ventanas estrechas */
    padding: 0; /* Quitamos padding del contenedor principal */
}

#notification-list {
    max-height: 450px;
    overflow-y: auto;
}

/* Estilos específicos para los items (aplican en ambas vistas) */
#notification-list .dropdown-item-wrapper {
    padding: 0.75rem 1rem; /* Padding interno para cada notificación */
    border-bottom: 1px solid #eee; /* Separador */
}
#notification-list .dropdown-item-wrapper:last-child {
    border-bottom: none; /* Sin borde en el último item */
}
#notification-list .notification-link {
    display: block; /* Asegura que el enlace ocupe espacio */
    margin-bottom: 0.5rem; /* Espacio antes de los botones */
}
#notification-list .dropdown-item-wrapper .text-end {
    text-align: right !important; /* Asegura alineación derecha */
}
 #notification-list .dropdown-item-wrapper .btn {
    margin-left: 0.25rem; /* Espacio entre botones */
}


/* Ajuste específico para MÓVIL (cuando el menú está colapsado) */
@media (max-width: 991.98px) { 
     .navbar-collapse #notificationsDropdown + .dropdown-menu { /* Selector específico */
        width: 100%; /* Ocupa todo el ancho del contenedor del menú colapsado */
        box-shadow: none; 
        border: none; 
        max-width: 100%; /* Anula el max-width anterior */
    }
    
    /* Ajustar padding de los items en móvil */
     .navbar-collapse #notification-list .dropdown-item-wrapper {
        padding: 0.5rem 0.75rem; 
    }
}
.navbar .d-flex.mx-auto {
    margin-bottom: 0 !important;
}