/* Gravity Forms — project base treatment.
   Scoped via `.ibv-gform` wrapper so it doesn't touch GF instances outside
   the project's own embeds. Variants modify the base additively
   (`.ibv-gform--card` for a card-chrome form, etc).

   Newsletter forms (`.ibv-newsletter-form--*`) carry their own bespoke
   styling and are not built on this base yet — a follow-up DRY pass can
   migrate them. */

/* ─── Wrapper + field stack ─────────────────────────────────────── */

.ibv-gform .gform_wrapper {
	margin: 0;
}

.ibv-gform .gform_body {
	margin: 0;
}

.ibv-gform .gform_fields {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ibv-space-md);
}

.ibv-gform .gfield {
	margin: 0;
	min-width: 0;
}

/* GF 2.5+ column classes — opt-in per field in the form builder. */
@media (min-width: 48rem) {
	.ibv-gform .gform_fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ibv-gform .gfield {
		grid-column: span 2;
	}

	.ibv-gform .gfield--width-half {
		grid-column: span 1;
	}

	.ibv-gform .gfield--width-third {
		grid-column: span 1;
	}
}

/* ─── Hidden / honeypot fields ──────────────────────────────────── */

/* Hide GF's honeypot ("LinkedIn") + the validation hidden-input stub.
   GF labels the honeypot with `gfield_visibility_hidden`; the validation
   container ships visible by default ("This field is hidden when viewing
   the form") and is purely a back-end concern. */
.ibv-gform .gfield_visibility_hidden,
.ibv-gform .gform_validation_container,
.ibv-gform .gfield--type-honeypot,
.ibv-gform .gfield--type-hidden,
.ibv-gform .gform_hidden,
.ibv-gform .ibv-drp-hidden {
	/* display:none removes the <li> from the grid entirely, so hidden fields
	   (GF hidden-type + our visually-hidden date-range inputs) don't occupy a
	   cell and add `gap` whitespace. The inputs still submit their values. */
	display: none !important;
}

/* ─── Labels ─────────────────────────────────────────────────────── */

.ibv-gform .gfield_label {
	display: block;
	margin: 0 0 var(--ibv-space-2xs);
	font-family: var(--ibv-font-body);
	font-size: var(--ibv-fs-small);
	font-weight: var(--ibv-font-weight-medium);
	color: var(--ibv-color-text);
	line-height: var(--ibv-lh-cozy);
}

.ibv-gform .gfield_required {
	color: var(--ibv-color-error-200);
	margin-inline-start: 2px;
	font-weight: var(--ibv-font-weight-medium);
}

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

/* ─── Inputs / textarea / select ─────────────────────────────────── */

.ibv-gform .ginput_container {
	width: 100%;
}

.ibv-gform input[type="text"],
.ibv-gform input[type="email"],
.ibv-gform input[type="tel"],
.ibv-gform input[type="url"],
.ibv-gform input[type="number"],
.ibv-gform input[type="date"],
.ibv-gform input[type="time"],
.ibv-gform select,
.ibv-gform textarea {
	width: 100%;
	background: transparent;
	border: 1px solid var(--ibv-color-border);
	border-radius: var(--ibv-radius-field);
	padding: var(--ibv-space-sm) var(--ibv-space-md);
	font-family: var(--ibv-font-body);
	font-size: var(--ibv-fs-body);
	line-height: var(--ibv-lh-cozy);
	color: var(--ibv-color-text);
	transition: border-color var(--ibv-duration-fast) var(--ibv-ease-standard);
}

.ibv-gform input::placeholder,
.ibv-gform textarea::placeholder {
	color: var(--ibv-color-text-muted);
	opacity: 1;
}

.ibv-gform input:focus,
.ibv-gform select:focus,
.ibv-gform textarea:focus {
	outline: 2px solid var(--ibv-color-focus-ring);
	outline-offset: -2px;
	border-color: transparent;
}

.ibv-gform textarea {
	display: block;
	min-height: 10rem;
	resize: vertical;
}

.ibv-gform select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23343434' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right var(--ibv-space-sm) center;
	background-repeat: no-repeat;
	background-size: 1rem 1rem;
	padding-inline-end: calc(var(--ibv-space-md) + 1.5rem);
}

