@charset "utf-8";

#default-content {
	height: calc(100vh - 128px);
}

/* Topo com altura livre: o link "← Meus Formulários" (back_link()) fica
   acima do título e não cabia nos 60px fixos de antes. */
.form-main {
	width: auto;
	height: 100%;
	display: grid;
	grid-template-rows: auto 1fr;
	row-gap: 10px;
}

.form-top {
	display: grid;
	grid-template-columns: 1fr minmax(120px, auto) minmax(min-content, auto);
	grid-column-gap: 8px;
	align-items: center;
}

/* Bloco próprio (não inline): fica à esquerda mesmo com o título
   centralizado no celular (@media, .form-top > div:nth-child(1)). */
.form-top .back-link {
	display: flex;
	width: fit-content;
}

.form-top>div:nth-child(2) {
	text-align: right;
}

/* Configurações / Aparência / Compartilhar / Visualizar (Form_lib::load_form()). */
.form-top-actions {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 4px;
}

.form-top-action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 12px;
	font-family: var(--font-montserrat);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
	background: none;
	border: 0;
	border-radius: var(--border-radius);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease 0s, color 0.2s ease 0s;
}

.form-top-action i {
	font-size: 21px;
}

/* Uma cor por ação (as mesmas dos ícones antigos do topo). */
#action-form i { color: #6d9e35; }
#action-layout-form i { color: var(--color-pink); }
#action-url-form i { color: var(--color-purple); }
#action-preview-form i { color: var(--color-blue-plus); }

.form-top-action:hover {
	color: #1b2a3d;
	background-color: #f1f3f6;
}

/*
 * "Pausar respostas" (#button-deactive e o "Pausar e editar" do
 * modal-form-lock.php): rosa da marca, preenchido como o "Publicar".
 */
.buttom.form-pause-button {
	color: #FFF;
	background-color: var(--color-pink);
}

.buttom.form-pause-button .icon i {
	color: #FFF;
}

/* Telas médias e celular: só o ícone (o title continua explicando). */
@media (max-width: 1280px) {
	.form-top-action span {
		display: none;
	}

	.form-top-action {
		width: 40px;
		padding: 0;
		justify-content: center;
	}
}

/* Celular: a linha das ações fica à esquerda, com os botões de publicar à direita. */
@media (max-width: 640px) {
	.form-top-actions {
		justify-content: flex-start;
	}
}

/* flow-root: os botões (Publicar/Desativar) são float - sem isso a
   div ficava com altura zero e o align-items: center do .form-top não
   centralizava eles na altura do título. */
.form-top>div:nth-child(3) {
	text-align: right;
	display: flow-root;
}

/* Mesma largura nos dois: um troca pelo outro (publish_form()/
   deactivate_form() em form-crud.js) e, com larguras diferentes, a coluna
   mudava de tamanho e os ícones do meio pulavam pro lado. */
#button-publish,
#button-deactive {
	min-width: 140px;
}

.form-top .form-date-create {
	font-family: var(--font-montserrat);
	font-weight: 400;
	float: left;
	font-size: 11px;
}

.form-top .icons {
	float: right;
	text-align: right;
	color: #a2a4a8;
	font-size: 18px;
	margin-top: -16px;
	margin-right: 30px;
}

.form-content {
	display: grid;
	grid-template-columns: 220px 320px 1fr;
}

.form-content>div {
	height: calc(100vh - 188px);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.form-content>div:nth-child(1) {
	padding: 12px 6px 12px 16px;
	background-color: #FFF;
}

.form-content>div:nth-child(2) {
	padding: 0 10px;
}

/*
 * Construtor travado (formulário publicado, .builder-locked em .form-main,
 * Form_lib::load_form()): campos e Configurações só pra leitura até
 * "Pausar respostas". O aviso é o modal modal-form-lock.php; os cliques são
 * barrados no JS (builder_locked(), form.js) e no servidor
 * (Form::editable_form()).
 */
.builder-locked .form-fields .field,
.builder-locked .form-fields-select,
.builder-locked #action-form {
	opacity: 0.45;
	cursor: not-allowed;
}

.builder-locked .form-content .div-item .move,
.builder-locked .form-content .div-item .actions {
	display: none;
}

.builder-locked .form-web-edit {
	cursor: default;
}

.builder-locked .form-web-edit::before,
.builder-locked .form-web-edit-badge {
	display: none;
}


.form-content>div:nth-child(3) {
	padding: 20px;
	background-color: #FFF;
}

/* Select de tipos de campo: só no celular (ver @media no fim do arquivo),
   no lugar da lista .form-fields. */
.form-fields-select {
	display: none;
}

.form-content .no-data.form-empty {
	width: auto;
	height: auto;
	min-height: 200px;
	margin-top: 90px;
	margin-bottom: 30px;
}

.sortable-shadow {
	width: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin-bottom: 16px;
	background-color: #EEE;
}

.form-content .div-item {
	position: relative;
	padding: 18px 16px 10px 16px;
	background-color: #FFF;
	transition: all 0.4s ease 0s;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.form-content .div-item:not(:last-child) {
	margin-bottom: 16px;
}

/*
 * Topo do card (Form_lib::div_list_items()): círculo com o tipo do campo
 * (cor de get_fields() inline) em cima de uma linha que vai de uma borda à
 * outra do card (::before, compensando os 16px de padding lateral) e passa
 * no meio do círculo. O arrastar fica sempre visível no canto superior
 * direito.
 */
.form-content .div-item-top {
	position: relative;
	display: flex;
	align-items: center;
}

.form-content .div-item-top::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -16px;
	right: -16px;
	height: 1px;
	background-color: #EEEEEE;
}

.form-content .div-item .type {
	position: relative;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #FFFFFF;
}

.form-content .div-item .type i {
	font-size: 22px;
}

/* z-index: o .div-item-top vem depois no HTML e também é posicionado, então
   sem isso ele cobria a metade de baixo do ícone e "roubava" o clique -
   o arrastar só pegava na parte de cima. */
.form-content .div-item .move {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	display: flex;
	padding: 2px;
	cursor: grab;
}

.form-content .div-item .move i {
	font-size: 22px;
	color: var(--color-cyan);
	transition: color 0.3s ease 0s;
}

.form-content .div-item .move:hover i {
	color: var(--color-text);
}

.form-content .div-item .type-name {
	margin-top: 12px;
	font-family: var(--font-montserrat);
	font-size: 12px;
	color: #A2A4A8;
	font-weight: 500;
}

.form-content .div-item .name {
	margin-top: 2px;
	padding-bottom: 12px;
	font-family: var(--font-montserrat);
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
	word-break: break-word;
	border-bottom: 1px dashed #E0E0E0;
}

.form-content .div-item .div-item-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
}

.form-content .div-item .actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
}

/* "Obrigatório" no card (Form_lib::div_list_items()). */
.form-content .div-item .tag-required {
	display: inline-block;
	padding: 2px 8px;
	font-family: var(--font-montserrat);
	font-size: 11px;
	font-weight: 600;
	color: var(--color-red);
	background-color: rgba(220, 76, 100, 0.08);
	border-radius: var(--border-radius);
}

/* Editar / Excluir com texto. */
.form-content .div-item .actions button {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 30px;
	padding: 0 8px;
	font-family: var(--font-montserrat);
	font-size: 12px;
	font-weight: 600;
	background: none;
	border: 0;
	border-radius: var(--border-radius);
	cursor: pointer;
	transition: background-color 0.2s ease 0s;
}

.form-content .div-item .actions button i {
	font-size: 19px;
	font-weight: 300;
}

.form-content .div-item .edit {
	color: #6d9e35;
}

.form-content .div-item .edit:hover {
	background-color: rgba(109, 158, 53, 0.1);
}

.form-content .div-item .trash {
	color: #db4551;
}

.form-content .div-item .trash:hover {
	background-color: rgba(219, 69, 81, 0.1);
}

/*
 * Quebra de Página no builder: card tracejado e sem fundo, pra ler como um
 * divisor entre os campos e não como mais um campo.
 */
.form-content .div-item.item-type-page_break {
	background-color: transparent;
	border: 2px dashed #B8C0C6;
}

.form-content .div-item.item-type-page_break .div-item-top::before {
	background-color: transparent;
	border-top: 2px dashed #B8C0C6;
	height: 0;
}

.form-fields {
	text-align: left;
	font-size: 14px;
	font-weight: 600;
}

.form-fields .field {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	height: 42px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	transition: all 0.4s ease-in;
}

.form-fields .field i {
	font-size: 20px;
	margin-right: 6px;
	color: var(--color-text);
	opacity: 0.8;
	transition: all 0.4s ease-in;
}

.form-fields .field:hover {
	cursor: pointer;
	color: var(--color-pink);
}

.form-fields .field:hover i {
	opacity: 1;
	color: var(--color-purple);
}


/*
 * Categorias da lista de campos em acordeon (Form_lib::items_fields(),
 * init_form_fields_list() em form.js) - só a .open mostra os campos.
 */
.form-fields .fields-group-header {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	height: 48px;
	padding: 0;
	font-family: var(--font-montserrat);
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	color: var(--color-blue-plus);
	background: none;
	border: 0;
	border-bottom: 1px dotted #CACACA;
	cursor: pointer;
}

.form-fields .fields-group-header span {
	flex: 1;
}

.form-fields .fields-group-header .fields-group-icon {
	font-size: 20px;
	color: var(--color-blue);
}

.form-fields .fields-group-header .fields-group-arrow {
	font-size: 20px;
	color: var(--color-text);
	opacity: 0.6;
	transition: transform 0.25s ease 0s, opacity 0.2s ease 0s;
}

.form-fields .fields-group-header:hover .fields-group-arrow {
	opacity: 1;
}

.form-fields .fields-group.open .fields-group-arrow {
	transform: rotate(180deg);
}

.form-fields .fields-group-items {
	display: none;
	padding: 4px 0 6px;
}

.form-fields .fields-group.open .fields-group-items {
	display: block;
}

/*
 * Dica do tipo de campo no hover da lista, antes de adicionar
 * (field_hint_tooltip(), form.js). Fica no body, fora da coluna com
 * rolagem própria, que cortaria o balão.
 */
.field-hint-tooltip {
	position: absolute;
	z-index: 9000;
	max-width: 260px;
	padding: 10px 12px;
	font-family: var(--font-montserrat);
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	color: #FFFFFF;
	background-color: #1b2a3d;
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	pointer-events: none;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.15s ease 0s, transform 0.15s ease 0s;
}

.field-hint-tooltip.show {
	opacity: 1;
	transform: translateX(0);
}

.field-hint-tooltip::before {
	content: '';
	position: absolute;
	top: 14px;
	left: -6px;
	border-width: 6px 6px 6px 0;
	border-style: solid;
	border-color: transparent #1b2a3d transparent transparent;
}

