/*
 * MindMonks — WPForms presentation layer
 *
 * WPForms handles processing, validation, notifications and spam protection.
 * This file makes its output wear the MindMonks design system instead of the
 * plugin's own look. Every value below is taken from the theme's own form
 * components in assets/css/components.css, so the two stay in step.
 *
 * Everything is scoped to .mindmonks-form. Nothing here targets a bare
 * input, label, button or textarea, so no other plugin or page can be
 * affected. WPForms plugin files are never modified.
 */

/* --------------------------------------------------------------------------
   Container — the theme's .mm-form-panel already draws the card, so the
   plugin's own container must contribute nothing visual.
   -------------------------------------------------------------------------- */

.mindmonks-form.mindmonks-form { min-width: 0; }

.mindmonks-form.mindmonks-form .wpforms-container,
.mindmonks-form.mindmonks-form .wpforms-container-full {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--mm-font-body);
	color: var(--mm-text-primary);
}

.mindmonks-form.mindmonks-form .wpforms-form {
	display: flex;
	flex-direction: column;
	gap: var(--mm-space-md);
	width: 100%;
	min-width: 0;
}

.mindmonks-form.mindmonks-form .wpforms-field-container {
	display: flex;
	flex-direction: column;
	gap: var(--mm-space-md);
	min-width: 0;
}

