/*
 * HClinic design system - 6/7 forms
 * Fluent Forms (booking form, id 3 and others) and the Ultimate Addons modal that hosts them.
 *
 * Presentation only: form IDs, field names, validation, Turnstile and submit handlers are
 * untouched. Fluent Forms enqueues its CSS while the shortcode renders, so it prints after this
 * file; every rule is therefore scoped with form.frm-fluent-form (and uses !important for the
 * handful of properties Fluent's per-form "styler" <style> block also sets with !important).
 *
 * Three deliberate accessibility choices: inputs are 16px (iOS Safari zooms the page when a
 * focused field is smaller); the field border is --hc-field-border (3.4:1 on white) rather than
 * the lighter #cbd5e1 (1.5:1), because WCAG 1.4.11 asks 3:1 for the edge of a form control; and
 * the focus ring is a visible 3px halo plus a border colour change, not a faint tint.
 */

/* ==========================================================================================
   Layout and labels
   ========================================================================================== */

form.frm-fluent-form .ff-el-group {
	margin-bottom: var(--hc-space-4);
}

form.frm-fluent-form .ff-el-input--label label {
	display: block;
	margin-bottom: .375rem;
	color: var(--hc-slate-text);
	font-family: var(--hc-font);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.4;
}

form.frm-fluent-form .ff-el-is-required.asterisk-right label::after,
form.frm-fluent-form .ff-el-is-required.asterisk-left label::before {
	color: var(--hc-alert);
}

/* ==========================================================================================
   Fields
   ========================================================================================== */

form.frm-fluent-form .ff-el-form-control,
form.frm-fluent-form input[type="text"],
form.frm-fluent-form input[type="email"],
form.frm-fluent-form input[type="tel"],
form.frm-fluent-form input[type="number"],
form.frm-fluent-form select,
form.frm-fluent-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 3rem;
	padding: 12px 14px !important;
	border: 1.5px solid var(--hc-field-border) !important;
	border-radius: 10px !important;
	background: #f8fafc !important;
	box-shadow: none !important;
	color: var(--hc-slate-text);
	font-family: var(--hc-font);
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color var(--hc-duration-fast) var(--hc-ease-standard),
		background-color var(--hc-duration-fast) var(--hc-ease-standard),
		box-shadow var(--hc-duration-fast) var(--hc-ease-standard);
}

form.frm-fluent-form textarea {
	min-height: 7rem;
	resize: vertical;
}

form.frm-fluent-form .ff-el-form-control::placeholder {
	color: var(--hc-slate-muted);
	opacity: 1;
}

form.frm-fluent-form .ff-el-form-control:hover {
	border-color: var(--hc-slate-muted) !important;
}

form.frm-fluent-form .ff-el-form-control:focus,
form.frm-fluent-form input:focus,
form.frm-fluent-form select:focus,
form.frm-fluent-form textarea:focus {
	border-color: var(--hc-blue-vivid) !important;
	background: #fff !important;
	box-shadow: 0 0 0 3px rgba(2, 132, 199, .25) !important;
	outline: none;
}

/* Consent checkbox row */
form.frm-fluent-form .ff-el-form-check {
	margin: 0;
}

form.frm-fluent-form .ff-el-form-check-label {
	display: flex;
	align-items: flex-start;
	gap: .625rem;
	color: var(--hc-slate-muted);
	font-size: .875rem;
	line-height: 1.5;
}

form.frm-fluent-form .ff-el-form-check-input {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin: .125rem 0 0;
	accent-color: var(--hc-blue-primary);
}

/* ==========================================================================================
   Validation and result messages
   ========================================================================================== */

form.frm-fluent-form .ff-el-is-error .ff-el-form-control {
	border-color: var(--hc-alert) !important;
	background: var(--hc-alert-surface) !important;
}

form.frm-fluent-form .ff-el-is-error .ff-el-form-control:focus {
	box-shadow: 0 0 0 3px rgba(180, 35, 24, .22) !important;
}

