/* ============================================================
   THAI.CONDOS — Redesign 2026 component layer (phase 02)
   Depends on: redesign-tokens.v1.css (loaded BEFORE this file).

   Cache-bust by FILE RENAME only (v1 -> v2). Never `?v=`.

   Scope: nav/topbar, SegToggle, footer, listing cards, search box,
   breadcrumb, social-login button restyles. All targeted at
   existing Resido selectors (re-skin without replacing markup).
   ============================================================ */

/* ── TOPBAR (the thin ribbon above the main nav) ───────────
   Resido renders this as `<div class="topbar bg-brand p-2 d-none d-sm-block">`.
   The Bootstrap `.bg-brand` class is blue in style.css. Override here. */
.topbar {
  background: var(--color-bg-cream) !important;
  border-bottom: 1px solid var(--color-border-light);
  padding: 8px 0 !important;
}
.topbar .topbar-wishlist a,
.topbar .topbar-wishlist a:hover {
  color: var(--color-text-primary-light) !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.topbar .topbar-wishlist a i {
  color: var(--color-warm);
  margin-right: 4px;
}
.topbar .topbar-wishlist .wishlist-count {
  color: var(--color-text-secondary-light);
  font-weight: 600;
}

/* SegToggle wrapper for the topbar dropdowns (currency + language).
   Resido renders these as Bootstrap dropdowns; we restyle the trigger
   to look like a pill, and the menu to look like a pill-stack. */
.topbar .language-wrapper,
.topbar .choose-currency {
  color: var(--color-text-primary-light) !important;
}
.topbar .btn-select-language,
.topbar .dropdown-toggle.btn-secondary {
  background: transparent !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-pill) !important;
  color: var(--color-text-primary-light) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 14px !important;
  box-shadow: none !important;
}
.topbar .btn-select-language:hover,
.topbar .dropdown-toggle.btn-secondary:hover {
  background: var(--color-accent) !important;
  color: #fff !important;
  border-color: var(--color-accent) !important;
}
.topbar .dropdown-menu.language_bar_chooser {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-light);
  /* Override legacy `.language-wrapper.choose-currency .dropdown-menu { width: 50px }`.
     !important needed because the legacy rule has the same selector specificity
     and would otherwise force the dropdown to a 50px box where the active <a>
     element (whose width depends on text + padding) bleeds out the sides. */
  width: 160px !important;
  min-width: 160px;
  padding: 6px;
  /* Clip any flex child that tries to grow past the rounded corners. */
  overflow: hidden;
  /* Sticky header sits at z-index 1000; the currency/language dropdown is a
     descendant but the nav-menu siblings (.login-item etc.) paint above it
     without an explicit raise. Force the dropdown above any sibling header
     content so its options aren't covered by Logout / user-name pills. */
  z-index: 1100;
}
/* Lift the dropdown's parent wrappers so the dropdown isn't trapped inside
   a lower stacking context than the user-menu siblings next to it. */
.topbar .choose-currency,
.topbar .language-wrapper,
.topbar .choose-currency.show,
.topbar .language-wrapper.show {
  position: relative;
  z-index: 1101;
}
.topbar .dropdown-menu.language_bar_chooser li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.topbar .dropdown-menu.language_bar_chooser li {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
}
.topbar .dropdown-menu.language_bar_chooser li a {
  /* Override legacy `.dropdown-menu li a { display:flex !important; height:40px }`
     and `.nav-menu > li > a { padding: 30px 12px }` (the latter leaks in when
     the dropdown is rendered inside the topbar's right-side nav cluster).
     Use !important on every layout property because multiple legacy rules
     fight for these. */
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  box-sizing: border-box !important;
  padding: 7px 12px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary-light);
  text-align: left;
  text-decoration: none;
  position: static;
  border-bottom: 0 !important;
  /* Legacy `.choose-currency a:after { right: -5px; position: absolute }` paints a
     vertical separator that overflows. Suppress inside the dropdown. */
}
.topbar .dropdown-menu.language_bar_chooser li a::after {
  display: none !important;
}
.topbar .dropdown-menu.language_bar_chooser li a span {
  display: inline;
  background: transparent;
  padding: 0;
  margin: 0;
  color: inherit;
}
.topbar .dropdown-menu.language_bar_chooser li a.active,
.topbar .dropdown-menu.language_bar_chooser li a:hover {
  background: var(--color-accent);
  color: #fff !important;
}
.topbar .dropdown-menu.language_bar_chooser li a.active span,
.topbar .dropdown-menu.language_bar_chooser li a:hover span {
  color: #fff !important;
  background: transparent;
}

/* ── HEADER / NAV (sticky white-blur) ──────────────────────
   Resido: `<div class="header header-light head-shadow">` then
   `<nav id="navigation" class="navigation">`. Apply backdrop blur
   + thin bottom border + soft surface tint. Resido's stock nav uses
   float-based layout (`.nav-menu` floats left, `.align-to-right`
   floats right). Below we promote `.nav-menus-wrapper` to flexbox so
   logo + menu + buttons stay on a single row at narrower viewports
   (the original float layout collapses to multi-row ~1296px). */
.header.header-light {
  background: rgba(255, 255, 255, 0.94) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border-light);
  box-shadow: none !important;
  position: sticky;
  top: 0;
  /* Legacy style.css sets `footer { position: relative; z-index: 99 }`. A z-index
     of 50 here lost to footer when the page scrolled and the dark navy footer
     band slid under (but visually over) the sticky header's right side. Bump
     above 99 so the header always wins. */
  z-index: 1000;
}
.header.header-light .navigation {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: nowrap;
}
.header.header-light .nav-header {
  flex: 0 0 auto;
}
.header.header-light .nav-menus-wrapper {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
}
.header.header-light .nav-menus-wrapper > .nav-menu:not(.nav-menu-social) {
  display: flex !important;
  align-items: center;
  flex: 0 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: nowrap;
  height: auto;
  line-height: 1;
}
.header.header-light .nav-menus-wrapper > .nav-menu:not(.nav-menu-social) > li {
  float: none !important;
  list-style: none;
  display: inline-flex;
  align-items: center;
  height: auto;
}
.header.header-light .nav-menus-wrapper > .nav-menu.nav-menu-social {
  margin-left: auto !important;
  float: none !important;
}
.header.header-light .nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.header.header-light .nav-brand .rd-brand-text {
  font-family: var(--rd-font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--color-text-primary-light);
}
.header.header-light .nav-brand .rd-brand-text .dot {
  color: var(--color-warm);
}
.header.header-light .nav-brand img.logo {
  max-height: 34px;
  width: auto;
  display: block;
}

/* Main menu links restyled via .nav-menu scoping. The menu blade
   templates emit unchanged markup — visual treatment is here. */
