/* ==========================================================================
   Seletor de DDI (bandeira) + máscara nos campos de telefone (intl-tel-input)
   Encaixa o widget no visual dos formulários do site (.frelo-form).
   ========================================================================== */

/* O wrapper do intl-tel-input ocupa a largura do campo. */
.frelo-form .iti { display: block; width: 100%; }
.frelo-form .iti input[type="tel"] { width: 100%; }

/* Área da bandeira + DDI, encaixada na borda arredondada do campo. */
.frelo-form .iti--separate-dial-code .iti__selected-flag {
	background: transparent;
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
	padding-left: 14px;
}
.frelo-form .iti__selected-flag:hover,
.frelo-form .iti__selected-flag:focus { background: rgba( 0, 0, 0, .035 ); }
.frelo-form .iti--separate-dial-code .iti__selected-dial-code {
	color: var( --in-ink );
	font-size: 1rem;
	margin-left: 8px;
}
.frelo-form .iti__arrow { margin-left: 8px; border-top-color: #9a9aa2; }
.frelo-form .iti__arrow--up { border-bottom-color: #9a9aa2; }

/* Dropdown da lista de países no visual do site.
   A lista é filha do `.iti__flag-container` (absoluto, ~88px) e abre a partir
   da borda esquerda do campo; por padrão ela assumia a largura "natural" do
   conteúdo (nomes longos) e estourava o modal, causando rolagem horizontal.
   Fixamos uma largura confortável que cabe dentro do modal (campo ~384px no
   modal de 440px) e nunca ultrapassa a viewport em telas pequenas.
   Itens em flex + nome quebrando garantem que nada estoure na horizontal. */
.frelo-form .iti__country-list {
	width: min( 320px, calc( 100vw - 84px ) );
	box-sizing: border-box;
	border: 1.5px solid var( --in-line, #e0e0e5 );
	border-radius: 12px;
	box-shadow: 0 16px 44px rgba( 0, 0, 0, .14 );
	padding: 6px;
	margin-top: 6px;
	background: #fff;
	max-height: 264px;
	overflow-x: hidden;
}
.frelo-form .iti__country {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 10px;
	border-radius: 8px;
	font-size: .95rem;
	white-space: normal;
}
.frelo-form .iti__country .iti__flag-box { flex: 0 0 auto; }
.frelo-form .iti__country .iti__country-name { flex: 1 1 auto; min-width: 0; }
.frelo-form .iti__country .iti__dial-code { flex: 0 0 auto; margin-left: auto; }
.frelo-form .iti__country.iti__highlight { background: var( --in-red-50, #fdeaec ); }
.frelo-form .iti__dial-code { color: var( --in-muted ); }
.frelo-form .iti__divider { margin: 6px 0; border-color: var( --in-line, #ececf0 ); }

/* A bandeira/DDI selecionados ficam SEMPRE acima do input (que tem fundo
   branco opaco e vem depois no DOM) — inclusive com o campo focado. */
.frelo-form .iti__flag-container { z-index: 2; }