/* stacktable.css - Modern Mobile-First Styles */

/* --- Estilos para la tabla en Escritorio (más de 800px) --- */
@media (min-width: 801px) {
    .stacktable.large-only { display: table; }
    .stacktable.small-only { display: none; }
}

/* --- Estilos para la tabla en Móviles (hasta 800px) --- */
@media (max-width: 800px) {
    /* Oculta la tabla original de escritorio y muestra la versión apilada si se usa stacktable.js */
    .stacktable.large-only { display: none; }
    .stacktable.small-only { display: table; }
    
    /* Preparamos la tabla para que actúe como una lista de bloques */
    .gnlavail-search-results table, 
    .gnlavail-search-results thead, 
    .gnlavail-search-results tbody, 
    .gnlavail-search-results th, 
    .gnlavail-search-results td, 
    .gnlavail-search-results tr { 
        display: block; 
    }
    
    /* Ocultamos los encabezados originales de la tabla, usaremos los 'data-th' */
    .gnlavail-search-results thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    /* Cada fila (tr) se convierte en una tarjeta individual */
    .gnlavail-search-results tr {
        border: none; /* Eliminamos el borde anterior */
        border-radius: 10px; /* Esquinas redondeadas para un look de tarjeta */
        margin-bottom: 20px; /* Espacio entre cada tarjeta */
        background-color: #ffffff; /* Fondo blanco para la tarjeta */
        box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Sombra sutil para dar profundidad */
        overflow: hidden; /* Asegura que el contenido respete las esquinas redondeadas */
    }
    
    /* Estilo de cada celda (td) dentro de la tarjeta */
    .gnlavail-search-results td { 
        border: none;
        border-bottom: 1px solid #f0f0f0; /* Línea separadora muy suave entre propiedades */
        position: relative;
        padding: 15px 15px 15px 45%; /* Espacio interior y dejamos sitio para la etiqueta */
        text-align: left; /* Alineamos el texto a la izquierda */
        display: flex; /* Usamos flex para centrar verticalmente el contenido */
        align-items: center;
        min-height: 50px; /* Altura mínima para que no se vea aplastado */
    }

    .gnlavail-search-results td:last-child {
        border-bottom: none; /* La última propiedad no necesita línea separadora */
    }
    
    /* La magia: creamos la etiqueta a partir del atributo 'data-th' */
    .gnlavail-search-results td:before { 
        position: absolute;
        top: 50%; /* Centrado vertical */
        transform: translateY(-50%); /* Ajuste fino para el centrado vertical */
        left: 15px; /* Margen izquierdo de la etiqueta */
        width: 40%; /* Ancho de la etiqueta */
        padding-right: 10px; 
        white-space: nowrap; /* Evita que la etiqueta se parta en dos líneas */
        content: attr(data-th);
        font-weight: bold;
        color: #333; /* Color oscuro para la etiqueta */
    }

    /* --- Estilos específicos por celda para un acabado perfecto --- */

    /* Para la celda de la FOTO */
    .gnlavail-search-results td[data-th="Photo"] {
        padding: 0; /* Quitamos el padding para que la imagen ocupe todo */
    }
    .gnlavail-search-results td[data-th="Photo"] img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 10px 10px 0 0; /* Redondeamos solo las esquinas superiores */
    }
    
    /* Para la celda de las FECHAS */
    .gnlavail-search-results td[data-th="Dates"] .date-cell-container {
        justify-content: flex-start; /* Alineamos el contenido a la izquierda */
    }

    /* Para la celda del PRECIO */
    .gnlavail-search-results td[data-th="Price per person"] {
        /* Los estilos que ya tienes para los precios funcionarán bien aquí */
    }

    /* Para la celda del BOTÓN */
    .gnlavail-search-results td[data-th="Book Now!"] {
        padding: 15px; /* Espacio interior para el botón */
    }
    .gnlavail-search-results td[data-th="Book Now!"] .button {
        display: block;
        width: 100%;
        text-align: center;
        padding: 12px;
        background-color: #6ec1e4; /* Un color de fondo llamativo */
        color: white; /* Texto en blanco */
        border-radius: 8px;
        border-bottom: none;
        text-decoration: none;
        font-weight: bold;
    }
    .gnlavail-search-results td[data-th="Book Now!"] .button:hover {
        background-color: #5aa9c8; /* Color ligeramente más oscuro al pasar el ratón */
    }
}