/* ═══════════════════════════════════════════════════════════════════════════
 * Unit search V2 — design tokens + wrapper reset
 *
 * All rules are scoped under `.unit-search-v2` so they don't bleed into the
 * rest of the site — the legacy CSS bundles loaded by UnitSearchAsset still
 * style header, footer, modals, and shared widgets without conflict.
 *
 * Slice 01 owns only the wrapper, design-token variables, and Poppins
 * font-family. Per-section rules (filter sidebar, cards, pager, drawer,
 * chips, active filters, page header) land in subsequent slices.
 * ═══════════════════════════════════════════════════════════════════════════ */

.unit-search-v2 {
  /* ── palette ───────────────────────────────────────────────────────── */
  --usv2-navy: #0F1B2D;
  --usv2-navy-light: #1A2B42;
  --usv2-accent: #E8513D;
  --usv2-accent-hover: #D4432F;
  --usv2-blue: #1A6FB5;
  --usv2-sand: #F8F7F4;
  --usv2-sand-dark: #EFEDE8;
  --usv2-white: #FFFFFF;
  --usv2-charcoal: #333;
  --usv2-gray-50: #F9FAFB;
  --usv2-gray-100: #F3F4F6;
  --usv2-gray-200: #E5E7EB;
  --usv2-gray-300: #D1D5DB;
  --usv2-gray-400: #9CA3AF;
  --usv2-gray-500: #6B7280;
  --usv2-gray-600: #4B5563;
  --usv2-gray-700: #374151;
  --usv2-green: #16A34A;
  --usv2-bright-green: #22C55E;
  --usv2-orange: #F97316;
  --usv2-amber: #F59E0B;
  --usv2-purple: #7C3AED;

  /* ── radii / shadows / motion ──────────────────────────────────────── */
  --usv2-radius: 8px;
  --usv2-radius-sm: 6px;
  --usv2-radius-lg: 12px;
  --usv2-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --usv2-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --usv2-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --usv2-shadow-lg: 0 10px 25px -3px rgba(0,0,0,.12), 0 4px 6px -4px rgba(0,0,0,.07);
  --usv2-transition: 150ms ease;

  /* ── layout ────────────────────────────────────────────────────────── */
  --usv2-sidebar-w: 280px;
  --usv2-header-h: 60px;

  /* ── wrapper-scoped typography ─────────────────────────────────────── */
  font-family: 'Poppins', 'Antenna', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--usv2-charcoal);
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Legacy CSS reset
 *
 * The site-wide bundles loaded by UnitSearchAsset (compress/main.min.css,
 * compress/search-map.min.css, compress/map-off.min.css, main-mobile.min.css,
 * responsive.min.css, new-design-fixes.min.css, nav.min.css) apply rules to
 * bare HTML5 element selectors and shared class names that the v2 markup
 * also uses. The overrides below neutralize those rules inside the v2
 * wrapper so v2 styles aren't fighting the legacy ones.
 *
 * Audit summary (rules found, scope, fix):
 *
 *   compress/main.min.css     | section{padding:50px 0}                 | site-wide  | reset below
 *   compress/map-off.min.css  | footer{margin-top:70px;background:#eee; | site-wide  | reset on .drawer-footer
 *                             |  padding:30px 0 0;font-size:14px}        |            |
 *   compress/main.min.css     | .main-list-search .pagination{           | site-wide  | reset !important below
 *                             |  margin:0!important;width:100%}          |            |
 *   responsive.min.css        | section{margin:0 -15px}                  | <=767px    | reset in @media below
 *   responsive.min.css        | section{transition:.2s;height:0;         | <=767px    | reset in @media below — would
 *                             |  padding:0;opacity:0}                    |            | otherwise HIDE filter sections
 *
 *   compress/search-map.min.css | #property-list .card{...}              | scoped     | dropped by renaming the
 *                             | #property-list.active{...!important}     | by id      | ListView id to
 *                             | #property-list .empty{...}               |            | property-list-v2
 *
 * Class-name conflicts whose specificity is already beaten by our class
 * selectors (.unit-search-v2 .X is 0,2,0; legacy .X is 0,1,0) need no
 * extra reset: .title, .list-search-info, .in-border, .yacht-charters-near,
 * .loading_bar, .card (bare).
 * ═══════════════════════════════════════════════════════════════════════════ */

.unit-search-v2 section,
.unit-search-v2 .filter-section {
    padding: 0;
    margin: 0;
    height: auto;
    opacity: 1;
    transition: none;
    overflow: visible;
}

.unit-search-v2 footer.drawer-footer {
    margin: 0;
    background: var(--usv2-white);
    font-size: inherit;
    clear: none;
    /* drawer-footer's own padding + flex layout are reapplied in the
     * @media (max-width:860px) block below. */
}

/* Defeat `.main-list-search .pagination{margin:0!important;width:100%}`
 * with matched-or-higher specificity + same !important. */
.unit-search-v2 .main-list-search nav.pagination {
    margin: 28px 0 0 !important;
    width: auto;
    padding: 0;
    border-radius: 0;
}

@media (max-width: 767px) {
    /* Mobile-only `section{height:0;padding:0;opacity:0}` rule in
     * responsive.min.css would HIDE every <section class="filter-section">
     * inside the v2 sidebar (and the mobile drawer). */
    .unit-search-v2 section,
    .unit-search-v2 .filter-section {
        margin: 0;
        padding: 0;
        height: auto;
        opacity: 1;
        transition: none;
        overflow: visible;
    }
}

/* Layout wrappers — replace the legacy float-based 2-column with flex.
 *
 * The legacy `.wapper` / `.map_block` / `.map_block_left` / `.map_block_right`
 * rules in compress/map-off.min.css were designed around the legacy 94px-tall
 * site nav: `.map_block{padding:90px 15px 0!important}` pushes content down
 * to clear the sticky nav, `.map_block_left{margin-top:75px;width:300px}`
 * positions the sidebar below the search header. v2 doesn't share that nav
 * geometry; these rules need replacing rather than tweaking.
 *
 * The mobile-only `.map_block_left{display:none;height:0}` from
 * responsive.min.css would hide our sidebar AND the fixed mobile drawer
 * inside it, because hiding the parent hides its children regardless of
 * `position:fixed`. The override below keeps `.map_block_left` rendered as
 * a 0×0 box on mobile so the fixed-positioned `.sidebar` inside it can
 * escape and render normally.
 */