.form-web-header {
	width: 100%;
	min-height: 220px;
	text-align: center;
	padding: 30px 46px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	color: #FFF;
	background-color: var(--form-theme-color, #1ba1e2);
	-webkit-box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.1);
	box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.1);
}

/* Título + descrição (Form_web_lib::header()); mesmo espaçamento que o
   cabeçalho dava aos dois antes do wrapper. */
.form-web-header .header-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.form-web-header .description:empty {
	display: none;
}

.form-web-header .title {
	max-width: 880px;
	font-family: var(--form-theme-font, var(--font-montserrat));
	font-size: calc(28px * var(--form-theme-font-scale, 1));
	font-weight: var(--form-theme-font-weight, 600);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}

.form-web-header .description {
	max-width: 960px;
	font-size: 14px;
	font-weight: 400;
	text-shadow: 1px 0 1px rgba(0, 0, 0, 0.1);
}

.form-web-background {
	width: 100%;
	height: 100%;
	padding: 0 10% 26px 10%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #F3F3F3;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

/*
 * Imagem de fundo (Form_lib::div_form_web(), modal "Aparência"): fica no
 * ::before da section, na largura toda, centralizada e com a altura que a
 * proporção do arquivo pede nessa largura (--form-bg-w/--form-bg-h, em
 * cqw: aspect-ratio + max-height encolhia a largura junto). Imagem baixa
 * fica no cabeçalho (o mínimo corta o excesso com cover, mais a faixa
 * do degradê); alta desce pela área cinza até 560px. Nos dois casos se
 * dissolve no cinza (mask). Com imagem o cabeçalho fica transparente e o
 * título ganha sombra mais forte pra seguir legível sobre a foto.
 */
#form-web.has-bg {
	position: relative;
	isolation: isolate;
	container-type: inline-size;
	background-color: #F3F3F3;
}

#form-web.has-bg::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 0;
	/* 200px do cabeçalho + ao menos 160px de degradê. */
	height: clamp(360px, calc(100cqw * var(--form-bg-h) / var(--form-bg-w)), 560px);
	background: var(--form-bg-image) center center / cover no-repeat;
	/* Degradê com curva (ease-out): começa na metade da imagem, nunca
	   dentro do cabeçalho (--fade = início), e some devagar no cinza. */
	--fade: max(200px, 50%);
	--fade-mask: linear-gradient(to bottom,
		#000 var(--fade),
		rgba(0, 0, 0, 0.85) calc(var(--fade) + (100% - var(--fade)) * 0.2),
		rgba(0, 0, 0, 0.6) calc(var(--fade) + (100% - var(--fade)) * 0.4),
		rgba(0, 0, 0, 0.35) calc(var(--fade) + (100% - var(--fade)) * 0.6),
		rgba(0, 0, 0, 0.15) calc(var(--fade) + (100% - var(--fade)) * 0.8),
		transparent 100%);
	-webkit-mask-image: var(--fade-mask);
	mask-image: var(--fade-mask);
	pointer-events: none;
}

#form-web.has-bg > .form-web-header,
#form-web.has-bg > .form-web-background {
	position: relative;
	z-index: 1;
}

#form-web.has-bg > .form-web-header,
#form-web.has-bg > .form-web-background {
	background-color: transparent;
}

#form-web.has-bg > .form-web-header {
	-webkit-box-shadow: none;
	box-shadow: none;
}

#form-web.has-bg > .form-web-header .title,
#form-web.has-bg > .form-web-header .description {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 0, 0, 0.35);
}

/* Imagem clara atrás do título (forms.background_tone, medido no upload
   por Form_Lib::background_tone()): texto grafite com halo claro. */
#form-web.has-bg.bg-light > .form-web-header {
	color: #1F2937;
}

#form-web.has-bg.bg-light > .form-web-header .title,
#form-web.has-bg.bg-light > .form-web-header .description {
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6), 0 0 18px rgba(255, 255, 255, 0.55);
}

/* Claro e escuro misturados atrás do texto (ex.: objeto escuro em fundo
   branco): nenhuma cor de texto serve sozinha, então o texto branco vai
   numa placa escura translúcida com desfoque. */
#form-web.has-bg.bg-mixed > .form-web-header .header-text {
	max-width: 960px;
	padding: 16px 28px;
	border-radius: 12px;
	background-color: rgba(17, 24, 39, 0.5);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

#form-web.has-bg.bg-mixed > .form-web-header .title,
#form-web.has-bg.bg-mixed > .form-web-header .description {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.form-web-fields {
	width: 100%;
	max-width: 960px;
	padding: 0 60px 26px 60px;
	border: 1px solid #F0F0F0;
	margin-top: -20px;
	border-radius: var(--border-radius);
	background-color: #FFF;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

/*
 * Cronômetro de tempo pra responder (forms.time_limit, ver modal "Editar
 * Formulário" e Form_lib::form_web_timer()) - só aparece quando o
 * formulário tem tempo limite definido. Contagem regressiva de verdade
 * fica por conta de init_form_web_timer() (form-web.js); aqui é só o
 * estilo dos blocos "flip clock".
 */
.form-web-timer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	margin-top: 26px;
}

.form-web-timer-tile {
	min-width: 60px;
	padding: 8px 4px;
	border-radius: 3px;
	background-color: var(--form-theme-color, var(--color-blue));
	color: #FFFFFF;
	font-family: var(--font-montserrat);
	font-size: 26px;
	font-weight: 700;
	text-align: center;
	letter-spacing: 1px;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}

.form-web-timer-sep {
	font-size: 24px;
	font-weight: 700;
	color: var(--color-text);
}

.form-web-timer-expired .form-web-timer-tile {
	background-color: var(--color-red);
}

.form-web-page {
	width: 100%;
}

/*
 * Campo Localização (Form_web_lib::field_location()) - mapa, endereço e
 * botões "Como chegar". z-index: 0 isola os panes do Leaflet (z-index até
 * 1000) pra não passarem por cima de modal/alerta.
 */
.field-location-map {
	height: 300px;
	margin-top: 10px;
	border: 1px solid #dfe4ea;
	border-radius: 3px;
	box-sizing: border-box;
	z-index: 0;
}

.field-location-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
}

.field-location-address {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	flex: 1 1 240px;
	font-size: 13px;
	line-height: 20px;
	color: var(--color-text);
}

.field-location-address i {
	font-size: 20px;
	color: var(--form-theme-color, var(--color-blue));
}

.field-location-actions {
	display: flex;
	gap: 8px;
}

.form-web-field .field-location-actions a {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 14px;
	border-radius: 3px;
	font-family: var(--font-montserrat);
	font-size: 13px;
	font-weight: 600;
	color: #FFFFFF;
	text-decoration: none;
	/* Desfaz o text-shadow branco do .form-web-field a (mais abaixo), que
	   contornava o texto branco do botão. */
	text-shadow: none;
	background-color: var(--form-theme-color, var(--color-blue));
	transition: opacity 0.2s ease 0s;
}

.form-web-field .field-location-actions a:hover {
	opacity: 0.85;
	color: #FFFFFF;
}

/* Desfaz o .form-web-field a (mais abaixo) nos controles do Leaflet - o
   text-align: left de lá tirava o + e o - do meio dos botões de zoom. */
.form-web-field .leaflet-container a {
	font-weight: normal;
	text-align: center;
	text-shadow: none;
	transition: none;
}

.form-web-field .leaflet-bar.leaflet-control-zoom,
.location-picker .leaflet-bar.leaflet-control-zoom {
	border: 0;
	border-radius: 3px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

.form-web-field .leaflet-bar a,
.form-web-field .leaflet-bar a:hover {
	font-size: 18px;
	color: #333333;
}

.form-web-field .leaflet-touch .leaflet-bar a {
	font-size: 22px;
}

.form-web-field .leaflet-control-attribution a {
	font-size: inherit;
	color: #0078A8;
}

.form-web-field .field-location-actions a i {
	font-size: 18px;
}

/* Campo Vídeo (Form_web_lib::field_video()) - player 16:9 na largura do campo. */
.field-video-player {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-top: 10px;
	border-radius: 3px;
	overflow: hidden;
	background-color: #000000;
}

.field-video-player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Capa do YouTube (miniatura + play): o iframe só entra no clique, ver
   init_video_facade() em form-web.js. */
.field-video-facade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background-color: #000000;
	cursor: pointer;
}

.field-video-facade img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.field-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 48px;
	transform: translate(-50%, -50%);
	border-radius: 12px;
	background-color: rgba(33, 33, 33, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease 0s;
}

.field-video-play i {
	font-size: 36px;
	color: #FFFFFF;
}

.field-video-facade:hover .field-video-play,
.field-video-facade:focus-visible .field-video-play {
	background-color: #FF0000;
}

/* Pin do mapa (location_marker_icon(), form-web.js) - público e modal do builder. */
.location-marker {
	background: none;
	border: 0;
}