.header.header-light .nav-menu > li > a {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--color-text-primary-light) !important;
  padding: 10px 14px !important;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
  text-transform: none !important;
  letter-spacing: 0;
}
.header.header-light .nav-menu > li > a:hover {
  background: rgba(0, 0, 0, 0.04);
}
.header.header-light .nav-menu > li.current-menu-item > a {
  color: var(--color-accent) !important;
  font-weight: 600 !important;
}
.header.header-light .nav-menu-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.header.header-light .nav-menu-social > li {
  list-style: none;
}
/* "Add Property" link in nav — outline pill with leading black dot.
   The submit.svg img is hidden; we render a clean filled circle via ::before
   so the visual matches the design package's "● Add Property". Height
   harmonized with the Sign In button below. */
.header.header-light .nav-menu-social .text-success {
  display: inline-flex !important;
  align-items: center;
  gap: 0;
  color: var(--color-text-primary-light) !important;
  border: 1px solid var(--color-text-primary-light) !important;
  border-radius: var(--radius-sm);
  padding: 12px 22px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1 !important;
  height: 40px;
  box-sizing: border-box;
}
.header.header-light .nav-menu-social .text-success img {
  display: none !important;
}
.header.header-light .nav-menu-social .text-success:hover {
  background: var(--color-text-primary-light) !important;
  color: #fff !important;
}
.header.header-light .nav-menu-social .login-item > a,
.header.header-light .nav-menu-social .add-listing > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary-light);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.header.header-light .nav-menu-social .add-listing > a {
  background: var(--color-accent) !important;
  color: #fff !important;
  padding: 12px 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  min-width: 100px;
  justify-content: center;
  line-height: 1 !important;
  gap: 0;
  border: 1px solid var(--color-accent) !important;
  border-radius: var(--radius-sm);
  display: inline-flex !important;
  align-items: center;
  height: 40px;
  box-sizing: border-box;
}
.header.header-light .nav-menu-social .add-listing > a:hover {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
}
.header.header-light .nav-menu-social .add-listing > a img,
.header.header-light .nav-menu-social .login-item > a i {
  display: none !important;
}
.header.header-light .nav-menu-social .login-item > a {
  padding: 12px 22px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  gap: 0;
  border-radius: var(--radius-sm);
  display: inline-flex !important;
  align-items: center;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid var(--color-border-light);
}

/* Main-nav right-side SegToggles row (EN/ไทย + ฿/USD) — sits in its own
   <ul> with `.rd-nav-toggles` class, immediately before the Add Property /
   Sign In <ul>. */
.header.header-light .nav-menu.rd-nav-toggles {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 12px 0 0;
  padding: 0;
}
.header.header-light .rd-nav-toggles .rd-nav-toggles__item {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Within these specifically the .rd-nav-segtoggle pills sit at compact size */
.header.header-light .rd-nav-toggles .rd-nav-segtoggle {
  margin: 0;
}
.header.header-light .rd-nav-toggles .rd-nav-segtoggle a {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.header.header-light .nav-menu.nav-menu-social {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  float: right; /* preserves the .align-to-right behavior on Resido's float-based layout */
}
.header.header-light .nav-menu.nav-menu-social > li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center;
  height: auto !important;
  line-height: 1 !important;
}
/* Reset Resido's .add-listing <li> shim that uses `top: 15px` + 50px height +
   the deep `.add-listing a { padding: 15px 20px }` rule to fake a button look
   on the bare anchor. With our redesign the button styling lives on the <a>,
   so we strip every dimension/positioning override Resido injects. */
.header.header-light .nav-menu-social .add-listing,
.header.header-light .nav-menu-social li.add-listing {
  top: 0 !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
/* Likewise scrub Resido's `.add-listing a { padding: 15px 20px; top: -16px }`
   which would otherwise stomp our button padding/positioning. */
.header.header-light .nav-menu-social .add-listing > a,
.header.header-light .nav-menu-social li.add-listing > a {
  top: 0 !important;
  bottom: auto !important;
  position: static !important;
  vertical-align: middle !important;
}
/* Tighten Add Property + Sign In so they sit on one row when the
   right cluster also carries the EN/ไทย and ฿/USD toggles. */
.header.header-light .nav-menu-social .add-listing > a:hover {
  background: var(--color-accent-hover);
}
.header.header-light .nav-menu-social .add-listing > a img {
  filter: brightness(0) invert(1);
}
.header.header-light .nav-menu-social .login-item > a {
  border: 1px solid var(--color-border-light);
}
.header.header-light .nav-menu-social .login-item > a:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Buy/Rent SegToggle in the nav */
.rd-nav-segtoggle {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-cream);
  border: 1px solid var(--color-border-light);
  margin: 0 16px;
  gap: 2px;
}
.rd-nav-segtoggle a {
  border: none;
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: transparent;
  color: var(--color-text-secondary-light);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.rd-nav-segtoggle a.is-active {
  background: var(--color-bg-dark);
  color: #fff;
}
.rd-nav-segtoggle a:hover:not(.is-active) {
  color: var(--color-text-primary-light);
}

/* ── LANGUAGE SWITCHER (in topbar) ──────────────────────────
   Rendered by the `language` plugin (plugins/language::partials.switcher)
   via apply_filters('language_switcher'). Two modes per `language_switcher_display`
   setting: 'dropdown' or 'list'. The dropdown trigger is already restyled by
   the .topbar .dropdown-toggle.btn-secondary rules above. Here we style the
   'list' mode output (<ul class="language_bar_list">). */
.topbar .language_bar_list {
  list-style: none;
  padding: 3px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--color-border-light);
}
.topbar .language_bar_list li {
  margin: 0;
  padding: 0;
}
.topbar .language_bar_list li a,
.topbar .language_bar_list li a span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-primary-light) !important;
  text-decoration: none;
  transition: color 0.15s ease;
}
.topbar .language_bar_list li a {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}
.topbar .language_bar_list li a:hover,
.topbar .language_bar_list li a:hover span {
  color: var(--color-accent) !important;
}
.topbar .language_bar_list li a img {
  height: 12px;
  width: auto;
  display: inline-block;
}
/* The plugin only renders the OTHER locales (current locale not in the list),
   so we don't have an explicit active state — the current locale isn't shown.
   This matches the design's "click the other language to switch" pattern. */

/* ── FOOTER (dark navy 4-col) ──────────────────────────────
   Resido renders `<footer class="dark-footer skin-dark-footer">`.
   Override background + grid + colour palette. Widgets emit their
   own markup inside `.footer-widget` — we restyle the wrapper. */
