/*
 * "Inquire now" popup modal.
 *
 * Styles the modal shell AND the form markup itself (we load none of the form
 * plugin's own CSS). Selectors target Fluent Forms' public markup:
 *   .frm-fluent-form, .ff-t-container / .ff-t-cell (column rows),
 *   .ff-el-group, .ff-el-input--label, .ff-el-form-control, .ff-btn-submit.
 */

/* ---- Overlay + dialog --------------------------------------------------- */
.et-inquire {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(12px, 5vh, 64px) 16px;
	overflow-y: auto;
	opacity: 0;
	transition: opacity 0.2s ease;
	font-family: var(--font-sans, system-ui, sans-serif);
}
.et-inquire[hidden] { display: none; }
.et-inquire.is-open { opacity: 1; }

.et-inquire__overlay {
	position: fixed;
	inset: 0;
	background: rgba(14, 20, 40, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.et-inquire__dialog {
	position: relative;
	width: 100%;
	max-width: 760px;
	margin: auto;
	background: var(--et-paper, #fff);
	border-radius: 20px;
	box-shadow: 0 30px 80px rgba(10, 18, 40, 0.35);
	padding: clamp(24px, 4vw, 44px);
	transform: translateY(12px) scale(0.98);
	transition: transform 0.2s ease;
}
.et-inquire.is-open .et-inquire__dialog { transform: none; }

/* ---- Close button ------------------------------------------------------- */
.et-inquire__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--et-cream-2, #edf1f8);
	color: var(--et-ink-3, #555);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.et-inquire__close:hover { background: var(--et-line, #e6e6e6); color: var(--et-ink, #1a1a1a); }
.et-inquire__close svg { width: 20px; height: 20px; }

/* ---- Header ------------------------------------------------------------- */
.et-inquire__head { margin-bottom: 22px; padding-right: 44px; }
.et-inquire__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--et-brand, #1e40a8);
}
.et-inquire__dash {
	display: inline-block;
	width: 24px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}
.et-inquire__title {
	margin: 0;
	font-size: clamp(26px, 4vw, 34px);
	line-height: 1.1;
	font-weight: 800;
	color: var(--et-ink, #1a1a1a);
}

/* ---- Form layout (Fluent Forms markup) ---------------------------------- */
.et-inquire .fluentform,
.et-inquire .frm-fluent-form { margin: 0; }
.et-inquire fieldset { min-inline-size: auto; }

/* Column rows: FF sets an inline flex-basis:50% on each cell. Left as-is that,
   plus our gutter, overflows the row and wraps every field onto its own line —
   so we override the basis (!important beats the inline style) and forbid wrap.
   Each cell then shares the row equally regardless of how many there are. */
.et-inquire .ff-t-container {
	display: flex;
	flex-wrap: nowrap;
	gap: 0 20px;
}
.et-inquire .ff-t-cell {
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0;
}

/* Vertical rhythm between rows / full-width fields. */
.et-inquire .frm-fluent-form > .ff-t-container,
.et-inquire .frm-fluent-form > .ff-el-group,
.et-inquire fieldset > .ff-t-container,
.et-inquire fieldset > .ff-el-group { margin-bottom: 18px; }
.et-inquire .ff-t-cell > .ff-el-group { margin-bottom: 0; }

/* Labels */
.et-inquire .ff-el-input--label { margin-bottom: 6px; }
.et-inquire .ff-el-input--label label {
	font-size: 14px;
	font-weight: 600;
	color: var(--et-ink, #1a1a1a);
}
/* Required asterisk (FF normally draws this in its own CSS). */
.et-inquire .ff-el-is-required.asterisk-right label::after {
	content: " *";
	color: var(--et-accent, #e1251b);
	font-weight: 700;
}

/* Inputs, selects, textareas */
.et-inquire .ff-el-form-control {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: var(--et-ink, #1a1a1a);
	background: var(--et-paper, #fff);
	border: 1px solid var(--et-line-2, #d6d6d6);
	border-radius: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	appearance: none;
	-webkit-appearance: none;
}
.et-inquire textarea.ff-el-form-control { min-height: 120px; resize: vertical; }
.et-inquire .ff-el-form-control::placeholder { color: var(--et-mute, #888); }
.et-inquire .ff-el-form-control:focus {
	outline: none;
	border-color: var(--et-brand, #1e40a8);
	box-shadow: 0 0 0 3px rgba(30, 64, 168, 0.15);
}

/* Native select chevron (we removed the plugin's). */
.et-inquire select.ff-el-form-control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}

/* ---- Footer bar (submit + note) ----------------------------------------- */
.et-inquire .ff_submit_btn_wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 26px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--et-line, #e6e6e6);
}
.et-inquire .ff_submit_btn_wrapper::before {
	content: var(--et-inquire-note, "");
	color: var(--et-mute, #888);
	font-size: 14px;
	order: -1;
}
.et-inquire .ff-btn-submit {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 28px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: var(--et-brand, #1e40a8);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.05s ease;
}
.et-inquire .ff-btn-submit:hover { background: var(--et-brand-deep, #162d72); }
.et-inquire .ff-btn-submit:active { transform: translateY(1px); }
.et-inquire .ff-btn-submit:disabled { opacity: 0.6; cursor: default; }

/* ---- Validation + messages ---------------------------------------------- */
.et-inquire .ff-el-is-error .ff-el-form-control,
.et-inquire .ff-el-form-control.ff-errored { border-color: var(--et-accent, #e1251b); }
.et-inquire .error,
.et-inquire .text-danger,
.et-inquire .ff-el-is-error-message {
	margin-top: 5px;
	font-size: 13px;
	color: var(--et-accent, #e1251b);
}
.et-inquire .ff-message-success,
.et-inquire .ff_submit_success {
	padding: 16px 18px;
	font-size: 15px;
	color: var(--et-ok, #2f5c3a);
	background: var(--et-ok-bg, #e3eede);
	border-radius: 10px;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 640px) {
	.et-inquire .ff-t-container { flex-direction: column; gap: 18px; }
	.et-inquire .ff-t-cell { flex-basis: auto !important; }
	.et-inquire .ff-t-cell > .ff-el-group { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.et-inquire,
	.et-inquire__dialog { transition: none; }
}