/**
 * Contact Form 7 — estilo 21BRZ.
 *
 * Vale para qualquer formulário do CF7 dentro do widget. Tudo que o painel
 * controla passa por custom properties da raiz; os padrões são os do
 * formulário do tema Redox: campos só com a linha de baixo, texto branco e
 * botão branco em pílula que se enche de preto no hover.
 *
 * @package Brz_Elements
 * @since   1.4.0
 */

.brz-cf7 {
	--brzcf-cols: 2;
	--brzcf-col-gap: 60px;
	--brzcf-row-gap: 60px;
	--brzcf-color: #ffffff;
	--brzcf-placeholder: #ffffff;
	--brzcf-border: #ffffff;
	--brzcf-focus: currentColor;
	--brzcf-error: #ff8a80;
	--brzcf-success: #b9f6ca;
	--brzcf-acceptance: #999999;
	--brzcf-btn-color: #111111;
	--brzcf-btn-bg: #ffffff;
	--brzcf-btn-border: #ffffff;
	--brzcf-btn-fill: #111111;
	--brzcf-btn-hover-color: #ffffff;
	color: var(--brzcf-color);
	font-family: "DM Sans", sans-serif;
}

.brz-cf7 .wpcf7-form>p {
	margin: 0;
}

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

.brz-cf7 .brz-cf7-grid {
	display: grid;
	grid-template-columns: repeat(var(--brzcf-cols), minmax(0, 1fr));
	gap: var(--brzcf-row-gap) var(--brzcf-col-gap);
}

.brz-cf7 .brz-cf7-full {
	grid-column: 1 / -1;
}

.brz-cf7 .brz-cf7-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 767px) {
	.brz-cf7 {
		--brzcf-cols: 1;
		--brzcf-row-gap: 40px;
	}
}

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

/* O <label> que envolve cada campo (para o leitor de tela) é inline por
   padrão e encolheria o campo até o tamanho do atributo size. */
.brz-cf7 label,
.brz-cf7 .wpcf7-form-control-wrap {
	display: block;
}

.brz-cf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):not([type="file"]),
.brz-cf7 select,
.brz-cf7 textarea {
	display: block;
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 0 0 12px;
	border: 0;
	border-bottom: 1px solid var(--brzcf-border);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--brzcf-color);
	font: inherit;
	font-size: 18px;
	line-height: 1.4;
	transition: border-color 0.3s;
	-webkit-appearance: none;
	appearance: none;
}

.brz-cf7 textarea {
	min-height: 150px;
	resize: vertical;
}

.brz-cf7 input::placeholder,
.brz-cf7 textarea::placeholder {
	color: var(--brzcf-placeholder);
	opacity: 1;
}

.brz-cf7 input:focus,
.brz-cf7 select:focus,
.brz-cf7 textarea:focus {
	outline: none;
	border-bottom-color: var(--brzcf-focus);
}

.brz-cf7 input:focus-visible,
.brz-cf7 select:focus-visible,
.brz-cf7 textarea:focus-visible {
	box-shadow: 0 1px 0 0 var(--brzcf-focus);
}

.brz-cf7 .wpcf7-not-valid {
	border-bottom-color: var(--brzcf-error) !important;
}

.brz-cf7 .wpcf7-not-valid-tip {
	margin-top: 8px;
	color: var(--brzcf-error);
	font-size: 14px;
}

/* Aceite -------------------------------------------------------------- */

.brz-cf7 .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.brz-cf7 .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}

.brz-cf7 .wpcf7-list-item-label {
	color: var(--brzcf-acceptance);
	font-size: 16px;
	line-height: 1.4;
}

.brz-cf7 .wpcf7-list-item-label a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.brz-cf7 input[type="checkbox"] {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 3px 0 0;
	border: 1px solid var(--brzcf-color);
	border-radius: 2px;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.brz-cf7 input[type="checkbox"]:checked {
	background: var(--brzcf-color);
	box-shadow: inset 0 0 0 3px var(--brzcf-btn-color);
}

.brz-cf7 input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--brzcf-focus);
	outline-offset: 2px;
}

