/* ─── THE ULTIMATE TAP-HIGHLIGHT & TRAIL KILLER ─── */
* {
  /* Forces every single element to have an invisible tap color */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  -webkit-tap-highlight-color: transparent !important;
}

a, button, svg, .tp-icon-btn, .mobile-nav-item {
  /* Stops browsers from treating fast taps like long-presses */
  touch-action: manipulation !important; 
  -webkit-touch-callout: none !important;
  outline: none !important;
}

/* Kills the stuck "focus" ring for touch/mouse, but keeps it for keyboard users */
:focus:not(:focus-visible),
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* ─── KILL TAILWIND'S PREFLIGHT SVG BORDER BUG ─── */
.mah-pill-btn svg,
.mobile-nav-item svg {
    /* Destroys the fake solid square borders Tailwind tries to add */
    border: none !important;
    border-style: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    
    /* Forces GPU rendering so the background-blur animation doesn't clip the icons */
    transform: translateZ(0) !important; 
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}
/* ───────────────────────────────────────────────── */



.tb-select-wrap {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 6px; height: 32px; padding: 0 24px 0 8px;
  flex: 1 1 100px; max-width: 160px;
}
.tb-select-wrap > svg:first-child { flex-shrink: 0; color: var(--t3); pointer-events: none; }
.tb-select-wrap select {
  border: none; background: transparent; color: var(--t1);
  font-size: 11px; font-family: var(--font-ui, inherit);
  outline: none; cursor: pointer; width: 100%;
  appearance: none; -webkit-appearance: none;
}
.tb-chevron {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--t3);
}




 /* ─── "ALREADY VIEWED" CARD STYLES ─── */
  .p-card.is-viewed .viewed-badge {
      display: inline-flex !important;
  }
  .p-card.is-viewed {
      opacity: 1 !important; /* Removes the whitish film effect */
  }
  .p-card.is-viewed .rs-title-text {
      color: var(--t3) !important; /* Grays out the title text */
  }