footer.dark-footer.skin-dark-footer {
  background: var(--color-bg-dark) !important;
  color: #fff;
  margin-top: 80px;
}
footer.dark-footer.skin-dark-footer .footer-widget {
  color: rgba(255, 255, 255, 0.75);
}
footer.dark-footer.skin-dark-footer .footer-widget .widget-title,
footer.dark-footer.skin-dark-footer .footer-widget h3,
footer.dark-footer.skin-dark-footer .footer-widget h4,
footer.dark-footer.skin-dark-footer .footer-widget h5 {
  color: var(--color-warm);
  font-family: var(--rd-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
footer.dark-footer.skin-dark-footer .footer-widget a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.15s ease;
}
footer.dark-footer.skin-dark-footer .footer-widget a:hover {
  color: #fff;
}
footer.dark-footer.skin-dark-footer .footer-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
footer.dark-footer.skin-dark-footer .footer-widget ul li {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.65;
}
footer.dark-footer.skin-dark-footer .footer-add p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 8px;
}
footer.dark-footer.skin-dark-footer .footer-add p i {
  color: var(--color-warm);
  margin-right: 8px;
}
footer.dark-footer.skin-dark-footer .img-footer {
  margin-bottom: 16px;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
footer.dark-footer.skin-dark-footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 32px;
  padding-top: 24px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
footer.dark-footer.skin-dark-footer .footer-bottom p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  margin: 0;
}
footer.dark-footer.skin-dark-footer .footer-bottom-social {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 14px;
  justify-content: flex-end;
}
footer.dark-footer.skin-dark-footer .footer-bottom-social a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  width: 32px;
  height: 32px;
  /* line-height:1 forces the <i> glyph's line-box to match its glyph height,
     otherwise themify's font metrics push the visible glyph into the upper
     half of the inline box and the flex centering looks high. */
  line-height: 1;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
footer.dark-footer.skin-dark-footer .footer-bottom-social a i {
  line-height: 1;
  display: block;
}
footer.dark-footer.skin-dark-footer .footer-bottom-social a:hover {
  background: var(--color-warm);
  color: #fff;
  border-color: var(--color-warm);
}

/* Back-to-top arrow */
#back2Top.top-scroll {
  background: var(--color-accent) !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-card-light);
}

/* ── Newsletter subscribe widget (footer) ─────────────────────
   The newsletter widget ships its own markup:
     <form class="form-subcriber newsletter-form">
       <div class="form-group d-flex">
         <input class="form-control bg-white font-small">
         <button class="btn bg-dark text-white">Subscribe</button>
       </div>
     </form>
   Two visual problems in Thai:
   - "สมัครรับข่าวสาร" (Subscribe) is 8 chars vs English 9 chars but the
     button uses btn default padding only, so the Thai label wraps to
     two lines and the button bleeds taller than the input.
   - bg-dark renders pure-black, fights with the navy footer.
   Fuse the two elements into one pill: input rounded-left, button
   rounded-right, button forced to single-line chai-red. */
footer.dark-footer.skin-dark-footer .form-subcriber .form-group.d-flex,
footer.dark-footer.skin-dark-footer .newsletter-form .form-group.d-flex {
  display: flex !important;
  align-items: stretch;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  max-width: 380px;
}
footer.dark-footer.skin-dark-footer .form-subcriber .form-control,
footer.dark-footer.skin-dark-footer .newsletter-form .form-control {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  background: #fff !important;
  border-radius: 0 !important;
  padding: 12px 18px !important;
  font-size: 14px !important;
  color: var(--color-text-primary-light) !important;
  height: auto !important;
  box-shadow: none !important;
}
footer.dark-footer.skin-dark-footer .form-subcriber .form-control:focus,
footer.dark-footer.skin-dark-footer .newsletter-form .form-control:focus {
  outline: none;
  background: #fff !important;
}
footer.dark-footer.skin-dark-footer .form-subcriber .form-control::placeholder,
footer.dark-footer.skin-dark-footer .newsletter-form .form-control::placeholder {
  color: var(--color-text-muted-light);
  opacity: 1;
}
footer.dark-footer.skin-dark-footer .form-subcriber .btn,
footer.dark-footer.skin-dark-footer .newsletter-form .btn {
  flex: 0 0 auto;
  background: var(--color-warm) !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 22px !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
  transition: background 0.15s ease;
  /* Defeat `bg-dark` background-color from Bootstrap utility class
     (specificity: 1 class, no !important — our chained selector wins
     on specificity even without !important, but include for safety). */
  background-color: var(--color-warm) !important;
  color: #fff !important;
}
footer.dark-footer.skin-dark-footer .form-subcriber .btn:hover,
footer.dark-footer.skin-dark-footer .newsletter-form .btn:hover {
  background: var(--color-warm-hover) !important;
}
/* Captcha row below the form sits flush — give it air. */
footer.dark-footer.skin-dark-footer .form-subcriber .form-group + .form-group,
footer.dark-footer.skin-dark-footer .newsletter-form .form-group + .form-group {
  margin-top: 14px;
}

/* ── LISTING CARDS (.property-listing) ──────────────────────
   Two variants: .property-2 (grid/vertical) and .property-1 (list/horizontal).
   We override the heavy Resido card styles to land on the new ListingCard look. */
.property-listing.property-2,
.property-listing.property-1 {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-card-light);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.property-listing.property-2:hover,
.property-listing.property-1:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--color-accent-soft);
}

/* Vertical grid card */
.property-listing.property-2 .listing-img-wrapper {
  position: relative;
  /* Legacy style.css sets `.listing-img-wrapper { max-height:240px; min-height:240px }`
     with no width — wrapper collapses to the image's natural 320px and leaves a gutter
     on the right whenever the card is wider than 320 (any non-grid layout). Force the
     wrapper to fill its card and let aspect-ratio drive the height. */
  width: 100%;
  max-width: none;
  min-height: 0;
  max-height: none;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #eee;
}
/* Slick container parents — own the wrapper's full box. Width AND height
   forced here because these are NOT managed by slick. */
.property-listing.property-2 .listing-img-wrapper .list-img-slide,
.property-listing.property-2 .listing-img-wrapper .click {
  height: 100% !important;
  width: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  display: block;
}
/* Slick's own layers — only force HEIGHT to defeat slick's inline track
   height (computed from the first image's natural aspect). DO NOT touch
   width: slick sets `.slick-track { width: slides×slide_width }` inline
   and shifts it left via translate3d to show the current slide. Forcing
   width:100% on these would clip the entire track off-screen and break
   IntersectionObserver-based lazyload for 99% of imgs. */
.property-listing.property-2 .listing-img-wrapper .slick-list,
.property-listing.property-2 .listing-img-wrapper .slick-track,
.property-listing.property-2 .listing-img-wrapper .slick-slide {
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
}
/* Slide content + anchor + child div: fill the slide. Width 100% here is
   relative to the slide (not the track), so slick's transform still works. */
