/*
 * Enquiry form.
 *
 * The design's card, drawn over Contact Form 7's markup. Every token falls back
 * to a literal so the block still looks deliberate under another theme, and
 * every property is logical — this section ships RTL-ready. See the theme's
 * docs/I18N-RTL.md.
 *
 * CF7's own class names are load-bearing here and are treated as the contract
 * they are: `.wpcf7-form-control-wrap` around each control, `.wpcf7-not-valid-tip`
 * for an inline error, and a status class on the form itself — `init`, `invalid`,
 * `sent`, `failed`, `spam` — which is what lets the success panel replace the
 * fields without a line of JavaScript.
 */

.codigo-enquiry {
	--enq-ink: var(--wp--preset--color--ink, #022253);
	--enq-base: var(--wp--preset--color--base, #fff);
	--enq-cream: var(--wp--preset--color--cream, #fff3eb);
	--enq-aqua: var(--wp--preset--color--aqua, #76dedf);
	--enq-spring: var(--wp--preset--color--spring, #0abc8a);
	--enq-muted: var(--wp--custom--ink--muted, rgba(2, 34, 83, 0.75));
	--enq-soft: var(--wp--custom--ink--soft, rgba(2, 34, 83, 0.62));
	--enq-divider: var(--wp--custom--divider, rgba(2, 34, 83, 0.13));
	/* The design has no error state. This is the one value the section needs
	   that the palette does not carry — see the theme's theme.json, where it is
	   defined once as a custom token rather than a palette entry, so it never
	   appears in a colour picker as something to decorate with. */
	--enq-alert: var(--wp--custom--alert, #b3261e);

	background-color: var(--enq-base);
	border-radius: var(--wp--custom--radius--shell, 40px);
	box-shadow: var(--wp--preset--shadow--sm, 0 1px 3px rgba(2, 34, 83, 0.07));
	box-sizing: border-box;
	color: var(--enq-ink);
	container-type: inline-size;
	padding: var(--wp--preset--spacing--60, 48px);
}

/* CF7 wraps the form in a div of its own before the theme ever sees it. */
.codigo-enquiry .wpcf7 {
	margin: 0;
}

.codigo-enquiry__form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 20px);
}

/* The hidden inputs CF7 posts with. Left in the flow they would take a gap
   step of their own and open a hole above the first field. */
.codigo-enquiry__form > .hidden-fields-container {
	border: 0;
	display: none;
	margin: 0;
	padding: 0;
}

/* ── Fields ─────────────────────────────────────────────────────────────
   Each control is wrapped in its own label, so the association holds even if
   the block is rendered twice on one page. */
.codigo-enquiry__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.codigo-enquiry__label {
	color: var(--enq-muted);
	font-size: var(--wp--preset--font-size--x-small, 13px);
	font-weight: 700;
	line-height: 1.4;
}

/* CF7 emits a span around every control; without this the pill only grows to
   the width of the input's `size` attribute. */
.codigo-enquiry .wpcf7-form-control-wrap {
	display: block;
}

/* Two fields share the first row, and stack with everything else once the
   card is narrow. A container query, not a viewport one: the card is as wide
   as its column, which is not the same question as how wide the screen is. */
.codigo-enquiry__row {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr 1fr;
}

@container (max-width: 22rem) {
	.codigo-enquiry__row {
		grid-template-columns: 1fr;
	}
}

/* ── Controls ───────────────────────────────────────────────────────────
   A cream pill with no visible edge until it is focused. The border is there
   from the start, transparent, so nothing shifts by 1.5px when it colours. */
.codigo-enquiry .wpcf7-form-control:where( input[type="text"], input[type="email"], input[type="tel"], select, textarea ) {
	background-color: var(--enq-cream);
	border: 1.5px solid transparent;
	border-radius: var(--wp--custom--radius--pill, 999px);
	/* The pill is 100% of the label. Without this the padding and the border
	   are added on top of that and every control overflows the card by 40px. */
	box-sizing: border-box;
	color: var(--enq-ink);
	display: block;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium, 16px);
	inline-size: 100%;
	line-height: 1.4;
	padding: 15px 19px;
	transition: border-color 0.16s, background-color 0.16s;
}

.codigo-enquiry .wpcf7-form-control::placeholder {
	color: var(--wp--custom--ink--faint, rgba(2, 34, 83, 0.42));
	opacity: 1;
}

/* An open question is not a one-line answer, so it keeps the soft rectangle
   rather than the pill. */
.codigo-enquiry .wpcf7-textarea {
	border-radius: var(--wp--custom--radius--lg, 28px);
	min-block-size: 7.5rem;
	resize: vertical;
}

.codigo-enquiry .wpcf7-form-control:focus {
	border-color: var(--enq-aqua);
}

/* The design marks focus with the aqua edge alone. At 1.5px on cream that is
   under the contrast a focus indicator owes a keyboard user, so the ring is
   kept as well — it only ever shows for the people who need it. */
.codigo-enquiry .wpcf7-form-control:focus-visible {
	outline: 2px solid var(--enq-spring);
	outline-offset: 2px;
}

/* The select loses its native arrow to match the design's flat pill, so one is
   drawn back. Borders rather than an image, because a triangle made of borders
   inherits `currentColor` and a data URI cannot. */
.codigo-enquiry__field:has( select ) {
	position: relative;
}

.codigo-enquiry__field:has( select )::after {
	border: 5px solid transparent;
	border-block-start-color: currentcolor;
	color: var(--enq-soft);
	content: "";
	inset-block-start: calc(50% + 6px);
	inset-inline-end: 20px;
	pointer-events: none;
	position: absolute;
}

.codigo-enquiry .wpcf7-select {
	appearance: none;
	/* Room for the arrow above, on the end edge whichever way the page runs. */
	padding-inline-end: 42px;
}

/* ── Submit ─────────────────────────────────────────────────────────────
   The site's primary button, restated. The theme owns this shape for core
   buttons, but CF7 ships its own control and it has to match under any theme —
   hence a literal behind every token. */
.codigo-enquiry__submit {
	display: flex;
}

.codigo-enquiry .wpcf7-submit {
	background-color: var(--enq-ink);
	border: 1px solid var(--enq-ink);
	border-radius: var(--wp--custom--radius--pill, 999px);
	color: var(--enq-base);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: var(--wp--preset--font-size--large, 17px);
	font-weight: 400;
	inline-size: 100%;
	line-height: 1.2;
	padding: 18px 24px;
	text-align: center;
	transition: background-color 0.16s, border-color 0.16s;
}

.codigo-enquiry .wpcf7-submit:hover {
	background-color: var(--wp--preset--color--ink-soft, #0a3a7d);
	border-color: var(--wp--preset--color--ink-soft, #0a3a7d);
}

.codigo-enquiry .wpcf7-submit:focus-visible {
	outline: 2px solid var(--enq-spring);
	outline-offset: 2px;
}

/* CF7 parks a spinner beside the submit while the request is in flight. */
.codigo-enquiry .wpcf7-spinner {
	display: block;
	margin-block: 12px 0;
	margin-inline: auto;
}

.codigo-enquiry__fineprint {
	color: var(--enq-soft);
	font-size: var(--wp--preset--font-size--x-small, 13px);
	line-height: 1.5;
	margin: 0;
	text-align: center;
}

/* ── Inline validation ──────────────────────────────────────────────────
   CF7 puts the reason directly after the control it belongs to, inside the
   label. It is `aria-hidden` there — the same text reaches a screen reader
   through the form's own live region — so this is purely what a sighted
   person sees. */
.codigo-enquiry .wpcf7-not-valid-tip {
	color: var(--enq-alert);
	display: block;
	font-size: var(--wp--preset--font-size--x-small, 13px);
	font-weight: 600;
	line-height: 1.4;
	padding-inline: 19px;
}

.codigo-enquiry .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--enq-alert);
}

/* ── Response ───────────────────────────────────────────────────────────
   One element carries every outcome, so it is drawn from the status class on
   the form rather than styled once and hoped over.

   CF7 ships its own opinionated defaults for this element — a blue border, a
   status-coloured border-color, a 2em/0.5em/1em margin — in a stylesheet whose
   selector already carries a bare `form`, out-specificing a plain two-class
   override here. `!important` is the only reliable way past that without
   matching CF7's selector shape everywhere it might change it. */
.codigo-enquiry .wpcf7-response-output {
	border: 1.5px solid var(--enq-divider) !important;
	border-radius: var(--wp--custom--radius--lg, 28px);
	font-size: var(--wp--preset--font-size--medium, 16px);
	line-height: 1.55;
	margin: 0 !important;
	padding: 18px 22px !important;
}

/* Nothing has happened yet: CF7 leaves the element in place and empty. */
.codigo-enquiry__form.init .wpcf7-response-output,
.codigo-enquiry .wpcf7-response-output:empty {
	display: none;
}

.codigo-enquiry__form.invalid .wpcf7-response-output,
.codigo-enquiry__form.unaccepted .wpcf7-response-output,
.codigo-enquiry__form.spam .wpcf7-response-output,
.codigo-enquiry__form.failed .wpcf7-response-output,
.codigo-enquiry__form.aborted .wpcf7-response-output {
	background-color: var(--wp--preset--color--sand, #ffe1b9);
	border-color: var(--enq-alert) !important;
	color: var(--enq-ink);
}

/* ── Sent ───────────────────────────────────────────────────────────────
   The design replaces the card's contents with a thank-you panel. CF7 keeps
   the spent form and only changes its status class, so the swap is done here:
   the fields go, and the response output becomes the panel. */
.codigo-enquiry__form.sent > .codigo-enquiry__row,
.codigo-enquiry__form.sent > .codigo-enquiry__field,
.codigo-enquiry__form.sent > .codigo-enquiry__submit,
.codigo-enquiry__form.sent > .codigo-enquiry__fineprint {
	display: none;
}

.codigo-enquiry__form.sent .wpcf7-response-output {
	border: 0 !important;
	color: var(--enq-muted);
	padding: var(--wp--preset--spacing--60, 48px) var(--wp--preset--spacing--20, 15px) var(--wp--preset--spacing--30, 20px) !important;
	text-align: center;
}

/* The tick the design sets above the message. Decoration, so it is drawn from
   CSS and never reaches the accessible name of the live region. */
.codigo-enquiry__form.sent .wpcf7-response-output::before {
	align-items: center;
	background-color: var(--enq-aqua);
	block-size: 52px;
	border-radius: var(--wp--custom--radius--pill, 999px);
	color: var(--enq-ink);
	content: "✓";
	display: flex;
	font-size: 24px;
	inline-size: 52px;
	justify-content: center;
	margin: 0 auto var(--wp--preset--spacing--30, 20px);
}

/* The way back. Hidden until the form reports it sent — a link rather than a
   button, because a fresh form is a fresh request. */
.codigo-enquiry__again {
	display: none;
}

.codigo-enquiry:has( .wpcf7-form.sent ) .codigo-enquiry__again {
	align-items: center;
	background-color: transparent;
	border: 1px solid var(--enq-divider);
	border-radius: var(--wp--custom--radius--pill, 999px);
	color: var(--enq-ink);
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: var(--wp--preset--font-size--medium, 16px);
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--20, 15px);
	margin-inline: auto;
	padding: 14px 24px;
	text-decoration: none;
	transition: border-color 0.16s;
}

.codigo-enquiry:has( .wpcf7-form.sent ) {
	display: flex;
	flex-direction: column;
}

.codigo-enquiry__again:hover {
	border-color: var(--enq-ink);
}

/* ── No form plugin ─────────────────────────────────────────────────────
   The card still has to be worth the space it takes. */
.codigo-enquiry__fallback {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 15px);
}

.codigo-enquiry__fallbacktitle {
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: var(--wp--preset--font-size--heading-s, 26px);
	font-weight: 400;
	line-height: 1.12;
	margin: 0;
}

.codigo-enquiry__fallbackbody {
	color: var(--enq-muted);
	margin: 0;
}

.codigo-enquiry__route {
	background-color: var(--enq-ink);
	border: 1px solid var(--enq-ink);
	border-radius: var(--wp--custom--radius--pill, 999px);
	color: var(--enq-base);
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: var(--wp--preset--font-size--large, 17px);
	padding: 16px 24px;
	text-align: center;
	text-decoration: none;
}

.codigo-enquiry__route.is-quiet {
	background-color: transparent;
	border-color: var(--enq-divider);
	color: var(--enq-ink);
}

.codigo-enquiry__route.is-quiet:hover {
	border-color: var(--enq-ink);
}

/* ── Narrow ─────────────────────────────────────────────────────────────
   The shell padding is a large number at desktop and most of the card once
   the split has collapsed. */
@container (max-width: 26rem) {
	.codigo-enquiry {
		padding: var(--wp--preset--spacing--50, 34px);
	}
}

/* ── Suite-leasing variant ──────────────────────────────────────────────
   form="suite": the same fields on the suites page, where the card sits in a
   tinted panel at the design's smaller radius and padding, and the suite is
   picked from a row of chips — Contact Form 7 radio buttons, each drawn as a
   pill with the control itself visually hidden but still focusable. */
.codigo-enquiry--suite {
	border-radius: var(--wp--custom--radius--lg, 28px);
	box-shadow: none;
	padding: var(--wp--preset--spacing--50, 34px);
}

.codigo-enquiry__choice {
	border: 0;
	margin: 0;
	min-inline-size: 0;
	padding: 0;
}

.codigo-enquiry__choice > legend {
	margin-block-end: 8px;
	padding: 0;
}

.codigo-enquiry__choice .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.codigo-enquiry__choice .wpcf7-list-item {
	margin: 0;
}

.codigo-enquiry__choice .wpcf7-list-item label {
	cursor: pointer;
	display: block;
	position: relative;
}

.codigo-enquiry__choice input[type="radio"] {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

.codigo-enquiry__choice .wpcf7-list-item-label {
	background-color: var(--enq-base);
	border: 1.5px solid var(--enq-divider);
	border-radius: 999px;
	color: var(--enq-ink);
	display: inline-block;
	font-size: 14.5px;
	font-weight: 700;
	padding: 10px 18px;
	transition: background-color 0.16s, border-color 0.16s, color 0.16s;
}

.codigo-enquiry__choice input[type="radio"]:checked + .wpcf7-list-item-label {
	background-color: var(--enq-ink);
	border-color: var(--enq-ink);
	color: var(--enq-base);
}

.codigo-enquiry__choice input[type="radio"]:focus-visible + .wpcf7-list-item-label {
	outline: 2px solid var(--enq-spring);
	outline-offset: 2px;
}

/* The suites design draws its fields as white boxes with a hairline edge
   rather than cream pills, its labels at full ink, and the submit across the
   whole card with CF7's spinner laid over it rather than beside it. */
.codigo-enquiry--suite .codigo-enquiry__form {
	gap: 18px;
}

.codigo-enquiry--suite .codigo-enquiry__row {
	gap: 16px;
}

.codigo-enquiry--suite .codigo-enquiry__label {
	color: var(--enq-ink);
	font-size: 14px;
}

.codigo-enquiry--suite .wpcf7-form-control:where( input[type="text"], input[type="email"], input[type="tel"], textarea ) {
	background-color: var(--enq-base);
	border-color: var(--enq-divider);
	border-radius: 12px;
	padding: 12px 14px;
}

.codigo-enquiry--suite .wpcf7-textarea {
	min-block-size: 5.25rem;
}

.codigo-enquiry--suite .wpcf7-submit {
	font-size: 16px;
	padding: 16px;
}

.codigo-enquiry--suite .codigo-enquiry__submit {
	position: relative;
}

.codigo-enquiry--suite .codigo-enquiry__submit .wpcf7-spinner {
	inset-block-start: 50%;
	inset-inline-end: 14px;
	margin: -12px 0 0;
	position: absolute;
}