/* Villa enquiry panel — embedded Gravity Form (#33) + grafted pricing / picker.
 *
 * GF field chrome comes from gravity-forms.css (scoped to .ibv-gform). This file
 * adds: the panel shell, the single-field "When" trigger, the live price block,
 * the gate's pending-state hiding (price + contact fields), and the prominent
 * full-width submit. The two real GF date fields are hidden; the picker writes
 * the range into them. */

.ibv-enquiry-panel {
	padding: var(--ibv-space-2xl) var(--ibv-space-lg) var(--ibv-space-lg);
	background: var(--ibv-color-bg);
	min-width: 0;
	width: auto;
	max-width: 100%;
}

.ibv-enquiry-panel__title {
	margin: 0 0 var(--ibv-space-lg);
	font-family: var(--ibv-font-display);
	font-size: var(--ibv-fs-h3);
	font-weight: var(--ibv-font-weight-regular);
	line-height: 1.2;
	letter-spacing: 0;
}

.ibv-enquiry-panel__offer-line {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ibv-space-xs);
	margin: calc(-1 * var(--ibv-space-sm)) 0 var(--ibv-space-lg);
}

.ibv-enquiry-panel__offer-about {
	margin: 0;
	width: 100%;
	padding: var(--ibv-space-sm) var(--ibv-space-md);
	background: var(--ibv-color-tint-gold);
	border-radius: var(--ibv-radius-sm);
	font-size: var(--ibv-fs-small);
	font-weight: var(--ibv-font-weight-regular);
	line-height: var(--ibv-lh-normal);
	color: var(--ibv-color-text);
}

.ibv-enquiry-panel__offer-kicker {
	display: block;
}

.ibv-enquiry-panel__offer-name {
	display: block;
	margin-block-start: var(--ibv-space-2xs);
	font-family: var(--ibv-font-display);
	font-size: var(--ibv-fs-body);
	line-height: var(--ibv-lh-snug);
}

.ibv-enquiry-panel__offer-clear {
	display: inline-flex;
	align-items: center;
	gap: var(--ibv-space-2xs);
	font-size: var(--ibv-fs-small);
	line-height: var(--ibv-lh-normal);
	color: var(--ibv-color-text);
	text-decoration: underline;
}

.ibv-enquiry-panel__offer-clear:hover,
.ibv-enquiry-panel__offer-clear:focus-visible {
	color: var(--ibv-color-link);
}

.ibv-enquiry-panel__offer-clear-icon {
	flex-shrink: 0;
}

/* Tighten the embedded GF field stack to match the old hand-built spacing. */
.ibv-enquiry-panel .ibv-gform .gform_fields {
	gap: var(--ibv-space-md);
}

/* Field labels hidden per design — placeholders carry the affordance. Kept in
   the DOM (clip) for screen readers; 3-class scope beats the foundation
   `.ibv-gform .gfield_label` (display:block). Mirrors accommodation-enquiry. */
.ibv-enquiry-panel .ibv-gform .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* ── Single-field "When" picker (GF HTML field markup) ──────────────── */

/* The two real GF date fields are hidden; the HTML "When" field is the
   visible control (enquiry-panel.js writes the range into the hidden inputs). */
.ibv-enquiry-panel .ibv-drp-from,
.ibv-enquiry-panel .ibv-drp-to {
	display: none;
}

.ibv-enquiry-panel__field--when {
	position: relative;
}

