/*
 * Kalon Check Availability — form styles
 * No Elementor classes referenced. All selectors are .kalon-form-* / .kalon-room-card / .kalon-sr-only.
 * Drop-in safe even if Elementor is later removed.
 */

.kalon-form-root {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #2c2c2c;
	max-width: 100%;
}

.kalon-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
}

.kalon-form * {
	box-sizing: border-box;
}

/* ── Honeypot ──────────────────────────────────────────── */
/* Multi-layer hide so no layout footprint is left, no matter what
   inherited rule tries to override us. The wrapper is position:absolute
   off-screen, and every child is also position:absolute off-screen
   so the input's natural width (e.g. 147px from inherited browser styles)
   can't reserve layout space.
   We deliberately do NOT use display:none or visibility:hidden because
   some spam bots skip honeypots styled with those properties. */
.kalon-form__hp {
	position: absolute !important;
	left: -10000px !important;
	top: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	max-width: 1px !important;
	max-height: 1px !important;
	overflow: hidden !important;
	pointer-events: none !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
}
.kalon-form__hp * {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
}

/* ── Screen-reader-only labels ─────────────────────────── */
.kalon-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Layout rows ───────────────────────────────────────── */
.kalon-form__row {
	display: flex;
	gap: 12px;
	width: 100%;
}

.kalon-form__row.is-hidden {
	display: none;
}

.kalon-form__field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.kalon-form__field--full {
	flex: 1 1 100%;
}

.kalon-form__field--half {
	flex: 1 1 50%;
}

/* TCPA consent microcopy under the phone input. */
.kalon-form__consent {
	margin: 6px 2px 0;
	font-size: 11px;
	line-height: 1.4;
	color: #8a8a8a;
	font-style: italic;
}

