/* =============================================================
   Melkchi / کاشینجا — Design System
   Brand tokens, base typography, and primitive components.
   All colors, spacing, radii, and shadows live here.
   ============================================================= */

:root {
  /* Brand */
  --ds-brand:        #00A693;
  --ds-brand-600:    #009080;
  --ds-brand-700:    #007B6E;
  --ds-brand-800:    #005B5D;
  --ds-brand-50:     #E6F7F4;
  --ds-brand-100:    #CCEFE9;

  --ds-accent:       #FF8552;   /* warm orange — CTAs / highlights */
  --ds-accent-600:   #E6744A;
  --ds-accent-700:   #BF5F3A;

  --ds-rent:         #3B82F6;   /* blue — rent differentiation */
  --ds-rent-50:      #E8F0FE;

  /* Neutrals — match the official brand guide. */
  --ds-ink:          #333333;   /* primary body copy */
  --ds-ink-2:        #1F2933;   /* slightly darker — section headings */
  --ds-muted:        #5F6B73;   /* secondary text/captions — darkened to ~5:1 for WCAG AA (was #7D8B94 ≈3.5:1) */
  --ds-muted-2:      #717C85;   /* tertiary — darkened from #9AA6AD (≈2.5:1, failed AA) while staying lighter than --ds-muted */
  --ds-line:         #E2E6E9;   /* borders */
  --ds-line-2:       #EEF1F3;   /* faint dividers */
  --ds-surface:      #FFFFFF;   /* page background */
  --ds-surface-2:    #F4F6F7;   /* boxes, filter panels, footer block */
  --ds-surface-3:    #ECEFF1;   /* deeper rest state for chips, scrollbars */

  /* Brand-guide aliases — kept so legacy navbar.css / footer.html stay valid
     while we migrate everything to the canonical --ds-* names. */
  --primary-brand:   var(--ds-brand);
  --primary-bg:      var(--ds-surface);
  --secondary-bg:    var(--ds-surface-2);
  --primary-text:    var(--ds-ink);
  --secondary-text:  var(--ds-muted);
  --accent-color:    var(--ds-accent);
  --accent-hover:    var(--ds-accent-600);
  --brand-dark:      var(--ds-brand-800);
  --border-color:    var(--ds-line);
  --hover-bg:        var(--ds-surface-2);

  /* Feedback */
  --ds-success:      #10B981;
  --ds-warning:      #F59E0B;
  --ds-danger:       #EF4444;
  --ds-info:         #0EA5E9;

  /* Destructive action (logout, delete, deny, dismiss). */
  --ds-action-danger:      #DC2626;
  --ds-action-danger-700:  #B91C1C;
  --ds-action-danger-50:   #FEE2E2;

  /* Typography */
  --ds-font:         'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ds-font-display: 'Vazirmatn', serif;

  /* Type scale — Persian copy reads ~1 step larger than Latin at the same
     pixel size, so the base sits at 16px and the small steps stay generous. */
  --ds-text-xs:    0.75rem;   /* 12px — fine print, codes */
  --ds-text-sm:    0.875rem;  /* 14px — captions, helper text */
  --ds-text-base:  1rem;      /* 16px — body */
  --ds-text-lg:    1.125rem;  /* 18px — emphasised body */
  --ds-text-xl:    1.25rem;   /* 20px — small headings */
  --ds-text-2xl:   1.5rem;    /* 24px — section headings */
  --ds-text-3xl:   1.875rem;  /* 30px — page titles */
  --ds-text-4xl:   2.25rem;   /* 36px — landing-hero h1 fallback */
  --ds-text-display: clamp(2rem, 5.4vw, 3.8rem); /* fluid hero */

  /* Persian needs a roomier line-height than Latin for descenders / kashida. */
  --ds-leading-tight: 1.35;
  --ds-leading-snug:  1.5;
  --ds-leading-fa:    1.75;
  --ds-leading-loose: 1.9;

  /* Font weights */
  --ds-weight-regular: 400;
  --ds-weight-medium:  500;
  --ds-weight-semi:    600;
  --ds-weight-bold:    700;
  --ds-weight-black:   900;

  /* Spacing scale (4px step) */
  --ds-space-1:  4px;
  --ds-space-2:  8px;
  --ds-space-3:  12px;
  --ds-space-4:  16px;
  --ds-space-5:  20px;
  --ds-space-6:  24px;
  --ds-space-8:  32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;

  /* Radius */
  --ds-radius-sm:  6px;
  --ds-radius-md:  10px;
  --ds-radius-lg:  14px;
  --ds-radius-xl:  20px;
  --ds-radius-2xl: 28px;
  --ds-radius-pill: 999px;

  /* Shadows — `--ds-shadow-rgb` lets dark mode override the colour without
     repeating the geometry of every shadow. */
  --ds-shadow-rgb: 15, 23, 42;
  --ds-shadow-xs: 0 1px 2px rgba(var(--ds-shadow-rgb), 0.05);
  --ds-shadow-sm: 0 1px 3px rgba(var(--ds-shadow-rgb), 0.08), 0 1px 2px rgba(var(--ds-shadow-rgb), 0.04);
  --ds-shadow-md: 0 4px 12px rgba(var(--ds-shadow-rgb), 0.10), 0 2px 4px rgba(var(--ds-shadow-rgb), 0.06);
  --ds-shadow-lg: 0 12px 32px rgba(var(--ds-shadow-rgb), 0.12), 0 4px 8px rgba(var(--ds-shadow-rgb), 0.06);
  --ds-shadow-xl: 0 24px 64px rgba(var(--ds-shadow-rgb), 0.16);
  --ds-shadow-brand: 0 8px 24px rgba(0, 166, 147, 0.24);

  /* Motion */
  --ds-ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --ds-fast:   150ms var(--ds-ease);
  --ds-hover:  200ms var(--ds-ease);   /* hover/focus on cards + buttons */
  --ds-normal: 250ms var(--ds-ease);
  --ds-slow:   400ms var(--ds-ease);

  /* Layout */
  /* --ds-navbar-h is the *occupied* vertical space the floating navbar
     consumes from the top of the viewport (its `top` offset + its own height).
     Every consumer (hero margin-top, sticky-sidebar top, body padding-top)
     uses this token so a single source of truth keeps content from sliding
     under the navbar. The mobile breakpoints override it where the navbar
     visibly shrinks (see :root @media rules below). */
  --ds-navbar-h:        90px;  /* desktop:  top 20 + height 70 */
  --ds-bottom-nav-h:    68px;
  --ds-container-max:   1280px;
  --ds-container-pad:   24px;
  --ds-safe-bottom:     env(safe-area-inset-bottom, 0px);
  --ds-safe-top:        env(safe-area-inset-top, 0px);

  /* Z-stack */
  --ds-z-sticky:   10;
  --ds-z-dropdown: 100;
  --ds-z-navbar:   500;
  --ds-z-modal:    1000;
  --ds-z-toast:    2000;
}