.unit-search-v2 .wapper {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0;
    width: auto;
}
.unit-search-v2 .map_block {
    display: flex;
    gap: 24px;
    /* Top padding clears the site's sticky nav (HeaderMenuWidget). The
     * legacy `.map_block{padding:90px 15px 0!important}` rule used the
     * same 90px offset; keeping that figure ensures the v2 page-title
     * and breadcrumb don't render under the nav on initial load. */
    padding: 90px 24px 40px !important;
    height: auto;
    position: static;
    margin: 0;
}
.unit-search-v2 .map_block_left {
    flex: 0 0 var(--usv2-sidebar-w);
    width: var(--usv2-sidebar-w);
    margin: 0;
    padding: 0;
    float: none;
    height: auto;
    display: block;
}
.unit-search-v2 .map_block_right {
    flex: 1;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    float: none;
    height: auto;
    position: static;
    background: transparent;
}

@media (max-width: 860px) {
    .unit-search-v2 .map_block {
        gap: 0;
        /* Mobile keeps the nav clearance but adds bottom padding so the
         * floating mobile-filter button doesn't overlap the last cards. */
        padding: 30px 16px 100px !important;
    }
    .unit-search-v2 .map_block_left {
        /* keep `display: block` to defeat the mobile `display:none`
         * legacy rule; collapse to 0×0 so the fixed-positioned drawer
         * inside doesn't reserve any inline space. */
        display: block !important;
        flex: 0 0 0;
        width: 0;
        height: 0;
        overflow: visible;
    }
}

/* Cards grid — ListView renders <div class="property-list-row"> wrapping
 * each <article class="card"> item. Apply the mockup's 3-col grid (line 171
 * of boatcrowd-search-filters.html) and the responsive breakpoints (lines
 * 231-243) so cards lay out side-by-side instead of stacking full-width. */
.unit-search-v2 .property-list-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
}
@media (max-width: 1100px) {
    .unit-search-v2 .property-list-row {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .unit-search-v2 .property-list-row {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Yacht card (slice 02)
 *
 * The card outer wrapper is rendered by ListView's itemOptions. _list_v2.php
 * fills the inner content: a card-wide <a class="card__link"> that absolute-
 * positions over the card to make the whole article clickable, plus the
 * image area (with carousel + badges + discount + favorite button) and the
 * body (name, type, meta icons, price, specs).
 *
 * z-index layers inside .card:
 *   .card__link        — z=1 (clickable surface beneath everything else)
 *   .card__badges      — z=2 (overlaid on image)
 *   .card__discount    — z=2 (overlaid on image)
 *   carousel arrows    — z=9 (above link, so click swipes slide)
 *   .card__compare     — z=10 (above everything; favorite toggle wins)
 * ═══════════════════════════════════════════════════════════════════════════ */

.unit-search-v2 .card {
    background: var(--usv2-white);
    border-radius: var(--usv2-radius-lg);
    overflow: hidden;
    border: 1px solid var(--usv2-gray-200);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
    cursor: pointer;
    position: relative;
}
.unit-search-v2 .card:hover {
    box-shadow: var(--usv2-shadow-lg);
    border-color: var(--usv2-gray-300);
    transform: translateY(-2px);
}
.unit-search-v2 .card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.unit-search-v2 .card__img {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--usv2-gray-100);
}
.unit-search-v2 .card__img img.bc-images-slider {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.unit-search-v2 .card__badges {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    z-index: 2;
}
.unit-search-v2 .card__badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: .65rem;
    font-weight: 600;
    color: var(--usv2-white);
    text-transform: none;
    letter-spacing: .2px;
}
/* Position-based badge variants (no keyword matching):
 *   --cta-left  → green  (popularity / newness narrative)
 *   --cta-right → orange (limited offer / urgency narrative)
 * Whatever text Unit::ctaLeftText / ctaRightText returns gets the same
 * color regardless of label content. */
.unit-search-v2 .card__badge--cta-left  { background: var(--usv2-green); }
.unit-search-v2 .card__badge--cta-right { background: var(--usv2-orange); }

/* Price-reduction overlay — bright green so it reads as "savings" (a
 * distinct cue from the regular green ctaLeft badge). Sits at the
 * top-left while .card__badges anchors at the bottom-left, so a yacht
 * with both a discount AND CTAs shows the two layers without overlap. */
.unit-search-v2 .card__discount {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--usv2-bright-green);
    color: var(--usv2-white);
    padding: 3px 8px;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 700;
    z-index: 2;
}

.unit-search-v2 .card__compare {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--usv2-transition), box-shadow var(--usv2-transition);
    border: none;
    z-index: 10;
    padding: 0;
}
.unit-search-v2 .card__compare:hover {
    background: var(--usv2-white);
    box-shadow: var(--usv2-shadow);
}
.unit-search-v2 .card__compare i.fa {
    color: var(--usv2-accent);
    font-size: 14px;
    line-height: 1;
}
.unit-search-v2 .card__compare.is-favourite i.fa,
.unit-search-v2 .card__compare i.fa-heart {
    color: var(--usv2-accent);
}