/* ── Inputs ────────────────────────────────────────────── */
.kalon-form input[type="text"],
.kalon-form input[type="email"],
.kalon-form input[type="tel"],
.kalon-form input[type="date"],
.kalon-form select,
.kalon-form textarea {
	width: 100%;
	padding: 14px 16px;
	font-family: inherit;
	/* 16px minimum — any smaller triggers iOS Safari viewport zoom on focus. */
	font-size: 16px;
	color: #2c2c2c;
	background: #fff;
	border: 1px solid #d8d2c6;
	border-radius: 6px;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.kalon-form input::placeholder,
.kalon-form textarea::placeholder {
	color: #999;
	opacity: 1;
}

/* Flatpickr mobile native date picker — match height + style to other fields.
   When disableMobile is false, Flatpickr creates a .flatpickr-mobile overlay
   input that doesn't inherit kalon-form rules. Force consistency. */
.kalon-form .flatpickr-mobile {
	width: 100%;
	padding: 14px 16px;
	font-family: inherit;
	font-size: 16px;
	color: #999;
	background: #fff;
	border: 1px solid #d8d2c6;
	border-radius: 6px;
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	min-height: 50px;
}
.kalon-form .flatpickr-mobile:focus {
	color: #2c2c2c;
	border-color: #00B3DB;
	box-shadow: 0 0 0 3px rgba(0, 179, 219, 0.15);
}
/* Show selected date in dark text once a value is picked */
.kalon-form .flatpickr-mobile:valid {
	color: #2c2c2c;
}

/* Flatpickr static (inline) calendar — renders inside the form flow
   instead of as an absolute overlay, so it's never clipped by the
   popup dialog's overflow-y: auto. The calendar pushes fields below
   it down; the popup scrolls to fit.
   Do NOT set width: 100% — the date input sits in a half-width field
   container (~220px), but the calendar needs ~307px for 7 day columns.
   Let it overflow the container at its natural width. */
.kalon-form .flatpickr-calendar.static {
	margin-top: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	border: 1px solid #e8e4dc;
}

/* Allow the calendar to visually overflow its half-width parent */
.kalon-form .flatpickr-wrapper {
	overflow: visible;
}
.kalon-form__date-wrap {
	overflow: visible;
}
.kalon-form__field--half {
	overflow: visible;
}

.kalon-form input:focus,
.kalon-form select:focus,
.kalon-form textarea:focus {
	border-color: #00B3DB;
	box-shadow: 0 0 0 3px rgba(0, 179, 219, 0.15);
}

.kalon-form textarea {
	resize: vertical;
	min-height: 110px;
	font-family: inherit;
}

/* Native date input — paint placeholder colour until valid (used only when Flatpickr fallback fires) */
.kalon-form input[type="date"] {
	color: #999;
}
.kalon-form input[type="date"]:valid,
.kalon-form input[type="date"].has-value {
	color: #2c2c2c;
}

/* ── Flatpickr brand overrides ─────────────────────────── */
/* The altInput Flatpickr renders into is what the user actually sees.
   The original input becomes hidden — we still need it (form submit reads from it).
   Decorative calendar icon is rendered as an inline <svg> sibling inside the
   .kalon-form__date-wrap parent — see the date-wrap rules further down. */
.kalon-form input.kalon-form__date-alt {
	cursor: pointer;
	/* Reserve space for the absolutely-positioned .kalon-form__date-icon overlay. */
	padding-right: 42px;
}

.flatpickr-calendar {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
	border-radius: 8px;
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
	background: #00B3DB;
	border-color: #00B3DB;
	color: #fff;
}

.flatpickr-day.today {
	border-color: #00B3DB;
}

.flatpickr-day.today:hover {
	background: rgba(0, 179, 219, 0.1);
	color: #00B3DB;
}

.flatpickr-day:hover {
	background: rgba(0, 179, 219, 0.08);
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
	color: #2c2c2c;
}

/* Year stepper arrows — enlarge for mobile touch (default ~12px is too
   small per Apple HIG 44px minimum). Wider wrapper so the arrows don't
   crowd the year digits. */
/* Year dropdown — rendered as a full-width bar between the month
   navigation and the day grid. The onReady callback in kalon-form.js
   hides the default numInputWrapper (tiny arrows) and inserts this
   <select> as a sibling after .flatpickr-months. */
/* Year dropdown — sits inline next to the month <select> inside
   .flatpickr-current-month. Styled to match the month dropdown. */
.flatpickr-current-month {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 4px;
	position: relative !important;
	padding: 7px 0 0 !important;
	height: auto !important;
}
select.kalon-year-select {
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	color: inherit;
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.flatpickr-weekday {
	color: #6c6c6c;
	font-weight: 600;
}

/* The original input that flatpickr hid — keep it functional but invisible */
.kalon-form input.flatpickr-input.input[type="date"] {
	display: none !important;
}

/* Native select arrow.
   The chevron is rendered as an inline <svg> sibling inside the
   .kalon-form__select-wrap parent — see the select-wrap rules further down.
   Reserve space for the absolutely-positioned .kalon-form__select-icon overlay. */
.kalon-form select {
	padding-right: 40px;
}

/* ── Date + select wrappers ─────────────────────────────
 * Both interactive controls are wrapped in a positioning <div> that holds
 * the input/select AND a real inline <svg> icon. The icons are NOT
 * background-image declarations, so FlyingPress's lazy-bg auto-detector
 * has nothing to misclassify on the form control itself. The wrapper is
 * the only element with the icon, the icon is a real SVG element, and
 * `pointer-events: none` lets clicks pass through to the underlying
 * control.
 *
 * Flatpickr note: when Flatpickr binds to the original <input type="date">
 * it injects an alt text input as the next sibling. Both the original
 * (hidden via display:none) and the altInput live inside .kalon-form__date-wrap,
 * and the absolutely-positioned .kalon-form__date-icon overlays the
 * altInput correctly without any layout interference. */
.kalon-form__date-wrap,
.kalon-form__select-wrap {
	position: relative;
	width: 100%;
}

.kalon-form__date-icon,
.kalon-form__select-icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: #999;
}

.kalon-form__date-icon {
	right: 14px;
	width: 16px;
	height: 16px;
}

.kalon-form__select-icon {
	right: 16px;
	width: 12px;
	height: 8px;
}

/* ── Room cards ────────────────────────────────────────── */
.kalon-form__rooms {
	border: 0;
	padding: 0;
	margin: 6px 0 0;
}

.kalon-form__rooms-legend {
	font-size: 13px;
	font-weight: 500;
	color: #666;
	margin-bottom: 10px;
	padding: 0;
}

.kalon-form__rooms-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.kalon-form__rooms-note {
	margin: 12px 0 0;
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.5;
	color: #4a4a4a;
	background: #f7f4ef;
	border-left: 3px solid #00B3DB;
	border-radius: 4px;
}

.kalon-form__rooms-note.is-hidden {
	display: none;
}

/* Solo-traveler hint shown only when guest count is "1". Subtle italic
   accent so it sits below the cards without competing with them. */
.kalon-form__rooms-solo-note {
	margin: 12px 0 0;
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: 14px;
	line-height: 1.5;
	color: #888;
	text-align: center;
}

.kalon-form__rooms-solo-note.is-hidden {
	display: none;
}

.kalon-room-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	/* Slightly more breathing room top/bottom — the two combo cards now
	   carry ~2× longer descriptions and look cramped without it. */
	padding: 16px 14px 16px 42px;
	border: 1px solid #d8d2c6;
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.kalon-room-card.is-hidden {
	display: none;
}

.kalon-room-card input[type="checkbox"] {
	position: absolute;
	left: 14px;
	top: 16px;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #00B3DB;
	cursor: pointer;
}

.kalon-room-card__title {
	font-size: 14px;
	font-weight: 600;
	color: #2c2c2c;
	line-height: 1.2;
}

.kalon-room-card__desc {
	font-size: 12px;
	line-height: 1.45;
	color: #6c6c6c;
}

.kalon-room-card:hover {
	border-color: #00B3DB;
}

.kalon-room-card:has(input:checked) {
	border-color: #00B3DB;
	background: #f0fafd;
	box-shadow: 0 0 0 1px #00B3DB;
}

/* ── Submit button ─────────────────────────────────────── */
.kalon-form__row--submit {
	margin-top: 4px;
}

.kalon-form__submit {
	width: 100%;
	padding: 18px 32px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	/* Full brand gradient at rest — cyan → green visible in one frame.
	   Matches nav CTA pill, popup top strip, bottom-form top strip, and
	   the email signature bar. The previous implementation hid the green
	   half via background-size: 200% + position: 0%, so users only ever
	   saw the cyan stop at rest. */
	background: linear-gradient(90deg, #00B3DB 0%, #58D652 100%);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 179, 219, 0.18);
	transition:
		filter 0.25s ease,
		box-shadow 0.25s ease,
		transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.kalon-form__submit:hover:not(:disabled) {
	/* Subtle premium lift — no color shift, no gradient reposition,
	   just a tiny brightness bump + bigger glow. */
	filter: brightness(1.06);
	box-shadow: 0 10px 28px rgba(0, 179, 219, 0.28);
	transform: translateY(-2px);
}

.kalon-form__submit:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 4px 12px rgba(0, 179, 219, 0.2);
}

.kalon-form__submit:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

.kalon-form__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.kalon-form__submit.is-loading {
	position: relative;
	color: transparent;
}

.kalon-form__submit.is-loading::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: kalon-form-spin 0.6s linear infinite;
}

@keyframes kalon-form-spin {
	to { transform: rotate(360deg); }
}

/* ── Status / messages ─────────────────────────────────── */
.kalon-form__status {
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.5;
}

.kalon-form__status:empty {
	display: none;
}

.kalon-form__status--success {
	color: #166534;
	background: #ecfdf5;
	padding: 12px 14px;
	border-radius: 6px;
	border: 1px solid #bbf7d0;
}

.kalon-form__status--error {
	color: #991b1b;
	background: #fef2f2;
	padding: 12px 14px;
	border-radius: 6px;
	border: 1px solid #fecaca;
}

/* ── Mobile ────────────────────────────────────────────── */
@media (max-width: 600px) {
	.kalon-form__row {
		flex-direction: column;
	}
	.kalon-form__field--half {
		flex: 1 1 100%;
	}
	.kalon-form__rooms-grid {
		grid-template-columns: 1fr;
	}
}