/* ---- Responsive navbar-occupied height ----
   The floating navbar shrinks on smaller viewports (see navbar.css). At
   ≤768 px base-shell.css hides it entirely (`.modern-navbar { display:none }`)
   and the bottom nav takes over, so the occupied height collapses to 0
   and any spacing that referenced it (hero margin-top, section
   scroll-margin, sticky-sidebar top) reduces to whatever offset the
   consumer added on top. */
@media (max-width: 1024px) { :root { --ds-navbar-h: 85px; } }   /* top 15 + h 70 */
@media (max-width: 768px)  { :root { --ds-navbar-h: 0px;  } }   /* navbar hidden */

/* ---- Dark theme — opt-in via `body[data-theme="dark"]`, with an
        OS-level fallback for users who haven’t toggled but prefer dark. ----
   The brand petrol (#005B5D) is dark enough to anchor the surface; teal
   #00A693 stays vibrant on it. We adjust ink, muted, line, and the
   brand tints so contrast stays AA-readable. */
body[data-theme="dark"] {
  --ds-ink:          #E6EBED;
  --ds-ink-2:        #C5CCD0;
  --ds-muted:        #94A0A6;
  --ds-muted-2:      #7B868D;
  --ds-line:         #1E3133;
  --ds-line-2:       #142528;
  --ds-surface:      #0F1A1B;
  --ds-surface-2:    #122224;
  --ds-surface-3:    #16292B;
  --ds-brand-50:     #093C39;
  --ds-brand-100:    #0B4D49;
  /* Strong shadow base so card-lift effects stay visible on dark surface.
     The rgb channel goes pure black; alpha bumps below give 1.6× the
     visual weight of the light-mode shadows. */
  --ds-shadow-rgb:   0, 0, 0;
  --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32);
  --ds-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.24);
  --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.48), 0 2px 4px rgba(0, 0, 0, 0.28);
  --ds-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.56), 0 4px 8px rgba(0, 0, 0, 0.32);
  --ds-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.62);
}
/* Auto dark-mode via prefers-color-scheme was REMOVED — visitors whose OS
   prefers dark were getting a black surface they never opted into.
   Dark mode stays available, but only when explicitly picked via the
   profile-menu toggle (body[data-theme="dark"] above). */

