/**
 * Os formularios do HubSpot com a cara do site.
 *
 * O embed e o de programador (`hs-form-html`): o HubSpot entrega o HTML do
 * formulario e ele entra na pagina, sem iframe. Por isso o nosso CSS chega la.
 * O HubSpot pinta tudo por variaveis `--hsf-*`, cada uma com um valor por
 * omissao dele; definir a variavel aqui e a forma suportada de mudar o aspecto
 * (developers.hubspot.com, "Define custom styling for embedded forms").
 *
 * Os valores sao os do formulario do site (els-form.css, frames 783:4654 e
 * 783:19395) e os do botao do site (els-menu.css, `.els-btn--solid`). Os campos,
 * os passos e os textos continuam a ser os que a escola define no HubSpot.
 *
 * O que nao tem variavel vai por regra directa, com tres classes: as regras do
 * HubSpot sao `[data-hsfc-id=Renderer] .hsfc-X` e entram no <head> depois das
 * nossas, por isso com a mesma forca ganhavam elas.
 */

.hs-form-html {
	width: 100%;
	/* reserva o lugar enquanto o HTML nao chega, para a pagina nao saltar */
	min-height: 320px;

	--hsf-global__font-family: Inter, sans-serif;
	--hsf-global__font-size: 16px;
	--hsf-global__color: #101828;
	--hsf-global-error__color: #d92d20;

	--hsf-row__horizontal-spacing: 20px;
	--hsf-row__vertical-spacing: 20px;
	--hsf-module__vertical-spacing: 8px;

	/* o cartao e nosso: o fundo, a borda e a margem do HubSpot saem */
	--hsf-background__padding: 0;
	--hsf-background__background-color: transparent;
	--hsf-background__background-image: none;
	--hsf-background__border-style: none;
	--hsf-background__border-width: 0;
	--hsf-background__border-radius: 0;

	--hsf-heading__font-family: Urbanist, sans-serif;
	--hsf-heading__color: #101828;
	--hsf-heading__text-shadow: none;
	--hsf-richtext__font-family: Inter, sans-serif;
	--hsf-richtext__font-size: 15px;
	--hsf-richtext__color: #475467;

	--hsf-field-label__font-family: Inter, sans-serif;
	--hsf-field-label__font-size: 16px;
	--hsf-field-label__color: #101828;
	--hsf-field-label-requiredindicator__color: #d92d20;
	--hsf-field-description__font-family: Inter, sans-serif;
	--hsf-field-description__color: #475467;
	--hsf-field-footer__font-family: Inter, sans-serif;
	--hsf-field-footer__color: #475467;

	--hsf-field-input__font-family: Inter, sans-serif;
	--hsf-field-input__color: #101828;
	--hsf-field-input__background-color: #f7f9fc;
	--hsf-field-input__placeholder-color: #98a2b3;
	--hsf-field-input__border-color: #e4e7ec;
	--hsf-field-input__border-width: 1px;
	--hsf-field-input__border-style: solid;
	--hsf-field-input__border-radius: 5px;
	--hsf-field-input__padding: 15px 16px;

	--hsf-field-textarea__font-family: Inter, sans-serif;
	--hsf-field-textarea__color: #101828;
	--hsf-field-textarea__background-color: #f7f9fc;
	--hsf-field-textarea__placeholder-color: #98a2b3;
	--hsf-field-textarea__border-color: #e4e7ec;
	--hsf-field-textarea__border-width: 1px;
	--hsf-field-textarea__border-style: solid;
	--hsf-field-textarea__border-radius: 5px;
	--hsf-field-textarea__padding: 15px 16px;

	/* 11 + 11 + a borda = a caixa de 24 do formulario do site */
	--hsf-field-checkbox__padding: 11px;
	--hsf-field-radio__padding: 11px;
	--hsf-field-checkbox__background-color: #ffffff;
	--hsf-field-checkbox__color: #286191;
	--hsf-field-checkbox__border-color: #d0d5dd;
	--hsf-field-checkbox__border-width: 1px;
	--hsf-field-checkbox__border-style: solid;
	--hsf-field-radio__background-color: #ffffff;
	--hsf-field-radio__color: #286191;
	--hsf-field-radio__border-color: #d0d5dd;
	--hsf-field-radio__border-width: 1px;
	--hsf-field-radio__border-style: solid;

	/* o botao do site: fundo Neutral/900, texto branco, etiqueta amarela com a seta */
	--hsf-button__font-family: Urbanist, sans-serif;
	--hsf-button__font-size: 14px;
	--hsf-button__color: #ffffff;
	--hsf-button__background-color: #101828;
	--hsf-button__background-image: none;
	--hsf-button__border-radius: 5px;
	--hsf-button__padding: 5px 5px 5px 15px;
	--hsf-button__box-shadow: none;
	--hsf-button--hover__background-color: #101828;

	--hsf-progressbar-text__font-family: Inter, sans-serif;
	--hsf-progressbar-text__font-size: 14px;
	--hsf-progressbar-text__color: #475467;
	--hsf-progressbar-progressLine__background-color: #286191;
	--hsf-progressbar-progressLine__background-image: none;
	--hsf-progressbar-progressLine__border-width: 0;
	--hsf-progressbar-trackLine__background-color: #e4e7ec;

	--hsf-erroralert__font-family: Inter, sans-serif;
	--hsf-erroralert__font-size: 15px;
	--hsf-erroralert__color: #d92d20;
	--hsf-infoalert__font-family: Inter, sans-serif;
	--hsf-infoalert__font-size: 15px;
	--hsf-infoalert__color: #475467;
}