.property-listing.property-2 .listing-img-wrapper .click > div,
.property-listing.property-2 .listing-img-wrapper .click a,
.property-listing.property-2 .listing-img-wrapper .slick-slide a {
  height: 100% !important;
  width: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  display: block;
}
/* When slick hasn't initialised (e.g. SSR or before JS runs), the inner slide
   wrappers can collapse to their natural width and leave a white gutter to the
   right. Force every wrapper to fill so the image always covers the card. */
.property-listing.property-2 .listing-img-wrapper .click > div { float: none !important; }
.property-listing.property-2 .listing-img-wrapper img {
  width: 100% !important;
  /* Legacy style.css pins `min-height:240px; max-height:240px` on the img — those
     fight aspect-ratio:4/3 on the wrapper, leaving the image at 240px tall while
     the wrapper grows to ~700px on wide cards. Clear both so the image fills the
     full wrapper height and object-fit:cover handles cropping. */
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover;
  display: block;
  max-width: none;
}
.property-listing.property-2 .listing-img-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.property-listing.property-2 .rd-card-pills {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  z-index: 2;
}
.property-listing.property-2 .rd-card-price-over {
  position: absolute;
  bottom: 14px;
  left: 16px;
  z-index: 2;
  font-family: var(--rd-font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* Wishlist chip — legacy style.css renders the wrapper itself as a dark
   rounded-square (rgba(0,0,0,.5) + border-radius:10px + padding) which double-
   stacks with our inner anchor chip. Strip the wrapper to a positioning shell
   and make the anchor the single circular button. */
.property-listing.property-2 .icon-actions-wrapper {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  line-height: 1;
}
.property-listing.property-2 .icon-actions-wrapper a.add-to-wishlist {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  /* `!important` defeats legacy `style.css` rule that hard-pins
     `display: inline-block !important` on .add-to-wishlist, which otherwise
     blocks flex centering and leaves the heart pushed to the top. */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary-light);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-size: 15px;
}
.property-listing.property-2 .icon-actions-wrapper a.add-to-wishlist:hover {
  background: #fff;
  color: var(--color-warm);
  transform: scale(1.08);
}
.property-listing.property-2 .icon-actions-wrapper a.add-to-wishlist.active {
  background: var(--color-warm);
  color: #fff;
}
.property-listing.property-2 .icon-actions-wrapper a.add-to-wishlist i {
  line-height: 1;
}

/* Title + meta block below image */
.property-listing.property-2 .listing-detail-wrapper {
  padding: 16px 18px 0;
}
.property-listing.property-2 .listing-short-detail-wrap {
  padding: 0;
}
.property-listing.property-2 .list-price {
  /* Hide the duplicate non-overlay price inside content area on grid cards
     (we render price ON the image instead). */
  display: none !important;
}
.property-listing.property-2 .listing-name {
  font-family: var(--rd-font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.property-listing.property-2 .listing-name a {
  color: var(--color-text-primary-light);
  text-decoration: none;
}
.property-listing.property-2 .listing-name a:hover {
  color: var(--color-accent);
}

/* Stats row (beds / baths / sqm) */
.property-listing.property-2 .price-features-wrapper {
  padding: 8px 18px 12px;
}
.property-listing.property-2 .list-fx-features {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--color-text-primary-light);
  align-items: center;
  flex-wrap: wrap;
}
.property-listing.property-2 .list-fx-features .listing-card-info-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.property-listing.property-2 .list-fx-features .inc-fleat-icon img {
  display: block;
  opacity: 0.75;
}

/* Footer row (city + view link) */
.property-listing.property-2 .listing-detail-footer {
  padding: 12px 18px 16px;
  border-top: 1px solid var(--color-border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--color-text-secondary-light);
}
.property-listing.property-2 .foot-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.property-listing.property-2 .foot-location img {
  width: 14px;
  opacity: 0.7;
}
/* VIEW button — legacy `.prt-view` had a hard `color:#fff !important` from style.css
   (green pill). Override with redesign tokens at higher specificity + !important to
   guarantee the new look across all card instances. */
.property-listing.property-2 .prt-view,
.property-listing.property-1 .prt-view {
  background: transparent !important;
  color: var(--color-accent) !important;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  height: auto;
  padding: 6px 14px !important;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.property-listing.property-2 .prt-view:hover,
.property-listing.property-1 .prt-view:hover {
  background: var(--color-accent) !important;
  color: #fff !important;
  text-decoration: none;
}

/* Type-pill restyled as .rd-pill-brass */
.property-listing.property-2 .prt-types,
.property-listing.property-1 .prt-types {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--color-warm);
  color: #fff;
  border: 1px solid var(--color-warm);
  text-transform: uppercase;
  white-space: nowrap;
}
/* Type-pill brass variants per slug — preserved Resido convention. */
.property-listing .prt-types.sale {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.property-listing .prt-types.rent {
  background: var(--color-warm);
  border-color: var(--color-warm);
}

/* Horizontal list card (.property-1) */
.property-listing.property-1 {
  display: flex;
  align-items: stretch;
}
.property-listing.property-1 .listing-img-wrapper {
  position: relative;
  flex: 0 0 38%;
  max-width: 38%;
  overflow: hidden;
  background: #eee;
}
.property-listing.property-1 .listing-img-wrapper a {
  display: block;
  height: 100%;
}
.property-listing.property-1 .listing-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.property-listing.property-1 .listing-content {
  flex: 1 1 auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.property-listing.property-1 .listing-name {
  font-family: var(--rd-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.property-listing.property-1 .listing-name a {
  color: var(--color-text-primary-light);
  text-decoration: none;
}
.property-listing.property-1 .list-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.property-listing.property-1 .listing-card-info-price {
  font-family: var(--rd-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0;
  letter-spacing: -0.01em;
}
.property-listing.property-1 .price-features-wrapper {
  padding: 0;
}
.property-listing.property-1 .list-fx-features {
  display: flex;
  gap: 16px;
  font-size: 13px;
}
.property-listing.property-1 .listing-footer-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-border-light);
  padding-top: 10px;
  font-size: 13px;
}
.property-listing.property-1 .listing-locate .listing-location {
  color: var(--color-text-secondary-light);
}
.property-listing.property-1 .more-btn {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.property-listing.property-1 .more-btn:hover { color: var(--color-accent-hover); }
.property-listing.property-1 .icon-actions-wrapper {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  line-height: 1;
}
.property-listing.property-1 .icon-actions-wrapper a.add-to-wishlist {
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.property-listing.property-1 .icon-actions-wrapper a.add-to-wishlist:hover {
  background: #fff;
  color: var(--color-warm);
  transform: scale(1.08);
}
.property-listing.property-1 .icon-actions-wrapper a.add-to-wishlist.active {
  background: var(--color-warm);
  color: #fff;
}

/* ── BREADCRUMB ─────────────────────────────────────────── */
.breadcrumb {
  background: transparent;
  padding: 12px 0;
  margin: 0;
  font-size: 12px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.breadcrumb-item {
  color: var(--color-text-secondary-light);
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "·";
  color: var(--color-text-muted-light);
  margin: 0 4px;
}
.breadcrumb-item a {
  color: var(--color-text-secondary-light);
  text-decoration: none;
  font-weight: 500;
}
.breadcrumb-item a:hover {
  color: var(--color-accent);
}
.breadcrumb-item.active {
  color: var(--color-text-primary-light);
  font-weight: 600;
}

/* ── SEARCH BOX ─────────────────────────────────────────── */
.search-box .search-box-items {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card-light);
}
.search-box .control-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary-light);
  margin-bottom: 4px;
}
.search-box .dropdown-toggle.btn-secondary {
  background: var(--color-bg-cream) !important;
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-md) !important;
  color: var(--color-text-primary-light) !important;
  font-size: 13px;
  padding: 10px 14px !important;
  box-shadow: none !important;
}
.search-box .dropdown-toggle.btn-secondary:hover {
  border-color: var(--color-accent) !important;
}
.search-box .btn.btn-primary,
.search-box .btn.btn-primary.btn-full {
  background: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
  border-radius: var(--radius-md) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 16px !important;
  box-shadow: none !important;
}
.search-box .btn.btn-primary:hover {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
}

/* ── SOCIAL LOGIN BUTTONS (login-options.blade.php) ─────────
   FB/Google/GH/LI buttons restyled. LINE button is filter-injected
   from a separate plugin — DO NOT touch its CSS. */
.login-options.social-login ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.login-options.social-login ul li {
  flex: 1 1 calc(50% - 4px);
  min-width: 140px;
}
.login-options.social-login .btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  background: #fff;
  color: var(--color-text-primary-light);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.login-options.social-login .btn:hover {
  background: var(--color-bg-cream);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.login-options.social-login .btn i {
  font-size: 16px;
}
.modal-divider {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted-light);
  margin: 24px 0 16px;
  position: relative;
}
.modal-divider span { background: #fff; padding: 0 12px; position: relative; z-index: 1; }
.modal-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border-light);
}

/* ── .rd-agents / .rd-developers CTA hero — admin-editable pages /agents + /developers ──
   Page content lives in `pages.content` and is filtered through Botble's
   `clean()` (HTMLPurifier) which strips most inline styles — so layout
   must come from CSS classes, not inline. Typography/color survive
   inline but layout (display/gap/padding) does not.
   Two pages share the same shape — same selectors, two class names so
   the admin sees a semantic root in the WYSIWYG. */
.rd-agents,
.rd-developers {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 16px 72px;
  text-align: center;
}
.rd-agents__eyebrow,
.rd-developers__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-warm);
  margin: 0 0 12px;
}
.rd-agents__title,
.rd-developers__title {
  font-family: var(--rd-font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg1);
  line-height: var(--leading-tight);
  margin: 0 0 16px;
}
.rd-agents__lead,
.rd-developers__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-fg2);
  max-width: 560px;
  margin: 0 auto 32px;
}
.rd-agents__cta,
.rd-developers__cta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.rd-agents__btn-primary,
.rd-agents__btn-outline,
.rd-developers__btn-primary,
.rd-developers__btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 8px;
  font-weight: var(--weight-semibold);
  font-size: 15px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  border: 1.5px solid transparent;
}
.rd-agents__btn-primary,
.rd-developers__btn-primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.rd-agents__btn-primary:hover,
.rd-developers__btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #fff;
}
.rd-agents__btn-outline,
.rd-developers__btn-outline {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.rd-agents__btn-outline:hover,
.rd-developers__btn-outline:hover {
  background: var(--color-accent);
  color: #fff;
}
.rd-agents__btn-primary i,
.rd-agents__btn-outline i,
.rd-developers__btn-primary i,
.rd-developers__btn-outline i {
  font-size: 18px;
  line-height: 1;
}
@media (max-width: 640px) {
  .rd-agents,
  .rd-developers { padding: 36px 16px 48px; }
  .rd-agents__title,
  .rd-developers__title { font-size: var(--text-4xl); }
  .rd-agents__cta,
  .rd-developers__cta { display: flex; flex-direction: column; align-items: stretch; }
  .rd-agents__btn-primary,
  .rd-agents__btn-outline,
  .rd-developers__btn-primary,
  .rd-developers__btn-outline { justify-content: center; }
}

/* ── RESPONSIVE TWEAKS ─────────────────────────────────── */
@media (max-width: 768px) {
  .rd-nav-segtoggle {
    margin: 8px 0;
  }
  .property-listing.property-1 {
    flex-direction: column;
  }
  .property-listing.property-1 .listing-img-wrapper {
    flex: 0 0 auto;
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }
  footer.dark-footer.skin-dark-footer {
    padding: 48px 0 24px !important;
  }
  footer.dark-footer.skin-dark-footer .footer-bottom-social {
    justify-content: flex-start;
    margin-top: 12px;
  }
}

/* ── Select2 dropdown — site-wide highlight + selected colors ──────
   Select2 renders results to <body> outside .rd-search / .rd-listing
   scopes, so this lives global. Default highlighted bg is Select2's
   library blue (#5897fb-ish) which clashes with the redesign navy. */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background-color: var(--color-accent) !important;
  color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
  background-color: var(--color-accent-soft) !important;
  color: var(--color-accent) !important;
  font-weight: var(--weight-semibold);
}
.select2-container--default .select2-results__option {
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.4;
}
.select2-container--default .select2-results__options {
  padding: 4px;
}
.select2-dropdown {
  border-color: var(--color-border-light) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card-light);
  overflow: hidden;
}
.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-sm) !important;
  padding: 7px 10px !important;
  font-size: 13px;
}
.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--color-accent) !important;
  outline: 0;
}