/* Card body */
.unit-search-v2 .card__body {
    padding: 12px 14px 14px;
    position: relative;
}
.unit-search-v2 .card__name {
    font-size: .88rem;
    font-weight: 700;
    color: var(--usv2-navy);
    text-transform: uppercase;
    letter-spacing: .3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.unit-search-v2 .card__type {
    font-size: .72rem;
    color: var(--usv2-gray-500);
    margin-top: 2px;
}

/* ─── Hover tooltip on the card type label (v1 parity) ───
   Mirrors the legacy `.yacht-charter-title-box → .boat-title-description`
   tooltip from `unit/index.php` so users browsing v2 get the same
   long-form description on hover without the v2 card layout ballooning
   vertically. The wrapper is the hover target (so the visible label
   triggers the popup), and the popup is absolute-positioned above with
   a downward-pointing arrow tail. Scoped under `.unit-search-v2` so the
   v1 disc tooltip on shared classes (used by other surfaces) keeps its
   original look. */
.unit-search-v2 .card__type-wrap {
    position: relative;
    /* The card-wide `.card__link` overlay sits at `z-index: 1` covering
       the entire card, which means mouse hover hits the link, not this
       wrapper underneath — so `:hover` never fires on `.card__type-wrap`
       and the tooltip stays hidden. Lifting the wrapper to `z-index: 2`
       puts it on top of the overlay for hover/cursor detection.
       Tradeoff: clicking the type text no longer navigates to the detail
       page (the link is below). Clicking the image, name, or any other
       area still navigates — the type label just becomes a hover target.
       `cursor: help` cues the user that the line is informational, not a
       link, so they don't expect a click to do anything. */
    z-index: 2;
    cursor: help;
}
.unit-search-v2 .boat-title-description {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    max-width: 260px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, .9);
    color: #fff;
    font-size: 11px;
    line-height: 14px;
    border-radius: 6px;
    z-index: 9;
    pointer-events: none;
    white-space: normal;
}
.unit-search-v2 .boat-title-description::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 18px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid rgba(0, 0, 0, .9);
}
.unit-search-v2 .card__type-wrap:hover .boat-title-description {
    display: block;
}
.unit-search-v2 .card__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    font-size: .72rem;
    color: var(--usv2-gray-500);
}
.unit-search-v2 .card__meta-item {
    display: flex;
    align-items: center;
    gap: 3px;
}
.unit-search-v2 .card__meta-item svg {
    width: 14px;
    height: 14px;
    stroke: var(--usv2-gray-400);
    fill: none;
    stroke-width: 1.5;
}
.unit-search-v2 .card__footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--usv2-gray-100);
}
.unit-search-v2 .card__price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--usv2-accent);
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.unit-search-v2 .card__price-current {
    /* default; .card__price already styles */
}
.unit-search-v2 .card__price-original {
    font-size: .75rem;
    font-weight: 400;
    color: var(--usv2-gray-400);
    text-decoration: line-through;
}
.unit-search-v2 .card__price-unit {
    font-size: .72rem;
    font-weight: 400;
    color: var(--usv2-gray-400);
}
.unit-search-v2 .card__specs {
    font-size: .68rem;
    color: var(--usv2-gray-400);
    text-align: right;
    line-height: 1.4;
    flex-shrink: 1;
    min-width: 0;
}

/* Carousel inside the card. Reuses the slider class names from the legacy
 * card so the same DOM structure (slides + prev/next buttons) drives the
 * v2 slider via the unit-search-v2.js handlers. */
.unit-search-v2 .card__carousel {
    position: relative;
    width: 100%;
    height: 100%;
}
.unit-search-v2 .yacht-charter-slider-inner {
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.unit-search-v2 .yacht-charter-slider-inner .yacht-charter-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    text-align: center;
    padding: 0;
    transition: opacity .2s ease-in;
    opacity: 0;
    visibility: hidden;
}
.unit-search-v2 .yacht-charter-slider-inner .yacht-charter-slide.charter-slide-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
}
.unit-search-v2 .yacht-charter-button-navigation {
    opacity: 0;
    transition: opacity .3s ease-in-out;
}
.unit-search-v2 .card:hover .yacht-charter-button-navigation {
    opacity: 1;
}
.unit-search-v2 .yacht-charter-button-next,
.unit-search-v2 .yacht-charter-button-previous {
    width: 32px;
    height: 32px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    border: none;
    padding: 0;
    /* Dark translucent puck — `/images/arrow-white.png` is white, so the
     * old translucent-white background made the arrow invisible.
     * Hover deepens the dim a touch for affordance. */
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    transition: background var(--usv2-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}
.unit-search-v2 .yacht-charter-button-next:hover,
.unit-search-v2 .yacht-charter-button-previous:hover {
    background: rgba(0, 0, 0, 0.65);
}
.unit-search-v2 .yacht-charter-button-next {
    right: 10px;
}
.unit-search-v2 .yacht-charter-button-previous {
    left: 10px;
}
.unit-search-v2 .yacht-charter-button-previous img {
    transform: rotate(90deg);
    width: 16px;
    height: 16px;
}
.unit-search-v2 .yacht-charter-button-next img {
    transform: rotate(270deg);
    width: 16px;
    height: 16px;
}

@media (max-width: 600px) {
    .unit-search-v2 .yacht-charter-button-navigation {
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Pagination (slice 03)
 *
 * V2LinkPager renders a flat sequence of <a class="page-btn"> directly inside
 * <nav class="pagination">. Active page gets `.active`; disabled prev/next
 * (when on first/last page) get `.disabled` and render as <span> rather than
 * <a>, so they're inert without any JS guard.
 * ═══════════════════════════════════════════════════════════════════════════ */

.unit-search-v2 nav.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 28px;
    padding: 0;
    list-style: none;
}
.unit-search-v2 .page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: var(--usv2-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 500;
    color: var(--usv2-gray-600);
    border: 1px solid var(--usv2-gray-200);
    background: var(--usv2-white);
    cursor: pointer;
    transition: border-color var(--usv2-transition), color var(--usv2-transition), background var(--usv2-transition);
    text-decoration: none;
    line-height: 1;
}
.unit-search-v2 .page-btn:hover {
    border-color: var(--usv2-blue);
    color: var(--usv2-blue);
}
.unit-search-v2 .page-btn.active,
.unit-search-v2 .page-btn.active:hover {
    background: var(--usv2-navy);
    color: var(--usv2-white);
    border-color: var(--usv2-navy);
    cursor: default;
}
.unit-search-v2 .page-btn.disabled {
    opacity: .4;
    cursor: default;
    pointer-events: none;
}
.unit-search-v2 .page-btn .fa {
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Filter sidebar — core (slice 04)
 *
 * The sidebar wraps the v2 filter form (`#form-sales-search`). The form's
 * input names / IDs / classes match the legacy widget so that
 * functionUnitSearchNoMap.js still picks them up unchanged — only the
 * surrounding markup and visual treatment change.
 *
 * Slice 04 ships the form scaffold + 5 expanded-by-default sections.
 * Slice 05 expands the panel with the 5 collapsed-by-default sections
 * + the Reset button. Slice 06 layers the mobile-drawer behavior on top
 * of the same markup via CSS at narrow viewports.
 * ═══════════════════════════════════════════════════════════════════════════ */

.unit-search-v2 .sidebar {
    width: var(--usv2-sidebar-w);
    flex-shrink: 0;
}
/* The <form id="form-sales-search"> wrapper around .filter-panel is
 * structurally invisible to CSS — it carries no class so legacy rules
 * targeting `.form-search.active` don't apply to it. Children render
 * exactly as the mockup does. */
.unit-search-v2 #form-sales-search {
    margin: 0;
    padding: 0;
}
.unit-search-v2 .filter-panel {
    background: var(--usv2-white);
    border-radius: var(--usv2-radius-lg);
    border: 1px solid var(--usv2-gray-200);
    overflow: hidden;
}

/* Filter section frame */
.unit-search-v2 .filter-section {
    border-bottom: 1px solid var(--usv2-gray-100);
}
.unit-search-v2 .filter-section:last-child {
    border-bottom: none;
}
.unit-search-v2 .filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    transition: background var(--usv2-transition);
    gap: 8px;
}
.unit-search-v2 .filter-header:hover {
    background: var(--usv2-gray-50);
}
.unit-search-v2 .filter-title {
    font-size: .78rem;
    font-weight: 600;
    color: var(--usv2-navy);
    text-transform: uppercase;
    letter-spacing: .4px;
    flex: 1;
}
.unit-search-v2 .filter-count {
    display: none;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--usv2-blue);
    color: var(--usv2-white);
    font-size: .65rem;
    font-weight: 700;
    text-align: center;
    line-height: 18px;
}
.unit-search-v2 .filter-section.has-active .filter-count {
    display: inline-block;
}
.unit-search-v2 .filter-chevron {
    width: 16px;
    height: 16px;
    color: var(--usv2-gray-400);
    transition: transform .2s ease;
    flex-shrink: 0;
}
.unit-search-v2 .filter-section.collapsed .filter-chevron {
    transform: rotate(-90deg);
}
.unit-search-v2 .filter-body {
    padding: 0 16px 14px;
    display: block;
}
.unit-search-v2 .filter-section.collapsed .filter-body {
    display: none;
}

