/* result.css */

/* ==========================================================================
   1) Reset + Fuentes
   ========================================================================== */
   @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&family=Merriweather:wght@300;700&display=swap');

   *,
   *::before,
   *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   /* ==========================================================================
      2) Body
      ========================================================================== */
   body {
     font-family: 'Noto Serif JP', serif;
     background: #fff8f0;
     color: #3a1f04;
     line-height: 1.6;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   /* ==========================================================================
      3) Breadcrumb & Header
      ========================================================================== */
   .page-intro {
     margin-bottom: 2rem;
   }
   .breadcrumb {
     font-size: 0.9rem;
     margin-bottom: 0.5rem;
   }
   .breadcrumb a {
     color: #8c2500;
     text-decoration: none;
   }
   .breadcrumb span {
     margin: 0 0.5em;
   }
   .page-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   .page-header h1 {
     font-size: 2rem;
     color: #8c2500;
   }
   .page-header .count {
     font-size: 0.9rem;
     color: #8c2500;
   }
   
   /* ==========================================================================
      4) Botones
      ========================================================================== */
   .btn-primary {
     background: #8c2500;
     color: #ffe5c4;
     padding: 0.5rem 1rem;
     border: none;
     border-radius: 6px;
     font-size: 0.9rem;
     cursor: pointer;
     transition: background 0.2s;
   }
   .btn-primary:hover {
     background: #a83700;
   }
   
   /* ==========================================================================
      5) 
      ========================================================================== */
   .layout-full {
     display: flex;
     gap: 1.5rem;
     position: relative;
   }
  
   /* Overlay filtros móvil */
   #filters-overlay {
     display: none;
     position: fixed;
     top: 0; left: 0;
     width: 100%; height: 100%;
     background: rgba(0,0,0,0.4);
     z-index: 5;
   }
   
   /* ==========================================================================
      6) PADRE
      ========================================================================== */
    /* GRID para filtros + ofertas */
  .content-grid {
    display: grid;
    grid-template-columns: 240px 1fr; /* filtros fijos, ofertas fluidas */
    gap: 1.5rem;
    align-items: start;               /* no estirar verticalmente */
  } 
  /* Ofertas ocupa el resto del ancho */
  #offers-container {
    width: 100%;
    min-width: 0; /* evita overflow en grid */
    margin-top: 0;
    padding-top: 0;
    }
    .filters {
            /* Solo fijamos 240px de ancho: 
            grid-template-columns de .content-grid ya asegura que la primera columna mide 240px */
      width: 240px;
        
      background: #fff2e8;
      border: 2px solid #ffcfb3;
      border-radius: 8px;
      padding: 1rem;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      z-index: 10;
      overflow-y: auto;    /* Para que si hay muchos filtros aparezca scroll vertical */
      align-self: start;   /* Fuerza que este elemento (grid child) se quede pegado arriba */
    }
    .sticky-filters {
      position: sticky;
      top: 20px; /* o ajusta según la altura de tu header */
      align-self: flex-start;
      z-index: 99;
    }
  
   .filters h2 {
     font-size: 1.2rem;
     color: #8c2500;
     margin-bottom: 0.5rem;
   }
   .filters .field {
     margin-bottom: 0.8rem;
   }
   .filters label {
     font-size: 0.9rem;
     color: #3a1f04;
     display: block;
   }
   .filters input[type="checkbox"],
   .filters select {
     margin-top: 0.3rem;
   }
   
   /* ==========================================================================
      7) Lista de resultados
      ========================================================================== */
   .results-list {
     list-style: none;
     margin: 2rem 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     gap: 2rem; /* espacio vertical entre cada .result-item */
   }
   
   /* ==========================================================================
      8) Cada elemento de la lista como tarjeta
      ========================================================================== */
   .result-item {
     display: flex;
     flex-direction: column;
     background: #fff8f0;
     border: 2px solid #ffcfb3;
     border-radius: 10px;
     padding: 1.5rem;
     box-shadow: 0 4px 6px rgba(0,0,0,0.05);
     transition: transform 0.2s, box-shadow 0.2s;
     width: 100%;         /* para forzar que llene todo el ancho suministrado por el contenedor */
     margin-bottom: 1rem; /* separación vertical entre tarjetas (en caso de que no quieras usar 'gap' en .results-list) */
   }
   .result-item:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 12px rgba(0,0,0,0.1);
   }
   
   /* Título con icono */
   .result-item h2 {
     position: relative;
     padding-left: 1.5rem;
     margin-bottom: 0.5rem;
     font-size: 1.3rem;
     color: #8c2500;
     font-family: 'Noto Serif JP', serif;
   }
   .result-item h2::before {
     content: '☯';
     position: absolute;
     left: 0; top: 0;
     color: #ffcfb3;
   }
   
   /* Tipo y precio */
   .result-item .type {
     font-style: italic;
     color: #3a1f04;
     margin-bottom: auto;
   }
   .result-item .price {
     margin-top: 1rem;
     font-weight: bold;
     color: #8c2500;
   }
   
   /* ==========================================================================
      9) Sin resultados
      ========================================================================== */
   .result-item.empty {
     grid-column: 1 / -1;
     text-align: center;
     color: #666;
   }
   
   /* ==========================================================================
     10) Spinner de carga
      ========================================================================== */
   #loading-spinner {
     text-align: center;
     font-size: 1rem;
     color: #555;
     margin-top: 2rem;
   }
   
   /* ==========================================================================
     11) Scroll to top
      ========================================================================== */
   #btnScrollTop {
     position: fixed;
     bottom: 1.5rem;
     right: 1.5rem;
     background: #8c2500;
     color: #ffe5c4;
     border: none;
     border-radius: 50%;
     width: 3rem;
     height: 3rem;
     font-size: 1.2rem;
     display: none;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     box-shadow: 0 4px 6px rgba(0,0,0,0.1);
   }
   #btnScrollTop.show {
     display: flex;
   }
   
   /* ==========================================================================
     12) Responsive (móvil)
      ========================================================================== */
   @media (max-width: 800px) {
     .layout-full {
       flex-direction: column;
     }
     .filters {
       position: fixed;
       left: -100%;
       top: 0;
       width: 70%;
       transition: left 0.3s;
     }
     .filters.open {
       left: 0;
     }
     #filters-overlay.visible {
       display: block;
     }
     #btnScrollTop.show {
       display: flex;
     }
   }
 /* ==========================================================================
   8) Estilos para cada tarjeta de oferta (.offer-group) y sus subcomponentes
   ========================================================================== */