/* ─── PURE FLUID TOOLBAR (NO FORCED BREAKS) ─── */
  .rs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 10px 14px;
    gap: 16px;
    margin-bottom: 24px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    flex-wrap: wrap; /* Safely wraps ONLY when absolutely out of room */
  }

  .toolbar-left {
    flex: 0 0 auto;
  }

  .toolbar-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 300px; /* Takes remaining space, but drops cleanly if less than 300px is left */
    flex-wrap: wrap; /* Allows individual filters to shuffle if needed */
    justify-content: flex-end;
  }

  .tb-select, .qf-input-wrap {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--t1);
    border-radius: 6px;
    font-size: 11px;
    font-family: var(--font-ui);
    height: 32px;
    flex: 1 1 100px; 
    max-width: 160px; /* Keeps them looking crisp on wide screens */

  }

  .tb-select {
    padding: 0 6px;
    cursor: pointer;
    text-overflow: ellipsis;
  }

  .qf-input-wrap {
    display: flex;
    align-items: center;
  }

  .qf-input-wrap .qf-input {
    border: none;
    height: 100%;
    background: transparent;
    padding: 0 6px;
    width: 100%;
    min-width: 0;
    color: var(--t1);
    outline: none;
  }

  .qf-btn {
    background: var(--sky);
    color: white;
    border: none;
    padding: 0 16px;
    height: 32px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 11px;
    cursor: pointer;
    flex-shrink: 0; 
    transition: background 0.2s;
  }
  .qf-btn:hover { background: #0284C7; }

  /* ─── VIEW MODE TOGGLES ─── */
  .view-mode-toggle {
    display: flex; gap: 3px; background: var(--bg-surface);
    padding: 3px; border-radius: 8px; border: 1px solid var(--border);
  }
  .vm-btn {
    width: 26px; height: 26px; border-radius: 5px; border: none;
    background: transparent; color: var(--t3); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
  }
  .vm-btn.on {
    background: var(--bg-card); color: var(--sky); box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  /* ─── MOBILE VANISHING SYSTEM ─── */
  @media (max-width: 850px) { .hide-lg { display: none !important; } }
  @media (max-width: 700px) { .hide-md { display: none !important; } }
  @media (max-width: 550px) { .hide-sm { display: none !important; } }

/* ═══ MOBILE-RESPONSIVE ADVERTISE BUTTON ═══ */
.advertise-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: #111827;
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  white-space: nowrap;
  transition: all 0.2s;
}

.advertise-btn:hover {
  background: #374151;
  transform: translateY(-1px);
}

/* Text visible on desktop */
.advertise-text {
  display: inline;
}

/* SVG icon hidden on desktop */
.advertise-icon-mobile {
  display: none;
}

/* On mobile (550px and below), hide text and show icon */
@media (max-width: 550px) {
  .advertise-btn {
    padding: 10px 12px;
    gap: 0;
    min-width: 42px;
  }
  
  .advertise-text {
    display: none;
  }
  
  .advertise-icon-mobile {
    display: block;
  }
}


/* ════════════════════════════════════════════════════════════
     MASTER GLOBAL LAYOUT
  ════════════════════════════════════════════════════════════ */
  .rs-page { max-width: 1400px; margin: 0 auto; padding: 0.5rem 1.5rem 4rem; min-height: 100vh; width: 100%; }
  
  /* 1. SHRUNK SIDEBAR & REDUCED GAP: Changed from 280px to 240px, and gap from 24px to 20px */
  .rs-layout { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; }
  @media (max-width: 900px) { .rs-layout { grid-template-columns: 1fr; } .rs-sidebar { display: none; } }

  /* 2. INVISIBLE SCROLLBAR: Sidebar still scrolls, but the ugly bar is completely hidden */
  .rs-sidebar { 
    display: flex; flex-direction: column; gap: 16px; 
    position: sticky; top: 85px; align-self: start; 
    max-height: calc(100vh - 100px); 
    overflow-y: auto; 
    z-index: 10; 
    -ms-overflow-style: none;  /* Hides scrollbar in IE and Edge */
    scrollbar-width: none;     /* Hides scrollbar in Firefox */
  }

  /* 3. MAIN CONTENT COLUMN: Ensures proper width constraint within grid */
  .rs-main-col { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    min-width: 0; /* Critical: Prevents flex children from overflowing */
  }
 

  
  /* Hides scrollbar in Chrome, Safari and Opera */
  .rs-sidebar::-webkit-scrollbar { 
    display: none; 
  }

  /* List Mode Overrides - Stripped of Absolute Positioning! */
  .list-mode .p-card { 
    height: auto !important; 
    min-height: 185px !important; 
    display: flex !important; 
    flex-direction: row !important; 
  }
  .list-mode .card-photo { 
    height: auto !important; 
    min-height: 100% !important; 
    width: 220px !important; 
    flex-shrink: 0; 
    border-radius: var(--r-lg) 0 0 var(--r-lg); 
  }
  .list-mode .card-body { 
    padding: 14px 18px 18px 18px !important; /* padding to stop massive bottom gap */
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
    min-width: 0; /* Protects Grid View sizing */
  }
  
  /*Overrides the absolute positioning from previous files */
  .list-mode .card-footer { position: static !important; }
  .list-mode .card-cta { position: static !important; right: auto !important; bottom: auto !important; margin: 0 !important; }
  
  /* Tags Styling - Native Flowing */
  .list-view-tags { display: none; }
  .list-mode .list-view-tags { 
     display: flex !important; 
     align-items: center; 
     justify-content: center; 
     gap: 6px; 
     flex: 1; /* Pushes to exactly the center */
  }
  .list-mode .lvt-tag { font-family: var(--font-data); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex-shrink: 0; }
  .list-mode .lvt-role { background: #DC2626; color: #FFFFFF; border: none; }
  .list-mode .lvt-status.is-online { background: #10B981; color: #FFFFFF; border: none; }
  .list-mode .lvt-status.is-offline { background: var(--bg-surface); color: var(--t3); border: 1px solid var(--border); }
  .list-mode .lvt-status .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
  .list-mode .lvt-status .dot.online { background: #FFFFFF; box-shadow: 0 0 4px rgba(255, 255, 255, 0.6); }
  .list-mode .lvt-status .dot.offline { background: var(--t3); }



/* ─── LIST VIEW EXCLUSIVE TAGS (RESTORED!) ─── */
  .list-view-tags {
    display: none; /* Hidden by default in grid view */
  }

  /* Show and format only when list-mode is active */
  .list-mode .list-view-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    
    /* ─── PIN TO BOTTOM CENTER ─── */
    position: absolute;
    bottom: 14px; 
    left: calc(50% + 90px); 
    transform: translateX(-50%);
    margin: 0;
    z-index: 5;
  }

  .list-mode .lvt-tag {
    font-family: var(--font-data);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* This stops them from overlapping: */
    white-space: nowrap; 
    flex-shrink: 0;
  }


  /* ─── Tag Colors & Dots ─── */
  .list-mode .lvt-role { background: #DC2626; color: #FFFFFF; border: none; }
  .list-mode .lvt-status.is-online { background: #10B981; color: #FFFFFF; border: none; }
  .list-mode .lvt-status.is-offline { background: var(--bg-surface); color: var(--t3); border: 1px solid var(--border); }
  .list-mode .lvt-status .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
  .list-mode .lvt-status .dot.online { background: #FFFFFF; box-shadow: 0 0 4px rgba(255, 255, 255, 0.6); }
  .list-mode .lvt-status .dot.offline { background: var(--t3); }

/* ─── Common Responsive Horizontal List Card ─── */
.list-mode .RS-card {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  border-radius: 12px;
  background: #fff;
  align-items: stretch;
}

.list-mode .RS-card .RS-media {
  flex: 0 0 220px !important; 
  height: auto !important;
  min-height: 100% !important;
}

.list-mode .RS-card .RS-content {
  flex: 1; 
  display: flex;
  flex-direction: column;
  padding: 16px; 
}

/* Ensuring list-view tags hide in grid view and show in list view */
.list-view-tags { display: none; }
.list-mode .list-view-tags { display: inline-flex; }

/* ─── 1. DYNAMIC OFFERS IMAGE WRAPPER ─── */
  .card-photo {
    width: 100% !important;
    aspect-ratio: 4/3 !important; 
    height: auto !important;
    min-height: 240px !important; 
    max-height: none !important; 
    flex-shrink: 0 !important; 
    overflow: hidden !important;
  }
  .card-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    object-position: center !important; 
  }

  /* ─── 2. DYNAMIC REQUESTS IMAGE WRAPPER ─── */
  .lc-image {
    width: 100% !important;
    aspect-ratio: 4/3 !important;
    height: auto !important;
    min-height: 240px !important;
    max-height: none !important;
    flex-shrink: 0 !important; 
    overflow: hidden !important;
  }
  .lc-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    object-position: center !important; 
  }



/* ════════════════════════════════════════
   DESIGN TOKENS (MAJESTIC LIGHT THEME)
════════════════════════════════════════ */
:root {
  /* =========================================================
     1. MAJESTIC LIGHT THEME (Clean, Crisp, Premium)
     ========================================================= */
  --bg-page: #F8F9FA; /* Premium Pearl White background */
  --bg-card: #FFFFFF; /* Pure White property cards */
  --bg-surface: #F3F4F6;
  --bg-hover: #E5E7EB;

  --amber: #E8A83E;
  --amber-dim: rgba(232, 168, 62, 0.15);
  --amber-glow: rgba(232, 168, 62, 0.2);
  --amber-dark: #C48C28;
  --amber-light: #F5C870;
  
  --terracotta: #C45B3A;
  --terracotta-dim: rgba(196, 91, 58, 0.12);
  
  --sage: #5C7A52;
  --sage-dim: rgba(92, 122, 82, 0.15);
  --verified-green: #10B981;
  --green-glow: rgba(16, 185, 129, 0.2);

  /* FLIPPED TEXT: Rich dark colors so you can read them on white! */
  --t-primary: #111827; 
  --t-secondary: #4B5563; 
  --t-tertiary: #6B7280; 
  --t-gold: #D97706;

  --border: rgba(0, 0, 0, 0.08); 
  --border-hover: rgba(232, 168, 62, 0.4);

  --r-sm: 4px;
  --r: 10px;
  --r-lg: 16px;
  
  --font-display: 'Playfair Display', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --font-data: 'DM Mono', monospace;
  --font-ui: 'DM Sans', sans-serif;

  /* Softer shadows for a light theme */
  --shadow-card: 0 4px 15px rgba(0,0,0,0.05);
  --shadow-lift: 0 12px 30px rgba(0,0,0,0.1);

  /* =========================================================
     2. MAPPING TO OLD PAGES
     ========================================================= */
  --bg: var(--bg-page);
  --bg-2: var(--bg-card);
  --bg-3: var(--bg-surface);
  --panel: var(--bg-card);
  --panel-2: var(--bg-surface);
  --panel-3: var(--bg-hover);

  --sky: var(--amber);
  --sky-dim: var(--amber-dim);
  --sky-mid: var(--amber-glow);
  --sky-glow: var(--amber-glow);
  --sky-bright: var(--amber-light);

  --gold: var(--amber);
  --gold-dim: var(--amber-dim);
  --gold-glow: var(--amber-glow);

  --green: var(--verified-green);
  --green-dim: var(--sage-dim);
  --red: var(--terracotta);
  --red-dim: var(--terracotta-dim);
  --violet: #8B5CF6;
  --violet-dim: rgba(139, 92, 246, 0.12);

  --t1: var(--t-primary);
  --t2: var(--t-secondary);
  --t3: var(--t-tertiary);
  --t4: var(--bg-hover);

  --border-hi: var(--border-hover);

  /* Layout */
  --sidebar: 268px;
  --topbar: 58px;
  --ticker: 30px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html, body { height: 100%; overflow: hidden; }

body {
  color: var(--t1);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  position: relative;
  min-height: 100vh;
}

/* ─── CLEAN, SOLID LIGHT BACKGROUND ─── */
body {
  position: relative;
  min-height: 100vh;
  background-color: var(--bg-page) !important; 
  background-image: none !important;
}

/* Kills the old dark overlay */
body::before {
  display: none !important;
}

/* Ensure all content is above the overlay */
.app-shell, .topnav, .status-ticker, .detail-overlay, .detail-panel, .fullscreen-image-overlay {
  position: relative;
  z-index: 1;
}

/* Grid overlay (optional - comment out if not needed) */
.grid-overlay {
  display: none;
}

/* Ambient glow */
.ambient-glow {
  position: fixed;
  top: -5%; left: 20%; width: 70%; height: 55%;
  background: radial-gradient(ellipse at 50% 0%, rgba(14,165,233,0.08) 0%, transparent 70%);
  pointer-events: none; 
  z-index: 2;
  animation: glow-breathe 10s ease-in-out infinite;
}
@keyframes glow-breathe {
  0%,100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ════════════════════════════════════════
   TOP NAVIGATION
════════════════════════════════════════ */
.topnav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar);
  z-index: 200;
  background: rgba(255, 255, 255, 0.95); /* UPGRADED: Crisp white glass */
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(28px) saturate(1.4);
  display: flex; align-items: center;
}

/* Brand (100% UNTOUCHED) */
.brand {
  width: var(--sidebar);
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  border-right: 1px solid var(--border);
  height: 100%;
}
.brand-logo { width: 32px; height: 32px; position: relative; flex-shrink: 0; }
.brand-logo svg { position: absolute; inset: 0; }
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-name {
  font-family: var(--font-data); font-size: 13px; font-weight: 700;
  color: var(--sky); letter-spacing: 0.12em; text-shadow: 0 0 14px var(--sky-glow);
}
.brand-tagline {
  font-family: var(--font-data); font-size: 7.5px; color: var(--t3);
  letter-spacing: 0.22em; text-transform: uppercase;
}
/* Primary nav links (Container that keeps them horizontal) */
.nav-links {
  display: flex; align-items: center; height: 100%;
  padding: 0 16px; gap: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* Individual links (The bright, readable text) */
.nav-link {
  display: flex; align-items: center; gap: 6px;
  padding: 0 16px; height: 100%;
  font-family: var(--font-ui); 
  font-size: 14px; 
  font-weight: 600; 
  color: var(--t1); /* Bright white text */
  opacity: 0.85; 
  letter-spacing: 0.04em;
  border-bottom: 3px solid transparent; 
  transition: all 0.2s ease;
  white-space: nowrap; border: none; background: none;
  cursor: pointer;
  position: relative;
  text-decoration: none;
}

.nav-link:hover { opacity: 1; border-bottom-color: var(--border-hover); }
.nav-link.active { color: var(--amber); opacity: 1; border-bottom-color: var(--amber); }

/* The upward-pointing arrow for the active tab */
.nav-link.active::after {
  content: ''; position: absolute; bottom: -3px; left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 6px solid var(--amber); 
}

/* Button link-counts */
.nav-link .link-count {
  font-family: var(--font-data); font-size: 9px; font-weight: 700;
  background: var(--sky-dim); color: var(--sky);
  border: 1px solid var(--border-hi); border-radius: 3px; padding: 1px 5px;
}
.nav-link .link-count.purple {
  background: var(--violet-dim); color: var(--violet);
  border-color: rgba(167,139,250,0.25);
}
/* ─── POST OFFER BUTTON (SKY BLUE) ─── */
.nav-link.create-offer { color: var(--sky); }
.nav-link.create-offer:hover { background: var(--sky-dim); }
.nav-link.create-offer.active { color: var(--sky); border-bottom-color: var(--sky); }
.nav-link.create-offer.active::after { border-bottom-color: var(--sky); }

/* ─── POST REQUEST BUTTON (VIOLET) ─── */
.nav-link.create-request { color: var(--violet); }
.nav-link.create-request:hover { background: var(--violet-dim); }
.nav-link.create-request.active { color: var(--violet); border-bottom-color: var(--violet); }
.nav-link.create-request.active::after { border-bottom-color: var(--violet); }

/* Search bar - UPGRADED TO PILL SHAPE */
.nav-search {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 0 16px;
}
.search-wrap {
  width: 100%; max-width: 480px;
  position: relative; display: flex; align-items: center;
}
.search-wrap input {
  width: 100%;
  background: rgba(0, 0, 0, 0.4); /* UPGRADED: Darker glass background */
  border: 1px solid rgba(255, 255, 255, 0.15); /* Crisper border */
  border-radius: 30px; 
  padding: 10px 16px 10px 38px;
  font-family: var(--font-ui); font-size: 13px;
  color: #ffffff; /* UPGRADED: Pure white text */
  outline: none;
  transition: all 0.2s ease;
}
.search-wrap input::placeholder { 
  color: rgba(255, 255, 255, 0.7); /* UPGRADED: Brighter placeholder text */
  font-weight: 400; 
}
.search-wrap input:focus {
  background: rgba(0, 0, 0, 0.65); /* Gets darker when typing */
  border-color: var(--amber);
  box-shadow: 0 0 0 4px var(--amber-dim);
}
.search-icon {
  position: absolute; left: 14px;
  color: rgba(255, 255, 255, 0.8); /* Brighter icon */
  font-size: 15px; pointer-events: none;
}
.btn-search {
  position: absolute; right: 4px;
  background: var(--amber); color: var(--bg-page);
  border: none; border-radius: 24px;
  padding: 6px 16px; font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
}
.btn-search:hover { background: var(--amber-light); transform: scale(1.02); }


/* Nav right */
.nav-right {
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
}

/* UPGRADED AUTH BUTTONS */
.btn-login {
  color: var(--t1); font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  text-decoration: none; padding: 8px 16px; border-radius: var(--r);
  transition: background 0.2s;
}
.btn-login:hover { background: rgba(255, 255, 255, 0.06); }

.btn-register {
  background: var(--amber); color: var(--bg-page);
  font-family: var(--font-ui); font-size: 14px; font-weight: 700;
  text-decoration: none; padding: 8px 24px; border-radius: 30px;
  box-shadow: 0 4px 14px var(--amber-dim); transition: all 0.2s ease;
}
.btn-register:hover { 
  background: var(--amber-light); 
  transform: translateY(-1px); 
  box-shadow: 0 6px 20px var(--amber-glow); 
}

/* Status Pill & User Icons (UNTOUCHED) */
.status-pill {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  background: var(--green-dim); border: 1px solid rgba(34,197,94,0.22); border-radius: var(--r);
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px rgba(34,197,94,0.7); animation: status-pulse 2.5s ease infinite;
}
@keyframes status-pulse {
  0%,100% { box-shadow: 0 0 4px rgba(34,197,94,0.5); }
  50% { box-shadow: 0 0 12px rgba(34,197,94,0.8); }
}
.status-text {
  font-family: var(--font-data); font-size: 9px; font-weight: 600;
  color: var(--green); letter-spacing: 0.14em; text-transform: uppercase;
}

.icon-btn {
  width: 32px; height: 32px; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r); display: flex; align-items: center; justify-content: center;
  color: var(--t3); font-size: 15px; transition: all 0.2s; position: relative;
}
.icon-btn:hover { border-color: var(--sky); color: var(--sky); background: var(--sky-dim); }

.icon-btn .badge-dot {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px;
  border-radius: 8px; background: var(--red); border: 1.5px solid var(--bg);
  box-shadow: 0 0 6px var(--red); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-data); font-size: 9px; font-weight: bold; color: #fff; padding: 0 4px;
}

.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sky-mid), var(--sky-dim));
  border: 1.5px solid var(--sky); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-data); font-size: 11px; font-weight: 700; color: var(--sky);
  box-shadow: 0 0 10px rgba(14,165,233,0.18); cursor: pointer; text-decoration: none;
}