/* ─── Section breaks ─────────────────────────────────────────────── */

/* GF section fields ("About You") — the <h3> otherwise inherits the theme's
   display-heading scale. Match the form-builder treatment: a quiet body-face
   heading over a hairline rule. */
.ibv-gform .gsection {
	margin: 0;
	padding: 0 0 var(--ibv-space-xs);
	border: 0;
	border-block-end: 1px solid var(--ibv-color-border);
}

.ibv-gform .gsection:not(:first-child) {
	margin-block-start: var(--ibv-space-sm);
}

.ibv-gform .gsection_title {
	margin: 0;
	font-family: var(--ibv-font-body);
	font-size: var(--ibv-fs-h4);
	font-weight: var(--ibv-font-weight-semibold);
	line-height: var(--ibv-lh-snug);
	letter-spacing: var(--ibv-tracking-normal);
	color: var(--ibv-color-text);
}

/* ─── Complex fields (Name first/last, Email + confirm) ──────────── */

/* GF outputs its grid classes (`gform-grid-row` / `gform-grid-col`) in modern
   markup but they're only styled by the GF theme CSS we don't load — without
   it the sub-inputs stack full-width. Recreate the editor's layout: 50/50 on
   desktop, stacked on mobile. */
.ibv-gform .ginput_complex {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ibv-space-sm) var(--ibv-space-md);
}

