/**
 * RUD - Questionários (transportadores / elevadores de canecas)
 * Estilos do formulário Contact Form 7 com grupos condicionais e validação.
 */

.rud-quest {
	--rud-azul: #1f4e96;
	--rud-azul-claro: #4472c4;
	--rud-borda: #c9d2e0;
	--rud-fundo-campo: #eef2f9;
	--rud-erro: #d32f2f;
	--rud-erro-fundo: #fdf3f3;
	--rud-texto: #333;

	max-width: 980px;
	margin: 0 auto;
	font-size: 15px;
	color: var(--rud-texto);
}

.rud-quest *,
.rud-quest *::before,
.rud-quest *::after {
	box-sizing: border-box;
}

/* Títulos e seções ------------------------------------------------------ */

.rud-quest__titulo {
	margin: 0 0 4px;
	font-size: 24px;
	font-weight: 700;
	color: var(--rud-azul);
}

.rud-quest__intro {
	margin: 0 0 24px;
	font-size: 14px;
	color: #666;
}

.rud-secao {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
}

.rud-secao__titulo {
	margin: 28px 0 14px;
	padding-bottom: 8px;
	font-size: 17px;
	font-weight: 700;
	color: var(--rud-azul);
	text-align: center;
	border-bottom: 1px solid var(--rud-borda);
}

.rud-subsecao__titulo {
	margin: 22px 0 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--rud-azul);
}

/* Grade ----------------------------------------------------------------- */

.rud-linha {
	display: grid;
	gap: 8px 18px;
	margin-bottom: 12px;
	grid-template-columns: 1fr;
}

@media ( min-width: 700px ) {
	.rud-linha--2 {
		grid-template-columns: repeat( 2, 1fr );
	}

	.rud-linha--3 {
		grid-template-columns: repeat( 3, 1fr );
	}
}

/* Campos ---------------------------------------------------------------- */

.rud-campo {
	position: relative;
	display: block;
	margin-bottom: 12px;
}

.rud-campo > .rud-rotulo,
.rud-rotulo {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: #2b2b2b;
}

.rud-obrig {
	color: var(--rud-erro);
	font-weight: 700;
}

/* "*" que só acende quando a condição (Retrofit) é atendida. */
.rud-obrig-cond {
	display: none;
	color: var(--rud-erro);
	font-weight: 700;
}

.rud-campo--obrigatorio .rud-obrig-cond {
	display: inline;
}

.rud-nota {
	font-size: 11px;
	color: #7a7a7a;
	vertical-align: super;
}

.rud-quest .wpcf7-form-control-wrap {
	display: block;
}

.rud-quest input[type="text"],
.rud-quest input[type="email"],
.rud-quest input[type="tel"],
.rud-quest input[type="url"],
.rud-quest input[type="number"],
.rud-quest select,
.rud-quest textarea {
	width: 100%;
	padding: 9px 11px;
	font-size: 15px;
	font-family: inherit;
	color: var(--rud-texto);
	background-color: var(--rud-fundo-campo);
	border: 1px solid var(--rud-borda);
	border-radius: 3px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rud-quest input[type="file"] {
	width: 100%;
	padding: 7px 0;
	font-size: 14px;
}

.rud-quest input:focus,
.rud-quest select:focus,
.rud-quest textarea:focus {
	outline: 0;
	border-color: var(--rud-azul-claro);
	box-shadow: 0 0 0 3px rgba( 68, 114, 196, 0.15 );
	background-color: #fff;
}

/* Campo com unidade (mm, kW, t/h...) ------------------------------------ */

.rud-campo--unidade .rud-controle {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rud-campo--unidade .rud-controle > .wpcf7-form-control-wrap {
	flex: 1 1 auto;
	min-width: 0;
}

.rud-unidade {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 600;
	color: #5a6270;
	white-space: nowrap;
}

/* Radios e checkboxes simples ------------------------------------------- */

.rud-quest .wpcf7-radio,
.rud-quest .wpcf7-checkbox,
.rud-quest .wpcf7-acceptance {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	padding-top: 2px;
}

.rud-quest .wpcf7-list-item {
	margin: 0;
}

.rud-quest .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	font-weight: 400;
	cursor: pointer;
}

.rud-quest .wpcf7-list-item input[type="radio"],
.rud-quest .wpcf7-list-item input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--rud-azul-claro);
	cursor: pointer;
}

.rud-quest .wpcf7-list-item-label {
	line-height: 1.3;
}

/* Opções em card com imagem --------------------------------------------- */

.rud-campo--cards .wpcf7-radio {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
}