/* ════════════════════════════════════════
   APP SHELL
════════════════════════════════════════ */
.app-shell {
  display: flex;
  height: 100vh;
  padding-top: 0;
  position: relative; z-index: 1;
}

/* ════════════════════════════════════════
   FILTER SIDEBAR
════════════════════════════════════════ */
.filter-sidebar {
  width: var(--sidebar);
  flex-shrink: 0; height: 100%;
  background: linear-gradient(180deg, rgba(11,20,36,0.99) 0%, rgba(7,13,26,0.99) 100%);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}


/* Filter sidebar collapsed state */
.filter-sidebar.collapsed {
  width: 60px;
  min-width: 60px;
  overflow: visible;
}

.filter-sidebar.collapsed .sidebar-header {
  padding: 13px 8px;
  justify-content: center;
}

.filter-sidebar.collapsed .sidebar-title,
.filter-sidebar.collapsed .sidebar-count,
.filter-sidebar.collapsed .sidebar-reset,
.filter-sidebar.collapsed .f-block,
.filter-sidebar.collapsed .view-toggle-wrap,
.filter-sidebar.collapsed .btn-apply {
  display: none;
}

/* Toggle button for filter sidebar */
.filter-toggle {
  position: absolute;
  left: var(--sidebar);
  top: calc(var(--topbar) + 10px);
  width: 24px;
  height: 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 var(--r) var(--r) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sky);
  font-size: 14px;
  cursor: pointer;
  z-index: 100;
  transition: left 0.3s ease;
}

.filter-sidebar.collapsed + .filter-toggle {
  left: 60px;
}

.filter-toggle:hover {
  background: var(--sky-dim);
  color: var(--sky-bright);
}

/* Adjust main content when sidebar collapsed */
.filter-sidebar.collapsed + .filter-toggle + .main-content {
  width: calc(100% - 60px);
}

.sidebar-header {
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
}
.sidebar-title {
  font-family: var(--font-data); font-size: 9px; font-weight: 600;
  letter-spacing: 0.22em; color: var(--sky); text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.sidebar-title::before { content: ''; width: 8px; height: 1px; background: var(--sky); }
.sidebar-count {
  font-family: var(--font-data); font-size: 9px;
  background: var(--sky-dim); color: var(--sky);
  border: 1px solid var(--border-hi);
  border-radius: 3px; padding: 2px 7px;
}
.sidebar-reset {
  font-family: var(--font-data); font-size: 8px;
  color: var(--t3); letter-spacing: 0.1em;
  background: none; border: none; padding: 2px 4px;
  transition: color 0.2s;
}
.sidebar-reset:hover { color: var(--red); }

.sidebar-body { flex: 1; overflow-y: auto; padding-bottom: 16px; }

/* Filter section */
.f-block {
  padding: 12px 16px 10px;
  border-bottom: 1px solid rgba(14,165,233,0.05);
}
.f-label {
  font-family: var(--font-data); font-size: 8px; font-weight: 600;
  letter-spacing: 0.22em; color: var(--t3); text-transform: uppercase;
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
}
.f-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }

/* Region chips */
.chip-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  font-family: var(--font-data); font-size: 9px;
  padding: 4px 9px; border-radius: var(--r-sm);
  background: var(--panel); border: 1px solid var(--border);
  color: var(--t3); letter-spacing: 0.04em;
  transition: all 0.15s; cursor: pointer;
}
.chip:hover { border-color: var(--sky); color: var(--sky-bright); }
.chip.on { background: var(--sky-dim); border-color: var(--sky); color: var(--sky); }
.chip.za { border-color: rgba(167,139,250,0.2); color: var(--t3); }
.chip.za:hover { border-color: var(--violet); color: var(--violet); }
.chip.za.on { background: var(--violet-dim); border-color: var(--violet); color: var(--violet); }

/* Country divider */
.country-label {
  font-family: var(--font-data); font-size: 7.5px;
  color: var(--t4); letter-spacing: 0.18em; text-transform: uppercase;
  margin: 7px 0 4px; display: flex; align-items: center; gap: 5px;
}
.country-label::before, .country-label::after {
  content: ''; flex: 1; height: 1px; background: var(--t4);
}