@media (min-width: 48rem) {
	.ibv-gform .ginput_complex {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ibv-gform .ginput_complex .gform-grid-col {
	display: block;
	min-width: 0;
}

/* Sub-labels ("First", "Confirm Email Address") sit above their input,
   quieter than the field's main label so the pair reads as one group. */
.ibv-gform .gform-field-label--type-sub {
	display: block;
	margin: 0 0 var(--ibv-space-2xs);
	font-size: var(--ibv-fs-small);
	font-weight: var(--ibv-font-weight-regular);
	color: var(--ibv-color-text-muted);
	line-height: var(--ibv-lh-cozy);
}

/* The complex field's <legend> carries .gfield_label, but legends need
   normalizing before margins behave like the plain-label case. */
.ibv-gform legend.gfield_label {
	display: block;
	width: 100%;
	padding: 0;
}

/* Legacy float-clearing stub after complex fields — the grid handles layout. */
.ibv-gform .gf_clear_complex {
	display: none;
}

/* ─── Choice fields (checkbox / radio / consent) ─────────────────── */

/* Choice fields arrive as a <fieldset> with a <legend>. GF's own theme CSS
   is not loaded (only our base treatment), so strip the native fieldset
   chrome here. */
.ibv-gform fieldset.gfield {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* Fields set to "hidden label" in the form config keep their label/legend
   for screen readers only (GF adds `hidden_label`; without its theme CSS
   nothing hides it). */
.ibv-gform .hidden_label > .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* GF renders choices as a nested list the `.gform_fields` reset doesn't
   reach (a <ul> in legacy markup, a <div> in modern) — kill the list
   chrome on both and stack the choices on the field gap rhythm. */
.ibv-gform .gfield_checkbox,
.ibv-gform .gfield_radio {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ibv-space-xs);
}

.ibv-gform .gfield_checkbox > li,
.ibv-gform .gfield_radio > li,
.ibv-gform .gchoice {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
	gap: var(--ibv-space-xs);
}

.ibv-gform .gfield_checkbox input[type="checkbox"],
.ibv-gform .gfield_radio input[type="radio"] {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.125rem 0 0; /* optically centre against the first text line */
	accent-color: var(--ibv-color-sage-500);
	cursor: pointer;
}

.ibv-gform .gfield_checkbox label,
.ibv-gform .gfield_radio label {
	margin: 0;
	font-family: var(--ibv-font-body);
	font-size: var(--ibv-fs-body);
	font-weight: var(--ibv-font-weight-regular);
	line-height: var(--ibv-lh-cozy);
	color: var(--ibv-color-text);
	cursor: pointer;
}

/* ─── Submit ─────────────────────────────────────────────────────── */

.ibv-gform .gform_footer,
.ibv-gform .gform-footer {
	margin: var(--ibv-space-lg) 0 0;
	padding: 0;
	display: flex;
	justify-content: flex-end;
}

.ibv-gform input[type="submit"],
.ibv-gform button[type="submit"] {
	appearance: none;
	-webkit-appearance: none;
	background: var(--ibv-color-sage-500);
	color: var(--ibv-color-text-on-dark);
	border: 0;
	border-radius: var(--ibv-radius-md);
	padding: var(--ibv-space-sm) var(--ibv-space-lg);
	font-family: var(--ibv-font-body);
	font-size: var(--ibv-fs-small);
	font-weight: var(--ibv-font-weight-medium);
	line-height: var(--ibv-lh-cozy);
	cursor: pointer;
	transition: filter var(--ibv-duration-fast) var(--ibv-ease-standard);
}

.ibv-gform input[type="submit"]:hover,
.ibv-gform button[type="submit"]:hover,
.ibv-gform input[type="submit"]:focus-visible,
.ibv-gform button[type="submit"]:focus-visible {
	filter: brightness(0.92);
}

/* ─── Date fields + GF 3.0 WhatSock datepicker ───────────────────── */

/* Hidden villa/accommodation range inputs are disarmed in PHP/JS so this
   block only skins visible date fields (Concierge). We do not load GF's
   theme CSS, and dashicons are not enqueued on the front end, so the
   toggle and calendar need a project skin. The popup is often appended
   near the field (sometimes to <body>); this stylesheet only loads on
   pages that render a GF form. */

.ibv-gform .ginput_container_date {
	position: relative;
}

.ibv-gform .ginput_container_date input.gform-datepicker,
.ibv-gform .ginput_container_date input.datepicker {
	padding-inline-end: calc(var(--ibv-space-md) + 1.75rem);
}

.ibv-gform .gform-datepicker-toggle {
	position: absolute;
	inset-inline-end: var(--ibv-space-sm);
	inset-block-start: 50%;
	translate: 0 -50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ibv-color-text-muted);
	cursor: pointer;
}

.ibv-gform .gform-datepicker-toggle-icon {
	display: none;
}

.ibv-gform .gform-datepicker-toggle::before {
	content: "";
	display: block;
	width: 1.125rem;
	height: 1.125rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gform-datepicker-calendar {
	z-index: 100;
	width: 19rem;
	max-width: calc(100vw - 2rem);
	padding: var(--ibv-space-md);
	background: var(--ibv-color-surface);
	border: 1px solid var(--ibv-color-border);
	border-radius: var(--ibv-radius-md);
	box-shadow: var(--ibv-shadow-md);
	font-family: var(--ibv-font-body);
	font-size: var(--ibv-fs-small);
	color: var(--ibv-color-text);
}

.gform-datepicker-calendar .nav.prev,
.gform-datepicker-calendar .nav.next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--ibv-radius-md);
	color: var(--ibv-color-text);
	cursor: pointer;
}

.gform-datepicker-calendar .nav.prev:hover,
.gform-datepicker-calendar .nav.next:hover {
	background: var(--ibv-color-bg);
}

.gform-datepicker-calendar select {
	appearance: auto;
	background: var(--ibv-color-surface);
	border: 1px solid var(--ibv-color-border);
	border-radius: var(--ibv-radius-field);
	padding: var(--ibv-space-2xs) var(--ibv-space-xs);
	font-family: var(--ibv-font-body);
	font-size: var(--ibv-fs-small);
	color: var(--ibv-color-text);
}

.gform-datepicker-calendar table.calendar {
	width: 100%;
	border-collapse: collapse;
}

.gform-datepicker-calendar table.calendar th {
	padding: var(--ibv-space-2xs) 0;
	font-size: var(--ibv-fs-eyebrow);
	font-weight: var(--ibv-font-weight-medium);
	color: var(--ibv-color-text-muted);
}

.gform-datepicker-calendar table.calendar td {
	padding: 1px;
	text-align: center;
}

.gform-datepicker-calendar table.calendar td span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-inline: auto;
	border-radius: 50%;
	color: var(--ibv-color-text);
	cursor: pointer;
}

.gform-datepicker-calendar table.calendar td span:hover,
.gform-datepicker-calendar table.calendar td span:focus {
	background: var(--ibv-color-bg);
	outline: none;
}