/* Toggle group (Day/Week, ft/m, Built/Refit) — radio inputs hidden,
 * adjacent label styled per :checked state. Pure-CSS active swap means
 * the input change event still fires natively, so the existing JS
 * URL-builder picks up the change without an extra wire. */
.unit-search-v2 .toggle-group {
    display: inline-flex;
    border: 1px solid var(--usv2-gray-200);
    border-radius: var(--usv2-radius);
    overflow: hidden;
    position: relative;
}
.unit-search-v2 .toggle-radio {
    /* Override legacy `input[type=radio]{display:none}` (top-level rule in
     * compress/search-map.min.css). With `display:none` the
     * `.toggle-radio:checked + .toggle-btn` sibling selector can't reliably
     * re-render the label visual when the radio toggles via JS or via
     * label-for clicks in some browsers. Force the radio rendered (but
     * visually hidden via opacity + 0 size) so the :checked state actually
     * triggers the adjacent-sibling style swap. */
    display: inline-block !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
}
.unit-search-v2 .toggle-btn {
    padding: 6px 14px;
    font-size: .75rem;
    font-weight: 500;
    color: var(--usv2-gray-600);
    background: var(--usv2-white);
    border: none;
    cursor: pointer;
    transition: all var(--usv2-transition);
    margin: 0;
    line-height: 1.4;
}
.unit-search-v2 .toggle-btn:hover {
    background: var(--usv2-gray-50);
}
.unit-search-v2 .toggle-radio:checked + .toggle-btn {
    background: var(--usv2-navy);
    color: var(--usv2-white);
}
.unit-search-v2 .unit-toggle {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}

/* Checkboxes — input hidden, sibling .check-box styled. The .check-item
 * label wraps everything so clicking anywhere on the row toggles the
 * input via the native label-for behavior. */
.unit-search-v2 .check-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.unit-search-v2 .check-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 4px;
    border-radius: var(--usv2-radius-sm);
    cursor: pointer;
    transition: background var(--usv2-transition);
    margin: 0;
}
.unit-search-v2 .check-item:hover {
    background: var(--usv2-gray-50);
}
.unit-search-v2 .check-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.unit-search-v2 .check-box {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--usv2-gray-300);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--usv2-transition);
}
.unit-search-v2 .check-input:checked + .check-box {
    background: var(--usv2-blue);
    border-color: var(--usv2-blue);
}
.unit-search-v2 .check-box svg {
    width: 10px;
    height: 10px;
    fill: none;
    stroke: var(--usv2-white);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity var(--usv2-transition);
}
.unit-search-v2 .check-input:checked + .check-box svg {
    opacity: 1;
}
.unit-search-v2 .check-label {
    font-size: .8rem;
    color: var(--usv2-gray-700);
    font-weight: 400;
    flex: 1;
}
.unit-search-v2 .check-count {
    font-size: .7rem;
    color: var(--usv2-gray-400);
    font-weight: 400;
}

/* Stepper input (guests / sleep / cabins) */
.unit-search-v2 .stepper-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    gap: 8px;
}
.unit-search-v2 .stepper-row + .stepper-row {
    margin-top: 4px;
}
.unit-search-v2 .stepper-label {
    font-size: .8rem;
    color: var(--usv2-gray-700);
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}
.unit-search-v2 .stepper-icon {
    width: 16px;
    height: 16px;
    color: var(--usv2-gray-400);
    flex-shrink: 0;
}
.unit-search-v2 .stepper {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--usv2-gray-200);
    border-radius: var(--usv2-radius);
    overflow: hidden;
    flex-shrink: 0;
}
.unit-search-v2 .stepper-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--usv2-gray-500);
    background: var(--usv2-white);
    border: none;
    cursor: pointer;
    transition: all var(--usv2-transition);
    padding: 0;
    line-height: 1;
}
.unit-search-v2 .stepper-btn:hover {
    background: var(--usv2-gray-50);
    color: var(--usv2-navy);
}
.unit-search-v2 .stepper-btn:active {
    background: var(--usv2-gray-100);
}
.unit-search-v2 .stepper-val {
    width: 36px;
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    color: var(--usv2-navy);
    border-left: 1px solid var(--usv2-gray-200);
    border-right: 1px solid var(--usv2-gray-200);
    border-top: none;
    border-bottom: none;
    padding: 0;
    background: var(--usv2-white);
    -moz-appearance: textfield;  /* hide spinner on Firefox */
}
.unit-search-v2 .stepper-val::-webkit-outer-spin-button,
.unit-search-v2 .stepper-val::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.unit-search-v2 .stepper-val:focus {
    outline: none;
}

/* Range inputs (Price / Length / Year ranges).
 *
 * `.range-field` is a flex container so a `.range-prefix` (e.g. currency
 * symbol "HK$", "$", "€") can sit beside the input without colliding with
 * the value — the prefix takes only the width it needs, the input flexes
 * to fill the rest. The border lives on the field wrapper now (not the
 * input), and `:focus-within` swaps it to the accent color when the
 * inner input is focused. Single multi-char currency prefixes like
 * "HK$" or "AED " just work without any padding tuning. */
