/* Stays page redesign (templates/half_map_core.php, templates/stays/card.php, js/lus-stays.js).
Tokens (--lus-*) come from lus-home.css. Selectors are scoped to .lus-stays so nothing leaks. */
:root { --lus-header-h: 90px; --lus-top-h: 120px; } /* fallbacks; js/lus-stays.js measures the real values */
.lus-stays-page { background: var(--lus-bg); }
.lus-stays-page .content_wrapper { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: none !important; }
.lus-stays, .lus-stays *, .lus-stays *::before, .lus-stays *::after { box-sizing: border-box; }
.lus-stays { padding-top: var(--lus-header-h); color: var(--lus-ink); background: var(--lus-bg); width: 100%; min-height: 60vh; font-family: inherit; }
.lus-stays a { color: inherit; text-decoration: none; }
.lus-stays h1, .lus-stays h2, .lus-stays h3 { margin: 0; color: var(--lus-ink); }
.lus-stays p { margin: 0; }
.lus-stays__engine { display: none !important; }
/* ---------------------------------------------------------------- top bar */
.lus-stays__top {
position: sticky; top: var(--lus-header-h); z-index: 1100;
background: rgba(251, 248, 245, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--lus-line); padding: 14px 24px 12px;
}
.lus-stays__bar { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 1760px; margin: 0 auto; } /* width: with auto side margins and a search that may shrink to nothing (phone), the bar would otherwise collapse to 0 and slide off to the right */
.lus-stays__search { flex: 0 1 780px; max-width: 780px; margin: 0; }
.lus-stays .lus-search__bar { padding: 5px; box-shadow: 0 1px 2px rgba(28, 25, 23, .06), 0 6px 18px rgba(28, 25, 23, .08); border: 1px solid var(--lus-line); }
.lus-stays .lus-seg__field { height: 44px; font-size: 15px; }
.lus-stays .lus-search__go { height: 44px; padding: 0 24px; font-size: 15px; }
.lus-stays__filters-btn {
flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer;
background: var(--lus-surface); color: var(--lus-ink); border: 1px solid var(--lus-line); font: 600 15px/1 inherit;
transition: border-color var(--lus-dur) var(--lus-ease), box-shadow var(--lus-dur) var(--lus-ease), background var(--lus-dur) var(--lus-ease);
}
.lus-stays__filters-btn:hover { border-color: var(--lus-ink); box-shadow: var(--lus-shadow); }
.lus-stays__filters-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--lus-ink); color: #fff; font-size: 12px; font-style: normal; font-weight: 600; }
.lus-stays__filters-count[hidden] { display: none; }
/* chips */
.lus-stays__chips { display: flex; align-items: center; gap: 8px; max-width: 1760px; margin: 12px auto 0; overflow-x: auto; padding: 2px 0 6px; }
.lus-chip {
flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 999px; cursor: pointer; white-space: nowrap;
background: var(--lus-surface); color: var(--lus-ink); border: 1px solid var(--lus-line); font: 500 14px/1 inherit;
transition: border-color var(--lus-dur) var(--lus-ease), background var(--lus-dur) var(--lus-ease), color var(--lus-dur) var(--lus-ease), transform var(--lus-dur) var(--lus-ease);
}
.lus-chip:hover { border-color: var(--lus-ink); }
.lus-chip.is-on { background: var(--lus-ink); color: #fff; border-color: var(--lus-ink); }
.lus-chip:active { transform: scale(.97); }
.lus-chip__sep { flex: none; width: 1px; height: 24px; background: var(--lus-line); margin: 0 6px; }
/* ----------------------------------------------------------------- body */
.lus-stays__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 41%); gap: 28px; padding: 22px 24px 48px; max-width: 1760px; margin: 0 auto; align-items: start; }
.lus-stays__list { min-width: 0; }
/* The theme positions its list/map columns itself (fixed widths, floats). Reset them. */
.lus-stays #google_map_prop_list_sidebar { position: static !important; width: auto !important; height: auto !important; float: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; background: transparent !important; top: auto !important; }
.lus-stays__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.lus-stays .lus-stays__title { font-family: inherit; font-weight: 600; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.01em; line-height: 1.15; }
.lus-stays__n { font-variant-numeric: tabular-nums; }
.lus-stays__in { color: var(--lus-muted); }
/* the theme's count + sort component, restyled */
.lus-stays .wprentals_adv_listing_filters_head { display: flex !important; align-items: center; gap: 16px; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; float: none !important; width: auto !important; }
.lus-stays .wprentals_adv_listing_filters_head .half_map_results { display: none; } /* the heading above shows the count */
.lus-stays .wprentals_adv_listing_filters_head .col-md-3 { width: auto !important; float: none !important; padding: 0 !important; }
.lus-stays .wprentals_adv_listing_filters_head .listing_filter_select,
.lus-stays .wprentals_adv_listing_filters_head .dropdown { margin: 0; }
/* Sort dropdown: ONE pill (the theme's wrapper); the trigger inside is plain text with the arrow tucked in. */
.lus-stays .wprentals_adv_listing_filters_head .listing_filter_select {
position: relative; display: inline-block; min-width: 168px; height: 42px; padding: 0 !important; margin: 0 !important;
background: var(--lus-surface) !important; border: 1px solid var(--lus-line) !important; border-radius: 999px !important; box-shadow: none !important;
transition: border-color var(--lus-dur) var(--lus-ease), box-shadow var(--lus-dur) var(--lus-ease);
}
.lus-stays .wprentals_adv_listing_filters_head .listing_filter_select:hover,
.lus-stays .wprentals_adv_listing_filters_head .listing_filter_select.open { border-color: var(--lus-ink) !important; box-shadow: var(--lus-shadow) !important; }
.lus-stays .wprentals_adv_listing_filters_head .filter_menu_trigger,
.lus-stays .wprentals_adv_listing_filters_head #a_filter_order {
display: flex !important; align-items: center; width: 100%; height: 100%; min-height: 0; padding: 0 42px 0 18px !important; margin: 0 !important;
background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 999px !important;
color: var(--lus-ink) !important; font: 500 14px/1 inherit; cursor: pointer; white-space: nowrap;
}
.lus-stays .wprentals_adv_listing_filters_head .caret_filter {
position: absolute !important; right: 17px; top: 50%; margin: -3px 0 0 !important; width: 8px; height: 8px; border: 0 !important;
border-right: 2px solid var(--lus-ink) !important; border-bottom: 2px solid var(--lus-ink) !important; transform: rotate(45deg) translate(-2px, -2px); opacity: .7; transition: transform var(--lus-dur) var(--lus-ease);
}
.lus-stays .wprentals_adv_listing_filters_head .listing_filter_select.open .caret_filter { transform: rotate(225deg) translate(-2px, -2px); }
.lus-stays .wprentals_adv_listing_filters_head ul { border-radius: 16px !important; border: 1px solid var(--lus-line) !important; box-shadow: var(--lus-shadow-lift) !important; padding: 6px !important; }
.lus-stays .wprentals_adv_listing_filters_head ul li { border-radius: 10px; padding: 9px 12px !important; font-size: 14px; }
.lus-stays .wprentals_adv_listing_filters_head ul li:hover { background: var(--lus-tint) !important; }
/* ----------------------------------------------------------------- grid + cards */
.lus-stays__grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; position: relative; }
.lus-stays__grid > .listing_wrapper, .lus-stays__grid > .lus-stay { float: none !important; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
.lus-stays__grid > :not(.lus-stay):not(.wprentals-skeleton-card):not([class*="skeleton"]) { grid-column: 1 / -1; }
.lus-stay__card { position: relative; background: rgba(255, 255, 255, .7) !important; border: 0 !important; box-shadow: none !important; padding: 8px !important; margin: 0 !important; height: auto !important; border-radius: calc(var(--lus-radius) + 8px) !important; transition: box-shadow var(--lus-dur) var(--lus-ease); }
.lus-stay:active .lus-stay__card, .lus-stay:focus-within .lus-stay__card { box-shadow: var(--lus-shadow-lift) !important; }
.lus-stay__card::before, .lus-stay__card::after { display: none !important; }
.lus-stay__media { position: relative; border-radius: var(--lus-radius); overflow: hidden; background: var(--lus-tint); aspect-ratio: 4 / 3; }
.lus-stay__slides { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.lus-stay__slides::-webkit-scrollbar { display: none; }
.lus-stay__slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; display: block; }
.lus-stay__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lus-stay__slide--empty { background: linear-gradient(135deg, var(--lus-tint), var(--lus-line)); }
.lus-stay__arrow {
position: absolute; top: 50%; width: 32px; height: 32px; margin-top: -16px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
background: rgba(255, 255, 255, .94); color: var(--lus-ink); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
opacity: 0; transform: scale(.9); transition: opacity var(--lus-dur) var(--lus-ease), transform var(--lus-dur) var(--lus-ease);
}
.lus-stay__arrow--prev { left: 10px; } .lus-stay__arrow--next { right: 10px; }
.lus-stay__media:hover .lus-stay__arrow { opacity: 1; transform: none; }
.lus-stay__arrow:hover { transform: scale(1.06) !important; }
.lus-stay__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.lus-stay__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .6); transition: background var(--lus-dur) var(--lus-ease), transform var(--lus-dur) var(--lus-ease); }
.lus-stay__dots i.is-on { background: #fff; transform: scale(1.25); }
.lus-stay__badge { position: absolute; top: 12px; left: 12px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--lus-ink); }
.lus-stay__fav {
position: absolute !important; top: 10px; right: 10px; left: auto !important; bottom: auto !important; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
background: rgba(255, 255, 255, .94); display: grid; place-items: center; font-size: 0 !important; padding: 0 !important; margin: 0 !important; z-index: 3;
transition: transform var(--lus-dur) var(--lus-ease), background var(--lus-dur) var(--lus-ease);
}
.lus-stay__fav::before { content: ""; width: 18px; height: 18px; background: var(--lus-ink); opacity: .8; -webkit-mask: var(--lus-heart) center / contain no-repeat; mask: var(--lus-heart) center / contain no-repeat; }
.lus-stay__fav.icon-fav-on::before { background: var(--lus-accent); opacity: 1; -webkit-mask-image: var(--lus-heart-fill); mask-image: var(--lus-heart-fill); }
.lus-stay__fav:hover { transform: scale(1.08); background: #fff; }
.lus-stay__fav i, .lus-stay__fav svg { display: none !important; }
.lus-stays-page, .lus-similar { --lus-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.2-9.1C1.6 8.2 3.4 5 6.6 5c2 0 3.5 1.1 5.4 3 1.9-1.9 3.4-3 5.4-3 3.2 0 5 3.200 3.800 6.400C19.500 15.900 12 20.500 12 20.500z'/%3E%3C/svg%3E");
--lus-heart-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.5 2.7 5 6 5c2 0 3.300 1 4 2.200h4C14.700 6 16 5 18 5c3.300 0 5.100 3.500 3.600 6.800C19.500 16.400 12 21 12 21z'/%3E%3C/svg%3E"); }
.lus-stay__body { display: block; padding: 14px 8px 8px; }
.lus-stay__kind { font-size: 13px; color: var(--lus-muted); }
.lus-stays .lus-stay__title { font-family: inherit; font-weight: 600; font-size: 17px; line-height: 1.25; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lus-stay__facts { margin-top: 6px; font-size: 14px; color: var(--lus-muted); }
.lus-stay__price { margin-top: 12px; font-size: 14.5px; color: var(--lus-muted); }
.lus-stay__price strong { font-size: 18px; color: var(--lus-ink); font-weight: 600; }
.lus-stay__dates { font-weight: 600; color: var(--lus-ink); text-decoration: underline; text-decoration-color: var(--lus-line); text-underline-offset: 4px; margin-bottom: 3px; }
.lus-stay__more { margin-top: 2px; font-size: 13px; }
/* placeholders printed by the page itself on a search link, until the results arrive */
.lus-skeleton-card { display: block; }
.lus-skeleton-card__img { aspect-ratio: 4 / 3; border-radius: var(--lus-radius); background: var(--lus-tint); }
.lus-skeleton-card i { display: block; height: 12px; margin-top: 12px; width: 70%; border-radius: 6px; background: var(--lus-tint); }
.lus-skeleton-card i + i { width: 45%; }
.lus-skeleton-card__img, .lus-skeleton-card i { animation: lus-skel-pulse 1.4s ease-in-out infinite; }
@keyframes lus-skel-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .lus-skeleton-card__img, .lus-skeleton-card i { animation: none; } }
/* skeleton cards while the filter AJAX loads (the theme injects its own skeleton markup) */
.lus-stays__grid [class*="skeleton"] { border-radius: var(--lus-radius); }
/* pagination: every item is one circle; the carries no shape of its own (the theme gives the
first/last half-square borders) - the is the circle. */
.lus-stays .pagination, .lus-stays .pagination_nojax { margin: 36px 0 0 !important; padding: 0 !important; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; float: none; }
.lus-stays .pagination > li { list-style: none; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; width: auto !important; height: auto !important; float: none !important; }
.lus-stays .pagination > li:empty { display: none; }
.lus-stays .pagination > li > a, .lus-stays .pagination > li > span {
display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px !important; margin: 0 !important; border-radius: 999px !important;
border: 1px solid var(--lus-line) !important; background: var(--lus-surface) !important; color: var(--lus-ink) !important; font: 500 15px/1 inherit; text-decoration: none;
transition: border-color var(--lus-dur) var(--lus-ease), background var(--lus-dur) var(--lus-ease), transform var(--lus-dur) var(--lus-ease);
}
.lus-stays .pagination > li > a:hover { border-color: var(--lus-ink) !important; transform: translateY(-1px); }
.lus-stays .pagination > li.active > a, .lus-stays .pagination > li.active > span, .lus-stays .pagination .current { background: var(--lus-ink) !important; color: #fff !important; border-color: var(--lus-ink) !important; }
.lus-stays .pagination .roundleft > a, .lus-stays .pagination .roundright > a { padding: 0 !important; width: 42px; }
.lus-stays .pagination i { font-size: 13px; line-height: 1; }
.lus-stays__about { margin-top: 48px; color: var(--lus-muted); line-height: 1.65; max-width: 70ch; }
/* ------------------------------------------------------------------- map */
.lus-stays__map { position: sticky; top: calc(var(--lus-header-h) + var(--lus-top-h) + 16px); height: calc(100vh - var(--lus-header-h) - var(--lus-top-h) - 32px); min-height: 420px; border-radius: 24px; overflow: hidden; box-shadow: var(--lus-shadow-lift); background: var(--lus-tint); }
.lus-stays #google_map_prop_list_wrapper,
.lus-stays #google_map_prop_list_wrapper > * { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; right: 0 !important; margin: 0 !important; float: none !important; }
.lus-stays .leaflet-container, .lus-stays #gmap_wrapper, .lus-stays #google_map_prop_list { width: 100% !important; height: 100% !important; }
/* A sticky map sticks inside its parent, so that parent has to be as tall as the results beside it. The row's Align Items is
saved in the page (Elementor) data, and where it is "flex-start" the column shrinks to the map's own height and the map never moves. */
.e-con:has( > .lus-map-sticky-sticky ) { align-self: stretch; }
.lus-stays__map-close, .lus-stays__map-toggle { display: none; }
/* ---------------------------------------------------------------- drawer */
.lus-drawer { position: fixed; inset: 0; z-index: 100002; display: flex; justify-content: flex-end; }
.lus-drawer[hidden] { display: none; }
.lus-drawer__scrim { position: absolute; inset: 0; background: rgba(28, 25, 23, .45); animation: lus-fade 200ms var(--lus-ease); }
.lus-drawer__panel { position: relative; width: min(460px, 100%); height: 100%; background: var(--lus-surface); display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(28, 25, 23, .25); animation: lus-slide 260ms var(--lus-ease); }
@keyframes lus-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lus-slide { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
.lus-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--lus-line); }
.lus-drawer .lus-drawer__head h2 { font-family: inherit; font-weight: 600; font-size: 20px; }
.lus-drawer__x { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--lus-tint); font-size: 24px; line-height: 1; cursor: pointer; color: var(--lus-ink); }
.lus-drawer__body { flex: 1; overflow-y: auto; padding: 8px 24px 24px; }
.lus-drawer__foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--lus-line); background: var(--lus-surface); }
.lus-drawer__clear { border: 0; background: transparent; font: 600 15px/1 inherit; color: var(--lus-ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; padding: 10px 4px; }
.lus-drawer__apply { border: 0; border-radius: 999px; padding: 0 28px; height: 48px; background: var(--lus-accent); color: #fff; font: 600 15px/1 inherit; cursor: pointer; transition: background var(--lus-dur) var(--lus-ease); }
.lus-drawer__apply:hover { background: var(--lus-accent-ink); }
.lus-fsec { padding: 22px 0; border-bottom: 1px solid var(--lus-line); }
.lus-fsec:last-child { border-bottom: 0; }
.lus-drawer .lus-fsec h3 { font-size: 17px; font-weight: 600; margin-bottom: 14px; }
.lus-fsec__hint { font-size: 13px; color: var(--lus-muted); margin: -8px 0 14px; }
.lus-seg-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lus-seg-row .lus-chip { height: 40px; }
.lus-range { position: relative; height: 36px; margin: 6px 4px 0; }
.lus-range__track { position: absolute; left: 0; right: 0; top: 16px; height: 4px; border-radius: 4px; background: var(--lus-line); }
.lus-range__fill { position: absolute; top: 16px; height: 4px; border-radius: 4px; background: var(--lus-ink); }
.lus-range input[type="range"] { position: absolute; left: 0; right: 0; top: 6px; width: 100%; height: 24px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
.lus-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--lus-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); cursor: grab; }
.lus-range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--lus-ink); cursor: grab; }
.lus-range input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.lus-range__vals { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
.lus-range__val { flex: 1; border: 1px solid var(--lus-line); border-radius: 14px; padding: 10px 14px; }
.lus-range__val small { display: block; font-size: 12px; color: var(--lus-muted); }
.lus-range__val b { font-size: 16px; font-weight: 600; }
/* Amenity checkboxes: our own box + tick (the theme restyles every label and checkbox: pale grey text, faint box). */
.lus-drawer .lus-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.lus-drawer label.lus-check {
display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 6px; border-radius: 12px; cursor: pointer;
font-size: 15px; font-weight: 400; line-height: 1.3; color: var(--lus-ink) !important; transition: background var(--lus-dur) var(--lus-ease);
}
.lus-drawer label.lus-check:hover { background: var(--lus-tint); }
.lus-drawer label.lus-check span { flex: 1; min-width: 0; display: block; color: var(--lus-ink) !important; font-size: 15px; line-height: 1.3; }
.lus-drawer label.lus-check small { flex: none; margin: 0; font-size: 13px !important; line-height: 1; color: var(--lus-muted) !important; font-variant-numeric: tabular-nums; }
.lus-drawer label.lus-check input[type="checkbox"] {
-webkit-appearance: none; appearance: none; flex: none; position: relative; width: 22px; height: 22px; margin: 0; padding: 0; cursor: pointer;
border: 1.5px solid #b9b1a8 !important; border-radius: 7px !important; background: #fff !important; box-shadow: none !important;
transition: background var(--lus-dur) var(--lus-ease), border-color var(--lus-dur) var(--lus-ease);
}
.lus-drawer label.lus-check input[type="checkbox"]:hover { border-color: var(--lus-ink) !important; }
.lus-drawer label.lus-check input[type="checkbox"]:checked { background: var(--lus-ink) !important; border-color: var(--lus-ink) !important; }
.lus-drawer label.lus-check input[type="checkbox"]::before { display: none !important; }
.lus-drawer label.lus-check input[type="checkbox"]::after {
content: "" !important; display: block !important; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg) scale(0); transition: transform 140ms var(--lus-ease); background: none !important;
}
.lus-drawer label.lus-check input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
.lus-drawer label.lus-check input[type="checkbox"]:focus-visible { outline: 2px solid var(--lus-ink); outline-offset: 2px; }
@media (max-width: 860px) { .lus-drawer .lus-checks { grid-template-columns: 1fr; } }
.lus-fsec__more { margin-top: 8px; border: 0; background: none; padding: 6px 0; font: 600 14px/1 inherit; color: var(--lus-ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
/* ----------------------------------------------------------- empty + loading */
.lus-stays .lus-stays-empty, .lus-stays [class*="empty-state"] { grid-column: 1 / -1; text-align: center; padding: 56px 24px; border: 1px dashed var(--lus-line); border-radius: var(--lus-radius); background: var(--lus-surface); }
.lus-stays__loading { position: sticky; z-index: 6; top: 42vh; height: 0; display: flex; justify-content: center; pointer-events: none; }
.lus-stays__loading[hidden] { display: none; }
.lus-chip.is-empty, .lus-chip.is-empty:hover { opacity: .4; cursor: not-allowed; border-color: var(--lus-line); background: transparent; }
.lus-chip__count { margin-left: 6px; font-style: normal; font-size: .85em; opacity: .6; }
.lus-chip.is-on .lus-chip__count { opacity: .8; }
.lus-stays__loading i { flex: none; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; border: 4px solid rgba(28, 25, 23, .14); border-top-color: var(--lus-accent, #d4363c); background: rgba(255, 255, 255, .85); box-shadow: 0 6px 20px rgba(28, 25, 23, .18); animation: lus-stays-spin .8s linear infinite; }
@keyframes lus-stays-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lus-stays__loading i { animation-duration: 1.8s; } }
.lus-stays__grid.is-loading { opacity: .55; pointer-events: none; transition: opacity var(--lus-dur) var(--lus-ease); }
/* ------------------------------------------------------------ tablet / phone */
@media (max-width: 1100px) {
.lus-stays__body { grid-template-columns: minmax(0, 1fr) minmax(300px, 38%); gap: 20px; padding: 18px 16px 40px; }
.lus-stays__grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
:root { --lus-header-h: 0px; --lus-top-h: 150px; } /* phone: the site header scrolls away */
.lus-stays__top { padding: 10px 16px; }
.lus-stays__bar { gap: 8px; }
.lus-stays__search { flex: 1 1 auto; max-width: none; }
.lus-stays__filters-btn { height: 54px; padding: 0 16px; }
.lus-stays__filters-btn span { display: none; }
.lus-stays__chips { margin-top: 10px; }
.lus-stays__body { grid-template-columns: 1fr; padding: 16px 16px 96px; }
.lus-stays__grid { grid-template-columns: 1fr; gap: 28px; }
.lus-stays__head { margin-bottom: 14px; }
/* map: a full-screen layer opened from the floating button. It stays laid out (just invisible) so the
map library initialises at the right size instead of inside a display:none box. */
.lus-stays__map { position: fixed; inset: 0; z-index: 100001; height: auto; min-height: 0; border-radius: 0; top: 0; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 200ms var(--lus-ease); }
.lus-stays.map-open .lus-stays__map { visibility: visible; opacity: 1; pointer-events: auto; }
.lus-stays__map-close { display: inline-flex; align-items: center; position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 1200; height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--lus-ink); color: #fff; box-shadow: 0 8px 24px rgba(28, 25, 23, .35); font: 600 15px/1 inherit; cursor: pointer; }
.lus-stays__map-toggle { display: inline-flex; align-items: center; gap: 8px; position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 1090; height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--lus-ink); color: #fff; font: 600 15px/1 inherit; cursor: pointer; box-shadow: 0 8px 24px rgba(28, 25, 23, .35); }
.lus-drawer__panel { width: 100%; animation: lus-up 260ms var(--lus-ease); }
@keyframes lus-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.lus-stay__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lus-drawer__scrim, .lus-drawer__panel { animation: none; } }
/* ------------------------------------------------------------------ map pins */
/* Price tags: white pills with the lowest rate; the unit is small and muted. */
.lus-stays .wpestate_marker.openstreet_price_marker {
min-width: 0; padding: 6px 11px; border-radius: 999px; background: #fff !important; color: var(--lus-ink) !important; top: -4px;
box-shadow: 0 2px 6px rgba(28, 25, 23, .22), 0 0 0 1px rgba(28, 25, 23, .08); letter-spacing: 0; font-weight: 600; font-size: 13px;
transition: transform var(--lus-dur) var(--lus-ease), background var(--lus-dur) var(--lus-ease), color var(--lus-dur) var(--lus-ease);
}
.lus-stays .wpestate_marker span, .lus-stays .wpestate_marker .wprentals-pin-price { color: inherit !important; font-size: 13px; }
.lus-stays .wpestate_marker .wprentals-pin-home, .lus-stays .wpestate_marker .wprentals-price-range { display: none !important; }
.lus-stays .wpestate_marker .wprentals-pin-period { margin-left: 3px; font-size: 11px !important; font-weight: 500; opacity: .6; }
.lus-stays .wpestate_marker:before { display: none; }
.lus-stays .wpestate_marker:after { display: none; }
.lus-stays .leaflet-marker-icon:hover .wpestate_marker.openstreet_price_marker,
.lus-stays .wpestate_marker.hover_z_pin,
.lus-stays .wpestate_marker.openstreet_price_marker_on_click,
.lus-stays .openstreet_price_marker_on_click_parent .wpestate_marker { background: var(--lus-ink) !important; color: #fff !important; transform: translate(-50%, -100%) scale(1.08); z-index: 9999; }
.lus-stays .wpestate_marker.hover_z_pin .wprentals-pin-period, .lus-stays .wpestate_marker.openstreet_price_marker_on_click .wprentals-pin-period { opacity: .75; }
/* Clusters: ink circles with the count */
.lus-stays .leaflet_cluster {
width: 42px; height: 42px; top: -21px; left: -21px; line-height: 42px; border-radius: 50%; background: var(--lus-ink) !important; background-image: none !important;
color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 0 0 6px rgba(28, 25, 23, .18), 0 2px 8px rgba(28, 25, 23, .3);
transition: transform var(--lus-dur) var(--lus-ease);
}
.lus-stays .leaflet-marker-icon:hover .leaflet_cluster { transform: scale(1.1); }
/* Map controls and the pin pop-up card */
.lus-stays .leaflet-control-zoom a, .lus-stays .leaflet-bar a { border-radius: 12px !important; }
.lus-stays .leaflet-popup-content { margin: 0 !important; }
.lus-stays .leaflet-popup-content .info_details, .lus-stays .leaflet-popup-content > div { border-radius: 16px; overflow: hidden; }
/* ------------------------------------------------------------- empty state */
.lus-stays .lus-stays-empty { grid-column: 1 / -1; text-align: center; padding: 64px 28px; border: 1px dashed var(--lus-line); border-radius: var(--lus-radius); background: var(--lus-surface); }
.lus-stays .lus-stays-empty-title { font-family: inherit; font-weight: 600; font-size: 28px; margin: 0 0 10px; color: var(--lus-ink); }
.lus-stays .lus-stays-empty-text { max-width: 46ch; margin: 0 auto 24px; color: var(--lus-muted); line-height: 1.6; }
.lus-stays .lus-stays-empty-cta, .lus-stays .lus-stays-empty__clear {
display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 24px; margin: 4px; border-radius: 999px; font: 600 15px/1 inherit; cursor: pointer;
transition: background var(--lus-dur) var(--lus-ease), border-color var(--lus-dur) var(--lus-ease);
}
.lus-stays .lus-stays-empty__clear { border: 0; background: var(--lus-accent); color: #fff; }
.lus-stays .lus-stays-empty__clear:hover { background: var(--lus-accent-ink); }
.lus-stays .lus-stays-empty-cta { border: 1px solid var(--lus-line); background: var(--lus-surface); color: var(--lus-ink) !important; }
.lus-stays .lus-stays-empty-cta:hover { border-color: var(--lus-ink); }
.lus-stays .no_results, .lus-stays span.no_results { grid-column: 1 / -1; text-align: center; padding: 40px 0; color: var(--lus-muted); }
.lus-stays .lus-stays-empty { width: 100% !important; max-width: none !important; margin: 0 !important; }
/* Logged-in admin toolbar: WordPress already pushes the page down by its height, so don't count it twice. */
.admin-bar .lus-stays { padding-top: max(0px, calc(var(--lus-header-h) - 32px)); }
@media (max-width: 782px) { .admin-bar .lus-stays { padding-top: max(0px, calc(var(--lus-header-h) - 46px)); } }
/* Map pop-up (opens on card hover / pin click) */
.lus-stays .info_details.openstreet_map_price_infobox {
width: 280px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--lus-shadow-lift); position: relative;
}
.lus-stays .info_details .infoimage { height: 150px; background-size: cover; background-position: center; }
.lus-stays .info_details .infogradient { display: none; }
.lus-stays .info_details #infobox_title { position: static !important; display: block; padding: 12px 16px 2px; font-family: inherit; font-size: 17px; line-height: 1.25; color: var(--lus-ink) !important; text-shadow: none !important; background: none; white-space: normal; max-width: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lus-stays .info_details .prop_detailsx { padding: 0 16px; font-size: 13px; color: var(--lus-muted); }
.lus-stays .info_details .prop_detailsx i { margin-right: 6px; }
.lus-stays .info_details .infodetails { padding: 4px 16px 0; font-size: 13px; color: var(--lus-muted); }
.lus-stays .info_details .prop_pricex { position: static !important; padding: 8px 16px 14px; font-size: 14px; color: var(--lus-ink); background: none !important; }
.lus-stays .info_details .prop_pricex .wprentals-pin-price { font-size: 17px; font-weight: 600; color: var(--lus-ink) !important; }
.lus-stays .info_details .prop_pricex .wprentals-price-range { display: none !important; }
.lus-stays .info_details .prop_pricex .wprentals-pin-period { color: var(--lus-muted); font-size: 13px; margin-left: 3px; }
.lus-stays .info_details #infocloser { top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background-color: rgba(255, 255, 255, .95); }
.lus-stays .leaflet-popup-content-wrapper { border-radius: 18px !important; }
.lus-stays .listing_filter_select .dropdown-menu { right: 0 !important; left: auto !important; min-width: 220px; margin-top: 8px; }
.lus-stays .listing_filter_select .dropdown-menu li { color: var(--lus-ink) !important; white-space: nowrap; cursor: pointer; }
.lus-stays .listing_filter_select .dropdown-menu li:hover { background: var(--lus-tint) !important; }
/* ---------------------------------------------------------------- phone fixes */
@media (max-width: 860px) {
/* backdrop-filter makes an element the containing block for position:fixed children, which squashed the
full-screen search sheet into the 126px bar. No blur on phones: a solid bar. */
.lus-stays__top { background: var(--lus-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Sort: one pill, never wider than the screen */
.lus-stays__head { align-items: center; flex-wrap: nowrap; gap: 10px; }
.lus-stays .lus-stays__title { font-size: 24px; white-space: nowrap; }
.lus-stays .wprentals_adv_listing_filters_head { margin-left: auto !important; min-width: 0; }
.lus-stays .wprentals_adv_listing_filters_head .listing_filter_select { min-width: 0; width: 140px; height: 40px; }
.lus-stays .wprentals_adv_listing_filters_head .filter_menu_trigger,
.lus-stays .wprentals_adv_listing_filters_head #a_filter_order { padding: 0 34px 0 14px !important; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.lus-stays .wprentals_adv_listing_filters_head .caret_filter { right: 14px; }
.lus-stays .listing_filter_select .dropdown-menu { right: 0 !important; min-width: 210px; max-width: calc(100vw - 32px); }
}
@media (max-width: 400px) { .lus-stays__head { flex-wrap: wrap; } .lus-stays .wprentals_adv_listing_filters_head { margin-left: 0 !important; } }
.lus-stays .wprentals_adv_listing_filters_head .caret_filter::after, .lus-stays .wprentals_adv_listing_filters_head .caret_filter::before { display: none !important; content: none !important; }
@media (max-width: 860px) {
.lus-stays__bar { min-width: 0; }
.lus-stays__search { min-width: 0; flex: 1 1 0; }
.lus-stays__search .lus-search { min-width: 0; }
.lus-stays__search .lus-search__pill { max-width: 100%; min-width: 0; padding: 0 16px; }
.lus-stays__filters-btn { flex: none; }
}
/* Logged-in admin toolbar sits above the full-screen sheet / drawer / map layer: start below it */
.admin-bar .lus-search.is-sheet .lus-search__form { padding-top: calc(18px + 46px); }
.admin-bar .lus-drawer__panel { margin-top: 46px; height: calc(100% - 46px); }
@media (min-width: 783px) { .admin-bar .lus-drawer__panel { margin-top: 32px; height: calc(100% - 32px); } .admin-bar .lus-search.is-sheet .lus-search__form { padding-top: calc(18px + 32px); } }
@media (max-width: 860px) { .lus-stays .lus-search.is-sheet .lus-search__bar { border: 0; box-shadow: none; background: transparent; } }
/* Sort pill: never squeezed, label truncates with an ellipsis before it reaches the arrow (all widths). */
.lus-stays .wprentals_adv_listing_filters_head { flex: none !important; }
.lus-stays .wprentals_adv_listing_filters_head .listing_filter_select { flex: none !important; width: auto !important; min-width: 150px !important; max-width: 280px; }
.lus-stays .wprentals_adv_listing_filters_head .filter_menu_trigger,
.lus-stays .wprentals_adv_listing_filters_head #a_filter_order {
display: block !important; line-height: 40px !important; height: 40px; padding: 0 36px 0 16px !important;
white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis;
}
.lus-stays .wprentals_adv_listing_filters_head .caret_filter { pointer-events: none; }
@media (max-width: 860px) {
.lus-stays .wprentals_adv_listing_filters_head .listing_filter_select { width: auto !important; min-width: 150px !important; max-width: 280px; height: 40px; }
.lus-stays__head { flex-wrap: wrap; }
.lus-stays .wprentals_adv_listing_filters_head { margin-left: auto !important; }
}
/* Phone: the Sort row sits on its own line, left-aligned under "N stays", so it can never be pushed against / past the right edge. */
@media (max-width: 860px) {
.lus-stays__head { flex-direction: column; align-items: flex-start; gap: 10px; }
.lus-stays .wprentals_adv_listing_filters_head { margin: 0 !important; width: auto !important; justify-content: flex-start; }
.lus-stays .listing_filter_select .dropdown-menu { left: 0 !important; right: auto !important; max-width: calc(100vw - 48px); }
}
/* ------------------------------------------------- full map (the four-arrows control) */
/* The theme's button toggles .halfmapfull on the map wrapper; js/lus-stays.js mirrors it to .map-full here. */
.lus-stays.map-full .lus-stays__map {
position: fixed !important; inset: 0 !important; z-index: 100001; width: auto; height: auto !important; min-height: 0;
border-radius: 0; box-shadow: none; display: block; visibility: visible; opacity: 1; pointer-events: auto;
}
.lus-stays.map-full .lus-stays__map-close { display: inline-flex; align-items: center; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 1200; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--lus-ink); color: #fff; box-shadow: 0 8px 24px rgba(28, 25, 23, .35); font: 600 14px/1 inherit; cursor: pointer; }
.admin-bar .lus-stays.map-full .lus-stays__map { top: 32px !important; }
html.lus-map-full, html.lus-map-full body { overflow: hidden; }
@media (max-width: 782px) { .admin-bar .lus-stays.map-full .lus-stays__map { top: 46px !important; } }
/* the theme's .halfmapfull makes the wrapper position:fixed / z-index:10000 - keep it inside our layer so the Back button stays on top */
.lus-stays #google_map_prop_list_wrapper.halfmapfull, .lus-stays #google_map_prop_list_wrapper.halfmapfullx { position: absolute !important; inset: 0 !important; z-index: 1 !important; width: 100% !important; height: 100% !important; }
.lus-stays.map-full .lus-stays__map-close { z-index: 100002; }
@media (max-width: 860px) { .lus-stays.map-full .lus-stays__map-close { top: auto; bottom: calc(24px + env(safe-area-inset-bottom)); } }
/* "Rate plan" caption in front of the plan chips */
.lus-chips__label { flex: none; align-self: center; padding: 0 4px 0 2px; font-size: 13px; font-weight: 600; color: var(--lus-muted); letter-spacing: .01em; white-space: nowrap; }
.lus-stays .listing_filter_select .dropdown-menu { min-width: 260px; }
/* Sort menu: scroll only if it really has to (all 9 options fit on most screens), and keep the scrollbar inside the rounded corners. */
.lus-stays .listing_filter_select .dropdown-menu {
max-height: min(420px, calc(100vh - 220px)) !important; overflow-x: hidden !important; overflow-y: auto !important;
padding: 6px !important; border-radius: 16px !important;
scrollbar-width: thin; scrollbar-color: #cfc7bd transparent;
}
.lus-stays .listing_filter_select .dropdown-menu::-webkit-scrollbar { width: 10px; }
.lus-stays .listing_filter_select .dropdown-menu::-webkit-scrollbar-track { background: transparent; margin: 10px 0; border-radius: 999px; }
.lus-stays .listing_filter_select .dropdown-menu::-webkit-scrollbar-thumb { background: #cfc7bd; border-radius: 999px; border: 3px solid #fff; }
.lus-stays .listing_filter_select .dropdown-menu::-webkit-scrollbar-thumb:hover { background: #a89f94; }
.lus-stays .listing_filter_select .dropdown-menu { z-index: 1300 !important; } /* above the floating Map button */
/* ---------------------------------------------------------------- Elementor zones (stays/zones.php) */
.lus-zone { position: relative; width: 100%; }
.lus-zone--strip { max-width: 1760px; margin: 0 auto; padding: 18px 24px 0; }
.lus-zone .elementor { width: 100%; }
.lus-zone--banner .elementor-section, .lus-zone--bottom .elementor-section { max-width: none; }
.lus-zone__edit { position: absolute; top: 8px; right: 8px; z-index: 5; padding: 6px 12px; border-radius: 999px; background: rgba(28, 25, 23, .85); color: #fff !important; font: 600 12px/1 inherit; text-decoration: none; opacity: 0; transition: opacity var(--lus-dur) var(--lus-ease); }
.lus-zone:hover .lus-zone__edit, .lus-zone__edit:focus-visible { opacity: 1; }
@media (max-width: 860px) { .lus-zone--strip { padding: 14px 16px 0; } .lus-zone__edit { display: none; } }
/* ------------------------------------------------------------ desktop: hide / show the map */
.lus-stays__map-switch { display: none; }
@media (min-width: 861px) {
.lus-stays__map-switch {
display: inline-flex; align-items: center; gap: 8px; position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1090;
height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--lus-ink); color: #fff; font: 600 14px/1 inherit; cursor: pointer;
box-shadow: 0 8px 24px rgba(28, 25, 23, .3); transition: transform var(--lus-dur) var(--lus-ease), box-shadow var(--lus-dur) var(--lus-ease);
}
.lus-stays__map-switch:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 12px 28px rgba(28, 25, 23, .36); }
.lus-stays__map-switch:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 4px var(--lus-ink); }
/* map hidden: the list takes the whole width */
.lus-stays.map-hidden .lus-stays__body { grid-template-columns: minmax(0, 1fr); }
.lus-stays.map-hidden .lus-stays__map:not(.x) { display: none; }
.lus-stays.map-hidden .lus-stays__grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.lus-stays.map-full .lus-stays__map-switch { display: none; } /* full-screen map has its own Back button */
html.lus-acct-modal .lus-stays__map-switch, html.lus-sheet-open .lus-stays__map-switch { display: none; }
}
/* ------------------------------------------------ Elementor-built body (stays/widgets.php) */
.lus-stays__free { width: 100%; }
.lus-stays__free .lus-stays__list { padding: 22px 0 0; }
@media (min-width: 861px) {
/* in a free layout the map is a normal block; its height / sticky / radius come from the widget's controls */
.lus-stays__free .lus-stays__map { position: relative; top: auto; height: 640px; min-height: 320px; }
}
.lus-stays__free .elementor-widget-lus_stays_results, .lus-stays__free .elementor-widget-lus_stays_map { width: 100%; }
.lus-widget-note, .lus-widget-hint { margin: 8px 0; padding: 14px 16px; border: 1px dashed #c9bfb3; border-radius: 12px; background: #fbf8f5; color: #57534e; font: 400 13px/1.5 inherit; }
.lus-widget-note strong { display: block; color: #1c1917; font-size: 14px; }
.lus-widget-hint { text-align: center; }
/* phone: the map is always a full-screen layer, whatever height the Elementor control says */
@media (max-width: 860px) {
.lus-stays .lus-stays__map { position: fixed !important; inset: 0 !important; height: auto !important; border-radius: 0 !important; top: 0 !important; }
.admin-bar .lus-stays.map-full .lus-stays__map { top: 46px !important; }
}
.elementor-editor-active .lus-stays__map-switch, .elementor-editor-active .lus-stays__map-toggle { display: none !important; } /* floating buttons only get in the way while editing */
/* ------------------------------------------- editor-only previews of the two widgets (stays/widgets.php) */
.lus-stays__list--preview { padding: 8px 0; }
.lus-stays__list--preview .lus-stays__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
.lus-stays__list--preview .lus-stays__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
.lus-preview-sort { font-size: 14px; color: var(--lus-muted); }
.lus-preview-sort b { margin-left: 6px; padding: 9px 16px; border: 1px solid var(--lus-line); border-radius: 999px; background: #fff; color: var(--lus-ink); font-weight: 500; }
.lus-stays__map--preview { position: relative; height: 640px; min-height: 240px; overflow: hidden; border-radius: 24px; box-shadow: var(--lus-shadow-lift);
background: linear-gradient(135deg, #cfe8f5 0%, #cfe8f5 38%, #e6efd9 38%, #e6efd9 100%); }
.lus-map-preview { position: absolute; inset: 0; }
.lus-map-preview em { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-style: normal; font-size: 13px; color: #57534e; }
.lus-map-pin { position: absolute; padding: 6px 11px; border-radius: 999px; background: #fff; color: #1c1917; font: 600 13px/1 inherit; box-shadow: 0 2px 6px rgba(28, 25, 23, .22); transform: translate(-50%, -50%); }
.lus-map-pin--on { background: #1c1917; color: #fff; }
.lus-map-dot { position: absolute; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; background: #1c1917; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 14px; box-shadow: 0 0 0 6px rgba(28, 25, 23, .18); }
/* Hide map in an Elementor-built layout: drop the map's container and let the results container take the width */
@media (min-width: 861px) {
.lus-stays.map-hidden .lus-stays__free :is(.e-con, .elementor-element):has(> .elementor-widget-lus_stays_map) { display: none !important; }
.lus-stays.map-hidden .lus-stays__free :is(.e-con, .elementor-element):has(> .elementor-widget-lus_stays_results) { --width: 100% !important; width: 100% !important; max-width: none !important; }
.lus-stays.map-hidden .lus-stays__free .lus-stays__grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; }
}
/* ------------------------------------------- search + chips widgets: sticky bar container and spacing */
.elementor-widget-lus_stays_search, .elementor-widget-lus_stays_chips { width: 100%; }
.elementor-widget-lus_stays_search .lus-stays__bar { max-width: none; margin: 0; padding: 0; }
.elementor-widget-lus_stays_chips .lus-stays__chips { max-width: none; margin: 0; }
/* a container holding a sticky search / chips widget sticks under the site header */
.lus-stays__free .e-con:has(> .elementor-widget.lus-sticky-yes) {
position: sticky; top: var(--lus-header-h, 0px); z-index: 1100; background: rgba(251, 248, 245, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
@media (max-width: 860px) {
.lus-stays__free .e-con:has(> .elementor-widget.lus-sticky-yes) { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--lus-bg); } /* a blurred parent would trap the full-screen search sheet */
}
/* ------------------------------------------- extra Stays widgets: active filters, page header, listing grid, places */
.lus-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lus-active.is-empty:empty { display: none; }
.lus-active__empty { font-size: 14px; color: var(--lus-muted, #6b6560); }
.lus-active__pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 14px; border: 1px solid var(--lus-line, #e7e0d8); border-radius: 999px; background: #fff; color: var(--lus-ink); font: 500 14px/1 inherit; cursor: pointer; transition: border-color 160ms var(--lus-ease, ease), background 160ms var(--lus-ease, ease); }
.lus-active__pill:hover { border-color: var(--lus-ink); }
.lus-active__pill b { font-size: 18px; line-height: 1; font-weight: 400; opacity: .6; }
.lus-active__clear { border: 0; background: none; padding: 0 6px; font: 600 14px/1 inherit; color: var(--lus-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lus-archive-head { padding: 8px 0; }
.lus-archive-head__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--lus-muted, #6b6560); margin-bottom: 8px; }
.lus-archive-head__crumbs a { color: inherit; text-decoration: none; }
.lus-archive-head__crumbs a:hover { text-decoration: underline; }
.lus-archive-head__title { margin: 0; font-family: inherit; font-weight: 600; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; color: var(--lus-ink); }
.lus-archive-head__desc { margin: 12px 0 0; max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--lus-muted, #6b6560); }
.lus-archive-head__count { display: inline-block; margin-top: 12px; font-size: 14px; color: var(--lus-muted, #6b6560); }
.lus-block__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.lus-block__title { margin: 0; font-family: inherit; font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; color: var(--lus-ink); }
.lus-block__sub { margin: 6px 0 0; font-size: 15px; color: var(--lus-muted, #6b6560); }
.lus-block__link { font-size: 14px; font-weight: 600; color: var(--lus-ink); text-decoration: none; white-space: nowrap; }
.lus-block__link:hover { text-decoration: underline; }
.lus-block__empty { grid-column: 1 / -1; color: var(--lus-muted, #6b6560); }
.lus-stays__grid--static { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1024px) { .lus-stays__grid--static { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .lus-stays__grid--static { grid-template-columns: 1fr; } }
.lus-stayplaces { display: flex; flex-wrap: wrap; gap: 10px; }
.lus-stayplace { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--lus-ink); font-size: 15px; transition: border-color 160ms var(--lus-ease, ease), transform 160ms var(--lus-ease, ease); }
.lus-stayplaces--chips .lus-stayplace { height: 40px; padding: 0 16px; border: 1px solid var(--lus-line, #e7e0d8); border-radius: 999px; background: #fff; }
.lus-stayplaces--chips .lus-stayplace:hover { border-color: var(--lus-ink); }
.lus-stayplace__n { font-size: 12px; opacity: .55; }
.lus-stayplaces--list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 24px; }
.lus-stayplaces--list .lus-stayplace { justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--lus-line, #e7e0d8); border-radius: 0; background: none; }
.lus-stayplaces--list .lus-stayplace:hover .lus-stayplace__name { text-decoration: underline; }
.lus-stayplaces--tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lus-stayplaces--tiles .lus-stayplace { position: relative; isolation: isolate; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; min-height: 180px; padding: 16px; border-radius: 20px; overflow: hidden; background: var(--lus-tint, #f1ebe4) center / cover no-repeat; color: #fff; }
.lus-stayplaces--tiles .lus-stayplace::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(28, 25, 23, .62), rgba(28, 25, 23, .05) 60%); }
.lus-stayplaces--tiles .lus-stayplace:not(.has-img) { color: var(--lus-ink); }
.lus-stayplaces--tiles .lus-stayplace:not(.has-img)::before { background: none; }
.lus-stayplaces--tiles .lus-stayplace:hover { transform: translateY(-2px); }
.lus-stayplaces--tiles .lus-stayplace__name { font-family: inherit; font-size: 20px; line-height: 1.2; }
@media (max-width: 1024px) { .lus-stayplaces--tiles, .lus-stayplaces--list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* "Lift the photo on hover" (Stays Results widget) */
.lus-lift-yes .lus-stay:hover .lus-stay__media { transform: translateY(-3px); box-shadow: var(--lus-shadow-lift); }
.lus-lift-yes .lus-stay__media { transition: transform 200ms var(--lus-ease, ease), box-shadow 200ms var(--lus-ease, ease); }
/* Sticky bars need the page wrappers not to be scroll containers. The theme sets overflow hidden on them at <= 1024px,
which made the search bar scroll away on tablets and phones. `clip` still hides sideways overflow but does not trap sticky. */
@media (max-width: 1024px) {
html:has(.lus-stays) .website-wrapper,
html:has(.lus-stays) .full_map_container { overflow: clip !important; }
}
/* While a full-screen sheet (phone search, filters) is open, the sticky container that holds it must paint above any other sticky bar */
html.lus-sheet-open .lus-stays__free .e-con:has(.lus-search__bar) { z-index: 100001; }
/* ------------------------------------------- compact search: the full bar folds away while the header holds the pill (desktop) */
@media (min-width: 1025px) {
.lus-stays__bar { max-height: 96px; transition: max-height 260ms var(--lus-ease), opacity 180ms var(--lus-ease); }
body.lus-stays-compact .lus-stays__bar { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; margin-top: 0; margin-bottom: 0; }
/* the chips go too: the whole pinned strip folds away and comes back when the Filters or search buttons in the header are used */
.lus-stays__top { max-height: 260px; transition: max-height 260ms var(--lus-ease), opacity 180ms var(--lus-ease), padding 260ms var(--lus-ease); }
body.lus-stays-compact .lus-stays__top { max-height: 0; opacity: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; pointer-events: none; }
body.lus-stays-compact .lus-stays__free .e-con:has(> .elementor-widget.lus-sticky-yes) { max-height: 0 !important; opacity: 0; overflow: hidden; padding-top: 0 !important; padding-bottom: 0 !important; border-width: 0 !important; pointer-events: none; }
.lus-stays__free .e-con:has(> .elementor-widget.lus-sticky-yes) { transition: max-height 260ms var(--lus-ease), opacity 180ms var(--lus-ease), padding 260ms var(--lus-ease); }
/* pill: the Filters button at its end */
.lus-header-pill__filters { display: grid; place-items: center; width: 36px; height: 36px; margin-left: 6px; border: 1px solid var(--lus-line); border-radius: 50%; background: #fff; color: var(--lus-ink); cursor: pointer; transition: border-color var(--lus-dur) var(--lus-ease); }
.lus-header-pill__filters:hover { border-color: var(--lus-ink); }
}
/* One font everywhere: the map's cluster numbers and labels use the theme font, not the map library's Helvetica */
.lus-stays .leaflet-container, .lus-stays .leaflet_cluster, .lus-stays .leaflet-popup-content { font-family: inherit; }
/* ------------------------------------------- map controls
Desktop: "Hide map" is a button on the map itself (bottom left); the floating pill shows only while the map is hidden, to bring it back.
Phone: the Map button is a round icon at the side, not a wide pill over the cards.
Map view (phone map layer, full-screen map): no search / filters / chips / hearts; the map widget must not stay a sticky layer,
or its full-screen layer cannot rise above the pinned bar. */
.lus-stays__map-hide { display: none; }
@media (min-width: 861px) {
.lus-stays__map-hide {
display: inline-flex; align-items: center; gap: 8px; position: absolute; left: 16px; bottom: 16px; z-index: 1200;
height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--lus-ink); color: #fff; font: 600 14px/1 inherit; cursor: pointer;
box-shadow: 0 6px 18px rgba(28, 25, 23, .3); transition: transform var(--lus-dur) var(--lus-ease), box-shadow var(--lus-dur) var(--lus-ease);
}
.lus-stays__map-hide:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(28, 25, 23, .36); }
.lus-stays__map-hide:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 4px var(--lus-ink); }
.lus-stays:not(.map-hidden) .lus-stays__map-switch { display: none; }
.lus-stays.map-full .lus-stays__map-hide { display: none; }
}
@media (max-width: 860px) {
.lus-stays__map-toggle { left: auto; right: 16px; transform: none; width: 52px; height: 52px; padding: 0; justify-content: center; gap: 0; }
.lus-stays__map-toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.elementor-widget-lus_stays_map { position: static !important; }
}
.lus-stays.map-open .lus-stays__top, .lus-stays.map-full .lus-stays__top,
.lus-stays.map-open .lus-stays__free .e-con:has(> .elementor-widget.lus-sticky-yes),
.lus-stays.map-full .lus-stays__free .e-con:has(> .elementor-widget.lus-sticky-yes) { display: none !important; }
.lus-stays.map-open .lus-stay__fav, .lus-stays.map-full .lus-stay__fav { display: none !important; }
.lus-stays.map-full .elementor-widget-lus_stays_map { position: static !important; }
/* The map never runs past the bottom of the window: its height is capped to the space left under the header and the pinned strip
(a fixed 70vh tall map starts lower while the strip is showing, and its bottom edge - rounded corners, the Hide map button - fell off the screen). */
@media (min-width: 861px) {
.lus-stays:not(.map-full) .lus-stays__map {
max-height: calc(100vh - var(--lus-header-h, 90px) - var(--lus-top-h, 120px) - 32px);
min-height: min(420px, calc(100vh - var(--lus-header-h, 90px) - var(--lus-top-h, 120px) - 32px));
}
}
/* A map set to stay in view fills the window from the header (and the pinned strip, if showing) down to the bottom edge, in both the
unfolded and the folded state, instead of keeping one fixed height and leaving a gap below once the strip folds away. */
@media (min-width: 861px) {
.lus-stays:not(.map-full) .lus-map-sticky-sticky .lus-stays__map { height: calc(100vh - var(--lus-header-h, 90px) - var(--lus-top-h, 120px) - 32px) !important; }
}
/* A card whose pin is being hovered on the map */
.lus-stay.is-map-hover .lus-stay__media { box-shadow: 0 0 0 3px var(--lus-ink), var(--lus-shadow-lift); }
.lus-stay.is-map-hover .lus-stay__title { text-decoration: underline; text-underline-offset: 3px; }
/* The theme's round back-to-top arrow sits on top of the map on this page: not needed here */
.lus-stays-page .backtop { display: none !important; }
/* Amenity icons in the filter drawer (the SVG set on each amenity in the theme options) */
.lus-drawer label.lus-check .lus-check__icon { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: 0; font-style: normal; color: var(--lus-ink); }
.lus-drawer label.lus-check .lus-check__icon svg { width: 22px; height: 22px; max-width: 100%; fill: currentColor; }
/* The header (z-index 1003 in the theme) sat under the pinned search strip (1100), which cut off the Support dropdown. Above the strip, below the drawers (100001+). */
.lus-stays-page .master_header, .lus-stays-page .master_header.google_map_list_header { z-index: 1200; }
/* Property type chips: the type's icon (set on the type in the theme options) and a smaller label */
.lus-chip--type { gap: 7px; padding: 0 14px 0 12px; font-size: 13px; }
.lus-seg-row .lus-chip--type { height: 36px; }
.lus-chip__icon { flex: none; display: grid; place-items: center; width: 18px; height: 18px; font-style: normal; }
.lus-chip__icon svg { width: 18px; height: 18px; max-width: 100%; fill: currentColor; }
.lus-chip--type:not(:has(.lus-chip__icon)) { padding-left: 14px; }
/* Map pop-up card on the results map (js/lus-map-popup-address.js): the same card as in the list (.lus-stay__*), in a white rounded frame. */
:is(.lus-stays, .lus-pp) .lus-popcard-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 20px !important; background: #fff !important; box-shadow: 0 14px 38px rgba(28, 25, 23, .26), 0 0 0 1px rgba(28, 25, 23, .06) !important; overflow: hidden; }
:is(.lus-stays, .lus-pp) .lus-popcard-popup .leaflet-popup-content { margin: 0 !important; width: 320px !important; }
:is(.lus-stays, .lus-pp) .lus-popcard-popup .leaflet-popup-tip { background: #fff !important; box-shadow: 0 4px 10px rgba(28, 25, 23, .14) !important; }
:is(.lus-stays, .lus-pp) .lus-popcard { width: 320px; max-width: 100%; background: #fff; color: var(--lus-ink); font-family: inherit; text-align: left; }
:is(.lus-stays, .lus-pp) .lus-popcard a { text-decoration: none; color: inherit !important; }
:is(.lus-stays, .lus-pp) .lus-popcard .lus-stay__media { border-radius: 20px 20px 0 0; box-shadow: none; aspect-ratio: 3 / 2; }
:is(.lus-stays, .lus-pp) .lus-popcard .lus-stay__body { padding: 14px 18px 18px; }
:is(.lus-stays, .lus-pp) .lus-popcard .lus-stay__title { font-size: 16px; margin-top: 2px; }
:is(.lus-stays, .lus-pp) .lus-popcard .lus-stay__price { margin-top: 10px; }
:is(.lus-stays, .lus-pp) .lus-popcard .lus-stay__price strong, :is(.lus-stays, .lus-pp) .lus-popcard .lus-popcard__amount { font-size: 17px; font-weight: 600; color: var(--lus-ink); }
:is(.lus-stays, .lus-pp) .lus-popcard .wprentals-pin-price { font-size: 17px; font-weight: 600; color: var(--lus-ink) !important; }
:is(.lus-stays, .lus-pp) .lus-popcard .wprentals-pin-period { margin-left: 2px; font-size: 14px; font-weight: 400; color: var(--lus-muted) !important; }
:is(.lus-stays, .lus-pp) .lus-popcard .wprentals-price-range { display: none !important; }
/* the heart sits left of the close button; the close button takes the top-right corner */
:is(.lus-stays, .lus-pp) .lus-popcard .lus-stay__fav { right: 52px; }
:is(.lus-stays, .lus-pp) .lus-popcard #infocloser.lus-popcard__x {
position: absolute; top: 10px; right: 10px; z-index: 4; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; opacity: 1;
background: rgba(255, 255, 255, .94) none; transition: transform var(--lus-dur) var(--lus-ease), background var(--lus-dur) var(--lus-ease);
}
:is(.lus-stays, .lus-pp) .lus-popcard #infocloser::before, :is(.lus-stays, .lus-pp) .lus-popcard #infocloser::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; border-radius: 1px; background: var(--lus-ink); transform: translate(-50%, -50%) rotate(45deg); }
:is(.lus-stays, .lus-pp) .lus-popcard #infocloser::after { transform: translate(-50%, -50%) rotate(-45deg); }
:is(.lus-stays, .lus-pp) .lus-popcard #infocloser:hover { transform: scale(1.08); background: #fff; }
@media (max-width: 480px) {
:is(.lus-stays, .lus-pp) .lus-popcard-popup .leaflet-popup-content, :is(.lus-stays, .lus-pp) .lus-popcard { width: 270px !important; }
}
/* Featured amenities (the starred ones in Listings > Features & Amenities) on the stay card */
.lus-stay__amen { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.lus-stay__amen li { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--lus-line); border-radius: 999px; background: var(--lus-surface); color: var(--lus-ink); font-size: 12.5px; font-weight: 500; line-height: 1; white-space: nowrap; }
.lus-stay__amen i { display: grid; place-items: center; width: 18px; height: 18px; font-style: normal; }
.lus-stay__amen svg { width: 18px; height: 18px; max-width: 100%; fill: currentColor; }
.lus-stay__amen-more { color: var(--lus-muted) !important; padding: 0 9px; }
/* Featured amenity chips: the name shows in a small dark label above the icon on hover / keyboard focus */
.lus-stay__amen li { position: relative; }
.lus-stay__amen li[data-name]::after {
content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 20; transform: translate(-50%, 4px);
padding: 6px 10px; border-radius: 8px; background: var(--lus-ink); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap;
box-shadow: 0 4px 14px rgba(28, 25, 23, .25); opacity: 0; pointer-events: none; transition: opacity 140ms var(--lus-ease), transform 140ms var(--lus-ease);
}
.lus-stay__amen li[data-name]::before {
content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); z-index: 20; width: 8px; height: 8px; background: var(--lus-ink); opacity: 0; pointer-events: none;
transform: translate(-50%, 4px) rotate(45deg); transition: opacity 140ms var(--lus-ease), transform 140ms var(--lus-ease);
}
.lus-stay__amen li[data-name]:hover::after, .lus-stay__amen li[data-name]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.lus-stay__amen li[data-name]:hover::before, .lus-stay__amen li[data-name]:focus-visible::before { opacity: 1; transform: translate(-50%, 0) rotate(45deg); }
.lus-stay__amen li { cursor: default; }
/* The label is anchored to the chip's edge instead of centred on it, so a long name never runs past the card's side and gets cut off:
the first three chips open towards the right, the rest towards the left. */
.lus-stay__amen li[data-name]::after { left: 0; right: auto; transform: translateY(4px); max-width: 220px; white-space: normal; width: max-content; }
.lus-stay__amen li[data-name]:hover::after, .lus-stay__amen li[data-name]:focus-visible::after { transform: translateY(0); }
.lus-stay__amen li[data-name]::before { left: 14px; }
.lus-stay__amen li[data-name]:nth-child(n+4)::after { left: auto; right: 0; }
.lus-stay__amen li[data-name]:nth-child(n+4)::before { left: auto; right: 12px; }
.lus-stay__amen li[data-name]::before { transform: translateY(4px) rotate(45deg); }
.lus-stay__amen li[data-name]:hover::before, .lus-stay__amen li[data-name]:focus-visible::before { transform: translateY(0) rotate(45deg); }
svg.lus-ti { fill: none !important; stroke: currentColor; }