/* Price range */
.price-range-display {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.price-val {
  font-family: var(--font-data); font-size: 13px;
  color: var(--sky); font-weight: 600;
}
.price-sep { font-size: 9px; color: var(--t3); }

.range-track {
  position: relative; height: 3px;
  background: var(--panel-3); border-radius: 2px; margin-bottom: 2px;
}
.range-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sky), var(--sky-bright));
  box-shadow: 0 0 6px var(--sky-glow);
  transition: width 0.15s;
}
input[type=range] {
  -webkit-appearance: none; width: 100%; height: 3px;
  background: transparent; position: relative; z-index: 2;
  margin-top: -3px; outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px;
  border-radius: 50%; background: var(--sky);
  box-shadow: 0 0 8px var(--sky-glow); cursor: pointer;
}

/* Date input */
.date-inp {
  width: 100%;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--t2); border-radius: var(--r);
  padding: 7px 10px;
  font-family: var(--font-data); font-size: 10px; outline: none;
  transition: border-color 0.2s;
}
.date-inp:focus { border-color: var(--sky); }

/* Property type grid */
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.type-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--border);
  color: var(--t3); font-size: 10.5px; font-weight: 500;
  transition: all 0.15s; cursor: pointer;
}
.type-pill:hover { border-color: var(--sky); color: var(--t1); }
.type-pill.on { background: var(--sky-dim); border-color: var(--sky); color: var(--sky); }
.type-pill .pill-icon { font-size: 12px; }

/* Infra filters */
.infra-list { display: flex; flex-direction: column; gap: 2px; }
.infra-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--r);
  border: 1px solid transparent;
  transition: all 0.18s; cursor: pointer;
}
.infra-row:hover { background: var(--panel); border-color: var(--border); }
.infra-check {
  width: 14px; height: 14px; border-radius: 3px;
  background: var(--panel-3); border: 1px solid var(--t4);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: transparent; flex-shrink: 0;
  transition: all 0.15s;
}
.infra-row.on .infra-check {
  background: var(--sky-dim); border-color: var(--sky); color: var(--sky);
}
.infra-icon { font-size: 12px; flex-shrink: 0; }
.infra-name { flex: 1; font-size: 11px; color: var(--t2); font-weight: 500; }
.infra-row.on .infra-name { color: var(--t1); }
.infra-cnt {
  font-family: var(--font-data); font-size: 9px; color: var(--t3);
  background: var(--panel-3); border-radius: 3px; padding: 1px 5px;
}
.infra-row.on .infra-cnt { color: var(--sky); background: var(--sky-dim); }

/* Bed/Bath selectors */
.bed-row { display: flex; gap: 4px; }
.bed-btn {
  flex: 1; padding: 5px 4px; text-align: center;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--panel); color: var(--t3);
  font-family: var(--font-data); font-size: 10px; font-weight: 600;
  transition: all 0.15s; cursor: pointer;
}
.bed-btn:hover { border-color: var(--sky); color: var(--sky); }
.bed-btn.on { background: var(--sky-dim); border-color: var(--sky); color: var(--sky); }

/* View toggle */
.view-toggle-wrap {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.vt-label {
  font-family: var(--font-data); font-size: 8px; color: var(--t3);
  letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 7px;
}
.view-toggle {
  display: flex; border-radius: var(--r);
  border: 1px solid var(--border); overflow: hidden;
}
.vt-btn {
  flex: 1; padding: 6px; text-align: center;
  font-family: var(--font-data); font-size: 9px; font-weight: 600;
  color: var(--t3); letter-spacing: 0.1em; background: none; border: none;
  transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer;
}
.vt-btn:not(:last-child) { border-right: 1px solid var(--border); }
.vt-btn:hover { background: var(--panel); color: var(--t1); }
.vt-btn.on { background: var(--sky-dim); color: var(--sky); }

/* Apply button */
.btn-apply {
  margin: 12px 16px;
  width: calc(100% - 32px);
  background: var(--sky); color: var(--bg);
  border: none; border-radius: var(--r);
  padding: 9px; font-family: var(--font-data);
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; flex-shrink: 0;
  transition: all 0.2s; cursor: pointer;
}
.btn-apply:hover { background: var(--sky-bright); box-shadow: 0 0 16px var(--sky-glow); }

/* Filter toggle button - INSIDE sidebar */
.filter-toggle-btn {
  background: none;
  border: none;
  color: var(--sky);
  font-size: 16px;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  transition: all 0.2s;
  border-radius: var(--r-sm);
  margin-right: 8px;
}

.filter-toggle-btn:hover {
  background: var(--sky-dim);
  color: var(--sky-bright);
}

/* Filter summary chips (shown when collapsed) */
.filter-summary {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.filter-summary .chip {
  background: var(--panel);
  border-color: var(--border);
  font-size: 10px;
  padding: 6px 10px;
  margin-bottom: 4px;
}

.filter-summary .chip:hover {
  background: var(--sky-dim);
  border-color: var(--sky);
}

/* Smooth transitions for collapse/expand */
.filter-collapsible {
  transition: all 0.3s ease;
}

#fullFilters, #filterSummary {
  transition: opacity 0.2s ease;
}

/* Filter popover styles */
.filter-popover-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 6px 12px;
  color: var(--t1);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-popover-trigger:hover {
  border-color: var(--sky);
  background: var(--sky-dim);
}

.filter-popover-trigger.active {
  border-color: var(--sky);
  background: var(--sky-dim);
  color: var(--sky);
}

.filter-popover {
  position: fixed;
  top: calc(var(--topbar) + 10px);
  left: 20px;
  width: 380px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - var(--topbar) - 30px);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(14,165,233,0.2);
  z-index: 1000;
  display: none;
  overflow: hidden;
  backdrop-filter: blur(20px);
}

.filter-popover.active {
  display: block;
  animation: popover-fade 0.2s ease;
}

@keyframes popover-fade {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.filter-popover-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter-popover-title {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--sky);
  text-transform: uppercase;
}

.filter-popover-close {
  background: none;
  border: none;
  color: var(--t3);
  font-size: 18px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  transition: all 0.2s;
}

.filter-popover-close:hover {
  background: var(--red-dim);
  color: var(--red);
}

.filter-popover-body {
  padding: 16px 20px;
  max-height: calc(100vh - var(--topbar) - 120px);
  overflow-y: auto;
}

.filter-popover-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
}

.filter-popover-footer .btn-apply {
  margin: 0;
  width: auto;
  flex: 1;
}

.filter-popover-footer .btn-reset {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--t3);
  border-radius: var(--r);
  padding: 9px 16px;
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-popover-footer .btn-reset:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-dim);
}

/* Active filter badges */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 20px;
}