.location-marker i {
	font-size: 40px;
	font-variation-settings: 'FILL' 1;
	color: var(--form-theme-color, #D35400);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Divisor (Form_web_lib::field_divider()) - linha com o texto opcional no meio. */
.form-web-divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 30px;
	font-family: var(--form-theme-font, var(--font-montserrat));
	font-size: calc(13px * var(--form-theme-font-scale, 1));
	font-weight: var(--form-theme-font-weight, 600);
	color: #8A94A0;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.form-web-divider::before,
.form-web-divider::after {
	content: '';
	flex: 1;
	border-top: 1px solid #D5DBE1;
}

.form-web-divider.empty {
	gap: 0;
}

.form-web-divider.empty::after {
	display: none;
}

/* Título/descrição da Quebra de Página que abriu a página (Form_web_lib::page_header()). */
.form-web-page-header {
	margin-top: 26px;
	padding: 4px 0 10px 14px;
	border-left: 4px solid var(--form-theme-color, var(--color-blue));
}

.form-web-page-header .title {
	font-family: var(--form-theme-font, var(--font-montserrat));
	font-size: calc(20px * var(--form-theme-font-scale, 1));
	font-weight: var(--form-theme-font-weight, 600);
	color: var(--color-text);
}

.form-web-page-header .description {
	margin-top: 6px;
	font-family: var(--font-montserrat);
	font-size: 13px;
	line-height: 20px;
	color: #6B7280;
}

.form-web-pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin: 6px 0;
	padding: 0 0 10px 0;
}

.form-page-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 22px;
	border-radius: 3px;
	font-family: var(--font-montserrat);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.3s ease-in, opacity 0.3s ease-in;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.form-page-nav i {
	font-size: 18px;
}

.form-page-nav.prev {
	background-color: #FFF;
	color: var(--form-theme-color, var(--color-blue));
	border: 1.5px solid var(--form-theme-color, var(--color-blue));
}

.form-page-nav.prev:hover {
	background-color: rgba(0, 0, 0, 0.03);
}

.form-page-nav.next {
	background-color: var(--form-theme-color, var(--color-blue));
	color: #FFF;
}

.form-page-nav.next:hover {
	opacity: 0.85;
}

.form-page-nav.invisible {
	visibility: hidden;
	pointer-events: none;
}

.form-web-pagination .form-web-buttom {
	width: auto;
	height: auto;
	margin: 0;
	gap: 12px;
}

.form-web-pagination .form-web-buttom button {
	height: 40px;
}

.form-web-field {
	position: relative;
	background-color: #f9fafc;
	margin-top: 26px;
	padding: 20px;
	font-family: var(--font-montserrat);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

/*
 * Selo "Salvo" do rascunho automático (www/js/form-web.js,
 * form_web_draft_show_saved()) - fica em cima do canto do campo, sem
 * ocupar espaço no fluxo, pra não empurrar o campo nem atrapalhar quem
 * ainda está digitando.
 */
.field-draft-saved {
	position: absolute;
	top: 10px;
	right: 14px;
	display: flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-montserrat);
	font-size: 12px;
	font-weight: 600;
	color: var(--color-success);
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.field-draft-saved.show {
	opacity: 1;
	transform: translateY(0);
}

.field-draft-saved i {
	font-size: 15px;
}

.form-web-field label {
	font-family: var(--form-theme-font, var(--font-montserrat));
	font-size: calc(14px * var(--form-theme-font-scale, 1));
	font-weight: var(--form-theme-font-weight, 600);
	cursor: pointer;
	display: block;
	margin-bottom: 2px;
}

.form-web-field label span {
	font-family: var(--font-montserrat);
	display: block;
	font-size: 13px;
	font-weight: 400;
	font-style: italic;
	line-height: 18px;
	margin-bottom: 3px;
}

.form-web-field label .i-description {
	cursor: help;
	color: var(--color-blue);
	float: right;
	font-size: 16px;
}

.form-web-field label .i-required {
	font-size: 19px !important;
	font-weight: 400 !important;
	color: var(--color-error);
}

.form-web-field input[type="text"] {
	width: 100%;
	max-width: 100%;
	height: 42px;
	font-family: var(--font-montserrat);
	font-size: 14px;
	font-weight: 400;
	background-color: #FFFFFF;
	color: var(--color-text);
	border: 1px solid #dfe4ea;
	padding: 6px 12px;
	border-radius: 3px;
	display: inline-block;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	position: relative;
	z-index: 1;
	transition: all 0.65s ease 0s;
}

.form-web-field input[type="text"]:focus {
	border: 1px solid #a9aeb4;
}

.form-web-field input[type="text"]::placeholder {
	font-family: Verdana;
	font-style: italic;
	font-weight: 400;
	opacity: 0.6;
}

/*
 * Data/hora: campo + ícone num .picker-field (Form_web_lib::field_datetime()),
 * que posiciona o ícone (cor, tamanho e hover: default.css). Com a mesma
 * largura máxima do campo, senão o ícone iria para a ponta da linha.
 */
.form-web-field .picker-field-date {
	max-width: 180px;
}

.form-web-field .picker-field-time {
	max-width: 126px;
}

.form-web-field .picker-field > .icon-input-date {
	z-index: 2;
}

.icon-input-number {
	font-size: 22px;
	font-weight: 300;
	color: var(--color-scrollbar);
	vertical-align: -6px;
	transition: all 0.65s ease 0s;
	margin-left: -36px;
	position: relative;
	z-index: 2;
}

.form-web-field input[type="text"].datepicker,
.form-web-field input[type="text"].number,
.form-web-field input[type="text"].money,
.form-web-field input[type="text"].float,
.form-web-field input[type="text"].cpf,
.form-web-field input[type="text"].cnpj,
.form-web-field input[type="text"].cep {
	width: 100%;
	max-width: 180px;
}

/* CNPJ alfanumérico (letras maiúsculas são mais largas que números) */
.form-web-field input[type="text"].cnpj {
	max-width: 230px;
}

.form-web-field input[type="text"].datepicker-time {
	width: 100%;
	max-width: 126px;
}

/*
 * Campos com ícone à direita (.icon-input-date no .picker-field e
 * .icon-input-number, que sobe 36px por cima do campo): o texto para antes
 * do ícone, em vez de passar por baixo dele.
 */
.form-web-field input[type="text"].datepicker,
.form-web-field input[type="text"].datepicker-time,
.form-web-field input[type="text"].money,
.form-web-field input[type="text"].float,
.form-web-field input[type="text"].cpf,
.form-web-field input[type="text"].cnpj,
.form-web-field input[type="text"].cep,
.form-web-field input[type="text"].amount {
	padding-right: 42px;
}

/*
 * Campo "datetime" (Form_web_lib::field_datetime()) - data e hora lado a
 * lado, cada um com sua largura máxima própria já
 * coberta pela regra acima (.datepicker / .datepicker-time).
 */
.form-web-field .field-datetime-split.two-columns {
	max-width: 365px;
  	grid-column-gap: 6px;
  	display: grid;
}

/*
 * Campo endereço (Form_web_lib::field_address()) - endereço completo à
 * esquerda e CEP com botão de busca à direita (empilha no celular, ver
 * @media 480px). A busca em si é address_search(), form-web.js.
 */
.form-web-field .field-address {
	display: grid;
	grid-template-columns: 1fr 180px;
	gap: 12px;
}

.form-web-field .field-address-cep-input {
	display: flex;
}

.form-web-field .field-address-cep-input input[type="text"].cep {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	border-right: 0;
	border-radius: 3px 0 0 3px;
}

.address-cep-search {
	flex: 0 0 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0;
	color: #FFFFFF;
	background-color: var(--form-theme-color, var(--color-blue));
	border: 0;
	border-radius: 0 3px 3px 0;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.address-cep-search i {
	font-size: 22px;
}

.form-web-field.searching .address-cep-search {
	opacity: 0.6;
	cursor: progress;
}

.field-address-status {
	font-family: var(--font-montserrat);
	font-size: 12px;
	line-height: 18px;
	min-height: 18px;
	margin-top: 6px;
	color: var(--color-scrollbar);
}

/*
 * Campo NPS (Form_web_lib::field_nps()) - 11 botões de 0 a 10 na cor do
 * tema, todos iguais (sem vermelho/verde, pra não induzir a nota); o
 * escolhido fica preenchido. No celular quebra em 2 linhas (@media 480px).
 */
.field-nps {
	margin-top: 8px;
}

.field-nps-options {
	display: grid;
	grid-template-columns: repeat(11, minmax(0, 1fr));
	gap: 6px;
}

.field-nps-option {
	height: 42px;
	padding: 0;
	font-family: var(--font-montserrat);
	font-size: 15px;
	font-weight: 600;
	color: var(--form-theme-color, var(--color-blue));
	background-color: #FFFFFF;
	border: 1.5px solid var(--form-theme-color, var(--color-blue));
	border-radius: 3px;
	cursor: pointer;
	transition: all 0.2s ease 0s;
}

.field-nps-option:hover {
	background-color: rgba(0, 0, 0, 0.03);
}

.field-nps-option.selected {
	color: #FFFFFF;
	background-color: var(--form-theme-color, var(--color-blue));
}

/* "Notas coloridas" marcado no builder: cada botão com a sua cor, do
   vermelho (0) ao verde (10) - --nps-color vem inline de field_nps(). */
.field-nps.colors .field-nps-option {
	color: var(--nps-color);
	border-color: var(--nps-color);
}

.field-nps.colors .field-nps-option.selected {
	color: #FFFFFF;
	background-color: var(--nps-color);
}

.field-nps-labels {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 6px;
	font-family: var(--font-montserrat);
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text);
}

/*
 * Campo Slider (Form_web_lib::field_slider()) - trilha e marcador na cor do
 * tema; a parte já percorrida é pintada por --slider-fill (slider_fill() em
 * form-web.js). .empty = ainda sem resposta: marcador escondido, trilha
 * cinza e o texto "Arraste para escolher" no lugar do valor.
 */
.field-slider {
	margin-top: 8px;
}

.field-slider-value {
	min-height: 26px;
	font-family: var(--font-montserrat);
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	color: var(--form-theme-color, var(--color-blue));
}

.field-slider.empty .field-slider-value {
	font-size: 13px;
	font-weight: 400;
	font-style: italic;
	color: var(--color-scrollbar);
}

.field-slider-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	margin: 14px 0;
	border-radius: 3px;
	background: linear-gradient(to right, var(--form-theme-color, var(--color-blue)) var(--slider-fill, 0%), #E3E6EA var(--slider-fill, 0%));
	outline: none;
	cursor: pointer;
}

.field-slider-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: #FFFFFF;
	border: 3px solid var(--form-theme-color, var(--color-blue));
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	transition: opacity 0.2s ease 0s;
}

.field-slider-range::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: #FFFFFF;
	border: 3px solid var(--form-theme-color, var(--color-blue));
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	transition: opacity 0.2s ease 0s;
}

.field-slider-range::-moz-range-track {
	background: transparent;
}

.field-slider.empty .field-slider-range::-webkit-slider-thumb {
	opacity: 0;
}

.field-slider.empty .field-slider-range::-moz-range-thumb {
	opacity: 0;
}

.field-slider-labels {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--font-montserrat);
	font-size: 12px;
	font-weight: 500;
	color: var(--color-scrollbar);
}

.field-slider-labels > div {
	display: flex;
	flex-direction: column;
}

.field-slider-labels > div:last-child {
	text-align: right;
}

.field-slider-labels strong {
	font-weight: 600;
	color: var(--color-text);
}

/*
 * Campo Matriz / Likert (Form_web_lib::field_matrix()) - grade com as
 * colunas no topo e uma linha por afirmação. Quando o campo fica estreito
 * (celular, prévia do builder), cada linha vira um cartão com a escala em
 * lista (container query abaixo), já que 5 ou mais colunas não cabem.
 * A marcação usa a cor do tema do formulário.
 */
.field-matrix {
	margin-top: 8px;
	container-type: inline-size;
	font-family: var(--font-montserrat);
}

.field-matrix-head,
.field-matrix-row {
	display: grid;
	grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
	align-items: center;
}

.field-matrix-cols {
	display: grid;
	grid-template-columns: repeat(var(--matrix-cols), minmax(0, 1fr));
	align-items: center;
}

.field-matrix-head .field-matrix-cols > div {
	padding: 0 4px 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	color: var(--color-text);
	overflow-wrap: anywhere;
}