/* ---- Base ---- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ds-font);
  color: var(--ds-ink);
  background: var(--ds-surface);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-fa);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Reduced-motion: honour the user’s OS preference. ----
   Strip animations and shorten transitions so scroll, hover, and entrances
   stop pulling attention. Skeleton, label-rotate, modal slide-in all comply. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}

/* ---- Shared focus ring — used by navbar links, buttons, dropdowns. ---- */
.ds-focus-ring:focus-visible {
  outline: 2px solid var(--ds-brand);
  outline-offset: 2px;
  border-radius: var(--ds-radius-sm);
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Persian numerals helper — use on any element to force Persian digits */
.ds-fa-num { font-feature-settings: "lnum", "tnum"; }

/* Scroll-lock utility — used by modals so the page underneath doesn't
   continue to scroll when the modal is open. Applied to <body>. */
.ds-scroll-lock { overflow: hidden; }

/* Empty-state illustration — renders the no-favorites / no-search /
   no-properties SVGs at a comfortable size with a tiny opacity nudge
   so the heading still leads. Width capped so the SVG never dominates. */
.empty-state__svg {
  display: block;
  margin: 0 auto var(--ds-space-3);
  max-width: 180px;
  width: 60%;
  height: auto;
  opacity: 0.92;
}

/* ===========================================================
   Branded error pages (404 / 500 / 403)
   =========================================================== */
.error-page {
  max-width: 560px;
  margin: calc(var(--ds-navbar-h) + var(--ds-space-12)) auto var(--ds-space-12);
  padding: 0 var(--ds-space-6);
  text-align: center;
}
.error-page__art {
  display: block;
  margin: 0 auto var(--ds-space-4);
  max-width: 220px;
  width: 70%;
  height: auto;
  opacity: 0.9;
}
.error-page__code {
  font: 800 var(--ds-text-3xl) var(--ds-font);
  color: var(--ds-brand);
  line-height: 1;
  margin-bottom: var(--ds-space-2);
  letter-spacing: 0.04em;
  font-feature-settings: "tnum";
}
.error-page__code--danger { color: var(--ds-action-danger); }
.error-page__title {
  font: 700 var(--ds-text-2xl) var(--ds-font);
  color: var(--ds-ink);
  margin: 0 0 var(--ds-space-3);
}
.error-page__text {
  font-size: var(--ds-text-base);
  color: var(--ds-muted);
  line-height: var(--ds-leading-fa);
  margin-bottom: var(--ds-space-6);
}
.error-page__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
  justify-content: center;
}

/* ===========================================================
   PRIMITIVE: Page shell — keeps blocks contained, never full-bleed.
   Owner asked for left/right gutters site-wide. Pages that legitimately
   need full-bleed (login auth shell, hero with background-image) opt out
   with `body.no-shell`.
   =========================================================== */