/* ===========================================================================
   P02 (2026-05-24) — TopNav + Footer rebuilt to match redesign-2026-05-11 mockup
   Richard feedback #1 (menu unchanged), #2 (footer unchanged), #3 (logo unchanged).
   =========================================================================== */

/* ---------- TopNav ---------------------------------------------------------*/
.rd-topnav {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border-light);
}
.rd-topnav__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.rd-topnav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-primary-light);
  text-decoration: none;
  flex-shrink: 0;
}
.rd-topnav__brand:hover { text-decoration: none; color: var(--color-text-primary-light); }
.rd-topnav__logo-img { height: 38px; width: auto; display: block; }
.rd-topnav__brand-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1;
}
.rd-topnav__brand-dot { color: var(--color-warm); }

.rd-topnav__primary {
  display: flex;
  gap: 10px;
  align-items: center;
}
.rd-topnav__link {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary-light);
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.rd-topnav__link:hover {
  background: rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: var(--color-text-primary-light);
}

.rd-topnav__segtoggle {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--color-bg-cream);
  border: 1px solid var(--color-border-light);
}
.rd-topnav__segtoggle-opt {
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary-light);
  text-decoration: none;
  transition: all 0.15s ease;
}
.rd-topnav__segtoggle-opt:hover { text-decoration: none; color: var(--color-text-primary-light); }
.rd-topnav__segtoggle-opt.is-active {
  background: var(--color-bg-dark);
  color: #fff;
}