.filter-badge {
  background: var(--sky-dim);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  font-family: var(--font-data);
  font-size: 9px;
  color: var(--sky);
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-badge-remove {
  color: var(--t3);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

.filter-badge-remove:hover {
  color: var(--red);
}

/* Overlay for when popover is open */
.filter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(7,13,26,0.5);
  backdrop-filter: blur(3px);
  z-index: 999;
  display: none;
}

.filter-overlay.active {
  display: block;
  animation: overlay-fade 0.2s ease;
}

@keyframes overlay-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ════════════════════════════════════════
   MAIN CONTENT AREA
════════════════════════════════════════ */
.main-content {
  flex: 1; height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* Content toolbar */
.content-toolbar {
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: rgba(7,13,26,0.6);
}

.toolbar-left { display: flex; align-items: center; gap: 14px; }
.result-summary {
  display: flex; align-items: baseline; gap: 5px;
}
.result-count {
  font-family: var(--font-data); font-size: 18px; font-weight: 700; color: var(--sky);
  text-shadow: 0 0 10px rgba(14,165,233,0.25);
}
.result-label { font-size: 12px; color: var(--t3); }

.sort-row { display: flex; align-items: center; gap: 6px; }
.sort-label { font-size: 11px; color: var(--t3); }
.sort-select {
  background: var(--panel); border: 1px solid var(--border);
  color: var(--t2); border-radius: var(--r-sm); padding: 4px 8px;
  font-family: var(--font-data); font-size: 10px; outline: none;
  transition: border-color 0.2s;
}
.sort-select:focus { border-color: var(--sky); }

.toolbar-right { display: flex; align-items: center; gap: 8px; }

.view-mode-toggle { display: flex; gap: 3px; }
.vm-btn {
  padding: 5px 8px; border-radius: var(--r-sm);
  background: var(--panel); border: 1px solid var(--border);
  color: var(--t3); font-size: 13px; transition: all 0.15s; cursor: pointer;
}
.vm-btn:hover { border-color: var(--sky); color: var(--sky); }
.vm-btn.on { background: var(--sky-dim); border-color: var(--sky); color: var(--sky); }

/* Map view container */
.map-container {
  flex: 1; overflow: hidden;
  position: relative;
  display: none;
}
.map-container.active { display: block; }

.map-bg {
  width: 100%; height: 100%; background: var(--bg-2);
  position: relative; overflow: hidden;
}
.map-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(14,165,233,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,165,233,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.map-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
}
.map-label-text {
  font-family: var(--font-data); font-size: 10px; color: var(--t3);
  letter-spacing: 0.2em; text-transform: uppercase;
}
.map-label-sub { font-size: 11px; color: var(--t3); }

/* Map pins */
.map-pin {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; transition: transform 0.2s;
}
.map-pin:hover { transform: scale(1.12); z-index: 10; }
.pin-price {
  background: var(--sky); color: var(--bg);
  font-family: var(--font-data); font-size: 9px; font-weight: 700;
  padding: 3px 8px; border-radius: 8px;
  box-shadow: 0 0 14px var(--sky-glow); white-space: nowrap;
}
.pin-price.hot { background: var(--red); box-shadow: 0 0 12px rgba(244,63,94,0.5); color: #fff; }
.pin-price.amber { background: var(--gold); box-shadow: 0 0 12px var(--gold-glow); color: var(--bg); }
.pin-price.req { background: var(--violet); color: #fff; }
.pin-tail { width: 1px; height: 7px; background: var(--sky); margin-top: 1px; }
.pin-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--sky); }

/* Card grid */
.card-feed {
  flex: 1; overflow-y: auto;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  align-content: start;
}
.card-feed.list-mode {
  grid-template-columns: 1fr;
  padding: 18px 40px;
  gap: 10px;
}

/* List mode card layout */
.card-feed.list-mode .p-card {
  display: flex;
  flex-direction: row;
  height: 130px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.card-feed.list-mode .p-card-accent-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px; width: 100%;
}

.card-feed.list-mode .card-photo {
  width: 180px;
  height: 130px;
  flex-shrink: 0;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}

.card-feed.list-mode .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 16px;
  min-width: 0;
}

.card-feed.list-mode .card-header-row {
  margin-bottom: 2px;
  align-items: center;
}

.card-feed.list-mode .card-title {
  font-size: 13px;
}

.card-feed.list-mode .card-price {
  font-size: 14px;
  white-space: nowrap;
}

.card-feed.list-mode .card-location {
  margin-bottom: 4px;
}

.card-feed.list-mode .card-specs {
  display: flex;
  gap: 6px;
  margin-bottom: 0;
}

.card-feed.list-mode .spec {
  display: flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  padding: 0;
}

.card-feed.list-mode .spec-val {
  font-size: 11px;
}

.card-feed.list-mode .spec-key {
  font-size: 9px;
  margin-top: 0;
}

.card-feed.list-mode .card-infra {
  margin-top: 4px;
  margin-bottom: 0;
}

.card-feed.list-mode .card-footer {
  padding: 5px 0 0;
  border-top: 1px solid rgba(14,165,233,0.05);
}

.card-feed.list-mode .card-cta {
  padding: 0;
  position: absolute;
  right: 14px;
  bottom: 10px;
}

.card-feed.list-mode .prop-desc,
.card-feed.list-mode .prop-infra {
  display: none;
}

/* ════════════════════════════════════════
   PROPERTY CARDS
════════════════════════════════════════ */
.p-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: visible;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  position: relative;
  animation: card-in 0.4s ease-out both;
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.p-card:nth-child(1) { animation-delay: 0.03s; }
.p-card:nth-child(2) { animation-delay: 0.08s; }
.p-card:nth-child(3) { animation-delay: 0.13s; }
.p-card:nth-child(4) { animation-delay: 0.18s; }
.p-card:nth-child(5) { animation-delay: 0.23s; }
.p-card:nth-child(6) { animation-delay: 0.28s; }
.p-card:nth-child(7) { animation-delay: 0.33s; }
.p-card:nth-child(8) { animation-delay: 0.38s; }

.p-card-accent-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sky), var(--sky-bright), transparent);
  opacity: 0.45; transition: opacity 0.2s;
}
.p-card:hover .p-card-accent-line { opacity: 1; }
.p-card.featured .p-card-accent-line {
  background: linear-gradient(90deg, transparent, var(--gold), #FCD34D, transparent);
  opacity: 0.7;
}
.p-card.request .p-card-accent-line {
  background: linear-gradient(90deg, transparent, var(--violet), #C4B5FD, transparent);
}

.p-card:hover {
  transform: translateY(-3px);
  border-color: rgba(14,165,233,0.25);
  box-shadow: 0 14px 44px rgba(0,0,0,0.35), 0 0 22px rgba(14,165,233,0.05);
}

/* Card image */
.card-photo {
  aspect-ratio: 4/3; height: auto; position: relative; overflow: hidden;
  background: var(--panel);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.card-photo img {
  width: 100%; height: 100%; object-fit: cover;
  /* Removed the saturate and brightness filters here */
  transition: transform 0.5s; 
}
.p-card:hover .card-photo img {
  /* Removed the hover filters here */
  transform: scale(1.05); 
}



.photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,13,26,0.15) 0%, transparent 35%, transparent 50%, rgba(7,13,26,0.8) 100%);
}

/* Photo badges */
.photo-badges {
  position: absolute; top: 8px; left: 8px;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.p-badge {
  font-family: var(--font-data); font-size: 7.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-sm);
}
.p-badge.new { background: var(--sky); color: var(--bg); }
.p-badge.featured { background: var(--gold); color: var(--bg); }
.p-badge.verified { background: var(--green-dim); color: var(--green); border: 1px solid rgba(34,197,94,0.35); }
.p-badge.hot { background: var(--red); color: #fff; }
.p-badge.request { background: var(--violet-dim); color: var(--violet); border: 1px solid rgba(167,139,250,0.35); }
.p-badge.za { background: rgba(167,139,250,0.18); color: var(--violet); border: 1px solid rgba(167,139,250,0.35); }

/* Favorite */
.card-fav {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(7,13,26,0.7); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--t3); font-size: 13px;
  backdrop-filter: blur(8px); transition: all 0.2s; cursor: pointer;
}

.card-fav.active, 
.card-fav.on,
.lc-fav-btn.active, 
.lc-fav-btn.on { 
  color: var(--terracotta) !important; /* Colors the text heart ♡ */
  border-color: var(--terracotta) !important; 
  background: rgba(196, 91, 58, 0.1) !important;
}

/* Specifically fills the SVG icon for Requests */
.lc-fav-btn.active svg,
.lc-fav-btn.on svg {
  fill: var(--terracotta) !important;
  stroke: var(--terracotta) !important;
}
/* Photo bottom */
.photo-ref {
  position: absolute; bottom: 7px; right: 8px;
  font-family: var(--font-data); font-size: 8px;
  color: rgba(14,165,233,0.45); letter-spacing: 0.04em;
}

/* Card body */
.card-body { padding: 12px 14px 6px; }

.card-header-row {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 8px; margin-bottom: 4px;
}
.card-title {
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 700;
  color: var(--t1); line-height: 1.3;
}
.price-block { text-align: right; flex-shrink: 0; }
.card-price {
  font-family: var(--font-data); font-size: 15px; font-weight: 700;
  color: var(--sky);
  text-shadow: 0 0 12px rgba(14,165,233,0.25);
}
.p-card.request .card-price { color: var(--violet); text-shadow: 0 0 12px rgba(167,139,250,0.25); }
.price-period { font-family: var(--font-data); font-size: 8px; color: var(--t3); }

.card-location {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-data); font-size: 9px; color: var(--t3);
  margin-bottom: 10px; letter-spacing: 0.04em;
}

/* Specs */
.card-specs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4px; margin-bottom: 10px;
}
.spec {
  background: var(--panel); border-radius: var(--r-sm);
  padding: 5px 3px; text-align: center;
  border: 1px solid transparent; transition: border-color 0.15s;
}
.p-card:hover .spec { border-color: rgba(14,165,233,0.06); }
.spec-val {
  font-family: var(--font-data); font-size: 12px; font-weight: 700;
  color: var(--t1); display: block; line-height: 1;
}
.spec-key {
  font-size: 7.5px; color: var(--t3);
  display: block; margin-top: 2px;
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* Infra tags on card - Premium Dark Mode Update */
.card-infra { 
  display: flex; flex-wrap: wrap; gap: 5px; 
  margin-top: 10px; margin-bottom: 8px; 
}
.infra-tag {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--font-data); font-size: 8.5px; font-weight: 600;
  padding: 4px 8px; border-radius: var(--r-sm);
  background: rgba(14,165,233,0.08); /* Subtle sky blue background */
  border: 1px solid rgba(14,165,233,0.25); /* Sharp glowing border */
  color: var(--sky-bright);
  text-transform: uppercase; letter-spacing: 0.08em;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.p-card:hover .infra-tag {
  background: rgba(14,165,233,0.12);
  border-color: rgba(14,165,233,0.4);
}
/* Card footer */
.card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px 0;
  border-top: 1px solid rgba(14,165,233,0.05);
}
.card-agent { display: flex; align-items: center; gap: 6px; }
.agent-av {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--panel-3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-data); font-size: 8px; font-weight: 700; color: var(--sky);
}
.agent-name { font-size: 10px; color: var(--t3); }
.card-posted { font-family: var(--font-data); font-size: 8px; color: var(--t3); }