.ibv-enquiry-panel__when-trigger {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 3.375rem;
	padding: var(--ibv-space-md) calc(var(--ibv-space-lg) + 1.5rem) var(--ibv-space-md) var(--ibv-space-lg);
	border: 1px solid var(--ibv-color-border);
	border-radius: var(--ibv-radius-field);
	background: var(--ibv-color-bg);
	color: var(--ibv-color-text);
	font: inherit;
	font-size: var(--ibv-fs-body);
	text-align: start;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.ibv-enquiry-panel__when-trigger:focus,
.ibv-enquiry-panel__when-trigger:focus-visible {
	outline: 2px solid var(--ibv-color-focus-ring);
	outline-offset: -2px;
	border-color: transparent;
}

.ibv-enquiry-panel__when-value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ibv-enquiry-panel__when-value.is-empty {
	color: var(--ibv-color-text-muted);
}

/* "Guests" select — muted placeholder styling until a real choice is picked,
   matching the empty "When" trigger. GF renders the placeholder as a selected
   empty-value <option>; choosing a guest count reverts the text to default. */
.ibv-enquiry-panel .ibv-gform select:has(option[value=""]:checked) {
	color: var(--ibv-color-text-muted);
}

/* Match the GF "Guests" select to the custom "When" trigger's height +
   padding so the two controls line up (When is the reference). The extra
   inline-end room keeps the value clear of the dropdown chevron. */
.ibv-enquiry-panel .ibv-gform select {
	min-height: 3.375rem;
	padding-block: var(--ibv-space-md);
	padding-inline-start: var(--ibv-space-lg);
	padding-inline-end: calc(var(--ibv-space-lg) + 1.5rem);
}

.ibv-enquiry-panel__group-note {
	margin: var(--ibv-space-xs) 0 0;
	font-size: var(--ibv-fs-small);
	line-height: var(--ibv-lh-cozy);
	color: var(--ibv-color-text-muted);
}

.ibv-enquiry-panel__group-note strong {
	color: var(--ibv-color-text);
	font-weight: var(--ibv-font-weight-bold);
}

.ibv-enquiry-panel__group-note a {
	color: inherit;
	text-decoration: underline;
}

.ibv-enquiry-panel__when-clear {
	position: absolute;
	inset-inline-end: var(--ibv-space-sm);
	inset-block-start: 50%;
	translate: 0 -50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: var(--ibv-color-text-muted);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}

.ibv-enquiry-panel__when-clear[hidden] {
	display: none;
}

.ibv-enquiry-panel__when-clear:hover,
.ibv-enquiry-panel__when-clear:focus-visible {
	background-color: var(--ibv-color-tint-teal);
	color: var(--ibv-color-text);
	outline: none;
}

/* ── Pending state — gate the price + contact fields ───────────────── */

/* Price field (GF HTML field) is hidden until JS removes .is-pricing-pending
   after a successful paint(). Hiding the whole .gfield avoids an empty grid gap. */
.ibv-enquiry-panel.is-pricing-pending .ibv-enquiry-panel__price-field {
	display: none;
}

/* Contact fields are hidden until dates and guests are filled. Unavailable
   dates still reveal them so the guest can enquire. */
.ibv-enquiry-panel.is-contact-pending .ibv-contact-field {
	display: none;
}

/* The notice field collapses out of the grid whenever no notice is shown. */
.ibv-enquiry-panel__notice-field:has([data-bob-error][hidden]) {
	display: none;
}

/* ── Live price block (inside the GF HTML price field) ──────────────── */

.ibv-enquiry-panel__price-block {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.ibv-enquiry-panel__price-label {
	margin: 0;
	font-size: var(--ibv-fs-micro);
	font-weight: var(--ibv-font-weight-bold);
	line-height: 1.4;
	color: var(--ibv-color-text);
}

.ibv-enquiry-panel__price-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ibv-enquiry-panel__price-list-item {
	margin: 0;
}

.ibv-enquiry-panel__price-eur {
	margin: 0;
	font-family: var(--ibv-font-display);
	font-size: 2rem;
	font-weight: var(--ibv-font-weight-regular);
	line-height: 1.2;
	color: var(--ibv-color-brand-teal);
}

.ibv-enquiry-panel__breakdown {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--ibv-fs-small);
	line-height: 1.2;
	color: var(--ibv-color-brand-teal);
}

.ibv-enquiry-panel__breakdown-item {
	margin: 0;
}

.ibv-enquiry-panel__eco-note {
	margin: 0;
	font-size: var(--ibv-fs-micro);
	color: var(--ibv-color-text);
	line-height: var(--ibv-lh-normal);
}

/* ── Availability / pricing notice ─────────────────────────────────── */

.ibv-enquiry-panel__error {
	font-size: var(--ibv-fs-small);
	color: var(--ibv-color-text);
	padding: var(--ibv-space-sm);
	border-radius: var(--ibv-radius-sm);
	background: var(--ibv-color-bg-alt);
	border-left: 3px solid var(--ibv-color-accent-gold);
	line-height: var(--ibv-lh-normal);
}

.ibv-enquiry-panel__error[hidden] {
	display: none;
}

/* ── Submit (GF button) — prominent full-width primary CTA, gated ───── */

.ibv-enquiry-panel .ibv-gform .gform_footer {
	margin: var(--ibv-space-lg) 0 0;
	display: block;
}

.ibv-enquiry-panel .ibv-gform .gform_footer input[type="submit"],
.ibv-enquiry-panel .ibv-gform .gform_footer button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ibv-space-xs);
	width: 100%;
	border-radius: var(--ibv-radius-md);
	padding: var(--ibv-space-md) var(--ibv-space-xl);
	font-size: var(--ibv-fs-h4);
	font-weight: var(--ibv-font-weight-medium);
	background: var(--ibv-color-accent);
	color: var(--ibv-color-accent-contrast);
}