.unit-search-v2 .range-inputs {
    display: flex;
    gap: 8px;
    align-items: center;
}
.unit-search-v2 .range-field {
    flex: 1;
    display: flex;
    align-items: center;
    border: 1px solid var(--usv2-gray-200);
    border-radius: var(--usv2-radius-sm);
    background: var(--usv2-white);
    overflow: hidden;
    transition: border-color var(--usv2-transition);
    min-width: 0;
}
.unit-search-v2 .range-field:focus-within {
    border-color: var(--usv2-blue);
}
.unit-search-v2 .range-field .range-prefix {
    padding-left: 10px;
    font-size: .78rem;
    color: var(--usv2-gray-400);
    line-height: 1;
    pointer-events: none;
    flex-shrink: 0;
    white-space: nowrap;
}
.unit-search-v2 .range-field input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 7px 10px;
    border: none;
    background: transparent;
    font-size: .78rem;
    font-family: inherit;
    color: var(--usv2-navy);
    text-align: center;
    -moz-appearance: textfield;
}
/* Inputs with a sibling prefix get a tighter left padding (the prefix
 * itself already provides the left gutter) and left-aligned text so the
 * value reads as "HK$ 2,748,725" instead of having the prefix and
 * centered value collide. */
.unit-search-v2 .range-field .range-prefix + input {
    text-align: left;
    padding-left: 4px;
}
.unit-search-v2 .range-field input::-webkit-outer-spin-button,
.unit-search-v2 .range-field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.unit-search-v2 .range-field input:focus {
    outline: none;
}
.unit-search-v2 .range-sep {
    font-size: .7rem;
    color: var(--usv2-gray-400);
}

/* Drag-to-adjust two-thumb slider. The number inputs above are still the
 * canonical source of truth; the slider provides a visual + drag affordance
 * that bidirectionally syncs via initRangeSliders() in unit-search-v2.js.
 * Thumbs default to 0% / 100% on render; JS positions them based on the
 * current input values during init. */
.unit-search-v2 .range-slider {
    margin-top: 12px;
    margin-bottom: 6px;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--usv2-gray-200);
    position: relative;
    /* Generous vertical padding via pseudo-element keeps the 4px-tall
     * track easy to grab on touch screens without making the visual
     * track look thicker. */
    touch-action: none;  /* let JS handle drag without browser scrolling */
}
.unit-search-v2 .range-slider::before {
    content: '';
    position: absolute;
    inset: -10px 0;  /* expand vertical hit area to ~24px */
}
.unit-search-v2 .range-fill {
    position: absolute;
    height: 100%;
    background: var(--usv2-blue);
    border-radius: 2px;
    left: 0;
    right: 0;
    pointer-events: none;
}
.unit-search-v2 .range-thumb {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--usv2-white);
    border: 2px solid var(--usv2-blue);
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: var(--usv2-shadow-sm);
    cursor: grab;
    transition: box-shadow var(--usv2-transition);
    z-index: 2;
    /* Larger tap target via pseudo-element without enlarging the visible
     * thumb (matches mockup's 16px visual). */
}
.unit-search-v2 .range-thumb::after {
    content: '';
    position: absolute;
    inset: -8px;  /* ~32px tap target */
    border-radius: 50%;
}
.unit-search-v2 .range-thumb:hover {
    box-shadow: 0 0 0 4px rgba(26, 111, 181, .12);
}
.unit-search-v2 .range-thumb:active,
.unit-search-v2 .range-thumb.is-dragging {
    cursor: grabbing;
    box-shadow: 0 0 0 6px rgba(26, 111, 181, .18);
}
.unit-search-v2 .range-thumb.left {
    left: 0%;
}
.unit-search-v2 .range-thumb.right {
    left: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Filter sidebar — advanced sections (slice 05)
 *
 * Builder search input + scrollable check list; Reset link at the bottom of
 * the panel. Year / Amenities / Water Toys / Charter Type sections reuse
 * the toggle / check / range styles already defined above.
 * ═══════════════════════════════════════════════════════════════════════════ */

.unit-search-v2 .filter-search {
    width: 100%;
    padding: 7px 10px 7px 30px;
    border: 1px solid var(--usv2-gray-200);
    border-radius: var(--usv2-radius-sm);
    font-size: .78rem;
    font-family: inherit;
    color: var(--usv2-navy);
    background: var(--usv2-white) url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%239CA3AF' stroke-width='2'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 10px center/14px no-repeat;
    transition: border-color var(--usv2-transition);
    box-sizing: border-box;
}
.unit-search-v2 .filter-search:focus {
    outline: none;
    border-color: var(--usv2-blue);
}
.unit-search-v2 .filter-search::placeholder {
    color: var(--usv2-gray-400);
}

/* Builder section's check list is capped in height + scrollable. JS hides
 * non-matching <label class="check-item"> rows when the search input
 * filters by substring match. */
.unit-search-v2 .builder-list {
    margin-top: 8px;
    max-height: 160px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--usv2-gray-300) transparent;
}
.unit-search-v2 .builder-list::-webkit-scrollbar {
    width: 4px;
}
.unit-search-v2 .builder-list::-webkit-scrollbar-thumb {
    background: var(--usv2-gray-300);
    border-radius: 4px;
}
/* JS adds `.is-hidden` on labels that don't match the search. */
.unit-search-v2 .check-item.is-hidden {
    display: none;
}

/* Reset link — sits inside the filter panel below the last section.
 * Renders as an underline-less full-width link styled like a tertiary
 * button. Slice 08 wires the href to the canonical no-filter URL. */
