/* Encaixe do intl-tel-input no layout dos formulários. */
.iti {
	width: 100%;
}

.iti input.form-control {
	width: 100%;
}

/* Dropdown de países (renderizado no body) acima de outros elementos. */
.iti__dropdown-content,
.iti--container {
	z-index: 1100;
}

/*
 * Mantém o texto de acessibilidade (nome do país lido por leitores de tela)
 * sempre oculto. Sem isto, regras globais de span de alguns formulários
 * (ex.: ".float-form label span") o tornavam visível ("Brasil" ao lado da bandeira).
 */
.iti .iti__a11y-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	white-space: nowrap;
}

/*
 * Ajustes específicos dos formulários .float-form (estilo M&M): a regra global
 * ".float-form label span { position: absolute; ... }" (label flutuante) interfere
 * no componente. Aqui corrigimos largura, o rótulo "Celular*" e o código "+55".
 */
.float-form .iti {
	width: 400px;
	max-width: 100%;
}

.float-form label:has(.iti) > span:first-of-type {
	position: static !important;
	display: block;
	opacity: 1 !important;
	left: auto !important;
	top: auto !important;
	margin: 0 0 4px 0;
}

.float-form .iti .iti__selected-dial-code {
	position: static !important;
	left: auto !important;
	top: auto !important;
	font-size: inherit !important;
	color: inherit !important;
	text-transform: none !important;
}