/* 8.0) Hacemos que el <a.offer-link> no rompa el contenedor */
.offer-link {
    text-decoration: none;
    color: inherit;
    display: block;
    margin-bottom: 1.5rem; /* separación vertical entre tarjetas */
  }
  
  /* 8.1) .offer-group: misma estética anterior, sin overflow / tabs */
  .offer-group {
    background: #fff8f0;
    border: 2px solid #ffcfb3;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
  }
  .offer-group:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 12px rgba(0,0,0,0.1);
  }
  
  /* 8.2) Layout: imagen a la izquierda, info a la derecha */
  .offer-header-group {
    display: flex;
    gap: 1rem;
    padding: 1rem;
  }
  
  /* 8.3) Imagen */
  .offer-group-image {
    flex: 0 0 300px;   /* ancho fijo de 300px */
    width: 300px;      /* ancho fijo de 300px */
    height: 200px;     /* alto fijo de 200px */
    object-fit: cover; /* recorta/ajusta la imagen sin deformarla */
    border-radius: 6px;
  }
  
  /* 8.4) Contenedor del texto (columna derecha) */
  .offer-group-info {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  /* 8.5) División interna:  izquierda (.offer-info-left) y derecha (.offer-info-right) */
  .offer-info-left {
    flex: 2;
    display: flex;
    flex-direction: column;
  }
  
  .offer-info-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
  }
  
  /* 8.6) Título */
  .offer-title {
    font-size: 1.5rem;
    color: #8c2500;
    margin-bottom: 0.3rem;
    line-height: 1.2;
  }
  
  /* 8.7) Ciudad (subtítulo) */
  .offer-city {
    font-size: 1rem;
    color: #3a1f04;
    margin-bottom: 0.3rem;
  }
  
  /* 8.8) Badge “Bestseller” */
  .offer-badge {
    display: inline-block;
    background: #0057b8;
    color: #fff;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
  }
  
  /* 8.9) Descripción corta */
  .offer-description {
    font-size: 0.95rem;
    color: #3a1f04;
    line-height: 1.5;
    margin-bottom: 0.8rem;
  }
  
  /* 8.10) Duración */
  .offer-duration {
    font-size: 0.9rem;
    color: #3a1f04;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }
  .icon-clock {
    font-size: 1rem;
    color: #8c2500;
  }
  
  /* 8.11) Rating y texto */
  .offer-rating {
    font-size: 0.9rem;
    color: #3a1f04;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }
  .icon-star {
    font-size: 1rem;
    color: #f4c150;
  }
  .rating-value {
    font-weight: bold;
    color: #8c2500;
  }
  
  /* 8.12) Cancelación gratuita */
  .offer-cancellation {
    font-size: 0.9rem;
    color: #3a1f04;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.8rem;
  }
  .icon-cancel {
    font-size: 1rem;
    color: #2a8e0d;
  }
  
  /* 8.13) BLOQUE PRECIO (derecha) */
  .offer-price {
    font-size: 1.3rem;
    color: #000;
    font-weight: bold;
    margin-bottom: 0.3rem;
  }
  
  .offer-available {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.8rem;
    text-align: right;
  }
  
  /* 8.14) “Botón” Ver disponibilidad */
  .btn-availability {
    display: inline-block;
    background: #0057b8;
    color: #fff;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
  }
  .btn-availability:hover {
    background: #00469a;
  }
  
  /* 8.15) Ajustes responsivos (ejemplo) */
  @media (max-width: 800px) {
    .offer-header-group {
      flex-direction: column;
    }
    .offer-group-image {
      width: 100%;
      height: auto;
    }
    .offer-info-left,
    .offer-info-right {
      width: 100%;
    }
    .offer-info-right {
      align-items: flex-start;
      margin-top: 1rem;
    }
  }