.gform-datepicker-calendar table.calendar .dayToday span {
	box-shadow: inset 0 0 0 1px var(--ibv-color-sage-500);
}

.gform-datepicker-calendar table.calendar .selected span,
.gform-datepicker-calendar table.calendar [aria-selected="true"] span {
	background: var(--ibv-color-sage-500);
	color: var(--ibv-color-text-on-dark);
}

.gform-datepicker-calendar table.calendar .disabled span,
.gform-datepicker-calendar table.calendar .empty span {
	color: var(--ibv-color-text-subtle);
	background: transparent;
	cursor: default;
}

/* ─── Validation + confirmation ──────────────────────────────────── */

/* GF 2.5+ renders the top-of-form error summary as an <h2.gform_submission_error>,
   so without a reset it inherits the theme's display-heading scale and renders
   gigantic. Bring it back to a calm error banner. */
.ibv-gform .gform_submission_error {
	display: flex;
	align-items: flex-start;
	gap: var(--ibv-space-2xs);
	margin: 0 0 var(--ibv-space-md);
	padding: var(--ibv-space-sm) var(--ibv-space-md);
	background: var(--ibv-color-error-100);
	border-radius: var(--ibv-radius-md);
	color: var(--ibv-color-error-300);
	font-family: var(--ibv-font-body);
	font-size: var(--ibv-fs-body);
	font-weight: var(--ibv-font-weight-regular);
	line-height: var(--ibv-lh-cozy);
}

.ibv-gform .gfield_validation_message,
.ibv-gform .validation_error {
	color: var(--ibv-color-error-300);
	font-size: var(--ibv-fs-small);
	margin-block-start: var(--ibv-space-2xs);
}

.ibv-gform .gfield_error input[type="text"],
.ibv-gform .gfield_error input[type="email"],
.ibv-gform .gfield_error input[type="tel"],
.ibv-gform .gfield_error select,
.ibv-gform .gfield_error textarea {
	border-color: var(--ibv-color-error-200);
}

.ibv-gform .gform_confirmation_message {
	margin: 0;
	padding: var(--ibv-space-md);
	background: var(--ibv-color-positive-100);
	color: var(--ibv-color-positive-300);
	border-radius: var(--ibv-radius-md);
	font-size: var(--ibv-fs-body);
	line-height: var(--ibv-lh-cozy);
}

/* ─── Variant: card ──────────────────────────────────────────────── */
/* Adds white-card chrome around the whole form. Use when the form sits
   directly on a page-bg surface and needs its own panel (e.g. concierge
   enquiry on the off-white contact section). */
.ibv-gform--card {
	background: var(--ibv-color-surface);
	border-radius: var(--ibv-radius-md);
	padding: var(--ibv-space-xl);
	box-shadow: var(--ibv-shadow-md);
}

/* ─── intl-tel-input chrome under .ibv-gform ─────────────────────── */
/* The vendor library wraps the phone <input> in `.iti` and prepends a
   country flag button. Bring its chrome into palette so the field
   matches the rest of the form (flag artwork stays vendor-supplied). */

.ibv-gform .iti {
	width: 100%;
}

.ibv-gform .iti__country-list {
	background: var(--ibv-color-white);
	border: 1px solid var(--ibv-color-border);
	border-radius: var(--ibv-radius-md);
	box-shadow: var(--ibv-shadow-md);
	font-family: var(--ibv-font-body);
	font-size: var(--ibv-fs-body);
	color: var(--ibv-color-text);
	max-height: 18rem;
}

.ibv-gform .iti__country.iti__highlight {
	background: var(--ibv-color-bg);
}

.ibv-gform .iti__divider {
	border-block-end-color: var(--ibv-color-border);
}

.ibv-gform .iti__dial-code {
	color: var(--ibv-color-text-muted);
}

/* Flag button — match the input's left padding instead of the
   vendor's default chip background. */
.ibv-gform .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
	background: var(--ibv-color-bg);
}

/* GF date sublabels ("MM slash DD slash YYYY") use the WP standard
   `.screen-reader-text` class, hidden globally via layout.css — no
   form-scoped rule needed. */