/**
 * Camada reutilizável de formulários BRACCA (multi-step, erros inline, senha,
 * país→UF, contador). Estrutura/comportamento; cores e inputs base vêm do
 * design system. Tudo ancorado em .brc-app (regra de encapsulamento).
 *
 * Consumido por: Bracac_Core_Form + assets/forms.js. Ver docs/padrao-formularios.md.
 */

/* ---- Selects: pílula com chevron próprio ----------------------------- */
.brc-app select.brc-input {
	min-height: 48px;
	line-height: 1.4;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-right: 44px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23191919' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 18px center;
}

/* ---- Erro inline / hint / contador ---------------------------------- */
.brc-app .brc-field__hint {
	margin: 6px 0 0;
	font-size: 12px;
	color: var( --brc-muted, #4d4d4d );
}
.brc-app .brc-field__error {
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: var( --brc-danger, #d64545 );
}
.brc-app .brc-field--error .brc-input {
	border-color: var( --brc-danger, #d64545 );
	background: var( --brc-danger-bg, #fdecea );
}
.brc-app .brc-field--error .brc-input:focus {
	box-shadow: 0 0 0 3px rgba( 214, 69, 69, 0.15 );
}
.brc-app .brc-field__counter {
	margin: 6px 0 0;
	font-size: 12px;
	color: var( --brc-muted, #4d4d4d );
	text-align: right;
}
.brc-app .brc-field__counter.is-over { color: var( --brc-danger, #d64545 ); }

/* ---- Senha: botão mostrar/ocultar + medidor de força ---------------- */
.brc-app .brc-pass { position: relative; }
.brc-app .brc-pass .brc-input { padding-right: 44px; }
.brc-app .brc-pass__toggle {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var( --brc-muted, #4d4d4d );
	cursor: pointer;
	border-radius: var( --brc-radius-xs, 8px );
}
.brc-app .brc-pass__toggle:hover { color: var( --brc-navy, #1d3260 ); }
.brc-app .brc-pass__toggle:focus-visible { outline: 2px solid var( --brc-blue, #00aeef ); outline-offset: -2px; }

.brc-app .brc-strength { margin: 8px 0 0; }
.brc-app .brc-strength__bar {
	height: 6px;
	border-radius: 999px;
	background: var( --brc-line, #e6e6e6 );
	overflow: hidden;
}
.brc-app .brc-strength__fill {
	height: 100%;
	width: 100%;
	border-radius: 999px;
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform 0.2s ease, background-color 0.2s ease;
	background: var( --brc-danger, #d64545 );
}
.brc-app .brc-strength[data-level="2"] .brc-strength__fill { transform: scaleX( 0.5 ); background: var( --brc-yellow, #fcb030 ); }
.brc-app .brc-strength[data-level="3"] .brc-strength__fill { transform: scaleX( 0.75 ); background: var( --brc-blue, #00aeef ); }
.brc-app .brc-strength[data-level="4"] .brc-strength__fill { transform: scaleX( 1 ); background: var( --brc-success, #009444 ); }
.brc-app .brc-strength[data-level="1"] .brc-strength__fill { transform: scaleX( 0.25 ); }
.brc-app .brc-strength__label {
	margin: 5px 0 0;
	font-size: 12px;
	color: var( --brc-muted, #4d4d4d );
}

/* ---- Telefone com bandeira + país ----------------------------------- */
.brc-app .brc-phone { position: relative; display: flex; gap: 8px; align-items: stretch; }
.brc-app .brc-phone__num { flex: 1; min-width: 0; }
.brc-app .brc-phone__country {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 0 10px;
	border: 1px solid var( --brc-line, #e6e6e6 );
	border-radius: var( --brc-radius-xs, 8px );
	background: var( --brc-surface, #f4f4f4 );
	color: var( --brc-ink, #191919 );
	cursor: pointer;
	min-height: 46px;
	font: inherit;
}
.brc-app .brc-phone__country:hover { border-color: var( --brc-blue, #00aeef ); }
.brc-app .brc-phone__country:focus-visible { outline: 2px solid var( --brc-blue, #00aeef ); outline-offset: -2px; }
.brc-app .brc-phone__flag { width: 22px; height: 16px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.08 ); }
.brc-app .brc-phone__dial { font-size: 14px; font-weight: 600; color: var( --brc-navy, #1d3260 ); }
.brc-app .brc-phone__caret { font-size: 10px; color: var( --brc-muted, #4d4d4d ); }

.brc-app .brc-phone__menu {
	position: absolute;
	z-index: 30;
	top: calc( 100% + 4px );
	left: 0;
	width: 320px;
	max-width: 90vw;
	background: #fff;
	border: 1px solid var( --brc-line, #e6e6e6 );
	border-radius: var( --brc-radius-sm, 10px );
	box-shadow: var( --brc-shadow-2, 0 18px 50px rgba( 20, 34, 65, 0.18 ) );
	padding: 8px;
}
.brc-app .brc-phone__search { margin-bottom: 6px; }
.brc-app .brc-phone__list { max-height: 240px; overflow-y: auto; }
.brc-app .brc-phone__opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	cursor: pointer;
	border-radius: 6px;
	font-size: 14px;
}
.brc-app .brc-phone__opt:hover { background: var( --brc-surface, #f4f4f4 ); }
.brc-app .brc-phone__optname { flex: 1; min-width: 0; }
.brc-app .brc-phone__optdial { color: var( --brc-muted, #4d4d4d ); }

/* ---- País: combobox com busca (progressive enhancement) ------------- */
.brc-app .brc-combo { position: relative; }
.brc-app .brc-combo__menu {
	position: absolute;
	z-index: 30;
	left: 0;
	right: 0;
	top: calc( 100% + 4px );
	max-height: 260px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var( --brc-line, #e6e6e6 );
	border-radius: var( --brc-radius-sm, 10px );
	box-shadow: var( --brc-shadow-2, 0 18px 50px rgba( 20, 34, 65, 0.18 ) );
}
.brc-app .brc-combo__opt {
	padding: 10px 14px;
	cursor: pointer;
	font-size: var( --brc-fs-2, 15px );
}
.brc-app .brc-combo__opt:hover,
.brc-app .brc-combo__opt.is-active {
	background: var( --brc-surface, #f4f4f4 );
	color: var( --brc-navy, #1d3260 );
}
.brc-app .brc-combo__empty { padding: 10px 14px; color: var( --brc-muted, #4d4d4d ); font-size: 13px; }

/* ---- Multi-step: stepper de círculos numerados + navegação -----------
   Design (Figma): concluído = círculo verde com check branco (rótulo verde);
   atual = círculo preto com número branco (rótulo preto); futuro = círculo
   cinza com número preto (rótulo cinza). Divisor fino abaixo. */
.brc-app .brc-steps {
	margin: 0 0 var( --brc-sp-5, 24px );
	padding-bottom: var( --brc-sp-5, 24px );
	border-bottom: 1px solid var( --brc-line, #e6e6e6 );
}
.brc-app .brc-steps__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.brc-app .brc-steps__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 500;
	color: var( --brc-gray, #808080 );
}
.brc-app .brc-steps__item.is-current { color: var( --brc-black, #000000 ); }
.brc-app .brc-steps__item.is-done { color: var( --brc-green, #009444 ); }
.brc-app .brc-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: var( --brc-line, #e6e6e6 );
	color: var( --brc-black, #000000 );
	font-size: 13px;
	font-weight: 500;
	background-repeat: no-repeat;
	background-position: center;
}
.brc-app .brc-steps__item.is-current .brc-steps__num {
	background-color: var( --brc-black, #000000 );
	color: #ffffff;
}
.brc-app .brc-steps__item.is-done .brc-steps__num {
	background-color: var( --brc-green, #009444 );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E" );
}
.brc-app .brc-steps__item.is-done .brc-steps__n { visibility: hidden; }

/* Passos: só um visível quando o JS está ativo. */
.brc-app form[data-brc-form] .brc-step[hidden] { display: none; }
.brc-app .brc-step__nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: var( --brc-sp-5, 24px );
}
.brc-app .brc-step__nav .brc-btn { min-width: 120px; }
.brc-app .brc-step__nav--end { justify-content: flex-end; }

/* Sem JS: stepper escondido e botões de navegação não aparecem. */
.brc-app form:not(.is-stepped) .brc-steps,
.brc-app form:not(.is-stepped) .brc-step__nav { display: none; }

/* ---- Mobile ---------------------------------------------------------- */
@media ( max-width: 640px ) {
	.brc-app .brc-input,
	.brc-app .brc-btn { min-height: 48px; } /* alvo de toque */
	.brc-app .brc-input { font-size: 16px; } /* evita zoom automático do iOS */
	.brc-app form.is-stepped .brc-step__nav {
		position: sticky;
		bottom: 0;
		background: var( --brc-bg, #fff );
		padding: 12px 0;
		margin-top: var( --brc-sp-4, 16px );
		box-shadow: 0 -6px 16px rgba( 20, 34, 65, 0.06 );
	}
	.brc-app .brc-step__nav .brc-btn { flex: 1; min-width: 0; }
	.brc-app .brc-steps__label { display: none; } /* no mobile, só os círculos */
	.brc-app .brc-steps__list { gap: 8px 12px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.brc-app .brc-strength__fill { transition: none; }
}