/**
 * =====================================================================================
 * FILE: /css/site_boat_rental.css
 * MODULE: Yachts & Boat Rentals
 * TYPE: Stylesheet
 *
 * PROPÓSITO:
 * Definir los estilos visuales específicos para la página pública Yachts & Boat Rentals.
 *
 * RESPONSABILIDADES:
 * - Controlar el grid responsive de cards.
 * - Estilizar cards, imágenes, badges, textos y estados de carga.
 * - Mantener la presentación independiente del HTML generado por el backend.
 * - Garantizar que la modal de botes (modal_bote.php) SIEMPRE esté por encima
 *   de cualquier menú fijo o sticky del sitio.
 *
 * DEPENDE DE:
 * - /css/estilos_generales.css
 * - Bootstrap 5.3.8
 *
 * REGLAS IMPORTANTES:
 * - No contiene JavaScript.
 * - No contiene lógica PHP.
 * - No modifica lógica del sistema.
 * - Mantiene el scope del módulo bajo clases site-boat-rental.
 * - Solo ajusta z-index global para corregir stacking context del menú.
 *
 * PROBLEMA RESUELTO:
 * - El menú principal tenía mayor prioridad visual que la modal.
 * - Se corrige elevando modal + backdrop y bajando menús SOLO cuando la modal está activa.
 *
 * CREATED: 2026-04-24
 * UPDATED: 2026-04-29
 * VERSION: 2.0.0
 * AUTHOR: Fernando A. Peón / Weeket WebMaster
 * =====================================================================================
 */

/* =====================================================================================
   VARIABLES DEL MÓDULO
   ===================================================================================== */

:root {
    --site-boat-rental-primary: #005BAB;
    --site-boat-rental-secondary: #F8981D;
    --site-boat-rental-card-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    --site-boat-rental-card-radius: 14px;
}

/* =====================================================================================
   CONTENEDOR GENERAL
   ===================================================================================== */

.site-boat-rental-page {
    margin-top: 30px;
}

/* =====================================================================================
   GRID RESPONSIVE
   ===================================================================================== */

.site-boat-rental-cards-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 1400px) {
    .site-boat-rental-cards-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

@media (min-width: 768px) and (max-width: 1399px) {
    .site-boat-rental-cards-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 0 30px;
    }
}

@media (max-width: 767px) {
    .site-boat-rental-cards-grid {
        grid-template-columns: 1fr;
        padding: 10px 20px;
    }
}

/* =====================================================================================
   LOADER
   ===================================================================================== */

.site-boat-rental-loading {
    display: none;
    text-align: center;
    padding: 20px;
}

/* =====================================================================================
   CARD LINK
   ===================================================================================== */

.site-boat-rental-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

.site-boat-rental-card-link:hover {
    color: inherit;
    text-decoration: none;
}

/* =====================================================================================
   CARD
   ===================================================================================== */

.site-boat-rental-card {
    background: #fff;
    border-radius: var(--site-boat-rental-card-radius);
    overflow: hidden;
    transition: 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.site-boat-rental-card:hover {
    box-shadow: var(--site-boat-rental-card-hover-shadow);
}

/* =====================================================================================
   IMAGEN
   ===================================================================================== */

.site-boat-rental-img-box {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
    background: #f5f5f5;
}

.site-boat-rental-img-box img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* =====================================================================================
   BADGE
   ===================================================================================== */

.site-boat-rental-badge {
    position: absolute;
    top: 10px;
    left: 6px;
    color: #fff;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

/* =====================================================================================
   BODY CARD
   ===================================================================================== */

.site-boat-rental-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* =====================================================================================
   TEXTOS
   ===================================================================================== */

.site-boat-rental-category {
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    color: #555;
    text-transform: uppercase;
    font-weight: 700;
}

.site-boat-rental-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    color: #111;
}

.site-boat-rental-subtitle,
.site-boat-rental-city {
    font-size: 0.86rem;
    color: #555;
    line-height: 1.35;
}

/* =====================================================================================
   CORRECCIÓN GLOBAL DE STACKING (MODAL SOBRE MENÚ)
   ===================================================================================== */

/*
 * Problema:
 * El menú usa position fixed + z-index alto o crea stacking context (transform).
 * Esto hace que Bootstrap modal quede por debajo.
 *
 * Solución robusta:
 * - Elevar modal y backdrop por encima de TODO el sitio.
 * - Reducir z-index de menús SOLO cuando la modal está activa.
 */

/* Backdrop */
body.modal-open .modal-backdrop,
.modal-backdrop.show {
    z-index: 999998 !important;
}

/* Modal general */
body.modal-open .modal,
.modal.show {
    z-index: 999999 !important;
}

/* Modal específica de botes */
body.modal-open #modal_bote,
body.modal-open #modalBote,
body.modal-open #ModalBote {
    z-index: 1000000 !important;
}

/* Dialog interno */
body.modal-open #modal_bote .modal-dialog,
body.modal-open #modalBote .modal-dialog,
body.modal-open #ModalBote .modal-dialog {
    z-index: 1000001 !important;
}

/* Bajar cualquier menú SOLO cuando hay modal abierta */
body.modal-open header,
body.modal-open nav,
body.modal-open .navbar,
body.modal-open .menu,
body.modal-open .menu-site,
body.modal-open .site-menu,
body.modal-open .menu-pc-tablet,
body.modal-open .menu-mobile,
body.modal-open #menu,
body.modal-open #menu_pc,
body.modal-open #menu_mobile {
    z-index: 1000 !important;
}