.field-matrix-row {
	background-color: #FFFFFF;
	border-top: 1px solid #dfe4ea;
}

.field-matrix-row:last-child {
	border-bottom: 1px solid #dfe4ea;
}

.field-matrix-row-title {
	padding: 12px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-text);
	overflow-wrap: anywhere;
}

.field-matrix-row.missing .field-matrix-row-title {
	color: var(--color-error);
	box-shadow: inset 3px 0 0 var(--color-error);
}

.field-matrix .field-matrix-option {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 10px 0;
	cursor: pointer;
}

.field-matrix input[type="radio"] {
	flex: none;
	border-color: #b7bfcb;
}

.field-matrix input[type="radio"]::before {
	box-shadow: inset 1em 1em var(--form-theme-color, var(--color-blue));
}

.field-matrix input[type="radio"]:checked {
	border-color: var(--form-theme-color, var(--color-blue));
}

.field-matrix input[type="radio"]:focus-visible {
	outline: 2px solid var(--form-theme-color, var(--color-blue));
	outline-offset: 2px;
}

/* Na grade o nome da coluna já está no cabeçalho: fica só pro leitor de tela. */
.field-matrix .field-matrix-option-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	font-style: normal;
}

@container (max-width: 560px) {
	.field-matrix-head {
		display: none;
	}

	.field-matrix-row,
	.field-matrix-row:last-child {
		display: block;
		padding: 12px;
		border: 1px solid #dfe4ea;
		border-radius: 4px;
	}

	.field-matrix-row + .field-matrix-row {
		margin-top: 10px;
	}

	.field-matrix-row-title {
		padding: 0 0 10px;
		font-weight: 600;
	}

	.field-matrix-row.missing {
		border-color: var(--color-error);
	}

	.field-matrix-row.missing .field-matrix-row-title {
		box-shadow: none;
	}

	.field-matrix-cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}

	.field-matrix .field-matrix-option {
		justify-content: flex-start;
		gap: 10px;
		padding: 9px 10px;
		border: 1.5px solid #dfe4ea;
		border-radius: 4px;
		background-color: #FFFFFF;
	}

	.field-matrix .field-matrix-option:has(input:checked) {
		border-color: var(--form-theme-color, var(--color-blue));
		background-color: color-mix(in srgb, var(--form-theme-color, var(--color-blue)) 10%, #FFFFFF);
	}

	.field-matrix input[type="radio"] {
		width: 18px;
		height: 18px;
	}

	.field-matrix input[type="radio"]::before {
		width: 10px;
		height: 10px;
	}

	.field-matrix .field-matrix-option-text {
		position: static;
		display: block;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		white-space: normal;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.35;
		color: var(--color-text);
	}
}

/**
 * Campo Ranking (Form_web_lib::field_ranking()) - cada opção é um cartão
 * arrastado pela alça (posição + ícone), na cor do tema. Só a alça
 * captura o toque (touch-action), então o resto do cartão ainda rola a
 * página no celular.
 */
.field-ranking-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-montserrat);
}

.field-ranking-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px 6px 6px;
	background-color: #FFFFFF;
	border: 1.5px solid #dfe4ea;
	border-radius: var(--border-radius);
}

.field-ranking-item.ui-sortable-helper {
	border-color: var(--form-theme-color, var(--color-blue));
	box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

.field-ranking-handle {
	display: flex;
	flex: none;
	align-items: center;
	gap: 2px;
	padding: 4px 2px 4px 4px;
	color: #9aa3af;
	cursor: grab;
	touch-action: none;
}

.field-ranking-position {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 26px;
	height: 26px;
	font-size: 13px;
	font-weight: 700;
	color: #FFFFFF;
	background-color: var(--form-theme-color, var(--color-blue));
	border-radius: 50%;
}

.field-ranking-name {
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-text);
	overflow-wrap: anywhere;
}

.field-ranking-shadow {
	border: 1.5px dashed var(--form-theme-color, var(--color-blue));
	border-radius: var(--border-radius);
	visibility: visible !important;
}

.field-address-status:empty {
	display: none;
}

.field-address-status[data-type="error"] {
	color: var(--color-error);
}

.form-web-field input[type="checkbox"],
.form-web-field input[type="radio"] {
	display: grid;
	place-content: center;
	appearance: none;
	background-color: #fff;
	cursor: pointer;
	width: 22px;
	height: 22px;
	border: 1px solid #dfe4ea;
}

.form-web-field input[type="checkbox"]::before,
.form-web-field input[type="radio"]::before {
	content: "";
	width: 12px;
	height: 12px;
	transform: scale(0);
	transition: 300ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--form-theme-color, var(--color-blue));
}

.form-web-field input[type="checkbox"]:checked::before,
.form-web-field input[type="radio"]:checked::before {
	transform: scale(1);
}

.form-web-field input[type="radio"] {
	border-radius: 50%;
}

.form-web-field input[type="radio"]::before {
	border-radius: 50%;
}

.form-web-field textarea {
	width: 100%;
	max-width: 100%;
	height: 80px;
	font-family: var(--font-montserrat);
	font-size: 14px;
	font-weight: 400;
	background-color: #FFFFFF;
	color: var(--color-text);
	border: 1px solid #dfe4ea;
	padding: 6px 12px;
	border-radius: var(--border-radius);
	display: inline-block;
	resize: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	transition: all 0.65s ease 0s;
}

.form-web-field textarea:focus {
	border: 1px solid #a9aeb4;
}

.form-web-field textarea::placeholder {
	font-family: Verdana;
	font-style: italic;
	font-weight: 400;
	opacity: 0.6;
}

.form-web-field select {
	width: 100%;
	max-width: 100%;
	height: 42px;
	font-family: var(--font-montserrat);
	font-size: 14px;
	font-weight: 400;
	background-color: #FFFFFF;
	color: var(--color-text);
	border: 1px solid #dfe4ea;
	padding: 6px 12px;
	border-radius: var(--border-radius);
	display: inline-block;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	position: relative;
	z-index: 1;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	transition: all 0.65s ease 0s;
}

.form-web-field select option {
	font-family: Verdana;
	font-size: 14px;
	font-weight: 400;
	color: var(--color-text);
	padding: 4px 6px;
	background-color: #FFF;
	white-space: normal;
}

.form-web-field select:focus {
	border: 1px solid #a9aeb4;
}

.form-web-field select:focus + .form-web-field .i-arrow-select {
	color: var(--color-blue) !important;
}

.form-web-field .i-arrow-select {
	width: 32px;
    height: 20px;
    margin-top: -32px;
    float: right;
    color: var(--color-text);
    font-size: 26px;
	position: relative;
	z-index: 2;
}

.form-web-field .input-icon {
	font-size: 22px;
	width: 40px;
	text-align: center;
	margin-right: -45px;
	color: #888b94;
	display: inline-block;
	vertical-align: -2px;
	text-shadow: 1px 1px 0px #FFFFFF;
	position: relative;
	z-index: 2;
}

.form-web-field p {
	font-size: 13px;
	font-weight: 600;
	line-height: 24px;
	text-align: justify;
	text-indent: 26px;
	padding: 0 12px;
	text-shadow: 1px 1px 0 #FFF;
}

.form-web-field a {
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	color: var(--color-blue);
	text-decoration: none;
	transition: all 0.65s ease 0s;
	text-shadow: 1px 1px 0 #FFF;
}

.form-web-field a:hover {
	cursor: pointer;
	color: var(--color-text);
}

.form-web-field .image-static {
	width: auto;
	height: 365px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
	overflow: hidden;
	border: 4px solid #FFF;
	-webkit-filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.1));
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.1));
}

.upload-file-container {
	position: relative;
}

.upload-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	clip: rect(0, 0, 0, 0);
}

.upload-file-dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 24px 16px;
	text-align: center;
	background-color: #FFFFFF;
	border: 2px dashed #dfe4ea;
	border-radius: var(--border-radius);
	cursor: pointer;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	transition: all 0.65s ease 0s;
}

.upload-file-dropzone:hover,
.upload-file-dropzone.dragover {
	border-color: var(--color-blue);
	background-color: #f3faff;
}

.upload-file-dropzone.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.upload-file-dropzone i {
	font-size: 32px;
	color: var(--color-blue);
}

.upload-file-text {
	font-family: var(--font-montserrat);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
}

.upload-file-hint {
	font-family: var(--font-montserrat);
	font-size: 12px;
	font-weight: 400;
	font-style: italic;
	color: var(--color-scrollbar);
}