.unit-search-v2 .reset-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--usv2-accent);
    background: none;
    border: none;
    border-top: 1px solid var(--usv2-gray-100);
    cursor: pointer;
    transition: all var(--usv2-transition);
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}
.unit-search-v2 .reset-btn:hover {
    background: rgba(232, 81, 61, .04);
    color: var(--usv2-accent-hover);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Mobile drawer + floating "Filters" button (slice 06)
 *
 * The drawer reuses the same .sidebar markup the desktop layout uses — no
 * DOM cloning, no duplicate IDs. CSS at narrow viewports (≤860px) makes
 * the sidebar absolutely-positioned off-screen; toggling `.show` slides
 * it in with a 300ms cubic-bezier transition.
 *
 * The drawer-header (top bar with Filters title + close button) and
 * drawer-footer (Reset + Apply buttons) are rendered inside the sidebar
 * but hidden on desktop — they only appear when the drawer is active.
 *
 * The floating Filters button (`.mobile-filter-btn`) is hidden on
 * desktop and visible from ≤860px, fixed bottom-center.
 *
 * The overlay (`.filter-overlay`) dims the rest of the page while the
 * drawer is open and acts as a click-outside dismiss target.
 * ═══════════════════════════════════════════════════════════════════════════ */

.unit-search-v2 .drawer-header,
.unit-search-v2 .drawer-footer,
.unit-search-v2 .mobile-filter-btn,
.unit-search-v2 .filter-overlay {
    display: none;  /* desktop default */
}

@media (max-width: 860px) {
    /* Sidebar becomes a fixed slide-over panel */
    .unit-search-v2 .sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 340px;
        max-width: 90vw;
        background: var(--usv2-white);
        z-index: 201;
        transform: translateX(100%);
        transition: transform .3s cubic-bezier(.4, 0, .2, 1);
        display: flex;
        flex-direction: column;
        margin: 0;
    }
    .unit-search-v2 .sidebar.show {
        transform: translateX(0);
    }

    /* Drawer header / footer become visible */
    .unit-search-v2 .drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid var(--usv2-gray-100);
        flex-shrink: 0;
    }
    .unit-search-v2 .drawer-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--usv2-navy);
    }
    .unit-search-v2 .drawer-close {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--usv2-gray-500);
        background: none;
        border: none;
        cursor: pointer;
        transition: background var(--usv2-transition);
        padding: 0;
    }
    .unit-search-v2 .drawer-close:hover {
        background: var(--usv2-gray-100);
    }
    .unit-search-v2 .drawer-close svg {
        width: 20px;
        height: 20px;
    }

    /* The form (filter panel) flexes to fill the drawer body */
    .unit-search-v2 #form-sales-search {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        margin: 0;
    }
    .unit-search-v2 .filter-panel {
        border: none;
        border-radius: 0;
    }

    /* All filter sections inside the drawer expand by default — at narrow
     * widths the user can't miss content if it's behind a click-to-expand */
    .unit-search-v2 .sidebar.show .filter-section.collapsed .filter-body {
        display: block;
    }
    .unit-search-v2 .sidebar.show .filter-section.collapsed .filter-chevron {
        transform: rotate(0);
    }

    /* The in-panel Reset link stays visible at the bottom of the panel,
     * but the drawer-footer's two-button row is the primary action UI */
    .unit-search-v2 .drawer-footer {
        display: flex;
        gap: 10px;
        padding: 14px 20px;
        border-top: 1px solid var(--usv2-gray-100);
        background: var(--usv2-white);
        flex-shrink: 0;
    }
    .unit-search-v2 .drawer-footer .btn-reset {
        flex: 1;
        padding: 10px;
        border: 1px solid var(--usv2-gray-200);
        border-radius: var(--usv2-radius);
        font-size: .8rem;
        font-weight: 600;
        color: var(--usv2-gray-600);
        background: var(--usv2-white);
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        transition: all var(--usv2-transition);
        font-family: inherit;
    }
    .unit-search-v2 .drawer-footer .btn-reset:hover {
        background: var(--usv2-gray-50);
        text-decoration: none;
    }
    .unit-search-v2 .drawer-footer .btn-apply {
        flex: 2;
        padding: 10px;
        border: none;
        border-radius: var(--usv2-radius);
        font-size: .8rem;
        font-weight: 600;
        color: var(--usv2-white);
        background: var(--usv2-accent);
        cursor: pointer;
        font-family: inherit;
        transition: background var(--usv2-transition);
    }
    .unit-search-v2 .drawer-footer .btn-apply:hover {
        background: var(--usv2-accent-hover);
    }
    .unit-search-v2 .drawer-footer .btn-apply .count {
        background: rgba(255, 255, 255, .25);
        padding: 1px 7px;
        border-radius: 10px;
        margin-left: 4px;
        font-size: .7rem;
    }

    /* Floating bottom-center "Filters" button */
    .unit-search-v2 .mobile-filter-btn {
        display: inline-flex;
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 90;
        padding: 12px 24px;
        background: var(--usv2-navy);
        color: var(--usv2-white);
        border-radius: 28px;
        font-size: .85rem;
        font-weight: 600;
        box-shadow: var(--usv2-shadow-lg);
        align-items: center;
        gap: 8px;
        border: none;
        cursor: pointer;
        font-family: inherit;
    }
    .unit-search-v2 .mobile-filter-btn svg {
        width: 18px;
        height: 18px;
    }
    .unit-search-v2 .mobile-filter-btn .badge {
        background: var(--usv2-accent);
        color: var(--usv2-white);
        font-size: .65rem;
        font-weight: 700;
        padding: 1px 6px;
        border-radius: 10px;
        margin-left: 2px;
    }

    /* Overlay backdrop — click anywhere on it dismisses the drawer */
    .unit-search-v2 .filter-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 27, 45, .5);
        z-index: 200;
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s;
    }
    .unit-search-v2 .filter-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Quick chips bar + Active filters bar (slice 07)
 *
 * Chips render above the active-filters bar; both bars sit between the
 * title row and the result list. Chips are static <a> elements styled
 * as pills; ChipUrlBuilder produces the toggle href server-side, so no
 * JS state is needed (clicking is just URL navigation).
 *
 * Active-filter tags are also <a> elements; their href strips the tag's
 * underlying param from the current URL via ActiveFiltersDeriver.
 * ═══════════════════════════════════════════════════════════════════════════ */

.unit-search-v2 .chips-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.unit-search-v2 .chip {
    /* `position: relative` anchors the `.chip-tooltip` popup (which is
       absolute-positioned) to this chip rather than the chips-bar wrapper. */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 500;
    border: 1px solid var(--usv2-gray-200);
    background: var(--usv2-white);
    color: var(--usv2-gray-700);
    cursor: pointer;
    transition: all var(--usv2-transition);
    white-space: nowrap;
    user-select: none;
    text-decoration: none;
}

/* ─── Chip hover tooltip ───
   Each chip carries a `<span class="chip-tooltip">` with a one-line
   description of what the filter does ("Show yachts with a Deck Jacuzzi",
   etc.). The popup sits above the chip with a downward arrow, mirroring
   the v1 boat-title-description style for visual consistency.
   pointer-events:none so a mouse traveling from chip to tooltip doesn't
   exit the hover area; visibility flips via `.chip:hover`/`:focus`. */
