/**
 * neobookings.css
 * Máscara de reservas principal - layout, campos, labels, botones y overlay móvil.
 * Diseño inspirado en la barra de reservas de Alda Hotels, adaptado a la paleta Cabau Hotels.
 *
 * Breakpoints:
 *   - Desktop        : > 922px  (barra horizontal flotante con fondo semi-transparente verde)
 *   - Tablet/Móvil   : ≤ 922px  (overlay a pantalla completa)
 *   - Móvil pequeño  : ≤ 544px  (ajustes de espaciado y botón full-width)
 *
 * Variables CSS inyectadas por PHP:
 *   --neo-primary   : #3e5250   verde-gris, color principal (equivale al negro de Alda)
 *   --neo-accent    : #d8a39d   rosa/tierra, iconos
 *   --neo-dark      : #1E1810   marrón oscuro
 *   --neo-neutral   : #62615C   gris, texto secundario
 *   --neo-bg        : #F8F7F3   crema, fondo de página
 *
 * NOTA: Este archivo NO incluye estilos para:
 *   - Popup de ocupación  → guests.css
 *   - Dropdown selector de hotel → hotel-selector.css
 *   - Calendario / litepicker → calendars.css
 */


/* ==========================================================================
   UTILIDADES GLOBALES
   ========================================================================== */

.d-none {
    display: none !important;
}


/* ==========================================================================
   WRAPPER PRINCIPAL
   ========================================================================== */

.neobookings-mask-wrapper {
    margin-inline: auto;
    width: 100%;
    background: none;
    padding: 0;
    border-radius: 0;
    font-family: inherit;
    box-sizing: border-box;
}

.neobookings-mask-wrapper *,
.neobookings-mask-wrapper *::before,
.neobookings-mask-wrapper *::after {
    box-sizing: inherit;
}


/* ==========================================================================
   FORMULARIO - BARRA HORIZONTAL DESKTOP (> 922px)
   ========================================================================== */

.neobookings-mask {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: var(--neo-background, #fff);
    border-radius: 3.25rem;
    padding: 8px 24px;
    overflow: visible;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}


/* ==========================================================================
   STICKY MASK — Barra fija inferior al hacer scroll
   ========================================================================== */

.sticky-mask {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--neo-background, #fff);
    z-index: 100;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}

/* Cuando el form está dentro del sticky, centrar y quitar sombra propia */
.sticky-mask .neobookings-mask {
    margin: 0 auto;
    box-shadow: none;
    border-radius: 0;
}

/* Cuando el form está dentro del sticky, el wrapper queda vacío y no debe ocupar espacio */
.sticky-mask:empty {
    display: none;
}


/* ==========================================================================
   BOTÓN CERRAR - oculto en desktop
   ========================================================================== */

.neobookings-mask__close {
    display: none !important;
}

/* Botones cerrar de popups (calendario y huéspedes) — ocultos en desktop */
.popup-close {
    display: none !important;
}


/* ==========================================================================
   CAMPOS DE LA MÁSCARA
   ========================================================================== */

.neobookings-mask__field {
    position: relative;
    padding: 9px 30px 9px 5px;
    margin: 15px 7px;
    flex: 1 1 0;

    /* Subrayado verde en lugar del borde derecho del diseño anterior */
    border-bottom: 1px solid var(--neo-primary, #3e5250);
    min-width: 0;
}

/* Campos con popups: necesitan overflow visible */
.neobookings-mask__field--occupancy,
.neobookings-mask__field--hotel,
.neobookings-mask__field--dates {
    overflow: visible;
}

/* Campo submit: solo contenedor, el borde va en el botón */
.neobookings-mask__field--submit {
    flex: none;
    border: none;
    margin-left: 7px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}


/* ==========================================================================
   ICONOS — Pseudo-elementos ::after en cada campo (estilo Alda)
   ========================================================================== */

.neobookings-mask__field::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 7px;
    width: 17px;
    height: 17px;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0.5;
}

/* Icono hotel: cama */
.neobookings-mask__field--hotel::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e5250' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7v11'/%3E%3Cpath d='M21 7v11'/%3E%3Cpath d='M3 18h18'/%3E%3Cpath d='M3 11h18'/%3E%3Cpath d='M5 11V7h14v4'/%3E%3Ccircle cx='8' cy='9' r='1'/%3E%3C/svg%3E");
}

