/**
 * Form baseline — every club form on the site (scoped to .mfc-form, the
 * <form> built by Services\Forms\FormMarkup).
 *
 * Generic only: each form's own layout lives in its own stylesheet
 * (e.g. components/registration-forms.css). Inputs are styled through the
 * theme's own control classes (.mfc-input, .mfc-choices), so no Bootstrap
 * class is overridden.
 *
 * 1. Fields (wrapper, label, required mark, help text)
 * 2. Text inputs, selects, textareas
 * 3. Checkboxes, radios & acceptance
 * 4. Validation tips & status line
 * 5. Turnstile
 * 6. Privacy notice
 * 7. Honeypot
 * 8. Submit
 * 9. Responsive
 */

/* ============================ FIELDS ============================ */
.mfc-form .mfc-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
}

.mfc-form .mfc-field__label {
	display: block;
	font-size: var(--fs-24);
	font-weight: var(--font-weight-bold);
	line-height: 1.55;
	color: var(--heading-color);
}

.mfc-form .mfc-req {
	color: var(--primary-color);
}

.mfc-form .mfc-field__help {
	display: block;
	padding-top: var(--space-2);
	font-size: var(--fs-24);
	font-weight: var(--font-weight-regular);
	line-height: 1.4;
	color: var(--text-color);
}

.mfc-form .mfc-control-wrap {
	position: relative;
	display: block;
}

/* ============================ TEXT INPUTS, SELECTS, TEXTAREAS ============================ */
.mfc-form .mfc-input {
	display: block;
	width: 100%;
	min-height: calc(73 * var(--u));
	padding: var(--space-16) calc(22 * var(--u));
	font-family: var(--font-primary);
	font-size: var(--fs-24);
	font-weight: var(--font-weight-regular);
	line-height: 1.2;
	color: var(--heading-color);
	background-color: var(--white);
	border: var(--stroke) solid var(--border-color);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.mfc-form .mfc-select {
	min-height: calc(67 * var(--u));
	padding-right: var(--space-56);
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--heading-color) 50%), linear-gradient(135deg, var(--heading-color) 50%, transparent 50%);
	background-position: calc(100% - var(--space-28)) 50%, calc(100% - var(--space-20)) 50%;
	background-size: var(--space-8) var(--space-8), var(--space-8) var(--space-8);
	background-repeat: no-repeat;
	cursor: pointer;
}

.mfc-form .mfc-input--textarea {
	min-height: calc(130 * var(--u));
	resize: vertical;
}

.mfc-form .mfc-input::placeholder {
	color: var(--text-color);
	opacity: 1;
}

.mfc-form .mfc-input:focus {
	outline: none;
	border-color: var(--heading-color);
	box-shadow: 0 0 0 var(--stroke-bold) var(--primary-tint);
}

.mfc-form .mfc-input[readonly] {
	color: var(--text-color);
	background-color: var(--white);
	cursor: default;
}

/* ============================ CHECKBOXES, RADIOS & ACCEPTANCE ============================ */
.mfc-form .mfc-list-item {
	margin: 0;
}

.mfc-form :is(.mfc-choices--acceptance, .mfc-choices--checkbox) label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-16);
	font-size: var(--fs-24);
	line-height: 1.45;
	color: var(--heading-color);
	cursor: pointer;
}

.mfc-form :is(.mfc-choices--acceptance, .mfc-choices--checkbox) input[type="checkbox"] {
	flex: none;
	width: calc(30 * var(--u));
	height: calc(30 * var(--u));
	min-width: 20px;
	min-height: 20px;
	margin: var(--space-4) 0 0;
	accent-color: var(--primary-color);
	cursor: pointer;
}

.mfc-form :is(.mfc-choices--acceptance, .mfc-choices--checkbox) .mfc-list-item-label a {
	font-weight: var(--font-weight-bold);
	color: var(--heading-color);
	text-decoration: underline;
}

.mfc-form :is(.mfc-choices--acceptance, .mfc-choices--checkbox) .mfc-list-item-label a:hover {
	color: var(--primary-color);
}

/* ============================ VALIDATION TIPS & STATUS LINE ============================ */
.mfc-form [aria-invalid="true"] {
	border-color: var(--primary-color);
}

.mfc-form .mfc-error-tip {
	display: block;
	margin-top: var(--space-8);
	font-size: var(--fs-20);
	font-weight: var(--font-weight-medium);
	line-height: 1.4;
	color: var(--primary-color);
}

.mfc-form .sp-form-status {
	margin: var(--space-28) 0 0;
	padding: var(--space-16) var(--space-20);
	font-size: var(--fs-20);
	line-height: 1.45;
	color: var(--heading-color);
	border: var(--stroke) solid var(--primary-color);
	border-radius: var(--radius-md);
	background: var(--primary-tint);
}

.mfc-form .sp-form-status:empty {
	display: none;
}

/* ============================ TURNSTILE ============================ */
.mfc-form .mfc-turnstile {
	min-height: 65px; /* the widget's own height, so the submit row does not jump */
}

/* ============================ PRIVACY NOTICE ============================ */
.mfc-form .form-privacy {
	padding: var(--space-16) var(--space-20);
	font-size: var(--fs-18);
	line-height: 1.5;
	color: var(--text-color);
	background: var(--light-bg);
	border-left: var(--stroke-bold) solid var(--border-strong);
	border-radius: var(--radius-sm);
}

.mfc-form .form-privacy p + p {
	margin-top: var(--space-8);
}

.mfc-form .form-privacy a {
	font-weight: var(--font-weight-medium);
	color: var(--heading-color);
	text-decoration: underline;
}

.mfc-form .form-privacy a:hover {
	color: var(--primary-color);
}

/* ============================ HONEYPOT ============================ */
.mfc-form .mfc-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================ SUBMIT ============================ */
.mfc-form .mfc-submit {
	cursor: pointer;
}

.mfc-form .mfc-submit:disabled {
	cursor: progress;
	opacity: 0.7;
}

/* ============================ RESPONSIVE ============================ */

/* --- SM / Mobile --- */
@media (max-width: 768px) {
	.mfc-form .mfc-input {
		min-height: 52px;
		padding: 12px 14px;
		font-size: 16px;
	}

	.mfc-form .mfc-select {
		padding-right: 40px;
		background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
		background-size: 6px 6px, 6px 6px;
	}

	.mfc-form .mfc-input--textarea {
		min-height: 120px;
	}
}