.rd-topnav__spacer { flex: 1; }

.rd-topnav__actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Language plugin output — re-skin the .language_bar_* output as a SegToggle */
.rd-topnav__lang .language_bar_list,
.rd-topnav__lang ul {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--color-bg-cream);
  border: 1px solid var(--color-border-light);
  list-style: none;
  margin: 0;
}
.rd-topnav__lang li { margin: 0; }
.rd-topnav__lang a {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary-light);
  text-decoration: none;
}
.rd-topnav__lang a.active,
.rd-topnav__lang li.active a {
  background: var(--color-bg-dark);
  color: #fff;
}

/* Currency dropdown */
.rd-topnav__currency { position: relative; }
.rd-topnav__currency-btn {
  background: var(--color-bg-cream);
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary-light);
  cursor: pointer;
  letter-spacing: 0.02em;
}
.rd-topnav__currency-btn:hover { background: #fff; }
.rd-topnav__currency-menu {
  min-width: 110px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-light);
  padding: 6px;
}
.rd-topnav__currency-menu li a {
  display: block;
  padding: 0 12px;
  line-height: 32px;
  font-size: 13px;
  color: var(--color-text-primary-light);
  border-radius: var(--radius-sm);
}
.rd-topnav__currency-menu li a:hover { background: var(--color-bg-cream); text-decoration: none; }
.rd-topnav__currency-menu li a.active { background: var(--color-bg-dark); color: #fff; }

.rd-topnav__wishlist {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-primary-light);
  font-size: 13px;
  text-decoration: none;
  padding: 6px 8px;
}
.rd-topnav__wishlist:hover { color: var(--color-accent); text-decoration: none; }
.rd-topnav__wishlist i { font-size: 18px; }

.rd-topnav__cta-outline,
.rd-topnav__cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}
.rd-topnav__cta-outline {
  background: transparent;
  color: var(--color-text-primary-light);
  border: 1px solid var(--color-text-primary-light);
}
.rd-topnav__cta-outline:hover { background: var(--color-text-primary-light); color: #fff; text-decoration: none; }
.rd-topnav__cta-primary {
  background: var(--color-bg-dark);
  color: #fff;
  border: 1px solid var(--color-bg-dark);
}
.rd-topnav__cta-primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; text-decoration: none; }
.rd-topnav__logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary-light);
  font-size: 16px;
  text-decoration: none;
}
.rd-topnav__logout:hover { background: var(--color-bg-cream); color: var(--color-accent); text-decoration: none; }

.rd-topnav__mobile-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--color-text-primary-light);
  cursor: pointer;
}
.rd-topnav__drawer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 24px 18px;
  border-top: 1px solid var(--color-border-light);
  background: rgba(255, 255, 255, 0.98);
}
.rd-topnav__drawer-link {
  padding: 12px 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-primary-light);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.rd-topnav__drawer-link:hover { background: var(--color-bg-cream); text-decoration: none; color: var(--color-text-primary-light); }

/* Drawer language + currency groups — 2026-05-27 (Richard msg 9465).
   Each group is a label + horizontal pill row. The language plugin emits
   its own <li><a> markup, so we let it inherit and tighten via the parent. */
