/* frontend-styles.css */

.gnlavail-search-results table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    border: none !important;
}

.gnlavail-search-results table th,
.gnlavail-search-results table td,
.gnlavail-search-results table tr,
.gnlavail-search-results table thead,
.gnlavail-search-results table tbody {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

.gnlavail-search-results table th,
.gnlavail-search-results table td {
    padding: 15px;
    text-align: center;
}

.gnlavail-search-results table td:first-child img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.gnlavail-search-results table td a {
    color: #0073aa;
    text-decoration: none;
    border-bottom: 1px solid #0073aa;
    transition: all 0.3s ease;
}

.gnlavail-search-results table td a:hover {
    border-bottom: none;
    opacity: 0.8;
}

.gnlavail-search-results .price-old {
    text-decoration: line-through;
    color: #999;
    font-size: 0.9em;
}

.gnlavail-search-results .price-new {
    color: #e74c3c;
    font-weight: bold;
    font-size: 1.1em;
}

/* ============================================
   SISTEMA DUAL DE HERENCIA DE ESTILOS DE BOTONES
   ============================================
   Método 1: Herencia CSS nativa del tema (preferido)
   Método 2: Detección y clonación JavaScript (fallback)
*/

/* Wrapper del botón - estructura Gutenberg completa */
.gnlavail-search-results .gnlavail-btn-wrapper {
    display: inline-block;
    margin: 0;
}

/* Los botones heredan COMPLETAMENTE los estilos del tema de WordPress */
/* wp-block-button__link es la clase estándar de Gutenberg que reconocen todos los temas modernos */
/* wp-element-button es la clase adicional para temas compatibles con FSE */
.gnlavail-search-results .wp-block-button__link,
.gnlavail-search-results .wp-element-button,
.gnlavail-search-results .gnlavail-book-btn {
    /* CSS absolutamente mínimo - solo display */
    display: inline-block;
    /* Asegurar que el botón se comporte como enlace-botón */
    box-sizing: border-box;
    text-align: center;
    word-break: break-word;

    /* Tamaño de botón ajustado */
    font-size: 12px !important;
    padding: 8px 16px !important;
    min-width: 80px;

    /* TODO lo demás se hereda del tema O se clona vía JavaScript: */
    /* - background-color y color */
    /* - border, border-radius, border-color */
    /* - box-shadow */
    /* - hover effects y transitions */
    /* - font-weight, font-family, line-height */
    /* - text-decoration, text-transform, letter-spacing */
    /* - opacity, cursor, transform */
}

/* Asegurar que el wrapper herede también */
.gnlavail-search-results .wp-block-button {
    display: inline-block;
    margin: 0;
}

/* --- ESTILOS RESPONSIVOS PARA LAS TARJETAS --- */

/* Aplicar solo en pantallas de 767px o menos (móviles) */
@media (max-width: 767px) {

    /* Forzamos la tarjeta a ser un contenedor de columna flexible */
    #cardsView .card {
        flex-direction: column !important;
        height: auto !important;
        /* Altura automática para que quepa todo el contenido */
    }

    /* Hacemos que cada columna ocupe el 100% del ancho */
    #cardsView .card .card-column {
        width: 100% !important;
        /* Reseteamos padding y alineaciones para que se vea bien en vertical */
        padding: 10px 15px !important;
        text-align: left !important;
        display: block !important;
    }

    /* Ajustes específicos para las columnas en móvil */
    #cardsView .card .card-column:first-child {
        height: 180px;
        /* Mantenemos la altura de la imagen */
        padding: 0 !important;
        /* Quitamos padding a la imagen */
    }

    #cardsView .card .card-column h4 {
        font-size: 1.2em;
        /* Título un poco más grande */
    }

    /* Ocultamos la columna que solo era un espaciador en escritorio */
    #cardsView .card .card-column:nth-child(3) {
        display: none !important;
    }

    /* Ajustes para la columna del botón */
    #cardsView .card .card-column:last-child {
        padding: 0px 15px 15px 15px !important;
        /* Padding solo abajo */
    }

    #cardsView .card .card-column .wp-block-button__link,
    #cardsView .card .card-column .wp-element-button {
        display: block !important;
        /* Hacemos que el botón ocupe todo el ancho */
        width: 100% !important;
        text-align: center !important;
        margin-top: 5px !important;
        box-sizing: border-box !important;
    }
}