.unit-search-v2 .chip-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    max-width: 240px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, .9);
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 14px;
    border-radius: 6px;
    white-space: normal;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--usv2-transition), visibility var(--usv2-transition);
    z-index: 10;
}
.unit-search-v2 .chip-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, .9);
}
.unit-search-v2 .chip:hover .chip-tooltip,
.unit-search-v2 .chip:focus-visible .chip-tooltip {
    opacity: 1;
    visibility: visible;
}
.unit-search-v2 .chip:hover {
    border-color: var(--usv2-blue);
    color: var(--usv2-blue);
    background: rgba(26, 111, 181, .04);
    text-decoration: none;
}
.unit-search-v2 .chip.active {
    border-color: var(--usv2-blue);
    background: rgba(26, 111, 181, .08);
    color: var(--usv2-blue);
    font-weight: 600;
}
.unit-search-v2 .chip-x {
    display: inline-flex;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(26, 111, 181, .15);
    font-size: 9px;
    line-height: 1;
    margin-left: 2px;
}

/* Active filters bar — hidden when empty (CSS :empty selector). */
.unit-search-v2 .active-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    min-height: 0;
}
.unit-search-v2 .active-filters:empty {
    display: none;
}
.unit-search-v2 .active-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 500;
    background: var(--usv2-navy);
    color: var(--usv2-white);
    cursor: pointer;
    transition: background var(--usv2-transition);
    text-decoration: none;
}
.unit-search-v2 .active-tag:hover {
    background: var(--usv2-accent);
    text-decoration: none;
    color: var(--usv2-white);
}
.unit-search-v2 .active-tag .x {
    opacity: .7;
    font-size: 9px;
}
.unit-search-v2 .clear-all {
    font-size: .7rem;
    color: var(--usv2-accent);
    font-weight: 600;
    cursor: pointer;
    margin-left: 4px;
    transition: color var(--usv2-transition);
    text-decoration: none;
}
.unit-search-v2 .clear-all:hover {
    color: var(--usv2-accent-hover);
    text-decoration: none;
}

@media (max-width: 600px) {
    .unit-search-v2 .chips-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .unit-search-v2 .chip {
        flex-shrink: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Restyle preserved sections (slice 08)
 *
 * Sections that the v2 design didn't redesign but that the legacy view
 * still renders: the breadcrumb, the page title, the results header
 * (count + sort dropdown), the landing CMS content block on page 1,
 * the mobile-mirror sidebar at the bottom of the result list, the empty
 * state, and the loading bar.
 *
 * All rules scoped under `.unit-search-v2`. The legacy CSS bundles
 * loaded by UnitSearchAsset (main.min.css, search-map.min.css, etc.)
 * still style these elements with their legacy treatments — the rules
 * below override on equal-or-higher specificity.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.unit-search-v2 nav.breadcrumb {
    background: none;
    padding: 0;
    margin: 0 0 6px 0;
    font-size: .75rem;
    color: var(--usv2-gray-500);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.unit-search-v2 nav.breadcrumb a {
    color: var(--usv2-gray-500);
    transition: color var(--usv2-transition);
    text-decoration: none;
}
.unit-search-v2 nav.breadcrumb a:hover {
    color: var(--usv2-accent);
    text-decoration: none;
}
.unit-search-v2 nav.breadcrumb .sep {
    margin: 0 4px;
    color: var(--usv2-gray-300);
}
.unit-search-v2 nav.breadcrumb .active {
    color: var(--usv2-gray-700);
    font-weight: 500;
}

/* ── Page title ─────────────────────────────────────────────────────────── */
.unit-search-v2 .search-title-header {
    margin: 0 0 12px 0;
    border: none;
    background: none;
    padding: 0;
}
.unit-search-v2 .page-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--usv2-navy);
    margin: 0;
    line-height: 1.2;
    font-family: inherit;
}
@media (max-width: 860px) {
    .unit-search-v2 .page-title {
        font-size: 1.3rem;
    }
}

/* ── Results header (count + sort) ─────────────────────────────────────── */
.unit-search-v2 .results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}
.unit-search-v2 .result-count {
    font-size: .85rem;
    color: var(--usv2-gray-600);
    font-weight: 500;
}
.unit-search-v2 .result-count strong {
    color: var(--usv2-navy);
    font-weight: 700;
}
.unit-search-v2 .sort-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.unit-search-v2 .sort-wrap label {
    font-size: .8rem;
    color: var(--usv2-gray-500);
    white-space: nowrap;
    margin: 0;
    font-weight: normal;
}
.unit-search-v2 .sort-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--usv2-gray-200);
    border-radius: var(--usv2-radius);
    font-size: .8rem;
    font-family: inherit;
    font-weight: 500;
    color: var(--usv2-navy);
    background: var(--usv2-white) url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center/10px no-repeat;
    cursor: pointer;
    transition: border-color var(--usv2-transition);
    line-height: 1.4;
}
.unit-search-v2 .sort-select:focus {
    outline: none;
    border-color: var(--usv2-blue);
}

