/*
 * Car Rental Durrës — Fluent Forms skin.
 *
 * Fluent Forms ships its own opinionated CSS. This file re-dresses that markup
 * in the theme's own vocabulary so a Fluent Form is visually indistinguishable
 * from the hand-built `crd/availability-form` panel next to it.
 *
 * Nothing here introduces a colour, radius or spacing value of its own — every
 * declaration resolves to a token already aliased in main.css (§1 Tokens), which
 * in turn comes from theme.json. If a value is not a token, it does not belong.
 *
 * Mapping (Fluent Forms class → theme component):
 *   .fluentform             → .crd-request        the panel
 *   .ff-el-group            → .crd-field          one labelled control
 *   .ff-el-input--label     → .crd-field__label
 *   .ff-el-form-control     → .crd-input
 *   .ff-btn-submit          → .crd-btn
 *   .ff-message-success     → .crd-request__state--success
 *   .error-text             → .crd-field__error
 *
 * Scoped to `.crd-ff`, the class set on each form via its Fluent Forms layout
 * settings (formSettings.layout.cssClassName). An unskinned form — anything
 * added later without that class — keeps the plugin's default look rather than
 * inheriting a half-applied theme.
 *
 * Two structural facts about Fluent Forms' markup drive the awkward selectors
 * below; both were verified against the rendered output, not assumed:
 *
 *   1. `.crd-ff` lands on the <form>, but the validation summary
 *      (`#fluentform_N_errors.ff-errors-in-stack`) is a *sibling* of the form
 *      inside `.fluentform`. A descendant selector from `.crd-ff` never reaches
 *      it, so the summary is matched via the `.fluentform` wrapper instead.
 *   2. Column cells carry an inline `style="flex-basis: N%"`. Inline styles beat
 *      stylesheet longhands, so the stacking rule at the narrow breakpoint has
 *      to use !important — the one place here where it is warranted.
 *
 * Contents
 *   1. Panel
 *   2. Fields and labels
 *   3. Controls
 *   4. Columns
 *   5. Submit
 *   6. States: error, success
 *   7. Disclosure
 *   8. Compact variant (homepage bar)
 *   9. Responsive
 */

/* ============================================================
   1. Panel
   ============================================================ */
.crd-ff.frm-fluent-form {
	padding: 30px;
	background: var(--c-base);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-card);
}

/* Form header, when a form carries its own heading and intro as custom HTML.
   Mirrors `.crd-request__head` so a Fluent Form panel and the crd-core panel
   open the same way. */
.crd-ff .crd-ff-header { margin-bottom: 6px; }
.crd-ff .crd-ff-title { margin: 0 0 8px; font-size: 1.4rem; }
.crd-ff .crd-ff-intro { margin: 0; color: var(--c-muted); font-size: 0.88rem; }

/* ============================================================
   2. Fields and labels
   ============================================================ */
/*
 * Fluent Forms emits the submit button *after* every field, which puts the
 * partner disclosure (a custom-HTML field) between the last input and the
 * button. The design has the disclosure closing the panel, under the button.
 *
 * Rather than reorder the fields in the database — which would put the
 * disclosure above the button again the moment anyone edits the form in the
 * Fluent Forms builder — the fieldset becomes a flex column so the disclosure
 * can be sent to the end with `order`. Everything else keeps source order.
 */