.ibv-enquiry-panel__submit-label {
	flex: 0 1 auto;
}

.ibv-enquiry-panel .ibv-gform .gform_footer .ibv-button__arrow {
	flex: none;
}

.ibv-enquiry-panel .ibv-gform .gform_footer input[type="submit"]:hover,
.ibv-enquiry-panel .ibv-gform .gform_footer button[type="submit"]:hover,
.ibv-enquiry-panel .ibv-gform .gform_footer input[type="submit"]:focus-visible,
.ibv-enquiry-panel .ibv-gform .gform_footer button[type="submit"]:focus-visible {
	background: var(--ibv-color-link);
	color: var(--ibv-color-accent-contrast);
	filter: none;
}

.ibv-enquiry-panel .ibv-gform .gform_footer input[type="submit"][disabled],
.ibv-enquiry-panel .ibv-gform .gform_footer button[type="submit"][disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Chrome: response note + chat block ────────────────────────────── */

.ibv-enquiry-panel__response-note {
	margin: var(--ibv-space-md) 0 0;
	font-size: var(--ibv-fs-micro);
	color: var(--ibv-color-text);
	line-height: var(--ibv-lh-normal);
}

.ibv-enquiry-panel__divider {
	border: 0;
	border-top: 1px solid var(--ibv-color-accent-gold);
	margin: var(--ibv-space-md) 0;
	width: 3.125rem;
}

.ibv-enquiry-panel__chat-label {
	margin: 0 0 var(--ibv-space-xs);
	font-size: var(--ibv-fs-small);
	font-weight: var(--ibv-font-weight-bold);
	color: var(--ibv-color-text);
}

.ibv-enquiry-panel__chat-label a {
	font-weight: var(--ibv-font-weight-bold);
	color: var(--ibv-color-text);
	text-decoration: underline;
}

.ibv-enquiry-panel__chat-number {
	display: block;
	font-size: var(--ibv-fs-micro);
	font-weight: var(--ibv-font-weight-regular);
	color: var(--ibv-color-text);
	margin-top: var(--ibv-space-2xs);
}

.ibv-enquiry-panel__chat-link {
	display: block;
	font-size: var(--ibv-fs-micro);
	margin-top: var(--ibv-space-2xs);
	color: var(--ibv-color-text);
	text-decoration: underline;
}

/* ── Phone error (intl-tel-input strict validation) ────────────────── */

.ibv-enquiry-panel__phone-error {
	margin: var(--ibv-space-2xs) 0 0;
	font-size: var(--ibv-fs-small);
	line-height: var(--ibv-lh-normal);
	color: var(--ibv-color-error-300);
}

.ibv-enquiry-panel__phone-error[hidden] {
	display: none;
}

.ibv-enquiry-panel .gfield.has-error input[type="tel"] {
	border-color: var(--ibv-color-error-200);
}

/* ── intl-tel-input theme vars (global mapping; reaches the mobile
   fullscreen country selector, which is detached from the .iti wrapper) ── */
:root {
	--iti-border-color:        var(--ibv-color-border);
	--iti-country-selector-bg: var(--ibv-color-bg);
	--iti-icon-color:          var(--ibv-color-text-muted);
	--iti-hover-color:         var(--ibv-color-tint-teal);
	--iti-spacer-horizontal:   var(--ibv-space-md);
}