.rd-topnav__drawer-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 8px 0;
  margin-top: 4px;
  border-top: 1px solid var(--color-border-light);
}
.rd-topnav__drawer-group-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rd-muted, #6b7a8f);
}
.rd-topnav__drawer-group-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 8px;
}
.rd-topnav__drawer-group-row > ul,
.rd-topnav__drawer-group-row > ul > li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rd-topnav__drawer-group-row a,
.rd-topnav__drawer-currency {
  padding: 8px 14px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text-primary-light);
  background: #fff;
}
.rd-topnav__drawer-group-row a.active,
.rd-topnav__drawer-group-row a:hover,
.rd-topnav__drawer-currency.is-active,
.rd-topnav__drawer-currency:hover {
  background: var(--color-bg-cream);
  border-color: var(--rd-brand, #163a5f);
  color: var(--rd-brand, #163a5f);
}

/* Hide legacy Resido FAB on every page — the mockup doesn't include it.
   The header.blade.php still emits it for backward compat; this hides it visually. */
.foo-button { display: none !important; }

/* Mobile breakpoint */
@media (max-width: 1024px) {
  .rd-topnav__primary,
  .rd-topnav__link,
  .rd-topnav__segtoggle,
  .rd-topnav__wishlist,
  .rd-topnav__cta-outline,
  .rd-topnav__lang,
  .rd-topnav__currency {
    display: none;
  }
  .rd-topnav__mobile-toggle { display: inline-flex; }
  .rd-topnav__inner { padding: 12px 16px; gap: 12px; }
  .rd-topnav__cta-primary { padding: 6px 12px; font-size: 12px; }
  /* When logged in, the account CTA shows the user's name in a <span>; on a
     360px screen that name + logout icon + hamburger overflow the bar (guest
     "Sign in" has no span and fits). Collapse the authed CTA to its user icon
     on mobile - the full name is still available in the drawer. */
  .rd-topnav__cta-primary span { display: none; }
}
@media (min-width: 1025px) {
  .rd-topnav__drawer { display: none !important; }
}

/* ---------- Footer ---------------------------------------------------------*/
.rd-footer {
  background: var(--color-bg-dark);
  color: #fff;
  padding: 80px 32px 40px;
  margin-top: 80px;
}
.rd-footer__inner {
  max-width: 1440px;
  margin: 0 auto;
}
.rd-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 64px;
  margin-bottom: 56px;
}
.rd-footer__brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  margin-bottom: 24px;
}
.rd-footer__brand-link:hover { color: #fff; text-decoration: none; }
/* Logo PNG ships with a transparent background; the green temple icon
   shows in its natural colors on the dark navy footer. The previous
   `filter: brightness(0) invert(1)` flat-white-out is intentionally
   dropped (worked only for silhouette PNGs without colored content). */
.rd-footer__logo-img { display: block; }
.rd-footer__brand-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: #fff;
}
.rd-footer__brand-dot { color: var(--color-warm); }
.rd-footer__tagline {
  margin-top: 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
  max-width: 360px;
}
.rd-footer__brand-ctas {
  margin-top: 24px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.rd-footer__cta-primary,
.rd-footer__cta-outline {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all 0.15s ease;
}
.rd-footer__cta-primary {
  background: var(--color-accent);
  color: #fff;
  border: 1px solid var(--color-accent);
}
.rd-footer__cta-primary:hover { background: var(--color-warm); border-color: var(--color-warm); color: #fff; text-decoration: none; }
.rd-footer__cta-outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.rd-footer__cta-outline:hover { background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; }
.rd-footer__contact {
  margin-top: 28px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}
.rd-footer__contact p {
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rd-footer__contact i { color: var(--color-warm); font-size: 16px; }

.rd-footer__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-warm);
  margin-bottom: 18px;
}
.rd-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rd-footer__list a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.15s ease;
}
.rd-footer__list a:hover { color: #fff; text-decoration: none; }

.rd-footer__rule {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 0;
}
.rd-footer__legal {
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.rd-footer__legal-cities {
  color: rgba(255, 255, 255, 0.4);
}
.rd-footer__social {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 8px;
}
.rd-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.rd-footer__social a:hover { background: var(--color-warm); color: var(--color-bg-dark); text-decoration: none; }

@media (max-width: 1024px) {
  .rd-footer { padding: 56px 20px 32px; }
  .rd-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .rd-footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .rd-footer__brand .rd-footer__tagline { max-width: 100%; }
  .rd-footer__legal { flex-direction: column; align-items: flex-start; }
}

/* ---------- P03 (2026-05-24) — Font cascade fixes -------------------------
   Legacy style.css ships `label { font-family: var(--font-heading); ... }`
   which gives EVERY form label the heading-font treatment. After P03
   aliased --font-heading to Cormorant Garamond, plugin form labels (account
   create-property, settings, etc.) started rendering in serif at 14px —
   illegible. Mockup form labels are sans-serif Plus Jakarta.

   Scope this override broadly enough to catch every form label, but exclude
   .rd-* contexts where labels already inherit from explicit utility rules. */
label,
.form-group > label,
.control-label {
  font-family: var(--rd-font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Sidebar widget titles on account/settings views — Resido sets these to
   `h4.widget-title { font-size: 17px; font-weight: 500 }` with no font.
   Force them to display font to match mockup section heads. */
.dashboard-wraper h4,
.dashboard-wraper .widget-title,
.dashboard-wraper h4.widget-title {
  font-family: var(--rd-font-display);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* ---------- P04 (2026-05-24) — CMS static page restyle (.rd-page) ----------
   Renders /about-us and any other CMS-managed page via views/page.blade.php.
   Editorial header (eyebrow + display title + lede) + content body with
   reasonable prose width. No inline styles, no hero image overlay. */
.rd-page {
  background: var(--color-bg-cream);
}
.rd-page__inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 32px;
}
.rd-page__header {
  background: var(--color-bg-light);
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--color-border-light);
}
.rd-page__eyebrow {
  font-family: var(--rd-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-warm);
  margin: 0 0 12px;
}
.rd-page__title {
  font-family: var(--rd-font-display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--color-text-primary-light);
  margin: 0;
}
.rd-page__lede {
  margin: 16px 0 0;
  font-family: var(--rd-font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-secondary-light);
  max-width: 620px;
}
.rd-page__body {
  background: var(--color-bg-white);
  padding: 56px 0 80px;
}
.rd-page__content {
  font-family: var(--rd-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text-primary-light);
}
.rd-page__content > * + * { margin-top: 1.1em; }
.rd-page__content h2 {
  font-family: var(--rd-font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 1.8em;
  margin-bottom: 0.4em;
}
.rd-page__content h3 {
  font-family: var(--rd-font-display);
  font-size: 22px;
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.3em;
}
.rd-page__content a {
  color: var(--color-warm);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rd-page__content a:hover { color: var(--color-warm-hover); }
.rd-page__content ul,
.rd-page__content ol { padding-left: 1.4em; }
.rd-page__content li { margin-bottom: 6px; }
.rd-page__content blockquote {
  border-left: 3px solid var(--color-warm);
  margin: 1.5em 0;
  padding: 4px 20px;
  font-style: italic;
  color: var(--color-text-secondary-light);
}
.rd-page__content img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

@media (max-width: 640px) {
  .rd-page__inner { padding: 0 20px; }
  .rd-page__header { padding: 48px 0 36px; }
  .rd-page__body { padding: 40px 0 56px; }
}

/* ---------- P06 (2026-05-24) — Leaflet transit-pin overlay ----------
   BTS/MRT station markers rendered by redesign-map-enhancements.js.
   The marker icon is an inline SVG via L.divIcon, so we mostly just need
   the container to be transparent and not interfere with tooltips. */
.rd-transit-pin {
  background: transparent !important;
  border: 0 !important;
  pointer-events: auto;
}
.rd-transit-pin svg { display: block; }

/* Leaflet built-in layers control restyled to match redesign palette. */
.leaflet-control-layers {
  border: 1px solid var(--color-border-light) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card-light) !important;
}
.leaflet-control-layers-expanded {
  padding: 10px 14px !important;
  font-family: var(--rd-font-body) !important;
  font-size: 13px !important;
  /* Leaflet's JS sets an inline max-height equal to the map container minus
     ~50px, which leaves a tall scrollable shell around our 5-row POI list
     (Richard 2026-05-31 #9566). Force the panel to size to its content. */
  max-height: none !important;
  overflow: visible !important;
  width: auto !important;
}
.leaflet-control-layers-list {
  overflow: visible !important;
}
.leaflet-control-layers-overlays label {
  margin-bottom: 4px;
  font-weight: 500;
  color: var(--color-text-primary-light);
}

/* ---------- P07 (2026-05-24) — POI marker pins ----------
   Used by redesign-map-enhancements.js for the 5-category layer control
   (Mini marts / Shopping / Transport / Schools / Hospitals). Each marker
   is an L.divIcon containing a circular pin with the category icon centered. */
.rd-poi-marker {
  background: transparent !important;
  border: 0 !important;
}
.rd-poi-marker__pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 13px;
  line-height: 1;
}
.rd-poi-marker__pin i { font-size: 13px; }

/* =========================================================================
   P07 — Search-box autocomplete (Richard msg 9375, 2026-05-24).
   Lives on /properties at the top of the filter header. Chips render inside
   the rounded shell next to the search icon; dropdown drops below with two
   groups (CITY = states, DISTRICT = cities). Goal: cut typos + zero-result
   searches by guiding users to known place names.
   ========================================================================= */
.rd-search-suggest {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
  font-family: var(--rd-font-body, inherit);
}
.rd-search-suggest__shell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 16px;
  background: #fff;
  border: 1.5px solid var(--rd-border, #d0d7e1);
  border-radius: 12px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  flex-wrap: wrap;
}
.rd-search-suggest.is-open .rd-search-suggest__shell,
.rd-search-suggest__shell:focus-within {
  border-color: var(--rd-brand, #163a5f);
  box-shadow: 0 0 0 3px rgba(22, 58, 95, 0.08);
}
.rd-search-suggest__icon {
  color: var(--rd-muted, #6b7a8f);
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.rd-search-suggest__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rd-search-suggest__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #eef3f9;
  border: 1px solid #d6dde6;
  border-radius: 6px;
  color: var(--rd-brand, #163a5f);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background 120ms ease;
}
.rd-search-suggest__chip:hover,
.rd-search-suggest__chip:focus {
  background: #e2eaf3;
  outline: none;
}
.rd-search-suggest__chip-x {
  /* Tabler `ti ti-x` icon (inline SVG, not a glyph) - the SVG viewBox is
     centered so vertical alignment matches "Chonburi" without translateY
     hacks. We previously used &times; but that glyph sits below baseline
     in most fonts and refused to optically center inside a 16px box. */
  font-size: 14px;
  line-height: 1;
  color: var(--rd-muted, #6b7a8f);
  margin-left: 2px;
}
.rd-search-suggest__chip-x:hover { color: var(--color-warm, #A8313C); }
.rd-search-suggest__input {
  flex: 1 1 160px;
  min-width: 120px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
  color: var(--rd-ink, #1a2638);
  padding: 6px 0;
}
.rd-search-suggest__input::placeholder {
  color: var(--rd-muted, #98a3b3);
}

.rd-search-suggest__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 220;
  max-height: 420px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--rd-border, #d8dee7);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 27, 48, 0.10), 0 2px 6px rgba(15, 27, 48, 0.06);
  padding: 8px 0;
}
.rd-search-suggest__group + .rd-search-suggest__group {
  border-top: 1px solid #eef2f7;
  margin-top: 4px;
  padding-top: 4px;
}
.rd-search-suggest__group-title {
  padding: 10px 18px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rd-muted, #8a96a8);
}
.rd-search-suggest__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rd-search-suggest__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 18px;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 15px;
  color: var(--rd-ink, #1a2638);
  cursor: pointer;
  transition: background 120ms ease;
}
.rd-search-suggest__item:hover,
.rd-search-suggest__item.is-active,
.rd-search-suggest__item:focus {
  background: #f4f7fb;
  outline: none;
}
.rd-search-suggest__avatar {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #eef3f9;
  color: var(--rd-brand, #163a5f);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.rd-search-suggest__item-label {
  flex: 1 1 auto;
}
.rd-search-suggest__empty {
  padding: 14px 18px;
  font-size: 14px;
  color: var(--rd-muted, #6b7a8f);
}

/* ---------- Legacy capitalize override (G2 audit fix) ----------
   Resido's style.css ships `h1,h2,h3,h4,h5,h6 { text-transform: capitalize }`
   which mangles mockup sentence-case headings into Title Case. Cancel
   the rule across every redesign typography surface. */
.rd-page__title,
.rd-page__content h1, .rd-page__content h2, .rd-page__content h3,
.rd-di-title, .rd-di-results__count, .rd-di-empty__title,
.rd-pd-hero h1, .rd-pd-h2,
.rd-footer__brand-text,
.rd-topnav__brand-text,
.rd-map-popup__title,
.t-h1, .t-h2, .t-h3, .t-display { text-transform: none; }

/* ---------- P10 (2026-05-25) — 404 page ---------- */
.rd-404 {
    background: var(--color-bg-cream);
    min-height: 60vh;
    padding: 80px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rd-404__card {
    max-width: 720px;
    width: 100%;
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: 18px;
    padding: 56px 48px;
    box-shadow: var(--shadow-card-light);
    text-align: center;
}
.rd-404__eyebrow {
    font-family: var(--rd-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-warm);
    margin: 0 0 14px;
}
.rd-404__title {
    margin: 0 0 18px;
    font-family: var(--rd-font-display);
    font-size: clamp(40px, 5vw, 56px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--color-text-primary-light);
    text-transform: none;
}
.rd-404__title em {
    font-style: italic;
    font-weight: 600;
    color: var(--color-warm);
}
.rd-404__lede {
    margin: 0 0 24px;
    font-family: var(--rd-font-body);
    font-size: 17px;
    line-height: 1.55;
    color: var(--color-text-secondary-light);
}
.rd-404__reasons {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    text-align: left;
    max-width: 540px;
    margin-inline: auto;
}
.rd-404__reasons li {
    position: relative;
    padding: 10px 0 10px 28px;
    border-top: 1px dashed var(--color-border-light);
    font-family: var(--rd-font-body);
    font-size: 15px;
    color: var(--color-text-primary-light);
}
.rd-404__reasons li:last-child { border-bottom: 1px dashed var(--color-border-light); }
.rd-404__reasons li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-warm);
    opacity: 0.7;
}
.rd-404__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.rd-404__cta-primary,
.rd-404__cta-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    font-family: var(--rd-font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.rd-404__cta-primary {
    background: var(--color-bg-dark);
    color: #fff;
    border: 1px solid var(--color-bg-dark);
}
.rd-404__cta-primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
.rd-404__cta-outline {
    background: transparent;
    color: var(--color-text-primary-light);
    border: 1px solid var(--color-text-primary-light);
}
.rd-404__cta-outline:hover {
    background: var(--color-text-primary-light);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

@media (max-width: 560px) {
    .rd-404 { padding: 56px 16px; }
    .rd-404__card { padding: 40px 24px; }
    .rd-404__title { font-size: 34px; }
}

/* ── Flash toast (replaces sweetalert2 dependency) ─────
   Triggered by showLoginIndex() in header.blade.php and any other
   "please log in" callsite. Auto-dismisses after 3s; pointer-events
   none so it doesn't block clicks while visible. */
.rd-flash-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.96);
    background: rgba(20, 30, 60, .94);
    color: #fff;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
    opacity: 0;
    pointer-events: none;
    z-index: 99999;
    transition: opacity .2s ease, transform .2s ease;
    max-width: 90vw;
    text-align: center;
}
.rd-flash-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Pagination wrap guard. Bootstrap `.pagination` defaults to nowrap, so a long
   page list runs past the viewport on phones (responsive audit 2026-05-28:
   /projects +74px, /agents/{slug} property list +173px at 360px). Wrap + center
   on narrow screens. Pages that wrap pagination in a redesign container
   (.rd-search__pagination, .rd-agents-pagination) keep their own layout via
   higher specificity, so this only catches the bare Bootstrap markup. */
@media (max-width: 575.98px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 6px;
    }
}