/* Botão ---------------------------------------------------------------
 *
 * O mesmo efeito do "21BRZ effect" do Botão do Elementor: o preenchimento
 * sobe de baixo e o texto rola, com a cópia de hover vindo de um
 * text-shadow. O [submit] comum do CF7 (um <input>) recebe o visual e o
 * preenchimento, mas não o texto rolando — input não aceita filho.
 */

.brz-cf7 .brz-cf7-submit,
.brz-cf7 .wpcf7-submit {
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-top: 48px;
	padding: 26px 42px;
	border: 1px solid var(--brzcf-btn-border);
	border-radius: 100px;
	background: var(--brzcf-btn-bg);
	color: var(--brzcf-btn-color);
	font-family: "DM Sans", sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	cursor: pointer;
	transition: background-color 0.5s, color 0.5s;
}

.brz-cf7 .brz-cf7-submit::before {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	z-index: -1;
	height: 0;
	background: var(--brzcf-btn-fill);
	transition: height 0.5s;
}

/* O span externo é o recorte, e fica parado; o interno é o texto que rola. */
.brz-cf7 .brz-cf7-submit__text {
	display: inline-block;
	overflow: hidden;
}

.brz-cf7 .brz-cf7-submit__text>span {
	display: inline-block;
	text-shadow: 0 1.5em 0 var(--brzcf-btn-hover-color);
	transition: transform 0.5s;
}

.brz-cf7 .brz-cf7-submit:hover::before,
.brz-cf7 .brz-cf7-submit:focus-visible::before {
	height: 100%;
}

.brz-cf7 .brz-cf7-submit:hover .brz-cf7-submit__text>span,
.brz-cf7 .brz-cf7-submit:focus-visible .brz-cf7-submit__text>span {
	transform: translateY(-1.5em);
}

.brz-cf7 .wpcf7-submit:hover,
.brz-cf7 .wpcf7-submit:focus-visible {
	background: var(--brzcf-btn-fill);
	color: var(--brzcf-btn-hover-color);
}

.brz-cf7 .brz-cf7-submit:focus-visible,
.brz-cf7 .wpcf7-submit:focus-visible {
	outline: 2px solid var(--brzcf-focus);
	outline-offset: 3px;
}

/* Enviando: o botão avisa que está ocupado e não aceita novo clique. */
.brz-cf7 .wpcf7-form.submitting .brz-cf7-submit,
.brz-cf7 .wpcf7-form.submitting .wpcf7-submit {
	opacity: 0.6;
	pointer-events: none;
	cursor: progress;
}

.brz-cf7 .wpcf7-spinner {
	margin: 48px 0 0 16px;
	vertical-align: top;
}

/* Mensagens ----------------------------------------------------------- */

.brz-cf7 .wpcf7 form .wpcf7-response-output {
	margin: 30px 0 0;
	padding: 16px 20px;
	border: 1px solid currentColor;
	border-radius: 12px;
	font-size: 16px;
}

.brz-cf7 .wpcf7 form.invalid .wpcf7-response-output,
.brz-cf7 .wpcf7 form.unaccepted .wpcf7-response-output,
.brz-cf7 .wpcf7 form.failed .wpcf7-response-output,
.brz-cf7 .wpcf7 form.aborted .wpcf7-response-output,
.brz-cf7 .wpcf7 form.spam .wpcf7-response-output {
	border-color: var(--brzcf-error);
	color: var(--brzcf-error);
}

.brz-cf7 .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--brzcf-success);
	color: var(--brzcf-success);
}

@media (prefers-reduced-motion: reduce) {

	.brz-cf7 .brz-cf7-submit,
	.brz-cf7 .brz-cf7-submit::before,
	.brz-cf7 .brz-cf7-submit__text>span,
	.brz-cf7 .wpcf7-submit {
		transition: none;
	}
}

.brz-cf7__empty {
	padding: 24px;
	border: 1px dashed currentColor;
	text-align: center;
	opacity: 0.6;
}