/* rotulo 16/24/600, como no formulario do site */
.hs-form-html .hsfc-Renderer .hsfc-FieldLabel {
	font-weight: 600;
	line-height: 1.5;
}

/* o texto ao lado de uma caixa de escolha e texto corrido, nao um rotulo de campo */
.hs-form-html .hsfc-Renderer .hsfc-CheckboxField .hsfc-FieldLabel,
.hs-form-html .hsfc-Renderer .hsfc-RadioField .hsfc-FieldLabel {
	font-weight: 400;
	gap: 12px;
}

/* os textos que a escola escreve no formulario trazem tamanho e fonte embutidos */
.hs-form-html .hsfc-Renderer .hsfc-RichText,
.hs-form-html .hsfc-Renderer .hsfc-RichText * {
	font-family: Inter, sans-serif !important;
	line-height: 1.5 !important;
}

/* campos de 56, e o foco do site: borda Primary/900 e um anel suave */
.hs-form-html .hsfc-Renderer .hsfc-TextInput,
.hs-form-html .hsfc-Renderer .hsfc-DropdownInput,
.hs-form-html .hsfc-Renderer .hsfc-PhoneInput,
.hs-form-html .hsfc-Renderer .hsfc-DateInput {
	min-height: 56px;
	box-sizing: border-box;
	transition: border-color .2s ease, box-shadow .2s ease;
}

/*
 * O bloco de consentimento: no site fica so a caixa com a frase.
 *
 * O HubSpot poe tres textos: um aviso antes da caixa, a caixa, e uma nota
 * sobre o tratamento dos dados. O aviso e a nota nao se conseguem tirar la -
 * o HubSpot nao grava esses campos vazios - e o desenho tem uma frase so.
 * Por isso saem aqui, por decisao do Pedro (7/10/2026). A frase da caixa e a
 * que foi escrita para ficar sozinha: "I agree to Everest's privacy policy and
 * would like to receive information about courses", com o link.
 *
 * Fica a saber-se: o HubSpot continua a guardar os tres textos no registo de
 * consentimento de cada envio, e no site atual da escola (iframe) eles
 * continuam a ver-se. Para voltarem a aparecer aqui, apaga a primeira regra.
 */
/* Duas regras e nao uma lista: num navegador sem `:has()` (Firefox < 121,
   Chrome < 105) a lista inteira caia e os textos voltavam a aparecer. */
.hs-form-html .hsfc-Renderer .hsfc-DataPrivacyField .hsfc-RichText {
	display: none;
}
.hs-form-html .hsfc-Renderer .hsfc-DataPrivacyField .hsfc-Row:has(> .hsfc-RichText) {
	display: none;
}

.hs-form-html .hsfc-Renderer .hsfc-DataPrivacyField {
	--hsf-row__vertical-spacing: 8px;
}

.hs-form-html .hsfc-Renderer .hsfc-DataPrivacyField .hsfc-FieldLabel {
	font-size: 14px;
	line-height: 1.45;
	align-items: flex-start;
}