/* --- ESTILOS PARA LA VISTA BY BOAT (REDESIGN) --- */
.boat-group {
    animation: fadeIn 0.3s ease-in;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Left Column Styles */
.boat-info-left {
    box-sizing: border-box;
}

.boat-info-left h3 a {
    text-decoration: none;
    color: #333;
    transition: color 0.2s;
}

.boat-info-left h3 a:hover {
    color: #0073aa;
}

/* Right Column Table Styles */
.boat-dates-table th {
    font-weight: 600;
    letter-spacing: 0.5px;
}

.boat-dates-table td {
    font-size: 14px;
}

.boat-dates-table tbody tr:last-child {
    border-bottom: none !important;
}

.boat-dates-table tbody tr:hover {
    background-color: #f9f9f9;
}

/* Inquire Button Style */
.gnlavail-inquire-btn {
    display: inline-block;
    background-color: #e67e22;
    /* Orange/Brown color */
    color: white !important;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px !important;
    /* Reduced font size */
    line-height: 1.2;
    text-align: center;
    transition: background-color 0.2s;
    font-weight: bold;
}

.gnlavail-inquire-btn:hover {
    background-color: #d35400;
    color: white !important;
}

/* Responsividad para vista By Boat */
@media (max-width: 1024px) {
    .boat-group>div {
        flex-direction: column !important;
    }

    .boat-info-left {
        width: 100% !important;
        min-width: 100% !important;
        border-right: none !important;
        border-bottom: none !important;
        flex-direction: row !important;
        /* Horizontal layout on tablet */
        align-items: center;
        padding: 15px !important;
    }

    .boat-info-left>div:first-child {
        /* Image container */
        width: 200px !important;
        height: 120px !important;
        margin-right: 20px;
    }

    .boat-dates-right {
        padding: 0 !important;
    }
}

@media (max-width: 768px) {
    .boat-info-left {
        flex-direction: column !important;
        /* Stack on mobile */
        text-align: center;
    }

    .boat-info-left>div:first-child {
        width: 100% !important;
        height: 180px !important;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .boat-dates-table thead {
        display: none;
    }

    .boat-dates-table tbody tr {
        display: flex;
        flex-direction: column;
        padding: 15px;
        border-bottom: none !important;
    }

    .boat-dates-table tbody td {
        display: block;
        text-align: left !important;
        padding: 5px 0 !important;
        border: none !important;
        width: 100%;
    }

    /* Add labels for mobile */
    .boat-dates-table tbody td:nth-child(2):before {
        content: "Itinerary: ";
        font-weight: bold;
        color: #777;
    }

    .boat-dates-table tbody td:nth-child(3):before {
        content: "Price: ";
        font-weight: bold;
        color: #777;
    }

    .boat-dates-table tbody td:last-child {
        margin-top: 10px;
        text-align: center !important;
    }

    .gnlavail-inquire-btn {
        display: block;
        width: 100%;
        padding: 10px;
    }
}

/* Ajustes visuales adicionales para By Boat */
.boat-info-left img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 8px;
}

/* Month Badge Style */
.boat-dates-table .month-badge {
    display: inline-block;
    background-color: #ff66cc;
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
    border-radius: 4px;
    font-size: 13px;
}

/* Square Book Now Button */
.gnlavail-book-btn-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #8bc34a;
    /* Green color */
    color: white !important;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 4px;
    line-height: 1.2;
    font-size: 14px;
    width: 100px;
    height: 80px;
    transition: background-color 0.3s;
}

.gnlavail-book-btn-square:hover {
    background-color: #7cb342;
    color: white !important;
    text-decoration: none;
}

/* Reduce general padding and font-size for By Boat table to make it more compact */
.boat-dates-right {
    padding: 12px !important;
}

.boat-dates-table {
    font-size: 14px;
    border: none !important;
}

.boat-dates-table th,
.boat-dates-table td,
.boat-dates-table tr {
    padding: 10px !important;
    border: none !important;
}

/* Prevent accidental duplicated images: ensure only left column shows images */
.boat-dates-table img {
    display: none !important;
}

/* - - - BY BOAT VIEW SPECIFIC STYLES - - - */

/* Remove borders from the table in By Boat view */
.boat-dates-right .gnlavail-search-results table,
.boat-dates-right .gnlavail-search-results table th,
.boat-dates-right .gnlavail-search-results table td,
.boat-dates-right .gnlavail-search-results table tr {
    border: none !important;
}

/* Header styles for By Boat view (White background, dark text) */
.boat-dates-right .gnlavail-search-results table thead th {
    background-color: white !important;
    color: #333 !important;
    font-weight: bold;
    border: none !important;
}

/* Ensure no shadows or other border-like effects */
.boat-dates-right .gnlavail-search-results table {
    box-shadow: none !important;
}