/* ============================================================
   THAI.CONDOS — Redesign 2026 SEARCH layer (phase-04)
   Loaded AFTER redesign-tokens + redesign-components.
   Scope: /properties — split map+list shell, POI chip rail.
   Cache-bust by FILE RENAME only (v1 -> v2).
   ============================================================ */

.rd-search {
    background: var(--color-bg-white);
    font-family: var(--rd-font-body);
    color: var(--color-text-primary-light);
}
.rd-search__form { margin: 0; }

/* ── Filter bar header ──────────────────────────────────── */
.rd-search__bar {
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-bg-cream);
    padding: 18px 24px 0;
}
.rd-search__filters .form-control,
.rd-search__filters select,
.rd-search__filters input[type="text"] {
    border-radius: 10px;
    border-color: var(--color-border-line);
}
/* select2 replaces the native <select> with a span, so the rule above misses
   the No Min / No Max / Bedroom cells - they rendered borderless/flat next to
   the plain Type <select>. Match them: white bg, border-line, 10px radius
   (Richard 2026-05-29). */
.rd-search__filters .select2-container--default .select2-selection--single {
    background: #fff;
    border: 1px solid var(--color-border-line);
    border-radius: 10px;
}

/* ── POI chip rail ──────────────────────────────────────── */
.rd-search__chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 0 16px;
    border-top: 1px solid var(--color-border-light);
    margin-top: 14px;
}
.rd-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--color-border-line);
    color: var(--color-text-secondary-light);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.rd-chip i { font-size: 16px; }
.rd-chip:hover {
    border-color: var(--color-accent);
    color: var(--color-text-primary-light);
}
.rd-chip[aria-pressed="true"],
.rd-chip.is-active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(30,44,92,0.18);
}

/* ── Split body ─────────────────────────────────────────── */
.rd-search__body {
    display: grid;
    grid-template-columns: 1fr minmax(360px, 42%);
    gap: 0;
    min-height: calc(100vh - 220px);
}
.rd-search__list {
    padding: 18px 24px 48px;
    overflow-y: auto;
}
.rd-search__map {
    position: sticky;
    top: 0;
    height: calc(100vh - 64px);
    background: var(--color-bg-light);
    border-left: 1px solid var(--color-border-light);
}
.rd-search__map #map {
    height: 100%;
    width: 100%;
}
/* Shown in place of the map until a location is selected (Richard 2026-05-29) -
   avoids the all-markers batch load spinning forever on the bare listing. */
.rd-search__map-prompt {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px;
    text-align: center;
    color: var(--color-text-secondary-light, #6b7280);
    background: var(--color-bg-cream, #f1ece1);
}
.rd-search__map-prompt > i {
    font-size: 40px;
    color: var(--color-accent, #1e2c5c);
    opacity: .55;
}
.rd-search__map-prompt > p {
    margin: 0;
    max-width: 280px;
    font-size: 15px;
    line-height: 1.5;
}

/* ── Sorting box (restyle existing classes) ─────────────── */
.rd-search__sort .item-sorting-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.rd-search__sort .item-sorting-box h4 {
    font-family: var(--rd-font-display);
    font-size: 18px;
    margin: 0;
    color: var(--color-text-primary-light);
}
.rd-search__sort #sort_by {
    border-radius: 10px;
    border: 1px solid var(--color-border-line);
    padding: 8px 12px;
    font-size: 13px;
    background: #fff;
}
/* Native <select> gets replaced by select2 at runtime — we have to target
   select2's rendered DOM, not #sort_by. Legacy theme pins the select2 single
   selection at 57px tall (line-height:57px on the rendered span) which
   towers over the 34×34 view-toggle buttons next to it. Bring it down. */
.rd-search__sort .sorting-by .select2-container--default .select2-selection--single {
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--color-border-line);
    padding: 0 10px;
    background: #fff;
}
.rd-search__sort .sorting-by .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
    height: 32px;
    padding: 0;
    color: var(--color-text-primary-light);
    font-size: 13px;
}
.rd-search__sort .sorting-by .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
    width: 22px;
    right: 6px;
    top: 0;
}
/* Legacy `.select2-selection__clear { top: 1px; right: 14px (or 26/30) }`
   leaves the × visually crammed against the arrow at top-pinned position
   that doesn't vertically center inside the 34px control. Re-anchor it:
   to the left of the arrow with breathing room and centered vertically. */
