/* ==========================================================
   INTERNATIONAL PHONE FIELD — DPC
   Bandera + prefijo + selector internacional
   ========================================================== */


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

.iti {
    width: 100% !important;
    display: block !important;
    position: relative !important;
}


/* ==========================================================
   INPUT
   ========================================================== */

.iti input[type="tel"],
.iti input#form-field-telefone {
    width: 100% !important;

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

    margin: 0 !important;

    padding-left: 100px !important;
    padding-right: 14px !important;

    box-sizing: border-box !important;

    background: rgba(255,255,255,0.08) !important;

    color: #FFFFFF !important;

    border: 1px solid rgba(255,255,255,0.16) !important;
    border-radius: 8px !important;

    font-family: inherit !important;

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

    font-weight: 500 !important;

    box-shadow: none !important;

    transition:
        border-color 0.20s ease,
        box-shadow 0.20s ease,
        background-color 0.20s ease !important;
}


/* ==========================================================
   PLACEHOLDER
   ========================================================== */

.iti input[type="tel"]::placeholder,
.iti input#form-field-telefone::placeholder {
    color: rgba(255,255,255,0.38) !important;

    opacity: 1 !important;

    font-family: inherit !important;
    font-weight: 500 !important;
}


/* ==========================================================
   BANDERA + PREFIJO
   ========================================================== */

.iti__country-container {
    display: flex !important;

    z-index: 5 !important;
}


.iti__selected-country {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;

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

    padding: 0 !important;

    box-sizing: border-box !important;

    background: rgba(255,255,255,0.045) !important;

    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,0.12) !important;

    border-radius: 8px 0 0 8px !important;

    font-family: inherit !important;
}


.iti__selected-country-primary {
    height: 50px !important;
    min-height: 50px !important;

    padding-left: 9px !important;
    padding-right: 5px !important;

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

    background: transparent !important;

    border-radius: 8px 0 0 8px !important;
}


.iti__selected-country-primary:hover {
    background: rgba(255,255,255,0.07) !important;
}


.iti__selected-dial-code {
    margin-left: 5px !important;

    color: rgba(255,255,255,0.94) !important;

    font-family: inherit !important;

    font-size: 12px !important;
    line-height: 1 !important;

    font-weight: 700 !important;
}


.iti__arrow {
    margin-left: 3px !important;
}


/* ==========================================================
   FOCUS
   ========================================================== */

.iti:focus-within
input[type="tel"]:not(.dpc-phone-invalid) {
    border-color: rgba(226,199,120,0.80) !important;

    background: rgba(255,255,255,0.10) !important;

    box-shadow:
        0 0 0 3px rgba(226,199,120,0.12) !important;
}


/* ==========================================================
   DROPDOWN
   IMPORTANTE:
   NO forzamos position:absolute.
   Dejamos que intl-tel-input controle la posición.
   ========================================================== */

.iti__dropdown-content {
    background: #12243A !important;

    border: 1px solid rgba(226,199,120,0.18) !important;
    border-radius: 11px !important;

    box-shadow:
        0 22px 50px rgba(3,10,20,0.42),
        0 5px 15px rgba(3,10,20,0.22) !important;

    font-family: inherit !important;
}


/* ==========================================================
   BUSCADOR
   ========================================================== */

.iti__search-wrapper {
    padding: 8px !important;

    background: #12243A !important;

    border-bottom:
        1px solid rgba(255,255,255,0.08) !important;
}


.iti__search-input {
    width: 100% !important;

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

    margin: 0 !important;

    padding: 0 12px !important;

    box-sizing: border-box !important;

    background: rgba(255,255,255,0.07) !important;

    border: 1px solid rgba(255,255,255,0.13) !important;
    border-radius: 8px !important;

    color: #FFFFFF !important;

    font-family: inherit !important;

    font-size: 13px !important;

    box-shadow: none !important;
}


.iti__search-input:focus {
    outline: none !important;

    border-color: rgba(226,199,120,0.70) !important;

    box-shadow:
        0 0 0 2px rgba(226,199,120,0.10) !important;
}


