/*
 * ACCL Fluent Forms styling: makes Fluent Forms match the accredited-limo design
 * (.form card, .field / .field__input, .btn). Uses the theme's CSS variables.
 * Scoped to .form--fluent so it cannot affect other Fluent forms on the site.
 */

.form--fluent .fluentform {
	margin: 0;
}

/* Section headings ("Your details", "Where", ...) = the design's fieldset legends */
.form--fluent .fluentform .ff-el-section-break {
	margin: 0.75rem 0 1rem; /* plus the 1rem under the previous row = the design's 1.75rem above a legend */
	padding: 0;
}
.form--fluent .fluentform fieldset > .ff-el-section-break:first-of-type {
	margin-top: 1.5rem;
}
.form--fluent .fluentform .ff-el-section-title {
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: var(--step-1);
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}
.form--fluent .fluentform .ff-section_break_desk,
.form--fluent .fluentform .ff-el-section-break hr {
	display: none;
}

/* Two-column rows = .form__grid */
.form--fluent .fluentform .ff-t-container.form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1rem;
	margin: 0;
}
.form--fluent .fluentform .ff-t-container .ff-t-cell {
	flex-basis: auto !important;
	min-width: 0;
	padding: 0;
}

/* Field wrapper + label */
.form--fluent .fluentform .ff-el-group {
	margin-bottom: 1rem;
}
.form--fluent .fluentform .ff-el-group.field {
	display: block;
}
.form--fluent .fluentform .ff-el-input--label {
	margin-bottom: 0.3rem;
}
.form--fluent .fluentform .ff-el-input--label label {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--graphite);
}
.form--fluent .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after {
	content: " *";
	margin-left: 0;
	color: #b3261e;
}

/* Inputs = .field__input */
.form--fluent .fluentform .ff-el-form-control {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.85rem;
	font: 400 var(--step-0) var(--font-body);
	color: var(--ink);
	background: var(--bone);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	box-shadow: none;
}
.form--fluent .fluentform .ff-el-form-control:focus {
	background: var(--white);
	border-color: var(--swoosh);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 125, 195, 0.25);
}
.form--fluent .fluentform textarea.ff-el-form-control {
	min-height: 120px;
	resize: vertical;
}
.form--fluent .fluentform select.ff-el-form-control {
	appearance: auto;
}
.form--fluent .fluentform .ff-el-help-message {
	margin-top: 0.3rem;
	font-size: var(--step--1);
	font-style: normal;
	color: var(--muted);
}

/* Validation */
.form--fluent .fluentform .ff-el-is-error .ff-el-form-control {
	border-color: #b3261e;
}
.form--fluent .fluentform .error.text-danger {
	margin-top: 0.3rem;
	font-size: var(--step--1);
	color: #b3261e;
}

/* Fluent's clearfix pseudo-elements become empty flex items here, adding a 12px gap at both ends of the row */
.form--fluent .fluentform .ff_submit_btn_wrapper.form__actions::before,
.form--fluent .fluentform .ff_submit_btn_wrapper.form__actions::after { content: none; display: none; }

/* Actions row: submit button + "Or call" button (moved in by JS) */
.form--fluent .fluentform .ff_submit_btn_wrapper.form__actions {
	margin: 1.75rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}
.form--fluent .fluentform .ff-btn-submit.btn {
	min-height: 48px;
	padding: 0.8rem 1.4rem;
	margin: 0;
	font: 600 var(--step-0) / 1.2 var(--font-body);
	color: var(--white);
	background: var(--swoosh-deep);
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
}
.form--fluent .fluentform .ff-btn-submit.btn:hover,
.form--fluent .fluentform .ff-btn-submit.btn:focus-visible {
	background: var(--navy);
}
/* Before JS moves it (or if JS is off) the call button sits under the form */
.form--fluent > .form__actions--call {
	margin-top: 0.75rem;
}
.form--fluent .ff_submit_btn_wrapper .btn--dark {
	margin: 0;
}

/* "book online" in the fine print is a button in the markup; show it as a link like its neighbours */
.form--fluent .form__fine .js-book {
	padding: 0;
	font: inherit;
	color: var(--swoosh-deep);
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}

/* Confirmation message = the design's .form__notice */
.form--fluent .ff-message-success,
.form--fluent .fluentform_wrapper_success {
	margin-top: 1.25rem;
	padding: 1rem 1.25rem;
	color: var(--ink);
	background: #e7f2fa;
	border: 0;
	border-left: 4px solid var(--swoosh-deep);
	border-radius: 0;
	box-shadow: none;
}
.form--fluent .ff-errors-in-stack {
	margin-top: 1rem;
}

@media (max-width: 640px) {
	.form--fluent .fluentform .ff-t-container.form__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Quick quote card (.quote.quote--fluent): tighter spacing, full-width button */
.quote--fluent .fluentform .ff-el-section-break { display: none; }
.quote--fluent .fluentform fieldset { margin-top: 1.875rem !important; }
.quote--fluent .fluentform .ff-el-group,
.quote--fluent .fluentform .field { margin-bottom: 0 !important; }
.quote--fluent .fluentform .ff-t-container:first-of-type { margin-top: 0.875rem; }
.quote--fluent .fluentform .ff-t-container + .ff-t-container { margin-top: 0.5625rem; }
.quote--fluent .fluentform .ff-t-container.form__grid { gap: 0 0.75rem; }
.quote--fluent .fluentform .ff_submit_btn_wrapper.form__actions { margin-top: 0.9375rem; min-height: 0; align-items: flex-start; }
.quote--fluent .fluentform .ff-btn-submit.btn { width: 100%; }
.quote--fluent .ff-message-success,
.quote--fluent .fluentform_wrapper_success { margin-top: 1rem; }