/* ── Empty state ───────────────────────────────────────────────────────── */
.unit-search-v2 .no-results-found {
    border-radius: var(--usv2-radius-lg);
    border: 1px solid var(--usv2-gray-200);
    padding: 24px;
    background: var(--usv2-white);
    width: 100%;
    margin: 0;
}
.unit-search-v2 .results-found-items {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
    font-size: 1.4rem;
    color: var(--usv2-gray-400);
    min-height: 120px;
    text-align: center;
    padding: 8px;
}
.unit-search-v2 .results-found-items:before {
    content: '';
    background-image: url("/images/yacht/results-found-items-v2.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px 50px;
    width: 65px;
    height: 65px;
    display: block;
    opacity: .5;
    border-radius: var(--usv2-radius);
    border: 1px solid var(--usv2-gray-300);
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .unit-search-v2 .results-found-items {
        flex-direction: column;
        font-size: 1.2rem;
        gap: 12px;
    }
}

/* ── Landing CMS content (.list-search-info) ───────────────────────────── */
/* CKEditor-generated HTML inside this block can't be restyled per-element;
 * the wrapper applies the v2 typography (Poppins inherited from .unit-search-v2)
 * and resets the link / heading colors so they match the rest of the page. */
.unit-search-v2 .list-search-info {
    margin-top: 24px;
    padding: 0;
    color: var(--usv2-gray-700);
    font-size: .85rem;
    line-height: 1.6;
}
.unit-search-v2 .list-search-info a {
    color: var(--usv2-blue);
    text-decoration: none;
    transition: color var(--usv2-transition);
}
.unit-search-v2 .list-search-info a:hover {
    color: var(--usv2-navy);
    text-decoration: underline;
}
.unit-search-v2 .list-search-info h1,
.unit-search-v2 .list-search-info h2,
.unit-search-v2 .list-search-info h3,
.unit-search-v2 .list-search-info h4 {
    color: var(--usv2-navy);
    font-weight: 700;
    text-align: left !important;
    margin: 24px 0 12px 0;
    overflow-wrap: anywhere;
    word-wrap: break-word;
    max-width: 100%;
    line-height: 1.3;
}
.unit-search-v2 .list-search-info h2 {
    font-size: 1.3rem;
}
.unit-search-v2 .list-search-info h3 {
    font-size: 1.1rem;
}
.unit-search-v2 .list-search-info h4 {
    font-size: 1rem;
}
.unit-search-v2 .list-search-info p {
    margin: 0 0 12px 0;
}
.unit-search-v2 .list-search-info ul,
.unit-search-v2 .list-search-info ol {
    margin: 0 0 12px 0;
    padding-left: 22px;
}

/* ── Desktop sidebar link blocks (regions + destination cross-links) ─────
 *
 * Renders inside <aside class="sidebar"> after the filter form, before
 * the drawer-footer. Two <section.sidebar-block> elements: one for
 * regional cross-links ("Yacht Charter near Nassau" → other destinations
 * in the same country/region) and one for the destination cross-links
 * ("Destination Nassau" → Guide / Itineraries / Yachts / Catamarans).
 * Hidden on mobile because the same content renders inside
 * `#mobile-show-footer-searchpage` at the bottom of the result list.
 */
.unit-search-v2 .sidebar-links {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.unit-search-v2 .sidebar-block {
    background: var(--usv2-white);
    border: 1px solid var(--usv2-gray-200);
    border-radius: var(--usv2-radius-lg);
    padding: 16px;
    margin: 0;
}
.unit-search-v2 .sidebar-block-title {
    font-size: .8rem;
    font-weight: 700;
    color: var(--usv2-navy);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin: 0 0 6px 0;
    line-height: 1.3;
    text-align: left !important;
}
.unit-search-v2 .sidebar-block-subtitle {
    font-size: .75rem;
    color: var(--usv2-gray-500);
    line-height: 1.5;
    margin: 0 0 12px 0;
}
.unit-search-v2 .sidebar-block .yacht-charters-near {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: transparent;
}
.unit-search-v2 .sidebar-block .yacht-charters-near li {
    margin: 0;
    /* Defeat `#mobile-show-footer-searchpage ul li{padding:3px 0!important}`
     * — but that selector doesn't match here; still, set explicitly to
     * keep the spacing consistent if anyone changes the markup later. */
    padding: 0;
    background: transparent;
    font-weight: 400;
    list-style: none;
    /* Bullet rendered as a small disc via :before so the legacy reset
     * (list-style:none) doesn't strip it. The screenshot shows blue
     * bullet dots — match that look. */
    position: relative;
}
.unit-search-v2 .sidebar-block .yacht-charters-near li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--usv2-blue);
    font-size: .9rem;
    line-height: 1.3;
}
/* Cancel the legacy `.yacht-charters-near li a:before` disc (from
   search-map.css) inside the v2 sidebar so the two bullets don't stack.
   The legacy rule renders a 5×5 circle via empty `content: ''` + a
   background-color disc; setting `content: none` here removes the
   pseudo-element entirely. Scoped under `.unit-search-v2` so v1 pages
   keep the original blue disc untouched. */
.unit-search-v2 .sidebar-block .yacht-charters-near li a:before {
    content: none;
}
.unit-search-v2 .sidebar-block .yacht-charters-near a {
    color: var(--usv2-blue);
    font-size: .8rem;
    text-decoration: none;
    transition: color var(--usv2-transition);
    display: inline-block;
    padding: 0;
    line-height: 1.4;
}
.unit-search-v2 .sidebar-block .yacht-charters-near a:hover {
    color: var(--usv2-accent);
    text-decoration: underline;
}

@media (max-width: 860px) {
    /* On mobile the same content already renders in #mobile-show-footer-
     * searchpage at the bottom of the result list — and the entire
     * .sidebar becomes a slide-over drawer. The drawer hides the link
     * blocks to avoid duplicating the mobile-mirror block when the
     * drawer is open; users tap chevrons to reach them via the result
     * list footer instead. */
    .unit-search-v2 .sidebar-links {
        display: none;
    }
}

/* ── Mobile-mirror sidebar (#mobile-show-footer-searchpage) ─────────────── */
.unit-search-v2 #mobile-show-footer-searchpage {
    margin-top: 32px;
}
.unit-search-v2 #mobile-show-footer-searchpage .in-border {
    background: var(--usv2-white);
    border: 1px solid var(--usv2-gray-200);
    border-radius: var(--usv2-radius-lg);
    padding: 16px;
    margin-bottom: 16px;
}
.unit-search-v2 #mobile-show-footer-searchpage .in-border h3 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--usv2-navy);
    margin: 0 0 8px 0;
    text-align: left !important;
    line-height: 1.3;
}
.unit-search-v2 #mobile-show-footer-searchpage .in-border p {
    color: var(--usv2-gray-600);
    font-size: .8rem;
    line-height: 1.5;
    margin: 0 0 12px 0;
}
.unit-search-v2 #mobile-show-footer-searchpage .yacht-charters-near {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.unit-search-v2 #mobile-show-footer-searchpage .yacht-charters-near li {
    margin: 0;
    /* Defeat `#mobile-show-footer-searchpage ul li{padding:3px 0!important}`
     * + `font-weight:600` from compress/main.min.css. */
    padding: 0 !important;
    font-weight: 400;
    background: transparent;
}
.unit-search-v2 #mobile-show-footer-searchpage .yacht-charters-near a {
    color: var(--usv2-blue);
    font-size: .8rem;
    text-decoration: none;
    transition: color var(--usv2-transition);
}
.unit-search-v2 #mobile-show-footer-searchpage .yacht-charters-near a:hover {
    color: var(--usv2-accent);
    text-decoration: underline;
}

/* ── Loading bar ────────────────────────────────────────────────────────── */
.unit-search-v2 .loading_bar {
    background: var(--usv2-white);
    border: 1px solid var(--usv2-gray-200);
    border-radius: var(--usv2-radius);
    padding: 12px 16px;
    margin-bottom: 12px;
}
.unit-search-v2 .loading_bar .progress-label {
    font-size: .85rem;
    color: var(--usv2-gray-700);
    font-weight: 500;
    margin-bottom: 6px;
}
.unit-search-v2 .loading_bar #progressbar {
    height: 4px;
    border-radius: 2px;
    background: var(--usv2-gray-100);
    border: none;
    overflow: hidden;
}