/* ============================================================================
   LK Booking Engine — visual styling (child theme).
   The plugin ships layout-only CSS; ALL colors/typography/borders/shadows/
   selected states live here. Provisional look (coastal palette) — revise freely.
   Targets the plugin's stable .lk-* classes.
   ========================================================================== */

:root {
	--lk-accent:    #5581A2; /* Corporate Blue (design standard). */
	--lk-accent-2:  #3C617D; /* darker blue for hover/active. */
	--lk-ink:       #1f2a30;
	--lk-muted:     #5b6b73;
	--lk-line:      #e3e8ea;
	--lk-surface:   #ffffff;
	--lk-surface-2: #f6f8f9;
	--lk-radius:    14px;
	--lk-radius-sm: 10px;
	--lk-shadow:    0 6px 22px rgba(16, 42, 56, .10);
	--lk-shadow-sm: 0 2px 8px rgba(16, 42, 56, .08);
}

.lk-wrap, .lk-search, .lk-single { color: var(--lk-ink); }

/* ---------- Search bar ---------- */
/* Pill container ("bouts arrondis"): 999px clamps to half the bar height, so the
   left/right ends are fully rounded. Applied to .lk-search (both modes) so the
   block stays identical when toggling Dates <-> Flexible — only the fields swap. */
.lk-search {
	background: var(--lk-surface);
	border: 1px solid var(--lk-line);
	border-radius: 999px;
	box-shadow: var(--lk-shadow);
}
/* On narrow viewports the bar stacks into several rows (tall), where a full pill
   would look like a big oval — cap it to plain rounded corners there. */
@media (max-width: 820px) {
	.lk-search { border-radius: 24px; }
}
/* Home hero only: the bar's backdrop is 75% white so the hero video shows
   through the padding/gaps. The fields, the Dates/Flexible pill and the Search
   button keep their own solid backgrounds, so they stay fully opaque. Scoped to
   #lk-hero so the results-page search bar stays solid white. */
#lk-hero .lk-search { background: rgba(255, 255, 255, .75); }
/* Results page (/property-list/) search bar: cap its width at 1140px and align it
   to the LEFT (scoped to that widget so the hero bar is unaffected). */
.elementor-element-c125e01 .lk-search { max-width: 1140px !important; margin-left: 0 !important; margin-right: auto !important; }
/* The AI Search summary under it keeps the same width (not the full results width). */
.lk-wrap > .lk-ai-understood { max-width: 1140px; box-sizing: border-box; }
/* Search type selector — CUSTOM exception (client design): a segmented pill.
   The container is a white pill with a green outline; the selected segment is a
   filled green pill (white text); the other segment is green text on transparent.
   !important on the tabs is needed to beat Elementor's global button style, which
   targets every <button> (.elementor-kit-16 button → blue fill + 10px radius).
   NOTE: #90CAA0 is light — white-on-green and green-on-white text both land near
   ~1.9:1 contrast; deepen to Palm #2E7D57 if legibility ever bites. */