.upload-file-list {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.upload-file-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background-color: #FFFFFF;
	border: 1px solid #dfe4ea;
	border-radius: var(--border-radius);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.upload-file-item > .material-symbols-outlined:first-child {
	flex: 0 0 auto;
	font-size: 22px;
	color: var(--color-blue);
}

.upload-file-item-info {
	flex: 1 1 auto;
	min-width: 0;
}

.upload-file-item-name {
	font-family: var(--font-montserrat);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.upload-file-item-size {
	font-family: var(--font-montserrat);
	font-size: 12px;
	font-weight: 400;
	color: var(--color-scrollbar);
}

.upload-file-item-remove {
	flex: 0 0 auto;
	font-size: 20px;
	color: var(--color-scrollbar);
	cursor: pointer;
	transition: all 0.65s ease 0s;
}

.upload-file-item-remove:hover {
	color: var(--color-red);
}

/*
 * Campo Pix (Form_web_lib::field_pix()) - QR Code à esquerda, valor/
 * recebedor/copia e cola à direita (empilha no celular, ver @media 480px).
 * O comprovante embaixo reaproveita os estilos de .upload-file-*.
 */
.pix-box {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-top: 8px;
	padding: 16px;
	background-color: #FFFFFF;
	border: 1px solid #dfe4ea;
	border-radius: var(--border-radius);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.pix-qrcode {
	flex: 0 0 180px;
	width: 180px;
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.3s ease;
}

.pix-qrcode.loading {
	opacity: 0.4;
}

.pix-qrcode svg {
	display: block;
	width: 100%;
	height: 100%;
}

.pix-qrcode-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 100%;
	padding: 12px;
	text-align: center;
	font-family: var(--font-montserrat);
	font-size: 12px;
	font-style: italic;
	color: var(--color-scrollbar);
	border: 2px dashed #dfe4ea;
	border-radius: var(--border-radius);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.pix-qrcode-empty i {
	font-size: 40px;
}

.pix-info {
	flex: 1 1 auto;
	min-width: 0;
}

.form-web-field .pix-info-label {
	font-family: var(--font-montserrat);
	font-size: 12px;
	font-weight: 500;
	color: var(--color-scrollbar);
	margin: 10px 0 2px 0;
}

.form-web-field .pix-info-label:first-child {
	margin-top: 0;
}

.pix-info-amount {
	font-family: var(--font-montserrat);
	font-size: 22px;
	font-weight: 700;
	color: var(--form-theme-color, var(--color-blue));
}

.pix-info-value {
	font-family: var(--font-montserrat);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
	overflow-wrap: anywhere;
}

.pix-copy {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}

.form-web-field .pix-copy input[type="text"].pix-payload {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12px;
	color: var(--color-scrollbar);
	background-color: #f9fafc;
	text-overflow: ellipsis;
}

.pix-copy-button {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 42px;
	padding: 0 14px;
	font-family: var(--font-montserrat);
	font-size: 13px;
	font-weight: 600;
	color: #FFFFFF;
	background-color: var(--form-theme-color, var(--color-blue));
	border: 0;
	border-radius: var(--border-radius);
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.pix-copy-button i {
	font-size: 18px;
}

.pix-copy-button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.pix-copy-button.copied {
	background-color: var(--color-success);
}

.pix-receipt-title {
	font-family: var(--form-theme-font, var(--font-montserrat));
	font-size: calc(14px * var(--form-theme-font-scale, 1));
	font-weight: var(--form-theme-font-weight, 600);
	margin: 16px 0 6px 0;
}

.pix-receipt-title .i-required {
	font-size: 19px;
	font-weight: 400;
	color: var(--color-error);
}

/*
 * Campo Assinatura (Form_web_lib::field_signature()). A proporção fica na
 * .signature-box e o canvas ocupa ela inteira em posição absoluta: assim
 * o tamanho na tela não depende dos atributos width/height do canvas, que
 * init_signature() (form-web.js) muda conforme a densidade da tela.
 * Ocupa a largura toda do campo; a altura segue a proporção 2:1 (celular)
 * até o limite de max-height (desktop).
 */
.signature-box {
	position: relative;
	width: 100%;
	aspect-ratio: 2 / 1;
	max-height: 240px;
	margin-top: 8px;
	background-color: #FFFFFF;
	border: 2px dashed #dfe4ea;
	border-radius: var(--border-radius);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	transition: border-color 0.65s ease 0s;
}

.signature-box:hover,
.field-signature.signed .signature-box {
	border-color: var(--form-theme-color, var(--color-blue));
}

.signature-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	cursor: crosshair;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	z-index: 1;
}

.signature-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-family: var(--font-montserrat);
	font-size: 13px;
	font-style: italic;
	color: var(--color-scrollbar);
	pointer-events: none;
	transition: opacity 0.3s ease 0s;
}

.signature-placeholder i {
	font-size: 32px;
	font-style: normal;
	color: var(--form-theme-color, var(--color-blue));
}

.field-signature.signed .signature-placeholder {
	opacity: 0;
}

/* Linha de base, como numa folha de papel - fica atrás do traço. */
.signature-line {
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: 22%;
	border-bottom: 1px solid #dfe4ea;
	pointer-events: none;
}

.signature-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 6px;
}

.signature-clear {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	font-family: var(--font-montserrat);
	font-size: 12px;
	font-weight: 600;
	color: var(--color-scrollbar);
	background-color: transparent;
	border: 0;
	border-radius: var(--border-radius);
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.signature-clear i {
	font-size: 18px;
}

.signature-clear:hover {
	color: var(--color-red);
}

.pix-unconfigured {
	margin-top: 6px;
	font-family: var(--font-montserrat);
	font-size: 13px;
	font-style: italic;
	color: var(--color-error);
}

.upload-file-item.loading .loading-spinner.small {
	flex: 0 0 auto;
	margin: 0;
}

.form-web-buttom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: auto;
	height: 72px;
	margin: 6px 0;
	padding: 0;
	font-family: var(--font-montserrat);
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

#form-web .form-web-buttom .blue {
	background-color: var(--form-theme-color, var(--color-blue));
}

.form-text-warning {
	font-family: var(--font-montserrat);
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text);
}

.form-text-warning.left {
	margin-top: 6px;
	text-align: left;
	min-height: 30px;
} 

.form-text-warning.center {
	text-align: center;
	margin-bottom: -10px;
} 

.form-text-warning.right {
	text-align: right;
} 

.form-text-warning.left i {
	font-size: 19px !important;
	font-weight: 400 !important;
	color: var(--color-error);
	vertical-align: -5px;
}

.form-text-warning.center i {
	font-size: 16px;
	color: var(--color-orange);
	vertical-align: -3px;
}

.form-text-warning i:before {
	margin: 0;
	padding: 0;
}

#form-themes {
	width: auto;
	margin-top: 10px;
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	grid-column-gap: 18px;
	grid-row-gap: 18px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

#form-themes>div {
	height: 40px;
	border: 2px solid transparent;
	transition: all 0.45s ease 0s;
}

#form-themes .color {
	margin: 2px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	-webkit-box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1);
	box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	transition: all 0.45s ease 0s;
}

#form-themes .color i {
	font-size: 20px;
	color: #FFFFFF;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}

#form-themes .color:hover {
	cursor: pointer;
	-webkit-box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
	box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
}

#form-themes .off i {
	display: none;
}

/*
 * Escolha de fonte (Main_lib::fonts()): um card clicável por fonte, com
 * "Aa" + o título do formulário escritos nela e o nome embaixo. Todos com
 * opacidade cheia e borda cinza (parecem botões, não opções desabilitadas);
 * o escolhido (.active) tem borda purple de 2px, fundo lilás e ✓ no canto -
 * mesmo sinal do seletor de tema logo acima. 2 colunas; 1 no celular.
 */
#form-fonts {
	width: auto;
	margin-top: 10px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

#form-fonts .item-font {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	background-color: #FFFFFF;
	border: 1px solid #dfe4ea;
	border-radius: var(--border-radius);
	color: var(--color-text);
	cursor: pointer;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

#form-fonts .item-font:hover {
	border-color: var(--color-purple);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#form-fonts .item-font:focus-visible {
	outline: 2px solid var(--color-blue);
	outline-offset: 2px;
}

/* 2px de borda: o padding perde 1px pra o conteúdo não pular de lugar. */
#form-fonts .item-font.active {
	padding: 13px 15px;
	border: 2px solid var(--color-purple);
	background-color: color-mix(in srgb, var(--color-purple) 8%, white);
}

#form-fonts .item-font-check {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 22px;
	color: var(--color-purple);
	display: none;
}

#form-fonts .item-font.active .item-font-check {
	display: block;
}

#form-fonts .item-font-aa {
	font-size: calc(30px * var(--font-scale, 1));
	line-height: 1.15;
	padding-right: 28px;
}

/* Título em no máximo 2 linhas, cortado com "..." se for maior. */
#form-fonts .item-font-sample {
	font-size: calc(15px * var(--font-scale, 1));
	line-height: 1.35;
	overflow-wrap: anywhere;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

#form-fonts .item-font.active .item-font-aa {
	color: var(--color-purple);
}

#form-fonts .item-font.active .item-font-sample {
	color: var(--color-pink);
}

/* Nome sempre em Montserrat: a fonte do card (com !important, abaixo) é
   a da amostra, não a do rótulo. */
#form-fonts .item-font .item-font-name {
	margin-top: 6px;
	font-family: var(--font-montserrat) !important;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	color: #a2a4a8;
}

#form-fonts .montserrat {
	font-family: var(--font-montserrat) !important;
}

#form-fonts .carter {
	font-family: var(--font-carter) !important;
}

#form-fonts .satisfy {
	font-family: var(--font-satisfy) !important;
}

#form-fonts .gluten {
	font-family: var(--font-gluten) !important;
}

#form-fonts .mochiy {
	font-family: var(--font-mochiy) !important;
}

#form-fonts .playfair {
	font-family: var(--font-playfair) !important;
}

/* Altura livre: em modal estreito o texto quebra em 2 linhas e, com os
   14px fixos de antes, invadia o campo do link. */
.published-title {
	line-height: 16px;
	font-size: 13px;
	font-weight: 400;
	margin-top: -2px;
	padding: 0 4px;
	font-family: var(--font-montserrat);
}

.published-div-url {
	width: auto;
	display: grid;
	/* minmax(0, ...) em vez de 300px: a coluna do link encolhe e o botão
	   "Copiar" não sai do modal. */
	grid-template-columns: minmax(0, 1fr) auto;
	grid-column-gap: 8px;
	margin-top: 16px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.published-div-url > div {
	height: 36px;
	line-height: 36px;
}

/* Link numa linha só, cortado com "..." se não couber - o "Copiar" usa o
   endereço inteiro de qualquer jeito. */
.published-div-url > div:nth-child(1) {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-blue-plus);
	padding: 0 16px;
	border: 1px solid #dfe4ea;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Botão "Copiar" do link (copy_published_url() em form.js) - vira
   "Copiado!" em verde por 2s depois do clique. */
#published-copy {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 38px;
	padding: 0 14px;
	font-family: var(--font-montserrat);
	font-size: 13px;
	font-weight: 600;
	color: #FFFFFF;
	background-color: var(--color-blue);
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.3s ease 0s;
}

#published-copy i {
	font-size: 18px;
}

#published-copy.copied {
	background-color: var(--color-green);
}

/*
 * Botões de origem (share_origin_buttons() em my_helper.php) dos modais
 * Informações do Formulário e QR Code - o selecionado (.selected) define
 * o ?utm_source do link/QR Code, ver share_origin_init() em form.js.
 */