.rd-search__sort .sorting-by .select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    right: 32px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    text-align: center !important;
    font-size: 14px !important;
    color: var(--color-fg3) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    padding: 0 !important;
    margin: 0 !important;
}
.rd-search__sort .sorting-by .select2-container--default .select2-selection--single .select2-selection__clear:hover {
    background: var(--color-bg-cream) !important;
    color: var(--color-warm) !important;
}
/* Reserve right padding on the rendered text so it doesn't run under the × */
.rd-search__sort .sorting-by .select2-container--default .select2-selection--single[aria-haspopup] .select2-selection__rendered {
    padding-right: 50px;
}
.rd-search__sort .shorting-list {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
}
.rd-search__sort .shorting-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 8px;
    color: var(--color-text-muted-light);
    border: 1px solid var(--color-border-line);
}
/* Legacy style.css ships a 3-selector rule that pins both hover+active to
   56×56 with higher specificity than the base. Bump our rule to match by
   including a.active here and re-asserting width/height. */
.rd-search__sort .shorting-list a.active,
.rd-search__sort .shorting-list a:hover {
    width: 34px;
    height: 34px;
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

/* ── Results grid ───────────────────────────────────────── */
.rd-search__results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.rd-search__results--list { grid-template-columns: 1fr; }
.rd-search__result-cell { min-width: 0; }
.rd-search__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 16px;
    color: var(--color-text-muted-light);
    background: var(--color-bg-cream);
    border-radius: 12px;
    border: 1px dashed var(--color-border-line);
}

.rd-search__pagination {
    margin-top: 28px;
    display: flex;
    justify-content: center;
}
.rd-search__pagination .pagination {
    gap: 6px;
    margin: 0;
    padding: 0;
}
/* Force every page-link to a uniform 38×38 white square with chevron/number
   centered via flex. Legacy style.css sets prev as blue and next as dark grey
   with line-height-based centering that leaves the unicode ‹/› glyph drifting
   inside the box — flex centering fixes it. !important on display defeats
   legacy `display: block`. */
.rd-search__pagination .page-link {
    width: 38px;
    height: 38px;
    padding: 0 !important;
    border-radius: 8px;
    border: 1px solid var(--color-border-line) !important;
    background: #fff !important;
    color: var(--color-text-primary-light) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.rd-search__pagination .page-link:hover {
    background: var(--color-bg-cream) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-accent) !important;
}
.rd-search__pagination .page-item.active .page-link {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
}
.rd-search__pagination .page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Prev/next chevron glyphs are unicode characters with built-in font-internal
   padding — nudge slightly to look optically centered. */
.rd-search__pagination .page-item:first-child .page-link,
.rd-search__pagination .page-item:last-child .page-link {
    font-size: 18px;
    line-height: 1;
    padding-bottom: 2px !important;
}

/* ── POI map markers (overlay layer painted by rd-poi-map-hook.js) ── */
.rd-poi-marker {
    background: transparent;
    border: 0;
    pointer-events: auto;
    display: flex; align-items: center; justify-content: center;
}
.rd-poi-marker__dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    display: block;
}
.rd-poi-marker--station .rd-poi-marker__line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px; height: 22px;
    padding: 0 5px;
    border-radius: 6px;
    color: #fff;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* ── Responsive ────────────────────────────────────────────
   Below 1023px the split-view collapses (map drops below
   listings). We keep the listings grid at 2 columns down to
   640px so a tablet / narrow-desktop viewport still shows two
   cards per row instead of one (Richard 2026-05-27 feedback).
   Below 640px we fall back to single column. */
