/* =========================================================================
   Fluent Forms — brand styling
   Targets Fluent Forms' own CSS classes (.fluentform, .ff-el-form-control,
   .ff-btn-submit, etc.) so ANY form embedded anywhere on the site via the
   Fluentform block/shortcode picks up consistent branding automatically —
   no per-page setup needed. Purely additive: these classes only exist
   where a Fluent Forms shortcode is actually rendered, so this cannot
   affect any other page or element.
   ========================================================================= */

.fluentform {
	max-width: 460px;
	font-family: var(--typography-family-body, "Sora", system-ui, sans-serif);
}

/* Apply to the outer Columns block (not either individual column) to
   tighten the gap between text and form — doesn't resize either column,
   just reduces the space between them. align-items: flex-start stops
   WordPress's default equal-height-columns stretch, so the pink card
   sizes to its own content instead of matching the taller text column. */
.toa-columns-tight {
	column-gap: clamp(0.5rem, 2vw, 1.5rem) !important;
	align-items: flex-start !important;
}

/* Reusable wrapper card — apply "toa-form-card" as an Additional CSS
   class on the Group block wrapping a heading + Fluentform block, to get
   the light-pink padded card look. Purely opt-in: only affects a block
   that's explicitly given this class, so no existing layout changes. */
.toa-form-card {
	background: var(--primary-pink-pink-100, #FFF2F8) !important;
	padding: clamp(1rem, 2vw, 1.25rem) !important;
	border-radius: 12px;
	max-width: 480px;
	margin: clamp(2rem, 5vw, 4rem) auto;
}

/* Use alongside "toa-form-card" (both classes together) when the form
   sits inside a two-column layout next to text — removes the
   auto-centering so the card hugs the shared column gap instead of
   centering within its own half, matching the Content + Collage block's
   side-by-side spacing pattern. Also adds top/right spacing (matching
   .toa-content-copy's outer padding) and slightly smaller fields, scoped
   only to this variant — the standalone /contact-form page keeps its own
   sizing untouched. */
.toa-form-card.toa-form-card--inline {
	margin: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 7vw, 5.5rem) 0 0;
	max-width: 460px;
	width: auto;
	padding: 1.5rem !important;
}
.toa-form-card--inline .fluentform {
	max-width: none !important;
}
.toa-form-card--inline .ff-el-group {
	margin-bottom: 1rem !important;
}
.toa-form-card--inline .ff-el-input--label label {
	font-size: 0.875rem !important;
	margin-bottom: 0.3rem !important;
}
.toa-form-card--inline .ff-el-form-control {
	padding: 0.65rem 0.9rem !important;
	font-size: 0.9375rem !important;
	border-radius: 8px !important;
}
.toa-form-card--inline textarea.ff-el-form-control {
	min-height: 110px !important;
}
.toa-form-card--inline .ff-btn-submit {
	padding: 0.7rem 1.75rem !important;
	font-size: 0.9375rem !important;
	gap: 0.5rem !important;
}
.toa-form-card h2,
.toa-form-card h3 {
	margin: 0 0 1rem;
	color: var(--primary-purple-purple-900, #410064);
	font-family: var(--typography-family-display, "Sora", system-ui, sans-serif);
	font-weight: 800;
	font-size: 1.5rem;
}
.toa-form-card .fluentform {
	max-width: none;
}

.fluentform .ff-el-group {
	margin-bottom: 0.85rem;
}

.fluentform .ff-el-input--label label {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--typography-family-body, "Sora", system-ui, sans-serif);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--primary-pink-pink-500, #FF3F8F);
}
.fluentform .ff-el-input--label .ff_asterik {
	color: var(--primary-purple-purple-900, #410064);
}

.fluentform .ff-el-form-control {
	width: 100%;
	padding: 0.45rem 0.7rem;
	border: 1px solid var(--neutral-100, #DEDEDE);
	border-radius: 6px;
	font-family: var(--typography-family-body, "Sora", system-ui, sans-serif);
	font-size: 0.8125rem;
	color: var(--primary-purple-purple-900, #410064);
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fluentform textarea.ff-el-form-control {
	min-height: 80px;
	resize: vertical;
}
.fluentform .ff-el-form-control:focus {
	outline: none;
	border-color: var(--primary-pink-pink-500, #FF3F8F);
	box-shadow: 0 0 0 3px rgba(255, 63, 143, 0.15);
}
.fluentform .ff-el-form-control::placeholder {
	color: var(--neutral-400, #9C9C9C);
}

/* Checkbox / radio labels */
.fluentform .ff-el-form-check-label {
	font-family: var(--typography-family-body, "Sora", system-ui, sans-serif);
	font-size: 0.8125rem;
	color: var(--primary-purple-purple-900, #410064);
}
.fluentform input[type="checkbox"],
.fluentform input[type="radio"] {
	accent-color: var(--primary-pink-pink-500, #FF3F8F);
}

/* Submit button — matches the pill CTA style used elsewhere on the site.
   !important guards against Fluent Forms' own per-form "Form Styler"
   color settings, which can inject inline styles on duplicated forms. */
.fluentform .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1.4rem;
	border: none !important;
	border-radius: 999px !important;
	background: var(--primary-pink-pink-500, #FF3F8F) !important;
	color: var(--primary-purple-purple-900, #410064) !important;
	font-family: var(--typography-family-display, "Sora", system-ui, sans-serif);
	font-weight: 700;
	font-size: 0.8125rem;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.fluentform .ff-btn-submit:hover {
	background: var(--primary-purple-purple-900, #410064) !important;
	color: #fff !important;
}
.fluentform .ff-btn-submit.disabled,
.fluentform .ff-btn-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Validation + success messaging */
.fluentform .text-danger,
.fluentform .error {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.75rem;
	color: #D02B2B;
}
.fluentform .ff-el-is-error .ff-el-form-control {
	border-color: #D02B2B;
}
.ff-message-success {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	background: var(--primary-pink-pink-100, #FFF2F8);
	color: var(--primary-purple-purple-900, #410064);
	font-family: var(--typography-family-body, "Sora", system-ui, sans-serif);
	font-weight: 600;
	font-size: 0.875rem;
}