.ds-shell {
  width: 100%;
  max-width: var(--ds-container-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, var(--ds-container-pad));
}

body.no-shell .ds-shell { max-width: none; padding-inline: 0; }

/* ===========================================================
   PRIMITIVE: Button
   =========================================================== */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  min-height: 44px;
  font-family: var(--ds-font);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--ds-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--ds-fast), border-color var(--ds-fast),
              color var(--ds-fast), transform var(--ds-fast), box-shadow var(--ds-fast);
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}
.ds-btn:active { transform: translateY(1px); }
.ds-btn:focus-visible { outline: 2px solid var(--ds-brand); outline-offset: 2px; }
.ds-btn[disabled], .ds-btn.is-disabled {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

/* Sizes */
.ds-btn--sm { min-height: 36px; padding: 8px 14px; font-size: 0.875rem; }
.ds-btn--lg { min-height: 52px; padding: 14px 24px; font-size: 1rem; }
.ds-btn--block { width: 100%; }

/* Variants */
.ds-btn--primary {
  background: var(--ds-brand);
  color: #fff;
  box-shadow: var(--ds-shadow-brand);
}
.ds-btn--primary:hover { background: var(--ds-brand-700); }

.ds-btn--accent {
  background: var(--ds-accent);
  color: #fff;
}
.ds-btn--accent:hover { background: var(--ds-accent-600); }

.ds-btn--ghost {
  background: transparent;
  color: var(--ds-ink);
  border-color: var(--ds-line);
}
.ds-btn--ghost:hover { background: var(--ds-surface-2); border-color: var(--ds-brand); color: var(--ds-brand); }

.ds-btn--soft {
  background: var(--ds-brand-50);
  color: var(--ds-brand-800);
}
.ds-btn--soft:hover { background: var(--ds-brand-100); }

.ds-btn--danger {
  background: var(--ds-danger);
  color: #fff;
}
.ds-btn--danger:hover { filter: brightness(0.92); }

.ds-btn--icon {
  padding: 0;
  width: 44px;
  min-height: 44px;
  border-radius: var(--ds-radius-md);
}

/* ===========================================================
   PRIMITIVE: Chip / Pill
   =========================================================== */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  min-height: 34px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-pill);
  color: var(--ds-ink-2);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ds-fast);
  white-space: nowrap;
  user-select: none;
}
.ds-chip:hover { border-color: var(--ds-brand); color: var(--ds-brand); }
.ds-chip.is-active,
.ds-chip[aria-pressed="true"] {
  background: var(--ds-brand);
  border-color: var(--ds-brand);
  color: #fff;
  box-shadow: var(--ds-shadow-brand);
}
.ds-chip i { font-size: 0.8em; }

/* ===========================================================
   PRIMITIVE: Badge
   =========================================================== */
.ds-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--ds-radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  height: 22px;
}
.ds-badge--sell    { background: var(--ds-brand-50);    color: var(--ds-brand-800); }
.ds-badge--rent    { background: var(--ds-rent-50);     color: var(--ds-rent); }
.ds-badge--new     { background: rgba(255, 133, 82, 0.12); color: var(--ds-accent-700); }
.ds-badge--success { background: rgba(16, 185, 129, 0.14); color: #047857; }
.ds-badge--danger  { background: rgba(239, 68, 68, 0.14);  color: #b91c1c; }
.ds-badge--warning { background: rgba(245, 158, 11, 0.14); color: #b45309; }

/* ===========================================================
   PRIMITIVE: Form input
   =========================================================== */
.ds-input,
.ds-select,
.ds-textarea {
  display: block;
  width: 100%;
  font-family: var(--ds-font);
  font-size: 0.95rem;
  color: var(--ds-ink);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  padding: 12px 14px;
  min-height: 44px;
  transition: border-color var(--ds-fast), box-shadow var(--ds-fast);
  direction: rtl;
  text-align: right;
}
.ds-input:hover, .ds-select:hover, .ds-textarea:hover { border-color: var(--ds-muted-2); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  outline: none;
  border-color: var(--ds-brand);
  box-shadow: 0 0 0 4px rgba(0, 166, 147, 0.12);
}
.ds-textarea { min-height: 120px; resize: vertical; }
.ds-input[type="search"] { -webkit-appearance: none; }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-muted-2); }

.ds-field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ds-ink-2);
  margin-bottom: 6px;
}
.ds-field-help { font-size: 0.8rem; color: var(--ds-muted); margin-top: 4px; }
.ds-field-error { font-size: 0.8rem; color: var(--ds-danger); margin-top: 4px; }