.share-origin {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.share-origin-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 12px;
	font-family: var(--font-montserrat);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
	background-color: #FFFFFF;
	border: 1px solid #dfe4ea;
	border-radius: 3px;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

.share-origin-item i {
	font-size: 18px;
	color: var(--color-blue);
	transition: all 0.3s ease 0s;
}

.share-origin-item:hover {
	border-color: var(--color-blue);
}

.share-origin-item.selected {
	color: #FFFFFF;
	background-color: var(--color-blue);
	border-color: var(--color-blue);
	cursor: default;
}

.share-origin-item.selected i {
	color: #FFFFFF;
}

.qrcode-origin {
	margin: 16px 20px 0 20px;
}

.qrcode-img.loading img {
	opacity: 0.35;
}

.qrcode-img {
	width: auto;
	margin: 16px auto 0 auto;
	text-align: center;
}

/* 64% (e não 80%) pra caber os botões de origem acima sem esticar o modal. */
.qrcode-img img {
	border: 0;
	width: 64%;
	transition: opacity 0.3s ease 0s;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

@media screen and (max-width: 1440px) {
	.form-web-background {
		padding: 0 3% 20px 3%;
	}

	.form-web-fields {
		padding: 0 3% 20px 3%;
	}
}

/*
 * Campo Sim/Não (Form_web_lib::field_switch()) que não cabe numa linha:
 * switch_layout() (form-web.js) mede o campo e põe .stacked - os dois
 * textos empilham e o botão fica em pé entre eles. Marcado = bolinha em
 * cima (perto do value_true), desmarcado = embaixo (value_false), o mesmo
 * lado de cada texto que na versão deitada.
 */
.form-web-field .three-columns-input-switch.stacked {
	grid-template-columns: 1fr;
	grid-row-gap: 6px;
}

.form-web-field .three-columns-input-switch.stacked > div {
	text-align: center;
}

.form-web-field .three-columns-input-switch.stacked .switch {
	width: 18px;
	height: 60px;
	margin: 4px auto;
}

.form-web-field .three-columns-input-switch.stacked .switch .button {
	top: 26px;
	left: -6px;
	margin-top: 0;
}

.form-web-field .three-columns-input-switch.stacked .switch.checked .button {
	top: 4px;
	left: -6px;
}

/* Só durante a medição: cada texto numa linha e o grid na largura natural. */
.form-web-field .three-columns-input-switch.measuring {
	width: max-content;
	grid-template-columns: max-content 60px max-content;
}

.form-web-field .three-columns-input-switch.measuring label {
	white-space: nowrap;
}

/*
 * Responsivo do formulário público (form-web.php / Form_web_lib.php).
 * Usa max-width (viewport), não max-device-width - esse último ignora
 * redimensionamento/zoom da janela, então as regras antigas aqui nunca
 * chegavam a disparar de verdade.
 */

/* Tablets e celulares */
@media screen and (max-width: 768px) {
	.form-web-header {
		padding: 24px 20px;
		min-height: 160px;
	}

	.form-web-header .title {
		font-size: 22px;
	}

	.form-web-field {
		padding: 16px;
	}

	.form-web-field input[type="text"].datepicker,
	.form-web-field input[type="text"].datepicker-time,
	.form-web-field input[type="text"].number,
	.form-web-field input[type="text"].money,
	.form-web-field input[type="text"].float,
	.form-web-field input[type="text"].cpf,
	.form-web-field input[type="text"].cnpj,
	.form-web-field input[type="text"].cep {
		max-width: 100%;
	}

	/* Grupos de rádio/checkbox em 2 colunas viram 1 coluna, mais fácil de ler */
	.form-web-field .two-columns {
		grid-template-columns: 1fr 0.8fr;
	}

	.form-web-field .image-static {
		height: 220px;
	}

	.form-web-buttom {
		height: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 10px;
	}

	.form-web-buttom button {
		float: none;
		margin: 0 !important;
	}

	.form-web-pagination {
		flex-wrap: wrap;
		gap: 20px;
	}

	.form-web-pagination .form-web-buttom {
		flex: 1 1 100%;
		flex-wrap: nowrap;
		width: 100%;
		justify-content: space-between;
	}

	.buttom {
		justify-content: center;
	}

	.buttom.close {
		width: calc(40% - 5px);
	}

	/* green: botão de salvar dos modais "Editar Formulário"/"Editar Layout"
	   (modal-form.php/modal-layout-form.php) - mesma largura do azul dos
	   modais de campo; só no rodapé do modal, sem afetar outros verdes. */
	.buttom.blue,
	.div-button.modal .buttom.green {
		width: calc(60% - 5px);
	}

	.buttom .icon {
		width: 20px;
	}

	.buttom .text {
		text-align: center;
		padding: 0;
		margin: 0;
	}

	.form-text-warning.center {
		margin-top: 10px;
	}
}

/* Celulares */
@media screen and (max-width: 480px) {
	.form-web-fields {
		padding: 0 12px 16px 12px;
	}

	.form-web-field .field-address {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	/* NPS: 0 a 5 na primeira linha, 6 a 10 na segunda. */
	.field-nps-options {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.pix-box {
		flex-direction: column;
		align-items: center;
	}

	.pix-info {
		width: 100%;
	}

	.form-web-header {
		padding: 20px 16px;
	}

	.form-web-header .title {
		font-size: 20px;
	}

	/* Altura fixa de 30px cortava o texto quando ele quebra em 2 linhas. */
	.form-text-warning {
		height: auto;
		line-height: 18px;
		padding: 6px 0;
	}

	.form-text-warning.center {
		margin-bottom: 0;
	}

	.form-web-buttom {
		width: 100%;
		justify-content: center;
	}

	.form-web-pagination {
		flex-direction: column;
		align-items: stretch;
	}

	.form-page-nav {
		width: 100%;
		justify-content: center;
	}

	.form-page-nav.invisible {
		display: none;
	}

	.form-web-buttom {
		flex-direction: column;
	}

	.form-web-pagination .form-web-buttom {
		flex: 0 0 auto;
		justify-content: flex-start;
		gap: 20px;
	}

	.buttom.close,
	.buttom.blue,
	.div-button.modal .buttom.green {
		width: 100%;
	}
}

/* Modal "Editar Layout" no celular (Form::modal_layout_form()). */
@media screen and (max-width: 640px) {
	/* 10 temas por linha ficavam finos demais - 5 por linha, 4 linhas. */
	#form-themes {
		grid-template-columns: repeat(5, 1fr);
		grid-column-gap: 12px;
		grid-row-gap: 12px;
	}

	/* Cards de fonte: 1 por linha (2 colunas deixavam o título espremido). */
	#form-fonts {
		grid-template-columns: 1fr;
		gap: 10px;
	}
}

/*
 * Edição do formulário no celular (Form_lib::load_form()): tudo numa
 * coluna só, nesta ordem - título centralizado; ícones + botão (só
 * ícone); select de tipo de campo (no lugar da lista); campos já
 * adicionados; prévia. A página rola inteira: sem altura fixa nas
 * colunas e sem mCustomScrollbar (form.js::init_form()).
 */
@media screen and (max-width: 640px) {
	#default-content {
		height: 100%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.form-main {
		height: auto;
		grid-template-rows: auto auto;
		row-gap: 12px;
	}

	/* Título na linha toda; embaixo, ícones à esquerda e botão à direita. */
	.form-top {
		grid-template-columns: 1fr auto;
		align-items: center;
		row-gap: 10px;
	}

	.form-top > div:nth-child(1) {
		grid-column: 1 / -1;
		text-align: center;
	}

	.form-top > div:nth-child(2) {
		text-align: left;
	}

	.form-top .form-date-create {
		display: none;
	}

	.form-top > div:nth-child(3) {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
	}

	.form-top > div:nth-child(3) .buttom {
		float: none;
		margin: 0;
		padding: 0 14px;
	}

	/* Sem o texto, os 200px do desktop (contra o pulo na troca dos dois)
	   deixavam o botão enorme. Por id, pra vencer a regra do desktop. */
	#button-publish,
	#button-deactive {
		min-width: 0;
	}

	.form-top > div:nth-child(3) .buttom.hide {
		display: none;
	}

	.form-top > div:nth-child(3) .buttom .text {
		display: none;
	}

	.form-content {
		grid-template-columns: 1fr;
		row-gap: 12px;
	}

	.form-content > div {
		height: auto;
	}

	.form-content > div:nth-child(1) {
		padding: 12px;
	}

	.form-content > div:nth-child(2) {
		padding: 0;
	}

	.form-content > div:nth-child(3) {
		padding: 12px;
	}

	.form-fields {
		display: none;
	}

	.form-fields-select {
		display: block;
	}

	.form-content .no-data.form-empty {
		margin-top: 30px;
		min-height: 0;
	}

	/* Link dos modais Compartilhar e "Seu formulário está no ar": mais
	   compacto pra caber ao lado do "Copiar". */
	.published-div-url > div:nth-child(1) {
		padding: 0 10px;
		font-size: 13px;
	}
}
/*
 * Modal "Seu formulário está no ar" (app/views/modal-form-published.php,
 * jBox "auto": a altura vem do .modal-inputs, ver autosize() em modal.js),
 * aberto logo depois de publicar. O link e o "Copiar" reaproveitam
 * .published-div-url / #published-copy do modal Informações.
 *
 * Entrada animada: o ícone surge com um pulo, duas ondas saem dele (como
 * sinal de transmissão) e o selo "No ar", o título e o resto sobem em
 * sequência. Com prefers-reduced-motion, tudo aparece parado.
 */
.modal-inputs.form-published {
	padding: 36px 32px 8px 32px;
	overflow-y: auto;
	overflow-x: hidden;
	font-family: var(--font-montserrat);
	color: var(--color-text);
	text-align: center;
	box-sizing: border-box;
}

.form-published-hero {
	position: relative;
	width: 72px;
	height: 72px;
	margin: 0 auto;
}

.form-published-icon {
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background-color: var(--color-green);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: form-published-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.form-published-icon i {
	font-size: 36px;
	color: #FFFFFF;
	animation: form-published-launch 0.9s ease-out 0.35s both;
}

.form-published-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--color-green);
	opacity: 0;
	animation: form-published-ring 1.6s ease-out 0.4s 2;
}

.form-published-ring.delay {
	animation-delay: 0.8s;
}

.form-published-live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 18px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #1e9e55;
	background-color: rgba(46, 204, 113, 0.12);
	border-radius: 20px;
	animation: form-published-up 0.5s ease-out 0.45s both;
}

.form-published-live span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-green);
	animation: form-published-blink 1.4s ease-in-out infinite;
}

.form-published-title {
	font-size: 22px;
	font-weight: 700;
	color: #1b2a3d;
	margin: 10px 0 4px 0;
	animation: form-published-up 0.5s ease-out 0.55s both;
}

.form-published-text {
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	margin: 0;
	animation: form-published-up 0.5s ease-out 0.65s both;
}

.form-published .published-div-url {
	margin-top: 20px;
	text-align: left;
	animation: form-published-up 0.5s ease-out 0.75s both;
}

/* WhatsApp / Abrir / QR Code - links de texto, sem caixa. */
.form-published-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 20px;
	margin-top: 14px;
	animation: form-published-up 0.5s ease-out 0.85s both;
}

.form-published-links a,
.form-published-links button,
.form-published-qrcode button {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 2px;
	font-family: var(--font-montserrat);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-text);
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
	transition: color 0.2s ease 0s;
}

.form-published-links i,
.form-published-qrcode button i {
	font-size: 18px;
}

.form-published-links a:hover,
.form-published-links button:hover,
.form-published-links button.active,
.form-published-qrcode button:hover {
	color: var(--color-blue);
}

.form-published-links a.whatsapp:hover {
	color: #1ebe5a;
}

.form-published-qrcode {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	animation: form-published-up 0.3s ease-out both;
}

.form-published-qrcode.hide {
	display: none;
}

.form-published-qrcode img {
	width: 140px;
	height: 140px;
	display: block;
}

@keyframes form-published-pop {
	from { transform: scale(0); }
	to { transform: scale(1); }
}

