/* LK Booking Engine — LAYOUT / POSITIONING ONLY.
 *
 * By design this file contains no visual styling: no colors, fonts, decorative
 * borders, radii, shadows, or "selected/hover" states. Typography, colors and
 * the look of buttons/cards/selected states are the child theme's job (Elementor).
 * Class names here are stable hooks for that theme CSS. The raw look in a default
 * theme is expected to be plain.
 */

.lk-wrap, .lk-search, .lk-single { box-sizing: border-box; width: 100%; }
.lk-wrap *, .lk-wrap *::before, .lk-wrap *::after,
.lk-search *, .lk-search *::before,
.lk-single *, .lk-single *::before { box-sizing: border-box; }

/* ---------- Archive / results layout ----------
   Filters sit in their own full-width row on top; the results row below splits
   into two equal columns (list | map) on desktop. */
.lk-filters-row { width: 100%; margin: 0 0 16px; display: flex; align-items: center; gap: 20px; }
/* Count on the left, the filters panel fills the rest to the right. */
.lk-filters-row .lk-count { flex: 0 0 auto; }
.lk-filters-row .lk-filters-panel { flex: 1 1 auto; min-width: 0; }
/* Toolbar "Sort" control — sits at the end of the row, just before the currency
   selector (layout only; the pill/border/colour live in the child theme). */