/* ===========================================================
   PRIMITIVE: Surface (card shell)
   =========================================================== */
.ds-surface {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-xs);
}
.ds-surface--flat { box-shadow: none; }
.ds-surface--raised { box-shadow: var(--ds-shadow-md); border-color: transparent; }

/* ===========================================================
   PRIMITIVE: Container
   =========================================================== */
.ds-container {
  width: 100%;
  max-width: var(--ds-container-max);
  margin-inline: auto;
  padding-inline: var(--ds-container-pad);
}
@media (max-width: 640px) {
  .ds-container { padding-inline: 16px; }
}

/* ===========================================================
   PRIMITIVE: Divider
   =========================================================== */
.ds-divider { height: 1px; background: var(--ds-line); margin: var(--ds-space-6) 0; }

/* ===========================================================
   PRIMITIVE: Skeleton
   =========================================================== */
@keyframes ds-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.ds-skeleton {
  background: linear-gradient(90deg, var(--ds-surface-3) 25%, var(--ds-line-2) 50%, var(--ds-surface-3) 75%);
  background-size: 200% 100%;
  animation: ds-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--ds-radius-sm);
}

/* ===========================================================
   UTILITY: Scrollbar — hide on horizontal scrollers
   =========================================================== */
.ds-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.ds-scroll-x::-webkit-scrollbar { display: none; }
.ds-scroll-x { scrollbar-width: none; }

/* ===========================================================
   UTILITY: Visually hidden (accessible)
   =========================================================== */
.ds-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================
   RESPONSIVE: helpers
   =========================================================== */
@media (max-width: 767px)  { .ds-hide-mobile  { display: none !important; } }
@media (min-width: 768px)  { .ds-hide-desktop { display: none !important; } }
@media (min-width: 1024px) { .ds-show-lg     { display: block !important; } }

/* ===========================================================
   Profile-completion banner (top of every page while incomplete).
   Pinned to the very top above the floating navbar so the two never
   stack on top of each other. When present, --ds-banner-h is set on
   body so the navbar pushes down by the banner's height and body
   padding extends to clear both.
   =========================================================== */
:root { --ds-banner-h: 0px; }
body:has(.profile-banner) { --ds-banner-h: 48px; }
@media (max-width: 640px) {
  body:has(.profile-banner) { --ds-banner-h: 64px; }  /* wraps to 2 lines */
}
.profile-banner {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: calc(var(--ds-z-navbar) + 1);  /* sits above the floating navbar */
  background: linear-gradient(90deg, var(--ds-brand-50) 0%, var(--ds-brand-100) 100%);
  border-bottom: 1px solid var(--ds-brand-100);
  color: var(--ds-brand-800);
  font-family: var(--ds-font);
  font-size: var(--ds-text-sm);
}
body[data-theme="dark"] .profile-banner {
  /* Use a darker brand surface so light teal text on a teal-50 gradient
     doesn’t become illegible after the dark-mode token swap. */
  background: linear-gradient(90deg, var(--ds-surface-2) 0%, var(--ds-surface-3) 100%);
  color: var(--ds-brand);
  border-bottom-color: var(--ds-line);
}
body[data-theme="dark"] .profile-banner__close {
  color: var(--ds-muted);
}
body[data-theme="dark"] .profile-banner__close:hover {
  color: var(--ds-brand);
  background: rgba(0, 166, 147, 0.16);
}
.profile-banner__inner {
  max-width: var(--ds-container-max);
  margin-inline: auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile-banner__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ds-brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}