.crd-ff > fieldset {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.crd-ff .ff-el-group { margin-bottom: 0; }
/* Only the closing disclosure moves. `.crd-ff-header` is custom HTML too, and
   must stay where it is written — at the top. */
.crd-ff .crd-ff-footer { order: 1; }

.crd-ff .ff-el-input--label label {
	display: block;
	margin-bottom: 7px;
	padding: 0;
	color: var(--c-muted);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* The design marks the *optional* fields, not the required ones, so the
   asterisk is suppressed. Fluent Forms' own rule is `.fluentform
   .ff-el-input--label.ff-el-is-required.asterisk-right label:after`, so the
   override has to match that specificity — the asterisk classes sit on the
   label wrapper, not on a child, and the `.fluentform` prefix must be present
   to win. */
.fluentform .crd-ff .ff-el-input--label.ff-el-is-required.asterisk-right label:after,
.fluentform .crd-ff .ff-el-input--label.ff-el-is-required.asterisk-left label:before { content: none; }

.crd-ff .ff-el-help-message {
	margin: 6px 0 0;
	color: var(--c-muted);
	font-size: 0.75rem;
	font-style: normal;
}

/* ============================================================
   3. Controls
   ============================================================ */
/* Roomier and rounder than `.crd-input` in main.css §5, at the user's request
   (2026-07-24): 60px tall against 54, 20px of inline padding against 16, and
   --r-md (18px) instead of --r-input (14px).
   The catalogue filter sidebar still uses the tighter `.crd-input` values, so
   the two now differ deliberately rather than by accident. */
.crd-ff .ff-el-form-control {
	width: 100%;
	min-height: 60px;
	padding: 0 20px;
	color: var(--c-ink);
	background: var(--c-soft);
	border: 1px solid transparent;
	border-radius: var(--r-md);
	box-shadow: none;
	font: inherit;
	font-size: 0.9rem;
	line-height: 1.4;
	transition: background-color var(--transition), border-color var(--transition);
}
.crd-ff .ff-el-form-control:hover { border-color: var(--c-line); }
.crd-ff .ff-el-form-control:focus {
	background: var(--c-base);
	border-color: var(--c-signal);
	box-shadow: none;
	outline: none;
}
.crd-ff .ff-el-form-control:focus-visible {
	outline: 3px solid var(--c-signal);
	outline-offset: 2px;
}
.crd-ff .ff-el-form-control::placeholder { color: var(--c-faint); opacity: 1; }
.crd-ff .ff-el-form-control:disabled { opacity: 0.6; cursor: not-allowed; }

.crd-ff textarea.ff-el-form-control {
	min-height: 150px;
	padding-block: 18px;
	line-height: 1.55;
	resize: vertical;
}

/* Native select arrow replaced with the theme's chevron, matching
   `select.crd-input` in main.css §5. */
.crd-ff select.ff-el-form-control {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 46px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6675' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
}

/* ============================================================
   4. Columns
   ============================================================ */
/* Fluent Forms already lays columns out with flex and its own 15px gap; the
   only changes here are the theme's 14px rhythm and dropping the per-cell
   10px padding, which would otherwise double up with the gap.

   Crucially, DO NOT set `flex-wrap: wrap` here. The cells carry an inline
   `flex-basis: N%` that sums to exactly 100%; the 14px gap then pushes the row
   past 100%, and with wrapping on, the last field drops to its own line (which
   is why full_name + email were stacking on the contact form). FF's container
   defaults to `nowrap`, so the cells simply shrink to absorb the gap and stay on
   one line. Stacking is handled deliberately at the mobile breakpoint (§9). */
.crd-ff .ff-t-container {
	gap: 14px;
	margin: 0;
}
.crd-ff .ff-t-cell {
	min-width: 0;
	padding: 0;
	border: 0;
}

/* ============================================================
   5. Submit
   ============================================================ */
/* Spacing above the button comes from the fieldset's flex gap (§2). */
.crd-ff .ff_submit_btn_wrapper { margin-top: 0; text-align: left; }

.crd-ff .ff-btn-submit,
.crd-ff .ff-btn-submit.ff-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 18px;
	color: var(--c-base);
	background: var(--c-ink);
	border: 1px solid var(--c-ink);
	border-radius: var(--r-pill);
	box-shadow: none;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	transition: transform var(--transition), color var(--transition),
		background-color var(--transition), border-color var(--transition);
}
.crd-ff .ff-btn-submit:hover {
	transform: translateY(-2px);
	color: var(--c-base);
	background: var(--c-ink-strong);
	border-color: var(--c-ink-strong);
}
.crd-ff .ff-btn-submit:focus-visible {
	outline: 3px solid var(--c-signal);
	outline-offset: 2px;
}
.crd-ff .ff-btn-submit:disabled { opacity: 0.55; pointer-events: none; }

/* ============================================================
   6. States
   ============================================================ */
.crd-ff .ff-el-is-error .ff-el-form-control { border-color: var(--c-danger); }

.crd-ff .error-text,
.crd-ff .text-danger {
	margin: 6px 0 0;
	color: var(--c-danger);
	font-size: 0.78rem;
	font-weight: 600;
}

/* Validation summary. Rendered as a sibling of the <form>, so it is reached
   through the `.fluentform` wrapper — see the note at the top of this file. */
.fluentform .ff-errors-in-stack {
	margin-top: 18px;
	padding: 22px;
	background: color-mix(in srgb, var(--c-danger) 6%, #fff);
	border: 1px solid color-mix(in srgb, var(--c-danger) 40%, var(--c-line));
	border-radius: var(--r-input);
	color: var(--c-danger);
	font-size: 0.88rem;
	font-weight: 600;
}
.fluentform .ff-errors-in-stack:empty { display: none; }
.fluentform .ff-errors-in-stack .error { margin: 0 0 6px; }
.fluentform .ff-errors-in-stack .error:last-child { margin-bottom: 0; }

/* The confirmation that replaces the form. Mirrors
   `.crd-request__state--success` so both pipelines confirm identically. */
.ff-message-success {
	padding: 22px;
	background: color-mix(in srgb, var(--c-success) 8%, #fff);
	border: 1px solid color-mix(in srgb, var(--c-success) 35%, var(--c-line));
	border-radius: var(--r-input);
	color: var(--c-ink);
	font-size: 0.9rem;
	text-align: center;
}
.ff-message-success strong { display: block; margin-bottom: 8px; color: var(--c-success); font-size: 1.15rem; }
.ff-message-success p { margin: 0 0 8px; }
.ff-message-success p:last-child { margin-bottom: 0; }

/* ============================================================
   7. Disclosure
   ============================================================ */
/* The partner disclosure carried into forms 4 and 5 as custom HTML. Same
   treatment as `.crd-disclosure` so the honesty line reads the same everywhere. */
/* Vertical rhythm comes from the fieldset's flex `gap` (§2), so this only adds
   the breathing room between the rule and the text. */
.crd-ff .crd-ff-disclosure {
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--c-line);
	color: var(--c-muted);
	font-size: 0.75rem;
	line-height: 1.5;
}

/* ============================================================
   8. Compact variant — the homepage bar
   ============================================================ */
.crd-ff--compact.frm-fluent-form { padding: 20px; }

/*
 * The bar is one bottom-aligned line: the four fields, then the button as the
 * final column. Fluent Forms renders the button as a sibling of the column
 * container, so the row is opened on the <fieldset> that wraps them both and
 * the button joins as the last flex item.
 *
 * The disclosure carries `order: 1` (§2) plus a 100% basis, so it always breaks
 * to its own full-width line beneath the bar — never between the fields and the
 * button, which is where its source position would otherwise put it.
 */
.crd-ff--compact > fieldset {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}
/* The four fields stay on one line. Section 4 sets the container to wrap for the
   full-width forms, but here the cells' inline `flex-basis: 25%` plus the gap
   overflows 100% and would drop the fourth field to a second row — so wrapping
   is turned back off and the cells shrink to fit instead. */
.crd-ff--compact .ff-t-container {
	flex: 1 1 460px;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 12px;
}

/*
 * The homepage bar wants a tighter control than the full-width forms: shorter
 * (54px vs the 60px in §3) and less inline padding. The corners are intentionally
 * split (user, 2026-07-24): the fields get the tight --r-input corner (the same
 * token .crd-input uses), while the submit button keeps the site's standard pill
 * (--r-pill, as .crd-btn) so it reads as the primary action — rounder than the
 * inputs, not matching them.
 *
 * IMPORTANT — specificity: Fluent Forms' default theme sets
 *   `.ff-default .ff-el-form-control { border-radius: 7px; padding: 11px 15px }`
 * and its stylesheet loads AFTER this one, so a plain `.crd-ff--compact
 * .ff-el-form-control` (0,2,0) ties and loses. Qualifying with `.frm-fluent-form`
 * (also on the <form>) lifts these to (0,3,0) so radius and padding actually take
 * — otherwise the fields silently render at FF's 7px, which is exactly the bug
 * this block fixes. Same reason the button rule is qualified.
 */
.crd-ff--compact.frm-fluent-form .ff-el-form-control {
	min-height: 54px;
	padding: 0 18px;
	border-radius: var(--r-input);
}
.crd-ff--compact.frm-fluent-form select.ff-el-form-control { padding-right: 44px; }

.crd-ff--compact .ff_submit_btn_wrapper { flex: 0 0 auto; }
/* The primary action: the site's standard pill button (--r-pill, matching
   .crd-btn), deliberately rounder than the inputs beside it. Height matches the
   fields so it sits flush on the bar. */
.crd-ff--compact.frm-fluent-form .ff-btn-submit {
	min-height: 54px;
	padding-inline: 28px;
	border-radius: var(--r-pill);
}

.crd-ff--compact .crd-ff-footer { flex: 1 1 100%; }
.crd-ff--compact .crd-ff-disclosure { margin-top: 0; padding-top: 14px; }

/* ============================================================
   8b. Full-width forms — same corner treatment as the homepage bar
   ============================================================ */
/*
 * The contact and vehicle forms (both `crd-ff--full`) take the same split the
 * homepage bar has (user, 2026-07-24): tight --r-input inputs and a standard
 * pill submit button — the button shape the user defined as the site standard.
 * Applied to `--full` so the two stay consistent with each other and with the
 * homepage. The `.frm-fluent-form` qualifier is needed for the same specificity
 * reason as §8 — FF's `.ff-default` rule loads after this file and would
 * otherwise win at 7px.
 */
.crd-ff--full.frm-fluent-form .ff-el-form-control {
	min-height: 54px;
	padding: 0 18px;
	border-radius: var(--r-input);
}
.crd-ff--full.frm-fluent-form select.ff-el-form-control { padding-right: 44px; }
.crd-ff--full.frm-fluent-form .ff-btn-submit { border-radius: var(--r-pill); }

/*
 * Action row for the full-width forms (contact + vehicle). Fluent Forms renders
 * the submit button last, with the WhatsApp `.crd-ff-actions` custom_html field
 * just before it. Switching the fieldset to a wrapping row — while forcing every
 * real field back to its own full-width line — lets the two buttons share the
 * final line: [ Send / Request ] [ Contact us on WhatsApp ].
 *
 * The vehicle form also has a closing `.crd-ff-footer` disclosure. It keeps
 * `order: 1` (§2) and a full-width basis, so it lands on the line after the two
 * auto-width buttons — i.e. the buttons sit on one row, the disclosure below.
 */
.crd-ff--full > fieldset {
	flex-flow: row wrap;
	align-items: flex-start;
}
.crd-ff--full > fieldset > * { flex: 1 1 100%; }
.crd-ff--full .ff_submit_btn_wrapper,
.crd-ff--full .crd-ff-actions { flex: 0 0 auto; }
/* The submit button keeps source order (first); WhatsApp follows it. */
.crd-ff--full .crd-ff-actions {
	order: 1;
	display: flex;
	align-items: center;
}
/* The WhatsApp button matches the submit button's height so the pair sits level. */
.crd-ff--full .crd-ff-actions .crd-btn { min-height: 44px; }

/*
 * The vehicle form sits in a narrow summary column where "Request availability"
 * and "Contact us on WhatsApp" cannot share a line without cramping. There the
 * two buttons stack full-width — a deliberate primary/secondary pair rather than
 * a ragged wrap — with the disclosure still below. The contact form's column is
 * wide enough to keep them side by side, so it is left alone.
 */
.crd-ff--vehicle .ff_submit_btn_wrapper,
.crd-ff--vehicle .crd-ff-actions { flex: 1 1 100%; }
.crd-ff--vehicle .crd-ff-actions .crd-btn,
.crd-ff--vehicle .ff-btn-submit { width: 100%; }

/* On a dark surface the panel keeps its light card treatment (as the homepage
   hero does), so only the disclosure needs re-colouring. */
:is(.crd-on-dark, .crd-section--ink) .crd-ff .crd-ff-disclosure {
	color: var(--c-muted);
}

/* ============================================================
   9. Responsive
   ============================================================ */
@media (max-width: 820px) {
	.crd-ff.frm-fluent-form { padding: 24px; }
}

@media (max-width: 560px) {
	.crd-ff.frm-fluent-form { padding: 20px; }
	/* One field per line. §4 keeps multi-column rows on a single line at desktop
	   by relying on the container's default `nowrap`; here wrapping is switched
	   back on and every cell forced to a full row so the columns stack. The
	   !important beats Fluent Forms' inline flex-basis — see the file header. */
	.crd-ff .ff-t-container { flex-wrap: wrap; }
	.crd-ff .ff-t-cell { flex-basis: 100% !important; }
	/*
	 * The bar becomes a single stacked column. The 460px flex-basis that keeps
	 * the fields on one line at desktop would, on a phone, hold the container —
	 * and the hero column that contains it — wider than the viewport, clipping
	 * the hero copy. Drop it to 100% and let the container wrap its cells.
	 */
	.crd-ff--compact .ff-t-container { flex: 1 1 100%; flex-wrap: wrap; }
	/* The bar can no longer fit a trailing button column, so it goes full width
	   on its own line — still ahead of the disclosure, which keeps `order: 1`. */
	.crd-ff--compact .ff_submit_btn_wrapper { flex: 1 1 100%; }
	.crd-ff .ff-btn-submit { width: 100%; }
	/* Full-width forms: the two action buttons stack full-width instead of
	   sharing a line, so the WhatsApp button never runs off the narrow card. */
	.crd-ff--full .ff_submit_btn_wrapper,
	.crd-ff--full .crd-ff-actions { flex: 1 1 100%; }
	.crd-ff--full .crd-ff-actions .crd-btn { width: 100%; }
}