/* One field = the theme's .mm-field */
.mindmonks-form.mindmonks-form .wpforms-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.mindmonks-form.mindmonks-form .wpforms-field fieldset {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

/* WPForms' anti-spam decoy fields must never become visible. Its own JS
   inlines styles on the ones it injects; this covers any rendered server-side. */
.mindmonks-form.mindmonks-form .wpforms-field:has(> input[aria-hidden="true"]),
.mindmonks-form.mindmonks-form .wpforms-field:has(> label[aria-hidden="true"]) {
	position: absolute !important;
	left: -9000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   Labels — the theme's .mm-field__label
   -------------------------------------------------------------------------- */

.mindmonks-form.mindmonks-form .wpforms-field-label,
.mindmonks-form.mindmonks-form legend.wpforms-field-label {
	display: block;
	float: none;
	margin: 0;
	padding: 0;
	font-family: var(--mm-font-body);
	font-size: var(--mm-text-sm);
	font-weight: var(--mm-weight-semibold);
	line-height: var(--mm-leading-normal);
	color: var(--mm-teal-800);
	text-transform: none;
	letter-spacing: normal;
}

/* The required asterisk — the theme's .mm-req */
.mindmonks-form.mindmonks-form .wpforms-required-label {
	color: var(--mm-error);
	margin-left: 0.15em;
	font-weight: inherit;
}

/* Help text — the theme's .mm-field__hint. order:1 keeps it under the control. */
.mindmonks-form.mindmonks-form .wpforms-field-description,
.mindmonks-form.mindmonks-form .wpforms-field-sublabel {
	order: 1;
	margin: 0;
	padding: 0;
	font-size: var(--mm-text-xs);
	line-height: var(--mm-leading-normal);
	color: var(--mm-text-muted);
	font-style: normal;
}

/* --------------------------------------------------------------------------
   Text controls — the theme's .mm-input / .mm-select / .mm-textarea
   -------------------------------------------------------------------------- */

.mindmonks-form.mindmonks-form .wpforms-field input[type="text"],
.mindmonks-form.mindmonks-form .wpforms-field input[type="email"],
.mindmonks-form.mindmonks-form .wpforms-field input[type="tel"],
.mindmonks-form.mindmonks-form .wpforms-field input[type="url"],
.mindmonks-form.mindmonks-form .wpforms-field input[type="number"],
.mindmonks-form.mindmonks-form .wpforms-field input[type="password"],
.mindmonks-form.mindmonks-form .wpforms-field input[type="date"],
.mindmonks-form.mindmonks-form .wpforms-field input[type="time"],
.mindmonks-form.mindmonks-form .wpforms-field select,
.mindmonks-form.mindmonks-form .wpforms-field textarea {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	min-height: var(--mm-tap-target);
	margin: 0;
	padding: 0.7rem 0.9rem;
	font-family: var(--mm-font-body);
	/* 16px minimum stops iOS Safari zooming the page on focus */
	font-size: max(16px, var(--mm-text-sm));
	line-height: var(--mm-leading-normal);
	color: var(--mm-text-primary);
	background: var(--mm-surface);
	border: 1px solid var(--mm-border-strong);
	border-radius: var(--mm-radius-sm);
	box-shadow: none;
	transition:
		border-color var(--mm-duration-fast, 160ms) var(--mm-ease-soft, ease),
		box-shadow var(--mm-duration-fast, 160ms) var(--mm-ease-soft, ease);
	-webkit-appearance: none;
	appearance: none;
}

.mindmonks-form.mindmonks-form .wpforms-field textarea {
	min-height: 8rem;
	resize: vertical;
}

/* Compact controls stay compact rather than stretching the full panel width */
.mindmonks-form.mindmonks-form .wpforms-field input.wpforms-field-small {
	max-width: 15rem;
}

.mindmonks-form.mindmonks-form .wpforms-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23545a55' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 0.7rem;
	padding-right: 2.4rem;
}

.mindmonks-form.mindmonks-form .wpforms-field input:focus,
.mindmonks-form.mindmonks-form .wpforms-field select:focus,
.mindmonks-form.mindmonks-form .wpforms-field textarea:focus {
	outline: none;
	border-color: var(--mm-teal-500);
	box-shadow: var(--mm-shadow-focus);
}

.mindmonks-form.mindmonks-form .wpforms-field input::placeholder,
.mindmonks-form.mindmonks-form .wpforms-field textarea::placeholder {
	color: var(--mm-text-muted);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Radios and checkboxes — the theme's .mm-check
   The native control is redrawn because accent-color leaves the box filled
   with the browser's own near-black in several engines.
   -------------------------------------------------------------------------- */

.mindmonks-form.mindmonks-form .wpforms-field-radio ul,
.mindmonks-form.mindmonks-form .wpforms-field-checkbox ul,
.mindmonks-form.mindmonks-form .wpforms-field-payment-multiple ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.mindmonks-form.mindmonks-form .wpforms-field-radio li,
.mindmonks-form.mindmonks-form .wpforms-field-checkbox li,
.mindmonks-form.mindmonks-form .wpforms-field-payment-multiple li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin: 0;
	padding-block: 0.35rem;
	min-height: var(--mm-tap-target);
	min-width: 0;
}

.mindmonks-form.mindmonks-form .wpforms-field input[type="checkbox"],
.mindmonks-form.mindmonks-form .wpforms-field input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	width: 1.3rem;
	height: 1.3rem;
	margin: 0.12rem 0 0;
	padding: 0;
	border: 1.5px solid var(--mm-border-strong);
	border-radius: var(--mm-radius-xs);
	background: transparent;
	cursor: pointer;
	box-shadow: none;
	transition:
		background var(--mm-duration-fast, 160ms) var(--mm-ease-soft, ease),
		border-color var(--mm-duration-fast, 160ms) var(--mm-ease-soft, ease),
		border-width var(--mm-duration-fast, 160ms) var(--mm-ease-soft, ease);
}

.mindmonks-form.mindmonks-form .wpforms-field input[type="radio"] { border-radius: 50%; }

.mindmonks-form.mindmonks-form .wpforms-field li:hover input[type="checkbox"],
.mindmonks-form.mindmonks-form .wpforms-field li:hover input[type="radio"] {
	border-color: var(--mm-teal-300);
}

