/* BFT_INTL_PHONE_V3_20260917 */
.iti{width:100%!important;display:block!important}
.iti input[type="tel"]{width:100%!important}
.iti__selected-country{background:#f7f7f7!important;border-right:1px solid #d9d9dc!important}
.iti__selected-country-primary{padding-left:11px!important;padding-right:10px!important}
.iti__selected-dial-code{margin-left:6px!important;color:#222!important;font-weight:700!important}
.iti__dropdown-content{background:#fff!important;color:#171717!important;border:1px solid #d9d9dc!important;border-radius:10px!important;overflow:hidden;box-shadow:0 10px 32px rgba(0,0,0,.14)!important}
.iti__search-input{background:#fff!important;color:#171717!important}
.iti__country{color:#171717!important}
.iti__country:hover,.iti__country.iti__highlight{background:#f2f3f5!important}
#bookingModal .iti{width:100%!important}
#bookingModal .iti input{min-height:48px!important}
#bookingModal .iti__selected-country{border-radius:10px 0 0 10px!important}
.manage-phone-field .iti{width:100%!important}
.manage-phone-field .iti input{height:38px!important}
.manage-phone-field .iti__selected-country{border-radius:8px 0 0 8px!important}
@media(max-width:560px){
  .iti__selected-country-primary{padding-left:8px!important;padding-right:8px!important}
  .iti__selected-dial-code{margin-left:4px!important;font-size:12px!important}
}


/* ============================================================
   BFT PHONE UI FIX
   2026-09-17
   ============================================================ */

/*
 * IMPORTANTE:
 * NO definimos padding-left del teléfono aquí.
 * Se calcula dinámicamente con JS según:
 *
 * 🇲🇽 +52
 * 🇪🇸 +34
 * 🇭🇺 +36
 * etc.
 */

#bookingModal #bookWhatsapp,
.manage-phone-field #manageWhatsapp {
    padding-right:12px !important;
}


/* ------------------------------------------------------------
   SELECTOR / DROPDOWN
   ------------------------------------------------------------ */

#bookingModal .iti__dropdown-content {
    width:410px !important;
    max-width:calc(100vw - 40px) !important;
    max-height:350px !important;

    border-radius:10px !important;
    overflow:hidden !important;
}

.manage-phone-field .iti__dropdown-content {
    width:390px !important;
    max-width:calc(100vw - 32px) !important;
    max-height:350px !important;

    border-radius:10px !important;
    overflow:hidden !important;
}


/* ------------------------------------------------------------
   SEARCH
   ------------------------------------------------------------ */

#bookingModal .iti__search-input-wrapper,
.manage-phone-field .iti__search-input-wrapper {
    position:relative !important;

    padding:8px !important;

    background:#fff !important;

    border-bottom:
        1px solid #e5e5e5 !important;
}


/*
 * Dejamos espacio real para:
 *
 * lupa                  X
 *  ↓                    ↓
 * [  Search............. ]
 */
#bookingModal .iti__search-input,
.manage-phone-field .iti__search-input {

    display:block !important;

    width:100% !important;

    height:40px !important;
    min-height:40px !important;

    margin:0 !important;

    padding:
        8px
        38px
        8px
        40px !important;

    box-sizing:border-box !important;

    border:
        1px solid #d6d6d6 !important;

    border-radius:8px !important;

    background:#fff !important;
    color:#171717 !important;

    font-size:14px !important;
    line-height:1.2 !important;

    box-shadow:none !important;
}


/* lupa */
#bookingModal .iti__search-icon,
.manage-phone-field .iti__search-icon {

    position:absolute !important;

    left:20px !important;
    top:50% !important;

    transform:
        translateY(-50%) !important;

    z-index:3 !important;

    display:flex !important;
    align-items:center !important;

    pointer-events:none !important;
}


/* botón X del buscador */
#bookingModal .iti__search-clear,
.manage-phone-field .iti__search-clear {

    position:absolute !important;

    right:17px !important;
    top:50% !important;

    transform:
        translateY(-50%) !important;

    z-index:3 !important;
}


/* ------------------------------------------------------------
   LISTA DE PAISES
   ------------------------------------------------------------ */

#bookingModal .iti__country-list,
.manage-phone-field .iti__country-list {

    max-height:255px !important;
}


#bookingModal .iti__country,
.manage-phone-field .iti__country {

    min-height:40px !important;

    padding:
        7px
        12px !important;

    font-size:14px !important;
    line-height:1.25 !important;
}


#bookingModal .iti__country-name,
.manage-phone-field .iti__country-name {

    font-size:14px !important;
}


#bookingModal .iti__dial-code,
.manage-phone-field .iti__dial-code {

    font-size:13px !important;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media(max-width:600px) {

    #bookingModal .iti__dropdown-content,
    .manage-phone-field .iti__dropdown-content {

        width:
            calc(100vw - 32px) !important;

        max-width:
            calc(100vw - 32px) !important;
    }


    #bookingModal .iti__country-list,
    .manage-phone-field .iti__country-list {

        max-height:230px !important;
    }
}

/* ============================================================
   BFT SEARCH ICON FINAL FIX
   2026-09-17
   ============================================================ */

/*
 * Estas reglas son globales dentro de intl-tel-input
 * para evitar que estilos generales del formulario
 * sobrescriban el espacio reservado a la lupa.
 */

.iti__search-input-wrapper {
    position: relative !important;
}

.iti__search-input {
    padding-left: 52px !important;
    padding-right: 38px !important;
    text-indent: 0 !important;
}

/* lupa */
.iti__search-icon {
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 20px !important;
    height: 20px !important;

    margin: 0 !important;
    z-index: 5 !important;

    pointer-events: none !important;
}

.iti__search-icon svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
}

/* X para borrar búsqueda, cuando aparezca */
.iti__search-clear {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 5 !important;
}

/* ============================================================
   BFT SEARCH SPECIFICITY FIX
   2026-09-17
   ============================================================ */

/*
 * Debe superar:
 *
 * #bookingModal .form-group input { ... !important }
 *
 * Por eso añadimos .form-group + .iti.
 */

#bookingModal .form-group .iti .iti__search-input {
    padding-top: 8px !important;
    padding-right: 38px !important;
    padding-bottom: 8px !important;
    padding-left: 52px !important;

    text-indent: 0 !important;
}

/* posición exacta de la lupa */
#bookingModal .form-group .iti .iti__search-icon {
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Gestionar reserva */
.manage-phone-field .iti .iti__search-input {
    padding-top: 8px !important;
    padding-right: 38px !important;
    padding-bottom: 8px !important;
    padding-left: 52px !important;

    text-indent: 0 !important;
}

.manage-phone-field .iti .iti__search-icon {
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* ============================================================
   BFT PHONE INPUT INTERACTION FIX
   2026-09-17
   ============================================================ */

#bookingModal .form-group .iti #bookWhatsapp,
.manage-phone-field .iti #manageWhatsapp {
    pointer-events: auto !important;
    cursor: text !important;
    position: relative !important;
    z-index: 0 !important;
}