.profile-banner__text {
  flex: 1;
  line-height: 1.6;
}
.profile-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ds-brand);
  color: #fff;
  border-radius: var(--ds-radius-pill);
  padding: 7px 14px;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background var(--ds-fast);
  white-space: nowrap;
}
.profile-banner__cta:hover { background: var(--ds-brand-700); }
.profile-banner__close-form { margin: 0; }
.profile-banner__close {
  background: transparent;
  border: none;
  color: var(--ds-brand-800);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity var(--ds-fast), background var(--ds-fast);
}
.profile-banner__close:hover { opacity: 1; background: rgba(0, 166, 147, 0.12); }

@media (max-width: 640px) {
  .profile-banner__text { font-size: 0.82rem; }
  .profile-banner__cta { padding: 6px 12px; font-size: 0.78rem; }
}

/* ===========================================================
   Map helpers: "search this area" chip + geolocate button
   =========================================================== */
.map-search-here-chip {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--ds-surface);
  color: var(--ds-brand-800);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-pill);
  font: 700 0.9rem var(--ds-font);
  cursor: pointer;
  box-shadow: var(--ds-shadow-lg);
  transition: background var(--ds-fast), transform var(--ds-fast);
}
.map-search-here-chip:hover {
  background: var(--ds-brand-50);
  transform: translateX(-50%) translateY(-2px);
}
.map-search-here-chip:active { transform: translateX(-50%) translateY(0); }
.map-search-here-chip i { color: var(--ds-brand); }
.map-search-here-chip[hidden] { display: none; }

.map-search-here-chip--desktop { top: 12px; }

/* «My location» round button on the mobile map overlay. Sits in the
   bottom-left of the map area (RTL: bottom-right via inset-inline-start). */
.map-locate-btn {
  position: absolute;
  bottom: 16px;
  inset-inline-start: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  color: var(--ds-brand);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ds-text-base);
  box-shadow: var(--ds-shadow-sm);
  z-index: 1100;
  transition: background var(--ds-fast), transform var(--ds-fast);
}
.map-locate-btn:hover {
  background: var(--ds-brand-50);
  transform: translateY(-1px);
}
.map-locate-btn:focus-visible {
  outline: 2px solid var(--ds-brand);
  outline-offset: 2px;
}

/* ===========================================================
   Sticky mobile CTA on the property detail page
   =========================================================== */
.detail-mobile-cta { display: none; }

@media (max-width: 900px) {
  .detail-mobile-cta {
    display: flex;
    position: fixed;
    bottom: calc(var(--ds-bottom-nav-h, 68px) + env(safe-area-inset-bottom, 0px) + 8px);
    inset-inline: 12px;
    z-index: 1100;
    gap: 8px;
    padding: 10px 12px;
    background: var(--ds-surface);
    border-radius: var(--ds-radius-xl);
    box-shadow: var(--ds-shadow-xl);
    align-items: center;
    border: 1px solid var(--ds-line);
  }
  .detail-mobile-cta__price {
    flex: 1;
    min-width: 0;
    font: 800 clamp(0.85rem, 3.6vw, 0.95rem) var(--ds-font);
    color: var(--ds-brand-800);
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .detail-mobile-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    min-height: 44px;
    border: none;
    border-radius: var(--ds-radius-md);
    font: 700 0.9rem var(--ds-font);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--ds-fast), transform var(--ds-fast);
  }
  .detail-mobile-cta__btn--save {
    background: var(--ds-brand-50);
    color: var(--ds-brand-800);
    width: 44px;
    padding: 10px;
  }
  .detail-mobile-cta__btn--save:hover  { background: var(--ds-brand-100); }
  .detail-mobile-cta__btn--save:active { transform: scale(0.96); }
  .detail-mobile-cta__btn--save .fas   { color: var(--ds-danger); }
  .detail-mobile-cta__btn--call {
    background: var(--ds-brand);
    color: #fff;
    flex: 0 0 auto;
  }
  .detail-mobile-cta__btn--call:hover  { background: var(--ds-brand-700); }
  .detail-mobile-cta__btn--call:active { transform: scale(0.98); }

  /* Leave room at the bottom of the page so content isn't hidden
     behind the floating CTA + bottom nav. The CTA pill is ~60 px tall and
     has its own top offset of 8 px above the bottom nav, so reserve a full
     104 px on top of the nav height. */
  body.property-detail-page {
    padding-bottom: calc(var(--ds-bottom-nav-h, 68px) + 104px + env(safe-area-inset-bottom, 0px));
  }
}