@media (max-width: 1023px) {
    .rd-search__body {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .rd-search__map {
        /* MUST stay a positioning context: the .rd-map-loading overlay is
           position:absolute; inset:0 and anchors to its nearest positioned
           ancestor. If this were `static` the overlay would fall back to the
           viewport and cover the whole page (incl. the listing above the map).
           Previously only an inline style from app.js kept it scoped. */
        position: relative;
        height: 360px;
        border-left: 0;
        border-top: 1px solid var(--color-border-light);
        overflow: hidden;
    }
    /* Legacy style.css pins `#map { min-height: 730px }`, which on mobile makes
       the map taller than its 360px column and spills it past the overlay into
       the footer. Clamp it to the column so the map (and the loading overlay
       that covers it) stay contained. */
    .rd-search__map #map {
        min-height: 0;
        height: 100%;
    }
}
@media (max-width: 640px) {
    .rd-search__bar { padding: 14px 16px 0; }
    .rd-search__list { padding: 16px 16px 36px; }
    .rd-search__chips { gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 12px; }
    .rd-chip { white-space: nowrap; }
    .rd-search__results { grid-template-columns: 1fr; }

    /* 2026-05-28 mobile (Richard): the four filter dropdowns now sit 2x2
       (col-6). Tighten the row gutter + leading-icon padding so "Bathroom"
       and the chevron still fit at ~165px column width, and trim the cell
       height so the filter block isn't four tall stacked rows. */
    .rd-search__filters .row { --bs-gutter-x: 12px; row-gap: 10px; }
    .rd-filter-cell__icon { left: 10px; font-size: 17px; }
    .rd-filter-cell .select2-selection,
    .rd-filter-cell select.form-control,
    .rd-filter-cell input.form-control { padding-left: 34px !important; }
    .rd-filter-cell .select2-selection__rendered { padding-left: 22px !important; }

    /* Results header: stack the "Found X Of Y" count above the sort + view
       toggles instead of cramming both onto one line (the Cormorant count
       wrapped to 4 lines next to the controls). */
    .rd-search__sort .item-sorting-box {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .rd-search__sort .item-sorting-box h4 {
        font-size: 16px;
        white-space: nowrap;
    }
    .rd-search__sort .item-sorting-box-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .rd-search__sort .sorting-by { flex: 1 1 auto; }
    .rd-search__sort .sorting-by .select2-container { width: 100% !important; }
}

/* ── #module "Advanced Search" toggle ──────────────────────
   Legacy style.css paints this as a black filled circle (#000 bg, white
   themify +/− glyph) plus a hardcoded English `:after { content: "Advanced
   Search" }` label at 18px. Repaint to the redesign palette and add a
   :lang(th) content override so Thai readers get the translated label. */
.rd-search #module {
    margin: 18px 0 8px;
}
.rd-search #module a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 4px 8px 40px;
    color: var(--color-fg1);
    font-size: 14px;
    font-weight: var(--weight-semibold);
    text-decoration: none;
    cursor: pointer;
}
.rd-search #module a:hover { color: var(--color-accent); }
/* Repaint the circle — accent navy, no more solid black. */
.rd-search #module a.collapsed::before,
.rd-search #module a:not(.collapsed)::before {
    background: var(--color-accent) !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 13px !important;
    text-align: center !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: themify !important;
    display: inline-block !important;
    transition: background 0.15s ease, transform 0.2s ease;
}
.rd-search #module a:hover::before {
    background: var(--color-accent-hover) !important;
}
.rd-search #module a:not(.collapsed)::before {
    transform: translateY(-50%) rotate(45deg);
}
/* Shrink the label to match the redesign component scale. */
.rd-search #module a.collapsed::after,
.rd-search #module a:not(.collapsed)::after {
    font-size: 14px !important;
    font-weight: var(--weight-semibold) !important;
    letter-spacing: 0.01em;
    color: inherit !important;
}
/* Thai-locale label override. Default `content: "Advanced Search"` stays
   from legacy style.css; :lang(th) swaps in the translated string. */
:lang(th) .rd-search #module a.collapsed::after,
:lang(th) .rd-search #module a:not(.collapsed)::after {
    content: "ค้นหาขั้นสูง" !important;
}

/* ── Map loading overlay (2026-05-27) ──────────────────────
   Shown while initMaps() paginates batches into the marker
   cluster. pointer-events: none so user can still pan/zoom
   while it's visible. Auto-dismisses when last batch lands. */
.rd-map-loading {
    position: absolute;
    inset: 0;
    z-index: 700;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .2s ease;
}
.rd-map-loading.is-visible {
    opacity: 1;
}
.rd-map-loading > span {
    background: rgba(20, 30, 60, .92);
    color: #fff;
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-size: 17px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}
.rd-map-loading__spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(20, 30, 60, .15);
    border-top-color: var(--color-accent, #1f2c58);
    border-radius: 50%;
    animation: rd-map-loading-spin .8s linear infinite;
}
@keyframes rd-map-loading-spin {
    to { transform: rotate(360deg); }
}

/* ── Filter cell with leading icon (2026-05-27) ───────────
   Matches the .rd-search-suggest__shell pattern used by the
   keyword input above the filter row, so the city / type /
   price dropdowns all carry a Tabler icon glyph on the left.
   The icon is absolutely positioned inside the cell; the
   select2 widget gets ~36px left-padding so its text doesn't
   overlap. */
.rd-filter-cell {
    position: relative;
}
.rd-filter-cell__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: var(--rd-muted, #6b7a8f);
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    pointer-events: none;
}
/* Push the visible select2 face + the native select text so it
   doesn't run under the icon. */
.rd-filter-cell .select2-selection,
.rd-filter-cell select.form-control,
.rd-filter-cell input.form-control {
    padding-left: 44px !important;
}
.rd-filter-cell .select2-selection__rendered {
    padding-left: 28px !important; /* select2 already has its own left padding */
}

/* Amenities & Features list — 2026-05-27.
   Legacy style.css ships `.third-row { justify-content: center }` which
   centers a partial last row (Pets Allowed / Spa & Massage break out of
   the grid when 11 features don't divide by 3). Override to left-align
   and tighten the row gap to match the redesign cadence. Scoped to the
   /properties advanced-search panel so it doesn't affect property-detail
   amenity lists that use the same class. */
.rd-search__filters #advance-search .third-row {
    justify-content: flex-start;
    column-gap: 0;
    row-gap: 8px;
}
.rd-search__filters #advance-search .third-row li {
    padding-right: 16px;
}