/* Card CTA row */
.card-cta { display: flex; gap: 5px; padding: 8px 14px 12px; }
.btn-contact {
  flex: 1; background: var(--sky); color: var(--bg);
  border: none; border-radius: var(--r-sm);
  padding: 8px; font-family: var(--font-data);
  font-size: 9px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: all 0.2s; cursor: pointer;
}
.btn-contact:hover { background: var(--sky-bright); box-shadow: 0 0 14px var(--sky-glow); }
.p-card.request .btn-contact { background: var(--violet); }
.p-card.request .btn-contact:hover { background: #C4B5FD; box-shadow: 0 0 14px rgba(167,139,250,0.4); }

.btn-view {
  background: var(--panel); border: 1px solid var(--border);
  color: var(--t2); border-radius: var(--r-sm);
  padding: 8px 12px; font-family: var(--font-data);
  font-size: 10px; transition: all 0.15s; cursor: pointer;
}
.btn-view:hover { border-color: var(--sky); color: var(--sky); }

/* ════════════════════════════════════════
   PROPERTY DETAIL PANEL (slide-in)
════════════════════════════════════════ */
.detail-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(7,13,26,0.72);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.detail-overlay.open { opacity: 1; pointer-events: all; }

.detail-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw); z-index: 301;
  background: rgba(11,20,36,0.98);
  border-left: 1px solid var(--border);
  backdrop-filter: blur(28px);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22,0.61,0.36,1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.detail-panel.open { transform: translateX(0); }

.detail-panel-header {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.detail-ref {
  font-family: var(--font-data); font-size: 9px; color: var(--t3);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.detail-close {
  width: 28px; height: 28px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r-sm); display: flex; align-items: center;
  justify-content: center; font-size: 15px; color: var(--t3);
  transition: all 0.15s; cursor: pointer;
}
.detail-close:hover { border-color: var(--red); color: var(--red); background: var(--red-dim); }

.detail-body { flex: 1; overflow-y: auto; }

.detail-gallery {
  height: 220px; position: relative; overflow: hidden; background: var(--panel);
}
.detail-gallery img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) brightness(0.88); }
.gallery-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(11,20,36,0.9) 100%); }
.scan-line {
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(14,165,233,0.7), transparent);
  animation: scan-anim 3.5s linear infinite;
}
@keyframes scan-anim { from { top: 0 } to { top: 100% } }

.detail-content { padding: 18px 20px; }
.detail-title { font-size: 18px; font-weight: 700; color: var(--t1); margin-bottom: 4px; }
.detail-loc { font-family: var(--font-data); font-size: 10px; color: var(--t3); margin-bottom: 14px; letter-spacing: 0.05em; }

.detail-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.detail-price { font-family: var(--font-data); font-size: 26px; font-weight: 700; color: var(--sky); text-shadow: 0 0 16px rgba(14,165,233,0.3); }
.detail-period { font-family: var(--font-data); font-size: 12px; color: var(--t3); }
.detail-deposit { font-family: var(--font-data); font-size: 11px; color: var(--gold); margin-left: auto; }

.detail-specs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 16px;
}
.ds-box {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--r); padding: 8px 6px; text-align: center;
}
.ds-val { font-family: var(--font-data); font-size: 14px; font-weight: 700; color: var(--t1); display: block; }
.ds-key { font-size: 8px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-top: 2px; }

.section-label {
  font-family: var(--font-data); font-size: 8px; font-weight: 600;
  letter-spacing: 0.2em; color: var(--t3); text-transform: uppercase;
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.detail-infra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 16px; }
.di-item {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; border-radius: var(--r);
  background: var(--panel); border: 1px solid var(--border);
  font-size: 11px; font-weight: 500; color: var(--t3);
}
.di-item.active { background: rgba(34,197,94,0.07); border-color: rgba(34,197,94,0.22); color: var(--green); }
.di-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--t4); flex-shrink: 0; }
.di-item.active .di-dot { background: var(--green); box-shadow: 0 0 6px rgba(34,197,94,0.5); }

.detail-description { font-size: 12px; line-height: 1.7; color: var(--t2); margin-bottom: 16px; }

.cost-breakdown { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; margin-bottom: 16px; }
.cost-row { display: flex; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid rgba(14,165,233,0.05); }
.cost-row:last-child { border-bottom: none; background: var(--panel); }
.c-label { font-size: 11px; color: var(--t2); }
.c-val { font-family: var(--font-data); font-size: 11px; font-weight: 600; color: var(--t1); }
.cost-row.total .c-label { color: var(--t1); font-weight: 700; }
.cost-row.total .c-val { color: var(--sky); }

.detail-actions {
  padding: 14px 20px; border-top: 1px solid var(--border); flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.btn-primary-contact {
  width: 100%; background: var(--sky); border: none;
  color: var(--bg); border-radius: var(--r);
  padding: 12px; font-family: var(--font-data);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; transition: all 0.2s; cursor: pointer;
}
.btn-primary-contact:hover { background: var(--sky-bright); box-shadow: 0 0 20px var(--sky-glow); }
.detail-action-row { display: flex; gap: 8px; }
.btn-secondary-action {
  flex: 1; background: var(--panel); border: 1px solid var(--border);
  color: var(--t2); border-radius: var(--r); padding: 9px;
  font-family: var(--font-data); font-size: 10px; letter-spacing: 0.07em;
  text-transform: uppercase; transition: all 0.15s; cursor: pointer;
}
.btn-secondary-action:hover { border-color: var(--sky); color: var(--sky); }

/* ===== FULLSCREEN CSS ===== */
.fullscreen-image-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  display: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(10px);
}

.fullscreen-image-overlay.active {
  display: flex;
}

.fullscreen-image-container {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
}

.fullscreen-image-container img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border: 2px solid var(--border-hi);
  border-radius: var(--r-lg);
  box-shadow: 0 0 40px rgba(14,165,233,0.3);
}

.fullscreen-close {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 40px;
  height: 40px;
  background: var(--panel);
  border: 2px solid var(--border-hi);
  color: var(--t1);
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 1001;
}

.fullscreen-close:hover {
  background: var(--red);
  border-color: var(--red);
  transform: scale(1.1);
}

.fullscreen-prev,
.fullscreen-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: var(--panel);
  border: 2px solid var(--border-hi);
  color: var(--t1);
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 1001;
}

.fullscreen-prev {
  left: -70px;
}

.fullscreen-next {
  right: -70px;
}

.fullscreen-prev:hover,
.fullscreen-next:hover {
  background: var(--sky);
  border-color: var(--sky);
  transform: translateY(-50%) scale(1.1);
}

.fullscreen-caption {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--t2);
  font-family: var(--font-data);
  font-size: 12px;
  padding: 10px;
}

.image-zoom-hint {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(0,0,0,0.6);
  color: var(--t2);
  padding: 5px 10px;
  border-radius: var(--r);
  font-size: 11px;
  border: 1px solid var(--border);
  backdrop-filter: blur(5px);
  pointer-events: none;
  z-index: 10;
}

@media (max-width: 768px) {
  .fullscreen-prev {
    left: 10px;
  }
  .fullscreen-next {
    right: 10px;
  }
  .fullscreen-close {
    top: 10px;
    right: 10px;
  }
}

/* ════════════════════════════════════════
   STATUS TICKER
════════════════════════════════════════ */
.status-ticker {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--ticker);
  z-index: 200;
  background: rgba(7,13,26,0.97);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; overflow: hidden;
}
.ticker-label {
  font-family: var(--font-data); font-size: 8.5px; color: var(--sky);
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0 14px; border-right: 1px solid var(--border);
  white-space: nowrap; flex-shrink: 0;
}
.ticker-track { flex: 1; overflow: hidden; position: relative; }
.ticker-items {
  display: flex; gap: 0; white-space: nowrap;
  animation: ticker-scroll 40s linear infinite;
}
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-item {
  padding: 0 22px; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-data); font-size: 9.5px; color: var(--t3);
  border-right: 1px solid rgba(14,165,233,0.08);
}
.ticker-item .ti-price { color: var(--sky); font-weight: 600; }
.ticker-item .ti-sep { color: var(--t4); }
.ticker-item .ti-new { background: var(--sky); color: var(--bg); font-size: 7px; padding: 1px 4px; border-radius: 2px; margin-right: 4px; }
.ticker-item .ti-za { color: var(--violet); }
.ticker-ts {
  padding: 0 14px; border-left: 1px solid var(--border);
  font-family: var(--font-data); font-size: 8.5px; color: var(--t3);
  white-space: nowrap; flex-shrink: 0;
}