@keyframes form-published-launch {
	0% { transform: translate(-6px, 6px); opacity: 0; }
	60% { transform: translate(2px, -2px); opacity: 1; }
	100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes form-published-ring {
	from { transform: scale(1); opacity: 0.6; }
	to { transform: scale(1.9); opacity: 0; }
}

@keyframes form-published-up {
	from { transform: translateY(8px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

@keyframes form-published-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
	.form-published *,
	.form-published-icon,
	.form-published-icon i {
		animation: none !important;
	}
}

@media (max-width: 640px) {
	.modal-inputs.form-published {
		padding: 20px 16px 8px 16px;
	}

	.form-published-title {
		font-size: 20px;
	}
}

/*
 * Prévia do builder: cada campo é clicável (.form-web-edit,
 * Form_lib::builder_edit_wrap()) e abre a mesma edição do card da lista.
 * Uma camada transparente (::after) cobre o campo, pra o clique sempre
 * editar - testar respondendo fica no "Visualizar". isolation: isolate
 * prende os z-index de dentro (mapa Leaflet usa 400-1000) no próprio
 * campo, então a camada fica por cima deles sem vazar pro resto da tela.
 * O contorno é um ::before posicionado (não ocupa espaço: nada se mexe no
 * hover). Com outline + outline-offset o navegador somava o offset ao
 * raio e a borda ficava bem arredondada; aqui fica no --border-radius.
 */
.form-web-edit {
	position: relative;
	isolation: isolate;
	border-radius: var(--border-radius);
	cursor: pointer;
}

.form-web-edit::before {
	content: '';
	position: absolute;
	inset: -8px;
	z-index: 1001;
	border: 2px dashed transparent;
	border-radius: var(--border-radius);
	pointer-events: none;
	transition: border-color 0.2s ease 0s;
}

.form-web-edit::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1001;
}

.form-web-edit:hover::before {
	border-color: var(--color-blue);
}

.form-web-edit-badge {
	position: absolute;
	top: -14px;
	right: -8px;
	z-index: 1002;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 8px 2px 6px;
	font-family: var(--font-montserrat);
	font-size: 11px;
	font-weight: 600;
	color: #FFFFFF;
	background-color: var(--color-blue);
	border-radius: var(--border-radius);
	opacity: 0;
	transform: translateY(3px);
	transition: all 0.2s ease 0s;
}

.form-web-edit-badge i {
	font-size: 14px;
}

.form-web-edit:hover .form-web-edit-badge {
	opacity: 1;
	transform: translateY(0);
}

/* Celular: sem hover, o selo fica sempre visível pra mostrar que dá pra tocar. */
@media (hover: none) {
	.form-web-edit-badge {
		opacity: 0.85;
		transform: none;
	}
}

/*
 * Recarga da lista/prévia sem spinner (reload_form_list_items()/
 * reload_form_web(), form-crud.js): o conteúdo antigo só esmaece até o
 * novo chegar.
 */
.builder-reloading {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.2s ease 0s;
}

/* Campo recém-salvo (builder_highlight(), form-crud.js), no card e na prévia. */
.div-item.builder-saved,
.form-web-edit.builder-saved {
	animation: builder-saved 1.6s ease-out;
}

@keyframes builder-saved {
	0%, 35% { box-shadow: 0 0 0 3px rgba(31, 182, 255, 0.55); background-color: rgba(31, 182, 255, 0.08); }
	100% { box-shadow: 0 0 0 3px rgba(31, 182, 255, 0); background-color: transparent; }
}

.div-item.builder-saved {
	animation-name: builder-saved-card;
}

@keyframes builder-saved-card {
	0%, 35% { box-shadow: 0 0 0 3px rgba(31, 182, 255, 0.55); }
	100% { box-shadow: 0 0 0 3px rgba(31, 182, 255, 0); }
}

/* Aviso que some sozinho (builder_toast(), form-crud.js). */
.builder-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 100000;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px 10px 14px;
	font-family: var(--font-montserrat);
	font-size: 14px;
	font-weight: 600;
	color: #FFFFFF;
	background-color: #1b2a3d;
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transform: translate(-50%, 12px);
	transition: opacity 0.25s ease 0s, transform 0.25s ease 0s;
	pointer-events: none;
}

.builder-toast.show {
	opacity: 1;
	transform: translate(-50%, 0);
}

.builder-toast i {
	font-size: 20px;
	color: var(--color-green);
}

@media (prefers-reduced-motion: reduce) {
	.div-item.builder-saved,
	.form-web-edit.builder-saved {
		animation: none;
	}
}

/*
 * "Opções avançadas" do modal de campo (field_modal_advanced(), form.js):
 * limites, texto de exemplo, descrição, ordem aleatória e colunas,
 * recolhidos no fim dos campos, antes da dica do tipo.
 */
.field-advanced-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	height: 44px;
	margin: 0 0 16px 0;
	padding: 0 14px;
	font-family: var(--font-montserrat);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
	background-color: #f9fafc;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	box-sizing: border-box;
	transition: color 0.2s ease 0s;
}

.field-advanced-toggle i {
	font-size: 20px;
	color: var(--color-blue);
}

.field-advanced-toggle .arrow {
	margin-left: auto;
	transition: transform 0.25s ease 0s;
}

.field-advanced-toggle.open .arrow {
	transform: rotate(180deg);
}

.field-advanced-toggle:hover {
	color: #1b2a3d;
}

.field-advanced {
	margin: -8px 0 16px 0;
	padding-left: 8px;
	border-left: 1px solid var(--color-scrollbar);
}

.field-advanced.hide {
	display: none;
}

.field-advanced > * {
	margin-bottom: 16px;
}

.field-advanced > *:last-child {
	margin-bottom: 0;
}

/*
 * Modal "Compartilhar" (app/views/modal-form-info.php): origem + link e,
 * embaixo, o QR Code da mesma origem. .qrcode-origin/.qrcode-img vêm do
 * modal de QR Code; aqui só ajustam a margem e o tamanho.
 */
.share-modal .qrcode-origin {
	margin: 0;
}

.share-modal .qrcode-origin label {
	display: block;
	margin-bottom: 4px;
	padding: 0 4px;
	font-size: 14px;
	font-weight: 600;
	color: #1b2a3d;
}

/* Aviso de formulário não publicado: neutro, no azul do sistema. */
.share-unpublished {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 14px;
	padding: 12px 14px;
	font-family: var(--font-montserrat);
	font-size: 13px;
	font-weight: 500;
	line-height: 19px;
	color: #1b2a3d;
	background-color: rgba(31, 182, 255, 0.07);
	border-left: 3px solid var(--color-blue);
	border-radius: var(--border-radius);
}

.share-unpublished i {
	font-size: 20px;
	color: var(--color-blue);
}

/* QR Code à esquerda e, ao lado, o painel do canal (share_channel_update()). */
.share-qrcode {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	margin-top: 14px;
	padding: 16px;
	border: 1px solid #dfe4ea;
	border-radius: var(--border-radius);
}

.share-modal .qrcode-img {
	margin: 0;
}

.share-modal .qrcode-img img {
	width: 150px;
	height: 150px;
	display: block;
}

.share-channel {
	font-family: var(--font-montserrat);
	color: var(--color-text);
}

.share-channel-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
	color: #1b2a3d;
}

.share-channel-title i {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: var(--color-blue);
	background-color: rgba(31, 182, 255, 0.1);
}

.share-channel p {
	margin: 8px 0 14px 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 20px;
}

.share-channel-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.share-channel-send,
.share-qrcode-download {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 14px;
	font-family: var(--font-montserrat);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--border-radius);
	cursor: pointer;
	white-space: nowrap;
	box-sizing: border-box;
	transition: all 0.2s ease 0s;
}

.share-channel-send {
	color: #FFFFFF;
	background-color: var(--color-blue);
	border: 1px solid var(--color-blue);
}

.share-channel-send:hover {
	background-color: #109fe6;
}

.share-channel-send.hide {
	display: none;
}

.share-channel-send i,
.share-qrcode-download i {
	font-size: 18px;
}

.share-qrcode-download {
	color: var(--color-text);
	background-color: #FFFFFF;
	border: 1px solid #dfe4ea;
}

.share-qrcode-download i {
	color: var(--color-blue);
}

.share-qrcode-download:hover {
	border-color: var(--color-blue);
}

@media (max-width: 640px) {
	.share-qrcode {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.share-channel-title,
	.share-channel-actions {
		justify-content: center;
	}
}

/*
 * Quiz no construtor (forms.quiz = 1): coluna "Correta" da lista de
 * opções (Form_lib::field_list()) e seção "Resultado" do modal
 * Configurações (modal-form.php).
 */
.form-content .div-item .tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.modal-field.field-list-quiz .div-clone-label,
.modal-field.field-list-quiz .div-clone-list {
	grid-template-columns: 1fr 64px 28px;
}

.modal-field.field-list-quiz .div-clone-label > div:nth-child(2) label {
	text-align: center;
}

.modal-field .div-clone-list > .list-correct-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 8px;
	margin-bottom: 8px;
}

.modal-field .field-list-quiz-tip {
	margin-top: 4px;
	font-family: var(--font-montserrat);
	font-size: 12px;
	font-weight: 500;
	line-height: 17px;
	color: var(--color-text);
	opacity: 0.85;
}

.modal-quiz-result {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid #e6e9ee;
}

.modal-quiz-result-title,
.modal-quiz-result-info {
	padding: 0 24px;
}

.modal-quiz-result-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-montserrat);
	font-size: 15px;
	font-weight: 600;
	color: var(--color-purple);
}

.modal-quiz-result-title i {
	font-size: 20px;
}

.modal-quiz-result-info {
	margin: 4px 0 12px 0;
	font-family: var(--font-montserrat);
	font-size: 12px;
	font-weight: 500;
	color: var(--color-text);
}

.modal-quiz-result .two-columns-input-radio {
	margin-bottom: 6px;
}

.modal-quiz-result-warning {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 14px;
	padding: 10px 12px;
	font-family: var(--font-montserrat);
	font-size: 12px;
	font-weight: 500;
	line-height: 17px;
	color: #8a6a00;
	background-color: rgba(230, 173, 0, 0.12);
	border-radius: var(--border-radius);
}

.modal-quiz-result-warning i {
	font-size: 18px;
}

.modal-quiz-result-warning.hide {
	display: none;
}

/* Botão da tela "Exclusivo do plano Anual" do Quiz (Form_lib::quiz_anual_required()), igual ao dos Relatórios. */
.buttom-billing-upgrade {
	width: 260px;
	margin: 60px auto 0 auto;
	color: #fff;
}

.buttom-billing-upgrade i {
	color: #fff;
}