form.frm-fluent-form .error.text-danger,
form.frm-fluent-form .ff-el-is-error .text-danger {
	margin-top: .375rem;
	color: var(--hc-alert);
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.4;
}

.ff-message-success,
.ff-errors-in-stack {
	margin-top: var(--hc-space-4);
	padding: var(--hc-space-4);
	border-radius: var(--hc-radius-md);
	font-size: .9375rem;
	line-height: 1.5;
}

.ff-message-success {
	border: 1px solid #a7f3d0;
	background: #ecfdf5;
	color: #065f46;
}

.ff-errors-in-stack:not(:empty) {
	border: 1px solid #fecaca;
	background: var(--hc-alert-surface);
	color: var(--hc-alert);
}

.ff-errors-in-stack:empty {
	display: none;
}

/* Cloudflare Turnstile placeholder keeps its own size; just space it. */
form.frm-fluent-form .ff-el-turnstile {
	margin: var(--hc-space-2) 0 var(--hc-space-4);
}

/* ==========================================================================================
   Submit
   ========================================================================================== */

form.frm-fluent-form .ff_submit_btn_wrapper {
	margin: var(--hc-space-4) 0 0;
}

form.frm-fluent-form .ff-btn.ff-btn-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 12rem;
	min-height: 3rem;
	padding: 0 1.75rem !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: linear-gradient(180deg, #2a82cf 0%, var(--hc-blue-primary) 100%) !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 6px 14px -4px rgba(30, 115, 190, .35) !important;
	color: #fff !important;
	cursor: pointer;
	font-family: var(--hc-font);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	transition: transform var(--hc-duration-fast) var(--hc-ease-standard),
		box-shadow var(--hc-duration-normal) var(--hc-ease-standard),
		background-color var(--hc-duration-fast) var(--hc-ease-standard);
}

form.frm-fluent-form .ff-btn.ff-btn-submit:hover {
	background: linear-gradient(180deg, var(--hc-blue-primary) 0%, var(--hc-blue-primary-dark) 100%) !important;
	box-shadow: var(--hc-shadow-hover) !important;
	transform: translateY(-1px);
}

form.frm-fluent-form .ff-btn.ff-btn-submit:active {
	box-shadow: 0 1px 2px rgba(15, 23, 42, .12) !important;
	transform: translateY(0) scale(.98);
}

form.frm-fluent-form .ff-btn.ff-btn-submit[disabled],
form.frm-fluent-form .ff-btn.ff-btn-submit.ff-working {
	cursor: progress;
	opacity: .7;
	transform: none;
}

@media (max-width: 600px) {
	form.frm-fluent-form .ff-btn.ff-btn-submit {
		width: 100%;
	}
}

/* ==========================================================================================
   Booking modal (Ultimate Addons .ult_modal): a card, not a grey square
   The saved markup sets a square 2px #333 border and a #a8a8a8 body inline.
   ========================================================================================== */

.ult_modal .ult_modal-content {
	overflow: hidden;
	border: 0 !important;
	border-radius: var(--hc-radius-lg) !important;
	background: var(--hc-card-bg);
	box-shadow: 0 24px 60px -12px rgba(10, 25, 47, .35);
}

.ult_modal .ult_modal-header {
	padding: var(--hc-space-4) var(--hc-space-5);
	border-bottom: 1px solid var(--hc-border-subtle) !important;
	color: var(--hc-navy-deep) !important;
}

.ult_modal .ult_modal-title {
	margin: 0;
	color: var(--hc-navy-deep);
	font-family: var(--hc-font);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}

.ult_modal .ult_modal-body {
	padding: var(--hc-space-5) !important;
	background: var(--hc-card-bg) !important;
}

@media (max-width: 600px) {
	.ult_modal .ult_modal-body {
		padding: var(--hc-space-4) !important;
	}
}