@media ( min-width: 640px ) {
	.rud-campo--cards .wpcf7-radio {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.rud-campo--cards .rud-card {
	border: 1px solid var(--rud-borda);
	border-radius: 4px;
	background-color: #fbfcfe;
	transition: border-color 0.15s ease, box-shadow 0.15s ease,
		background-color 0.15s ease;
}

.rud-campo--cards .rud-card:hover {
	border-color: var(--rud-azul-claro);
}

.rud-campo--cards .rud-card--ativo {
	border-color: var(--rud-azul);
	background-color: #f2f6fd;
	box-shadow: 0 0 0 2px rgba( 31, 78, 150, 0.18 );
}

.rud-campo--cards .rud-card label {
	display: block;
	padding: 12px 14px 14px;
	font-weight: 600;
	color: var(--rud-azul);
}

.rud-campo--cards .rud-card input[type="radio"] {
	float: left;
	margin-right: 8px;
}

.rud-card__figura {
	display: block;
	clear: both;
	padding-top: 10px;
	text-align: center;
}

.rud-card__figura img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	max-height: 190px;
	mix-blend-mode: multiply;
}

/* Figura ilustrativa (não é opção) -------------------------------------- */

.rud-figura {
	margin: 0 0 16px;
	padding: 12px;
	text-align: center;
	background-color: #fbfcfe;
	border: 1px solid var(--rud-borda);
	border-radius: 4px;
}

.rud-figura img {
	max-width: 100%;
	height: auto;
	max-height: 230px;
}

.rud-figura figcaption {
	margin-top: 8px;
	font-size: 12px;
	color: #777;
}

/* Grupos condicionais --------------------------------------------------- */

.rud-grupo {
	margin: 4px 0 18px;
	padding: 16px 18px 6px;
	background-color: #f7f9fd;
	border: 1px solid var(--rud-borda);
	border-left: 3px solid var(--rud-azul-claro);
	border-radius: 3px;
}

.rud-grupo[hidden] {
	display: none !important;
}

.rud-grupo__titulo {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--rud-azul);
}

/* Erros ----------------------------------------------------------------- */

.rud-campo.rud-erro > .rud-rotulo,
.rud-campo.rud-erro .rud-rotulo {
	color: var(--rud-erro);
}

.rud-campo.rud-erro input[type="text"],
.rud-campo.rud-erro input[type="email"],
.rud-campo.rud-erro input[type="tel"],
.rud-campo.rud-erro input[type="url"],
.rud-campo.rud-erro input[type="number"],
.rud-campo.rud-erro select,
.rud-campo.rud-erro textarea {
	border-color: var(--rud-erro);
	background-color: var(--rud-erro-fundo);
	box-shadow: 0 0 0 2px rgba( 211, 47, 47, 0.12 );
}

.rud-campo.rud-erro .wpcf7-radio,
.rud-campo.rud-erro .wpcf7-checkbox {
	padding: 6px 8px;
	border: 1px solid var(--rud-erro);
	border-radius: 3px;
	background-color: var(--rud-erro-fundo);
}

.rud-campo--cards.rud-erro .wpcf7-radio {
	padding: 10px;
}

.rud-msg-erro {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--rud-erro);
}

.rud-resumo-erros {
	margin: 0 0 20px;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 600;
	color: #8a1f1f;
	background-color: var(--rud-erro-fundo);
	border: 1px solid var(--rud-erro);
	border-radius: 3px;
}

.rud-resumo-erros[hidden] {
	display: none;
}

/* Mensagens nativas do CF7 no mesmo padrão visual ----------------------- */

.rud-quest .wpcf7-not-valid-tip {
	margin-top: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--rud-erro);
}

.rud-quest .wpcf7-not-valid {
	border-color: var(--rud-erro) !important;
	background-color: var(--rud-erro-fundo) !important;
}

/* Anexos ---------------------------------------------------------------- */

.rud-anexos {
	display: grid;
	gap: 10px 18px;
	grid-template-columns: 1fr;
}

@media ( min-width: 700px ) {
	.rud-anexos {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.rud-anexos__aviso {
	margin: 0 0 10px;
	font-size: 13px;
	color: #777;
}

/* Rodapé / envio -------------------------------------------------------- */

.rud-quest__rodape {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--rud-borda);
}

.rud-legenda {
	margin: 0;
	font-size: 13px;
	color: var(--rud-erro);
}

.rud-quest input[type="submit"],
.rud-quest .wpcf7-submit {
	padding: 12px 42px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background-color: var(--rud-azul);
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.rud-quest input[type="submit"]:hover,
.rud-quest .wpcf7-submit:hover {
	background-color: var(--rud-azul-claro);
}

.rud-quest .wpcf7-spinner {
	margin: 0 0 0 10px;
}