/* =========================
   CSS INTL-TEL-INPUT CUSTOMIZADO
   Arquivo: intl-tel.css
   Diretório: ativerma\inicio\cadastrar\intl-tel.css
========================= */

/* =========================
   INTL-TEL-INPUT CUSTOMIZADO
========================= */

/* Container principal */
.floating-label .iti {
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

/* Garantir que o dropdown ocupe toda a largura do container */
.floating-label .iti--container {
    width: 100% !important;
}

/* Remover bordas e backgrounds do plugin */
.floating-label .iti__flag-container {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: 2 !important;
    border: none !important;
    background: transparent !important;
}

.floating-label .iti__selected-flag {
    padding: 0 8px 0 14px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
}

/* Estados do input */
.floating-label input[type="tel"]:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Dropdown de países */
.iti__country-list {
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    max-height: 200px !important;
    border: 1px solid #e5e7eb !important;
    margin-top: 4px !important;
    z-index: 10000 !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
}

.iti__country {
    padding: 10px 14px !important;
    transition: all 0.2s ease !important;
}

.iti__country:hover {
    background-color: rgba(22, 114, 216, 0.05) !important;
}

.iti__country.iti__highlight {
    background-color: rgba(22, 114, 216, 0.1) !important;
}

/* Países preferidos (fixos no topo) */
.iti__country.iti__preferred {
    background-color: rgba(22, 114, 216, 0.03) !important;
    font-weight: 500 !important;
}

.iti__country.iti__preferred:hover {
    background-color: rgba(22, 114, 216, 0.08) !important;
}

/* Linha divisória entre preferidos e resto */
.iti__divider {
    border-bottom: 2px solid #1672d8 !important;
    margin: 4px 0 !important;
    padding-bottom: 4px !important;
}

/* Scrollbar customizada do dropdown de países */
.iti__country-list::-webkit-scrollbar {
    width: 8px !important;
}

.iti__country-list::-webkit-scrollbar-track {
    background: #e9ecef !important;
    border-radius: 10px !important;
}

.iti__country-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1672d8, #1363bd) !important;
    border-radius: 10px !important;
}

.iti__country-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #1363bd, #0d5ca8) !important;
}

.iti__country-list {
    scrollbar-width: thin !important;
    scrollbar-color: #1672d8 #e9ecef !important;
}

.iti__selected-flag:hover,
.iti__selected-flag:focus {
    background-color: transparent !important;
}

/* Seta do dropdown */
.iti__arrow {
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid #6B7280 !important;
    margin-left: 6px !important;
    transition: all 0.2s ease !important;
}

.iti__selected-flag:hover .iti__arrow,
.iti__selected-flag:focus .iti__arrow {
    border-top-color: #1672d8 !important;
}

/* Dial code (DDI) */
.iti__selected-dial-code {
    font-size: 0.95rem !important;
    color: #374151 !important;
    margin-left: 6px !important;
    font-weight: 500 !important;
}

/* Ajuste fino da label */
.floating-label label {
    pointer-events: none !important;
}

/* Label posicionado após o flag container quando não focado/vazio */
.floating-label:has(input[type="tel"]) label {
    left: 70px !important;
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                left 0s 0.2s !important; /* left muda DEPOIS da opacidade (delay de 0.2s) */
}

/* Quando focado ou com valor, label sobe e volta para a esquerda padrão */
.floating-label.has-value:has(input[type="tel"]) label,
.floating-label.is-focused:has(input[type="tel"]) label {
    left: 14px !important;
    top: -9px !important;
    transform: translateY(0) !important;
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                font-size 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                left 0s !important; /* left muda instantaneamente quando ativa */
}

/* Input tel SEMPRE com padding à esquerda (para não ficar atrás da bandeira) */
.floating-label input[type="tel"] {
    padding-left: 95px !important;
}

/* Ajuste do padding superior quando tem valor ou está focado (para o label flutuante) */
.floating-label.has-value input[type="tel"],
.floating-label.is-focused input[type="tel"] {
    padding-top: 1.25rem !important;
    padding-bottom: 0.9rem !important;
}