/* ============================================================
   KIINVA — Estilos globales
   ============================================================ */

/* Select sin flecha nativa del navegador */
.select-bare {
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
}

.select-bare.placeholder {
    font-weight: 400;
    color: #9CA3AF;
}

/* ---- Cotizador: campo de búsqueda ---- */
.field-box {
    background: white;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    position: relative;
}
.field-box:hover,
.field-box:focus-within {
    border-color: #00967D;
    box-shadow: 0 0 0 3px rgba(0, 150, 125, 0.1);
}
.field-box label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B7280;
    margin-bottom: 4px;
}
.field-box select,
.field-box input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    padding: 0;
}
.field-box select option { color: #111827; }

/* ---- Panel de pasajeros ---- */
#pax-field { position: relative; z-index: 30; }
#pax-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    /* En móvil el campo "Viajeros" ocupa el ancho completo (grid de 1
       columna): anclar a la izquierda mantiene el panel dentro de la
       tarjeta. En desktop es la última columna de un grid de 4, así que
       anclar a la derecha evita que el panel se desborde por fuera del
       formulario hacia la derecha. */
    left: 0;
    background-color: #ffffff;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    z-index: 100;
    width: 280px;
    max-width: calc(100vw - 32px);
    /* Fuerza su propia capa de composición GPU opaca: sin esto, el fondo
       blanco puede pintarse "por debajo" de elementos con backdrop/opacidad
       cercanos (ej. los trust-badges), dejando ver su texto mezclado encima
       aunque el z-index y el elemento clickeable ya sean correctos. */
    transform: translateZ(0);
    backface-visibility: hidden;
}
@media (min-width: 768px) {
    #pax-panel {
        left: auto;
        right: 0;
    }
}
#pax-panel.open { display: block; }

/* NO darle z-index/isolation propio a .trust-badges: crear un stacking
   context aquí (con position+z-index) hace que compita como bloque contra
   el dropdown de origen/destino en el stacking context raíz de la página,
   y al venir después en el DOM terminaba ganando pese al z-index:50 del
   dropdown — por eso los clics en esa franja le llegaban a los badges en
   vez de al dropdown. Sin position/z-index, .trust-badges no genera su
   propio contexto y el z-index del dropdown se compara correctamente. */

/* El formulario entero SÍ necesita su propio stacking context: sin esto,
   el navegador puede componer #pax-panel (pese a su z-index:100 y su capa
   GPU propia) por DEBAJO de .trust-badges en el árbol de pintura real,
   dejando ver el texto/fondo de las tarjetas "Precio fijo/Puntualidad/
   Equipaje" mezclado a través del panel. Confirmado con Playwright
   (elementsFromPoint) que sin esto el <p> de trust-badges gana el hit-test
   en la zona inferior del panel pese al z-index de sus ancestros. */
#search-form { position: relative; z-index: 10; }

/* ---- Flatpickr inline ---- */
.flatpickr-calendar.inline {
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
}
.flatpickr-rContainer { width: 100%; }
.flatpickr-days { width: 100% !important; }
.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* ---- Modal de fecha ---- */
#date-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
}
#date-modal.open { display: flex; }
#date-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
}
#date-modal-box {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 24px;
    width: 360px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

/* ---- Dropdown custom (origen/destino cotizador) ---- */
.dropdown-panel {
    min-width: 220px;
    max-height: 360px;
    /* Sin overflow:hidden, el contenido interno (buscador + lista) que supera
       los 360px se desborda visualmente fuera de esta caja: se ve encima de
       lo que sigue en la página, pero los clics en esa zona desbordada NO
       los recibe este panel — le llegan al elemento real de más abajo en el
       DOM (ej. los trust-badges), que parecía "robarse" el clic del dropdown. */
    overflow: hidden;
    background-color: #ffffff;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.dropdown-options-list {
    max-height: 280px;
    overflow-y: auto;
    /* Fondo propio explícito: al tener overflow-y:auto este elemento puede
       componerse en su propia capa de GPU, y sin un background-color propio
       (dependiendo solo de heredarlo visualmente del padre) el contenido de
       la página detrás se llega a "filtrar" a través en algunos navegadores. */
    background-color: #ffffff;
}
.dropdown-option {
    background-color: #ffffff;
}

/* ---- Botones tipo de viaje ---- */
.tipo-btn {
    border-color: #E5E7EB;
    color: #6B7280;
    background: white;
    cursor: pointer;
}
.tipo-btn:hover {
    border-color: #00967D;
    color: #00967D;
    background: #E6F5F2;
}
.tipo-btn.active {
    border-color: #00967D;
    color: #00967D;
    background: #E6F5F2;
    font-weight: 700;
}

/* ---- Modal de fecha regreso ---- */
#date-modal-regreso {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
}
#date-modal-regreso.open { display: flex; }
#date-modal-regreso-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
}
#date-modal-regreso-box {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 24px;
    width: 360px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

/* ---- Botones qty pasajeros ---- */
.qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #D1D5DB;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: all 0.15s;
    color: #374151;
    background: white;
    -webkit-user-select: none;
    user-select: none;
}
.qty-btn:hover:not(:disabled) {
    border-color: #00967D;
    color: #00967D;
}
.qty-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ---- Flatpickr: tema personalizado ---- */
.flatpickr-calendar {
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid #e5e7eb !important;
    font-family: inherit !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #00967D !important;
    border-color: #00967D !important;
}
.flatpickr-day:hover {
    background: #E6F5F2 !important;
}
.flatpickr-months .flatpickr-month { color: #111827 !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-weight: 700 !important;
    font-size: 1rem !important;
}
.flatpickr-weekday {
    color: #6B7280 !important;
    font-weight: 600 !important;
}
.flatpickr-day.today { border-color: #00967D !important; }