/* ════════════════════════════════════════
   UTIL
════════════════════════════════════════ */
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-8 { gap: 8px; }

/* Stats row in toolbar */
.stat-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-sm);
  background: var(--panel); border: 1px solid var(--border);
}
.stat-chip .sc-val {
  font-family: var(--font-data); font-size: 11px; font-weight: 700; color: var(--t1);
}
.stat-chip .sc-label { font-size: 10px; color: var(--t3); }
.stat-chip .sc-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.stat-chip .sc-dot.blue { background: var(--sky); box-shadow: 0 0 5px var(--sky-glow); }
.stat-chip .sc-dot.purple { background: var(--violet); }

/* Empty map overlay note */
.map-note {
  position: absolute; bottom: 16px; right: 16px;
  background: rgba(11,20,36,0.9); border: 1px solid var(--border);
  border-radius: var(--r); padding: 10px 14px;
  font-family: var(--font-data); font-size: 9px; color: var(--t3);
  letter-spacing: 0.1em; backdrop-filter: blur(8px);
}

/* ════════════════════════════════════════
   📱 THE TRUE MASTER MOBILE OVERRIDES
   (Always keep this at the bottom of the style block!)
════════════════════════════════════════ */
@media (max-width: 768px) {
  /* --- 1. NEW NATIVE APP LAYOUT --- */
  :root { --sidebar: 0px; --topbar: 70px !important; }
  
  /* Hide the old desktop top nav completely */
  .topnav { display: none !important; }
  
  /* Space out the body so content doesn't hide behind the fixed bars */
  body {
    padding-top: 75px !important; 
    padding-bottom: 85px !important; 
    background: #ffffff !important;
  }
  
  .rs-page { padding-left: 12px !important; padding-right: 12px !important; }
  /* ─── FIX: Collapse gap between filter rows on mobile ─── */
  .rs-page {padding-top: 12px !important;   /* was 2.5rem (40px) */}
  .rs-toolbar {margin-bottom: 8px !important;  /* was 24px */}

  .rs-main-col {
    gap: 0 !important;
  }

/* Keeps the message compose bar above the soft keyboard */
.message-compose-area,
.chat-input-wrapper,
.compose-bar,
[class*="message-input"],
[class*="chat-footer"] {
  position: sticky;
  bottom: 0;
  bottom: env(keyboard-inset-height, 0px);
}

/* Kill the slide-in card animation on mobile — it reads as a jump between tabs */
.p-card,
.p-card:nth-child(n) {
  animation: none !important;
}

 /* ─── PREMIUM MOBILE HEADER ─── */
  .mobile-app-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 70px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 1000;
    padding: 0 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.04);
  }

  /* Left: Logo */
  .mah-logo {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: contain;
    flex-shrink: 0;
  }

  /* Center: Transparent Navigation (No Pill, All Icons Stacked) */
  .mah-center-pill {
    display: flex;
    align-items: flex-end; 
    justify-content: center;
    gap: 12px; /* Decreased from 28px to fit 5 items safely */
    flex: 1;
    margin: 0 4px; /* Reduced from 10px */
    padding-bottom: 4px;
  }

  /* Universal style for all 3 top buttons */
  .mah-pill-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 800;
  color: #6b7280;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
  font-family: var(--font-ui, sans-serif);
  outline: none !important;
  border: none !important;
  -webkit-tap-highlight-color: transparent !important;

  
  }

  /* ← ADD THIS NEW BLOCK right after */
  .mah-pill-btn:focus,
  .mah-pill-btn:active,
  .mah-pill-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

    /* Universal style for all 3 top buttons */
  .mah-pill-btn svg {
    width: 24px;
    height: 24px;
    min-width: 24px;   
    min-height: 24px;  
    display: block;    
    flex-shrink: 0;    
    stroke-width: 1.2;
    color: #6b7280;
    transition: all 0.2s ease;
    pointer-events: none;
  }

 /* Make the POST button stand out */
.mah-pill-btn.post-btn,
.mah-pill-btn.post-btn svg {
  color: var(--amber); /* #E8A83E — matches Flutter's brandAmber */
}
.mah-pill-btn.post-btn svg {
  stroke-width: 2.5;
}