.iti__search-input::placeholder {
    color: rgba(255,255,255,0.42) !important;
    opacity: 1 !important;
}


/* Quitamos la lupa que nos estaba molestando */

.iti__search-icon {
    display: none !important;
}


/* ==========================================================
   LISTA DE PAÍSES
   ========================================================== */

.iti__country-list {
    margin: 0 !important;

    padding: 5px !important;

    background: #12243A !important;
}


.iti__country {
    min-height: 38px !important;

    padding: 6px 8px !important;

    border-radius: 7px !important;

    color: rgba(255,255,255,0.84) !important;

    font-family: inherit !important;

    font-size: 13px !important;
    line-height: 1.35 !important;

    font-weight: 400 !important;
}


.iti__country:hover,
.iti__country.iti__highlight {
    background: rgba(255,255,255,0.075) !important;

    color: #FFFFFF !important;
}


.iti__country-name {
    color: rgba(255,255,255,0.90) !important;

    font-weight: 500 !important;
}


.iti__dial-code {
    margin-left: 4px !important;

    color: rgba(255,255,255,0.50) !important;

    font-size: 12px !important;
}


.iti__country[aria-selected="true"] {
    background: rgba(226,199,120,0.11) !important;
}


.iti__country[aria-selected="true"]
.iti__country-name {
    color: #FFFFFF !important;

    font-weight: 700 !important;
}


.iti__country[aria-selected="true"]
.iti__dial-code {
    color: #E2C778 !important;
}


/* ==========================================================
   ERROR
   ========================================================== */

.dpc-phone-error {
    display: none;

    margin-top: 7px;

    color: #FFB4AD !important;

    font-family: inherit !important;

    font-size: 12px !important;
    line-height: 1.45 !important;

    font-weight: 600 !important;
}


.dpc-phone-error.is-visible {
    display: block !important;
}


.iti input.dpc-phone-invalid {
    border-color: #E56359 !important;

    box-shadow:
        0 0 0 3px rgba(229,99,89,0.12) !important;
}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 767px) {

    .iti {
        width: 100% !important;
    }


    .iti input[type="tel"],
    .iti input#form-field-telefone {
        height: 50px !important;
        min-height: 50px !important;

        padding-left: 96px !important;
        padding-right: 14px !important;

        font-size: 16px !important;
    }


    .iti__selected-country {
        width: 86px !important;
        min-width: 86px !important;
        max-width: 86px !important;
    }


    .iti__selected-country-primary {
        padding-left: 8px !important;
        padding-right: 4px !important;
    }


    .iti__selected-dial-code {
        margin-left: 4px !important;

        font-size: 12px !important;
    }


    .dpc-phone-error {
        margin-top: 6px;

        font-size: 12px !important;
    }
}

/* ==========================================================
   FIX DEFINITIVO BUSCADOR DE PAÍSES
   ========================================================== */

.iti__search-wrapper {
    background: #12243A !important;
    padding: 8px !important;
}

input.iti__search-input,
.iti__search-input {
    display: block !important;
    width: 100% !important;

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

    margin: 0 !important;
    padding: 0 12px !important;

    box-sizing: border-box !important;

    background: #182D45 !important;
    background-color: #182D45 !important;
    background-image: none !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    border: 1px solid rgba(226,199,120,0.30) !important;
    border-radius: 7px !important;

    outline: none !important;
    box-shadow: none !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}

input.iti__search-input:focus,
.iti__search-input:focus {
    background: #1C344E !important;
    background-color: #1C344E !important;

    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;

    border-color: #E2C778 !important;

    outline: none !important;

    box-shadow:
        0 0 0 2px rgba(226,199,120,0.12) !important;
}

input.iti__search-input::placeholder,
.iti__search-input::placeholder {
    color: rgba(255,255,255,0.55) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.55) !important;
    opacity: 1 !important;
}

.iti__search-icon {
    display: none !important;
}