/*
 * MYMOU Core — Fluent Forms. Loaded only on pages that show a form (after Fluent Forms' own stylesheet).
 * Colours and sizes come from the theme tokens. The few !important flags are needed because Fluent Forms
 * writes the submit button colours from its form settings as inline styles.
 */

/* Submit button: same look as the theme's buttons, full width, with an arrow. */
.fluentform .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	width: 100%;
	padding: 1.1rem 2.5em;
	border: 0 !important;
	border-radius: var(--wp--preset--border-radius--pill) !important;
	background-color: var(--wp--preset--color--brand) !important;
	color: var(--wp--preset--color--text-inverse) !important;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	letter-spacing: .03em;
	cursor: pointer;
	opacity: 1;
	transition: background-color .3s ease, transform .3s ease;
}
.fluentform .ff-btn-submit::after {
	content: "\2192"; /* → */
	font-size: 1.15em;
	line-height: 1;
	transition: transform .3s ease;
}
.fluentform .ff-btn-submit:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--brand-hover) !important;
	opacity: 1;
	transform: translateY(-1px);
}
.fluentform .ff-btn-submit:hover::after { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
	.fluentform .ff-btn-submit,
	.fluentform .ff-btn-submit::after { transition: none; transform: none; }
}

/* Privacy / consent text */
.fluentform .ff_t_c p {
	font-size: 80%;
	line-height: 1.6;
}

/* Checkbox vertically aligned with its label */
.fluentform .ff-el-form-check-label .ff-el-form-check-input { top: 0; }

/* Phone field (intl-tel-input): full width, prefix reads like placeholder text, list in the form's type. */
.ff-default .iti { width: 100%; }
.ff-default .iti input,
.ff-default .iti__country-list,
.ff-default .iti__country,
.ff-default .iti__country-name { font-family: inherit; font-size: var(--wp--preset--font-size--small); }
.ff-default :is(.iti__flag-container, .iti__country-container) { display: flex; align-items: center; padding-left: 12px; }
/* The MYMOU international phone field shows the country in its own box (flag + code): no second flag inside the
   number field. The rule above is for Fluent Forms' own phone field; without this one it showed the flag again. */
.ff-default .ff-intl-phone-split .iti__country-container { display: none; }
/* Its country box in the site's type and colours (the plugin's defaults are Leptokaridou's). */
.fluentform .ff-intl-phone-split {
	--ff-phone-font-family: inherit;
	--ff-phone-font-size: inherit;
	--ff-phone-font-weight: 400;
	--ff-phone-text-color: var(--wp--preset--color--text-body);
	--ff-phone-focus-color: var(--wp--preset--color--brand);
	--ff-phone-focus-ring: var(--wp--preset--color--brand-subtle);
}
.ff-default .iti__selected-dial-code {
	display: flex;
	align-items: center;
	height: 100%;
	position: relative;
	top: 1px;
	color: var(--wp--preset--color--text-muted);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}
.ff-default .iti--separate-dial-code input { padding-left: 90px; }
.ff-default .iti input:focus { outline: none; }
.ff-default .iti input:hover { border-color: inherit; }
.ff-default .iti__dial-code { font-size: .8125rem; color: var(--wp--preset--color--text-muted); }
.ff-default .iti__country:hover { background-color: var(--wp--preset--color--surface-accent); }
.ff-default .iti__country.iti__highlight { background-color: var(--wp--preset--color--surface-hero); }

/* ---------- Phones (up to 767px) ---------- */
@media (max-width: 767px) {
	/* A blue box (Card — Accent) holding a form, as on Kontakt: on phones the blue stays behind the text only and the
	   form's white card sits below it at the full width of the section, so the form is not squeezed by three
	   paddings (section + blue box + card). Desktop and tablet keep the form inside the blue box. */
	.wp-block-group.is-style-card-accent:has(.fluentform) {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		color: inherit;
	}
	.is-style-card-accent:has(.fluentform) > .wp-block-columns > .wp-block-column:not(:has(.fluentform)) {
		padding: var(--wp--preset--spacing--60);
		border-radius: var(--wp--preset--border-radius--lg);
		background-color: var(--wp--preset--color--brand);
		box-shadow: var(--wp--preset--shadow--card);
		color: var(--wp--preset--color--text-inverse);
	}
	.is-style-card-accent:has(.fluentform) .is-style-card:has(.fluentform) { padding: 1.5rem 1.25rem; }

	/* Fields: the site's font at 16px (smaller text makes phones zoom in when a field is tapped), 48px high. */
	.fluentform .ff-el-group { margin-bottom: 1.25rem; }
	.fluentform .ff-el-input--label { margin-bottom: .375rem; }
	.fluentform .ff-el-input--label label {
		font-size: .9375rem;
		font-weight: 600;
		color: var(--wp--preset--color--text-heading);
	}
	.fluentform .ff-el-form-control {
		box-sizing: border-box;
		min-height: 3rem;
		padding: .75rem 1rem;
		border-radius: var(--wp--preset--border-radius--sm);
		font-family: inherit;
		font-size: 1rem;
		line-height: 1.4;
	}
	.fluentform textarea.ff-el-form-control { min-height: 8rem; }
	.fluentform .ff-el-form-control::placeholder { color: var(--wp--preset--color--text-muted); opacity: 1; }
	.fluentform .ff-intl-phone-split { gap: .5rem; }
	.fluentform .ff-intl-phone-national { padding-left: 1rem !important; } /* the plugin sets .75rem with !important */
	.fluentform .error { margin-top: .375rem; font-size: .8125rem; }

	/* Consent: a larger box, lined up with the first line of its text. */
	.fluentform .ff_t_c p,
	.fluentform .ff-el-tc label { font-size: .875rem; line-height: 1.55; }
	.fluentform .ff_tc_checkbox { padding-right: .75rem; vertical-align: top; } /* Fluent Forms lays the box and text out as table cells */
	.fluentform .ff-el-form-check-label .ff-el-form-check-input { width: 1.25rem; height: 1.25rem; margin: .05rem 0 0; }
}