.mindmonks-form.mindmonks-form .wpforms-field input[type="checkbox"]:checked {
	border-color: var(--mm-teal-600);
	background: var(--mm-teal-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m3.5 8.4 3 3 6-6.6'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}

.mindmonks-form.mindmonks-form .wpforms-field input[type="radio"]:checked {
	border-color: var(--mm-teal-600);
	border-width: 0.42rem;
}

.mindmonks-form.mindmonks-form .wpforms-field input[type="checkbox"]:focus-visible,
.mindmonks-form.mindmonks-form .wpforms-field input[type="radio"]:focus-visible {
	outline: 2px solid var(--mm-teal-600);
	outline-offset: 3px;
	box-shadow: none;
}

.mindmonks-form.mindmonks-form .wpforms-field-label-inline {
	margin: 0;
	padding: 0;
	font-family: var(--mm-font-body);
	font-size: var(--mm-text-sm);
	font-weight: 400;
	line-height: var(--mm-leading-normal);
	color: var(--mm-text-secondary);
	cursor: pointer;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Validation — errors sit directly under their own field, in the theme's
   error colour, and are small enough not to shift the layout.
   -------------------------------------------------------------------------- */

.mindmonks-form.mindmonks-form .wpforms-field label.wpforms-error,
.mindmonks-form.mindmonks-form .wpforms-field em.wpforms-error {
	order: 2;
	display: block;
	margin: 0;
	padding: 0;
	font-family: var(--mm-font-body);
	font-size: var(--mm-text-xs);
	font-weight: var(--mm-weight-medium);
	font-style: normal;
	line-height: 1.45;
	color: var(--mm-error);
}

.mindmonks-form.mindmonks-form .wpforms-field input.wpforms-error,
.mindmonks-form.mindmonks-form .wpforms-field select.wpforms-error,
.mindmonks-form.mindmonks-form .wpforms-field textarea.wpforms-error,
.mindmonks-form.mindmonks-form .wpforms-has-error input[type="text"],
.mindmonks-form.mindmonks-form .wpforms-has-error input[type="email"],
.mindmonks-form.mindmonks-form .wpforms-has-error input[type="number"],
.mindmonks-form.mindmonks-form .wpforms-has-error select,
.mindmonks-form.mindmonks-form .wpforms-has-error textarea {
	border-color: var(--mm-error);
	background-color: var(--mm-error-soft);
}

/* A checkbox or radio group in error: tint the controls, not the whole block */
.mindmonks-form.mindmonks-form .wpforms-has-error input[type="checkbox"],
.mindmonks-form.mindmonks-form .wpforms-has-error input[type="radio"] {
	border-color: var(--mm-error);
}

/* Form-level error notice — the theme's .mm-note, error flavour */
.mindmonks-form.mindmonks-form .wpforms-error-container,
.mindmonks-form.mindmonks-form .wpforms-error-noscript {
	margin: 0;
	padding: var(--mm-space-sm) var(--mm-space-md);
	border: 1px solid var(--mm-error);
	border-radius: var(--mm-radius-md, 16px);
	background: var(--mm-error-soft);
	color: var(--mm-error);
	font-size: var(--mm-text-sm);
	font-weight: var(--mm-weight-medium);
	line-height: var(--mm-leading-normal);
}

/* --------------------------------------------------------------------------
   Submit — the theme's .mm-btn.mm-btn--primary, exactly
   -------------------------------------------------------------------------- */

.mindmonks-form.mindmonks-form .wpforms-submit-container {
	margin: 0;
	padding: 0;
}

.mindmonks-form.mindmonks-form button.wpforms-submit,
.mindmonks-form.mindmonks-form input[type="submit"].wpforms-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--mm-space-2xs, 0.5rem);
	width: 100%;
	/* .mm-btn--lg — the size the booking plugin's own primary CTA uses, so the
	   contact form's button is identical to the one on the booking form. */
	min-height: 52px;
	margin: 0;
	padding: 0.95rem 1.85rem;
	font-family: var(--mm-font-body);
	font-size: var(--mm-text-base);
	font-weight: var(--mm-weight-semibold);
	letter-spacing: 0.01em;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	color: var(--mm-on-primary);
	background: var(--mm-primary);
	border: 1px solid transparent;
	border-radius: var(--mm-radius-pill);
	box-shadow: var(--mm-shadow-sm);
	cursor: pointer;
	text-transform: none;
	transition:
		background-color var(--mm-duration-base, 240ms) var(--mm-ease-soft, ease),
		color var(--mm-duration-base, 240ms) var(--mm-ease-soft, ease),
		box-shadow var(--mm-duration-base, 240ms) var(--mm-ease-soft, ease),
		transform var(--mm-duration-base, 240ms) var(--mm-ease-calm, ease);
}

.mindmonks-form.mindmonks-form button.wpforms-submit:hover,
.mindmonks-form.mindmonks-form input[type="submit"].wpforms-submit:hover {
	background: var(--mm-primary-hover);
	color: var(--mm-on-primary);
	box-shadow: var(--mm-shadow-md, 0 6px 20px rgba(1, 37, 28, 0.09));
	transform: translateY(-1px);
}

.mindmonks-form.mindmonks-form button.wpforms-submit:active {
	transform: translateY(0);
}

.mindmonks-form.mindmonks-form button.wpforms-submit:focus-visible {
	outline: 2px solid var(--mm-teal-600);
	outline-offset: 3px;
}

/* Loading and disabled — matches .mm-btn[disabled] / .mm-btn.is-loading */
.mindmonks-form.mindmonks-form button.wpforms-submit[disabled],
.mindmonks-form.mindmonks-form button.wpforms-submit.wpforms-disabled,
.mindmonks-form.mindmonks-form button.wpforms-submit.mm-is-loading {
	opacity: 0.62;
	pointer-events: none;
	transform: none;
	box-shadow: var(--mm-shadow-sm);
}

.mindmonks-form.mindmonks-form button.wpforms-submit.mm-is-loading::after {
	content: "";
	width: 1em;
	height: 1em;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-right-color: transparent;
	animation: mm-spin 0.8s linear infinite;
}

/* The plugin's own spinner GIF would sit beside our spinner — hide it */
.mindmonks-form.mindmonks-form .wpforms-submit-spinner {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.mindmonks-form.mindmonks-form button.wpforms-submit,
	.mindmonks-form.mindmonks-form .wpforms-field input,
	.mindmonks-form.mindmonks-form .wpforms-field select,
	.mindmonks-form.mindmonks-form .wpforms-field textarea {
		transition: none;
	}
	.mindmonks-form.mindmonks-form button.wpforms-submit:hover { transform: none; }
	.mindmonks-form.mindmonks-form button.wpforms-submit.mm-is-loading::after { animation: none; }
}

/* --------------------------------------------------------------------------
   Success — a MindMonks note, not a plugin box
   -------------------------------------------------------------------------- */

.mindmonks-form.mindmonks-form .wpforms-confirmation-container,
.mindmonks-form.mindmonks-form .wpforms-confirmation-container-full {
	margin: 0;
	padding: var(--mm-space-sm) var(--mm-space-md);
	border: 1px solid var(--mm-teal-300);
	border-left: 3px solid var(--mm-teal-600);
	border-radius: var(--mm-radius-md, 16px);
	background: var(--mm-surface-muted);
	color: var(--mm-text-secondary);
	font-family: var(--mm-font-body);
	font-size: var(--mm-text-sm);
	line-height: var(--mm-leading-normal);
	box-shadow: none;
}

.mindmonks-form.mindmonks-form .wpforms-confirmation-container p,
.mindmonks-form.mindmonks-form .wpforms-confirmation-container-full p {
	margin: 0 0 0.65rem;
	color: inherit;
}

.mindmonks-form.mindmonks-form .wpforms-confirmation-container p:last-child,
.mindmonks-form.mindmonks-form .wpforms-confirmation-container-full p:last-child {
	margin-bottom: 0;
}

.mindmonks-form.mindmonks-form .wpforms-confirmation-container strong,
.mindmonks-form.mindmonks-form .wpforms-confirmation-container-full strong {
	color: var(--mm-teal-800);
	font-weight: var(--mm-weight-semibold);
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 30rem) {
	.mindmonks-form.mindmonks-form button.wpforms-submit,
	.mindmonks-form.mindmonks-form input[type="submit"].wpforms-submit {
		display: flex;
		width: 100%;
	}

	.mindmonks-form.mindmonks-form .wpforms-field input.wpforms-field-small {
		max-width: 100%;
	}
}