/* RENT → Sky Blue (matches Flutter: Color(0xFF0EA5E9)) */
.mah-pill-btn.rent-btn,
.mah-pill-btn.rent-btn svg { color: #0EA5E9 !important; }

/* REQUESTS → Purple (matches Flutter: Color(0xFF8B5CF6)) */
.mah-pill-btn.requests-btn,
.mah-pill-btn.requests-btn svg { color: #8B5CF6 !important; }

/* AGENTS → Emerald (matches Flutter: Color(0xFF10B981)) */
.mah-pill-btn.agents-btn,
.mah-pill-btn.agents-btn svg { color: #10B981 !important; }

 /* Make the APP button blue */
  .mah-pill-btn.app-btn,
  .mah-pill-btn.app-btn svg {
    color: #0EA5E9 !important; /* Roja Scout Blue */
  }
  .mah-pill-btn.app-btn:hover,
  .mah-pill-btn.app-btn:active,
  .mah-pill-btn.app-btn:hover svg,
  .mah-pill-btn.app-btn:active svg {
    color: #0284C7 !important; /* Darker blue when tapped */
  } 

  /* Hover and Active States */
  .mah-pill-btn:hover,
  .mah-pill-btn:active,
  .mah-pill-btn:hover svg,
  .mah-pill-btn:active svg {
    color: #111827;
  }

  /* Right: Circular Menu Button */
  .mah-menu-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: background 0.2s;
  }
  .mah-menu-btn:active { background: #f9fafb; }

  /* Universal layout for all mobile icons (Icon top, Text bottom) */
  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--t2);
    font-size: 10px;
    font-weight: 600;
    font-family: var(--font-ui);
    text-decoration: none;
    cursor: pointer;
  }

  .mobile-nav-item svg {
    width: 24px;
    height: 24px;
    color: var(--t1);
  }

  /* ─── BOTTOM NAVIGATION BAR ─── */
  .mobile-bottom-nav {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 65px;
    background: #ffffff;
    z-index: 1000;
    padding: 0 20px calc(0px + env(safe-area-inset-bottom));
    border-top: 1px solid #eaeaea;
  }

  .mobile-bottom-nav .mobile-nav-item {
    color: var(--t3);
  }

  .mobile-bottom-nav .mobile-nav-item.active,
  .mobile-bottom-nav .mobile-nav-item.active svg {
    color: var(--sky);
  }

  /* ─── ROJA AI GLITTERING PILL (Matches Flutter App) ─── */
  .roja-ai-pill {
    padding: 4px 18px;
    border-radius: 20px;
    background: linear-gradient(90deg, #111827, #D4AF37, #272A35, #B45309, #111827);
    background-size: 200% auto;
    animation: glitterShine 3s linear infinite;
    box-shadow: 0 4px 8px rgba(212, 175, 55, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
  }
  
    .roja-ai-pill svg {
    width: 20px !important;
    height: 20px !important;
    color: #ffffff !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
  }
  
  @keyframes glitterShine {
    to { background-position: 200% center; }
  }

  .nav-btn-ai { position: relative; }

  .roja-ai-hint {
    position: absolute; bottom: calc(100% + 14px); left: 50%;
    transform: translateX(-50%) scale(0.95);
    background: #111827; color: #F5D77B; border: 1px solid rgba(212, 175, 55, 0.45);
    padding: 10px 16px; border-radius: 12px; font-size: 13px; font-weight: 700;
    white-space: nowrap; pointer-events: none; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
    opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
  }
  .roja-ai-hint::after {
    content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px;
    border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #111827;
  }
  .nav-btn-ai.hint-active .roja-ai-hint {
    opacity: 1; visibility: visible; transform: translateX(-50%) scale(1);
  }

  /* --- 2. ULTIMATE AUTH SCROLL UNLOCK (Your existing fixes) --- */
  html, body { 
    overflow-y: auto !important; 
    overflow-x: hidden !important; 
    height: auto !important; 
  }
  .app-shell { 
    display: block !important; 
    height: auto !important; 
    min-height: 100vh !important; 
    overflow: visible !important; 
    padding-top: 0 !important; /* Stop app-shell from pushing content down further */
  }
  
  .min-h-\[calc\(100vh-58px\)\] {
  display: flex !important;
  align-items: flex-start !important;
  padding-top: 0 !important;
  padding-bottom: 120px !important;
  height: auto !important;
}
  .max-h-\[90vh\] { max-height: none !important; overflow: visible !important; margin-bottom: 60px !important; }
  .floating-art { display: none !important; }

  /* --- 3. RETAIN SIDE-BY-SIDE FORM LAYOUT (Your existing fixes) --- */
  .clean-form .grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .clean-form .col-span-1 { grid-column: span 1 !important; }
  .clean-form .col-span-2 { grid-column: span 2 !important; }
  .clean-form input { padding: 8px 10px !important; font-size: 13px !important; }

  /* Hide the old floating AI button on mobile */
  /* Adjust '.ai-assistant-trigger' to whatever class your floating AI button uses */
  .ai-assistant-trigger, #roja-ai-floating-btn { display: none !important; }

  /* ─── NEW MOBILE DROPDOWN (Matches Image Design) ─── */
  .mobile-dropdown-card {
    position: fixed;
    top: 75px;
    right: 12px;
    width: 250px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
    display: none; /* Hidden by default */
    flex-direction: column;
    z-index: 2000;
    padding: 8px 0;
    font-family: var(--font-ui, sans-serif);
  }
  
  .md-item {
    display: flex; 
    align-items: center; 
    gap: 12px;
    padding: 12px 20px;
    font-size: 14px; 
    font-weight: 700; 
    color: #374151; /* Dark gray text */
    text-decoration: none;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
  }
  
  .md-item:hover { 
    background: #f9fafb; 
    color: #111827; 
  }
  
  /* Icon styling */
  .md-item svg { 
    width: 18px; 
    height: 18px; 
    flex-shrink: 0; 
    color: #4b5563; 
  }
  
  /* Dividers */
  .md-divider { 
    height: 1px; 
    background: #f3f4f6; 
    margin: 6px 20px; 
  }

  /* Specific Colored Items from your image */
  .md-item.orange { color: #f59e0b; }
  .md-item.orange svg { color: #f59e0b; }
  
  .md-item.purple { color: #8b5cf6; }
  .md-item.purple svg { color: #8b5cf6; }
  
  .md-item.red { color: #dc2626; }
  .md-item.red svg { color: #dc2626; }


  /* ─── FIX FOR INBOX & STICKY HEADERS ─── */
  /* Force any sticky/fixed headers in the inbox to sit exactly below the 70px mobile header */
  .app-shell .sticky,
  .app-shell [class*="top-0"],
  .app-shell [class*="top-[58px]"],
  .app-shell header {
    top: 70px !important;
    z-index: 900 !important;
  }
  
  /* Give the inbox wrapper a little breathing room so the first message isn't hidden */
  .messages-container, .inbox-container, .chat-wrapper, .conversation-view {
    padding-top: 15px !important;
  }

  

  
  }

  /* Ensure these new elements never show up on desktop */
  @media (min-width: 769px) {
    .mobile-app-header, .mobile-bottom-nav, .mobile-dropdown-card { display: none !important; }
  }

  @media (max-width: 640px) {
  /* --- 4. FORCE CARDS INTO VERTICAL GRID VIEW --- */
  .view-mode-toggle { display: none !important; }

  /* Mobile always renders cards as grid, even if list-mode remains in the HTML. */
  .card-feed .occupants-wrapper,
  .card-feed .occupants-wrapper * {
    display: none !important;
  }
  
  /* 🗜️ TIGHTER FEED SPACING (Fits more cards on screen) */
  .card-feed { display: flex !important; flex-direction: column !important; gap: 10px !important; padding: 12px 10px !important; }

  /* Destroy horizontal List Mode entirely */
  .p-card, .RS-card, .list-mode .p-card, .list-mode .RS-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

 /* 📸 EXPANDED HERO IMAGE AREA FOR MOBILE */
  .card-photo, .RS-media, .list-mode .card-photo, .list-mode .RS-card .RS-media {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important; 
    aspect-ratio: 4/3 !important;
    height: auto !important;  
    min-height: 200px !important; /* Taller on mobile too */
    max-height: none !important; /* Unlocks the 150px constraint */
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
  }

  /* 📝 ULTRA-TIGHT TEXT AREA */
  .card-body, .RS-content, .list-mode .card-body, .list-mode .RS-card .RS-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px 10px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 6px !important; 
  }

  /* ✂️ TRUNCATE TEXT & KEEP TITLE/PRICE IN ONE ROW */
  .card-header-row, .list-mode .card-header-row { 
    flex-direction: row !important; 
    align-items: flex-start !important; 
    gap: 10px !important; 
    flex-wrap: nowrap !important;
    width: 100% !important;
  }
  
  .card-header-row > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important; 
  }

  .card-title, .card-location {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    width: 100% !important;
  }

  .price-block, .list-mode .price-block { 
    flex-shrink: 0 !important; 
    text-align: right !important; 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: flex-end !important;
  }
  .list-mode .price-period { margin-top: 0 !important; }

  /* 🙈 HIDE UNNECESSARY ELEMENTS (Keep Avatar, Hide Name) */
  .card-specs, .card-infra, .prop-desc, .prop-infra {
    display: none !important; 
  }
  .agent-name {
    display: none !important; /* Hides ONLY the name now */
  }

  /* FOOTER ALIGNMENT (Avatar + Tags + Button) */
  .list-mode .list-view-tags { 
    position: static !important; 
    transform: none !important; 
    margin: 0 !important; 
    justify-content: flex-start !important; 
    flex-wrap: wrap !important; 
  }
  
  /* Aligns the Avatar next to the tags  */
  .card-footer { 
    padding-top: 8px !important; 
    border-top: 1px solid var(--border) !important; 
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  }

  @media (max-width: 550px) {
    .clean-form .grid { grid-template-columns: 1fr !important; }
    .clean-form .col-span-1, .clean-form .col-span-2 { grid-column: span 1 / span 1 !important; }
  }

  /* ─── BOTTOM NAV NOTIFICATION BADGE ─── */
    .nav-icon-wrapper {
      position: relative;
      display: inline-flex;
  }
  
  .nav-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    background-color: #EF4444; /* Clean Alert Red */
    color: white;
    font-size: 10px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #ffffff; /* Creates the native cutout effect */
    box-sizing: content-box;
    z-index: 10;
  }

    /* ─── REMOVE CLICK TRAILS & TAP HIGHLIGHTS ─── */
  a, button, svg, .tp-icon-btn, .mobile-nav-item {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    outline: none !important;
  }

  a:focus, button:focus, svg:focus {
    outline: none !important;
  }

/* ════════════════════════════════════════════════════════
   FINAL FIX: THE FLAWLESS MODAL DOCK (FOOTER PADDING)
════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* 1. Destroy desktop sidebar */
    .rs-sidebar { display: none !important; }
    
    /* 2. Reset page wrappers */
    .rs-page { padding-top: 16px !important; }
    .min-h-\[calc\(100vh-58px\)\] { padding-top: 0 !important; }
    
    /* 3. Snap Quick Filters under header */
    #mobile-quick-filters {
        top: 70px !important;
        margin-top: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 4. Fix Toolbar Wrapping */
    .rs-toolbar {
        flex-direction: row !important;
        flex-wrap: wrap !important; 
        align-items: center !important;
        margin-bottom: 12px !important;
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    .toolbar-form {
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }

    /* 5. THE FLAWLESS FULLSCREEN MODAL */
    .fs-filter-overlay { 
      position: fixed !important;
      top: 70px !important; 
      bottom: 0 !important; /* Stretch to absolute bottom */
      left: 0 !important;
      right: 0 !important;
      height: auto !important; 
      width: 100% !important;
      padding: 0 !important; /* <--- REMOVED OVERLAY PADDING */
      z-index: 990 !important; /* Slide under the 1000 z-index bottom nav */
      align-items: flex-start !important; 
      justify-content: flex-start !important;
      transition: opacity 0.2s ease !important;
      overscroll-behavior: none !important; 
      background: rgba(0, 0, 0, 0.6) !important; /* Restore dark backdrop */
    }
    
    .fs-filter-container { 
      width: 100% !important;
      max-width: 100% !important; 
      height: 100% !important; 
      flex: 1 !important;
      border-radius: 0 !important; 
      border: none !important;
      margin: 0 !important;
      transform: none !important; 
      transition: none !important; 
      display: flex;
      flex-direction: column;
      box-shadow: none !important;
      background: #ffffff !important;
    }

    .fs-filter-body {
      max-height: none !important; 
      flex: 1 !important; 
      padding: 1rem !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      overscroll-behavior-y: contain !important;
    }

    /* <--- THE MAGIC TRICK IS HERE ---> */
    .fs-filter-footer {
        flex-shrink: 0 !important;
        background: #ffffff !important;
        /* Push the buttons up, but let the white background stretch behind the nav! */
        padding-bottom: calc(65px + 16px + env(safe-area-inset-bottom)) !important; 
    }
}