/**
 * Autotrac — Bitrix24 CRM Form skin
 *
 * Reutilizável: envolva o embed em `.autotrac-b24-form` (ou carregue só nessa página).
 * Força o chrome transparente e os campos no visual do site; mantém floating labels
 * e a animação nativa do Bitrix (não sobrescreve top / transform / font-size / transition).
 *
 * Tokens alinhados a themes/autotrac/style.css (:root + inputs / .btn).
 */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

.autotrac-b24-form {
	/* Site tokens (locais ao escopo — landings não carregam style.css do tema) */
	--at-branco: #ffffff;
	--at-texto: #595959;
	--at-texto-forte: #1a1a1a;
	--at-borda-campo: rgba(2, 70, 99, 0.4);
	--at-primaria: #007caf;
	--at-primaria-hover: #024663;
	--at-secundaria: #b1cc3d;
	--at-erro: #be2020;
	--at-radius: 2rem;
	--at-fonte: 'Open Sans', Helvetica, Arial, sans-serif;
	--at-sombra-campo: 0 2px 0 rgba(0, 0, 0, 0.1);

	/* Preferência Bitrix (quando o form consome as vars) */
	--b24-background-color: transparent !important;
	--b24-popup-background-color: var(--at-branco) !important;
	--b24-text-color: var(--at-texto-forte) !important;
	--b24-field-background-color: var(--at-branco) !important;
	--b24-field-focus-background-color: var(--at-branco) !important;
	--b24-field-border-color: var(--at-borda-campo) !important;
	--b24-primary-color: var(--at-primaria) !important;
	--b24-primary-hover-color: var(--at-primaria-hover) !important;
	--b24-primary-text-color: var(--at-branco) !important;
	--b24-font-family: var(--at-fonte) !important;
	--b24-font-family-default: var(--at-fonte) !important;

	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.autotrac-b24-form *,
.autotrac-b24-form *::before,
.autotrac-b24-form *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Chrome do form: transparente, sem moldura / sombra / barra azul / margens
 * ---------------------------------------------------------------------- */

.autotrac-b24-form .b24-form,
.autotrac-b24-form .b24-form-style-classic,
.autotrac-b24-form .b24-form-wrapper,
.autotrac-b24-form .b24-form-content,
.autotrac-b24-form .b24-form-inner-box {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

.autotrac-b24-form .b24-form-wrapper,
.autotrac-b24-form .b24-form-wrapper.b24-form-border-bottom,
.autotrac-b24-form .b24-form-border-bottom {
	border: none !important;
	border-width: 0 !important;
	border-bottom: none !important;
	border-radius: 0 !important;
	outline: none !important;
}

.autotrac-b24-form .b24-form-header-padding {
	display: none !important;
	height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

.autotrac-b24-form .b24-form .b24-form-padding-side,
.autotrac-b24-form .b24-form .b24-form-content.b24-form-padding-side,
.autotrac-b24-form .b24-form-content.b24-form-padding-side {
	padding: 0 !important;
	padding-top: 0 !important;
	padding-right: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 0 !important;
}

.autotrac-b24-form .b24-form-header,
.autotrac-b24-form .b24-form-header-title,
.autotrac-b24-form .b24-form-header-description {
	display: none !important;
}

/* Rodapé Bitrix (“Relatar abuso” / branding) */
.autotrac-b24-form .b24-form-sign {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Campos — visual Autotrac; altura/padding vertical próximos do Bitrix
 * para não desalinear a floating label nativa.
 * ---------------------------------------------------------------------- */

.autotrac-b24-form .b24-form-field {
	margin: 0 0 1rem !important;
	width: 100% !important;
}

.autotrac-b24-form .b24-form-control-container {
	margin: 0 !important;
	width: 100% !important;
}

.autotrac-b24-form .b24-form-control-string .b24-form-control,
.autotrac-b24-form .b24-form-control-text .b24-form-control,
.autotrac-b24-form .b24-form-control-list .b24-form-control,
.autotrac-b24-form .b24-form-control-select .field-item,
.autotrac-b24-form input.b24-form-control,
.autotrac-b24-form textarea.b24-form-control,
.autotrac-b24-form select.b24-form-control {
	width: 100% !important;
	height: 52px !important;
	min-height: 52px !important;
	/* top padding preserva espaço da label flutuante Bitrix */
	padding: 17px 1.5rem 0 !important;
	border: 1px solid var(--at-borda-campo) !important;
	border-radius: var(--at-radius) !important;
	background-color: var(--at-branco) !important;
	box-shadow: var(--at-sombra-campo) !important;
	font-family: var(--at-fonte) !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--at-texto) !important;
	outline: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}

.autotrac-b24-form .b24-form-control-text .b24-form-control,
.autotrac-b24-form textarea.b24-form-control {
	height: auto !important;
	min-height: 8rem !important;
	padding: 1.75rem 1.5rem 1rem !important;
	border-radius: 1rem !important;
	resize: vertical !important;
}

.autotrac-b24-form .b24-form-control-string .b24-form-control:focus,
.autotrac-b24-form .b24-form-control-text .b24-form-control:focus,
.autotrac-b24-form .b24-form-control-list .b24-form-control:focus,
.autotrac-b24-form .b24-form-control-select .field-item:focus,
.autotrac-b24-form input.b24-form-control:focus,
.autotrac-b24-form textarea.b24-form-control:focus,
.autotrac-b24-form select.b24-form-control:focus {
	border-color: var(--at-primaria) !important;
	background-color: var(--at-branco) !important;
	box-shadow: var(--at-sombra-campo) !important;
	outline: none !important;
}

/* List / select (dropdown Bitrix) */
.autotrac-b24-form .b24-form-control-list .b24-form-control-container::after {
	right: 1.25rem !important;
}

/* Options: só o container aberto — .b24-form-dropdown vazio ficava como faixa branca no layout */
.autotrac-b24-form .b24-form-dropdown:not(:has(.b24-form-dropdown-container)) {
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

.autotrac-b24-form .b24-form-dropdown:has(.b24-form-dropdown-container) {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: visible !important;
}

.autotrac-b24-form .b24-form-dropdown-container {
	padding: 0 0 !important;
	border-radius: 1rem !important;
	overflow: hidden !important;
	background: var(--at-branco) !important;
	box-shadow: 0 1rem 2rem -0.75rem rgba(9, 9, 9, 0.25) !important;
}

.autotrac-b24-form .b24-form-control-list-selector-item,
.autotrac-b24-form .b24-form-dropdown .b24-form-control-list-selector-item {
	display: flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	padding: 0.75rem 1.25rem !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
}

.autotrac-b24-form .b24-form-control-list-selector-item-title,
.autotrac-b24-form .b24-form-control-list-selector-item-title span {
	font-family: var(--at-fonte) !important;
	font-size: 1rem !important;
	line-height: 1.35 !important;
	color: var(--at-texto-forte) !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Ícone X (limpar select/data) — #jb * zera margin/padding e desloca o cruzamento para cima */
.autotrac-b24-form .b24-form-icon-remove,
.autotrac-b24-form .b24-form-icon-after.b24-form-icon-remove {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	width: 2.25rem !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer !important;
}

.autotrac-b24-form .b24-form-icon-remove::before,
.autotrac-b24-form .b24-form-icon-remove::after,
.autotrac-b24-form .b24-form-icon-after.b24-form-icon-remove::before,
.autotrac-b24-form .b24-form-icon-after.b24-form-icon-remove::after {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 2px !important;
	height: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 1px !important;
	background: var(--at-texto-forte) !important;
	display: block !important;
}

.autotrac-b24-form .b24-form-icon-remove::before,
.autotrac-b24-form .b24-form-icon-after.b24-form-icon-remove::before {
	transform: translate(-50%, -50%) rotate(45deg) !important;
}

.autotrac-b24-form .b24-form-icon-remove::after,
.autotrac-b24-form .b24-form-icon-after.b24-form-icon-remove::after {
	transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* Date picker (vuejs-datepicker / .vdp*) — mesmo reset #jb * zera paddings */
.autotrac-b24-form .b24-form-dropdown-container:has(.vdpComponent) {
	padding: 0.05rem !important;
}

.autotrac-b24-form .vdpComponent,
.autotrac-b24-form .vdpOuterWrap,
.autotrac-b24-form .vdpInnerWrap,
.autotrac-b24-form .vdpHeader,
.autotrac-b24-form .vdpTable,
.autotrac-b24-form .vdpHeadCell,
.autotrac-b24-form .vdpHeadCellContent,
.autotrac-b24-form .vdpCell,
.autotrac-b24-form .vdpCellContent,
.autotrac-b24-form .vdpPeriodControls,
.autotrac-b24-form .vdpPeriodControl,
.autotrac-b24-form .vdpPeriodControl button,
.autotrac-b24-form .vdpPeriodControl select,
.autotrac-b24-form .vdpArrow,
.autotrac-b24-form .b24-form-dropdown-header,
.autotrac-b24-form .b24-form-dropdown-title {
	font-family: var(--at-fonte) !important;
	color: var(--at-texto-forte) !important;
}

.autotrac-b24-form .vdpArrow {
	height: 100% !important;
}

.autotrac-b24-form .vdpOuterWrap,
.autotrac-b24-form .vdpInnerWrap {
	border-radius: 1rem !important;
	overflow: hidden !important;
	background: var(--at-branco) !important;
	box-shadow: none !important;
	border: none !important;
}

.autotrac-b24-form .vdpHeader {
	padding: 0 0.5rem !important;
	margin: 0 !important;
}

.autotrac-b24-form .vdpPeriodControls {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.35rem !important;
	padding: 0.25rem 0 !important;
}

.autotrac-b24-form .vdpPeriodControl button {
	font-family: var(--at-fonte) !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	padding: 0.55rem 0.75rem !important;
	margin: 0 !important;
	border-radius: 0.5rem !important;
	color: var(--at-texto-forte) !important;
}

.autotrac-b24-form .vdpArrow {
	padding: 0.5rem !important;
	background: transparent !important;
	background-color: transparent !important;
}

.autotrac-b24-form .vdpArrow:hover,
.autotrac-b24-form .vdpArrow:focus,
.autotrac-b24-form .vdpArrow:active {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

.autotrac-b24-form .vdpArrow::after {
	transform: translate(-50%, -50%) !important;
}
.autotrac-b24-form .vdpArrow::before {
	display: none !important;
}


.autotrac-b24-form .vdpTable {
	width: 100% !important;
	border-collapse: collapse !important;
	table-layout: fixed !important;
}

.autotrac-b24-form .vdpHeadCell,
.autotrac-b24-form .vdpCell {
	padding: 0.2rem !important;
	text-align: center !important;
	vertical-align: middle !important;
}

.autotrac-b24-form .vdpHeadCellContent {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	padding: 0.35rem 0 !important;
	font-family: var(--at-fonte) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	text-align: center !important;
	color: var(--at-texto) !important;
}

.autotrac-b24-form .vdpCellContent {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2.25rem !important;
	height: 2.25rem !important;
	margin: 0 auto !important;
	padding: 0 !important;
	font-family: var(--at-fonte) !important;
	font-size: 0.9rem !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	text-align: center !important;
	box-sizing: border-box !important;
}

.autotrac-b24-form .b24-form-dropdown-header {
	padding: 0.75rem 1rem 0.35rem !important;
}

.autotrac-b24-form .b24-form-dropdown-title {
	font-family: var(--at-fonte) !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	padding: 0.25rem 0 !important;
}

/* -------------------------------------------------------------------------
 * Floating labels — só tipografia/cor; posição e animação ficam no Bitrix
 * (resting ~top:26px / floated ~top:8px + font-size 15→13 + transition 0.18s)
 * ---------------------------------------------------------------------- */

.autotrac-b24-form .b24-form-control-label,
.autotrac-b24-form .b24-form-control-select-label {
	font-family: var(--at-fonte) !important;
	font-weight: 500 !important;
	color: var(--at-texto) !important;
	opacity: 1 !important;
	/* alinhamento horizontal com o padding do input; sem mexer em top/transform */
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	background: transparent !important;
	pointer-events: none !important;
}

/* Select/list: label em repouso centralizado no eixo vertical do campo */
.autotrac-b24-form .b24-form-field-list .b24-form-control-label,
.autotrac-b24-form .b24-form-control-list .b24-form-control-label {
	top: 50% !important;
	transform: translateY(-50%) !important;
	line-height: 1.2 !important;
}

/* Select/list: estado flutuante (foco / valor) — mantém animação Bitrix */
.autotrac-b24-form .b24-form-field-list .b24-form-control:focus + .b24-form-control-label,
.autotrac-b24-form .b24-form-field-list .b24-form-control-not-empty + .b24-form-control-label,
.autotrac-b24-form .b24-form-control-list .b24-form-control:focus + .b24-form-control-label,
.autotrac-b24-form .b24-form-control-list .b24-form-control-not-empty + .b24-form-control-label,
.autotrac-b24-form .b24-form-field-list .b24-form-control-select-label,
.autotrac-b24-form .b24-form-control-list .b24-form-control-select-label {
	top: 8px !important;
	transform: none !important;
}

.autotrac-b24-form .b24-form-control-required {
	color: var(--at-erro) !important;
}

.autotrac-b24-form .b24-form-control-alert-message {
	font-family: var(--at-fonte) !important;
	font-size: 0.75rem !important;
	color: var(--at-erro) !important;
	padding: 0.25rem 0.25rem 0 1.5rem !important;
}

.autotrac-b24-form .b24-form-control-comment {
	padding-top: 3px !important;
	padding-left: 15px !important;
}

/* -------------------------------------------------------------------------
 * Checkbox / bool / agreement
 * ---------------------------------------------------------------------- */

.autotrac-b24-form .b24-form-field-bool,
.autotrac-b24-form .b24-form-field-agreement,
.autotrac-b24-form .b24-form-control-bool {
	margin-bottom: 1rem !important;
}

.autotrac-b24-form .b24-form-control-bool label,
.autotrac-b24-form .b24-form-field-agreement label {
	display: inline-flex !important;
	align-items: flex-start !important;
	gap: 0.5rem !important;
	font-family: var(--at-fonte) !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	color: var(--at-texto-forte) !important;
	cursor: pointer !important;
}

.autotrac-b24-form .b24-form-control-desc,
.autotrac-b24-form .b24-form-field-agreement-link,
.autotrac-b24-form .b24-form-control-agreement .b24-form-control-desc {
	font-family: var(--at-fonte) !important;
	font-size: 1rem !important;
	line-height: 1.35 !important;
	color: inherit !important;
}

.autotrac-b24-form .b24-form-control-bool input[type='checkbox'],
.autotrac-b24-form .b24-form-control-agreement input[type='checkbox'],
.autotrac-b24-form .b24-form-field-agreement input[type='checkbox'] {
	appearance: none !important;
	-webkit-appearance: none !important;
	flex-shrink: 0 !important;
	width: 25px !important;
	height: 25px !important;
	margin: 0 0.5rem 0 0 !important;
	border: 1px solid var(--at-primaria) !important;
	border-radius: 8px !important;
	background-color: var(--at-branco) !important;
	box-shadow: none !important;
	cursor: pointer !important;
	position: relative !important;
}

.autotrac-b24-form .b24-form-control-bool input[type='checkbox']:checked,
.autotrac-b24-form .b24-form-control-agreement input[type='checkbox']:checked,
.autotrac-b24-form .b24-form-field-agreement input[type='checkbox']:checked {
	border-width: 2px !important;
	background-color: var(--at-branco) !important;
	background-image: url('../images/check.svg') !important;
	background-repeat: no-repeat !important;
	background-position: 59% 50% !important;
	background-size: 24px !important;
}

.autotrac-b24-form .b24-form-control-bool input[type='radio'],
.autotrac-b24-form .b24-form-control-list input[type='radio'] {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 0.5rem 0 0 !important;
	border: 2px solid #5ecffe !important;
	border-radius: 50% !important;
	background: var(--at-branco) !important;
	flex-shrink: 0 !important;
	position: relative !important;
}

.autotrac-b24-form .b24-form-control-bool input[type='radio']:checked::after,
.autotrac-b24-form .b24-form-control-list input[type='radio']:checked::after {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 10px !important;
	height: 10px !important;
	border-radius: 50% !important;
	background: var(--at-primaria) !important;
}

/* -------------------------------------------------------------------------
 * Botão enviar — .btn do tema
 * ---------------------------------------------------------------------- */

.autotrac-b24-form .b24-form-btn-container {
	margin: 1rem 0 0 !important;
	padding: 0 !important;
	display: flex !important;
	justify-content: center !important;
	width: 100% !important;
}

.autotrac-b24-form .b24-form-btn-block {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 20rem !important;
}

.autotrac-b24-form .b24-form-btn,
.autotrac-b24-form button.b24-form-btn {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 1.1rem 1.5rem 1rem !important;
	border: 2px solid var(--at-primaria) !important;
	border-radius: var(--at-radius) !important;
	background: var(--at-primaria) !important;
	box-shadow: 0 1.5rem 3rem -1rem rgba(9, 9, 9, 0.15) !important;
	font-family: var(--at-fonte) !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	color: var(--at-branco) !important;
	cursor: pointer !important;
	transition: background 0.4s, border-color 0.4s, box-shadow 0.4s !important;
}

.autotrac-b24-form .b24-form-btn:hover,
.autotrac-b24-form .b24-form-btn:focus,
.autotrac-b24-form button.b24-form-btn:hover,
.autotrac-b24-form button.b24-form-btn:focus {
	background: var(--at-primaria-hover) !important;
	border-color: var(--at-primaria-hover) !important;
	color: var(--at-branco) !important;
	box-shadow: 0 1.5rem 3rem -1rem rgba(9, 9, 9, 0.25) !important;
	outline: none !important;
}

/* Estados de sucesso / erro do Bitrix */
.autotrac-b24-form .b24-form-state,
.autotrac-b24-form .b24-form-state-text {
	font-family: var(--at-fonte) !important;
	color: var(--at-texto-forte) !important;
}

/* -------------------------------------------------------------------------
 * Variante: labels/checkbox claros (LP com fundo escuro fora do campo)
 * Uso: <div class="autotrac-b24-form autotrac-b24-form--on-dark">
 * Campos continuam brancos; só textos soltos (bool/agreement) clareiam.
 * ---------------------------------------------------------------------- */

.autotrac-b24-form.autotrac-b24-form--on-dark .b24-form-control-bool label,
.autotrac-b24-form.autotrac-b24-form--on-dark .b24-form-field-agreement label,
.autotrac-b24-form.autotrac-b24-form--on-dark .b24-form-control-desc,
.autotrac-b24-form.autotrac-b24-form--on-dark .b24-form-state-text {
	color: var(--at-branco) !important;
}

.autotrac-b24-form.autotrac-b24-form--on-dark .b24-form-field-agreement-link {
	color: var(--at-branco) !important;
	text-decoration: underline !important;
}

/* -------------------------------------------------------------------------
 * Variante: CTA verde (#A6CE15) — alinhado aos .pill da LP Jornada Business
 * Uso: <div class="autotrac-b24-form autotrac-b24-form--cta-green">
 * ---------------------------------------------------------------------- */

.autotrac-b24-form.autotrac-b24-form--cta-green {
	--at-primaria: #a6ce15;
	--at-primaria-hover: #95bc0f;
	--b24-primary-color: #a6ce15 !important;
	--b24-primary-hover-color: #95bc0f !important;
	--b24-primary-text-color: #0a3a4c !important;
}

.autotrac-b24-form.autotrac-b24-form--cta-green .b24-form-btn,
.autotrac-b24-form.autotrac-b24-form--cta-green button.b24-form-btn {
	background: #a6ce15 !important;
	border-color: #a6ce15 !important;
	color: #0a3a4c !important;
}

.autotrac-b24-form.autotrac-b24-form--cta-green .b24-form-btn:hover,
.autotrac-b24-form.autotrac-b24-form--cta-green .b24-form-btn:focus,
.autotrac-b24-form.autotrac-b24-form--cta-green button.b24-form-btn:hover,
.autotrac-b24-form.autotrac-b24-form--cta-green button.b24-form-btn:focus {
	background: #95bc0f !important;
	border-color: #95bc0f !important;
	color: #0a3a4c !important;
}