/* frontend/css/style.css (ACTUALIZADO) */

/* --- 1. IMPORTACIÓN DE FUENTES (YA HECHA EN EL HTML) Y VARIABLES DE COLOR --- */
:root {
  --font-body: 'Nunito', sans-serif;
  --font-headings: 'Pacifico', cursive;
  --color-background: #FAF7F2;
  --color-text: #4E342E;
  --color-primary: #E91E63;
  --color-primary-dark: #C2185B;
  --color-card-bg: #FFFFFF;
}

/* --- 2. ESTILOS GENERALES Y TIPOGRAFÍA --- */
body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
  font-family: var(--font-headings);
}

/* --- 3. SOBRESCRIBIR ESTILOS DE BOOTSTRAP --- */

/* Barra de Navegación */
.bg-primary {
  background-color: var(--color-primary-dark) !important;
}

/* Botones */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: bold;
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.text-primary {
  color: var(--color-primary) !important;
}

/* Tarjetas de Producto */
.card {
  border: 1px solid #E0E0E0;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.card-img-top {
  height: 180px;
  object-fit: cover;
}

/* --- 4. ESTILOS DE LA SECCIÓN HERO --- */
.hero-section {
  position: relative;
  height: 60vh; /* Altura del 60% de la ventana del navegador */
  background-image: url('https://firebasestorage.googleapis.com/v0/b/heladosdelvalle-66343.firebasestorage.app/o/Collague.JPG?alt=media&token=845cf8f2-ac18-4e3c-b81b-ef3e87bbe4fb'); /* Imagen de fondo de helados */
  background-size: cover;
  background-position: center;
  margin-bottom: 2.5rem; /* Separación con el catálogo */
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Capa oscura para que el texto resalte */
}

.hero-section .display-3 {
  font-family: var(--font-headings);
  font-weight: bold;
}

.hero-section .btn-light {
  font-family: var(--font-body);
  font-weight: bold;
  padding: 10px 30px;
  color: var(--color-primary); /* Usa el color rosa para el texto del botón */
}

/* --- 5. ESTILOS PARA ETIQUETA DE STOCK --- */
.stock-badge {
    z-index: 10; /* Asegura que la etiqueta esté por encima de la imagen */
}

/* --- 6. ESTILOS DEL FOOTER --- */
.footer-section {
  background-color: #4E342E; /* Usamos el color chocolate para el fondo */
  color: #FFFFFF; /* Texto blanco para que contraste */
  padding: 2rem 0;
}

.footer-link {
  color: #FFFFFF;
  text-decoration: none;
  margin: 0 10px;
  transition: color 0.2s ease-in-out;
}

.footer-link:hover {
  color: #FFC0CB; /* Un toque de rosa al pasar el mouse */
}

/* --- 7. ESTILOS PARA EL PANEL DE BÚSQUEDA --- */
.filter-panel {
  background-color: #f8f9fa; /* Un gris muy claro */
  border-bottom: 1px solid #dee2e6;
}

/* --- 8. ESTILOS PARA LA BARRA LATERAL DE FILTROS --- */
#filter-sidebar .card {
    position: sticky; /* Para que la barra se quede fija al hacer scroll */
    top: 20px;
}

#filter-sidebar .accordion-button:not(.collapsed) {
    background-color: var(--color-primary);
    color: white;
}

#filter-sidebar .list-group-item.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* --- 9. ESTILOS PARA LA BARRA LATERAL DE FILTROS */
#filter-sidebar .card {
    position: sticky;
    top: 20px;
}
#filter-sidebar .accordion-button:not(.collapsed) {
    background-color: var(--color-primary);
    color: white;
}
#filter-sidebar .list-group-item.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* AJUSTE PARA EL PANEL DE BÚSQUEDA SUPERIOR */
#offcanvasSearch {
    height: 70px;
}