.lk-search-tabs { background: #fff; border: 1px solid #90CAA0; border-radius: 999px; padding: 3px; }
.lk-search-tabs .lk-tab { background: transparent !important; color: #2E7D57 !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important; font-size: .9rem; font-weight: 600; }
.lk-search-tabs .lk-tab[aria-pressed="true"] { background: #90CAA0 !important; color: #fff !important; }
.lk-search-field > span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--lk-muted); }
/* Guests select: the browser's native arrow sits flush right and can't be moved,
   so replace it with the site chevron inset ~8px from the edge. The extra
   padding-right (over the plugin's 14px) keeps long options ("16 guests") off
   the chevron; the specificity + !important beat the plugin's padding shorthand. */
.lk-search .lk-search-field select[name="guests"] {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2316303C' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 30px !important;
}
/* Flexible search — month picker: the SAME site chevron, replacing the ▾ text
   glyph in .lk-months-caret. */
.lk-months-caret {
	font-size: 0 !important;
	color: transparent !important;
	display: inline-block;
	width: 12px;
	height: 12px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2316303C' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
	background-size: 12px 12px;
}
.lk-search-field input, .lk-search-field select {
	border: 1px solid var(--lk-line); border-radius: 999px !important; background: var(--lk-surface); color: var(--lk-ink); font-size: .95rem;
}
/* Active/focus state per the approved standard: green border + soft green ring
   (not the old teal outline, which Elementor was killing anyway). !important beats
   the Elementor kit's input:focus reset. Same treatment as the toggles below. */
.lk-search .lk-search-field input:hover, .lk-search .lk-search-field select:hover { border-color: #90CAA0; }
.lk-search .lk-search-field input:focus, .lk-search .lk-search-field select:focus {
	outline: none !important; border-color: #90CAA0 !important; box-shadow: 0 0 0 2px rgba(144, 202, 160, .4) !important;
}
/* Guests select reads like a placeholder (muted) until a number is chosen. */
.lk-field-guests select:has(option[value=""]:checked) { color: var(--lk-muted); }
/* border-radius needs !important: the Elementor kit styles every <button>
   (.elementor-kit-16 button → 10px radius) and beats a plain .lk-btn selector.
   background/color also need !important for the <a> variants (e.g. the vitrine
   "Contact us" link), otherwise Elementor's global link colour wins over white. */
.lk-search-submit, .lk-btn-book, .lk-btn { background: var(--lk-accent) !important; color: #fff !important; border: 0; border-radius: 999px !important; font-weight: 600; text-decoration: none !important; }
.lk-search-submit:hover, .lk-btn-book:hover { background: var(--lk-accent-2) !important; }

/* Flexible mode — plain form fields (same green accent as the Dates search).
   Stay length = native radios; months = a compact multi-select dropdown. */
.lk-period-opt { color: var(--lk-ink); font-size: .95rem; font-weight: 500; }
/* Custom radio: green ring + centre dot when checked. The .lk-search prefix +
   [type=radio] beats the Elementor kit's form-input styling. */
.lk-search .lk-period-opt input[type="radio"] {
	appearance: none; -webkit-appearance: none; margin: 0;
	width: 20px; height: 20px; border: 2px solid var(--lk-line); border-radius: 50%;
	background: var(--lk-surface); cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.lk-search .lk-period-opt input[type="radio"]:hover { border-color: #90CAA0; }
.lk-search .lk-period-opt input[type="radio"]:checked {
	border-color: #90CAA0;
	box-shadow: inset 0 0 0 3px var(--lk-surface), inset 0 0 0 20px #90CAA0;
}
.lk-search .lk-period-opt input[type="radio"]:focus-visible { outline: 2px solid #90CAA0; outline-offset: 2px; }

/* Months field trigger reads like the other search inputs. */
.lk-months-toggle { border: 1px solid var(--lk-line); border-radius: 999px; background: var(--lk-surface); color: var(--lk-ink); font-size: .95rem; }
.lk-months-toggle:focus-visible { outline: 2px solid #90CAA0; outline-offset: 1px; }
.lk-months-toggle[aria-expanded="true"] { border-color: #90CAA0; box-shadow: 0 0 0 2px rgba(144, 202, 160, .4); }
.lk-months-value.lk-is-placeholder { color: var(--lk-muted); }
.lk-months-caret { color: var(--lk-muted); font-size: .7rem; }

/* Months dropdown (checkbox list). */
.lk-months-menu { background: var(--lk-surface); border: 1px solid var(--lk-line); border-radius: var(--lk-radius-sm); box-shadow: var(--lk-shadow); }
.lk-month-opt { border-radius: 8px; color: var(--lk-ink); font-size: .92rem; }
.lk-month-opt:hover { background: var(--lk-surface-2); }
.lk-month-opt input { accent-color: #90CAA0; width: 16px; height: 16px; margin: 0; }

/* Where suggestions dropdown (same look as the months menu). */
.lk-loc-menu { background: var(--lk-surface); border: 1px solid var(--lk-line); border-radius: var(--lk-radius-sm); box-shadow: var(--lk-shadow); }
.lk-loc-opt { border-radius: 8px; color: var(--lk-ink); font-size: .92rem; }
.lk-loc-opt:hover, .lk-loc-opt.is-active { background: var(--lk-surface-2); }
.lk-loc-input[aria-expanded="true"] { border-color: #90CAA0; box-shadow: 0 0 0 2px rgba(144, 202, 160, .4); }

/* Single dates field (Airbnb-style) — reads like the other pill fields. */
.lk-dates-toggle { border: 1px solid var(--lk-line); border-radius: 999px; background: var(--lk-surface); color: var(--lk-ink); font-size: .95rem; }
.lk-dates-toggle:focus-visible { outline: 2px solid #90CAA0; outline-offset: 1px; }
.lk-dates-toggle[aria-expanded="true"] { border-color: #90CAA0; box-shadow: 0 0 0 2px rgba(144, 202, 160, .4); }
.lk-dates-value.lk-is-placeholder { color: var(--lk-muted); }

/* Guests picker (Airbnb-style) — trigger reads like the pill dates field; popover
   is a white card with − N + steppers. Buttons carry !important to beat Elementor. */
.lk-gp-fieldlabel { display: block; font-size: .78rem; color: var(--lk-muted); margin-bottom: 6px; }
.lk-gp-toggle { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; border: 1px solid var(--lk-line) !important; border-radius: 999px !important; background: var(--lk-surface) !important; color: var(--lk-ink) !important; box-shadow: none !important; font-size: .95rem; font-weight: 400; }
.lk-gp-toggle:hover { background: var(--lk-surface) !important; border-color: #B7C7D2 !important; }
.lk-gp-toggle:focus-visible { outline: 2px solid #90CAA0; outline-offset: 1px; }
.lk-gp.is-open .lk-gp-toggle { border-color: #90CAA0 !important; box-shadow: 0 0 0 2px rgba(144, 202, 160, .4) !important; }
.lk-gp-label.lk-is-placeholder { color: var(--lk-muted); }
.lk-gp-pop { background: #fff; border: 1px solid var(--lk-line); border-radius: 12px; box-shadow: 0 12px 34px rgba(16, 42, 56, .16); }
.lk-gp-row + .lk-gp-row { border-top: 1px solid var(--lk-line); }
.lk-gp-name { color: var(--lk-ink); font-weight: 600; }
.lk-gp-sub { color: var(--lk-muted); font-size: .82rem; }
.lk-gp-dec, .lk-gp-inc { width: 32px !important; height: 32px !important; padding: 0 !important; min-width: 0 !important; background: transparent !important; border: 1px solid #C3CDD4 !important; border-radius: 999px !important; box-shadow: none !important; color: #5581A2 !important; font-size: 1.15rem !important; }
.lk-gp-dec:hover:not(:disabled), .lk-gp-inc:hover:not(:disabled) { border-color: #5581A2 !important; color: #3C617D !important; background: transparent !important; }
.lk-gp-dec:disabled, .lk-gp-inc:disabled { border-color: #E3E8EA !important; color: #C0C9CF !important; }
.lk-gp-num { color: var(--lk-ink); font-weight: 600; }
.lk-gp-note { color: var(--lk-muted); font-size: .82rem; margin: 10px 0 0; }
.lk-gp-done { background: none !important; border: 0 !important; box-shadow: none !important; padding: 4px 2px !important; color: #5581A2; font-weight: 600; font-size: .9rem; text-decoration: underline; }
.lk-gp-done:hover { background: none !important; color: #3C617D; }
/* Search bar: the collapsed guests toggle must read IDENTICALLY to the old <select>
   it replaced — pill, 48px, muted "Guests" placeholder, 12px chevron at the right,
   green hover/focus ring (like the other search fields). */
.lk-search .lk-gp-toggle { padding: 0 14px; font-size: .95rem; }
.lk-search .lk-gp-toggle:hover { border-color: #90CAA0 !important; }
.lk-search .lk-gp-chev { width: 12px; height: 12px; }
/* The guests field is narrow, so anchor its popover to the right edge (grows
   leftward) to stay inside the bar/viewport. */
.lk-search .lk-gp-pop { left: auto; right: 0; }
/* Filters popup: inline guests/pets steppers (no nested popover). Reuses the
   picker's row/stepper styling; just separate the block from the rows above. */
.lk-frow-steppers { margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--lk-line); }

/* Dates range calendar — Airbnb-like: roomy popover, circular day pills and a
   continuous range band behind them. Two-class selectors on the <button>s beat
   Elementor's global button style. */
.lk-rcal { background: var(--lk-surface); border: 1px solid var(--lk-line); border-radius: 24px; box-shadow: var(--lk-shadow); }
.lk-rcal .lk-rcal-prev, .lk-rcal .lk-rcal-next { width: 36px; height: 36px; border: 0; background: transparent; border-radius: 999px; color: var(--lk-ink); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.lk-rcal .lk-rcal-prev:hover, .lk-rcal .lk-rcal-next:hover { background: var(--lk-surface-2); }
.lk-rcal .lk-rcal-prev[disabled] { opacity: .3; cursor: default; }
.lk-rcal-title { text-align: center; font-weight: 600; font-size: 1rem; color: var(--lk-ink); margin: 0 0 8px; }
.lk-rcal-dow { color: var(--lk-muted); font-size: .74rem; font-weight: 600; }
.lk-rcal .lk-rcal-daynum { border-radius: 999px; color: var(--lk-ink); font-size: .9rem; }
.lk-rcal .lk-rcal-day:not([disabled]):hover .lk-rcal-daynum { background: #D3EAD9; }   /* pale Corporate Green hover (was grey) */
.lk-rcal .lk-rcal-day[disabled] .lk-rcal-daynum { color: #c2ccd0; }
/* Day cells are <button>s: neutralise the Elementor kit / reset button skin
   (10px radius, dark-navy :hover/:focus fill, focus ring) so — (1) no hover box
   on unavailable days, (2) no blue box behind the green circle on available
   days, and (3) a CONTINUOUS range band (square cells, no per-cell rounding).
   The band rules just below re-assert the in-range cell background (they're more
   specific / later in source), and the visible hover lives on the inner circle
   (.lk-rcal-daynum) for available days only. */
.lk-rcal .lk-rcal-day { border-radius: 0 !important; }
.lk-rcal .lk-rcal-day:hover, .lk-rcal .lk-rcal-day:focus { background: transparent; box-shadow: none; }
.lk-rcal .lk-rcal-day:focus { outline: none; }
.lk-rcal .lk-rcal-day:focus-visible { outline: 2px solid #90CAA0; outline-offset: -2px; }
/* Continuous range band (behind the circles): full cell for in-range days, half
   cell on the endpoints so the band connects into the green start/end pills. */
.lk-rcal-has-range .lk-rcal-day.is-inrange { background: #E2F1E6; }
.lk-rcal-has-range .lk-rcal-day.is-checkin { background: linear-gradient(to right, transparent 50%, #E2F1E6 50%); }
.lk-rcal-has-range .lk-rcal-day.is-checkout { background: linear-gradient(to left, transparent 50%, #E2F1E6 50%); }
.lk-rcal .lk-rcal-day.is-checkin .lk-rcal-daynum, .lk-rcal .lk-rcal-day.is-checkout .lk-rcal-daynum { background: #90CAA0; color: #fff; }

/* Floating min-stay hint (Airbnb-style), anchored to the check-in cell. Neutral =
   Ink pill with white text; error (a check-out shorter than the minimum) turns the
   pill white with red text. Positioning is layout-only in the plugin's lk.css. */
.lk-rcal-hint { background: var(--lk-ink); color: #fff; font-size: .72rem; font-weight: 600; line-height: 1; padding: 8px 12px; border-radius: 999px; box-shadow: var(--lk-shadow); }
.lk-rcal-hint::after { content: ""; position: absolute; left: 50%; top: -4px; width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg); background: inherit; }
.lk-rcal-hint.is-error { background: #fff; color: #D45B5B; box-shadow: 0 6px 18px rgba( 212, 91, 91, .22 ); }

/* ---------- Filters — pill fields (design standards), on a single row ----------
   The plugin already renders the filters full-width (.lk-filters-row) and open by
   default; here we style each field as a pill (Line border, 999px, Work Sans). */
.lk-filters-summary { display: none; }   /* filters always shown — hide the details toggle */
.lk-filters { display: flex; flex-flow: row wrap; align-items: center; gap: 10px; background: none; border: 0; border-radius: 0; padding: 0; }
.lk-filter { display: inline-flex; align-items: center; gap: 8px; margin: 0; background: #fff; border: 1px solid #E3E8EA; border-radius: 999px; padding: 7px 16px; transition: border-color .16s ease; }
/* Single-line pill: label beside the select (the plugin defaults to a stacked
   column). Keeps every pill ~36px so they + the Amenities trigger line up. */
.lk-filters .lk-filter { flex-direction: row; }
.lk-filter:hover { border-color: #C7D0D4; }
.lk-filter label { margin: 0; font-family: "Work Sans", system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #5B6B73; white-space: nowrap; }
.lk-filter select, .lk-filter input { border: 0; background: transparent; padding: 0; font-family: "Work Sans", system-ui, sans-serif; font-size: 13px; color: #16303C; }
.lk-filter select { padding-right: 18px; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2316303C' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; }
/* Amenities and Price are <details> panels, not <select>s: style their
   <summary> triggers exactly like the select pills (rounded border, height,
   chevron). The <details> itself becomes a plain relative wrapper — no double
   pill — and the panel behaviour is unchanged. (results-map.js rewrites the
   inline Min/Max price field into a .lk-filter-pricedd <details>.) */
.lk-filter-amenities,
.lk-filter-pricedd { border: 0; padding: 0; background: none; position: relative; }
.lk-filter-amenities > summary,
.lk-filter-pricedd > summary { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #E3E8EA; border-radius: 999px; padding: 7px 16px; font-family: "Work Sans", system-ui, sans-serif; font-size: 13px; font-weight: 400; color: #16303C; list-style: none; cursor: pointer; white-space: nowrap; transition: border-color .16s ease; }
.lk-filter-amenities > summary::-webkit-details-marker,
.lk-filter-pricedd > summary::-webkit-details-marker { display: none; }
.lk-filter-amenities > summary:hover,
.lk-filter-pricedd > summary:hover { border-color: #C7D0D4; }
/* Chevron caret matching the selects; flips when the panel is open. */
.lk-filter-amenities > summary::after,
.lk-filter-pricedd > summary::after { content: ""; flex: 0 0 12px; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2316303C' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center; transition: transform .16s ease; }
.lk-filter-amenities[open] > summary::after,
.lk-filter-pricedd[open] > summary::after { transform: rotate(180deg); }
/* Price dropdown panel (Min/Max inputs), anchored under the pill. */
.lk-price-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; background: #fff; border: 1px solid #E3E8EA; border-radius: 10px; box-shadow: 0 8px 26px rgba(16, 42, 56, .12); padding: 14px; }
.lk-price-pop .lk-price-inputs { display: flex; align-items: center; gap: 8px; }
.lk-price-pop input { width: 92px; border: 1px solid #E3E8EA; border-radius: 8px; padding: 8px 10px; font-family: "Work Sans", system-ui, sans-serif; font-size: 13px; color: #16303C; background: #fff; }
.lk-amenities-pop { background: var(--lk-surface); border: 1px solid var(--lk-line); border-radius: var(--lk-radius-sm); box-shadow: var(--lk-shadow); }
.lk-amen-group strong { font-size: .72rem; text-transform: uppercase; color: var(--lk-muted); }
.lk-filter-clear { border: 0; background: transparent; padding: 8px 6px; color: #5581A2; text-decoration: underline; font-size: 13px; white-space: nowrap; }
.lk-filter-clear:hover { color: #3C617D; }

/* Toolbar "Sort" control (end of the results filter row). The dropdown reuses the
   currency selector's exact styling (see .lkbe-currency-select in style.css) so the
   two controls at the end of the row match. */
.lk-sort-tb-lab { font-family: "Work Sans", system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #5B6B73; }
.lk-sort-tb-select {
	font-family: "Work Sans", system-ui, sans-serif; font-size: .9rem; line-height: 1.2;
	padding: 7px 14px; border-radius: 999px; border: 1px solid #E3E8EA;
	background: #fff; color: #16303C; cursor: pointer;
}
.lk-sort-tb-select:hover { border-color: #C7D0D4; }
.lk-sort-tb-select:focus-visible { outline: none; border-color: #5581A2; box-shadow: 0 0 0 3px rgba( 85, 129, 162, .2 ); }
.lk-sort-tb-go { margin-left: 6px; }
.lk-filters-row { padding-left: 20px; padding-right: 20px; }
/* Landing pages: a little breathing room above the filters bar before it pins
   under the sticky header (results-map.js reads the row height, so the map offset
   stays correct; the bar's white background keeps the gap clean when pinned). */
body.lk-landing-page .lk-filters-row { padding-top: 15px; }

/* ---------- Result cards ---------- */
.lk-count { font-size: 0.88rem; font-weight: 500; }
.lk-card { background: var(--lk-surface); border: 1px solid var(--lk-line); border-radius: 4px; box-shadow: var(--lk-shadow-sm); transition: box-shadow .15s ease, transform .15s ease; }
.lk-card:hover { box-shadow: var(--lk-shadow); transform: translateY(-2px); }
.lk-card-media { background: var(--lk-surface-2); }
/* The media box is a fixed 4:3; make the photo fill it (height:100% + cover) so
   the grey placeholder background never shows as a band under a shorter image. */
.lk-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-badge { background: rgba(16, 42, 56, .8); color: #fff; padding: 3px 8px; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.lk-card-loc { font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; color: var(--lk-muted); }
.lk-card-title { font-size: 1.05rem; line-height: 1.25; }
.lk-card-title a { color: inherit; text-decoration: none; }
.lk-card-title a:hover { color: var(--lk-accent); }
/* Map popup card: slightly smaller title, and force the ink colour — Leaflet's
   default popup CSS otherwise colours the title link teal (the list on the left
   stays ink). Matches the left-hand results. */
.leaflet-popup-content .lk-card-title,
.leaflet-popup-content .lk-card-title a { font-size: 19px; color: #16303C; }
.lk-card-specs { font-size: .88rem; color: var(--lk-muted); }
.lk-card-price { font-size: .95rem; }
.lk-card-price strong { font-size: 1.1rem; color: var(--lk-accent); }

/* Pagination */
/* Corporate Blue (#5581A2) per the stylesheet — NOT var(--lk-accent), which is
   the outdated teal. Scoped under .lk-pagination so the ink number colour beats
   the Elementor kit's global link colour (.elementor-kit-16 a). */
.lk-pagination .lk-page { border: 1px solid var(--lk-line); border-radius: 8px; background: var(--lk-surface); color: #16303C; text-decoration: none; }
.lk-pagination .lk-page:not(.is-current):hover { border-color: #5581A2; color: #5581A2; }
.lk-pagination .lk-page.is-current { background: #5581A2; border-color: #5581A2; color: #fff; }
.lk-empty { color: var(--lk-muted); font-size: 1.05rem; }

/* ---------- Map controls ---------- */
.lk-map, .lk-gallery, .lk-card, .lk-card-media { overflow: hidden; }
.lk-map { border-radius: 4px; }
/* "Search this area" = primary pill (the Elementor kit styles all <button>s
   blue with a 10px radius, so !important is needed to restore the pill shape). */
.lk-search-area { background: #5581A2 !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; font-weight: 600; box-shadow: var(--lk-shadow); }
/* Expand-map control: no fill, no border, ink icon (SVG uses currentColor).
   Overrides the kit's blue button fill and reset.css's button border. */
.lk-map-expand { background: transparent !important; border: 0 !important; color: #16303C !important; box-shadow: none !important; }
/* Mobile: the Map/List toggle drops out of its fixed floating position into the
   flow, centered below a centered pagination, with breathing room before the
   footer. The expand-map control is hidden (no map-search layout on mobile).
   !important beats the plugin's mobile @media (position) and the kit (radius). */
@media (max-width: 767px) {
	.lk-wrap { padding-bottom: 24px; }
	.lk-pagination { justify-content: center; }
	.lk-mobile-map-toggle {
		position: static !important;
		transform: none !important;                 /* was translateX() for fixed-centering */
		display: block;
		width: -moz-fit-content;
		width: fit-content;
		margin: 0 auto 56px !important;             /* centered + space before the footer */
		border-radius: 999px !important;            /* rounded pill (kit forces 10px) */
		z-index: auto;
	}
	/* Map view covers the list with a fixed full-screen map, so while it's open
	   the toggle must float again (bottom-centered) to stay reachable — that's
	   the only way back to the list. */
	body.lk-map-open .lk-mobile-map-toggle {
		position: fixed !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		bottom: 20px !important;
		margin: 0 !important;
		z-index: 10000 !important;
	}
	.lk-map-expand { display: none !important; }
}
.lk-mobile-map-toggle { background: var(--lk-ink); color: #fff; border: 0; border-radius: 999px; font-weight: 600; box-shadow: 0 6px 20px rgba(16, 42, 56, .3); }
.lk-pop a { color: var(--lk-ink); font-weight: 600; text-decoration: none; }
.lk-pop-price { color: var(--lk-muted); font-size: .9rem; }
/* Map price pins — Airbnb/VRBO style, stylesheet colours. White pill by default;
   darkens to ink (white text) + lifts slightly on hover or when its card is hovered.
   Layout ships in the plugin (lk.css); this is the visual layer. */
.lk-price-pill {
	transform: translate(-50%, -50%);
	background: #fff;
	color: var(--lk-ink);
	border: 1px solid rgba(22, 48, 60, .12);
	padding: 7px 14px;
	border-radius: 999px;
	font-family: "Work Sans", system-ui, sans-serif;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: 0 2px 8px rgba(22, 48, 60, .22);
	transition: transform .12s ease, background-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.lk-price-marker:hover .lk-price-pill,
.lk-price-marker.lk-marker-active .lk-price-pill {
	background: var(--lk-ink);
	color: #fff;
	border-color: var(--lk-ink);
	transform: translate(-50%, -50%) scale(1.08);
	box-shadow: 0 5px 14px rgba(22, 48, 60, .32);
}
@media (prefers-reduced-motion: reduce) {
	.lk-price-pill { transition: none; }
	.lk-price-marker:hover .lk-price-pill, .lk-price-marker.lk-marker-active .lk-price-pill { transform: translate(-50%, -50%); }
}

/* ---------- Single property ---------- */
/* Hide the generic "Property single" page title (the property name shows via
   .lk-single-title below the gallery). */
.site-main:has(.lk-single) .page-header { display: none; }
/* "Back to search" link at the very top of the page — just under the header
   band, aligned with the boxed content. Understated uppercase Work Sans label. */
.lk-back {
	display: inline-block;
	margin: 22px 0 20px;
	font-family: "Work Sans", system-ui, sans-serif;
	font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
	color: #5B6B73; text-decoration: none;
	transition: color .16s ease;
}
.lk-back:hover { color: #5581A2; }
/* Boxed content: 80% width, capped at 1140px, centred. The single page now uses
   the Elementor Canvas template, so .lk-single is a direct child of <body> (there
   is no .site-main wrapper any more) — so constrain .lk-single itself. This
   applies to every property page (they all render .lk-single) and never touches
   other templates (home / results have no .lk-single). */
.lk-single { width: 80%; max-width: 1140px; margin-left: auto; margin-right: auto; }
/* Space before the "List your property" CTA: --lk-cta-gap (style.css), the wrapper's padding alone. */
.lk-single { padding-bottom: var(--lk-cta-gap, 124px); }
.lk-single > :last-child { margin-bottom: 0; }

/* Photo gallery: one big image + a 2×2 grid of 4 small, all 3:2 and perfectly
   aligned — the big image spans both rows, so its height always equals the two
   small rows + gap. display:contents lifts the plugin's .lk-gallery-main /
   .lk-gallery-side wrappers so their images become direct grid cells, and
   min-width:0 prevents the image min-content blowout that collapsed the side
   column to 0. */
.lk-gallery {
	position: relative;
	margin-top: 10px;              /* small breathing room above the gallery */
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 8px;
	aspect-ratio: 3 / 1;
	border-radius: 0;
}
.lk-gallery-main,
.lk-gallery-side { display: contents; }
.lk-gallery-main > img { grid-column: 1; grid-row: 1 / 3; }
.lk-gallery-side > .lk-gallery-item:nth-child(1) { grid-column: 2; grid-row: 1; }
.lk-gallery-side > .lk-gallery-item:nth-child(2) { grid-column: 3; grid-row: 1; }
.lk-gallery-side > .lk-gallery-item:nth-child(3) { grid-column: 2; grid-row: 2; }
.lk-gallery-side > .lk-gallery-item:nth-child(4) { grid-column: 3; grid-row: 2; }
.lk-gallery > *,
.lk-gallery figure { min-width: 0; min-height: 0; margin: 0; }
.lk-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; }
.lk-gallery-side figure { background: var(--lk-surface-2); }
/* Photo counter "1 / N" — dark translucent pill on the photo (Wander). */
.lk-gallery-count {
	background: rgba(22, 48, 60, .72) !important; color: #fff !important; border: 0 !important;
	border-radius: 999px !important; padding: 6px 13px !important; min-height: 0 !important;
	font-family: "Work Sans", system-ui, sans-serif !important; font-weight: 600 !important; font-size: .8rem !important;
	letter-spacing: .3px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25) !important;
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}

/* Mobile sticky "Book now" bar: NO band in flow; a white band fades in only once
   it sticks to the top (.is-stuck), and the whole bar fades out near the widget. */
.lk-mobile-cta { background: rgba(255, 255, 255, 0); transition: opacity .25s ease, background-color .2s ease, box-shadow .2s ease; }
.lk-mobile-cta.is-stuck { background: rgba(255, 255, 255, 1); box-shadow: 0 3px 10px rgba(16, 42, 56, .1); }
/* Full-width pill in Corporate Blue (#5581A2, the design-standards primary). */
.lk-mobile-cta-btn { width: 100% !important; background: #5581A2 !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; font-family: "Work Sans", system-ui, sans-serif !important; font-weight: 600 !important; }
.lk-mobile-cta-btn:hover { background: #3C617D !important; }

/* Rating stars in Corporate Blue (archive cards + single). The single-rating and
   badge keep the ★ glyph blue while the score/count stay ink/muted. */
.lk-star.is-on { color: #90CAA0; }
.lk-single-rating { color: #90CAA0; }
.lk-single-rating strong { color: #16303C; }
.lk-single-rating span { color: #5B6B73; }
/* Card rating badge sits on a dark pill (over the photo): the note reads white
   while the star stays Corporate Blue. The markup is a bare "★ 5.0" text node,
   so ::first-letter isolates the star. */
.lk-badge { color: #fff; }
.lk-badge::first-letter { color: #90CAA0; }

/* Reviews & amenity groups: flow into CSS columns so uneven-height items pack
   tightly instead of leaving big white gaps (the plugin's 2-col grid gave every
   row the tallest cell's height). break-inside keeps each item/group whole. */
/* Reviews: a single column, one under the other, divided by a hairline. */
.lk-reviews-list { display: block; columns: 1; margin: 0; padding: 0; }
.lk-reviews-list .lk-review { margin: 0; padding: 20px 0; border-top: 1px solid var(--lk-line); }
.lk-reviews-list .lk-review:first-child { border-top: 0; padding-top: 6px; }
.lk-amenity-groups { display: block; columns: 2; column-gap: 24px; }
.lk-amenity-groups .lk-amenity-group { break-inside: avoid; margin: 0 0 12px; }
@media (max-width: 767px) {
	.lk-reviews-list,
	.lk-amenity-groups { columns: 1; }
}

/* Consistent 4px radius on the single-page cards/controls (were 8/10/14px). */
.lk-booking, .lk-tour, .lk-addons,
.lk-cal-day, .lk-cal-nav, .lk-cal-clear { border-radius: 4px !important; }

/* Mobile: a single photo (the four small ones are hidden), everything clamped to
   the viewport, with the SAME 10px side margin as the archive (property list). */
@media (max-width: 767px) {
	/* Drop the desktop 80%/1140 cap; keep 10px side margins like the archive. */
	.lk-single { width: 100%; max-width: none; padding-left: 10px; padding-right: 10px; }
	/* One photo only. */
	.lk-gallery-side { display: none !important; }
	.lk-gallery {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto !important;
		aspect-ratio: auto;
	}
	.lk-gallery-main > img { grid-column: 1 !important; grid-row: 1 !important; aspect-ratio: 1 / 1; height: auto; }
	/* Clamp to the viewport (no horizontal overflow); overflow-x:clip keeps the
	   sticky booking sidebar working, unlike overflow:hidden. */
	.lk-single, .lk-single img, .lk-gallery, .lk-gallery img { max-width: 100% !important; }
	.lk-single { overflow-x: clip; }
	/* Single column on phones; the booking widget drops under the content. */
	.lk-single-grid { grid-template-columns: 1fr; }
	.lk-single-main, .lk-single-aside { min-width: 0; }
}
/* SEO keyword H1 (from Streamline seo_title). Title font, a touch larger. */
/* !important beats the Elementor kit's `.elementor-kit-NN h1` (56px). */
.lk-single-title { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 400 !important; font-size: clamp(1.5rem, 2.1vw, 1.75rem) !important; line-height: 1.2; color: var(--lk-ink); }
/* Property name kept as a sub-line under the keyword H1. */
.lk-single-name { color: var(--lk-muted); font-size: 1rem; margin: 4px 0 0; }
.lk-single-loc { color: var(--lk-muted); font-size: .95rem; }
.lk-single-rating span { color: var(--lk-muted); font-size: .9rem; }
/* Rating as a jump-link to the reviews section: reads like the plain rating (no
   underline / link colour), just a pointer + a subtle hover cue on the count. */
a.lk-single-rating-link { display: inline-block; text-decoration: none !important; color: #90CAA0; cursor: pointer; }
a.lk-single-rating-link:hover span { color: var(--lk-ink); text-decoration: underline; }
.lk-single-specs { color: var(--lk-ink); margin: 8px 0 48px; }
.lk-single-specs li + li::before { content: "·"; margin: 0 12px 0 -14px; color: var(--lk-line); }
.lk-section { border-bottom: 1px solid var(--lk-line); }
.lk-section h2:not(.lk-sec-title) { font-size: 1.25rem; }
/* Wander-style soft shadow around gallery photos. */
.lk-gallery img { box-shadow: 0 6px 20px rgba(22, 48, 60, .10); }
.lk-desc { color: var(--lk-ink); line-height: 1.6; }
.lk-amenity-group h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--lk-muted); margin: 0 0 6px; }
.lk-amenity-group li { color: var(--lk-ink); }
/* Amenity icon: same sprite as the results filters, in Corporate Blue. */
.lk-am-ic { color: var(--lk-accent); stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Spec icons (bedrooms/bathrooms/guests) — Corporate Blue, replace the words. */
.lk-spec-ic { color: #5581A2; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Amenity filter pills = the exact "Sort by" segment look (.lk-fpill), forced so
   Elementor's global button skin can't repaint them. Colours hardcoded here
   because the --lkf-* vars are scoped to the filter bar, not this section. */
.lk-amf .lk-fpill {
	display: inline-flex; align-items: center; gap: 6px;
	height: 38px; min-width: 42px; padding: 0 14px !important; min-height: 0 !important;
	background: #fff !important; color: #16303C !important; border: 1px solid #CBD6DB !important;
	border-radius: 999px !important; box-shadow: none !important;
	font-family: "Work Sans", system-ui, sans-serif !important; font-weight: 500 !important;
	font-size: 13.5px !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: none !important;
	cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.lk-amf .lk-fpill:hover { border-color: #5581A2 !important; }
/* Selected = light Corporate-Blue tint + blue border/text; the icon stays BLUE
   (never white) — matches the results quick-filter chips. */
.lk-amf .lk-fpill.is-on { background: #E7EEF3 !important; border-color: #5581A2 !important; color: #3C617D !important; }
.lk-amf .lk-fi { stroke: #5581A2; }
.lk-amf .lk-fpill.is-on .lk-fi { stroke: #5581A2; }
/* Amenity terms (no icons). */
.lk-amf-list li { color: var(--lk-ink); }
.lk-address { color: var(--lk-muted); }

/* ---------- "Good to know" band ---------- */
.lk-gtk { border-top: 1px solid var(--lk-line); padding-top: 28px; }
.lk-gtk .lk-sec-title { margin-bottom: 18px; }
.lk-gtk-ic { color: #5581A2; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lk-gtk-t { font-family: "Work Sans", system-ui, sans-serif; font-weight: 700; font-size: .95rem; color: var(--lk-ink); margin: 0 0 6px; }
.lk-gtk-col p { color: var(--lk-muted); font-size: .92rem; line-height: 1.6; }
/* Merged location map: address sits above the (full-width) map. */
.lk-location .lk-address { margin: 0 0 12px; }

/* "This rental" marker = the LK compass in a white teardrop pin (prominent). */
.lk-nearby-home.leaflet-div-icon { background: none; border: 0; }
.lk-nearby-home-pin {
	position: relative; display: block; width: 46px; height: 46px;
	background: #fff; border: 2px solid #90CAA0; border-radius: 50%;
	box-shadow: 0 3px 10px rgba(16, 42, 56, .35);
}
.lk-nearby-home-pin img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; object-fit: contain; }
.lk-nearby-home-pin::after {
	content: ""; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
	width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid #90CAA0;
}

/* ---------- Read-more collapsibles (description, amenities) ---------- */
/* White fade over the clipped content while collapsed (page bg is white). */
.lk-collapse:not(.is-open) .lk-collapse-inner::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
	pointer-events: none;
}
/* Secondary pill per the design standards (ghost → fills on hover). Forced with
   !important because Elementor's global button skin otherwise repaints it. */
.lk-collapse-toggle,
.lk-reviews-more {
	display: inline-block; cursor: pointer;
	background: transparent !important;
	color: #5581A2 !important;
	border: 1px solid #5581A2 !important;
	border-radius: 999px !important;
	padding: 9px 22px !important;
	min-height: 0 !important;
	font-family: "Work Sans", system-ui, sans-serif !important;
	font-weight: 600 !important; font-size: .9rem !important; line-height: 1.2 !important;
	letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important;
	box-shadow: none !important;
	transition: background-color .16s ease, color .16s ease;
}
.lk-collapse-toggle:hover,
.lk-reviews-more:hover { background: #5581A2 !important; color: #fff !important; }

/* ---------- Single content sections (stacked, no tabs) ---------- */
/* Section heading: title font (Playfair), ink, generous gap above each block. */
.lk-sec-title,
.lk-nearby-title {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	/* !important beats the Elementor kit's `.elementor-kit-NN h2` (34px/600). */
	font-weight: 400 !important; font-size: clamp(1.5rem, 2.1vw, 1.75rem) !important; line-height: 1.2; color: var(--lk-ink);
	margin: 0 0 22px;
}
/* Last section drops its divider (nothing follows inside the main column). */
.lk-single-main .lk-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
/* In-content video / 3D tour: soft Wander-style shadow, rounded. */
.lk-tour { border-radius: 8px; overflow: hidden; box-shadow: 0 6px 22px rgba(22, 48, 60, .12); }

/* ---------- "Watch the tour" play button (Wander-style) ---------- */
/* Dark translucent pill anchored bottom-left of the main photo; a white play
   disc + label. Position lives in the plugin (layout); look here (visual). */
/* Matches the "View all photos" pill (design system): white surface, hairline
   border, pill radius, soft shadow — with a Corporate Blue play disc. Forced so
   Elementor's global button skin can't repaint it. */
.lk-tour-btn {
	display: inline-flex !important; align-items: center !important; gap: 8px !important;
	background: #fff !important;
	color: #16303C !important;
	border: 1px solid #E3E8EA !important;
	border-radius: 999px !important;
	padding: 6px 16px 6px 6px !important;
	min-height: 0 !important;
	font-family: "Work Sans", system-ui, sans-serif !important;
	font-weight: 600 !important; font-size: .85rem !important; line-height: 1 !important;
	letter-spacing: 0 !important; text-transform: none !important;
	box-shadow: 0 2px 10px rgba(16, 42, 56, .14) !important;
	transition: transform .16s ease, box-shadow .16s ease;
}
/* Text sits on its own centred line next to the disc. */
.lk-tour-btn-t { display: inline-flex; align-items: center; line-height: 1; }
.lk-tour-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(16, 42, 56, .2) !important; }
.lk-tour-btn:focus-visible { outline: 2px solid #5581A2 !important; outline-offset: 2px; }
.lk-tour-btn-ic { width: 26px; height: 26px; border-radius: 50%; background: #5581A2; color: #fff; }
.lk-tour-btn-ic svg { margin-left: 2px; }  /* optically centre the ▶ glyph */

/* ---------- Tour popup = photo lightbox. The stage mirrors .lk-lb-img so the
   video/3D popup is pixel-identical to the gallery slideshow. ---------- */
.lk-lightbox--media .lk-lb-stage { border-radius: 8px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); background: #000; }

/* Booking widget */
.lk-booking { background: var(--lk-surface); border: 1px solid var(--lk-line); border-radius: var(--lk-radius); box-shadow: var(--lk-shadow); }
.lk-booking-from strong { font-size: 1.4rem; color: var(--lk-accent); }
.lk-booking-from span { color: var(--lk-muted); }
.lk-field > span { font-size: .78rem; color: var(--lk-muted); margin-bottom: 6px; }
.lk-field input, .lk-field select { border: 1px solid var(--lk-line); border-radius: 8px; background: var(--lk-surface); }
.lk-addons { border: 0; border-radius: 0; }
.lk-addons legend { font-size: .8rem; color: var(--lk-muted); }
.lk-addon .lk-addon-price { color: var(--lk-muted); font-style: normal; }
.lk-price-hint { color: var(--lk-muted); font-size: .9rem; }
.lk-line { font-size: .92rem; }
.lk-line-total { border-top: 1px solid var(--lk-line); font-weight: 700; font-size: 1rem; }
.lk-taxes-note { color: var(--lk-muted); font-size: .8rem; }
.lk-btn-book:disabled { background: #b7c2c7; cursor: not-allowed; }
/* Full-width "Request to book" (Wander-style) — forced past Elementor's button
   width so it spans the whole widget. */
.lk-booking .lk-btn-book { display: block !important; width: 100% !important; }
.lk-booking-note { color: var(--lk-muted); font-size: .78rem; }

/* ---------- Lightbox controls (over the plugin's dark scrim) ---------- */
/* No button chrome — the text glyphs (‹ › ×) are hidden and replaced by white
   SVGs: prev/next are large chevrons like the hero / home sliders, and close is
   the same X as the main-menu drawer (but white), rotating on hover. */
.lk-lb-prev, .lk-lb-next, .lk-lb-close {
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	font-size: 0 !important;
	color: transparent !important;
	background-repeat: no-repeat;
	background-position: center;
	filter: none;   /* dark controls sit on the white overlay — no shadow needed */
	cursor: pointer;
	transition: opacity .16s ease, transform .2s ease;
}
.lk-lb-prev, .lk-lb-next { width: 44px !important; height: 44px !important; background-size: 44px 44px !important; }
.lk-lb-prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316303C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") !important; }
.lk-lb-next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316303C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") !important; }
.lk-lb-prev:hover, .lk-lb-next:hover { opacity: .55; }
/* Close = the drawer's X, now Ink (dark) on the white overlay. */
.lk-lb-close { width: 40px !important; height: 40px !important; background-size: 26px 26px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316303C' stroke-width='1.6'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") !important; }
.lk-lb-close:hover { transform: rotate(90deg); }
.lk-lb-counter { color: #16303C; font-size: .9rem; }
.lk-lb-img { border-radius: 8px; box-shadow: 0 10px 40px rgba(16, 42, 56, .2); }
/* Opaque white viewer overlay (was a dark scrim); reused by the video/tour popup.
   z-index sits ABOVE the "all photos" grid so a tile opens the viewer on top. */
.lk-lightbox { background: #fff; z-index: 100002; }

/* "All photos" grid (Wander-style): clean white sheet, subtle dividers. */
.lk-photogrid { background: #fff; }
.lk-photogrid-bar { background: #fff; border-bottom: 1px solid var(--lk-line); }
.lk-photogrid-close { color: #16303C; font-size: 1.9rem; transition: color .16s ease, transform .2s ease; }
.lk-photogrid-close:hover { color: #5581A2; transform: rotate(90deg); }
.lk-photogrid-item { border-radius: 6px; }
.lk-photogrid-item img { border-radius: 6px; transition: opacity .16s ease; }
.lk-photogrid-item:hover img { opacity: .9; }

/* ---------- Guest review form (functional base; refine later) ---------- */
.lk-review-form .lk-review-field input,
.lk-review-form .lk-review-field textarea { border: 1px solid var(--lk-line); border-radius: var(--lk-radius-sm); padding: 8px 10px; background: var(--lk-surface); color: var(--lk-ink); }
.lk-review-form .lk-review-field input:focus,
.lk-review-form .lk-review-field textarea:focus { outline: 2px solid var(--lk-accent); outline-offset: 1px; }
.lk-review-form label { font-weight: 600; }
.lk-rating-input label { color: #d8dde0; }
.lk-rating-input input:checked ~ label,
.lk-rating-input label:hover,
.lk-rating-input label:hover ~ label { color: #f5b301; }
/* Review-form callouts use the Design Standards status palette (Success #43A66F,
   Error #D45B5B) as a left accent, like the confirmation-page callouts. */
.lk-review-done { background: #E2F1E6; border-left: 3px solid #43A66F; border-radius: var(--lk-radius-sm); }
.lk-review-done h2 { color: #43A66F; }
.lk-review-invalid,
.lk-review-error { background: #FBE9E9; border-left: 3px solid #D45B5B; border-radius: var(--lk-radius-sm); }
.lk-review-submit { margin-top: 8px; }

/* ---------- Availability calendar ----------
   NOTE: day cells + nav are <button>s, so Elementor's global button style
   (.elementor-kit-NN button → blue fill/radius) would paint them. Everything
   here is scoped under .lk-cal to out-specify it, and the buttons are reset. */
/* States aligned with the design-standards calendar (.cal in docs/stylesheet)
   AND the search calendar (.lk-rcal) so both calendars read the same: Corporate
   Green selection (#90CAA0, white text), pale-green range (#E2F1E6), PALE-GREY
   unavailable/past dates (#C2CCD0). Was the old coastal teal (--lk-accent). */
.lk-cal .lk-cal-nav { background: #fff; border: 1px solid #E3E8EA; border-radius: 8px; box-shadow: none; color: #16303C; }
.lk-cal .lk-cal-nav[disabled] { opacity: .4; }
.lk-cal .lk-cal-hint { color: #5B6B73; }
.lk-cal .lk-cal-dow { color: #5B6B73; font-weight: 600; }
/* Reset the Elementor button skin on day cells, then apply availability states. */
.lk-cal .lk-cal-day { background: none; border: 0; box-shadow: none; padding: 2px; border-radius: 4px; color: #16303C; }
/* Available (bookable) dates get a very pale grey fill (no border) + ink number
   and palm-green price, so they read as clickable against the plain, muted
   unavailable dates. */
.lk-cal .lk-cal-avail { background: #EDF1F3; box-shadow: none; font-weight: 600; }
.lk-cal .lk-cal-avail:hover { background: #D3EAD9; box-shadow: none; }
.lk-cal .lk-cal-price { color: #5B6B73; font-weight: 600; font-size: .7rem; }
.lk-cal .lk-cal-avail .lk-cal-price { color: #2E7D57; }
/* Unavailable (booked / not available) and past dates → muted grey, no card. */
.lk-cal .lk-cal-booked, .lk-cal .lk-cal-na { color: #AEB9BF; text-decoration: line-through; background: none; box-shadow: none; }
.lk-cal .lk-cal-past { color: #C2CCD0; background: none; box-shadow: none; }
/* Selected check-in / check-out → solid Corporate Green, white text. */
.lk-cal .lk-cal-day.is-in, .lk-cal .lk-cal-day.is-out { background: #90CAA0; color: #fff; box-shadow: none; }
.lk-cal .lk-cal-day.is-in .lk-cal-price, .lk-cal .lk-cal-day.is-out .lk-cal-price { color: rgba(255, 255, 255, .9); }
/* Nights in range → pale Corporate Green (seafoam 26%, matches .lk-rcal). */
.lk-cal .lk-cal-day.is-between { background: #E2F1E6; box-shadow: none; }
.lk-cal .lk-cal-clear { background: none; border: 0; box-shadow: none; color: #5581A2; text-decoration: underline; }
.lk-cal .lk-cal-msg { color: #D45B5B; font-size: .88rem; }
/* Alert colours re-homed from the plugin (which is layout-only). Status Error
   = #D45B5B, Success = #43A66F (Design Standards). Child theme loads after lk.css,
   so these win the cascade. */
/* Min-stay not met → Error red (#D45B5B), matching the availability calendar's
   floating hint (.lk-rcal-hint.is-error) so both surfaces read the same. */
.lk-price-alert { color: #D45B5B; font-weight: 600; }
.lk-pay-success { color: #43A66F; font-weight: 600; }
.lk-pay-success-title { color: #43A66F !important; }
/* Confirmation-page messages/states (Design Standards status palette). */
.lk-manage-done { color: #43A66F; font-weight: 600; }
.lk-confirmation .lk-pay-msg.is-error,
.lk-confirmation .lk-manage-msg.is-error { color: #D45B5B; font-weight: 600; }
.lk-conf-balance-row.is-due-soon dt { color: #E0A43A; font-weight: 600; }
.lk-cal-legend-avail::before { background: #EDF1F3; border: 0; }
.lk-cal-legend-booked::before { background: #C2CCD0; }
.lk-cal-legend-selected::before { background: #90CAA0; }
/* Larger calendar typography — now that a single month fills the left column,
   the cells are bigger so the numbers/labels can breathe. */
.lk-cal .lk-cal-mtitle { font-size: 1.15rem; }
.lk-cal .lk-cal-hint { font-size: 1rem; }
.lk-cal .lk-cal-dow { font-size: .9rem; }
.lk-cal .lk-cal-num { font-size: 1.1rem; }
.lk-cal .lk-cal-price { font-size: .82rem; }

/* ============================================================================
   Testimonials (#lk-testimonials) — the featured-reviews slider
   ([lk_reviews_slider]) presented as a single "featured quote" card over a photo,
   per the design standards. Layout ships in the plugin (.lk-rslider / .lk-rslide…);
   all visual style is here. NOTE: the --lk-* vars at the top are an older "coastal"
   palette that no longer matches the official stylesheet (accent = teal, ink =
   #1f2a30), so this block uses the stylesheet values DIRECTLY: Ink #16303C,
   Corporate Blue #5581A2, Muted #5B6B73, Line #E3E8EA.
   ========================================================================== */
#lk-testimonials { position: relative; }
/* Legibility wash over the background photo. */
#lk-testimonials::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: rgba(16, 48, 60, .34); pointer-events: none;
}
#lk-testimonials > .e-con-inner { position: relative; z-index: 1; }

/* White card holding the slider. Wider than before (min(80%, 1140px) instead of
   a fixed 880px) so the reviews use more width and the section stays shorter. */
#lk-testimonials-card {
	width: min(80%, 1140px); max-width: 1140px; margin: 0 auto;
	background: rgba(255, 255, 255, .85); border-radius: 4px;
	box-shadow: 0 8px 26px rgba(16, 42, 56, .12);   /* md shadow (design standards) */
	padding: clamp(30px, 5vw, 60px) clamp(22px, 5vw, 68px);
}
/* Mobile: the card fills the width (80% was too narrow — big side margins) so it
   aligns to the section's 20px edge like the other sections. */
@media (max-width: 767px) {
	#lk-testimonials-card { width: 100%; max-width: 100%; }
}

#lk-testimonials .lk-rslider { gap: 6px; }
#lk-testimonials .lk-rslide { gap: 14px; padding: 0 4px; }

/* Small, discreet stars (Corporate Blue, tying with the quotation marks). */
#lk-testimonials .lk-rslide-stars { font-size: 13px; letter-spacing: 3px; line-height: 1; }
#lk-testimonials .lk-star.is-on  { color: #90CAA0; }
#lk-testimonials .lk-star.is-off { color: #E3E8EA; }

/* This design has no per-review title. */
#lk-testimonials .lk-rslide-title { display: none; }

/* The quote — Playfair Display, ink, airy, framed by curly quotation marks. */
#lk-testimonials .lk-rslide-body {
	font-family: "Playfair Display", Georgia, serif;
	color: #16303C; font-weight: 400;
	font-size: clamp(20px, 2.3vw, 28px); line-height: 1.5;
	max-width: 32em; margin: 4px auto;
}
#lk-testimonials .lk-rslide-body::before,
#lk-testimonials .lk-rslide-body::after {
	color: #5581A2; font-family: "Playfair Display", Georgia, serif; font-weight: 700;
	font-size: 1.15em; line-height: 0; vertical-align: -.2em;
}
#lk-testimonials .lk-rslide-body::before { content: "\201C"; margin-right: .08em; }
#lk-testimonials .lk-rslide-body::after  { content: "\201D"; margin-left: .04em; }

/* Attribution: author, then property name as the secondary "role" line. */
#lk-testimonials .lk-rslide-meta { margin-top: 12px; font-family: "Work Sans", system-ui, sans-serif; row-gap: 2px; }
#lk-testimonials .lk-rslide-author { font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #16303C; }
#lk-testimonials .lk-rslide-prop { font-size: 13px; letter-spacing: .02em; color: #5B6B73; }
#lk-testimonials .lk-rslide-author + .lk-rslide-prop::before { content: "\B7"; margin-right: 8px; color: #B9C4C9; }
/* Property name links to its page: same muted tone, discreet underline, corporate blue on hover. */
.lk-rslide-prop a { color: inherit; text-decoration: underline; text-decoration-color: rgba(91, 107, 115, .35); text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; }
.lk-rslide-prop a:hover { color: #5581A2; text-decoration-color: currentColor; }
.lk-rslide-prop a:focus-visible { outline: 2px solid #5581A2; outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .lk-rslide-prop a { transition: none; } }

/* Prev/next — minimal; the !important resets beat the global Elementor button kit
   (elementor-kit styles every <button> with a blue fill + radius). */
#lk-testimonials .lk-rslider-nav {
	appearance: none; -webkit-appearance: none;
	background: transparent !important; border: 0 !important; box-shadow: none !important;
	min-height: 0 !important; color: #5B6B73 !important;
	width: 40px; height: 40px; padding: 0 !important; border-radius: 999px !important;
	font-size: 26px; line-height: 1; cursor: pointer;
	transition: color .16s ease, background .16s ease;
}
#lk-testimonials .lk-rslider-nav:hover { color: #16303C !important; background: #F1F5F7 !important; }
#lk-testimonials .lk-rslider-nav[disabled] { opacity: .3; cursor: default; }

@media (max-width: 600px) {
	#lk-testimonials-card { padding: 30px 18px; }
	#lk-testimonials .lk-rslide-body { font-size: 20px; }
	#lk-testimonials .lk-rslider-nav { width: 32px; font-size: 22px; }
}

/* ============================================================================
   Collections property slider ([lk_properties_slider]) — full-bleed CARD, scoped
   to #lk-collections ONLY (the slider keeps its default look elsewhere). The
   plugin's "simple" style ships height-constrained images (auto width); here we
   force the photo to fill the column at a uniform 4:3 (object-fit:cover), then
   overlay a hero-style white nav (top-right), a gradient on the photo, and the
   price in white — every overlay kept >=12px from the photo edges.
   ========================================================================== */
/* Force the slide/photo to fill the column (breaks the plugin's shrink-to-image
   chain: viewport -> track -> li -> inner -> media -> img). */
#lk-collections .lk-pslider-simple { position: relative; }
#lk-collections .lk-pslider-viewport { width: 100% !important; }
#lk-collections .lk-pslider-track { width: 100% !important; max-width: none !important; }
#lk-collections .lk-pslide { flex: 0 0 100% !important; min-width: 100% !important; width: 100% !important; max-width: none !important; }
#lk-collections .lk-pslide-simple-inner { position: relative; width: 100% !important; display: block !important; }
#lk-collections .lk-pslide-simple-media { position: relative; width: 100% !important; display: block !important; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; }
#lk-collections .lk-pslide-simple-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; display: block; }

/* Gradient on the photo, beneath the white text (darkest at the very bottom). */
#lk-collections .lk-pslide-simple-media::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(to top, rgba(0, 0, 0, .60) 0%, rgba(0, 0, 0, 0) 15%);
}

/* Price / See more overlaid on the photo bottom, in white, >=12px from the edges. */
#lk-collections .lk-pslide-simple-body {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	padding: 12px 14px; margin: 0;
}
#lk-collections .lk-pslide-simple-price,
#lk-collections .lk-pslide-simple-price strong,
#lk-collections .lk-pslide-simple-more { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
#lk-collections .lk-pslide-simple-price { z-index: 9; }

/* Nav chevrons — the SAME icon as the hero scroll chevron (24-box path,
   stroke-width 2, round caps/joins), reversed white at 30px with the hero's
   drop-shadow, top-right of the photo >=12px from the edges. The text glyph
   (‹ ›) is hidden (font-size:0) and replaced by the SVG. The !important resets
   beat the global Elementor button kit (blue fill + radius). */
#lk-collections .lk-pslider-nav {
	position: absolute; top: 24px; z-index: 5;
	background-color: transparent !important; border: 0 !important; box-shadow: none !important;
	border-radius: 0 !important; min-height: 0 !important;
	width: 30px !important; height: 30px !important; padding: 0 !important;
	font-size: 0 !important; color: transparent !important;
	background-repeat: no-repeat; background-position: center; background-size: 30px 30px;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
	cursor: pointer; transition: opacity .16s ease;
}
#lk-collections .lk-pslider-nav:hover { opacity: .75; }
#lk-collections .lk-pslider-prev { right: 46px; left: auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") !important; }
#lk-collections .lk-pslider-next { right: 12px; left: auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") !important; }

/* Properties slider (#lk-properties, [lk_properties_slider style="full" auto])
   — hide the prev/next nav here ONLY; it auto-advances. Scoped to #lk-properties
   so the Collections sliders keep their chevrons. */
#lk-properties .lk-pslider-nav { display: none !important; }

/* ---------- Amenities accordion ([lk_amenities_accordion] → .lk-acc) ---------- */
/* Reference-style (Ritz-Carlton Yacht) expand: each item is a flex column with
   its content vertically CENTRED, and a min-height that eases from the closed
   bar up to a tall open block. As the block grows, the centred title/text drift
   downward; the title fades out and returns slightly LARGER (scale). The toggle
   stays pinned top-right in both states. (The plugin hides panels with
   [hidden]=display:none, which can't animate — so the panel stays rendered and
   just fades; the block height is what animates, via min-height.) */
.lk-acc-item {
	display: flex;
	flex-direction: column;
	justify-content: center;      /* content vertically centred */
	min-height: 80px;             /* collapsed bar height */
	position: relative;
	overflow: hidden;
	transition: min-height .5s cubic-bezier(.4, 0, .2, 1);
}
.lk-acc-item.is-open { min-height: 400px; }
.lk-acc-head { position: static; justify-content: flex-start; }
.lk-acc-toggle { position: absolute; top: 20px; right: 22px; }  /* pinned top-right */
/* Title: fades out and returns slightly larger on open. */
.lk-acc-title { transform-origin: left center; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.lk-acc-item.is-open .lk-acc-title { transform: scale(1.25); animation: lk-acc-title-reveal .55s ease; }
@keyframes lk-acc-title-reveal { 0% { opacity: 1; } 45% { opacity: .1; } 100% { opacity: 1; } }
/* Panel: fades in. */
.lk-acc-panel { overflow: hidden; transition: opacity .4s ease; }
.lk-acc-panel[hidden] { display: block !important; opacity: 0; max-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.lk-acc-item .lk-acc-panel:not([hidden]) { opacity: 1; }
/* The accordion heads are <button>s, so the Elementor kit paints them blue on
   hover/focus — kill that so the header stays the photo, not a blue block. */
.lk-acc-head:hover, .lk-acc-head:focus { background: transparent !important; background-color: transparent !important; }
/* Open item: a darker, more even scrim so the photo doesn't wash out the text. */
.lk-acc-item.is-open::before { background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, .45)); }
/* "Learn more" link inside the panel — white on the photo (the kit otherwise
   colours it dark blue, invisible against the image). */
.lk-acc-link { color: #fff !important; }
@media (prefers-reduced-motion: reduce) {
	.lk-acc-item, .lk-acc-title, .lk-acc-panel { transition: none; }
	.lk-acc-item.is-open .lk-acc-title { animation: none; }
}
/* Mobile: shrink the accordion titles so the longer ones ("Around the clock
   support", "Fully equipped kitchens") fit on one line instead of running under
   the toggle and being clipped; drop the open-title scale (it would push those
   long titles back over the toggle). */
@media (max-width: 767px) {
	.lk-acc-title { font-size: 0.875rem; }
	.lk-acc-item.is-open .lk-acc-title { transform: none; }
}

/* ============================================================================
   FAQ ([lk_faqs]) — Eden-Roc-style layout: a floating category sidebar on the
   left (anchor links + scroll-spy) beside category sections of toggles. Design
   standards: Playfair category titles, UPPERCASE Work Sans questions, Work Sans
   answers, the site's chevron (rotates on open), Line separators. The 2-column
   grid + sticky nav ship in the plugin; this is all visual.
   ========================================================================== */

/* ---- Floating category sidebar ---- */
.lk-faqs-nav { background: #F1F5F7; border-radius: 4px; padding: 6px 22px; }
.lk-faqs-navlink {
	padding: 14px 0;
	font-family: "Work Sans", system-ui, sans-serif;
	font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: #5B6B73; border-bottom: 1px solid #E3E8EA;
	transition: color .16s ease;
}
.lk-faqs-nav li:last-child .lk-faqs-navlink { border-bottom: 0; }
.lk-faqs-navlink:hover { color: #16303C; }
.lk-faqs-navlink.is-active { color: #16303C; }
.lk-faqs-navlink.is-active::after { content: "\203A"; margin-left: 8px; font-weight: 400; }
.lk-faqs-navlink:focus-visible { outline: 2px solid #90CAA0; outline-offset: 2px; }

/* ---- Category heading (Playfair, Ink; a touch lighter than a section title to
   match the reference) ---- */
.lk-faq-cat + .lk-faq-cat { margin-top: 56px; }
.lk-faq-cat-title {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 600; color: #16303C;
	margin: 0 0 32px;
}
/* Rows framed top + bottom by hairlines (design-standards Line #E3E8EA). */
.lk-faq-cat .lk-faq-list { border-top: 1px solid #E3E8EA; }
.lk-faq-item { border-bottom: 1px solid #E3E8EA; }

/* ---- Question: UPPERCASE Work Sans, semibold, black. Scoped to .lk-faqs so the
   colour/size beat the Elementor kit's white <button> text (.elementor-kit-NN
   button, 0,1,1). ---- */
.lk-faqs .lk-faq-q {
	padding: 26px 2px 26px 0;
	font-family: "Work Sans", system-ui, sans-serif;
	font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	line-height: 1.4; color: #16303C;
	transition: color .16s ease;
}
.lk-faq-q:hover .lk-faq-q-text { color: #5581A2; }
.lk-faq-item.is-open .lk-faq-q-text { color: #5581A2; }
.lk-faq-q:focus-visible { outline: 2px solid #90CAA0; outline-offset: 2px; border-radius: 4px; }
/* Kill the Elementor kit's blue <button> fill (base #5581A2 + hover #3C617D) on
   the questions — the kit selector (.elementor-kit-NN button) is stubborn, so
   force it off. */
.lk-faqs .lk-faq-q,
.lk-faqs .lk-faq-q:hover,
.lk-faqs .lk-faq-q:focus { background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; }
/* Hello Elementor's reset.css paints button:focus / button:hover white on pink; the
   button keeps focus after a click, so a closed question inherited the white. Ink stays. */
.lk-faqs .lk-faq-q:hover,
.lk-faqs .lk-faq-q:focus { color: #16303C; }

/* ---- Chevron: the same SVG as the search bar (Ink, "M6 9l6 6 6-6"); points
   down, flips up when the answer opens. ---- */
.lk-faq-icon {
	width: 16px; height: 16px; margin-top: 3px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316303C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
	background-size: 16px 16px;
	transition: transform .25s ease;
}
.lk-faq-item.is-open .lk-faq-icon { transform: rotate(180deg); }

/* ---- Answer: Work Sans 16px, Muted. The padding lives on .lk-faq-a-body (a
   child of the collapsing .lk-faq-a-inner) so overflow:hidden can clip it and the
   grid row truly collapses to 0 when closed — padding on .lk-faq-a-inner itself
   would keep the row ~26px tall (padding isn't clipped by overflow). ---- */
.lk-faq-a-body {
	font-family: "Work Sans", system-ui, sans-serif;
	font-size: 16px; line-height: 1.7; color: #5B6B73;
	padding: 0 48px 26px 0;
}
.lk-faq-a-body > :first-child { margin-top: 0; }
.lk-faq-a-body > :last-child { margin-bottom: 0; }
.lk-faq-a-body a { color: #5581A2; text-decoration: underline; }
.lk-faq-a-body a:hover { color: #3C617D; }

/* ---- Tablet/phone: the sidebar becomes a horizontal chip strip (laid out in
   the plugin); tidy the visuals here. ---- */
@media (max-width: 900px) {
	.lk-faqs-nav { background: none; padding: 0 0 4px; border-bottom: 1px solid #E3E8EA; }
	.lk-faqs-navlink { padding: 8px 0; border-bottom: 0; }
	.lk-faqs-navlink.is-active::after { content: none; }
}
@media (max-width: 767px) {
	.lk-faq-cat + .lk-faq-cat { margin-top: 44px; }
	.lk-faqs .lk-faq-q { padding: 18px 2px 18px 0; }
	.lk-faq-a-body { padding-right: 24px; }
}
/* Long questions wrap (the Elementor kit keeps buttons on one line, which widened the
   page); minmax(0) stops the scrolling category strip from widening the column. */
@media (max-width: 1024px) {
	.lk-faqs .lk-faq-q { white-space: normal; }
	.lk-faqs .lk-faq-q-text { min-width: 0; }
}
@media (max-width: 900px) {
	.lk-faqs { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   Results filters — Airbnb-style bar + popup. Stylesheet colours; icons
   in Corporate Blue. Markup: lk-booking-engine/parts/filters.php.
   ===================================================================== */
.lk-fbar {
	--lkf-blue:#5581A2; --lkf-blue-deep:#3C617D; --lkf-blue-tint:#E7EEF3;
	--lkf-ink:#16303C; --lkf-muted:#5B6B73; --lkf-line:#E3E8EA; --lkf-line-strong:#CBD6DB;
	--lkf-green:#90CAA0; --lkf-green-deep:#7CB891; --lkf-panel:#fff;
	display:flex; flex-wrap:wrap; gap:10px; align-items:center; width:100%;
}
.lk-fpop, .lk-fpop-backdrop, .lk-amf { --lkf-blue:#5581A2; --lkf-blue-deep:#3C617D; --lkf-blue-tint:#E7EEF3; --lkf-ink:#16303C; --lkf-muted:#5B6B73; --lkf-line:#E3E8EA; --lkf-line-strong:#CBD6DB; --lkf-green:#90CAA0; --lkf-green-deep:#7CB891; --lkf-panel:#fff; }

.lk-fi { width:20px; height:20px; stroke:var(--lkf-blue); stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.lk-fi-lg { width:24px; height:24px; }
.lk-fi-inline { width:16px; height:16px; }

/* Bar controls */
.lk-qf, .lk-chip, .lk-fbtn { display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px; border-radius:999px; font-family:"Work Sans",system-ui,sans-serif; font-size:14px; font-weight:500; line-height:1; cursor:pointer; background:var(--lkf-panel); color:var(--lkf-ink); border:1px solid var(--lkf-line-strong); transition:border-color .15s, background .15s, color .15s; }
.lk-qf:hover, .lk-chip:hover, .lk-fbtn:hover { border-color:var(--lkf-blue); }
.lk-qf.is-on { background:var(--lkf-blue-tint); border-color:var(--lkf-blue); color:var(--lkf-blue-deep); }
.lk-fbar .lk-chip.is-on { background:var(--lkf-blue-tint); border-color:var(--lkf-blue); color:var(--lkf-blue-deep); }
.lk-fbar .lk-chip.is-on .lk-fi { stroke:var(--lkf-blue-deep); }
.lk-qf-dollar { font-weight:700; color:var(--lkf-blue); }
.lk-fbar-spacer { flex:1 1 auto; min-width:6px; }
.lk-fbtn { border-width:1.5px; border-color:var(--lkf-ink); font-weight:600; height:44px; }
.lk-fbtn:hover { background:var(--lkf-ink); color:#fff; }
.lk-fbtn:hover .lk-fi { stroke:#fff; }
.lk-fbtn-badge { min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--lkf-blue); color:#fff; font-size:12px; font-weight:700; line-height:22px; text-align:center; }
/* "Clear all" link at the end of the bar (shown only when filters are active). */
.lk-fbar .lk-fbar-clear { align-self:center; margin-left:4px; background:none; border:0; color:var(--lkf-muted); font-family:"Work Sans",system-ui,sans-serif; font-size:13px; font-weight:600; text-decoration:underline !important; text-underline-offset:3px; cursor:pointer; white-space:nowrap; }
.lk-fbar .lk-fbar-clear:hover, .lk-fbar .lk-fbar-clear:focus { color:var(--lkf-blue-deep); }

/* "More…" overflow control for the bar amenity chips. */
.lk-fmore { position:relative; align-self:center; }
.lk-fbar .lk-fmore-btn { display:inline-flex; align-items:center; height:42px; padding:0 16px; border-radius:999px; border:1px solid var(--lkf-line-strong); background:var(--lkf-panel); color:var(--lkf-ink); font-family:"Work Sans",system-ui,sans-serif; font-size:14px; font-weight:500; line-height:1; cursor:pointer; white-space:nowrap; }
.lk-fbar .lk-fmore-btn:hover, .lk-fbar .lk-fmore-btn:focus { border-color:var(--lkf-blue); background:var(--lkf-panel); color:var(--lkf-ink); }
.lk-fmore-pop { position:absolute; top:calc(100% + 8px); left:0; z-index:5; display:flex; flex-direction:column; gap:8px; align-items:stretch; min-width:210px; max-height:60vh; overflow:auto; padding:12px; background:var(--lkf-panel); border:1px solid var(--lkf-line); border-radius:10px; box-shadow:0 10px 30px rgba(22,48,60,.18); }
/* display:flex above otherwise defeats the [hidden] attribute, so the menu could
   never close — re-assert hidden. */
.lk-fmore-pop[hidden] { display:none; }
.lk-fmore-pop .lk-chip { justify-content:flex-start; }
/* Lift the sticky bar above the map while the More menu is open. */
.lk-filters-row.lk-fmore-open { z-index:100002 !important; }

/* Mobile (< 1000px): keep only Filters + Clear all in the bar. */
@media (max-width: 999px) {
	.lk-fbar .lk-qf, .lk-fbar .lk-chip, .lk-fmore { display: none !important; }
	.lk-fbar .lk-fbar-clear { margin-left: auto; }
}

/* Phones and tablets: two lines, aligned on the cards.
   Line 1 = count + Clear all, currency on the right. Line 2 = Filters and Sort, same width.
   display:contents lets Filters and Clear all (inside the form) be placed in the row.
   ::before is the line break; each row-gap counts twice around it. */
@media (max-width: 999px) {
	.lk-filters-row { flex-wrap: wrap; gap: 5px 10px; padding-left: 0; padding-right: 0; }
	.lk-filters-row::before { content: ""; order: 3; flex: 0 0 100%; height: 0; }
	.lk-filters-row .lk-count { order: 1; }
	.lk-filters-row .lk-fbar { display: contents; }
	.lk-fbar .lk-fbar-spacer { display: none; }
	.lk-fbar .lk-fbar-clear { order: 2; margin-left: 0; }
	.lk-filters-row .lkbe-currency-slot-toolbar,
	.lk-filters-row .lk-sort-tb + .lkbe-currency-slot-toolbar { order: 2; margin-left: auto; }
	.lk-fbar .lk-fbtn { order: 4; flex: 1 1 40%; min-width: 0; box-sizing: border-box; justify-content: center; }
	.lk-filters-row .lk-sort-tb { order: 5; flex: 1 1 40%; min-width: 0; margin-left: 0; }
	.lk-sort-tb-lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.lk-sort-tb-select { width: 100%; min-width: 0; height: 42px; text-overflow: ellipsis; }
}

/* Phones: the search mode tabs fill the width; a long label (AI, translated) wraps. */
@media (max-width: 767px) {
	.lk-search-tabs { display: flex; width: 100%; box-sizing: border-box; }
	.lk-search-tabs .lk-tab { flex: 1 1 auto; min-width: 0; padding: 6px 8px; white-space: normal; line-height: 1.15; justify-content: center; text-align: center; font-size: .82rem; }
}

/* Popup shell */
/* z-index above the results map column, which the child theme fixes at 9999. */
.lk-fpop-backdrop { position:fixed; inset:0; background:rgba(22,48,60,.5); z-index:100000; opacity:0; pointer-events:none; transition:opacity .24s ease; }
.lk-fpop-backdrop.is-open { opacity:1; pointer-events:auto; }
body.lk-fpop-open { overflow:hidden; }
/* The results filter bar row is sticky (z:30), which traps the fixed popup below
   the backdrop. While the popup is open, lift the row above the backdrop so the
   popup (inside it) paints on top. */
/* !important beats the "map desktop" layout rule that pins this row at z:30. */
.lk-filters-row.lk-filters-active { z-index:100002 !important; }
.lk-fpop { position:fixed; z-index:100001; left:50%; top:50%; transform:translate(-50%,-47%); width:min(720px,calc(100vw - 28px)); max-height:min(88vh,860px); background:var(--lkf-panel); border:1px solid var(--lkf-line); border-radius:16px; box-shadow:0 16px 50px rgba(22,48,60,.22); display:flex; flex-direction:column; overflow:hidden; opacity:0; transition:opacity .24s ease, transform .24s ease; }
.lk-fpop.is-open { opacity:1; transform:translate(-50%,-50%); }
/* .lk-fpop's display:flex (0,1,0) otherwise defeats the [hidden] attribute, so a
   closed popup stays at opacity:0 and keeps capturing clicks. Re-assert hidden
   (0,2,0) and drop pointer events whenever it is not open. */
.lk-fpop[hidden] { display:none; }
.lk-fpop:not(.is-open) { pointer-events:none; }
.lk-fpop-head { position:relative; display:flex; align-items:center; justify-content:center; padding:16px 20px; border-bottom:1px solid var(--lkf-line); }
.lk-fpop-head h2 { font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:19px; line-height:1.2; color:var(--lkf-ink); margin:0; }
.lk-fpop-close { position:absolute; right:14px; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:999px; border:1px solid var(--lkf-line); background:var(--lkf-panel); display:grid; place-items:center; cursor:pointer; }
.lk-fpop-close:hover { background:var(--lkf-blue-tint); }
.lk-fpop-close .lk-fi { stroke:var(--lkf-muted); }
.lk-fpop-body { overflow-y:auto; padding:4px 24px; }
.lk-fsec { padding:20px 0; border-bottom:1px solid var(--lkf-line); }
.lk-fsec:last-child { border-bottom:0; }
.lk-fsec h3 { font-family:"Playfair Display",Georgia,serif; font-weight:600; font-size:16px; line-height:1.3; color:var(--lkf-ink); margin:0 0 12px; }
.lk-fgrp-lab { font-family:"Work Sans",sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--lkf-muted); margin:16px 0 10px; }

/* Property type cards */
.lk-ftypes { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.lk-fopt { display:flex; flex-direction:column; gap:8px; align-items:flex-start; padding:12px; border:1px solid var(--lkf-line-strong); border-radius:10px; background:var(--lkf-panel); cursor:pointer; transition:.15s; }
.lk-fopt:hover { border-color:var(--lkf-blue); }
.lk-fopt.is-on { border-color:var(--lkf-blue); background:var(--lkf-blue-tint); box-shadow:inset 0 0 0 1px var(--lkf-blue); }
.lk-fopt-t { font-family:"Work Sans",sans-serif; font-weight:600; font-size:20px; line-height:1.2; color:var(--lkf-ink); }
/* Type options no longer carry an icon → drop the icon/text gap and center the label. */
.lk-ftypes-noicon .lk-fopt { flex-direction:row; align-items:center; gap:0; }

/* Segmented pills */
.lk-frow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; }
.lk-frow-lab { font-family:"Work Sans",sans-serif; font-weight:500; font-size:14.5px; color:var(--lkf-ink); }
.lk-fseg { display:inline-flex; gap:6px; flex-wrap:wrap; }
.lk-fseg-wrap { display:flex; }
.lk-fpill { min-width:42px; height:38px; padding:0 14px; border:1px solid var(--lkf-line-strong); background:var(--lkf-panel); color:var(--lkf-ink); border-radius:999px; font-family:"Work Sans",sans-serif; font-weight:500; font-size:13.5px; line-height:1; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:.15s; }
.lk-fpill:hover { border-color:var(--lkf-blue); }
.lk-fpill.is-on { background:var(--lkf-blue); border-color:var(--lkf-blue); color:#fff; }
.lk-fpill .lk-fi { stroke:var(--lkf-blue); }
.lk-fpill.is-on .lk-fi { stroke:#fff; }

/* Price slider */
.lk-fprice-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; }
.lk-fprice-head h3 { margin:0; }
.lk-fprice-rng { font-family:"Work Sans",sans-serif; font-weight:600; font-size:15px; color:var(--lkf-ink); }
.lk-fhisto { display:flex; align-items:flex-end; gap:2px; height:48px; margin:2px 8px 0; }
.lk-fhisto i { flex:1; min-width:2px; background:#E9EFF2; border-radius:2px 2px 0 0; transition:background .12s ease; }
.lk-fhisto i.act { background:var(--lkf-blue); }
.lk-fslider { position:relative; height:34px; margin:6px 10px 0; }
.lk-fslider-track { position:absolute; top:50%; left:0; right:0; height:4px; transform:translateY(-50%); background:var(--lkf-line-strong); border-radius:999px; }
.lk-fslider-fill { position:absolute; height:100%; background:var(--lkf-blue); border-radius:999px; }
.lk-fslider-range { position:absolute; top:0; left:0; width:100%; height:34px; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none; }
.lk-fslider-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:1.5px solid var(--lkf-blue); box-shadow:0 1px 3px rgba(22,48,60,.2); cursor:pointer; pointer-events:auto; }
.lk-fslider-range::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:#fff; border:1.5px solid var(--lkf-blue); box-shadow:0 1px 3px rgba(22,48,60,.2); cursor:pointer; pointer-events:auto; }
.lk-fslider-range::-webkit-slider-runnable-track { background:none; border:0; }
.lk-fslider-range::-moz-range-track { background:none; border:0; }
.lk-fprice-io { display:flex; gap:12px; margin-top:16px; }
.lk-ffield { flex:1; border:1px solid var(--lkf-line-strong); border-radius:10px; padding:8px 12px; }
.lk-ffield span { display:block; font-family:"Work Sans",sans-serif; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--lkf-muted); margin-bottom:3px; }
.lk-ffield b { display:flex; align-items:center; font-family:"Work Sans",sans-serif; font-weight:600; font-size:15px; color:var(--lkf-ink); }
.lk-ffield input { border:0; outline:0; background:none; font:inherit; color:var(--lkf-ink); width:100%; min-width:0; }
/* Hide the number-input spinners so the price fields read like the mockup ($300). */
.lk-ffield input[type=number] { -moz-appearance:textfield; appearance:textfield; }
.lk-ffield input[type=number]::-webkit-outer-spin-button, .lk-ffield input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
/* Tight "$300" look like the mockup: value flush to the $, solid (not a faded
   placeholder). */
.lk-ffield b { gap:2px; }
.lk-ffield input { padding:0; margin:0; }
.lk-ffield input::placeholder { color:var(--lkf-ink); opacity:1; }
/* The kit + a base reset give every text input a border; kill it on the price
   fields only (the .lk-ffield box already provides the border). !important because
   a later-loaded `input[type=number]{border:1px solid}` reset otherwise wins. */
.lk-ffield input[name="min_price"], .lk-ffield input[name="max_price"] { border: 0 !important; }

/* Search input */
.lk-finp { display:flex; align-items:center; gap:10px; border:1px solid var(--lkf-line-strong); border-radius:999px; padding:0 16px; height:46px; }
.lk-finp:focus-within { border-color:var(--lkf-blue); box-shadow:0 0 0 2px var(--lkf-blue-tint); }
.lk-finp .lk-fi { stroke:var(--lkf-muted); }
.lk-finp input { border:0; outline:0; background:none; font-family:"Work Sans",sans-serif; font-size:14.5px; color:var(--lkf-ink); width:100%; }

/* Amenities */
.lk-famgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.lk-fam { display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid var(--lkf-line-strong); border-radius:999px; background:var(--lkf-panel); font-family:"Work Sans",sans-serif; font-weight:500; font-size:13.5px; line-height:1.2; color:var(--lkf-ink); cursor:pointer; transition:.15s; }
.lk-fam:hover { border-color:var(--lkf-blue); }
.lk-fam.is-on { background:var(--lkf-blue-tint); border-color:var(--lkf-blue); color:var(--lkf-blue-deep); }
.lk-fam-ck { margin-left:auto; width:18px; height:18px; border-radius:5px; border:1.5px solid var(--lkf-line-strong); display:grid; place-items:center; flex:0 0 auto; }
.lk-fam.is-on .lk-fam-ck { background:var(--lkf-blue); border-color:var(--lkf-blue); }
.lk-fi-ck { width:12px; height:12px; stroke:#fff; stroke-width:2.4; fill:none; opacity:0; }
.lk-fam.is-on .lk-fi-ck { opacity:1; }

/* Footer */
.lk-fpop-foot { display:flex; align-items:center; justify-content:space-between; padding:14px 24px; border-top:1px solid var(--lkf-line); background:var(--lkf-panel); }
.lk-fclear { background:none; border:0; color:var(--lkf-ink); font-family:"Work Sans",sans-serif; font-weight:600; font-size:14px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.lk-fclear:hover { color:var(--lkf-blue-deep); }
.lk-fshow { height:48px; padding:0 26px; border:0; border-radius:999px; background:var(--lkf-green); color:#16303C; font-family:"Work Sans",sans-serif; font-weight:700; font-size:15px; cursor:pointer; transition:.15s; }
.lk-fshow:hover { background:var(--lkf-green-deep); }
.lk-fshow.is-loading { opacity:.7; pointer-events:none; }

@media (max-width: 640px) {
	.lk-ftypes { grid-template-columns:repeat(2,1fr); }
	.lk-famgrid { grid-template-columns:1fr; }
	.lk-fpop-body { padding-left:16px; padding-right:16px; }
	.lk-fpop-foot { padding-left:16px; padding-right:16px; }
	.lk-frow { flex-direction:column; align-items:flex-start; gap:8px; }
}
@media (prefers-reduced-motion: reduce) {
	.lk-fpop, .lk-fpop-backdrop { transition:none; }
}

/* The Elementor kit styles every <button> (blue fill, 10px radius) at (0,1,1);
   re-assert our button-based controls under the .lk-fbar scope (0,2,0) so they
   match the labels and the approved mockup. */
.lk-fbar .lk-qf, .lk-fbar .lk-fbtn, .lk-fbar .lk-fpill, .lk-fbar .lk-fshow, .lk-fbar .lk-fpop-close { border-radius:999px; letter-spacing:normal; text-transform:none; }
/* The kit also forces button typography (600/15px); unify the bar controls so the
   quick openers match the popular chips (Work Sans 14px/500), Filters a touch bolder. */
.lk-fbar .lk-qf, .lk-fbar .lk-fbtn, .lk-fbar .lk-chip { font-family:"Work Sans",system-ui,sans-serif !important; font-size:14px !important; font-weight:500 !important; height:42px; line-height:1; }
.lk-fbar .lk-fbtn { font-weight:600 !important; }
/* Popup content: the kit hits the <button> pills / show button, and the theme
   strips the "Clear all" underline + shrinks the amenity labels — restore mockup type. */
.lk-fpop .lk-fpill { font-family:"Work Sans",system-ui,sans-serif !important; font-size:13.5px !important; font-weight:500 !important; }
.lk-fpop .lk-fam { font-size:13.5px !important; font-weight:500 !important; }
.lk-fpop .lk-fshow { font-weight:700 !important; }
.lk-fpop .lk-fclear { text-decoration:underline !important; text-underline-offset:3px; }

/* Hover states — the generic :hover would reset a SELECTED (blue) control back to
   white; keep selected controls selected (darken for feedback). Plus a keyboard
   focus ring (design standards). */
.lk-fbar .lk-fpill.is-on:hover { background:var(--lkf-blue-deep); border-color:var(--lkf-blue-deep); color:#fff; }
.lk-fbar .lk-qf.is-on:hover { background:var(--lkf-blue-tint); border-color:var(--lkf-blue); color:var(--lkf-blue-deep); }
.lk-fbar .lk-chip.is-on:hover { background:var(--lkf-blue-tint); border-color:var(--lkf-blue); color:var(--lkf-blue-deep); }
.lk-fbar .lk-chip.is-on:hover .lk-fi { stroke:var(--lkf-blue-deep); }
.lk-fbar .lk-qf:focus-visible, .lk-fbar .lk-fbtn:focus-visible, .lk-fbar .lk-fpill:focus-visible, .lk-fbar .lk-fshow:focus-visible, .lk-fbar .lk-fpop-close:focus-visible, .lk-fbar .lk-fam:focus-visible, .lk-fbar .lk-fopt:focus-visible, .lk-fbar .lk-chip:focus-visible, .lk-fbar .lk-fclear:focus-visible { outline:2px solid var(--lkf-blue); outline-offset:2px; }
.lk-fbar .lk-finp:focus-within { outline:2px solid var(--lkf-blue); outline-offset:2px; }

/* The kit's button:hover/:focus forces color:#fff — set the text colour EXPLICITLY
   on every hovered/focused control (quick openers & pills would otherwise show
   white text on a white ground; the Show button white on pale green). */
.lk-fbar .lk-qf:hover, .lk-fbar .lk-qf:focus { background:var(--lkf-panel); color:var(--lkf-ink); border-color:var(--lkf-blue); }
.lk-fbar .lk-qf.is-on:hover, .lk-fbar .lk-qf.is-on:focus { background:var(--lkf-blue-tint); color:var(--lkf-blue-deep); border-color:var(--lkf-blue); }
.lk-fbar .lk-fbtn:hover, .lk-fbar .lk-fbtn:focus { background:var(--lkf-ink); color:#fff; border-color:var(--lkf-ink); }
.lk-fbar .lk-fbtn:hover .lk-fi, .lk-fbar .lk-fbtn:focus .lk-fi { stroke:#fff; }
.lk-fbar .lk-fpill:hover, .lk-fbar .lk-fpill:focus { background:var(--lkf-panel); color:var(--lkf-ink); border-color:var(--lkf-blue); }
.lk-fbar .lk-fpill.is-on:hover, .lk-fbar .lk-fpill.is-on:focus { background:var(--lkf-blue-deep); color:#fff; border-color:var(--lkf-blue-deep); }
.lk-fbar .lk-fshow:hover, .lk-fbar .lk-fshow:focus { background:var(--lkf-green-deep); color:#16303C; }
.lk-fbar .lk-fpop-close:hover, .lk-fbar .lk-fpop-close:focus { background:var(--lkf-blue-tint); color:var(--lkf-ink); }
.lk-fbar .lk-fclear:hover, .lk-fbar .lk-fclear:focus { color:var(--lkf-blue-deep); }
.lk-fbar .lk-fpill:hover { color: #000 !important; }
.lk-fbar .lk-fpill.is-on:hover { color: #fff !important; } /* keep selected pill legible on its blue ground */
.lk-fbar .lk-qf { background:var(--lkf-panel); color:var(--lkf-ink); border:1px solid var(--lkf-line-strong); padding:0 16px; }
.lk-fbar .lk-qf:hover { background:var(--lkf-panel); border-color:var(--lkf-blue); }
.lk-fbar .lk-qf.is-on { background:var(--lkf-blue-tint); color:var(--lkf-blue-deep); border-color:var(--lkf-blue); }
.lk-fbar .lk-fbtn { background:var(--lkf-panel); color:var(--lkf-ink); border:1.5px solid var(--lkf-ink); padding:0 20px; }
.lk-fbar .lk-fbtn:hover { background:var(--lkf-ink); color:#fff; }
.lk-fbar .lk-fbtn:hover .lk-fi { stroke:#fff; }
.lk-fbar .lk-fpill { background:var(--lkf-panel); color:var(--lkf-ink); border:1px solid var(--lkf-line-strong); padding:0 14px; }
.lk-fbar .lk-fpill:hover { background:var(--lkf-panel); border-color:var(--lkf-blue); }
.lk-fbar .lk-fpill.is-on { background:var(--lkf-blue); color:#fff; border-color:var(--lkf-blue); }
.lk-fbar .lk-fpill.is-on .lk-fi { stroke:#fff; }
.lk-fbar .lk-fpop-close { background:var(--lkf-panel); color:var(--lkf-ink); border:1px solid var(--lkf-line); padding:0; }
.lk-fbar .lk-fpop-close:hover { background:var(--lkf-blue-tint); }
.lk-fbar .lk-fshow { background:var(--lkf-green); color:#16303C; border:0; padding:0 26px; }
.lk-fbar .lk-fshow:hover { background:var(--lkf-green-deep); }

/* ============================================================================
   Checkout — "Booking request" 3-step flow + sticky summary (Airbnb-inspired).
   Brand palette (design standards): Corporate Blue #5581A2, Ink #16303C,
   Muted #5B6B73, Line #E3E8EA. Layout ships in the plugin (.lk-step / .lk-term…);
   all visual style is here. Scoped under .lk-checkout so nothing else is touched.
   ========================================================================== */
.lk-checkout { --lkc-blue:#5581A2; --lkc-blue-deep:#3C617D; --lkc-ink:#16303C; --lkc-muted:#5B6B73; --lkc-line:#E3E8EA; --lkc-tint:#E7EEF3; }
/* Titles like the single page: Playfair 28px, weight 400. !important beats the
   Elementor kit (h1 56px / h2 34px-600). */
.lk-checkout-heading { font-family:"Playfair Display", Georgia, serif; font-weight:400 !important; color:var(--lkc-ink); font-size:28px !important; margin:4px 0 22px; }

/* Back link matches the single page (.lk-back base style — uppercase muted text
   link with a ← arrow), so no checkout-specific override here. */

/* Step cards. */
.lk-step { border:1px solid #ddd; border-radius:4px; background:#fff; padding:30px; }
.lk-step-badge { background:var(--lkc-line); color:var(--lkc-muted); font-weight:600; font-size:.9rem; }
.lk-step.is-open .lk-step-badge { background:var(--lkc-blue); color:#fff; }
.lk-step.is-collapsed .lk-step-badge, .lk-step.is-done-open .lk-step-badge { background:var(--lkc-ink); color:#fff; }
.lk-step-title { font-family:"Playfair Display", Georgia, serif; font-weight:400 !important; font-size:28px !important; color:var(--lkc-ink); }
.lk-step:not(.is-open):not(.is-collapsed):not(.is-done-open) .lk-step-title { color:var(--lkc-muted); }
/* Edit = plain text link (override Elementor's global button skin). */
.lk-checkout .lk-step-edit { background:none !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; color:var(--lkc-blue); font-weight:600; font-size:.9rem; text-decoration:underline; padding:4px 6px; min-height:0; }
.lk-checkout .lk-step-edit:hover { background:none !important; color:var(--lkc-blue-deep); }
.lk-step-summary { color:var(--lkc-muted); font-size:.95rem; padding-left:36px; }

/* Step 1 — payment-term options as selectable cards (radio on the right). */
.lk-term { border:1px solid var(--lkc-line); border-radius:12px; transition:border-color .15s ease, background .15s ease; }
.lk-term:hover { border-color:#C4D2DC; }
.lk-term:has(input:checked) { border-color:var(--lkc-blue); background:var(--lkc-tint); }
.lk-term input { width:20px; height:20px; accent-color:var(--lkc-blue); }
.lk-term-main { color:var(--lkc-ink); font-weight:400; font-size:16px; }
.lk-term-sub { color:var(--lkc-muted); font-size:.88rem; }
/* Klarna brand badge (pink #FFB3C7 / near-black), on the "Pay in 4" option. */
.lk-checkout .lk-klarna-badge { flex:0 0 auto; align-self:center; background:#FFB3C7; color:#0A0B09; font-weight:700; font-size:.78rem; line-height:1; padding:5px 9px; border-radius:5px; letter-spacing:.01em; }

/* Fieldsets / legends inside the steps. */
.lk-checkout .lk-fieldset legend { font-weight:600; color:var(--lkc-ink); font-size:1rem; }
.lk-checkout .lk-pay-fields-title { font-weight:600; color:var(--lkc-ink); }
.lk-checkout .lk-klarna-note { color:var(--lkc-muted); font-size:.88rem; margin:12px 0 0; }
.lk-checkout .lk-checkout-terms { color:var(--lkc-ink); font-size:.95rem; }
.lk-checkout .lk-checkout-terms input { accent-color:var(--lkc-blue); margin-top:2px; }

/* Buttons — stylesheet primary: Corporate Blue pill (999px), white, hover deep.
   Forced with !important so Elementor's global button skin can't repaint them.
   Next = inline auto-width pill; Confirm and pay = full-width pill. */
.lk-checkout .lk-btn-next { display:inline-block !important; width:auto !important; background:var(--lkc-blue) !important; color:#fff !important; border:0 !important; border-radius:999px !important; box-shadow:none !important; font-weight:600; letter-spacing:0; text-transform:none; padding:13px 36px !important; }
.lk-checkout .lk-btn-next:hover { background:var(--lkc-blue-deep) !important; }
.lk-checkout .lk-btn-book { display:block !important; width:100% !important; background:var(--lkc-blue) !important; color:#fff !important; border:0 !important; border-radius:999px !important; box-shadow:none !important; font-weight:600; letter-spacing:0; text-transform:none; padding:15px 24px !important; margin-top:16px; }
.lk-checkout .lk-btn-book:hover { background:var(--lkc-blue-deep) !important; }
.lk-checkout .lk-btn-book:disabled { background:#B7C2C7 !important; cursor:not-allowed; }
.lk-checkout .lk-pay-msg.is-error { color:#D45B5B; }

/* Right: sticky reservation summary card. */
.lk-checkout-summary { border:1px solid #ddd; border-radius:4px; background:#fff; padding:30px; }
.lk-checkout-prop { padding-bottom:16px; border-bottom:1px solid var(--lkc-line); }
.lk-checkout-prop-media img { border-radius:10px; }
.lk-checkout-prop-name { font-weight:600; color:var(--lkc-ink); }
.lk-checkout-prop-rating { color:var(--lkc-ink); font-size:.92rem; }
.lk-checkout-prop-rating .lk-checkout-star { color:var(--lkc-ink); }
.lk-checkout-prop-rating .lk-checkout-rating-count { color:var(--lkc-muted); }
.lk-checkout-prop-specs { color:var(--lkc-muted); font-size:.9rem; }
.lk-checkout-trip { padding:16px 0; border-bottom:1px solid var(--lkc-line); }
.lk-checkout-trip dt { font-weight:600; color:var(--lkc-ink); font-size:.92rem; }
.lk-checkout-trip dd { color:var(--lkc-muted); font-size:.92rem; }
.lk-trip-edit { color:var(--lkc-blue); font-weight:600; font-size:.88rem; text-decoration:underline; }
.lk-trip-edit:hover { color:var(--lkc-blue-deep); }
.lk-checkout-summary .lk-price-breakdown { padding-top:16px; }
.lk-checkout-summary .lk-line-total { border-top:1px solid var(--lkc-line); color:var(--lkc-ink); }
.lk-checkout-summary .lk-line-discount span:last-child { color:#2E7D57; }

/* Promo / coupon code field. */
.lk-coupon { margin:14px 0 2px; }
.lk-coupon-row { display:flex; gap:8px; }
.lk-coupon-input { flex:1 1 auto; min-width:0; height:44px; padding:0 16px; border:1px solid var(--lkc-line); border-radius:999px; background:#fff; color:var(--lkc-ink); font-family:"Work Sans", system-ui, sans-serif; font-size:.95rem; }
.lk-coupon-input:focus { outline:none; border-color:var(--lkc-blue); box-shadow:0 0 0 2px rgba(85,129,162,.2); }
.lk-coupon-apply { flex:0 0 auto; display:inline-flex !important; align-items:center; height:44px !important; padding:0 20px !important; border-radius:999px !important; border:1px solid var(--lkc-blue) !important; background:#fff !important; color:var(--lkc-blue) !important; font-family:"Work Sans", system-ui, sans-serif !important; font-weight:600 !important; font-size:.92rem !important; line-height:1 !important; text-transform:none !important; letter-spacing:0 !important; box-shadow:none !important; cursor:pointer; }
.lk-coupon-apply:hover { background:var(--lkc-blue) !important; color:#fff !important; }
.lk-coupon-msg { margin:8px 2px 0; font-size:.85rem; line-height:1.4; }
.lk-coupon-msg.is-ok { color:#2E7D57; }
.lk-coupon-msg.is-err { color:#C0453B; }

/* Passwordless login popup (email OTP). */
.lk-auth-modal { position:fixed; inset:0; z-index:100050; display:flex; align-items:center; justify-content:center; padding:20px; }
.lk-auth-backdrop { position:absolute; inset:0; background:rgba(16,42,56,.55); }
.lk-auth-dialog { position:relative; z-index:1; background:#fff; border-radius:12px; padding:28px 28px 24px; width:min(420px,100%); box-shadow:0 20px 60px rgba(16,42,56,.3); }
.lk-auth-x { position:absolute; top:10px; right:12px; background:none !important; border:0 !important; box-shadow:none !important; font-size:1.6rem; line-height:1; color:#5B6B73; cursor:pointer; padding:4px 8px; }
.lk-auth-x:hover { color:#16303C; }
.lk-auth-title { font-family:"Playfair Display", Georgia, serif; font-weight:400 !important; font-size:24px !important; color:#16303C; margin:0 0 6px; }
.lk-auth-lead { color:#5B6B73; margin:0 0 16px; }
.lk-auth-modal .lk-field { margin-bottom:14px; }
.lk-auth-resend { display:inline-block; margin-top:12px; background:none !important; border:0 !important; box-shadow:none !important; color:#5581A2; text-decoration:underline; cursor:pointer; padding:4px; }
.lk-auth-resend:hover { color:#3C617D; }
.lk-auth-msg { color:#D45B5B; font-size:.9rem; min-height:1em; margin:10px 0 0; }

/* Rental terms & cancellation policy — inline link + scrollable popup (reuses the
   auth backdrop/close). Link forced past Elementor's global button skin. */
.lk-checkout .lk-terms-link { background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0; font:inherit; color:#5581A2; text-decoration:underline; cursor:pointer; }
.lk-checkout .lk-terms-link:hover { color:#3C617D; }
.lk-terms-modal { position:fixed; inset:0; z-index:100060; display:flex; align-items:center; justify-content:center; padding:20px; }
.lk-terms-dialog { position:relative; z-index:1; background:#fff; border-radius:12px; padding:28px 30px 24px; width:min(680px,100%); max-height:82vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(16,42,56,.3); }
.lk-terms-title { font-family:"Playfair Display", Georgia, serif; font-weight:400 !important; font-size:24px !important; color:#16303C; margin:0 30px 14px 0; }
.lk-terms-body { overflow-y:auto; color:#16303C; font-size:.95rem; line-height:1.6; }
.lk-terms-body h1, .lk-terms-body h2, .lk-terms-body h3, .lk-terms-body h4 { color:#16303C; }
.lk-terms-body a { color:#5581A2; }

/* ============================================================================
   Confirmation page — 2 columns (confirmation left, balance/manage right),
   same look as the checkout. Brand palette; layout ships in the plugin.
   ========================================================================== */
.lk-confirmation-title { font-family:"Playfair Display", Georgia, serif; font-weight:400 !important; font-size:28px !important; color:#16303C; margin:0; }
.lk-confirmation-head { margin:0 0 20px; }
.lk-confirmation-ref { color:#5B6B73; margin:8px 0 0; }
.lk-confirmation-ref strong { color:#16303C; }
.lk-status-badge { display:inline-block; padding:5px 12px; border-radius:999px; font-size:.85rem; font-weight:600; }
/* Status badges use the Design Standards "Status" palette: Success #43A66F,
   Warning #E0A43A, Error #D45B5B. Deposit stays Corporate Blue (informational). */
.lk-status-badge.lk-status-paid { background:#E2F1E6; color:#43A66F; }
.lk-status-badge.lk-status-deposit { background:#E7EEF3; color:#5581A2; }
.lk-status-badge.lk-status-processing { background:#FBF0D9; color:#E0A43A; }
.lk-status-badge.lk-status-cancelled { background:#FBE9E9; color:#D45B5B; }
/* Cards match the checkout summary (border #ddd, radius 4px, padding 30px). */
.lk-confirmation-card, .lk-confirmation .lk-manage { border:1px solid #ddd; border-radius:4px; padding:30px; background:#fff; }
/* The balance payment form lives in the LEFT column, inside the confirmation card,
   under the price summary → a separated subsection (top border), not a nested card. */
.lk-confirmation .lk-balance { border:0; border-radius:0; background:transparent; margin:22px 0 0; padding:22px 0 0; border-top:1px solid #E3E8EA; }
.lk-confirmation .lk-balance-title { font-size:28px !important; margin:0 0 12px; }
.lk-confirmation-media img { border-radius:6px; width:100%; max-height:280px; object-fit:cover; }
/* Clickable photo → opens the gallery viewer. Reset Elementor's button skin, add a
   subtle zoom-in affordance. */
.lk-confirmation .lk-confirmation-media-btn { position:relative; display:block; width:100%; padding:0 !important; margin:0; border:0 !important; background:none !important; box-shadow:none !important; border-radius:6px; overflow:hidden; cursor:zoom-in; }
.lk-confirmation .lk-confirmation-media-btn img { display:block; margin:0; transition:transform .3s ease; }
.lk-confirmation .lk-confirmation-media-btn:hover img { transform:scale(1.03); }
/* "View photos" hint badge in the corner of the clickable photo. */
.lk-conf-photo-badge { position:absolute; right:10px; bottom:10px; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:rgba(22,48,60,.78); color:#fff; font-size:.8rem; font-weight:600; line-height:1; pointer-events:none; transition:background .2s ease; }
.lk-conf-photo-badge svg { width:15px; height:15px; flex:0 0 auto; }
.lk-confirmation .lk-confirmation-media-btn:hover .lk-conf-photo-badge { background:rgba(22,48,60,.92); }
@media (prefers-reduced-motion: reduce) {
	.lk-confirmation .lk-confirmation-media-btn img { transition:none; }
	.lk-confirmation .lk-confirmation-media-btn:hover img { transform:none; }
}
.lk-confirmation-prop { font-weight:600; color:#16303C; margin:0 0 6px; }
.lk-conf-row dt { color:#5B6B73; }
.lk-conf-row dd { color:#16303C; font-weight:600; }
.lk-confirmation-payment { border-top:1px solid #E3E8EA; margin-top:14px !important; padding-top:12px; }
.lk-confirmation-note { color:#5B6B73; font-size:.9rem; margin-top:16px; }
/* Initial reservation payment date(s) under the Total/Paid/Balance block. */
.lk-conf-paydates { margin:6px 0 0; }
.lk-conf-paydate { color:#5B6B73; font-size:.82rem; margin:2px 0 0; }
/* Confirmation-panel titles at 28px / weight 400 (client 2026-09-11):
   Manage your reservation, Add services to your stay, Pay your balance, Contact us. */
.lk-balance-title, .lk-manage-title, .lk-addopts-title { font-family:"Playfair Display", Georgia, serif; font-weight:400 !important; font-size:28px !important; color:#16303C; margin:0 0 12px; }
/* Cancellation policy as a subtle Warning callout (ink text stays legible; amber
   accent = Warning #E0A43A from the Design Standards). */
.lk-manage-policy { color:#16303C; background:#FBF0D9; border-left:3px solid #E0A43A; padding:10px 14px; border-radius:4px; font-size:.9rem; margin:0 0 4px; }
#lk-manage .lk-manage-policy { margin-bottom:45px; }
.lk-confirmation .lk-field > span { color:#5B6B73; }
/* "Confirmed additional services" (paid extras): no bullets, 15px indent, item
   left / price right, a separator before the right-aligned total. */
.lk-addopts-purchased { margin:16px 0 0; }
.lk-addopts-purchased-title { font-family:"Playfair Display", Georgia, serif; font-weight:600 !important; font-size:1.05rem !important; color:#16303C; margin:0 0 8px; }
.lk-addopts-payment + .lk-addopts-payment { margin-top:10px; padding-top:10px; border-top:1px dashed #E3E8EA; }
.lk-addopts-paid-date { color:#5B6B73; font-size:.82rem; margin:0 0 4px; }
.lk-addopts-paid { list-style:none; margin:0; padding:0; }
.lk-addopts-paid-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:4px 0; color:#16303C; }
.lk-addopts-paid-name { text-align:left; }
.lk-addopts-paid-amt { text-align:right; white-space:nowrap; }
.lk-addopts-paid-total { border-top:1px solid #E3E8EA; margin:8px 0 0; padding:8px 0 0; text-align:right; }
/* Pay-step cost breakdown (approve the amount incl. taxes/fees before paying). */
.lk-extras-summary { margin:0 0 14px; padding-top: 20px; }
.lk-extras-sum-list { list-style:none; margin:0; padding:0; }
.lk-extras-sum-row { display:flex; justify-content:space-between; gap:12px; padding:4px 0; color:#16303C; font-size:.92rem; }
.lk-extras-sum-row.is-taxfee { color:#5B6B73; }
.lk-extras-sum-total { display:flex; justify-content:space-between; gap:12px; border-top:1px solid #E3E8EA; margin:6px 0 0; padding:8px 0 0; font-weight:700; color:#16303C; }
/* "Cancel" — a quiet text link under the total (past Elementor's button skin, which
   otherwise repaints it white-on-white). Needs !important on colour + background. */
.lk-confirmation .lk-extras-cancel,
.lk-extras-cancel { display:block; width:100%; background:none !important; border:0 !important; box-shadow:none !important; padding:6px 0 2px !important; margin:0; color:#5581A2 !important; font-weight:600; font-size:.9rem; text-decoration:underline; cursor:pointer; text-align:right; }
.lk-confirmation .lk-extras-cancel:hover,
.lk-extras-cancel:hover { background:none !important; color:#3C617D !important; }
/* Buttons respect the stylesheet (Corporate Blue pill), past Elementor's skin. */
.lk-confirmation .lk-btn-book { display:block; width:100%; background:#5581A2 !important; color:#fff !important; border:0 !important; border-radius:999px !important; box-shadow:none !important; font-weight:600; padding:14px 24px !important; }
.lk-confirmation .lk-btn-book:hover { background:#3C617D !important; }
.lk-confirmation .lk-btn-book:disabled { background:#B7C2C7 !important; cursor:not-allowed; }
/* "View detail" toggle (text link, past Elementor's button skin) + breakdown. */
.lk-confirmation .lk-conf-detail-toggle { background:none !important; border:0 !important; box-shadow:none !important; padding:6px 0 !important; margin:6px 0 0; color:#5581A2; font-weight:600; font-size:.9rem; text-decoration:underline; cursor:pointer; }
.lk-confirmation .lk-conf-detail-toggle:hover { background:none !important; color:#3C617D; }
.lk-conf-breakdown { margin:8px 0 0; padding:12px 0 0; border-top:1px dashed #E3E8EA; }
.lk-conf-breakdown .lk-line { display:flex; justify-content:space-between; gap:12px; padding:4px 0; font-size:.92rem; color:#16303C; }
.lk-conf-breakdown .lk-line-total { border-top:1px solid #E3E8EA; margin-top:4px; padding-top:8px; font-weight:700; }
.lk-conf-breakdown .lk-price-hint { color:#5B6B73; font-size:.9rem; }

/* ============================================================================
   Destinations (CPT) — VISUALS (layout lives in the plugin's lk.css).
   ========================================================================== */
.lk-destination, .lk-destinations { color:#16303C; }
/* Back link (single) + "Explore →" (cards): Corporate Blue, no underline. */
.lk-dest-back { color:#5581A2; text-decoration:none; font-size:.9rem; font-weight:600; }
.lk-dest-back:hover { color:#3C617D; text-decoration:underline; }
/* Single destination H1 — its own row at the top of the page. */
.lk-dest-title { margin:0 0 26px; }
/* Intro — photo (left) and a separate gray text box (right). */
.lk-dest-intro__media { border-radius:20px; overflow:hidden; box-shadow:0 6px 22px rgba(22,48,60,.08); }
.lk-dest-intro__body { background:#EEF2F4; border:1px solid #E3E8EA; border-radius:20px; box-shadow:0 6px 22px rgba(22,48,60,.06); }
.lk-dest-desc { color:#16303C; line-height:1.7; font-size:1.02rem; }
.lk-dest-card-body { padding:14px 30px 30px; }

/* Archive title + intro. */
.lk-dest-arch-title { margin:0; }
/* Les H1 de haut de page sont a 44px partout (2026-09-21) ; bat le clamp 28px de .lk-single-title. */
.lk-dest-arch-title.lk-single-title, .lk-dest-title.lk-single-title { font-size:44px !important; }
/* 55px entre la nav et le premier element, comme partout (le plugin met 44/32). */
.lk-destinations .lk-dest-arch-wrap, .lk-destination .lk-dest-wrap { padding-top:55px; }
.lk-dest-arch-intro { color:#5B6B73; line-height:1.6; }

/* Cards. */
.lk-dest-card { background:#fff; border:1px solid #E3E8EA; border-radius:16px; box-shadow:0 6px 20px rgba(22,48,60,.06); text-decoration:none; color:inherit; transition:box-shadow .2s ease, transform .2s ease; }
.lk-dest-card:hover { box-shadow:0 14px 30px rgba(22,48,60,.13); transform:translateY(-3px); }
.lk-dest-card:focus-visible { outline:2px solid #5581A2; outline-offset:3px; }
.lk-dest-card-media { background:#EEF2F4; }
.lk-dest-card-ph { color:#C4D0D6; }
.lk-dest-card-title { font-family:"Playfair Display", Georgia, "Times New Roman", serif; font-weight:400; font-size:1.2rem; line-height:1.25; color:#16303C; }
.lk-dest-card-text { color:#5B6B73; font-size:.94rem; line-height:1.5; }
.lk-dest-card-more { color:#5581A2; font-weight:600; font-size:.9rem; }

/* Pagination. */
.lk-dest-pagination a, .lk-dest-pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px; padding:0 10px; border:1px solid #E3E8EA; border-radius:999px; color:#16303C; text-decoration:none; font-size:.92rem; }
.lk-dest-pagination a:hover { border-color:#5581A2; color:#5581A2; }
.lk-dest-pagination .current { background:#5581A2; border-color:#5581A2; color:#fff; }
.lk-dest-empty { color:#5B6B73; }

/* ============================================================================
   "Book Direct & Save" price comparison (single-page booking widget).
   Estimated OTA prices (admin %s applied to our pre-tax subtotal) vs our live
   price. Layout is in the plugin (lk.css); this is the visual skin. Design
   standards: Palm #2E7D57 savings accent, Ink #16303C, Muted #5B6B73, Line
   #E3E8EA, Work Sans, pill 999px for the "Best price" badge. Modelled on Wander.
   ========================================================================== */
.lk-pricecompare {
	padding:14px 16px; border-radius:14px;
	background:rgba(46,125,87,.06); border:1px solid rgba(46,125,87,.18);
	font-family:"Work Sans", system-ui, sans-serif;
}
.lk-pc-title { font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#5B6B73; }
.lk-pc-headline { color:#2E7D57; }
.lk-pc-check { color:#2E7D57; }
.lk-pc-save { font-size:.98rem; font-weight:600; color:#16303C; }
.lk-pc-save .lkbe-amt { color:#2E7D57; }

.lk-pc-rows { border-top:1px solid #E3E8EA; }
.lk-pc-row { border-bottom:1px solid #E3E8EA; font-size:.92rem; color:#16303C; }
.lk-pc-row .lk-pc-name { font-weight:500; }
.lk-pc-row.lk-pc-us .lk-pc-price { font-weight:600; }
.lk-pc-row:not(.lk-pc-us) .lk-pc-name,
.lk-pc-row:not(.lk-pc-us) .lk-pc-price { color:#5B6B73; }

/* "Best price" pill — Palm accent, 999px like the site buttons. */
.lk-pc-badge {
	display:inline-flex; align-items:center; padding:2px 10px;
	border-radius:999px; font-size:.68rem; font-weight:600;
	letter-spacing:.02em; text-transform:uppercase;
	color:#2E7D57; background:rgba(46,125,87,.12); border:1px solid rgba(46,125,87,.28);
}
.lk-pc-note { font-size:.74rem; line-height:1.45; color:#5B6B73; }

/* ============================================================================
   Amenities grid ([lk_amenities]) — optional CTA link (shown only when the
   amenity has a URL). Matches the "View all …" collection link: Corporate Blue,
   Work Sans, semibold, underlined. The photo link keeps the image as-is with a
   subtle hover.
   ========================================================================== */
.lk-amenity-link {
	font-family:"Work Sans", system-ui, sans-serif; font-weight:600; font-size:.95rem;
	color:#5581A2 !important; text-decoration:underline !important; text-underline-offset:3px;
}
.lk-amenity-link:hover,
.lk-amenity-link:focus-visible { color:#3C617D !important; }
.lk-amenity-media-link { overflow:hidden; }
/* Card photos: 10px corners (design-standards medium radius); the wrapper clips
   the image so the hover zoom stays inside the rounded shape. */
.lk-amenities-grid .lk-amenity-media { border-radius:10px; overflow:hidden; }
.lk-amenities-grid .lk-amenity-media img { border-radius:10px; }
.lk-amenity-media-link img { transition:transform .4s ease; }
.lk-amenity-media-link:hover img { transform:scale(1.03); }
/* Desktop amenities slider: images link to the Amenities page (subtle zoom). */
.lk-amslide-media-link .lk-amslide-media img { transition:transform .4s ease; }
.lk-amslide-media-link:hover .lk-amslide-media img { transform:scale(1.04); }
@media (prefers-reduced-motion: reduce) {
	.lk-amenity-media-link img,
	.lk-amslide-media-link .lk-amslide-media img { transition:none; }
	.lk-amenity-media-link:hover img,
	.lk-amslide-media-link:hover .lk-amslide-media img { transform:none; }
}

/* ============================================================================
   Checkout — "Protect your trip" section (Cancel For Any Reason + Travel
   Insurance). A highlighted Corporate-Blue callout to stand out from the plain
   add-ons list, with a coverage-PDF link (blue, underlined; !important beats the
   Elementor link reset). Layout ships in the plugin (lk.css).
   ========================================================================== */
.lk-protect {
	padding:14px 16px; border-radius:14px;
	background:rgba(85,129,162,.06); border:1px solid rgba(85,129,162,.22);
	font-family:"Work Sans", system-ui, sans-serif;
}
.lk-protect-head { margin:0 0 6px; }
.lk-protect-title { font-family:"Work Sans", system-ui, sans-serif; font-weight:700; font-size:1rem; color:#16303C; }
.lk-protect-pdf {
	color:#5581A2 !important; text-decoration:underline !important; text-underline-offset:3px;
	font-weight:600; font-size:.85rem;
}
.lk-protect-pdf:hover,
.lk-protect-pdf:focus-visible { color:#3C617D !important; }
/* The option rows reuse the shared .lk-addon styling; just tighten the top row. */
.lk-protect-opts .lk-addon-row:first-child .lk-addon { padding-top:2px; }

/* ============================================================================
   Property gallery — admin-set label overlaid on the main photo. A solid Ink
   pill (legible over any photo), Work Sans, with a soft shadow. Position ships
   in the plugin (lk.css).
   ========================================================================== */
.lk-gallery-label {
	display:inline-flex; align-items:center; gap:6px; max-width:calc(100% - 24px);
	padding:6px 13px 6px 11px; border-radius:999px;
	background:#16303C; color:#fff;
	font-family:"Work Sans", system-ui, sans-serif; font-weight:600; font-size:.8rem;
	letter-spacing:.02em; line-height:1.2;
	box-shadow:0 2px 8px rgba(16,48,60,.35);
	white-space:nowrap; overflow:hidden;
}
/* LK compass mark to the left of the label (assets/compass.svg — same green mark
   used by the single-page map's "this rental" marker). */
.lk-gallery-label::before {
	content:""; flex:0 0 auto; width:15px; height:15px;
	background:url("compass.svg") center/contain no-repeat;
}
/* Property card photo label (archive) — same pill as the single gallery label,
   slightly smaller to fit the card. Positioned top-left in the plugin (lk.css). */
.lk-card-label {
	display:inline-flex; align-items:center; gap:5px; max-width:calc(100% - 20px);
	padding:4px 11px 4px 9px; border-radius:999px;
	background:#16303C; color:#fff;
	font-family:"Work Sans", system-ui, sans-serif; font-weight:600; font-size:.72rem;
	letter-spacing:.02em; line-height:1.2;
	box-shadow:0 2px 8px rgba(16,48,60,.35);
	white-space:nowrap; overflow:hidden;
}
.lk-card-label::before {
	content:""; flex:0 0 auto; width:13px; height:13px;
	background:url("compass.svg") center/contain no-repeat;
}

/* ---------- Destination page: "Things to do" guide preview ---------- */
/* Pale panel to visually divide this section from the rest of the page. */
.lk-dest-guide { background: #F4F7F8; border-radius: 18px; }
.lk-dest-guide-head .lk-nearby-title { margin: 0; }
.lk-dest-guide-all,
.lk-dest-guide-more { color: #5581A2; font-family: "Work Sans", system-ui, sans-serif; font-weight: 600; font-size: .9rem; }
.lk-dest-guide-all:hover,
.lk-dest-guide-more:hover { color: #3C617D; }
.lk-dest-guide-cat { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 1.2rem; color: #16303C; }
.lk-dest-guide-cat a { color: inherit; text-decoration: none; }
.lk-dest-guide-cat a:hover { color: #5581A2; }
.lk-dest-guide-item-media { border-radius: 12px; background: #eef2f4; }
.lk-dest-guide-item { transition: transform .2s ease; }
.lk-dest-guide-item:hover { transform: translateY(-3px); }
.lk-dest-guide-item-ph { background: linear-gradient(135deg, #dfe7ea, #eef2f4); }
.lk-dest-guide-item-name { font-family: "Work Sans", system-ui, sans-serif; font-weight: 600; font-size: .95rem; color: #16303C; line-height: 1.3; }
.lk-dest-guide-item:hover .lk-dest-guide-item-name { color: #5581A2; }
.lk-dest-guide-item-city { font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: #5B6B73; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .lk-dest-guide-item { transition: none; } .lk-dest-guide-item:hover { transform: none; } }

/* ---------- Home "Destinations" section ([lk_destinations]) ---------- */
.lk-destinations-title { font-family: "Playfair Display", Georgia, serif; font-weight: 700; color: #16303C; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; }
.lk-destination-card { border-radius: 14px; box-shadow: 0 1px 2px rgba(22,48,60,.06); }
.lk-destination-card-media { background: linear-gradient(135deg, #dfe7ea, #eef2f4); }
.lk-destination-card-media img { transition: transform .5s ease; }
.lk-destination-card:hover .lk-destination-card-media img { transform: scale(1.06); }
/* Light gradient confined to the bottom, just enough to read the white title —
   the rest of the photo stays clear (no heavy dark block). */
.lk-destination-card-overlay { background: linear-gradient(to top, rgba(16,48,60,.6) 0%, rgba(16,48,60,.15) 22%, rgba(16,48,60,0) 42%); }
.lk-destination-card-name { color: #fff; font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 1.15rem; line-height: 1.2; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
@media (prefers-reduced-motion: reduce) { .lk-destination-card:hover .lk-destination-card-media img { transform: none; } }

/* Section-link shortcut buttons ([lk_destinations_link] / [lk_guide_link]) styled
   as OUTLINE buttons to match the page's other buttons (About Us / Learn more):
   transparent bg, blue border + text, fill on hover. Overrides the filled .lk-btn
   skin (hence .lk-btn.lk-section-link + !important). */
.lk-btn.lk-section-link {
	background: transparent !important;
	color: #5581A2 !important;
	border: 1px solid #5581A2 !important;
	border-radius: 999px !important;
	font-family: "Work Sans", system-ui, sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	padding: 13px 26px !important;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease !important;
}
.lk-btn.lk-section-link:hover,
.lk-btn.lk-section-link:focus-visible {
	background: #5581A2 !important;
	color: #fff !important;
	border-color: #5581A2 !important;
}

/* ---------- Destination single hero (full-bleed photo + overlays) ---------- */
.lk-dest-hero--nomedia { background: #16303C; }  /* fallback when a destination has no photo */
.lk-dest-hero__scrim { background: linear-gradient(90deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.14) 44%, rgba(0,0,0,0) 70%); }
.lk-dest-hero__back { color: #fff !important; font-family: "Work Sans", system-ui, sans-serif; font-size: .9rem; font-weight: 600; letter-spacing: .02em; text-shadow: 0 1px 8px rgba(0,0,0,.65), 0 1px 2px rgba(0,0,0,.5); }
.lk-dest-hero__back:hover { color: #E3E8EA !important; }
.lk-dest-hero__title { color: #fff !important; font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: clamp(40px, 5vw, 66px) !important; line-height: 1.08; text-shadow: 0 2px 18px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.45); }
.lk-dest-hero__card { background: rgba(238,242,244,.9); border-radius: 20px; padding: 30px 32px; box-shadow: 0 26px 64px -30px rgba(16,42,56,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.lk-dest-hero__card .lk-dest-desc { margin: 0; color: #16303C; font-family: "Work Sans", system-ui, sans-serif; font-size: 1.02rem; line-height: 1.7; }
.lk-dest-hero__card .lk-dest-desc > :last-child { margin-bottom: 0; }
@media (max-width: 860px) {
	.lk-dest-hero__title { font-size: clamp(30px, 8vw, 46px) !important; }
	.lk-dest-hero__scrim { background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.12) 38%, rgba(0,0,0,.45) 100%); }
}

/* ---------- AI Search (3rd search tab + results summary) ---------- */
/* Tab: same segmented pill as Dates / Flexible; the sparkle inherits the text colour. */
.lk-search-tabs .lk-tab-ai .lk-ai-icon { width: 15px; height: 15px; }
.lk-ai-note-sep { margin: 0 4px; }
/* Empty request: the field turns red and its placeholder explains what to do. */
.lk-search .lk-search-field .lk-ai-input[aria-invalid="true"] { border-color: #b3261e !important; box-shadow: 0 0 0 2px rgba(179, 38, 30, .15) !important; }
/* Busy (the AI is reading the request): the Search button darkens (no spinner — client, 2026-10-29). */
.lk-search.is-ai-busy .lk-ai-submit { background: var(--lk-accent-2) !important; }
/* Results page: "We understood" card with green chips (Palm on light green). */
.lk-ai-understood {
	padding: 12px 16px; background: var(--lk-surface); border: 1px solid var(--lk-line);
	border-radius: var(--lk-radius); box-shadow: var(--lk-shadow-sm); color: var(--lk-ink); font-size: .92rem;
}
.lk-ai-understood-label { color: #2E7D57; font-weight: 600; }
.lk-ai-chip { background: #EAF4EE; color: #2E7D57; border-radius: 999px; padding: 2px 3px 2px 12px; font-size: .85rem; line-height: 1.5; }
/* × removes the filter: a quiet round button, Palm fill on hover/focus. */
.lk-ai-chip-x { border-radius: 50%; color: #2E7D57; opacity: .7; text-decoration: none !important; transition: background-color .15s ease, color .15s ease, opacity .15s ease; }
.lk-ai-chip-x:hover, .lk-ai-chip-x:focus-visible { background: #2E7D57; color: #fff; opacity: 1; }
.lk-ai-chip-x:focus-visible { outline: 2px solid #2E7D57; outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .lk-ai-chip-x { transition: none; } }
/* No results: what to do next, in ink; each suggestion is a Palm outline pill, filled on hover/focus. */
.lk-ai-empty-text { color: var(--lk-ink); font-weight: 500; }
.lk-ai-empty-try { color: var(--lk-muted); font-size: .85rem; }
.lk-ai-suggest-link { padding: 6px 14px; border: 1px solid #2E7D57; border-radius: 18px; background: transparent; color: #2E7D57 !important; font-size: .85rem; line-height: 1.4; text-decoration: none !important; transition: background-color .15s ease, color .15s ease; }
.lk-ai-suggest-link:hover, .lk-ai-suggest-link:focus-visible { background: #2E7D57; color: #fff !important; }
.lk-ai-suggest-link:focus-visible { outline: 2px solid #2E7D57; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .lk-ai-suggest-link { transition: none; } }
/* Rating: quiet round buttons, Palm when hovered or chosen. Class + !important: Elementor's global button skin wins otherwise. */
.lk-ai-rate { padding-top: 10px; border-top: 1px solid var(--lk-line); color: var(--lk-muted); font-size: .85rem; }
.lk-ai-rate-q { color: var(--lk-ink); font-weight: 500; }
.lk-ai-understood .lk-ai-rate-btn { width: 36px !important; height: 36px !important; padding: 0 !important; border: 1px solid var(--lk-line) !important; border-radius: 50% !important; background: transparent !important; color: var(--lk-muted) !important; box-shadow: none !important; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.lk-ai-understood .lk-ai-rate-btn:hover { border-color: #2E7D57 !important; color: #2E7D57 !important; }
.lk-ai-understood .lk-ai-rate-btn:focus-visible { outline: 2px solid #2E7D57; outline-offset: 2px; color: #2E7D57 !important; }
.lk-ai-understood .lk-ai-rate-btn[aria-pressed="true"] { border-color: #2E7D57 !important; background: #2E7D57 !important; color: #fff !important; }
@media (prefers-reduced-motion: reduce) { .lk-ai-understood .lk-ai-rate-btn { transition: none; } }
.lk-ai-note { color: var(--lk-muted); font-size: .85rem; }
.lk-ai-fallback { display: flex; align-items: center; gap: 6px; color: var(--lk-ink); }
.lk-ai-understood .lk-ai-icon { color: #2E7D57; flex: 0 0 auto; }
/* Follow-up: the AI's question (ink, sparkle) + a pill field with the Refine button. */
.lk-ai-talk { padding-top: 10px; border-top: 1px solid var(--lk-line); }
.lk-ai-question { color: var(--lk-ink); font-weight: 500; }
.lk-ai-question .lk-ai-icon { margin-top: 2px; }
.lk-ai-understood .lk-ai-refine-input {
	height: 42px; padding: 0 18px; border: 1px solid var(--lk-line) !important; border-radius: 999px !important;
	background: #fff; color: var(--lk-ink); font-size: .92rem; box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.lk-ai-understood .lk-ai-refine-input:focus { outline: none; border-color: var(--lk-accent) !important; box-shadow: 0 0 0 3px rgba(85, 129, 162, .18); }
.lk-ai-understood .lk-ai-refine-input[aria-invalid="true"] { border-color: #b3261e !important; box-shadow: 0 0 0 2px rgba(179, 38, 30, .15); }
.lk-ai-understood .lk-ai-refine-submit { height: 42px; padding: 0 22px !important; font-size: .92rem; }
.lk-ai-understood .lk-ai-refine-submit:hover, .lk-ai-understood .lk-ai-refine-submit:focus-visible { background: var(--lk-accent-2) !important; }
.lk-ai-refine-status { color: var(--lk-muted); font-size: .85rem; }
/* Busy: the button darkens, like the search bar (no spinner). */
.lk-ai-refine.is-busy .lk-ai-refine-submit { background: var(--lk-accent-2) !important; }
@media (prefers-reduced-motion: reduce) {
	.lk-ai-understood .lk-ai-refine-input { transition: none; }
}