/* --- The enquiry block ---------------------------------------------------
 * On a yacht page the form is introduced by that yacht, so it is obvious
 * what the enquiry is about. On the contact page the same form appears with
 * a plain heading instead.
 */

.enquiry {
	padding-block: var(--space-section);
	background: var(--color-surface-alt);
}

.enquiry__inner {
	max-width: 44rem;
	margin-inline: auto;
}

.enquiry__yacht {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding-bottom: var(--space-md);
	margin-bottom: var(--space-lg);
	border-bottom: var(--border-hair) solid var(--color-line);
}

.enquiry__thumb {
	flex: none;
	width: 7.5rem;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--color-navy-wash);
}

.enquiry__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.enquiry__about .label {
	margin-bottom: var(--space-3xs);
}

.enquiry__name {
	margin: 0;
	font-size: var(--text-lg);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.enquiry__meta {
	margin: var(--space-3xs) 0 0;
	max-width: none;
	font-size: var(--text-xs);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--color-navy-soft);
}

.enquiry__intro {
	margin-bottom: var(--space-lg);
	text-align: center;
}

.enquiry__intro p {
	max-width: 30rem;
	margin-inline: auto;
	color: var(--color-ink-soft);
}

/* --- The form itself ------------------------------------------------------
 * Fluent's own stylesheet is switched off in the plugin, so these rules are
 * not fighting anything — they are the only styling the form has.
 *
 * Undecorated fields on a plain ground: a hairline border, no fill, small
 * tracked labels above. The same language as the filter panel.
 */

.sebi-form .ff-el-group {
	margin-bottom: var(--space-md);
}

.sebi-form .ff-el-input--label label {
	display: block;
	margin-bottom: var(--space-2xs);
	font-size: var(--text-xs);
	font-weight: var(--weight-light);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--color-navy-soft);
}

.sebi-form .ff-el-is-required.asterisk-right label::after {
	content: '*';
	margin-left: 0.25em;
	color: var(--color-navy-soft);
}

.sebi-form input[type='text'],
.sebi-form input[type='email'],
.sebi-form input[type='tel'],
.sebi-form input[type='url'],
.sebi-form input[type='number'],
.sebi-form select,
.sebi-form textarea {
	width: 100%;
	padding: 0.8rem 0.9rem;
	border: var(--border-hair) solid var(--color-line-strong);
	border-radius: var(--radius);
	background: transparent;
	font-family: var(--font-ui);
	font-size: var(--text-md);
	color: var(--color-ink);
	transition: border-color var(--speed-fast) var(--ease);
}

.sebi-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.sebi-form input:focus,
.sebi-form select:focus,
.sebi-form textarea:focus {
	outline: none;
	border-color: var(--color-navy);
}

.sebi-form ::placeholder {
	color: color-mix(in srgb, var(--color-ink) 38%, transparent);
}

/* Two across where there is room: names, then dates. */
.sebi-form .ff-t-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0 var(--space-md);
}

.sebi-form .ff-t-cell {
	min-width: 0;
}

/* Consent */
.sebi-form .ff-el-form-check {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2xs);
}

.sebi-form .ff-el-form-check label {
	font-size: var(--text-sm);
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-ink-soft);
	line-height: var(--leading-snug);
}

.sebi-form input[type='checkbox'] {
	width: 1.05rem;
	height: 1.05rem;
	margin-top: 0.2rem;
	accent-color: var(--color-navy);
	flex: none;
}

/* Button */
.sebi-form .ff-btn-submit {
	width: 100%;
	padding: 1rem 2rem;
	border: var(--border-hair) solid var(--color-navy);
	border-radius: var(--radius);
	background: var(--color-navy);
	color: var(--color-surface);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: var(--weight-light);
	letter-spacing: var(--track-button);
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--speed-fast) var(--ease);
}

.sebi-form .ff-btn-submit:hover {
	background: var(--color-navy-deep);
	border-color: var(--color-navy-deep);
}

/* Errors use their own red, distinct from the signature one, so a warning
   is never read as something to click. */
.sebi-form .error,
.sebi-form .ff-el-is-error .text-danger,
.sebi-form .ff_submit_btn_wrapper .error {
	color: var(--color-alert);
	font-size: var(--text-sm);
}

.sebi-form .ff-el-is-error input,
.sebi-form .ff-el-is-error textarea {
	border-color: var(--color-alert);
}

.sebi-form .ff-message-success {
	padding: var(--space-md);
	border: var(--border-hair) solid var(--color-line-strong);
	border-radius: var(--radius);
	text-align: center;
	color: var(--color-navy);
}

/* --- Country code ---------------------------------------------------------
 * Added by the theme rather than the plugin, so it works on the free tier
 * and matches everything else. Names not flags: flag emoji do not render at
 * all on Windows and a sprite is weight for no gain.
 */

.sebi-phone {
	display: flex;
	gap: var(--space-2xs);
}

.sebi-phone select {
	flex: none;
	width: 7.5rem;
}

.sebi-phone input {
	flex: 1;
}

@media (max-width: 30rem) {
	.sebi-phone {
		flex-wrap: wrap;
	}

	.sebi-phone select {
		width: 100%;
	}
}

/* --- Contact page ---------------------------------------------------------
 * Details and form side by side where there is room; stacked on a phone,
 * details first so the quickest route — a phone call — comes before the
 * slowest one.
 */

.contact {
	display: grid;
	grid-template-columns: minmax(16rem, 22rem) 1fr;
	gap: var(--space-xl);
	align-items: start;
	padding-bottom: var(--space-section);
}

.contact__lead {
	margin-bottom: var(--space-lg);
	color: var(--color-ink-soft);
}

.contact__item {
	margin-bottom: var(--space-lg);
}

.contact__item .label {
	margin-bottom: var(--space-2xs);
}

.contact__item p {
	margin: 0 0 var(--space-3xs);
	max-width: none;
}

.contact__item a {
	color: var(--color-navy);
	text-decoration: none;
	border-bottom: var(--border-hair) solid var(--color-line-strong);
}

.contact__item a:hover {
	border-bottom-color: var(--color-navy);
}

.contact__whatsapp {
	display: inline-flex;
	border-bottom: var(--border-hair) solid var(--color-navy);
}

.contact__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact__social a {
	font-size: var(--text-sm);
	letter-spacing: var(--track-label);
	text-transform: uppercase;
}

.contact__extra {
	padding-top: var(--space-md);
	border-top: var(--border-hair) solid var(--color-line);
	color: var(--color-ink-soft);
}

/* On the contact page the form has the details beside it, so the block does
   not need its own full-width framing. */
.contact__form .enquiry {
	padding: 0;
	background: none;
}

.contact__form .enquiry .wrap {
	padding-inline: 0;
}

.contact__form .enquiry__inner {
	max-width: none;
}

.contact__form .enquiry__intro {
	margin-bottom: var(--space-lg);
	text-align: left;
}

.contact__form .enquiry__intro .section-title {
	text-align: left;
}

.contact__form .enquiry__intro .rule {
	margin-inline: 0;
}

.contact__form .enquiry__intro p {
	margin-inline: 0;
}

@media (max-width: 62rem) {
	.contact {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}
}