/**
 * Fluent Forms — bloco Gutenberg (fluentfom/guten-block).
 *
 * O plugin adiciona .ff_guten_block no <form> (shortcode do bloco).
 * Usar .ff_guten_block no <form> (não depender do wrapper .wp-block-fluentfom-guten-block).
 */

@media (min-width: 481px) {
	.fluentform_wrapper_2 .ff-el-group,
	#fluentform_2 .ff-el-group {
		margin-bottom: 0;
	}
}

.fluentform .ff-el-form-control {
	border: 1px solid #b3b3b3;
	border-radius: 8px;
	padding: 10.5px 24px;
	font-family: inherit;
	color: #b3b3b3;
	background-color: transparent;
	font-size: 16px;
}

.fluentform .ff-el-form-control::placeholder {
	color: #b3b3b3;
	opacity: 1;
}

/*
 * Newsletter (form 2) no fundo on-accent (#373737):
 * o bloco Fluent Forms injeta customCss inline com 4 classes
 * (ff_guten_block-2 ou ff_guten_block_2) e color #7f7f7f — ~2.97:1, falha AA.
 * Precisa especificidade ≥ a desse inline; o footer em produção pode ainda
 * vir do template part no banco (não só de parts/footer.html).
 */
.has-on-accent-background-color .fluentform.fluentform_wrapper_2.ff_guten_block.ff_guten_block-2 .ff-el-form-control,
.has-on-accent-background-color .fluentform.fluentform_wrapper_2.ff_guten_block.ff_guten_block_2 .ff-el-form-control,
.has-on-accent-background-color .fluentform.fluentform_wrapper_2.ff_guten_block.ff_guten_block-2 .ff-el-input--content input,
.has-on-accent-background-color .fluentform.fluentform_wrapper_2.ff_guten_block.ff_guten_block_2 .ff-el-input--content input,
.has-on-accent-background-color .fluentform.fluentform_wrapper_2.ff_guten_block.ff_guten_block-2 .ff-el-input--content textarea,
.has-on-accent-background-color .fluentform.fluentform_wrapper_2.ff_guten_block.ff_guten_block_2 .ff-el-input--content textarea,
.has-on-accent-background-color .fluentform.fluentform_wrapper_2.ff_guten_block.ff_guten_block-2 .ff-el-input--content select,
.has-on-accent-background-color .fluentform.fluentform_wrapper_2.ff_guten_block.ff_guten_block_2 .ff-el-input--content select,
.fluentform.fluentform_wrapper_2.ff_guten_block.ff_guten_block-2 .ff-el-form-control,
.fluentform.fluentform_wrapper_2.ff_guten_block.ff_guten_block_2 .ff-el-form-control,
.fluentform.fluentform_wrapper_2.ff_guten_block.ff_guten_block-2 .ff-el-input--content input,
.fluentform.fluentform_wrapper_2.ff_guten_block.ff_guten_block_2 .ff-el-input--content input {
	color: #b3b3b3;
	border-color: #b3b3b3;
	background-color: transparent;
}

.has-on-accent-background-color .fluentform.fluentform_wrapper_2.ff_guten_block.ff_guten_block-2 .ff-el-form-control::placeholder,
.has-on-accent-background-color .fluentform.fluentform_wrapper_2.ff_guten_block.ff_guten_block_2 .ff-el-form-control::placeholder,
.fluentform.fluentform_wrapper_2.ff_guten_block.ff_guten_block-2 .ff-el-form-control::placeholder,
.fluentform.fluentform_wrapper_2.ff_guten_block.ff_guten_block_2 .ff-el-form-control::placeholder {
	color: #b3b3b3;
	opacity: 1;
}

.has-on-accent-background-color .fluentform.fluentform_wrapper_2.ff_guten_block.ff_guten_block-2 .ff-el-form-control:focus,
.has-on-accent-background-color .fluentform.fluentform_wrapper_2.ff_guten_block.ff_guten_block_2 .ff-el-form-control:focus,
.fluentform.fluentform_wrapper_2.ff_guten_block.ff_guten_block-2 .ff-el-form-control:focus,
.fluentform.fluentform_wrapper_2.ff_guten_block.ff_guten_block_2 .ff-el-form-control:focus {
	color: #b3b3b3;
	background-color: transparent;
}

.ff_guten_block .ff_submit_btn_wrapper_custom .ff-btn-submit,
.ff_guten_block .ff_submit_btn_wrapper_custom button,
.ff_guten_block .ff_submit_btn_wrapper .ff-btn-submit,
.ff_guten_block .ff_submit_btn_wrapper button,
.ff_guten_block .ff-t-cell .ff_submit_btn_wrapper_custom .ff-btn-submit,
.ff_guten_block .ff-t-cell .ff_submit_btn_wrapper_custom button,
.ff_guten_block .ff-t-cell .ff_submit_btn_wrapper .ff-btn-submit,
.ff_guten_block .ff-t-cell .ff_submit_btn_wrapper button {
    margin-bottom: 0 !important;
    padding: 12px 32px;
	line-height: 1;
  }

/*
 * Submit: o plugin usa .ff_submit_btn_wrapper e/ou .ff_submit_btn_wrapper_custom.
 * Nem sempre o botão está dentro de .ff-t-cell (só em layouts em colunas).
 * No breakpoint 768px+ o CSS do Fluent Forms costuma impor margin no botão.
 */
@media (max-width: 480px) {
	.fluentform .ff_submit_btn_wrapper_custom.ff-text-left,
	.ff_guten_block .ff_submit_btn_wrapper_custom.ff-text-left,
	.ff_guten_block .ff_submit_btn_wrapper_custom {
		text-align: center !important;
	}
}

@media (min-width: 768px) {
	.ff_guten_block .ff_submit_btn_wrapper_custom,
	.ff_guten_block .ff_submit_btn_wrapper,
	.ff_guten_block .ff-t-cell .ff_submit_btn_wrapper_custom,
	.ff_guten_block .ff-t-cell .ff_submit_btn_wrapper {
		margin-bottom: 0 !important;
	}
}

/*
 * FluentForms dentro de layout flex do FSE:
 * no DOM, o flex item costuma ser o wrapper `.fluentform.ff_guten_block`.
 * Garantimos que este item expanda e não trave a largura por causa de min-width.
 */
.is-layout-flex > .fluentform.ff_guten_block,
.is-layout-flex > .ff_guten_block.fluentform {
	flex: 1 1 auto;
	min-width: 0;
	align-self: stretch;
}

.is-layout-flex > .fluentform.ff_guten_block .frm-fluent-form,
.is-layout-flex > .ff_guten_block.fluentform .frm-fluent-form {
	width: 100%;
}

/*
 * Submit com seta (mesmo asset do core/button):
 * adiciona ::after no botão .ff-btn-submit para ficar consistente com o layout.
 * Vale para todos os submits dentro do bloco.
 */
.ff_guten_block .ff_submit_btn_wrapper_custom button.ff-btn-submit,
.ff_guten_block .ff_submit_btn_wrapper button.ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.61em;
}

.ff_guten_block .ff_submit_btn_wrapper_custom button.ff-btn-submit::after,
.ff_guten_block .ff_submit_btn_wrapper button.ff-btn-submit::after {
	content: "";
	display: block;
	flex-shrink: 0;
	width: 12px;
	height: 11px;
	margin-inline-start: 0.24em;
	background-color: currentColor;
	-webkit-mask-image: url("../../images/button-arrow-right.svg");
	mask-image: url("../../images/button-arrow-right.svg");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}