/* Icono fechas: calendario */
.neobookings-mask__field--dates::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e5250' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

/* Icono ocupación: personas */
.neobookings-mask__field--occupancy::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e5250' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M2.5 21v-2a5.5 5.5 0 0 1 11 0v2'/%3E%3Ccircle cx='19' cy='10' r='3'/%3E%3Cpath d='M15 21v-1.5a4 4 0 0 1 8 0V21'/%3E%3C/svg%3E");
    width: 20px;
    height: 20px;
}

/* Icono promo: regalo */
.neobookings-mask__field--promo::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e5250' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E");
    width: 20px;
    height: 20px;
}

/* Submit: sin icono */
.neobookings-mask__field--submit::after {
    display: none;
}


/* ==========================================================================
   CONTROLES DE FORMULARIO (inputs y displays tipo input)
   Reset de estilos Elementor Kit que afectan a todos los inputs de la página
   ========================================================================== */

/* Reset forzado: Elementor Kit aplica estilos globales a todos los inputs
   con alta especificidad (.elementor-kit-XX input:not(...)). Usamos !important
   para garantizar que la máscara use sus propios estilos. */
.neobookings-mask input,
.neobookings-mask textarea,
.neobookings-mask select,
.neobookings-mask .form-control {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-radius: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    padding: 0 28px 0 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: #1E1810 !important;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}


.neobookings-mask input:focus,
.neobookings-mask textarea:focus,
.neobookings-mask select:focus,
.neobookings-mask .form-control:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* Reset forzado para botones: Elementor Kit también aplica estilos globales
   a button y [type="button"] (background, border, padding, font, etc.)
   Excluimos los botones propios de la máscara y del popup de huéspedes */
.neobookings-mask button:not(.btn--style-a):not(.btn--style-b):not(.neobookings-mask__submit):not(.neo-open-mask):not(.neobookings-mask__close):not(.popup-close),
.neobookings-mask-wrapper button:not(.btn--style-a):not(.btn--style-b):not(.neobookings-mask__submit):not(.neo-open-mask):not(.neobookings-mask__close):not(.popup-close) {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: inherit !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Placeholder de los inputs */
.neobookings-mask .form-control::placeholder {
    color: var(--neo-neutral, #62615C);
    opacity: 0.7;
}

/* Display del selector de hotel */
.neobookings-mask .hotel-selector__display {
    cursor: pointer;
}

/* Display del campo de ocupación */
.neobookings-mask .guestsfake {
    cursor: pointer;
}


/* ==========================================================================
   BOTÓN SUBMIT
   ========================================================================== */

/* Estilos base del botón submit (no-!important, aplicados sobre el reset) */
.neobookings-mask__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s ease, background 0.2s ease;
}

/* Re-aplicar estilos propios del botón submit DESPUÉS del reset con !important */
.neobookings-mask__submit {
    background: var(--neo-primary, #3e5250) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 2.25rem !important;
    padding: 8px 35px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    line-height: 1.4 !important;
}

.neobookings-mask__submit:hover {
    opacity: 0.88 !important;
}

.neobookings-mask__submit:active {
    opacity: 0.75 !important;
    box-shadow: none !important;
}


/* ==========================================================================
   BOTÓN "ABRIR MÁSCARA" - oculto en desktop
   ========================================================================== */

/* Re-aplicar estilos del botón móvil "abrir máscara" */
.neo-open-mask {
    background: var(--neo-primary, #3e5250) !important;
    border-color: var(--neo-primary, #3e5250) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    display: none;
}


/* ==========================================================================
   TABLET Y MÓVIL (≤ 922px)
   ========================================================================== */

@media (max-width: 922px) {

    /* En móvil el wrapper no necesita posicionamiento absoluto */
    .neobookings-mask-wrapper {
        position: static;
        background: transparent;
        padding: 0;
        border-radius: 0;
        width: 100%;
        max-width: 100%;
    }

    /* Sticky mask oculto en móvil */
    .sticky-mask {
        display: none !important;
    }

    /* Formulario oculto por defecto en móvil */
    .neobookings-mask {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 1001;
        background: var(--neo-background, #fff);
        border-radius: 0;
        padding-inline: 0;
        overflow-y: auto;
        align-items: center;
        padding-top: 60px; /* espacio para el botón cerrar */
    }

    /* Overlay activo */
    .neobookings-mask.open {
        display: flex;
    }

    /* Campos en columna, con icono a la derecha en la misma línea */
    .neobookings-mask__field {
        width: 80%;
        border-bottom: 1px solid #e0e0e0;
        border-top: none;
        border-left: none;
        border-right: none;
        padding: 16px 30px 16px 0;
        margin: 0;
        position: relative;
        /* Evitar que el campo se expanda verticalmente en el flex-column */
        flex: 0 0 auto;
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    .neobookings-mask__field--occupancy,
    .neobookings-mask__field--hotel,
    .neobookings-mask__field--dates {
        overflow: visible;
    }

    /* Controles: texto a la izquierda, ancho completo
       font-size: 16px obligatorio para evitar el zoom automático de iOS Safari
       cuando se hace tap sobre un input con font-size menor */
    .neobookings-mask input,
    .neobookings-mask textarea,
    .neobookings-mask select,
    .neobookings-mask .form-control {
        width: 100% !important;
        text-align: left !important;
        font-size: 16px !important;
    }

    /* Iconos ::after se mantienen a la derecha */
    .neobookings-mask__field::after {
        right: 5px !important;
    }

    /* Campo submit: sin borde, centrado */
    .neobookings-mask__field--submit {
        border: none;
        width: 80%;
        margin: 20px 0 10px;
        padding: 0;
        display: flex;
        justify-content: center;
    }

    /* Botón submit: no full-width, estilo pill como Alda */
    .neobookings-mask__submit {
        width: auto !important;
        padding: 12px 48px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border-radius: 2.25rem !important;
        letter-spacing: 0.3px !important;
    }

    /* Botón cerrar visible en móvil */
    .neobookings-mask__close {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 14px !important;
        right: 16px !important;
        width: 44px !important;
        height: 44px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        font-size: 28px !important;
        line-height: 1 !important;
        color: var(--neo-dark, #1E1810) !important;
        cursor: pointer;
        z-index: 10;
        transition: opacity 0.15s ease;
    }

    .neobookings-mask__close:hover {
        opacity: 0.6 !important;
    }

    /* Botones cerrar de popups (calendario y huéspedes) — visibles en móvil */
    .popup-close {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        width: 40px !important;
        height: 40px !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        font-size: 28px !important;
        line-height: 1 !important;
        color: var(--neo-dark, #1E1810) !important;
        cursor: pointer !important;
        z-index: 10 !important;
    }

    .popup-close:hover {
        opacity: 0.6 !important;
    }

    /* Botón "abrir máscara" fijo en la parte inferior */
    .neo-open-mask {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background: var(--neo-primary, #3e5250) !important;
        color: #fff !important;
        border: none;
        font-size: 16px !important;
        font-weight: 600 !important;
        font-family: inherit;
        letter-spacing: 0.3px !important;
        cursor: pointer;
        z-index: 1000;
        transition: opacity 0.2s ease;
    }

    .neo-open-mask:hover {
        opacity: 0.92;
    }

}


/* ==========================================================================
   MÓVIL PEQUEÑO (≤ 544px)
   ========================================================================== */

@media (max-width: 544px) {

    .neobookings-mask__field {
        width: 85%;
        padding: 16px 0;
    }

    .neobookings-mask__field--submit {
        width: 85%;
        margin: 10px 0 28px;
    }

    /* Botón submit full-width con radio ligeramente menor en pantallas muy pequeñas */
    .neobookings-mask__submit {
        width: 100% !important;
        border-radius: 28px !important;
        padding: 14px 20px !important;
    }

    .neobookings-mask__label {
        font-size: 10px;
    }

}