/* ===========================================================
   PRIMITIVE: Two-tab search hero (counselor / agency / constructor lists).
   =========================================================== */
.cs-search {
  background: linear-gradient(135deg, var(--ds-brand-50) 0%, #fff 60%);
  border: 1px solid var(--ds-brand-100);
  border-radius: var(--ds-radius-2xl);
  padding: 32px 28px;
  margin: calc(var(--ds-navbar-h) + 16px) 0 24px;
}
.cs-search__inner { max-width: 880px; margin: 0 auto; text-align: center; }
.cs-search__title { font-size: 1.6rem; font-weight: 800; color: var(--ds-ink); margin: 0 0 6px; }
.cs-search__sub { color: var(--ds-muted); margin: 0 0 22px; }
.cs-search__tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--ds-surface-3);
  border-radius: var(--ds-radius-pill);
  margin-bottom: 14px;
}
.cs-search__tab {
  padding: 8px 22px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ds-muted);
  background: transparent;
  border: none;
  border-radius: var(--ds-radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ds-font);
  transition: all var(--ds-fast);
}
.cs-search__tab.is-active { background: #fff; color: var(--ds-brand); box-shadow: var(--ds-shadow-sm); }
.cs-search__form { display: none; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: stretch; }
.cs-search__form.is-active { display: grid; }
.cs-search__form--name { grid-template-columns: 1fr auto; }
.cs-search__field {
  background: #fff;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
  gap: 4px;
}
.cs-search__field--full { flex-direction: row; align-items: center; gap: 10px; padding: 0 14px; min-height: 50px; }
.cs-search__field label { font-size: 0.78rem; color: var(--ds-muted); font-weight: 600; }
.cs-search__field select,
.cs-search__field input {
  width: 100%; border: none; background: transparent;
  font: 600 0.92rem var(--ds-font); color: var(--ds-ink); outline: none;
}
.cs-search__field i { color: var(--ds-muted); }
.cs-search__submit {
  padding: 0 22px;
  background: var(--ds-brand);
  color: #fff;
  border: none;
  border-radius: var(--ds-radius-lg);
  font: 700 0.95rem var(--ds-font);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.cs-search__submit:hover { background: var(--ds-brand-700); }
@media (max-width: 720px) {
  .cs-search__form { grid-template-columns: 1fr; }
  .cs-search__form--name { grid-template-columns: 1fr; }
}

/* ---- Pagination -----------------------------------------------------------
   Shared control used by the querystring-preserving includes/_pagination.html
   partial. Pages that ship their own .pagination rules (blog, saved-*, …)
   still override these via their later-loaded page CSS. */
.pagination-nav {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}
.pagination {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pagination .page-link {
  padding: 0.5rem 1.1rem;
  border-radius: var(--ds-radius-lg);
  background: #fff;
  color: var(--ds-brand);
  border: 1px solid rgba(0, 166, 147, .25);
  text-decoration: none;
  font: 600 0.95rem var(--ds-font);
  transition: background-color .2s ease, color .2s ease;
}
.pagination .page-link:hover {
  background: var(--ds-brand);
  color: #fff;
}
.pagination .page-info {
  color: var(--ds-muted);
  font-size: var(--ds-text-sm, 0.875rem);
}