.lk-filters-row .lk-sort-tb { flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.lk-filters-row .lk-sort-tb + .lkbe-currency-slot-toolbar { margin-left: 0; }
.lk-sort-tb-lab { white-space: nowrap; }
@media (max-width: 640px) { .lk-sort-tb-lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

@media (min-width: 1000px) {
	.lk-has-map .lk-results-row {
		display: grid;
		grid-template-columns: 1fr 1fr; /* 50 / 50 */
		gap: 24px;
		align-items: start;
	}
	.lk-has-map .lk-map-col { position: sticky; top: 16px; }
}

.lk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }

.lk-grid { display: grid; grid-template-columns: repeat(var(--lk-cols, 3), minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1200px) { .lk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .lk-grid { grid-template-columns: 1fr; } }
/* In the 50/50 layout the list only has half the width → one card per row,
   except on wider screens (>=1450px) where the half is wide enough for two
   columns (so a 1500px-wide screen still shows two properties, scrollbar incl.). */
.lk-has-map .lk-list-col .lk-grid { grid-template-columns: 1fr; }
@media (min-width: 1450px) {
	.lk-has-map .lk-list-col .lk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lk-list-col { padding-bottom: 15px; }

/* Card */
.lk-card { display: flex; flex-direction: column; overflow: hidden; }
.lk-card-media { position: relative; display: block; aspect-ratio: 4 / 3; }
.lk-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-badge { position: absolute; top: 10px; right: 10px; }
.lk-card-label { position: absolute; top: 10px; left: 10px; z-index: 2; pointer-events: none; max-width: calc(100% - 20px); }
.lk-card-body { padding: 12px 14px 16px; }
.lk-card-title { margin: 4px 0 6px; }

/* Map */
.lk-map { width: 100%; }
.lk-map-panel { position: relative; }
.lk-pop { width: 200px; }
.lk-pop img { width: 100%; height: 120px; object-fit: cover; display: block; margin-bottom: 6px; }

/* Price-pill markers (Airbnb/VRBO style). Leaflet positions the wrapper's
   top-left at the point; the inner pill is translated to sit centered on it.
   Layout here — brand colours can be refined in the child theme. */
.lk-price-marker { width: auto; height: auto; background: none; border: 0; }
.lk-price-pill {
	display: inline-block;
	transform: translate( -50%, -50% );
	white-space: nowrap;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	/* Functional default so pills are legible before theming (override in child theme). */
	background: #fff;
	color: #16303c;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .3 );
}
/* Lift a hovered/active pill ABOVE every other marker. Leaflet gives each marker
   an inline z-index equal to its pixel Y within the marker pane (seen up to ~540+
   and higher on taller maps), so a fixed low value (e.g. 500) can sit BELOW an
   overlapping neighbour — on hover the marker would drop behind it, the neighbour
   would take the pointer, and the two would rapidly swap (flicker). A value above
   any marker's Y fixes the hovered one on top. It still can't cover the popup: the
   popup lives in Leaflet's popupPane (a higher pane / separate stacking context),
   which wins regardless of this marker-pane z-index. */
.leaflet-marker-icon.lk-price-marker.lk-marker-active,
.lk-price-marker:hover { z-index: 10000 !important; }

/* Grouped pill — several units at one address. A count badge sits on the pill;
   the popup lists the units. */
.lk-price-pill-multi { padding-right: 8px; }
.lk-pill-count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 16px; height: 16px; margin-left: 6px; padding: 0 4px;
	border-radius: 999px; background: #16303c; color: #fff;
	font-size: 10px; font-weight: 700; line-height: 1;
}
/* Units-at-this-address list popup. */
.lk-multi-pop { width: 280px; }
.lk-multi-head { padding: 10px 14px; font-weight: 700; font-size: .85rem; color: #16303c; border-bottom: 1px solid #E3E8EA; }
.lk-multi-list { max-height: 300px; overflow-y: auto; }
.lk-multi-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-decoration: none; color: inherit; border-bottom: 1px solid #EEF2F4; }
.lk-multi-item:last-child { border-bottom: 0; }
.lk-multi-item:hover { background: #F5F8F9; }
.lk-multi-thumb { width: 52px; height: 44px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.lk-multi-body { display: flex; flex-direction: column; min-width: 0; }
.lk-multi-name { font-size: .9rem; font-weight: 600; color: #16303c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-multi-price { font-size: .82rem; color: #5B6B73; }

/* Card popup: the full property card fills a padding-less popup, and the popup
   sits ABOVE every pill on click (Leaflet's popup pane is z-index 700; markers
   sit at 600 — this pushes the open card clearly on top). */
.leaflet-popup.lk-card-popup { z-index: 1000; }
.lk-card-popup .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; border-radius: 14px; }
.lk-card-popup .leaflet-popup-content { margin: 0; width: 280px !important; }
.lk-card-popup .lk-card { margin: 0; }
/* When a popup is flipped below its marker (no room above), move its tip to the
   TOP of the card and flip it so it points up toward the marker. */
.lk-card-popup.lk-popup-below .leaflet-popup-tip-container {
	top: 0;
	bottom: auto;
	margin-top: 0;
	transform: translateY( -100% ) rotate( 180deg );
}

/* Load more (AJAX). Layout only — the button uses Elementor's global button
   classes (elementor-button …), so its pill look/colours come from the kit /
   child theme. Here we just centre it and handle the loading state. */
.lk-load-more-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 28px 0 0; }
.lk-load-more.is-loading { opacity: .65; pointer-events: none; }
.lk-load-more-status { min-height: 1em; text-align: center; }

.lk-empty { padding: 40px 0; }

/* ---------- Checkout ("Confirm and pay") ----------
   Two columns on desktop: guest form (left) + a sticky booking summary (right).
   Visual styling (borders, colours, radii) lives in the child theme; the price
   recap reuses .lk-line / .lk-price-breakdown from the single-page widget. */
.lk-checkout { width: 100%; }
.lk-checkout-heading { margin: 6px 0 18px; }
.lk-checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
@media (max-width: 900px) { .lk-checkout-grid { grid-template-columns: 1fr; } }
/* Streamline unreachable: nothing can be paid, so only the recap and the Contact link stay. */
.lk-checkout-grid.is-api-down { grid-template-columns: minmax(0, 480px); justify-content: center; }
.lk-checkout-grid.is-api-down .lk-checkout-main, .lk-checkout-grid.is-api-down .lk-coupon { display: none; }
.lk-checkout-summary { position: sticky; top: 16px; border: 1px solid #ddd; border-radius: 4px; padding: 30px; }
@media (max-width: 900px) { .lk-checkout-summary { position: static; order: -1; } }

.lk-checkout-form .lk-fieldset { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.lk-checkout-form legend { padding: 0; margin: 0 0 10px; }
.lk-checkout-form .lk-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 12px; }
@media (max-width: 560px) { .lk-checkout-form .lk-field-row { grid-template-columns: 1fr; } }
.lk-checkout-form .lk-field { display: flex; flex-direction: column; gap: 4px; }
.lk-checkout-form .lk-field input { width: 100%; }
.lk-checkout-terms { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 18px; }
.lk-checkout-note { margin: 8px 0 0; }

.lk-checkout-prop { display: flex; gap: 12px; align-items: center; margin: 0 0 16px; }
.lk-checkout-prop-media { flex: 0 0 84px; }
.lk-checkout-prop-media img { width: 84px; height: 84px; object-fit: cover; display: block; }
.lk-checkout-prop-body { min-width: 0; }
.lk-checkout-prop-name { margin: 0 0 2px; }
.lk-checkout-prop-specs { margin: 0; }
.lk-checkout-trip { margin: 0 0 16px; }
.lk-checkout-trip .lk-trip-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 6px 0; }
.lk-checkout-trip dt, .lk-checkout-trip dd { margin: 0; }
.lk-trip-label { min-width: 0; }
.lk-trip-edit { flex: 0 0 auto; }
.lk-checkout-prop-rating { margin: 0; display: flex; align-items: center; gap: 5px; }

/* --- 3-step accordion — layout only; card borders/colours live in the child theme.
   Body shows only for the open step (step 2 stays "open" once done so the Stripe
   Payment Element remains mounted); the summary shows only when collapsed. --- */
/* The theme's global button style overrides the UA [hidden] rule (higher
   specificity than [hidden]{display:none}), so hidden buttons/options would show.
   Force it back within the checkout. */
.lk-checkout [hidden] { display: none !important; }
.lk-step { margin: 0 0 16px; border: 1px solid #ddd; border-radius: 4px; padding: 30px; }
.lk-step-head { display: flex; align-items: center; gap: 10px; }
.lk-step.is-open .lk-step-head { margin-bottom: 30px; }
.lk-step-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; }
.lk-step-title { margin: 0; flex: 1 1 auto; }
.lk-step-edit { flex: 0 0 auto; background: none; border: 0; cursor: pointer; padding: 4px 6px; }
.lk-step-body { display: none; margin: 14px 0 0; }
.lk-step.is-open .lk-step-body,
.lk-step.is-done-open .lk-step-body { display: block; }
.lk-step-summary { display: none; margin: 8px 0 0; }
.lk-step.is-collapsed .lk-step-summary { display: block; }
.lk-step-actions { margin: 18px 0 0; text-align: right; }
.lk-step:not(.is-open) .lk-step-actions { display: none; }
.lk-btn-next { cursor: pointer; }

/* Step 1 "Choose when to pay" options (radio on the right, Airbnb-style). */
.lk-terms { display: flex; flex-direction: column; gap: 10px; }
.lk-term { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 14px 16px; }
.lk-term input { flex: 0 0 auto; margin: 0; }
.lk-term-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.lk-term-sub:empty { display: none; }
.lk-pay-fields-title { margin: 0 0 8px; }

/* Payment (Stripe Payment Element) — layout only; the element is styled by Stripe. */
.lk-payment { margin: 18px 0 0; }
.lk-payment-element { margin: 0 0 14px; }
.lk-pay-msg { min-height: 1em; margin: 8px 0 0; }
/* Processing state on the pay/book button: greyed out + a spinner, so it's clear
   the request is in flight. Functional feedback (same pattern as .lk-load-more). */
.lk-btn-book.is-loading { position: relative; opacity: .6; cursor: progress; pointer-events: none; padding-right: 40px; }
.lk-btn-book.is-loading::after {
	content: ""; position: absolute; top: 50%; right: 16px; width: 16px; height: 16px; margin-top: -8px;
	border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
	animation: lk-spin .7s linear infinite;
}
@keyframes lk-spin { to { transform: rotate( 360deg ); } }
@media (prefers-reduced-motion: reduce) { .lk-btn-book.is-loading::after { animation: none; } }
.lk-pay-success { margin: 18px 0 0; }
.lk-pay-success-title { margin: 0 0 6px; }

/* Streamline card fields: card number full width, then month / year / CVV in a row. */
.lk-cc .lk-field-row { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) { .lk-cc .lk-field-row { grid-template-columns: 1fr 1fr; } }

/* Confirmation page — layout only. */
/* Box the content to the same width as the checkout page (its Elementor
   .e-con-inner is 1140px); the confirmation page has no such wrapper, so we cap
   + centre it here. */
.lk-confirmation { width: 100%; max-width: 1140px; margin-left: auto; margin-right: auto; }
/* Two columns like the checkout: the confirmation (left) + balance/manage (right). */
.lk-confirmation-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; padding: 45px 0; }
@media (max-width: 900px) { .lk-confirmation-grid { grid-template-columns: 1fr; } }
.lk-confirmation-aside { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.lk-confirmation-status { margin: 8px 0 0; }
/* Keep hidden elements (e.g. the balance form before a balance exists) hidden even
   under theme/Elementor element rules. */
.lk-confirmation [hidden] { display: none !important; }
.lk-confirmation-media { margin: 0 0 16px; }
.lk-confirmation-media img { width: 100%; height: auto; display: block; }
.lk-confirmation-head { margin: 0 0 18px; }
.lk-confirmation-ref { margin: 6px 0 0; }
.lk-confirmation-details, .lk-confirmation-payment { margin: 12px 0 0; }
.lk-conf-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.lk-conf-row dt, .lk-conf-row dd { margin: 0; }
.lk-confirmation-note { margin: 16px 0 0; }

/* Manage-your-reservation panel (confirmation page) — layout only. */
.lk-manage { margin: 0; }
.lk-manage-title { margin: 0 0 8px; }
.lk-manage-policy { margin: 0 0 30px; }
.lk-manage-form .lk-field { display: block; margin: 0 0 12px; }
.lk-manage-form .lk-field > span { display: block; margin: 0 0 4px; }
.lk-manage-form select, .lk-manage-form textarea { width: 100%; box-sizing: border-box; }
.lk-manage-msg { min-height: 1em; margin: 8px 0 0; }
.lk-manage-done { margin: 8px 0 0; }

/* Add-services (optional fees) list on the reservation page — layout only. */
.lk-addopts { margin: 0 0 20px; }
.lk-addopts-title { margin: 0 0 8px; }
.lk-addopts-list { margin: 0 0 12px; }
.lk-addopt-row { position: relative; }
.lk-addopt { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #E3E8EA; }
.lk-addopt-name { flex: 1 1 auto; }
.lk-addopt-price { flex: 0 0 auto; margin-left: auto; }
.lk-addopt.is-included { opacity: .6; }
/* Info "i" icon + description popover on each option (mirrors the single page).
   Two-class selector resets the Elementor global button skin. */
.lk-addopt .lk-addopt-info { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; color: inherit; line-height: 0; flex: 0 0 auto; }
.lk-addopt .lk-addopt-info svg { width: 16px; height: 16px; }
.lk-addopt-desc { position: absolute; z-index: 10; left: 0; right: 0; top: 100%; margin-top: 6px; padding: 10px 12px; font-size: .85rem; line-height: 1.45; background: #fff; border-radius: 8px; box-shadow: 0 6px 20px rgba( 16, 42, 56, .18 ); }

/* Pay-balance block on the reservation page — layout only. */
.lk-balance { margin: 0; }
.lk-balance-title { margin: 0 0 12px; }

/* ---------- Single property ---------- */
.lk-back { display: inline-block; margin: 0 0 14px; }
.lk-gallery { position: relative; display: grid; grid-template-columns: 2fr 1fr; gap: 8px; overflow: hidden; }
.lk-gallery-item { cursor: pointer; }
.lk-gallery-main { margin: 0; aspect-ratio: 3 / 2; position: relative; }
.lk-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Admin-set overlay label on the main photo (position only; visual in child theme).
   pointer-events:none so it never blocks the click that opens the lightbox. */
.lk-gallery-label { position: absolute; top: 12px; left: 12px; z-index: 2; pointer-events: none; }
.lk-gallery-side { display: grid; grid-template-rows: repeat(2, 1fr); gap: 8px; }
.lk-gallery-side figure { margin: 0; overflow: hidden; }
.lk-gallery-side img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 120px; }
@media (max-width: 720px) {
	.lk-gallery { grid-template-columns: 1fr; }
	.lk-gallery-side { grid-template-columns: repeat(4, 1fr); grid-template-rows: none; }
}
/* Mobile: a compact "1 / N" photo counter replaces the "View all photos" button
   (Wander-style). Visual pill lives in the child theme. */
/* "1 / N" photo counter (Wander-style), shown everywhere — the old "View all
   photos" button is gone. */
.lk-gallery-count { display: inline-flex; align-items: center; position: absolute; right: 12px; bottom: 12px; z-index: 3; margin: 0; cursor: pointer; }

/* Mobile-only sticky "Book now" bar (conversion). It lives between the specs and
   About; the -10px side margins cancel .lk-single's 10px mobile padding so the
   white band (added in .is-stuck) spans edge to edge. Band + fade transition live
   in the child theme; layout only here. */
.lk-mobile-cta,
.lk-cta-sentinel { display: none; }
@media (max-width: 767px) {
	.lk-cta-sentinel { display: block; height: 1px; margin: 0; }
	.lk-mobile-cta { display: block; position: sticky; top: 0; z-index: 50; margin: 0 -10px 14px; padding: 8px 10px; }
	.lk-mobile-cta.is-hidden { opacity: 0; pointer-events: none; }
	.lk-mobile-cta-btn { width: 100%; }
}

.lk-single-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 18px 0 6px; }
.lk-single-title { margin: 0 0 4px; }
.lk-single-rating { white-space: nowrap; }
.lk-single-specs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0 24px; padding: 0; }
/* Specs read as icon + number (bedrooms/bathrooms/guests); the word is kept for
   screen readers + SEO via .lk-sr-only. */
.lk-single-specs li { display: inline-flex; align-items: center; gap: 7px; }
.lk-spec-ic { width: 24px; height: 24px; flex: 0 0 auto; }

/* Visually-hidden (accessible) text. */
.lk-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.lk-single-grid { display: grid; grid-template-columns: minmax(0, 1fr) 432px; gap: 56px; align-items: start; }
@media (max-width: 900px) { .lk-single-grid { grid-template-columns: 1fr; } }

/* Stacked content sections (no tabs — client preference). Visual dividers,
   type + spacing live in the child theme; here we only reserve rhythm. */
.lk-section { padding: 0 0 40px; margin: 0 0 40px; }
.lk-section h2 { margin: 0 0 30px; }
.lk-amenity-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
@media (max-width: 560px) { .lk-amenity-groups { grid-template-columns: 1fr; } }
.lk-amenity-group ul { list-style: none; margin: 0; padding: 0; }
/* Amenity row: sprite icon + label (icon matches the results-page filters). */
.lk-amenity-group li { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.lk-am-ic { flex: 0 0 auto; width: 20px; height: 20px; }

/* Amenities filter: all group titles as pills (reusing the results "Sort by"
   .lk-fpill look); the chosen group's terms list in up to 3 columns, no icons.
   Pill visuals live in the child theme; layout only here. */
.lk-amf-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
/* The chosen group's terms flow down two columns (a single block), not a grid. */
.lk-amf-list { list-style: none; margin: 0; padding: 0 0 0 22px; columns: 2; column-gap: 32px; }
@media (max-width: 480px) { .lk-amf-list { columns: 1; } }
.lk-amf-list li { padding: 3px 0; break-inside: avoid; }
/* Mobile: leave room for the sticky "Book now" bar when we scroll to a list. */
@media (max-width: 767px) { .lk-amf-list { scroll-margin-top: 64px; } }
.lk-address { margin: 10px 0 0; }

/* Read-more collapsibles (description, amenities). The fade overlay + toggle
   look live in the child theme; here we only clamp the height + reserve the
   toggle. JS drops the clamp (adds .is-open) when the content already fits. */
.lk-collapse { position: relative; }
.lk-collapse-inner { position: relative; overflow: hidden; }
.lk-collapse--text .lk-collapse-inner { max-height: 9.5em; }
.lk-collapse--amen .lk-collapse-inner { max-height: 220px; }
.lk-collapse.is-open .lk-collapse-inner { max-height: none; }
.lk-collapse-toggle { margin-top: 12px; cursor: pointer; }

/* "Good to know" band (full width, both columns). 3 equal columns of short
   booking facts; single column on small screens. Visual styling in the child. */
.lk-gtk { margin: 52px 0 40px; }
.lk-gtk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lk-gtk-col p { margin: 0; }
/* Large section icon above each "Good to know" column. */
.lk-gtk-ic { display: block; width: 42px; height: 42px; margin: 0 0 14px; }
/* Mobile: stack the columns and centre the icon + text. */
@media (max-width: 720px) {
	.lk-gtk-grid { grid-template-columns: 1fr; gap: 24px; }
	.lk-gtk-col { text-align: center; }
	.lk-gtk-ic { margin-left: auto; margin-right: auto; }
}

/* Virtual tour / in-content video (Rove-style placement). */
.lk-tour { position: relative; aspect-ratio: 16 / 9; }
.lk-tour iframe,
.lk-tour .lk-tour-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lk-tour .lk-tour-video { object-fit: cover; background: #000; }

/* "Watch the tour" / video play button. The button is a sibling of .lk-gallery
   inside .lk-gallery-wrap, so on desktop it can overlay the 2nd photo (top of the
   right-hand thumbnail column) while on mobile it drops into its own block below
   the photos. Position only; pill/colour/shadow live in the child theme. */
.lk-gallery-wrap { position: relative; }
.lk-tour-btn { position: absolute; right: 12px; top: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.lk-tour-btn-ic { display: inline-flex; align-items: center; justify-content: center; }
/* Mobile: the thumbnails become a small 4-up row, so overlaying one looks cramped.
   Instead the button flows below the gallery as its own block — a separate
   container from the photos, sized to its content (not full width). */
@media (max-width: 720px) {
	.lk-tour-btn { position: static; margin: 12px 0 0; align-self: flex-start; }
}

/* Tour popup reuses the photo lightbox (.lk-lightbox / .lk-lb-close). The stage
   holds the 16:9 media, sized like .lk-lb-img so both popups feel identical. */
.lk-lightbox--media .lk-lb-stage { width: min(1100px, 92vw); max-width: 92vw; aspect-ratio: 16 / 9; max-height: 86vh; position: relative; }
.lk-lightbox--media .lk-lb-media { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Availability calendar (layout only — colours/states in the child theme) */
/* Cell/nav layout is scoped under .lk-cal so it out-specifies Elementor's global
   `button` reset (which otherwise forces the <button> cells to display:block and
   kills the flex column / centering / price-on-top order). */
/* Positioned so the floating min-stay hint (.lk-rcal-hint, appended by
   lk-calendar.js) anchors to this calendar. */
.lk-cal { position: relative; }
.lk-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.lk-cal-hint { flex: 1 1 auto; text-align: center; }
.lk-cal .lk-cal-nav { flex: 0 0 auto; cursor: pointer; padding: 4px 12px; font-size: 1.2rem; line-height: 1; }
.lk-cal .lk-cal-nav[disabled] { cursor: default; }
.lk-cal-months { display: flex; gap: 24px; flex-wrap: wrap; }
.lk-cal-month { flex: 1 1 260px; min-width: 0; }
.lk-cal-mtitle { text-align: center; font-weight: 600; margin: 0 0 8px; }
.lk-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.lk-cal-dow { text-align: center; font-size: .72rem; padding: 2px 0; }
.lk-cal .lk-cal-day { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border: 0; background: none; cursor: pointer; padding: 2px; font: inherit; }
.lk-cal .lk-cal-day[disabled] { cursor: default; }
.lk-cal .lk-cal-num { line-height: 1; }
.lk-cal .lk-cal-price { order: -1; line-height: 1; margin: 0 0 2px; text-align: center; }
.lk-cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.lk-cal .lk-cal-clear { cursor: pointer; }
.lk-cal-msg { margin: 0; }
.lk-cal-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.lk-cal-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; }
.lk-cal-legend-item::before { content: ""; width: 14px; height: 14px; border-radius: 3px; display: inline-block; }

/* Guest review form (layout only — colours/borders in the child theme) */
.lk-review-form { max-width: 640px; padding-bottom: var(--lk-cta-gap, 124px); }
.lk-review-form > :last-child { margin-bottom: 0; }
.lk-review-field { margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
.lk-review-field input[type="text"], .lk-review-field input[type="email"], .lk-review-field textarea { width: 100%; }
.lk-review-msg { margin: 0 0 16px; padding: 10px 14px; }
/* Star input: DOM order 5→1 + row-reverse so it reads 1→5 and :checked/:hover
   can colour the selected span and everything before it (child theme). */
.lk-rating-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.lk-rating-input input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lk-rating-input label { cursor: pointer; font-size: 1.8rem; line-height: 1; padding: 0 2px; }

/* Properties slider (layout only — visual style in the child theme).
   Multi-card horizontal scroll; two styles: full (same card as [lk_results]) and
   simple (photo + price + link). */
.lk-pslider { position: relative; }
.lk-pslider-viewport { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lk-pslider-viewport::-webkit-scrollbar { display: none; }
.lk-pslider-track { display: flex; gap: 20px; list-style: none; margin: 0; padding: 4px 0; }
.lk-pslide { flex: 0 0 320px; max-width: 100%; scroll-snap-align: start; }
.lk-pslide-simple { flex-basis: 240px; }
.lk-pslide .lk-card { height: 100%; }
/* Chevrons overlaid on the slides (left/right edges, vertically centered). */
.lk-pslider-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; cursor: pointer; padding: 6px 10px; line-height: 1; }
.lk-pslider-prev { left: 8px; }
.lk-pslider-next { right: 8px; }
.lk-pslider-nav[disabled] { opacity: 0; pointer-events: none; }
/* Fixed number of slides visible at once (columns attribute). --lk-pcols is the
   count; the 20px matches the track gap so exactly N cards fit. */
.lk-pslider-cols .lk-pslide { flex: 0 0 calc((100% - (var(--lk-pcols) - 1) * 20px) / var(--lk-pcols)); }
@media (max-width: 560px) {
	.lk-pslide { flex-basis: 80%; }
	.lk-pslide-simple { flex-basis: 62%; }
	/* Phones: the columns setting is desktop-only — always one at a time. */
	.lk-pslider-cols .lk-pslide { flex-basis: 100%; }
}
@media (min-width: 561px) and (max-width: 900px) {
	/* Tablets: cap at ~2 visible (max() keeps a lower requested count, e.g. 1). */
	.lk-pslider-cols .lk-pslide { flex-basis: max( calc((100% - (var(--lk-pcols) - 1) * 20px) / var(--lk-pcols)), calc((100% - 20px) / 2) ); }
}
/* Simple slide: photo with the price overlaid (visual style in the child theme) */
.lk-pslide-simple-media { position: relative; display: block; }
.lk-pslide-simple-media img { display: block; width: 100%; height: auto; }
.lk-pslide-simple-price { position: absolute; left: 10px; bottom: 10px; margin: 0; }

/* Featured reviews slider — ONE review at a time (layout only; the quote look,
   decorative marks, typography and card live in the child theme). */
.lk-rslider { display: flex; align-items: center; gap: 8px; }
.lk-rslider-viewport { flex: 1 1 auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lk-rslider-viewport::-webkit-scrollbar { display: none; }
.lk-rslider-track { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.lk-rslide { flex: 0 0 100%; max-width: 100%; scroll-snap-align: start; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lk-rslide-body { margin: 8px 0; }
.lk-rslide-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; }
.lk-rslider-nav { flex: 0 0 auto; cursor: pointer; }
.lk-rslider-nav[disabled] { cursor: default; }

/* Featured amenities grid ([lk_amenities]) — layout only; visual in child theme */
.lk-amenities-grid { display: grid; grid-template-columns: repeat(var(--lk-cols, 3), minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .lk-amenities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lk-amenities-grid { grid-template-columns: 1fr; } }
.lk-amenity-card { display: flex; flex-direction: column; overflow: hidden; }
.lk-amenity-media { aspect-ratio: 4 / 3; }
.lk-amenity-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-amenity-media-link { display: block; height: 100%; }
.lk-amenity-body { padding: 12px 0; }
.lk-amenity-title { margin: 0 0 6px; }
/* Optional CTA link under the text (only when the amenity has a URL). Visual
   style (colour/underline) lives in the child theme. */
.lk-amenity-link { display: inline-block; margin-top: 10px; }

/* Amenities editorial slider ([lk_amenities_slider]) — DESKTOP ONLY. Pair with
   [lk_amenities_accordion] (hidden on desktop in Elementor) for mobile. Layout +
   functional defaults; typography/colours live in the child theme. */
.lk-amslider { display: none; }
@media ( min-width: 1000px ) {
	.lk-amslider { display: block; }
}
/* White fades on both edges (film-strip look): the strip scrolls leftward, so
   cards materialize under the right fade and dissolve under the left one. Frame
   clips them to the cards area (not the controls below). */
.lk-amslider-frame { position: relative; }
.lk-amslider-frame::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; background: linear-gradient( to left, var( --lk-amslider-fade, #fff ), rgba( 255, 255, 255, 0 ) ); }
.lk-amslider-frame::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; background: linear-gradient( to right, var( --lk-amslider-fade, #fff ), rgba( 255, 255, 255, 0 ) ); }
.lk-amslider-viewport { width: 100%; overflow: hidden; scrollbar-width: none; }
.lk-amslider-viewport::-webkit-scrollbar { display: none; }
/* align-items:flex-start so the alternating vertical offset (stagger) reads from the top. */
.lk-amslider-track { display: flex; align-items: flex-start; gap: 28px; list-style: none; margin: 0; padding: 0; }
.lk-amslide { flex: 0 0 calc( ( 100% - ( var( --lk-amcols, 5 ) - 1 ) * 28px ) / var( --lk-amcols, 5 ) ); }
/* Staggered layout (like the reference): even cards higher, odd cards lower. The
   lk-amslide-lo class is assigned in JS by logical index so cloned slides (for the
   seamless loop) keep the same offset as their originals — no seam. */
.lk-amslide-lo { margin-top: var( --lk-amslider-stagger, 48px ); }
/* Square 1:1 media via the padding-top ratio box (robust: doesn't depend on
   aspect-ratio support and resists theme/Elementor height overrides). The image
   fills the box absolutely and is cropped (object-fit: cover). */
.lk-amslide-media-link { display: block; }
.lk-amslide-media { position: relative; width: 100%; padding-top: 100%; overflow: hidden; margin: 0 0 10px; }
/* width/height !important defeat Elementor's `.elementor img { height:auto }`
   (and the theme reset) which otherwise let the image keep its landscape height. */
.lk-amslide-media img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; display: block; }
.lk-amslide-title { margin: 0; }
/* Continuous film-strip marquee: JS clones the set once and sets, on the root,
   --lk-amslider-shift (exactly one set width) + a constant-speed
   --lk-amslider-duration. The track translates left by that shift, on loop.
   Runs continuously (no hover pause); disabled under reduced motion. */
.lk-amslider--marquee .lk-amslider-track {
	animation-name: lk-amslider-marquee;
	animation-duration: var( --lk-amslider-duration, 40s );
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform;
}
@keyframes lk-amslider-marquee {
	from { transform: translateX( 0 ); }
	to { transform: translateX( calc( -1 * var( --lk-amslider-shift, 50% ) ) ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.lk-amslider--marquee .lk-amslider-track { animation: none; }
}

/* Amenities image accordion ([lk_amenities_accordion]) — layout + functional
   defaults (gradient + white text for legibility); typography/colours in child theme. */
.lk-acc { display: flex; flex-direction: column; gap: 12px; }
.lk-acc-item { position: relative; overflow: hidden; border-radius: 4px; background-size: cover; background-position: center; }
.lk-acc-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient( to top, rgba( 0, 0, 0, .55 ), rgba( 0, 0, 0, .15 ) ); pointer-events: none; }
.lk-acc .lk-acc-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 80px; padding: 16px 22px; background: none; border: 0; box-shadow: none; border-radius: 0; cursor: pointer; color: #fff; text-align: left; }
.lk-acc-title { font-size: 1.4rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.lk-acc-toggle { flex: 0 0 auto; width: 34px; height: 34px; border: 2px solid rgba( 255, 255, 255, .85 ); border-radius: 999px; position: relative; }
.lk-acc-toggle::before, .lk-acc-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; background: #fff; transform: translate( -50%, -50% ); }
.lk-acc-toggle::after { transform: translate( -50%, -50% ) rotate( 90deg ); transition: opacity .2s ease; }
.lk-acc-item.is-open .lk-acc-toggle::after { opacity: 0; } /* "+" becomes "−" */
.lk-acc-panel { position: relative; z-index: 1; color: #fff; padding: 0 22px; }
.lk-acc-panel[hidden] { display: none; }
.lk-acc-item.is-open .lk-acc-panel { padding-bottom: 26px; }
.lk-acc-text { max-width: 46ch; margin: 0 0 14px; line-height: 1.5; }
.lk-acc-link { display: inline-block; color: #fff; text-decoration: none; border-bottom: 1px solid rgba( 255, 255, 255, .7 ); padding-bottom: 3px; text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; }

/* Owner reply on the property page (layout only) */
.lk-review-reply { margin: 8px 0 0; padding-left: 12px; }
.lk-review-reply-label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }

/* Reviews (layout only — visual style in the child theme) */
.lk-reviews-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 12px; }
.lk-reviews-head h2 { margin: 0; }
.lk-reviews-summary { display: inline-flex; align-items: baseline; gap: 8px; }
.lk-reviews-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 28px; }
@media (max-width: 680px) { .lk-reviews-list { grid-template-columns: 1fr; } }
.lk-review { margin: 0; }
.lk-review-stars { line-height: 1; margin: 0 0 6px; }
.lk-review-title { margin: 0 0 6px; }
.lk-review-body { margin: 0 0 8px; }
.lk-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }

/* Booking widget */
/* The header (title + specs) now lives in the left column. On desktop, offset the
   widget by the header's top margin (18px) so the top of the widget lines up with
   the top of the H1. */
.lk-single-aside { position: sticky; top: 16px; }
/* Desktop: the widget can be taller than the viewport (add-ons, breakdown, calendar).
   Rather than clipping it behind a hidden scrollbar, lk-single.js turns it into a
   "follow" sticky: its `top` is nudged with the scroll direction so the whole widget
   (incl. the bottom "Book Direct & Save" box) is always reachable — it reveals its
   bottom on scroll-down and its top on scroll-up. No internal scroll / clipping. */
@media (min-width: 901px) {
	.lk-single-aside { margin-top: 18px; }
}
/* Single-column layout (≤900px): the widget just flows — sticky here pins it in an
   odd spot and stops it ever entering the viewport. */
@media (max-width: 900px) { .lk-single-aside { position: static; } }
.lk-booking { padding: 45px; }
.lk-booking-vitrine { text-align: center; }
.lk-vitrine-note { margin: 0 0 16px; }
@media (max-width: 600px) { .lk-booking { padding: 28px; } }
.lk-booking-from { margin-bottom: 4px; }
/* "(minimum N nights)" under the price. Layout here; colour/size in child theme.
   27px = the base 12px + 15px extra breathing room before the date fields. */
.lk-booking-minstay { margin: 0 0 27px; font-size: .9em; }
/* Below-minimum alert in the price breakdown. Layout only; colour + weight
   live in the child theme. */
.lk-price-alert { margin: 0; }
.lk-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
/* min-width:0 lets native date/select inputs shrink inside their grid cell
   instead of forcing an overflow. */
.lk-field input, .lk-field select { padding: 9px 10px; min-width: 0; width: 100%; box-sizing: border-box; }
.lk-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Guests picker (layout only; visuals in the child theme). Popover + − N + steppers. */
.lk-gp { position: relative; }
.lk-gp-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 48px; padding: 0 16px; cursor: pointer; box-sizing: border-box; text-align: left; }
.lk-gp-chev { flex: 0 0 auto; transition: transform .2s ease; }
.lk-gp.is-open .lk-gp-chev { transform: rotate(180deg); }
.lk-gp-pop { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 8px); min-width: 260px; padding: 8px 18px 16px; box-sizing: border-box; }
.lk-gp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; }
.lk-gp-text { display: flex; flex-direction: column; gap: 2px; }
.lk-gp-stepper { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.lk-gp-dec, .lk-gp-inc { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; cursor: pointer; box-sizing: border-box; line-height: 1; }
.lk-gp-dec:disabled, .lk-gp-inc:disabled { cursor: not-allowed; }
.lk-gp-num { min-width: 1.6ch; text-align: center; }
.lk-gp-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.lk-gp-done { cursor: pointer; }
/* Phones: stack check-in / check-out (native date fields are too wide to sit
   side by side without clipping). */
@media (max-width: 480px) { .lk-field-row { grid-template-columns: 1fr; } }
.lk-addons { padding: 8px 12px; margin: 0 0 12px; }
/* Trip-protection section (checkout) — a highlighted box holding the two
   protection products + a coverage-PDF link. Layout only; visual in child theme. */
.lk-protect { margin: 0 0 12px; }
.lk-protect[hidden] { display: none; }
.lk-protect-head { margin: 0 0 6px; }
.lk-protect-title { margin: 0; }
.lk-protect-pdf { display: inline-block; margin-top: 10px; }
.lk-addon-row { position: relative; }
.lk-addon { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.lk-addon .lk-addon-price { margin-left: auto; }
/* Add-on info icon (description from Streamline). Two-class selector resets the
   Elementor global button skin; visual accent can be refined in the child theme. */
.lk-addon .lk-addon-info { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; color: inherit; line-height: 0; }
.lk-addon .lk-addon-info svg { width: 16px; height: 16px; }
/* Description popover (functional default so it's legible; refine in child theme). */
.lk-addon-desc { position: absolute; z-index: 10; left: 0; right: 0; top: 100%; margin-top: 6px; padding: 10px 12px; font-size: .85rem; line-height: 1.45; background: #fff; border-radius: 8px; box-shadow: 0 6px 20px rgba( 16, 42, 56, .18 ); }
/* Thumbnail inside the info popover (local options). */
.lk-addon-thumb, .lk-addopt-thumb { display: block; width: 100%; height: auto; border-radius: 8px; margin: 0 0 8px; }
/* Pet fee locked (auto-included when the stay has a pet). */
.lk-addon.is-locked .lk-addon-check { cursor: not-allowed; }
.lk-addon-lock { font-style: normal; font-size: .82em; color: #5B6B73; }
.lk-price-breakdown { margin: 6px 0 14px; }
.lk-line { display: flex; justify-content: space-between; padding: 5px 0; }
.lk-line-total { margin-top: 6px; padding-top: 10px; }
.lk-taxes-note { margin: 8px 0 0; }
.lk-btn { display: block; width: 100%; padding: 12px 16px; cursor: pointer; }
.lk-booking-note { text-align: center; margin: 10px 0 0; }
/* Streamline unreachable: the Contact link replaces the booking button and its note. */
.lk-booking.is-api-down #lk-book-btn, .lk-booking.is-api-down .lk-booking-note { display: none !important; }
.lk-api-contact { margin-top: 12px; text-align: center; }
/* Multi-unit notice above "Request to book": soft-yellow alert. */
.lk-book-alert { margin: 0 0 12px; padding: 10px 14px; background: #FFF7DB; border: 1px solid #F2E2A6; border-radius: 12px; color: #6B5A16; font-size: 14px; line-height: 1.45; text-align: center; }
.lk-book-alert .lk-whole-link { font-weight: 600; color: #5581A2; text-decoration: underline; }
.lk-book-alert .lk-whole-link:hover { text-decoration: none; }

/* ---------- "Book Direct & Save" price comparison (layout only) ----------
 * Estimated OTA prices vs our live price. Structure only here; colours, borders,
 * the "Best price" pill and the savings accent live in the child theme. */
.lk-pricecompare { margin: 0 0 14px; }
.lk-pricecompare[hidden] { display: none; }
.lk-pc-title { margin: 0 0 6px; }
.lk-pc-headline { display: flex; align-items: center; gap: 8px; }
.lk-pc-check { width: 20px; height: 20px; flex: 0 0 auto; }
.lk-pc-rows { list-style: none; margin: 10px 0 0; padding: 0; }
.lk-pc-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
.lk-pc-row .lk-pc-price { margin-left: auto; }
.lk-pc-note { margin: 8px 0 0; }

/* ---------- Search bar ----------
 * Single-line layout: [type selector] · [fields] · [button] all on one row.
 * The form itself is the flex row; the active field group (standard OR flexible)
 * sits between the tabs and the submit and stretches to fill. It wraps on narrow
 * viewports (below the ~882px design width). */
.lk-search { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; padding: 7px 8px; margin: 0 0 24px; }

.lk-search-tabs { display: inline-flex; gap: 4px; flex: 0 0 auto; align-self: center; }
.lk-tab { padding: 6px 16px; cursor: pointer; }

/* Both field groups stack in one grid cell. The single 1fr track sizes to the
 * WIDER group (standard), so the bar width is identical in both modes — even
 * when the Elementor container is shrink-to-fit. The inactive group is hidden
 * with visibility (keeps reserving its width) rather than display:none. */
.lk-search-groups { display: grid; grid-template-columns: 1fr; flex: 1 1 auto; min-width: 0; }
.lk-search-standard,
.lk-search-flexible { grid-column: 1; grid-row: 1; min-width: 0; }
.lk-search-standard { display: flex; flex-wrap: nowrap; gap: 12px; align-items: center; }
.lk-search-flexible { display: flex; flex-wrap: nowrap; gap: 12px; align-items: center; }
.lk-search.is-standard .lk-search-flexible { visibility: hidden; }
.lk-search.is-flexible .lk-search-standard { visibility: hidden; }
/* Hide the outgoing group instantly. `visibility` is inherited and animatable,
 * and themes (Elementor) often put `transition: all` on buttons/inputs — that
 * would let the hidden group's fields linger for a frame and overlap the new
 * ones. Killing transitions on the inactive group only keeps hover on the
 * active one. (Functional swap, not decorative — hence in the plugin.) */
.lk-search.is-standard .lk-search-flexible,
.lk-search.is-standard .lk-search-flexible *,
.lk-search.is-flexible .lk-search-standard,
.lk-search.is-flexible .lk-search-standard * { transition: none; }

/* AI Search: a third group in the same grid cell — one wide field + Search. */
/* !important: the theme/Elementor set tab buttons to display:block, which drops the gap. */
.lk-search .lk-tab.lk-tab-ai { display: inline-flex !important; align-items: center; gap: 6px; }
.lk-tab-ai .lk-ai-icon { flex: 0 0 auto; }
.lk-search-ai { grid-column: 1; grid-row: 1; min-width: 0; display: flex; flex-wrap: nowrap; gap: 12px; align-items: center; }
.lk-search-ai .lk-field-ai { flex: 1 1 240px; }
.lk-search:not(.is-ai) .lk-search-ai,
.lk-search.is-ai .lk-search-standard,
.lk-search.is-ai .lk-search-flexible { visibility: hidden; }
.lk-search:not(.is-ai) .lk-search-ai,
.lk-search:not(.is-ai) .lk-search-ai *,
.lk-search.is-ai .lk-search-standard,
.lk-search.is-ai .lk-search-standard *,
.lk-search.is-ai .lk-search-flexible,
.lk-search.is-ai .lk-search-flexible * { transition: none; }
.lk-ai-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.lk-search.is-ai-busy .lk-ai-submit { pointer-events: none; }
/* Status line: for screen readers only (the button shows the busy state). */
.lk-ai-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Results page: what the AI understood (chips) + what it could not use. */
.lk-ai-understood { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.lk-ai-understood-label { display: inline-flex; align-items: center; gap: 6px; }
.lk-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lk-ai-chip { display: inline-flex; align-items: center; gap: 2px; }
.lk-ai-chip-x { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; }
.lk-ai-empty { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.lk-ai-empty-text { flex: 1 1 100%; margin: 0; }
.lk-ai-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lk-ai-suggest-link { display: inline-block; box-sizing: border-box; }
.lk-ai-rate { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.lk-ai-rate-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; }
@media (max-width: 480px) { .lk-ai-rate-sep { display: none; } .lk-ai-rate-note { flex: 1 1 100%; } }
.lk-ai-note { flex: 1 1 100%; margin: 0; }
.lk-ai-talk { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; }
.lk-ai-question { display: flex; align-items: flex-start; gap: 6px; margin: 0; }
.lk-ai-refine { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 0; }
.lk-ai-refine-input { flex: 1 1 220px; min-width: 0; width: auto; box-sizing: border-box; }
.lk-ai-refine-submit { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.lk-ai-refine.is-busy .lk-ai-refine-submit { pointer-events: none; }
.lk-ai-refine-status { flex: 1 1 100%; margin: 0; }
.lk-ai-refine-status:empty { display: none; }
@media (max-width: 480px) { .lk-ai-refine-submit { flex: 1 1 100%; } }

.lk-search-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 120px; min-width: 0; }
.lk-field-loc { flex: 2 1 170px; }
.lk-field-guests { flex: 1 1 120px; }
/* Uniform control height so every field, the months selector and the button
   line up exactly. Prefixed with .lk-search to beat the Elementor kit's form
   styles; the height (with border-box) also normalises native date inputs,
   which otherwise render a touch taller than text/select. */
.lk-search .lk-search-field input, .lk-search .lk-search-field select { box-sizing: border-box; height: 32px !important; padding: 0 14px !important; width: 100%; min-width: 0; }
/* width:auto overrides the shared .lk-btn { width:100% } so the button sits
   inline on the row instead of stretching full-width. height/padding use
   !important to beat the Elementor kit's aggressive <button> sizing. */
.lk-search-submit { width: auto; box-sizing: border-box; height: 48px !important; padding: 0 28px !important; cursor: pointer; flex: 0 0 auto; align-self: center; }

/* Narrow viewports: stack into rows.
 * Row 1: tabs · Row 2: Where (full width) · Row 3: check-in | check-out | guests
 * · Row 4: Search (full width). */
@media (max-width: 820px) {
	.lk-search { flex-wrap: wrap; }
	/* Full-width container here, so drop the width-preserving stack and free the
	 * inactive group's height (it would otherwise reserve the taller group). */
	.lk-search-groups { display: block; }
	.lk-search.is-standard .lk-search-flexible,
	.lk-search.is-flexible .lk-search-standard,
	.lk-search:not(.is-ai) .lk-search-ai,
	.lk-search.is-ai .lk-search-standard,
	.lk-search.is-ai .lk-search-flexible { display: none; }
	.lk-search.is-ai .lk-search-groups { flex: 1 1 100%; } /* own row under the tabs, like the other modes */
	.lk-search-ai { flex-wrap: wrap; flex: 1 1 100%; }
	.lk-search-ai .lk-field-ai { flex: 1 1 100%; }
	.lk-search-standard { flex-wrap: wrap; flex: 1 1 100%; }
	.lk-field-loc { flex: 1 1 100%; }                                        /* Where: full width */
	.lk-search-standard .lk-search-field:not(.lk-field-loc) { flex: 1 1 0; } /* dates-field + guests share a row */
	.lk-search-standard .lk-search-field.lk-dates-field { flex: 1 1 100%; }  /* dates (2 inputs) get their own row */
	.lk-search-submit { flex: 1 1 100%; }                                    /* Search: full width */

	/* Flexible: length radios on one row, months field full width, then Search. */
	.lk-search-flexible { flex-wrap: wrap; flex: 1 1 100%; }
	.lk-period { flex: 1 1 100%; align-self: flex-start; }
	.lk-months-field { flex: 1 1 100%; align-self: flex-start; }
}

/* Flexible: stay-length radios + a compact months multi-select dropdown.
 * Same single-row bar as standard; the fields differ, not the block. */
.lk-period { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 16px; flex: 0 0 auto; align-self: center; white-space: nowrap; }
.lk-period-opt { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px !important; }

.lk-months-field { position: relative; flex: 1 1 200px; min-width: 0; align-self: center; }
.lk-months-toggle { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 48px; padding: 0 14px; cursor: pointer; }
.lk-months-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-months-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 100%; max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.lk-months-menu[hidden] { display: none; }
.lk-month-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; white-space: nowrap; }

/* Where combobox: text input + custom suggestions menu (JS toggles it on click,
 * filters while open). Replaces the native <datalist> for a controllable dropdown. */
.lk-loc-field { position: relative; }
/* Match the location input to the dates/guests fields (48px), overriding the
   generic 32px search-input height above (higher specificity + !important). */
.lk-search .lk-search-field input.lk-loc-input,
.lk-search .lk-search-field input.lk-ai-input { height: 48px !important; }
.lk-loc-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 100%; max-height: 290px; overflow-y: auto; list-style: none; margin: 0; padding: 4px; display: flex; flex-direction: column; gap: 0; }
.lk-loc-menu[hidden] { display: none; }
.lk-loc-opt { white-space: nowrap; }
.lk-loc-opt[hidden] { display: none; }
/* Multi-select city rows: checkbox + label (layout only; skin in child theme). */
.lk-loc-check { display: flex; align-items: center; gap: 9px; margin: 0; padding: 4px 10px; cursor: pointer; font-size: 14px !important; }
.lk-loc-check input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; cursor: pointer; }
.lk-loc-txt { line-height: 1.2; }
.lk-loc-count { opacity: .6; }

/* Dates: two inputs sharing ONE range calendar popover (2 months). The day/nav
 * <button>s are reset (border/background/font) to defeat the theme's button
 * chrome — colours/selected states live in the child theme. */
.lk-dates-field { position: relative; flex: 1.4 1 200px; min-width: 0; }
.lk-dates-toggle { box-sizing: border-box; display: flex; align-items: center; width: 100%; height: 48px; padding: 0 16px; cursor: pointer; }
.lk-dates-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Explicit width so the popover doesn't shrink to the narrow dates field (which
 * would force the two months to wrap). Two months stay side by side (nowrap). */
.lk-rcal { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; padding: 20px 24px; width: 552px; max-width: 96vw; }
.lk-rcal[hidden] { display: none; }
/* Nav arrows sit at the top corners, aligned with the month titles (Airbnb-like);
 * the head has no in-flow height. */
.lk-rcal-head { position: static; }
.lk-rcal-prev { position: absolute; left: 22px; top: 20px; z-index: 2; }
.lk-rcal-next { position: absolute; right: 22px; top: 20px; z-index: 2; }
.lk-rcal-prev, .lk-rcal-next { border: 0; background: none; cursor: pointer; font: inherit; }
.lk-rcal-months { display: flex; gap: 24px; flex-wrap: nowrap; }
.lk-rcal-month { flex: 1 1 0; min-width: 0; }
.lk-rcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; }
.lk-rcal-dow { text-align: center; padding: 6px 0 10px; }
.lk-rcal-blank { aspect-ratio: 1 / 1; }
/* Day cell: full square (holds the range band); the number sits in an inner
 * circle so consecutive band cells stay continuous behind the circles. The
 * 2-class selector resets the theme's <button> chrome (blue fill) → transparent. */
.lk-rcal .lk-rcal-day { position: relative; display: block; aspect-ratio: 1 / 1; border: 0; background: none; cursor: pointer; padding: 0; font: inherit; }
.lk-rcal .lk-rcal-day[disabled] { cursor: default; }
.lk-rcal-daynum { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

/* Widget date calendar reuses the search .lk-rcal look, but shows ONE month at a
   time sized to the narrow widget (the search bar shows two side by side). */
.lk-booking .lk-rcal { width: min(320px, calc(100vw - 32px)); padding: 16px 18px; }
.lk-booking .lk-rcal-prev { left: 16px; top: 16px; }
.lk-booking .lk-rcal-next { right: 16px; top: 16px; }
/* Desktop: right-align so the popover doesn't spill past the sticky widget edge. */
@media (min-width: 901px) { .lk-booking .lk-rcal { right: 0; left: auto; } }

/* Floating min-stay hint anchored to the check-in cell (layout only; visual style
   lives in the child theme). lk-single.js sets left/top; it is centred on the cell
   and never intercepts clicks on the days beneath it. */
.lk-rcal-hint { position: absolute; z-index: 5; transform: translateX(-50%); pointer-events: none; white-space: nowrap; }
.lk-rcal-hint[hidden] { display: none; }

/* ---------- Filters bar (collapsed under a toggle) ---------- */
.lk-filters-panel { margin: 0 0 18px; }
.lk-filters-summary { cursor: pointer; display: inline-block; padding: 8px 14px; }
.lk-filters { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; margin: 10px 0 0; padding: 12px 14px; }
/* When open, the "Filters" toggle sits on the same row as the filter controls. */
.lk-filters-panel[open] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.lk-filters-panel[open] > .lk-filters { flex: 1 1 auto; margin: 0; }
/* Desktop: no toggle needed — hide the "Filters" button and keep the panel
   (rendered open by default) always visible. The toggle stays on mobile. */
@media (min-width: 1000px) {
	.lk-filters-summary { display: none; }
}
.lk-filter { display: flex; flex-direction: column; gap: 4px; }
.lk-filter select, .lk-filter input { padding: 7px 9px; }
.lk-price-inputs { display: flex; align-items: center; gap: 6px; }
.lk-price-inputs input { width: 78px; }
.lk-filter-amenities { position: relative; }
.lk-filter-amenities summary { cursor: pointer; padding: 7px 12px; }
.lk-amenities-pop { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 320px; max-height: 340px; overflow: auto; padding: 12px; }
.lk-amen-group { margin-bottom: 10px; }
.lk-amen-group label { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.lk-filter-sort { margin-left: auto; }
.lk-filter-clear { align-self: center; }

/* ---------- Search-this-area + mobile map ---------- */
.lk-search-area { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 500; padding: 8px 16px; cursor: pointer; }
/* "Search as I move the map" toggle (top-left, offset past Leaflet's zoom control).
   Functional default; refine the look in the child theme. */
.lk-map-live { position: absolute; top: 12px; left: 52px; z-index: 500; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; cursor: pointer; background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba( 0, 0, 0, .3 ); font-size: 13px; line-height: 1.2; color: #16303c; }
.lk-map-live input { margin: 0; cursor: pointer; }
.lk-search-area[hidden] { display: none; }
/* Mobile-only Map/List toggle. Prefixed with `button` (specificity 0,1,1) so it
   beats the theme reset's `[type="button"],button{display:inline-block}` (0,1,0),
   which loads after this file and would otherwise reveal the button on desktop. */
button.lk-mobile-map-toggle { display: none; }

/* Expand-map button (top-right of the map). Functional default; the pill look
   can be refined in the child theme. */
.lk-map-expand {
	position: absolute; top: 12px; right: 12px; z-index: 500;
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; padding: 0; cursor: pointer;
	/* Functional default so the control is visible over any tile style. */
	background: #fff; border: 0; border-radius: 8px; color: #16303c;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .3 );
}
.lk-map-expand .lk-icon { width: 20px; height: 20px; }
.lk-map-expand .lk-icon-collapse { display: none; }
/* In satellite view the map goes dark; flip the (transparent) expand icon to
   white so it stays visible, with a faint shadow for legibility over imagery.
   `!important` + the 2-class panel prefix beat the child theme's
   `.lk-map-expand { color: … !important }` base rule (parallel-dev styling). */
.lk-map-panel.lk-sat-on .lk-map-expand { color: #fff !important; }
.lk-map-panel.lk-sat-on .lk-map-expand .lk-icon { filter: drop-shadow( 0 1px 2px rgba( 0, 0, 0, .55 ) ); }

/* Satellite-view toggle (bottom-left of the map). Functional default; refine the
   look in the child theme. The `.lk-map-panel` prefix (0,2,0) out-specifies the
   Elementor kit's `button` rule so it isn't repainted blue. */
.lk-map-panel .lk-map-satellite {
	position: absolute; bottom: 12px; left: 12px; z-index: 500;
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 13px; cursor: pointer; font: inherit; line-height: 1;
	background: #fff; border: 0; border-radius: 8px; color: #16303c;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .3 );
}
.lk-map-panel .lk-map-satellite.is-active { background: #16303c; color: #fff; }
.lk-map-satellite .lk-icon { width: 17px; height: 17px; }
.lk-results-row.lk-map-full .lk-map-expand .lk-icon-expand { display: none; }
.lk-results-row.lk-map-full .lk-map-expand .lk-icon-collapse { display: inline; }
@media (min-width: 1000px) {
	/* Full-width map hides the list column. */
	.lk-results-row.lk-map-full { grid-template-columns: 1fr; }
	.lk-results-row.lk-map-full .lk-list-col { display: none; }
}
@media (max-width: 999px) {
	.lk-map-expand { display: none; } /* map is already a full-screen overlay on mobile */
}

@media (max-width: 999px) {
	.lk-map-col { position: fixed; inset: 0; z-index: 9999; display: none; }
	.lk-map-col.is-open { display: block; }
	.lk-map-col.is-open .lk-map { height: 100vh !important; }
	button.lk-mobile-map-toggle { display: inline-flex; align-items: center; gap: 6px; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 10000; padding: 12px 22px; cursor: pointer; }
	body.lk-map-open { overflow: hidden; }
	.lk-filter-sort { margin-left: 0; }
}

/* ---------- Lightbox / slideshow ----------
 * Layout only, EXCEPT the dark scrim on .lk-lightbox, which is a functional
 * backdrop (a lightbox is unusable without it). Override it in the theme if you
 * prefer a different scrim. */
.lk-lightbox { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; overflow: hidden; background: rgba(0, 0, 0, .85); }
.lk-lightbox.is-open { display: flex; }
.lk-lb-img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.lk-lb-close { position: absolute; top: 14px; right: 16px; cursor: pointer; }
.lk-lb-prev, .lk-lb-next { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; }
.lk-lb-prev { left: 12px; }
.lk-lb-next { right: 12px; }
.lk-lb-counter { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); }
body.lk-lb-open { overflow: hidden; }

/* "All photos" grid (Wander-style, 3 columns). Full-screen scrollable overlay;
   visual (white bg, close icon) lives in the child theme. */
.lk-photogrid { position: fixed; inset: 0; z-index: 100001; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lk-photogrid.is-open { display: block; }
.lk-photogrid-bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; align-items: center; padding: 12px 16px; }
.lk-photogrid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 1140px; margin: 0 auto; padding: 0 16px 40px; }
@media (max-width: 600px) { .lk-photogrid-grid { grid-template-columns: repeat(2, 1fr); } }
.lk-photogrid-item { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; aspect-ratio: 3 / 2; overflow: hidden; }
.lk-photogrid-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-photogrid-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; line-height: 1; }

/* ---------- "Explore the area" nearby map (single page) ----------
   Layout + functional defaults (filter pills, marker dots need colour to be
   legible on tiles). Typography/exact colours can be refined in the child theme.
   The 2-class filter selector out-specifies the Elementor kit's <button> rule. */
.lk-nearby { margin: 52px 0 0; }
.lk-nearby-title { margin: 0 0 14px; }
.lk-nearby-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.lk-nearby .lk-nearby-filter { display: inline-flex; align-items: center; gap: 7px; padding: 6px 15px; cursor: pointer; font: inherit; line-height: 1.2; background: #fff; border: 1px solid #E3E8EA; border-radius: 999px; color: #16303C; }
.lk-nearby .lk-nearby-filter::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #5B6B73; }
.lk-nearby .lk-nearby-filter[data-cat="dining"]::before { background: #C0563A; }
.lk-nearby .lk-nearby-filter[data-cat="water"]::before { background: #2E7D57; }
.lk-nearby .lk-nearby-filter[data-cat="attraction"]::before { background: #5581A2; }
.lk-nearby .lk-nearby-filter[aria-pressed="false"] { opacity: .45; }
.lk-nearby-map { width: 100%; height: 440px; }
/* Satellite toggle — identical to the results-page map's button (icon + label
   that flips Satellite ↔ Map). Leaflet's bottom-left control positions it; the
   2-class prefix out-specifies the Elementor kit's `button` rule so it isn't
   repainted blue. */
.lk-nearby-map .lk-map-satellite {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 13px; cursor: pointer; font: inherit; line-height: 1;
	background: #fff; border: 0; border-radius: 8px; color: #16303c;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .3 );
}
.lk-nearby-map .lk-map-satellite.is-active { background: #16303c; color: #fff; }
.lk-nearby-map .lk-map-satellite .lk-icon { width: 17px; height: 17px; }
.lk-nearby-map .lk-poi-dot { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba( 0, 0, 0, .28 ); }
.lk-nearby-map .lk-nearby-home-dot { display: block; width: 20px; height: 20px; border-radius: 50%; background: #16303C; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba( 0, 0, 0, .35 ); }
.lk-poi-pop strong { display: block; }
.lk-poi-pop .lk-poi-cat { display: block; color: #5B6B73; font-size: 12px; margin: 0 0 4px; }
.lk-poi-pop .lk-poi-line { font-size: 12px; margin: 2px 0 0; }
.lk-poi-pop .lk-poi-hours { color: #5B6B73; }
.lk-poi-pop .lk-poi-photo { display: block; width: 100%; height: 120px; object-fit: cover; border-radius: 6px; margin: 0 0 8px; }
.lk-poi-pop .lk-poi-rating { font-weight: 600; color: #16303C; }
.lk-poi-pop .lk-poi-open-1 { color: #2E7D57; }
.lk-poi-pop .lk-poi-open-0 { color: #B23A3A; }
@media (max-width: 767px) {
	.lk-nearby-map { height: 340px; }
}

/* FAQ ([lk_faqs]) — a floating category sidebar (anchor links + scroll-spy)
   beside the questions grouped by category. Layout + functional defaults;
   typography/colours in the child theme. Each question is a full-width <button>;
   the answer is a region animated via grid-template-rows (0fr -> 1fr). */
.lk-faqs { display: grid; grid-template-columns: 232px 1fr; gap: 56px; align-items: start; }
.lk-faqs-nav { position: sticky; top: 110px; align-self: start; }
.lk-faqs-nav ul { list-style: none; margin: 0; padding: 0; }
.lk-faqs-navlink { display: block; text-decoration: none; }
.lk-faqs-main { min-width: 0; }
.lk-faq-cat { scroll-margin-top: 110px; }
.lk-faq-list { list-style: none; margin: 0; padding: 0; }
.lk-faq-q-head { margin: 0; }
/* .lk-faqs prefix (specificity 0,2,0) so the button reset beats the Elementor
   kit's blue <button> fill (.elementor-kit-NN button, 0,1,1). */
.lk-faqs .lk-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; text-align: left; background: none; border: 0; box-shadow: none; border-radius: 0; cursor: pointer; font: inherit; }
.lk-faq-q-text { flex: 1 1 auto; }
.lk-faq-icon { flex: 0 0 auto; display: inline-block; }
.lk-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.lk-faq-a.is-open { grid-template-rows: 1fr; }
.lk-faq-a-inner { overflow: hidden; min-height: 0; }
/* Tablet/phone: the sidebar becomes a horizontal, scrollable strip on top. */
@media (max-width: 900px) {
	.lk-faqs { grid-template-columns: 1fr; gap: 0; }
	.lk-faqs-nav { position: static; margin-bottom: 28px; overflow-x: auto; }
	.lk-faqs-nav ul { display: flex; gap: 8px; }
	.lk-faqs-navlink { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
	.lk-faq-a { transition: none; }
}

/* ============================================================================
   Destinations (CPT) — LAYOUT ONLY (visual styling lives in the child theme).
   The single/archive are full "Canvas"-style pages; content sits in a centred
   reading column, flowing below the site's in-flow interior header.
   ========================================================================== */
.lk-dest-wrap,
.lk-dest-arch-wrap { max-width: 1180px; margin: 0 auto; padding: 44px 20px var(--lk-cta-gap, 124px); } /* bottom = space before the theme's CTA */
.lk-dest-back { display: inline-block; margin: 0 0 16px; }

/* ---- Full-bleed destination hero: photo across the screen, title overlaid left,
   translucent description card right, "All destinations" top-left (visual — colours,
   shadows, card bg — live in the child theme). ---- */
.lk-dest-hero { position: relative; width: 100%; min-height: clamp(460px, 62vh, 620px); display: flex; overflow: hidden; }
.lk-dest-hero__img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
.lk-dest-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lk-dest-hero__inner { position: relative; z-index: 2; box-sizing: border-box; width: 100%; max-width: 1180px; margin: 0 auto; padding: 92px 20px 56px; display: flex; align-items: center; justify-content: space-between; gap: 44px; }
.lk-dest-hero__back { position: absolute; top: 26px; left: 20px; display: inline-flex; align-items: center; text-decoration: none; }
.lk-dest-hero__title { flex: 1 1 auto; margin: 0; }
.lk-dest-hero__card { flex: 0 0 clamp(320px, 38%, 440px); box-sizing: border-box; }
@media (max-width: 860px) {
	.lk-dest-hero { min-height: 0; }
	.lk-dest-hero__inner { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 18px; padding: 96px 16px 28px; }
	.lk-dest-hero__card { flex: 0 0 auto; width: 100%; }
}
/* Intro: photo (2/3) on the left + a separate gray text box (1/3) on the right, with
   a gap. Columns are top-aligned so the gray box hugs its text (not stretched to the
   photo's height). */
.lk-dest-intro { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; margin: 0 0 44px; }
.lk-dest-intro--nomedia { grid-template-columns: 1fr; }
.lk-dest-intro__media { position: relative; aspect-ratio: 3 / 2; }
.lk-dest-intro__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-dest-intro__body { padding: 30px 32px; display: flex; flex-direction: column; gap: 14px; }
.lk-dest-intro__body > * { margin: 0; }
.lk-dest-desc { margin: 0 0 44px; }
@media (max-width: 780px) {
	.lk-dest-intro { grid-template-columns: 1fr; }
	.lk-dest-intro__media { aspect-ratio: 16 / 9; }
	.lk-dest-intro__body { padding: 24px 22px; }
}
.lk-destination .lk-nearby { margin: 0; }
.lk-dest-properties { margin: 52px 0 0; }

/* Landing pages: the archive body sits under the full-bleed hero and takes the full
   width (like the property archive), with the site's standard side gutters. */
.lk-landing-body { box-sizing: border-box; width: 100%; padding: 48px 20px 80px; }
@media (max-width: 1000px) {
	.lk-landing-body { padding: 28px 20px 56px; }
}

/* Landing hero: title + intro row on top, the overlay search bar full-width below. */
.lk-landing-hero .lk-dest-hero__inner { flex-direction: column; align-items: stretch; justify-content: center; gap: 30px; }
.lk-landing-hero__top { display: flex; align-items: center; justify-content: space-between; gap: 44px; }
.lk-landing-hero__search { width: 100%; }
@media (max-width: 860px) {
	.lk-landing-hero__top { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 18px; }
}
/* Let the search bar's dropdowns (dates calendar, location, guests) escape the hero
   (no clipping) and paint above the sticky results chrome below. The hero inner is a
   z-index:2 stacking context by default, which would trap the popups under the
   results filter bar (z:30); raise it above that but below the sticky header (z:50). */
.lk-landing-hero { overflow: visible; }
.lk-landing-hero .lk-dest-hero__inner { position: relative; z-index: 40; }

/* Archive grid of destination cards. */
.lk-dest-arch-head { margin: 0 0 30px; }
.lk-dest-arch-intro { margin: 10px 0 0; max-width: 720px; }
.lk-dest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.lk-dest-card { display: flex; flex-direction: column; overflow: hidden; }
.lk-dest-card-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.lk-dest-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-dest-card-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.lk-dest-card-ph svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.lk-dest-card-body { display: flex; flex-direction: column; gap: 7px; padding: 14px 4px 4px; }
.lk-dest-card-title { margin: 0; }
.lk-dest-card-text { margin: 0; }
.lk-dest-card-more { margin-top: 2px; }
.lk-dest-pagination { margin: 44px 0 0; }
.lk-dest-pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.lk-dest-empty { padding: 40px 0; }

@media (max-width: 980px) {
	.lk-dest-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 560px) {
	.lk-dest-grid { grid-template-columns: 1fr; }
	.lk-dest-wrap, .lk-dest-arch-wrap { padding: 32px 16px var(--lk-cta-gap, 64px); }
}

/* ===================== Guide ("Things to do") — layout only ===================== */
.lk-guide-wrap { max-width: 1200px; margin: 0 auto; padding: 64px 20px var(--lk-cta-gap, 124px); box-sizing: border-box; }
.lk-guide-wrap > :last-child { margin-bottom: 0; }
.lk-guide-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.lk-guide-eyebrow { margin: 0 0 8px; }
.lk-guide-intro { margin-top: 14px; }

/* Directory of categories */
.lk-guide-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 1000px) { .lk-guide-cats { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 600px)  { .lk-guide-cats { grid-template-columns: 1fr; } }
.lk-guide-cat { display: flex; flex-direction: column; text-decoration: none; overflow: hidden; }
.lk-guide-cat-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; display: block; }
.lk-guide-cat-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-guide-cat-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.lk-guide-cat-ph svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lk-guide-cat-body { display: flex; flex-direction: column; gap: 4px; padding: 16px 4px 0; }

/* Filter rows */
.lk-guide-filters { display: flex; flex-direction: column; gap: 12px; margin: 0 0 32px; }
.lk-guide-frow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lk-guide-chip { cursor: pointer; }

/* Entries: masonry via CSS multi-column so short cards don't leave a tall gap
   below them (column packing, not row-height). Cards never split across columns. */
.lk-guide-grid { columns: 3; column-gap: 28px; }
@media (max-width: 1000px) { .lk-guide-grid { columns: 2; column-gap: 20px; } }
@media (max-width: 600px)  { .lk-guide-grid { columns: 1; } }
.lk-guide-card { display: flex; flex-direction: column; overflow: hidden; break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 28px; transition: transform .4s ease, opacity .3s ease, box-shadow .2s ease; }
@media (max-width: 1000px) { .lk-guide-card { margin-bottom: 20px; } }
.lk-guide-card.is-hidden { display: none; }
.lk-guide-card.is-leaving { opacity: 0; transform: translateY(8px) scale(.98); pointer-events: none; }
.lk-guide-card.is-entering { opacity: 0; transform: translateY(12px); }
.lk-guide-card-media { aspect-ratio: 3 / 2; overflow: hidden; }
.lk-guide-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-guide-card-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.lk-guide-card-meta { margin: 4px 0 0; display: grid; gap: 6px; }
.lk-guide-meta-row { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.lk-guide-meta-ic { flex: 0 0 auto; display: inline-flex; line-height: 0; margin-top: 1px; }
.lk-guide-meta-ic svg { width: 16px; height: 16px; }
.lk-guide-meta-txt { min-width: 0; }
.lk-guide-card-services { margin: 10px 0 0; }
.lk-guide-services-title { margin: 0 0 2px; }
.lk-guide-services-val { margin: 0; }
.lk-guide-card-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.lk-guide-card-hours { margin-top: 4px; }
.lk-guide-card-hours summary { cursor: pointer; }
.lk-guide-noresults { text-align: center; margin: 24px 0; }

@media (prefers-reduced-motion: reduce) {
	.lk-guide-card { transition: none; }
	.lk-guide-card.is-leaving, .lk-guide-card.is-entering { opacity: 1; transform: none; }
}

/* Destination page — "Things to do" guide preview (layout only). Padded panel so
   the child theme can give it a pale background that divides the page. */
.lk-dest-guide { margin: 48px 0 0; padding: 44px 32px; }
@media (max-width: 560px) { .lk-dest-guide { padding: 28px 18px; } }
.lk-dest-guide-group:last-child { margin-bottom: 0; }
.lk-dest-guide-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; }
.lk-dest-guide-all { flex: 0 0 auto; text-decoration: none; white-space: nowrap; }
.lk-dest-guide-group { margin: 0 0 28px; }
.lk-dest-guide-grouphead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.lk-dest-guide-cat { margin: 0; }
.lk-dest-guide-more { flex: 0 0 auto; text-decoration: none; white-space: nowrap; }
.lk-dest-guide-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .lk-dest-guide-items { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .lk-dest-guide-items { gap: 12px; } }
.lk-dest-guide-item { display: flex; flex-direction: column; text-decoration: none; }
.lk-dest-guide-item-media { aspect-ratio: 4 / 3; overflow: hidden; display: block; }
.lk-dest-guide-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-dest-guide-item-ph { display: block; width: 100%; height: 100%; }
.lk-dest-guide-item-name { margin-top: 8px; }
.lk-dest-guide-item-city { margin-top: 2px; }

/* Destination: "Load more" for the properties grid (client-side reveal) */
.lk-prop-hidden { display: none !important; }
.lk-dest-more-wrap { text-align: center; margin: 28px 0 0; }

/* Space above the "Explore the area" map — it sits at the end of the page, right
   after the previous section. */
.lk-destination .lk-nearby.lk-location { margin-top: 48px; }

/* ===================== Home "Destinations" section ([lk_destinations]) — layout ===================== */
.lk-destinations-title { text-align: center; margin: 0 0 34px; }
.lk-destinations-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1100px) { .lk-destinations-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .lk-destinations-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.lk-destination-card { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; text-decoration: none; }
.lk-destination-card-media { position: absolute; inset: 0; }
/* !important: Elementor/Hello apply `img { height: auto }` which otherwise leaves
   the (landscape) photo covering only the top of the portrait card, exposing the
   placeholder below. Forcing 100% makes it fill and crop (cover). */
.lk-destination-card-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
.lk-destination-card-overlay { position: absolute; inset: 0; z-index: 1; }
.lk-destination-card-name { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16px 18px; }
/* Section-link shortcut buttons ([lk_guide_link] / [lk_destinations_link]). */
.lk-section-link { display: inline-flex; align-items: center; text-decoration: none; }