/*
 * Enquiry form.
 *
 * Shares the builder's token names, with the same fallbacks, so it looks
 * right under any theme. Mobile first: one column, full-width fields, and
 * nothing smaller than a thumb.
 */

.safiri-enquiry {
	--sf-ink: var(--wp--preset--color--contrast, #2B230C);
	--sf-soft: var(--wp--preset--color--contrast-soft, #5C4A1E);
	--sf-line: var(--wp--preset--color--border, #E2D6B6);
	--sf-surface: var(--wp--preset--color--surface, #ffffff);
	--sf-panel: var(--wp--preset--color--surface-alt, #F1E6C8);
	--sf-accent: var(--wp--preset--color--accent, #936F1B);
	--sf-primary: var(--wp--preset--color--primary, #41310C);
	--sf-radius: var(--wp--custom--radius--lg, 16px);
	--sf-tap: var(--wp--custom--control--min-height, 44px);

	color: var(--sf-ink);
}

.safiri-enquiry__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.safiri-enquiry .safiri-field {
	margin: 0;
}

.safiri-enquiry label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.9375rem;
	color: var(--sf-soft);
}

.safiri-enquiry .safiri-input {
	width: 100%;
	min-height: var(--sf-tap);
	box-sizing: border-box;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--sf-line);
	border-radius: 10px;
	background: var(--sf-surface);
	color: var(--sf-ink);
	font: inherit;
}

.safiri-enquiry textarea.safiri-input {
	min-height: 7rem;
	resize: vertical;
}

.safiri-enquiry .safiri-input:focus-visible {
	outline: 2px solid var(--sf-accent);
	outline-offset: 2px;
}

/* An invalid field only looks wrong once the visitor has had a go at it. */
.safiri-enquiry .safiri-input:user-invalid {
	border-color: #9C3B1B;
}

.safiri-enquiry .safiri-consent {
	display: flex;
	gap: 0.625rem;
	align-items: flex-start;
	min-height: var(--sf-tap);
	padding: 0.5rem 0;
	margin: 1rem 0 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--sf-ink);
	cursor: pointer;
}

.safiri-enquiry .safiri-consent input {
	margin-top: 0.2rem;
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
}

.safiri-enquiry .safiri-book {
	width: 100%;
	min-height: 3.25rem;
	margin-top: 0.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--sf-primary);
	color: var(--wp--preset--color--base, #ffffff);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.safiri-enquiry .safiri-book[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.safiri-enquiry .safiri-status {
	margin: 0.75rem 0 0;
	min-height: 1.5em;
	font-size: 0.9375rem;
	color: var(--sf-soft);
}

.safiri-enquiry .safiri-status.is-error {
	color: #9C3B1B;
	font-weight: 500;
}

.safiri-enquiry__promise {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	color: var(--sf-soft);
}

.safiri-enquiry__done {
	margin: 0;
	padding: 1.5rem;
	background: var(--sf-panel);
	border-radius: var(--sf-radius);
	font-size: 1.0625rem;
}

/*
 * The honeypot. Moved off-screen rather than display:none, because some bots
 * skip hidden fields and filling it in is the signal we want.
 */
.safiri-enquiry__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.safiri-enquiry .safiri-empty {
	margin: 1rem 0 0;
	padding: 1rem;
	background: var(--sf-panel);
	border-radius: var(--sf-radius);
	color: var(--sf-soft);
}

@media (min-width: 640px) {
	.safiri-enquiry__grid {
		grid-template-columns: 1fr 1fr;
	}

	.safiri-enquiry .safiri-field--wide {
		grid-column: 1 / -1;
	}

	.safiri-enquiry .safiri-book {
		width: auto;
		padding-inline: 2.5rem;
	}
}

.safiri-confirmed__ref {
	margin: 1rem 0 0;
	font-size: 1.0625rem;
}

.safiri-confirmed__ref strong {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.25rem 0.75rem;
	background: var(--sf-panel);
	border-radius: 8px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: 0.06em;
}

.safiri-enquiry__heading {
	margin: 0 0 0.5rem;
}

.safiri-enquiry__trip {
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--wp--preset--color--accent, #936f1b);
	background: var(--wp--preset--color--surface-alt, #f1e6c8);
	border-radius: 0 0.5rem 0.5rem 0;
}

.safiri-enquiry__intro {
	margin: 0 0 1.5rem;
	color: var(--sf-soft);
}