/* ==========================================================================
   Motor de Reservas (Desktop y Sticky)
   ========================================================================== */

/* --- Estilos Generales Compartidos --- */
.booking-field {
    display: flex;
    flex-direction: column;
    color: #ffffff;
}

.booking-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.booking-input {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 0.25rem;
    font-size: 0.875rem; /* text-sm */
    color: #ffffff;
    width: 100%;
}

.booking-input:focus {
    outline: none;
}

.appearance-none {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.text-black { color: #000000; }

.booking-btn {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    font-size: 0.75rem; /* text-xs */
    width: 100%;
    border-radius: 0.75rem; /* rounded-xl */
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- Formulario Desktop --- */
.booking-desktop-wrapper {
    display: none; /* hidden en móvil */
}

@media (min-width: 768px) {
    .booking-desktop-wrapper {
        display: block; /* md:block */
        width: 100%;
        max-width: 72rem; /* max-w-6xl */
        margin-left: auto;
        margin-right: auto;
        background-color: rgba(0, 68, 165, 0.8); /* md:bg-[#0044a5]/80 */
        backdrop-filter: blur(24px); /* md:backdrop-blur-xl */
        -webkit-backdrop-filter: blur(24px);
        border: 1px solid rgba(255, 255, 255, 0.2); /* md:border-white/20 */
        border-radius: 1.5rem; /* md:rounded-3xl */
        padding: 1.5rem; /* md:p-6 */
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* md:shadow-2xl */
    }
}

.booking-form-desktop {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: flex-end;
}

@media (min-width: 768px) {
    .booking-form-desktop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .booking-form-desktop { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

.col-span-2-md-1 { grid-column: span 2 / span 2; }
@media (min-width: 768px) { .col-span-2-md-1 { grid-column: span 1 / span 1; } }

.col-span-2-md-3-lg-1 { grid-column: span 2 / span 2; }
@media (min-width: 768px) { .col-span-2-md-3-lg-1 { grid-column: span 3 / span 3; } }
@media (min-width: 1024px) { .col-span-2-md-3-lg-1 { grid-column: span 1 / span 1; } }

.booking-btn-desktop {
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
}

@media (min-width: 768px) {
    .booking-btn-desktop {
        background-color: #ffffff;
        color: #0044a5;
    }
}

/* --- Formulario Sticky (Flotante) --- */
.booking-sticky-wrapper {
    position: fixed;
    bottom: 5rem; /* bottom-20 */
    left: 1rem; /* left-4 */
    width: 55%; /* w-[55%] */
    max-width: 220px; /* max-w-[220px] */
    background-color: #0044a5; /* bg-[#0044a5] */
    border: 1px solid rgba(255, 255, 255, 0.2); /* border-white/20 */
    border-radius: 1.5rem; /* rounded-3xl */
    padding: 0.75rem; /* p-3 */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
    z-index: 900;
    display: flex;
    flex-direction: column;
    transition: all 500ms cubic-bezier(0, 0, 0.2, 1);
    
    /* Estado Oculto (Por defecto) */
    transform: translateY(5rem); /* translate-y-20 */
    opacity: 0;
    pointer-events: none;
}

@media (min-width: 768px) {
    .booking-sticky-wrapper {
        bottom: 2rem; /* md:bottom-8 */
        width: 90%; /* md:w-[90%] */
        max-width: 350px; /* md:max-w-[350px] */
        background-color: rgba(0, 68, 165, 0.9); /* md:bg-[#0044a5]/90 */
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        padding: 1rem; /* md:p-4 */
    }
}

/* --- Clases de Estado Controladas por JS --- */
.booking-sticky-wrapper.is-visible {
    transform: translateY(0); /* translate-y-0 */
    opacity: 1;
    pointer-events: auto;
}

.booking-sticky-wrapper.is-expanded {
    left: 50%; /* left-1/2 */
    transform: translateX(-50%); /* -translate-x-1/2 */
    width: 95%; /* w-[95%] */
    max-width: 72rem; /* max-w-6xl */
}

/* --- Elementos Internos Sticky --- */
.booking-toggle-btn {
    display: flex;
    width: 100%;
    color: #ffffff;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    background: transparent;
    border: none;
    cursor: pointer;
}

.booking-toggle-btn:focus { outline: none; }

.booking-icon {
    width: 1.25rem; /* w-5 */
    height: 1.25rem;
    transition: transform 300ms ease;
}

.booking-icon.rotate-180 { transform: rotate(180deg); }

.booking-sticky-container {
    overflow-y: auto;
    transition: all 500ms ease;
    
    /* Estado Contraído */
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    margin-top: 0;
}

.booking-sticky-container.is-expanded {
    /* Estado Expandido */
    max-height: 75vh;
    opacity: 1;
    pointer-events: auto;
    margin-top: 1rem; /* mt-4 */
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar { display: none; }

.booking-form-sticky {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.25rem; /* gap-5 */
    align-items: flex-end;
    padding-top: 1.5rem; /* pt-6 */
    padding-bottom: 0.5rem; /* pb-2 */
}

@media (min-width: 640px) {
    .booking-form-sticky { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .booking-form-sticky { 
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 1rem; /* lg:gap-4 */
    }
}

.sticky-input { padding-bottom: 0.375rem; }
.sticky-input:focus { border-bottom-color: #ffffff; }

.booking-btn-sticky {
    background-color: #1a1a1a;
    color: #ffffff;
    border: 1px solid transparent;
    padding: 0.875rem 1.5rem; /* py-3.5 px-6 */
    margin-top: 0.5rem; /* mt-2 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.col-span-full-lg-2 { grid-column: 1 / -1; }

@media (min-width: 768px) {
    .booking-btn-sticky {
        background-color: #ffffff;
        color: #0044a5;
        border-color: #ffffff;
        box-shadow: none;
    }
    .booking-btn-sticky:hover { background-color: #f3f4f6; }
}
@media (min-width: 1024px) {
    .booking-btn-sticky { margin-top: 0; }
    .col-span-full-lg-2 { grid-column: span 2 / span 2; }
}
.booking-btn-sticky:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff;
}
/* Reemplaza la clase "appearance-none" para quitar el estilo por defecto a los select */
.booking-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* color: #000; Esto reemplaza a "text-black" en las opciones */
}

/* Opciones del select en negro (reemplaza a text-black) */
.booking-input option {
    color: #000;
}

/* Animación y rotación del icono del botón toggle (reemplaza a "rotate-180") */
.booking-icon {
    transition: transform 0.3s ease;
}

/* Agrega esta clase mediante JavaScript cuando el menú se expanda */
.booking-icon.is-open {
    transform: rotate(180deg);
}

/* Layout básico para el formulario de escritorio (reemplaza a col-span...) */
.booking-form-desktop {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    align-items: end;
}