/*
 * Quiz público (Quiz_lib::render(), www/js/quiz-web.js): mesmo padrão do
 * formulário (faixa com o título na cor do tema e o cartão branco por
 * cima), mas com cartão mais estreito e uma página por vez - a inicial,
 * com as instruções e Nome/E-mail, e uma por pergunta. Na prévia do
 * construtor (.quiz-web-builder) todas as páginas ficam abertas, uma
 * embaixo da outra.
 */
.quiz-web .quiz-web-header {
	min-height: 180px;
}

.quiz-web-chip {
	display: inline-flex;
	align-items: center;
	align-self: center;
	gap: 6px;
	padding: 4px 12px;
	font-family: var(--font-montserrat);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.2);
}

.quiz-web-chip i {
	font-size: 16px;
}

.quiz-web .form-web-fields.quiz-web-fields {
	max-width: 720px;
	padding: 32px 40px 28px 40px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.quiz-web:not(.quiz-web-builder) .quiz-question {
	display: none;
}

.quiz-web-builder .quiz-web-fields > .quiz-step + .quiz-step,
.quiz-web-builder .quiz-web-fields > .form-web-edit + .form-web-edit,
.quiz-web-builder .quiz-web-fields > .quiz-step + .form-web-edit {
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px dashed #dfe4ea;
}

.quiz-web-builder .quiz-next {
	pointer-events: none;
}

/* Página inicial */
.quiz-start-instructions {
	padding: 16px 18px;
	border-left: 4px solid var(--form-theme-color, var(--color-blue));
	border-radius: var(--border-radius);
	background-color: #f9fafc;
}

.quiz-start-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-montserrat);
	font-size: 13px;
	font-weight: 700;
	color: var(--form-theme-color, var(--color-blue));
}

.quiz-start-label i {
	font-size: 18px;
}

.quiz-start-text {
	margin-top: 8px;
	font-family: var(--font-montserrat);
	font-size: 14px;
	font-weight: 500;
	line-height: 21px;
	color: var(--color-text);
}

/* Resumo da página inicial (Quiz_lib::start_step()): uma linha discreta,
   sem fundo nem borda, com ícone em cada item e "·" entre eles. */
.quiz-start-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
	margin-top: 14px;
	font-family: var(--font-montserrat);
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text);
}

.quiz-start-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.quiz-start-meta span + span::before {
	content: '·';
	margin: 0 10px;
	font-weight: 700;
	color: #b8c0cc;
}

.quiz-start-meta i {
	font-size: 16px;
	color: var(--form-theme-color, var(--color-blue));
}

/* Celular: a linha quebra, e o "·" ficaria solto no começo da de baixo. */
@media (max-width: 640px) {
	.quiz-start-meta {
		gap: 4px 14px;
	}

	.quiz-start-meta span + span::before {
		display: none;
	}
}

.quiz-start-fields .form-web-field:first-child {
	margin-top: 22px;
}

.quiz-empty {
	margin-top: 22px;
	padding: 18px;
	font-family: var(--font-montserrat);
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	color: var(--color-text);
	border: 1.5px dashed #dfe4ea;
	border-radius: var(--border-radius);
}

/* Pergunta: título, barra de tempo, opções e a paginação "1/8". */
.quiz-web .form-web-field.quiz-field {
	margin: 0;
	padding: 0;
	background-color: transparent;
}

.quiz-question-title {
	font-family: var(--form-theme-font, var(--font-montserrat));
	font-size: calc(22px * var(--form-theme-font-scale, 1));
	font-weight: var(--form-theme-font-weight, 600);
	line-height: 1.35;
	color: #2b3445;
	word-break: break-word;
}

.quiz-question-description {
	margin-top: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--color-text);
}

.quiz-timer {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
}

.quiz-timer-bar {
	flex: 1;
	height: 8px;
	border-radius: 4px;
	background-color: #E9ECF1;
	overflow: hidden;
}

.quiz-timer-bar span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	background-color: var(--form-theme-color, var(--color-blue));
	transition: width 0.1s linear, background-color 0.3s ease;
}

.quiz-timer-text {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	min-width: 64px;
	font-size: 14px;
	font-weight: 700;
	color: var(--form-theme-color, var(--color-blue));
	font-variant-numeric: tabular-nums;
}

.quiz-timer-text i {
	font-size: 18px;
}

.quiz-hurry .quiz-timer-bar span,
.quiz-locked .quiz-timer-bar span {
	background-color: var(--color-red);
}

.quiz-hurry .quiz-timer-text,
.quiz-locked .quiz-timer-text {
	color: var(--color-red);
}

.quiz-instruction {
	margin: 20px 0 10px 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: #8a93a3;
}

.quiz-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.quiz-option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border: 1.5px solid #E3E6EA;
	border-radius: 10px;
	background-color: #FFF;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.quiz-option:hover {
	border-color: var(--form-theme-color, var(--color-blue));
}

.quiz-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.quiz-option-letter {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-text);
	border-radius: 50%;
	background-color: #F1F3F6;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.quiz-options-checkbox .quiz-option-letter {
	border-radius: 8px;
}

.quiz-option-text {
	flex: 1;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	color: #2b3445;
	word-break: break-word;
}

.quiz-option-check {
	font-size: 22px;
	color: var(--form-theme-color, var(--color-blue));
	opacity: 0;
	transition: opacity 0.15s ease;
}

.quiz-option.selected {
	border-color: var(--form-theme-color, var(--color-blue));
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.quiz-option.selected .quiz-option-letter {
	color: #FFF;
	background-color: var(--form-theme-color, var(--color-blue));
}

.quiz-option.selected .quiz-option-check {
	opacity: 1;
}

.quiz-option input:focus-visible ~ .quiz-option-letter {
	outline: 2px solid var(--form-theme-color, var(--color-blue));
	outline-offset: 2px;
}

.quiz-ranking .field-ranking-item {
	padding: 8px 14px 8px 8px;
	border-radius: 10px;
}

.quiz-ranking .field-ranking-name {
	font-size: 15px;
	font-weight: 600;
	color: #2b3445;
}

.quiz-locked .quiz-option,
.quiz-locked .field-ranking-item {
	cursor: not-allowed;
	opacity: 0.55;
}

.quiz-locked .quiz-option.selected {
	opacity: 1;
}

.quiz-timeout {
	display: none;
	align-items: flex-start;
	gap: 8px;
	margin-top: 16px;
	padding: 12px 14px;
	font-family: var(--font-montserrat);
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: var(--color-red);
	border-radius: var(--border-radius);
	background-color: rgba(220, 76, 100, 0.08);
}

.quiz-timeout i {
	font-size: 20px;
}

.quiz-locked .quiz-timeout {
	display: flex;
}

.quiz-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid #EEF0F3;
}

.quiz-counter {
	font-family: var(--font-montserrat);
	font-size: 15px;
	font-weight: 700;
	color: var(--form-theme-color, var(--color-blue));
	font-variant-numeric: tabular-nums;
}

.quiz-web .quiz-next {
	background-color: var(--form-theme-color, var(--color-blue));
}

.quiz-web .quiz-next[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

@media (max-width: 640px) {
	.quiz-web .form-web-fields.quiz-web-fields {
		padding: 24px 18px 20px 18px;
	}

	.quiz-question-title {
		font-size: calc(19px * var(--form-theme-font-scale, 1));
	}

	.quiz-option {
		padding: 10px 12px;
		gap: 12px;
	}
}

/* Ordenação do quiz no modal (Form_lib::field_list()): alça | opção | remover. */
.modal-field.field-list-quiz-order .div-clone-label,
.modal-field.field-list-quiz-order .div-clone-list {
	grid-template-columns: 28px 1fr 28px;
	grid-column-gap: 10px;
}

.modal-field.field-list-quiz-order .div-clone-list > div {
	padding-bottom: 8px;
	margin-bottom: 8px;
}

.modal-field .list-move {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9aa3b2;
	cursor: grab;
}

.modal-field .list-move i {
	font-size: 22px;
}

.modal-field.field-list-quiz-order .div-clone-list.ui-sortable-helper {
	background-color: #FFF;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.form-content .div-item .tag-quiz-time {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 8px;
	font-family: var(--font-montserrat);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--color-purple);
	background-color: rgba(115, 88, 189, 0.1);
	border-radius: var(--border-radius);
}

.form-content .div-item .tag-quiz-time i {
	font-size: 14px;
}

/* O cartão da opção é um <label> dentro de .form-web-field: anula o
   label/span genéricos do campo (bloco, itálico, margens). */
.form-web-field label.quiz-option {
	display: flex;
	margin-bottom: 0;
	font-family: var(--font-montserrat);
	font-size: 15px;
	font-weight: 600;
}

.form-web-field label.quiz-option span {
	margin-bottom: 0;
	font-style: normal;
}

.form-web-field label.quiz-option .quiz-option-letter {
	display: flex;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.form-web-field label.quiz-option .quiz-option-text {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
}

/*
 * Modais do construtor travado (app/views/modal-form-lock.php): mesmo
 * esqueleto do "Seu formulário está no ar" (.form-published), em rosa no
 * 'locked' (o mesmo do botão de pausar) e em azul no 'paused'.
 */
.form-lock-locked .form-published-icon {
	background-color: var(--color-pink);
}

.form-lock-locked .form-published-ring {
	border-color: var(--color-pink);
}

.form-lock-locked .form-published-title {
	margin-top: 18px;
}

.form-lock-locked .form-published-icon i,
.form-lock-paused .form-published-icon i {
	animation: none;
}

.form-lock-paused .form-published-icon {
	background-color: var(--color-blue);
}

.form-lock-paused .form-published-ring {
	border-color: var(--color-blue);
}

.form-lock-paused-badge {
	color: #8a6400;
	background-color: rgba(246, 196, 69, 0.2);
}

.form-lock-paused-badge span {
	background-color: #E9B93A;
	animation: none;
}

.form-lock-free {
	margin: 4px 0 0 0;
	font-size: 12px;
	font-weight: 500;
	color: #8a93a3;
	animation: form-published-up 0.5s ease-out 0.7s both;
}

.form-lock-answers {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 18px 0 8px 0;
	padding: 12px 14px;
	font-size: 13px;
	font-weight: 500;
	line-height: 19px;
	text-align: left;
	color: var(--color-text);
	border: 1px solid #cfe9f7;
	border-radius: var(--border-radius);
	background-color: #eaf7ff;
	animation: form-published-up 0.5s ease-out 0.8s both;
}

.form-lock-answers i {
	font-size: 20px;
	color: var(--color-blue);
}

.form-lock-answers a {
	color: var(--color-blue);
	font-weight: 600;
	white-space: nowrap;
}

.form-lock + .div-button .buttom + .buttom {
	margin-left: 10px;
}