/* o link dentro do texto da caixa (politica de privacidade) */
.hs-form-html .hsfc-Renderer .hsfc-FieldLabel a,
.hs-form-html .hsfc-Renderer .hsfc-RichText a {
	color: #286191;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* a caixa de mensagem tem a altura da do formulario do site */
.hs-form-html .hsfc-Renderer .hsfc-TextareaInput {
	min-height: 136px;
	box-sizing: border-box;
	resize: vertical;
	line-height: 1.5;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.hs-form-html .hsfc-Renderer .hsfc-TextInput:focus-visible,
.hs-form-html .hsfc-Renderer .hsfc-TextareaInput:focus-visible,
.hs-form-html .hsfc-Renderer .hsfc-DropdownInput:focus-within,
.hs-form-html .hsfc-Renderer .hsfc-PhoneInput:focus-within,
.hs-form-html .hsfc-Renderer .hsfc-DateInput:focus-within {
	outline: none;
	border-color: #286191;
	box-shadow: 0 0 0 3px rgba(40, 97, 145, .18);
}

/*
 * O botao. A etiqueta amarela com a seta e um ::after, porque o HTML do botao
 * e do HubSpot e so tem o texto. No hover responde a etiqueta e nao o fundo,
 * que e o padrao dos botoes com etiqueta no site.
 */
.hs-form-html .hsfc-Renderer .hsfc-Button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 50px;
	box-sizing: border-box;
	border: 0;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .3px;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.hs-form-html .hsfc-Renderer .hsfc-Button::after {
	content: "";
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 5px;
	background: #ffcc7f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101828' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / 18px no-repeat;
	transition: background-color .2s ease;
}

.hs-form-html .hsfc-Renderer .hsfc-Button:not([disabled]):hover {
	transform: none;
}

.hs-form-html .hsfc-Renderer .hsfc-Button:not([disabled]):hover::after,
.hs-form-html .hsfc-Renderer .hsfc-Button:focus-visible::after {
	background-color: #e4b169;
}

/* sozinho, o botao encosta a direita, como no formulario do desenho (783:4654) */
.hs-form-html .hsfc-Renderer .hsfc-NavigationRow__Buttons:has(> :only-child) {
	justify-content: flex-end;
}

/*
 * "Previous" e o botao secundario do site: branco, borda Primary/900, sem
 * etiqueta. O HubSpot da a mesma classe aos dois; o que os distingue e a
 * ordem - quando ha dois, o primeiro e o de voltar.
 */
.hs-form-html .hsfc-Renderer .hsfc-NavigationRow__Buttons > .hsfc-Button:first-child:not(:only-child) {
	padding: 16px 24px;
	justify-content: center;
	background-color: #ffffff;
	color: #101828;
	border: 1px solid #286191;
}

.hs-form-html .hsfc-Renderer .hsfc-NavigationRow__Buttons > .hsfc-Button:first-child:not(:only-child)::after {
	content: none;
}

.hs-form-html .hsfc-Renderer .hsfc-NavigationRow__Buttons > .hsfc-Button:first-child:not(:only-child):hover {
	background-color: #eaf2fb;
	border-color: #b5d5f0;
	color: #286191;
}

/* a lista que abre nos dropdowns, como a do site: destacada do campo, com sombra */
.hs-form-html .hsfc-Renderer .hsfc-DropdownOptions {
	margin-top: 6px;
	border-radius: 5px;
	box-shadow: 0 12px 28px rgba(16, 24, 40, .12);
}

/* chegar ao fim da lista nao passa a rolar a pagina */
.hs-form-html .hsfc-Renderer .hsfc-DropdownOptions__List {
	overscroll-behavior: contain;
}

/*
 * A foto lateral do formulario de reserva fica de fora: no site o formulario
 * esta sozinho no cartao, por pedido ("nothing else that causes distraction").
 */
.hs-form-html .hsfc-Renderer .hsfc-Step > .hsfc-Step__Banner {
	display: none;
}

.hs-form-html .hsfc-Renderer .hsfc-Step[class*="layoutTemplate"] {
	display: block;
}

.hs-form-html .hsfc-Renderer .hsfc-Step[class*="layoutTemplate"] > .hsfc-Step__Content {
	width: 100%;
}

/* o cartao branco da reserva; o do pedido de informacao ja vem do els-form.css */
.els-hs--reserva {
	width: 100%;
	max-width: 760px;
	margin-inline: auto;
	/* afasta o cartao do titulo e dos numeros do heroi */
	margin-block-start: clamp(16px, 3vw, 40px);
	padding: clamp(20px, 3.4vw, 40px);
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid #e4e7ec;
	border-radius: 10px;
}