/* ============================================
   D&Y Apartments — Ultra Modern UI 2026
   Glassmorphism + Gradients + Microinteractions
   ============================================ */

:root {
  --bg: #f8fafc;
  --bg-gradient: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
  --surface: #ffffff;
  --surface-glass: rgba(255,255,255,0.75);
  --text: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --border-glass: rgba(255,255,255,0.2);
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --primary-light: #eef2ff;
  --primary-glow: rgba(99,102,241,0.4);
  --secondary: #8b5cf6;
  --accent: #10b981;
  --accent-light: #d1fae5;
  --accent-glow: rgba(16,185,129,0.4);
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #06b6d4;
  --radius: 20px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --radius-pill: 9999px;
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm: 0 2px 8px rgba(15,23,42,0.06);
  --shadow: 0 4px 20px rgba(15,23,42,0.08);
  --shadow-lg: 0 20px 50px rgba(15,23,42,0.12);
  --shadow-xl: 0 32px 80px rgba(15,23,42,0.16);
  --shadow-glow: 0 0 40px rgba(99,102,241,0.15);
  --shadow-float: 0 20px 40px rgba(15,23,42,0.1), 0 0 0 1px rgba(0,0,0,0.02);
  --transition: 0.25s cubic-bezier(.4,0,.2,1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-spring: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --scrollbar-thumb: #cbd5e1;
  --card-hover-border: #a5b4fc;
  --card-hover-shadow: 0 12px 40px rgba(99,102,241,0.15);
  --input-bg: #fff;
  --filter-select-bg: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  --estimate-bg: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
  --estimate-border: #e0e7ff;
  --estimate-divider: linear-gradient(90deg, transparent, #c7d2fe, transparent);
  --nav-scrolled-bg: rgba(255,255,255,0.85);
  --nav-scrolled-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 32px rgba(15,23,42,0.08);
  --modal-backdrop: rgba(15,23,42,0.5);
  --modal-bg: rgba(255,255,255,0.95);
  --chat-window-bg: #fff;
  --price-color: #6366f1;
  --price-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  --gradient-accent: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  --gradient-warm: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --gradient-cool: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
  --glass-blur: blur(20px) saturate(180%);
  --noise-overlay: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ---- Dark Theme — Refined 2026 ---- */
[data-theme="dark"] {
  --bg: #030712;
  --bg-gradient: linear-gradient(180deg, #030712 0%, #0f172a 50%, #1e293b 100%);
  --surface: #0f172a;
  --surface-glass: rgba(15,23,42,0.75);
  --text: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --border: #1e293b;
  --border-light: #0f172a;
  --border-glass: rgba(255,255,255,0.08);
  --primary-light: rgba(99,102,241,0.15);
  --accent-light: rgba(16,185,129,0.15);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow: 0 4px 20px rgba(0,0,0,0.3);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.4);
  --shadow-xl: 0 32px 80px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 60px rgba(99,102,241,0.2);
  --shadow-float: 0 20px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.05);
  --scrollbar-thumb: #334155;
  --card-hover-border: #6366f1;
  --card-hover-shadow: 0 12px 40px rgba(99,102,241,0.2);
  --input-bg: #0f172a;
  --filter-select-bg: #0f172a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  --estimate-bg: linear-gradient(135deg, #1e293b 0%, rgba(99,102,241,0.1) 100%);
  --estimate-border: #334155;
  --estimate-divider: linear-gradient(90deg, transparent, #475569, transparent);
  --nav-scrolled-bg: rgba(3,7,18,0.88);
  --nav-scrolled-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.4);
  --modal-backdrop: rgba(0,0,0,0.6);
  --modal-bg: rgba(15,23,42,0.95);
  --chat-window-bg: #0f172a;
  --price-color: #a5b4fc;
  --price-bg: linear-gradient(135deg, #6366f1, #8b5cf6);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* ============================================
   SCROLL REVEAL + ENTRANCE ANIMATIONS
   ============================================ */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes revealLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes revealRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes revealScale {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes revealFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Hidden state before reveal */
.sr { opacity: 0; transform: translateY(40px); transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1); }
.sr-left  { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1); }
.sr-right { opacity: 0; transform: translateX(40px);  transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1); }
.sr-scale { opacity: 0; transform: scale(0.88); transition: opacity 0.6s ease, transform 0.6s ease; }
.sr-fade  { opacity: 0; transition: opacity 0.8s ease; }

/* Revealed state */
.sr.revealed, .sr-left.revealed, .sr-right.revealed { opacity: 1; transform: translate(0,0); }
.sr-scale.revealed { opacity: 1; transform: scale(1); }
.sr-fade.revealed  { opacity: 1; }

/* Stagger delays for child elements */
.sr-delay-1 { transition-delay: 0.1s !important; }
.sr-delay-2 { transition-delay: 0.2s !important; }
.sr-delay-3 { transition-delay: 0.3s !important; }
.sr-delay-4 { transition-delay: 0.4s !important; }
.sr-delay-5 { transition-delay: 0.5s !important; }
.sr-delay-6 { transition-delay: 0.6s !important; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .sr, .sr-left, .sr-right, .sr-scale, .sr-fade { opacity: 1; transform: none; transition: none; }
  .hero-content > * { opacity: 1 !important; transform: none !important; animation: none !important; }
}
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* ============================================
   ANIMATED BACKGROUND (Landlords Style)
   ============================================ */
.bg-gradient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.bg-gradient::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.04) 0%, transparent 50%);
  animation: bgPulse 20s ease-in-out infinite;
}
[data-theme="dark"] .bg-gradient::before {
  background: 
    radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.08) 0%, transparent 50%);
}
@keyframes bgPulse {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  50% { transform: translate(-5%, -5%) scale(1.1); opacity: 0.8; }
}

/* Subtle grid pattern */
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: 60px 60px;
  background-image: 
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
}
[data-theme="dark"] .bg-grid {
  background-image: 
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }

/* ============================================
   NAVBAR
   ============================================ */
header.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: all 0.35s ease;
  padding: 1rem 0;
}
header.nav-header.scrolled {
  background: var(--nav-scrolled-bg);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--nav-scrolled-shadow);
  padding: 0.6rem 0;
}
.nav-container { display: flex; justify-content: space-between; align-items: center; }
.logo {
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
  text-decoration: none;
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.logo span { color: #a5b4fc; font-weight: 600; }
.logo img.site-logo-img { height: 54px; max-height: 54px; width: auto; display: block; border-radius: 6px; object-fit: contain; }
footer .footer-logo img { height: 28px; width: auto; display: inline-block; vertical-align: middle; border-radius: 4px; }
header.nav-header.scrolled .logo { color: var(--text); }
header.nav-header.scrolled .logo span { color: var(--primary); }

.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  position: relative;
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,0.1); }
header.nav-header.scrolled .nav-links a { color: var(--text-secondary); }
header.nav-header.scrolled .nav-links a:hover { color: var(--primary); background: var(--primary-light); }

/* Language toggle button */
.lang-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.9); font-size: 0.82rem; font-weight: 600; padding: 5px 12px; border-radius: 20px;
  cursor: pointer; transition: all var(--transition); white-space: nowrap; letter-spacing: 0.5px;
}
.lang-toggle-btn:hover { background: rgba(255,255,255,0.22); color: #fff; }
.lang-toggle-btn svg { flex-shrink: 0; }
header.nav-header.scrolled .lang-toggle-btn { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
header.nav-header.scrolled .lang-toggle-btn:hover { background: var(--primary); color: #fff; }
header.nav-header.scrolled .lang-toggle-btn svg { stroke: currentColor; }
.lang-toggle-btn.mobile-lang { margin-top: 16px; background: var(--primary-light); border-color: var(--primary); color: var(--primary); justify-content: center; width: 100%; }
.lang-toggle-btn.mobile-lang:hover { background: var(--primary); color: #fff; }

/* Admin button */
.nav-admin-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.75); padding: 6px; border-radius: 50%;
  transition: all var(--transition); text-decoration: none !important;
}
.nav-admin-btn:hover { background: rgba(255,255,255,0.22); color: #fff; }
.nav-admin-btn svg { flex-shrink: 0; }
header.nav-header.scrolled .nav-admin-btn { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
header.nav-header.scrolled .nav-admin-btn:hover { background: var(--primary); color: #fff; }
.nav-admin-btn.mobile-admin {
  margin-top: 12px; border-radius: 12px; padding: 10px 16px; width: 100%;
  justify-content: center; background: var(--primary-light); border-color: var(--primary);
  color: var(--primary); font-weight: 600; font-size: 0.9rem;
}
.nav-admin-btn.mobile-admin:hover { background: var(--primary); color: #fff; }

.mobile-nav-toggle { display: none; background: transparent; border: none; width: 44px; height: 44px; margin-left: 8px; cursor: pointer; }
.mobile-nav-toggle .hamburger { display: block; width: 20px; height: 2px; background: #fff; position: relative; border-radius: 1px; }
.mobile-nav-toggle .hamburger::before, .mobile-nav-toggle .hamburger::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: #fff; border-radius: 1px; }
.mobile-nav-toggle .hamburger::before { top: -6px; }
.mobile-nav-toggle .hamburger::after { top: 6px; }
header.nav-header.scrolled .mobile-nav-toggle .hamburger,
header.nav-header.scrolled .mobile-nav-toggle .hamburger::before,
header.nav-header.scrolled .mobile-nav-toggle .hamburger::after { background: var(--text); }

.nav-admin {
  margin-left: 0.5rem;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all var(--transition);
  -webkit-backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.nav-admin:hover { background: rgba(255,255,255,0.2); transform: translateY(-1px); }
header.nav-header.scrolled .nav-admin {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ============================================
   HERO — Ultra Modern Immersive 2026
   ============================================ */
.hero {
  height: 100vh;
  height: 100svh;
  min-height: 750px;
  background: linear-gradient(165deg, rgba(3,7,18,0.82) 0%, rgba(15,23,42,0.6) 40%, rgba(0,106,255,0.12) 80%, rgba(3,7,18,0.75) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 80px;
  position: relative;
  overflow: hidden;
}

/* Hero background video cycle */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: opacity 1.2s ease-in-out;
}
.hero-video-back {
  opacity: 0;
}

/* Hero static background */
.hero-bg-static {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=1920&q=80') center/cover no-repeat;
  display: none;
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(165deg, rgba(3,7,18,0.78) 0%, rgba(15,23,42,0.55) 40%, rgba(0,106,255,0.1) 80%, rgba(3,7,18,0.7) 100%);
  pointer-events: none;
}

/* Multi-layer animated overlay */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 20% 80%, rgba(99,102,241,0.2) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.15) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(16,185,129,0.08) 0%, transparent 60%);
  animation: heroShimmer 10s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 2;
}
@keyframes heroShimmer {
  0%   { opacity: 0.6; transform: scale(1) rotate(0deg); }
  50%  { opacity: 0.9; }
  100% { opacity: 1; transform: scale(1.03) rotate(0.5deg); }
}
/* Grid pattern overlay */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 2;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(to top, var(--bg), rgba(3,7,18,0.3), transparent);
  pointer-events: none;
  z-index: 3;
}
.hero-content { max-width: 860px; padding: 2.5rem; position: relative; z-index: 4; }
/* Hero entrance: stagger children */
.hero-content > * {
  opacity: 0;
  transform: translateY(40px);
  animation: heroEntrance 1s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-content > *:nth-child(1) { animation-delay: 0.2s; }
.hero-content > *:nth-child(2) { animation-delay: 0.4s; }
.hero-content > *:nth-child(3) { animation-delay: 0.55s; }
.hero-content > *:nth-child(4) { animation-delay: 0.7s; }
.hero-content > *:nth-child(5) { animation-delay: 0.85s; }
@keyframes heroEntrance {
  to { opacity: 1; transform: translateY(0); }
}
/* Mobile: disable fixed background (perf) */
@media (max-width: 1024px) {
  .hero { background-attachment: scroll; }
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  margin-bottom: 1.5rem;
  -webkit-backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  position: relative;
}
.hero-badge::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 20px rgba(99,102,241,0.35);
  border: 1px solid rgba(99,102,241,0.4);
  animation: badgeGlow 3s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes badgeGlow {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.hero-badge svg { width: 16px; height: 16px; }
.hero h1 {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 800;
  margin-bottom: 1rem;
  letter-spacing: -0.04em;
  line-height: 1.1;
  text-shadow: 0 2px 30px rgba(0,0,0,0.3);
}
.hero p {
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto 2rem;
  opacity: 0.9;
  line-height: 1.7;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.hero-actions .btn-primary {
  position: relative;
  overflow: hidden;
}
.hero-actions .btn-primary::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: none;
  animation: btnShine 3s ease-in-out infinite;
}
@keyframes btnShine {
  0%, 70%, 100% { left: -100%; }
  85% { left: 100%; }
}

/* Hero Search Bar — inside hero */
.hero-search {
  margin-top: 2.5rem;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transform: translateY(20px);
  animation: heroEntrance 0.7s cubic-bezier(.22,1,.36,1) 0.85s forwards;
}
.hero-search .search-bar {
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(255,255,255,0.25);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.hero-search .search-bar:focus-within {
  background: rgba(15,23,42,0.65);
  border-color: rgba(255,255,255,0.4);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 3px rgba(99,102,241,0.25);
  transform: scale(1.01);
}
.hero-search .search-bar input {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.hero-search .search-bar input::placeholder {
  color: #fff;
  opacity: 1;
}
.hero-search .search-bar-icon {
  color: #fff;
}
.hero-search .search-bar button {
  background: var(--primary);
  color: #fff;
}

/* ═══════ HERO MODERN 2026 ENHANCEMENTS ═══════ */

/* Floating orbs */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 2;
}
.hero-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,106,255,0.4) 0%, transparent 70%);
  top: -10%; left: -10%;
  animation: orbFloat1 15s ease-in-out infinite;
}
.hero-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(139,92,246,0.35) 0%, transparent 70%);
  bottom: 10%; right: -5%;
  animation: orbFloat2 18s ease-in-out infinite;
}
.hero-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(16,185,129,0.25) 0%, transparent 70%);
  top: 40%; left: 60%;
  animation: orbFloat3 12s ease-in-out infinite;
}
@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(50px, 30px) scale(1.1); }
  66% { transform: translate(-30px, 50px) scale(0.95); }
}
@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, -30px) scale(1.08); }
}
@keyframes orbFloat3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -40px); }
}

/* Modern Title */
.hero-title-modern {
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 800;
  margin-bottom: 0.75rem;
  letter-spacing: -0.04em;
  line-height: 1.15;
}
.hero-title-line {
  display: block;
  text-shadow: 0 4px 40px rgba(0,0,0,0.4);
}
.hero-title-gradient {
  display: block;
  background: linear-gradient(135deg, #006AFF 0%, #38bdf8 40%, #a78bfa 70%, #f472b6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease-in-out infinite;
  background-size: 200% 200%;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero-desc {
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  font-weight: 400;
  max-width: 550px;
  margin: 0 auto 1.5rem;
  opacity: 0.9;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
}

/* Hero Stats */
.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 2.5rem;
  padding: 20px 32px;
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  flex-wrap: wrap;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hero-stat-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}
.hero-stat-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.hero-stat-divider {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.3), transparent);
}

/* Modern Search Box */
.hero-search-modern {
  max-width: 640px;
  margin: 0 auto 1.5rem;
}
.hero-search-box {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,0.1);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 60px;
  padding: 6px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
  transition: all 0.3s ease;
}
.hero-search-box:focus-within {
  background: rgba(255,255,255,0.15);
  border-color: rgba(0,106,255,0.5);
  box-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 0 0 4px rgba(0,106,255,0.15);
  transform: scale(1.02);
}
.hero-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.7);
}
.hero-search-box input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 14px 8px;
  font-size: 1rem;
  color: #fff;
  min-width: 0;
}
.hero-search-box input::placeholder {
  color: rgba(255,255,255,0.6);
}
.hero-search-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #006AFF 0%, #0052cc 100%);
  border: none;
  border-radius: 50px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0,106,255,0.4);
}
.hero-search-btn:hover {
  background: linear-gradient(135deg, #0052cc 0%, #003d99 100%);
  transform: translateX(3px);
  box-shadow: 0 6px 28px rgba(0,106,255,0.5);
}
.hero-search-btn svg {
  transition: transform 0.3s ease;
}
.hero-search-btn:hover svg {
  transform: translateX(4px);
}

/* Quick Filter Tags */
.hero-quick-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.hero-quick-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.hero-quick-tag {
  padding: 8px 18px;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 20px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero-quick-tag:hover {
  background: rgba(0,106,255,0.5);
  border-color: rgba(0,106,255,0.7);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,106,255,0.3);
}

/* Hero Action Buttons */
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: linear-gradient(135deg, #006AFF 0%, #0052cc 100%);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 24px rgba(0,106,255,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
  position: relative;
  overflow: hidden;
}
.btn-hero-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.5s;
}
.btn-hero-primary:hover::before {
  left: 100%;
}
.btn-hero-primary:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 36px rgba(0,106,255,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-hero-primary svg {
  transition: transform 0.3s ease;
}
.btn-hero-primary:hover svg {
  transform: translateX(4px);
}

.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 14px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-hero-outline:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.35);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

/* Scroll Indicator */
.hero-scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 10;
  animation: scrollBounce 2s ease-in-out infinite;
}
.hero-scroll-indicator svg {
  animation: scrollArrow 2s ease-in-out infinite;
}
@keyframes scrollBounce {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}
@keyframes scrollArrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Hero responsive */
@media (max-width: 768px) {
  .hero-title-modern { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .hero-stats { gap: 20px; padding: 16px 20px; margin-top: 1.5rem; }
  .hero-stat-num { font-size: 1.4rem; }
  .hero-stat-divider { height: 30px; }
  .hero-search-modern { padding: 0 8px; }
  .hero-search-box { 
    flex-direction: column; 
    border-radius: 16px; 
    padding: 14px;
    gap: 12px;
  }
  .hero-search-icon { display: none; }
  .hero-search-box input { 
    padding: 14px 16px; 
    text-align: center;
    width: 100%;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 16px;
    color: #1e293b !important;
  }
  .hero-search-box input::placeholder {
    font-size: 14px;
    color: #94a3b8 !important;
  }
  .hero-search-btn { 
    width: 100%; 
    justify-content: center; 
    border-radius: 10px; 
    padding: 14px 24px;
  }
  .hero-quick-filters { display: none; }
  .hero-actions { flex-direction: column; gap: 12px; margin-top: 1rem; }
  .btn-hero-primary, .btn-hero-outline { width: 100%; justify-content: center; }
  .hero-scroll-indicator { display: none; }
  .hero-orb { display: none; }
}

/* ============================================
   BUTTONS — Ultra Modern 2026
   ============================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--gradient-primary);
  color: white;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--transition-bounce);
  box-shadow: 0 4px 16px var(--primary-glow);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 28px var(--primary-glow), var(--shadow-glow); }
.btn-primary:active { transform: translateY(-1px) scale(0.98); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: white;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  transition: all var(--transition-bounce);
  position: relative;
  overflow: hidden;
}
.btn-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}
.btn-outline:hover { 
  background: rgba(255,255,255,0.15); 
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.btn-outline:hover::before { opacity: 0.1; }

.btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--gradient-accent);
  color: white;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--transition-bounce);
  box-shadow: 0 4px 16px var(--accent-glow);
}
.btn-success:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 28px var(--accent-glow); }

/* ============================================
   SEARCH SECTION — Filter Strip
   ============================================ */
.search-section {
  position: relative;
  z-index: 10;
  margin-top: 0;
  padding: 1.5rem 1.5rem 0.5rem;
  background: transparent;
}
.search-bar {
  display: flex;
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}
.search-bar:focus-within {
  box-shadow: 0 8px 32px rgba(99,102,241,0.2), 0 0 0 3px rgba(99,102,241,0.15);
  transform: scale(1.01);
  border-color: var(--primary);
}
.search-bar input {
  flex: 1;
  padding: 1.1rem 1.6rem;
  border: none;
  background: transparent;
  font-size: 1rem;
  outline: none;
  color: var(--text);
}
.search-bar input::placeholder { color: var(--text-muted); }
.search-bar button {
  background: var(--primary);
  color: white;
  border: none;
  padding: 0 2rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  flex-shrink: 0;
}
.search-bar button:hover { background: var(--primary-dark); }
.search-bar-icon {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.search-bar { position: relative; }
.search-bar input { padding-left: 48px !important; }

/* ---- Advanced Filter Bar ---- */
.filter-bar {
  max-width: 960px;
  margin: 0 auto;
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid var(--border);
  padding: 18px 22px 14px;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}
.filter-bar:hover {
  box-shadow: var(--shadow-lg);
}
.filter-bar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 120px;
}
.filter-group label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.filter-group select,
.filter-group input[type="number"] {
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.filter-group select {
  background: var(--filter-select-bg);
  padding-right: 30px;
}
.filter-group select:focus,
.filter-group input[type="number"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.10);
}
.filter-price-range {
  display: flex;
  align-items: center;
  gap: 6px;
}
.filter-price-range input {
  width: 50% !important;
}
.filter-price-sep {
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
}
.filter-actions {
  flex: 0 0 auto;
  min-width: auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.filter-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 20px;
  border: none;
  border-radius: 8px;
  background: var(--primary, #2563eb);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.filter-search-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.filter-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 16px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.filter-clear-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: #fef2f2;
}
.filter-active-count {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 10px;
  min-height: 18px;
}
.filter-active-count:empty { display: none; }

/* Filter toggle: hidden on desktop */
.filter-toggle-btn { display: none; }

.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; max-width: 1100px; margin: 0 auto; }
.filter-item { min-width: 180px; }
.filter-item label { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--text-secondary); }
.filter-item select { width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.95rem; background: var(--surface); }

/* ============================================
   PROPERTIES SECTION — Card Grid
   ============================================ */
.properties { padding: 4rem 0 5rem; background: var(--bg); }
h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.75rem;
  color: var(--text);
  letter-spacing: -0.03em;
}
.section-subtitle {
  text-align: center;
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.75rem;
}

/* ============================================
   PAGINATION CONTROLS
   ============================================ */
.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2rem;
  padding: 12px 0;
  flex-wrap: wrap;
}
.pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--border, #d1d5db);
  border-radius: 10px;
  background: var(--surface, #fff);
  color: var(--text, #374151);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-user-select: none;
  user-select: none;
}
.pagination-btn:hover:not(:disabled):not(.active) {
  background: var(--primary-light, #e8f0fe);
  border-color: var(--primary, #1a56db);
  color: var(--primary, #1a56db);
}
.pagination-btn.active {
  background: var(--primary, #1a56db);
  border-color: var(--primary, #1a56db);
  color: #fff;
  box-shadow: 0 2px 8px rgba(26, 86, 219, 0.25);
}
.pagination-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.pagination-prev,
.pagination-next {
  padding: 0 10px;
}
.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 40px;
  color: var(--text-muted, #9ca3af);
  font-weight: 600;
  letter-spacing: 2px;
}
.pagination-info {
  text-align: center;
  color: var(--text-muted, #6b7280);
  font-size: 0.88rem;
  margin-top: 8px;
  padding-bottom: 8px;
}

/* ============================================
   PROPERTY CARDS — Elegant Premium Design 2026
   Clean, modern cards matching search page style
   ============================================ */
.property-card {
  --card-radius: 20px;
  background: var(--surface);
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  animation: cardFloat 0.5s ease forwards;
  opacity: 0;
}
@keyframes cardFloat {
  from { opacity: 0; transform: translateY(30px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.property-card:focus { outline: none; }
.property-card:hover { 
  transform: translateY(-8px); 
  box-shadow: 0 20px 50px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.08);
  border-color: transparent;
}
[data-theme="dark"] .property-card { 
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .property-card:hover { 
  box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 8px 20px rgba(0,0,0,0.2);
}

.property-card .card-media { 
  position: relative; 
  height: 200px; 
  overflow: hidden;
  flex-shrink: 0;
}
.property-card .card-media img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.property-card:hover .card-media img { transform: scale(1.08); }

/* Image overlay gradient */
.property-card .card-media::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
  pointer-events: none;
}

/* ── Card Carousel (public cards) ── */
.card-media .ccr-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1.03);
  pointer-events: none;
}
.card-media .ccr-slide.ccr-active {
  opacity: 1; transform: scale(1); pointer-events: auto; position: relative;
}
/* Arrows */
.card-media .ccr-arrow {
  position: absolute; top: 50%; z-index: 8;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.85); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transform: translateY(-50%) scale(0);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), background 0.2s;
  color: #1a1a2e;
}
.card-media .ccr-prev { left: 8px; }
.card-media .ccr-next { right: 8px; }
.property-card:hover .ccr-arrow,
.card-media:focus-within .ccr-arrow { transform: translateY(-50%) scale(1); }
.card-media .ccr-arrow:hover { background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,0.25); }
.card-media .ccr-arrow:active { transform: translateY(-50%) scale(0.9); }
[data-theme="dark"] .card-media .ccr-arrow { background: rgba(30,30,50,0.8); color: #e0e0e0; }
[data-theme="dark"] .card-media .ccr-arrow:hover { background: rgba(40,40,65,0.95); }
/* Dots */
.card-media .ccr-dots {
  position: absolute; bottom: 10px; left: 50%; z-index: 8;
  transform: translateX(-50%); display: flex; gap: 5px;
}
.card-media .ccr-dot {
  position: relative;
  width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255,255,255,0.5); cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.card-media .ccr-dot::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  transform: translate(-50%, -50%);
}
.card-media .ccr-dot.active {
  background: #fff; transform: scale(1.35);
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
[data-theme="dark"] .ccr-dot { background: rgba(255,255,255,0.35); }
[data-theme="dark"] .ccr-dot.active { background: rgba(255,255,255,0.9); }
/* Counter badge */
.card-media .ccr-counter {
  position: absolute; bottom: 10px; right: 10px; z-index: 8;
  background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: 0.7rem; font-weight: 600;
  padding: 3px 9px; border-radius: 10px;
  opacity: 0; transition: opacity 0.25s;
  pointer-events: none;
}
.property-card:hover .ccr-counter { opacity: 1; }
/* Touch devices: show arrows & counter always, bigger touch targets */
@media (hover: none) {
  .card-media .ccr-arrow {
    transform: translateY(-50%) scale(1);
    width: 36px;
    height: 36px;
  }
  .card-media .ccr-arrow svg { width: 16px; height: 16px; }
  .card-media .ccr-counter { opacity: 1; }
  .card-media .ccr-dots { bottom: 12px; gap: 6px; }
  .card-media .ccr-dot { width: 8px; height: 8px; }
  /* Simpler slide transition on touch — reduce GPU load */
  .card-media .ccr-slide { transform: none; transition: opacity 0.25s ease; }
  .card-media .ccr-slide.ccr-active { transform: none; }
}

/* Gallery count badge */
.property-card .card-media .gallery-count {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 5;
  background: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.property-card .card-media .gallery-count svg { width: 14px; height: 14px; }

/* Address overlay on image */
.property-card .card-media .card-address-overlay {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 5;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  max-width: calc(100% - 120px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.property-card .card-media .card-address-overlay svg { width: 13px; height: 13px; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }

/* NEW badge — Clean Modern Style */
.new-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 8px 14px;
  border-radius: 100px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  -webkit-backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.rented-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  background: rgba(255,255,255,0.95);
  color: #0f172a;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 8px 14px;
  border-radius: 100px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  -webkit-backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.property-card.property-rented {
  opacity: 0.6;
  position: relative;
}
.property-card.property-rented .property-card-image {
  filter: grayscale(50%);
}
.property-card:hover .card-media img { transform: scale(1.06); }
.property-card .badge {
  position: absolute;
  left: 12px;
  top: 12px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.property-card .card-body { 
  padding: 16px 18px 18px; 
  display: flex; 
  flex-direction: column; 
  gap: 6px; 
  flex: 1;
}
.property-card .card-header { 
  display: flex; 
  align-items: flex-start; 
  justify-content: space-between; 
  gap: 12px; 
}
.property-card .card-title { 
  font-size: 0.88rem; 
  font-weight: 500; 
  color: var(--text-secondary); 
  line-height: 1.4; 
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-title-pin { flex-shrink: 0; color: var(--primary); opacity: 0.8; margin-top: 1px; }
/* Address location line */
.card-location {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.card-location-pin {
  flex-shrink: 0;
  color: #006AFF;
  width: 13px;
  height: 13px;
  position: relative;
  top: 2px;
}
[data-theme="dark"] .card-location-pin { color: #60a5fa; }
.card-location-street {
  font-weight: 600;
  color: var(--text);
}
.card-location-city {
  font-weight: 400;
  color: var(--text-muted);
}
.property-card .price {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}
.property-card .price::after {
  content: '/mo';
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 2px;
}
.property-card:hover .price {
  color: var(--primary);
}
[data-theme="dark"] .property-card .price {
  color: #f1f5f9;
}
[data-theme="dark"] .property-card:hover .price {
  color: #60a5fa;
}

.property-card .meta {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  color: var(--text-secondary);
  font-size: 0.88rem;
  align-items: center;
}
.property-card .meta .meta-item {
  display: flex;
  gap: 5px;
  align-items: center;
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-weight: 500;
  color: var(--text-secondary);
  transition: none;
  border: none;
}
.property-card .meta .meta-item::after {
  content: '•';
  color: var(--text-muted);
  margin-left: 6px;
  font-size: 0.7rem;
}
.property-card .meta .meta-item:last-child::after {
  display: none;
}
.property-card .meta .meta-item span {
  font-weight: 600;
  color: var(--text);
}
.property-card:hover .meta .meta-item { 
  transform: none;
}
[data-theme="dark"] .property-card .meta .meta-item { 
  color: #94a3b8; 
}
[data-theme="dark"] .property-card .meta .meta-item span { 
  color: #e2e8f0;
}
.property-card .meta svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--primary); }
[data-theme="dark"] .property-card .meta svg { color: #60a5fa; }

.property-card .features { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 6px; 
  padding-top: 4px;
}
.property-card .features .feature-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,106,255,0.08);
  border: 1px solid rgba(0,106,255,0.25);
  color: #006AFF;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 100px;
  white-space: nowrap;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.property-card .features .feature-tag:hover { 
  border-color: rgba(0,106,255,0.5);
  background: rgba(0,106,255,0.12);
}
.property-card .features .feature-tag svg { width: 12px; height: 12px; flex-shrink: 0; color: #006AFF; }

/* Feature color variants — dark theme */
[data-theme="dark"] .property-card .features .feature-tag {
  background: rgba(96,165,250,0.12);
  border-color: rgba(96,165,250,0.3);
  color: #60a5fa;
}
[data-theme="dark"] .property-card .features .feature-tag:hover {
  background: rgba(96,165,250,0.2);
  border-color: rgba(96,165,250,0.5);
}
[data-theme="dark"] .property-card .features .feature-tag svg { color: #60a5fa; }

.property-card .card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
}

/* Action buttons — Clean Minimal Style */
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.8rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex: 1;
  justify-content: center;
  letter-spacing: 0.02em;
}
.action-btn:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
}
.action-btn .btn-icon { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
}
.action-btn .btn-icon svg { width: 14px; height: 14px; color: #fff; display: block; }
.action-btn .btn-label { display: inline-block; line-height: 1; }

.action-btn.info { background: #64748b; }
.action-btn.info:hover { background: #475569; }
.action-btn.map { 
  background: #006AFF;
}
.action-btn.map:hover { 
  background: #0052CC; 
  box-shadow: 0 4px 12px rgba(0,106,255,0.35); 
}
.action-btn.apply { 
  background: #10b981;
}
.action-btn.apply:hover { 
  background: #059669; 
  box-shadow: 0 4px 12px rgba(16,185,129,0.35); 
}

/* ============================================
   MODAL CTA BUTTONS
   ============================================ */
.modal-cta {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--surface);
  padding: 10px 0 2px;
  border-top: 1px solid var(--border);
}
.modal-cta .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.modal-cta .btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
}
.modal-cta .btn-primary:hover::before { opacity: 1; }
.modal-cta .btn-primary svg { flex-shrink: 0; position: relative; z-index: 1; }
.modal-cta .btn-primary span { position: relative; z-index: 1; }
.modal-cta .btn-primary.apply {
  background: #006AFF;
  box-shadow: 0 4px 14px rgba(0,106,255,0.3);
}
.modal-cta .btn-primary.apply:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,106,255,0.4); }
.modal-cta .btn-primary.contact {
  background: #0891b2;
  box-shadow: 0 4px 14px rgba(8,145,178,0.3);
}
.modal-cta .btn-primary.contact:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(8,145,178,0.4); }
.modal-cta .btn-primary.phone {
  background: #10b981;
  box-shadow: 0 4px 14px rgba(5,150,105,0.3);
}
.modal-cta .btn-primary.phone:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(5,150,105,0.4); }
.modal-cta .btn-primary.share {
  background: #3385FF;
  box-shadow: 0 4px 14px rgba(0,106,255,0.3);
}
.modal-cta .btn-primary.share:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,106,255,0.4); }

.view-btn { background: var(--primary); color: white; border: none; padding: 0.7rem 1.4rem; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; transition: background var(--transition); }
.view-btn:hover { background: var(--primary-dark); }

/* ============================================
   MODAL — Clean Modern 2026 Design
   ============================================ */
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modalSlideUp {
  from { transform: translateY(30px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 0;
  animation: modalFadeIn 0.3s ease;
}
.modal-content {
  background: #fff;
  margin: 0;
  padding: 0;
  border-radius: 0;
  width: 100%;
  height: 100%;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border: none;
}
[data-theme="dark"] .modal-content {
  background: #0f172a;
  box-shadow: 0 25px 100px rgba(0,0,0,0.6);
}
.preview-content { max-width: 100%; }

/* Close button — clean modern circle */
.close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  -webkit-backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: none;
  color: #64748b;
  font-size: 1.5rem;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
  line-height: 1;
  padding: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.close:hover {
  background: #ef4444;
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(239,68,68,0.4);
}

/* Share button */
.modal-share-btn {
  position: absolute;
  top: 16px;
  right: 64px;
  z-index: 10;
  width: 42px;
  height: 42px;
  border: none;
  background: rgba(255,255,255,0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #64748b;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.modal-share-btn:hover {
  transform: scale(1.08);
  background: #006AFF;
  color: #fff;
}
.modal-share-btn svg { width: 20px; height: 20px; }

/* Layout — column base (mobile/tablet), 2-col desktop via min-width query */
.modal-top { 
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Main image area */
.modal-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  overflow: hidden;
  min-height: 50vh;
  max-height: 60vh;
  border-radius: 0;
  flex-shrink: 0;
}
.modal-main img.modal-main-image { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
  transition: opacity 0.2s ease; 
  opacity: 1; 
  -webkit-user-select: none; 
  user-select: none; 
  touch-action: none; 
}
.modal-main img.modal-main-image.zoomed { cursor: grab; }
.modal-main video.modal-main-video { 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
  display: block; 
  background: #000; 
}

/* Navigation arrows — clean white circles */
.modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(255,255,255,0.95);
  color: #1e293b;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  transition: all 0.2s ease;
  z-index: 5;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
  opacity: 0;
}
.modal-main:hover .modal-nav { opacity: 1; }
.modal-nav:hover { 
  background: #006AFF; 
  color: #fff; 
  transform: translateY(-50%) scale(1.08); 
  box-shadow: 0 8px 30px rgba(0,106,255,0.45); 
}
.modal-nav.prev { left: 20px; }
.modal-nav.next { right: 20px; }
.modal-nav svg { width: 22px; height: 22px; }

/* Image counter — clean pill */
.modal-counter {
  position: absolute;
  right: 20px;
  bottom: 20px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 10px 18px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 0.9rem;
  z-index: 5;
  letter-spacing: 0.3px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Fullscreen expand button */
.fs-expand-btn {
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  z-index: 3;
}
.fs-expand-btn:hover { background: rgba(0,0,0,0.7); transform: scale(1.1); }

/* Mobile "See all photos" button inside carousel */
.mobile-all-photos-btn {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.95);
  color: #1e293b;
  border: none;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: all 0.2s;
}
.mobile-all-photos-btn:hover { background: #fff; }
.mobile-all-photos-btn svg { flex-shrink: 0; }
[data-theme="dark"] .mobile-all-photos-btn {
  background: rgba(30,41,59,0.9);
  color: #e2e8f0;
}

/* Preview Header */
.preview-header {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e2e8f0;
}
[data-theme="dark"] .preview-header { border-bottom-color: #334155; }
.modal-info h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  text-align: left;
  line-height: 1.35;
  letter-spacing: -0.02em;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.modal-info h2 .card-title-pin { flex-shrink: 0; color: #006AFF; opacity: 0.8; width: 20px; height: 20px; margin-top: 3px; }
/* Modal address line */
.modal-location {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.modal-location-pin {
  flex-shrink: 0;
  color: #006AFF;
  width: 16px;
  height: 16px;
  position: relative;
  top: 3px;
}
[data-theme="dark"] .modal-location-pin { color: #60a5fa; }
.modal-location-street {
  font-weight: 600;
  color: var(--text);
}
.modal-location-city {
  font-weight: 400;
  color: var(--text-muted);
}
.modal-price {
  display: inline-flex;
  align-items: center;
  font-size: 1.75rem;
  font-weight: 800;
  color: #006AFF;
  background: transparent;
  padding: 0;
  border-radius: 0;
  width: fit-content;
  letter-spacing: -0.02em;
}
[data-theme="dark"] .modal-price {
  color: #3385FF;
  background: transparent;
}

/* Quick Stats — Clean Modern Cards */
.preview-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
  margin-top: 12px;
}
.preview-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 14px;
  background: #f8fafc;
  border-radius: 18px;
  border: none;
  transition: all 0.2s ease;
}
[data-theme="dark"] .preview-stat { background: #1e293b; }
.preview-stat:hover {
  background: #f1f5f9;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
[data-theme="dark"] .preview-stat:hover { background: #334155; }
.preview-stat svg {
  color: #006AFF;
  width: 22px; height: 22px;
  padding: 8px;
  background: rgba(0,106,255,0.1);
  border-radius: 12px;
  flex-shrink: 0;
  box-sizing: content-box;
}
[data-theme="dark"] .preview-stat svg { background: rgba(0,106,255,0.2); color: #3385FF; }
.preview-stat span { font-size: 1.35rem; font-weight: 700; color: var(--text); line-height: 1; }
.preview-stat small { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }

/* Preview Sections */
.preview-section { margin-bottom: 20px; padding-top: 20px; border-top: 1px solid #e2e8f0; }
[data-theme="dark"] .preview-section { border-top-color: #334155; }
.preview-section:first-of-type { border-top: none; padding-top: 0; }
.preview-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #64748b;
  margin-bottom: 12px;
}
.preview-section-label svg { color: #006AFF; flex-shrink: 0; width: 16px; height: 16px; }

.modal-details { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.65; margin-bottom: 0; margin-top: 0; }

/* Interactive Description Sections */
.desc-interactive { margin-top: 6px; }
.desc-overview {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 10px;
}
/* Accordion cards */
.desc-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.desc-info-card {
  border-radius: 16px;
  border: none;
  background: #f8fafc;
  overflow: hidden;
  transition: all 0.2s ease;
}
[data-theme="dark"] .desc-info-card { background: #1e293b; }
.desc-info-card:hover { 
  background: #f1f5f9;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
[data-theme="dark"] .desc-info-card:hover { background: #334155; }
.desc-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.desc-card-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.desc-card-icon svg { width: 18px; height: 18px; }
.desc-card-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text);
  flex: 1;
}
.desc-card-chevron {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.desc-info-card.open .desc-card-chevron { transform: rotate(180deg); }
.desc-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.2s ease;
  padding: 0 18px;
}
.desc-info-card.open .desc-card-body {
  max-height: 400px;
  padding: 0 18px 16px;
}
.desc-card-text {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
/* Card type colors */
.desc-transport .desc-card-icon { background: rgba(0,106,255,0.1); color: #006AFF; }
.desc-schools .desc-card-icon { background: #fef3c7; color: #d97706; }
.desc-extras .desc-card-icon { background: #f0fdf4; color: #16a34a; }
.desc-pricing .desc-card-icon { background: #faf5ff; color: #7c3aed; }
/* CTA */
.desc-cta {
  font-size: 0.85rem;
  color: #006AFF;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(0,106,255,0.06);
  border: none;
  text-align: center;
}
/* Bus Route pills */
.desc-route-section { margin-top: 10px; }
.desc-route-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}
.desc-route-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.desc-route-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 8px;
  background: #006AFF;
  color: #fff;
  cursor: default;
  transition: transform 0.15s ease;
}
.desc-route-pill:hover {
  transform: translateY(-1px) scale(1.05);
}
/* Bus stops list */
.desc-stops-section { margin-top: 8px; }
.desc-stop-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 3px 0;
}
.desc-stop-item svg { color: #3b82f6; flex-shrink: 0; }
.desc-stop-item small {
  margin-left: auto;
  font-size: 0.65rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.modal-info { 
  overflow-y: visible; 
  padding: 32px; 
  max-width: 720px; 
  margin: 0 auto; 
  width: 100%;
}
.modal-info::-webkit-scrollbar { width: 6px; }
.modal-info::-webkit-scrollbar-track { background: transparent; }
.modal-info::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
.modal-info::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
[data-theme="dark"] .modal-info::-webkit-scrollbar-thumb { background: #475569; }
[data-theme="dark"] .modal-info::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Move-in Estimate — Clean Card */
.move-in-estimate {
  background: #f8fafc;
  border: none;
  border-radius: 18px;
  padding: 20px 24px;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .move-in-estimate { background: #1e293b; }
.move-in-estimate::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #006AFF;
  border-radius: 3px 3px 0 0;
}
.estimate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}
.estimate-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.estimate-formula {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 400;
}
.estimate-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}
.estimate-divider {
  height: 1px;
  background: var(--estimate-divider);
  margin: 4px 0;
}
.estimate-total .estimate-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}
.estimate-total .estimate-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: #006AFF;
}
[data-theme="dark"] .estimate-total .estimate-value { color: #3385FF; }

/* =============================================
   PREVIEW INTEREST BUTTON & MODAL
   ============================================= */
.preview-interest-btn {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 12px;
  margin-bottom: 4px;
  padding: 14px 18px;
  border: none;
  border-radius: 14px;
  background: rgba(0,106,255,0.08);
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 12px;
}
.preview-interest-btn:hover {
  background: rgba(0,106,255,0.12);
  transform: translateY(-2px);
}
.preview-interest-btn:active { transform: translateY(0); }
.preview-interest-btn-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: #006AFF;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.preview-interest-btn-icon svg { width: 20px; height: 20px; }
.preview-interest-btn-text {
  display: flex; flex-direction: column; gap: 2px; text-align: left; flex: 1;
}
.preview-interest-btn-title {
  font-weight: 700; font-size: 0.88rem; color: #0052CC;
}
[data-theme="dark"] .preview-interest-btn-title { color: #3385FF; }
.preview-interest-btn-sub {
  font-size: 0.72rem; color: #006AFF; font-weight: 500;
}
[data-theme="dark"] .preview-interest-btn-sub { color: #66A3FF; }
.preview-interest-btn-arrow {
  color: #006AFF; flex-shrink: 0; width: 18px; height: 18px; transition: transform 0.2s ease;
}
.preview-interest-btn:hover .preview-interest-btn-arrow {
  transform: translateX(4px);
}

/* Interest Modal Overlay */
.interest-overlay {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: intFadeIn 0.2s ease;
  padding: 16px;
}
@keyframes intFadeIn { from { opacity: 0; } to { opacity: 1; } }
.interest-modal {
  background: #fff; border-radius: 18px;
  width: 100%; max-width: 420px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  animation: intSlideUp 0.3s ease;
  overflow: hidden;
}
@keyframes intSlideUp {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.interest-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #fff;
}
.interest-modal-header-left {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.05rem;
}
.interest-modal-close {
  background: rgba(255,255,255,0.15); border: none; color: #fff;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 1.3rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s; flex-shrink: 0;
}
.interest-modal-close:hover { background: rgba(255,255,255,0.3); }
.interest-modal-property {
  padding: 10px 20px;
  background: #f5f3ff;
  border-bottom: 1px solid #e0e7ff;
  font-size: 0.82rem; font-weight: 600; color: #4f46e5;
  display: flex; align-items: center; gap: 6px;
}
.interest-form {
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.interest-field label {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 600; color: #374151;
  margin-bottom: 5px;
}
.interest-field label svg { color: #6366f1; flex-shrink: 0; }
.interest-field input,
.interest-field textarea {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid #e5e7eb; border-radius: 10px;
  font-size: 0.88rem; background: #f9fafb;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit; resize: vertical;
  box-sizing: border-box;
}
.interest-field input:focus,
.interest-field textarea:focus {
  outline: none; border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
  background: #fff;
}
.interest-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.interest-chip {
  background: #f5f3ff; border: 1px solid #e0e7ff;
  border-radius: 20px; padding: 5px 12px;
  font-size: 0.78rem; color: #4f46e5; cursor: pointer;
  font-weight: 500; transition: all 0.2s; white-space: nowrap;
}
.interest-chip:hover {
  background: #eef2ff; border-color: #a5b4fc;
  transform: translateY(-1px); box-shadow: 0 2px 6px rgba(79,70,229,0.1);
}
.interest-submit-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px;
  border: none; border-radius: 12px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff; font-size: 0.95rem; font-weight: 700;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.2s;
}
.interest-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79,70,229,0.35);
}
.interest-submit-btn:active { transform: translateY(0); }
.interest-submit-btn:disabled {
  opacity: 0.6; cursor: not-allowed; transform: none;
}
.interest-success {
  padding: 40px 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.interest-success h3 {
  margin: 6px 0 0; font-size: 1.2rem; color: #1e293b;
}
.interest-success p {
  margin: 0; font-size: 0.88rem; color: #64748b;
}
.interest-done-btn {
  margin-top: 12px; padding: 10px 32px;
  border: none; border-radius: 10px;
  background: #f1f5f9; color: #334155;
  font-size: 0.88rem; font-weight: 600;
  cursor: pointer; transition: background 0.2s;
}
.interest-done-btn:hover { background: #e2e8f0; }

/* =============================================
   MOBILE PREVIEW SUGGESTIONS
   ============================================= */
.preview-suggestions {
  display: block;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}
[data-theme="dark"] .preview-suggestions { border-top-color: #334155; }

.suggestions-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.suggestions-scroll::-webkit-scrollbar { display: none; }

.suggestion-card {
  flex-shrink: 0;
  width: 200px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  scroll-snap-align: start;
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
[data-theme="dark"] .suggestion-card { 
  background: #1e293b; 
  border-color: #334155;
}
.suggestion-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,106,255,0.12);
  border-color: #006AFF;
}
.suggestion-card:active { transform: scale(0.98); }

.suggestion-img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  background: #f1f5f9;
}
[data-theme="dark"] .suggestion-img { background: #334155; }

.suggestion-info {
  padding: 12px;
}
.suggestion-price {
  font-size: 1rem;
  font-weight: 800;
  color: #006AFF;
  margin-bottom: 4px;
}
[data-theme="dark"] .suggestion-price { color: #3385FF; }
.suggestion-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}
.suggestion-meta {
  display: flex;
  gap: 8px;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.suggestion-meta span {
  display: flex;
  align-items: center;
  gap: 3px;
}
.suggestion-meta svg {
  width: 12px;
  height: 12px;
  color: #94a3b8;
}

/* Show on all screens */
.preview-suggestions { display: block; }

/* Desktop enhancements */
@media (min-width: 769px) {
  .preview-suggestions { margin-top: 28px; padding-top: 24px; }
  .suggestions-scroll { gap: 16px; padding: 4px 0 16px; }
  .suggestion-card { width: 220px; }
  .suggestion-img { height: 130px; }
  .suggestion-info { padding: 14px; }
  .suggestion-price { font-size: 1.1rem; }
  .suggestion-title { font-size: 0.82rem; }
  .suggestion-meta { font-size: 0.72rem; gap: 10px; }
  .suggestion-meta svg { width: 13px; height: 13px; }
}

@media (max-width: 480px) {
  .interest-modal { border-radius: 14px; }
  .preview-interest-btn { padding: 12px 14px; }
  .logo { font-size: 1rem; gap: 3px; }
  .logo img.site-logo-img { height: 32px; max-height: 32px; }
  
  .suggestion-card { width: 180px; }
  .suggestion-img { height: 95px; }
  .suggestion-info { padding: 10px; }
  .suggestion-price { font-size: 0.92rem; }
}

/* Feature pills in modal */
.modal-features { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.modal-features .feature-pill {
  display: flex;
  gap: 6px;
  align-items: center;
  background: var(--border-light);
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.modal-features .feature-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.modal-features .feature-pill svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Feature pill color variants — modal (light theme) */
.modal-features .feature-pill.ft-pets { background: #fef9c3; border-color: #fde68a; color: #92400e; }
.modal-features .feature-pill.ft-pets svg { color: #d97706; }
.modal-features .feature-pill.ft-parking { background: #dbeafe; border-color: #93c5fd; color: #1e40af; }
.modal-features .feature-pill.ft-parking svg { color: #2563eb; }
.modal-features .feature-pill.ft-section8 { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
.modal-features .feature-pill.ft-section8 svg { color: #059669; }
.modal-features .feature-pill.ft-laundry { background: #ede9fe; border-color: #c4b5fd; color: #5b21b6; }
.modal-features .feature-pill.ft-laundry svg { color: #7c3aed; }
.modal-features .feature-pill.ft-ac { background: #e0f2fe; border-color: #7dd3fc; color: #075985; }
.modal-features .feature-pill.ft-ac svg { color: #0284c7; }
.modal-features .feature-pill.ft-gym { background: #fce7f3; border-color: #f9a8d4; color: #9d174d; }
.modal-features .feature-pill.ft-gym svg { color: #db2777; }
.modal-features .feature-pill.ft-pool { background: #ccfbf1; border-color: #5eead4; color: #115e59; }
.modal-features .feature-pill.ft-pool svg { color: #0d9488; }
.modal-features .feature-pill.ft-elevator { background: #f3e8ff; border-color: #d8b4fe; color: #6b21a8; }
.modal-features .feature-pill.ft-elevator svg { color: #9333ea; }
.modal-features .feature-pill.ft-bed { background: #e0e7ff; border-color: #a5b4fc; color: #3730a3; }
.modal-features .feature-pill.ft-bed svg { color: #4f46e5; }
.modal-features .feature-pill.ft-bath { background: #cffafe; border-color: #67e8f9; color: #155e75; }
.modal-features .feature-pill.ft-bath svg { color: #0891b2; }
.modal-features .feature-pill.ft-default { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
.modal-features .feature-pill.ft-default svg { color: #64748b; }
.modal-features .feature-pill.ft-kitchen { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.modal-features .feature-pill.ft-kitchen svg { color: #ea580c; }
.modal-features .feature-pill.ft-unit { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.modal-features .feature-pill.ft-unit svg { color: #d97706; }
.modal-features .feature-pill.ft-floor { background: #e0f2fe; border-color: #7dd3fc; color: #075985; }
.modal-features .feature-pill.ft-floor svg { color: #0284c7; }

/* Feature pill color variants — modal (dark theme) */
[data-theme="dark"] .modal-features .feature-pill {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: #cbd5e1;
}
[data-theme="dark"] .modal-features .feature-pill.ft-pets { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.3); color: #fcd34d; }
[data-theme="dark"] .modal-features .feature-pill.ft-pets svg { color: #fbbf24; }
[data-theme="dark"] .modal-features .feature-pill.ft-parking { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.3); color: #93c5fd; }
[data-theme="dark"] .modal-features .feature-pill.ft-parking svg { color: #60a5fa; }
[data-theme="dark"] .modal-features .feature-pill.ft-section8 { background: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.3); color: #6ee7b7; }
[data-theme="dark"] .modal-features .feature-pill.ft-section8 svg { color: #34d399; }
[data-theme="dark"] .modal-features .feature-pill.ft-laundry { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.3); color: #c4b5fd; }
[data-theme="dark"] .modal-features .feature-pill.ft-laundry svg { color: #a78bfa; }
[data-theme="dark"] .modal-features .feature-pill.ft-ac { background: rgba(14,165,233,0.12); border-color: rgba(14,165,233,0.3); color: #7dd3fc; }
[data-theme="dark"] .modal-features .feature-pill.ft-ac svg { color: #38bdf8; }
[data-theme="dark"] .modal-features .feature-pill.ft-gym { background: rgba(236,72,153,0.12); border-color: rgba(236,72,153,0.3); color: #f9a8d4; }
[data-theme="dark"] .modal-features .feature-pill.ft-gym svg { color: #f472b6; }
[data-theme="dark"] .modal-features .feature-pill.ft-pool { background: rgba(20,184,166,0.12); border-color: rgba(20,184,166,0.3); color: #5eead4; }
[data-theme="dark"] .modal-features .feature-pill.ft-pool svg { color: #2dd4bf; }
[data-theme="dark"] .modal-features .feature-pill.ft-elevator { background: rgba(168,85,247,0.12); border-color: rgba(168,85,247,0.3); color: #d8b4fe; }
[data-theme="dark"] .modal-features .feature-pill.ft-elevator svg { color: #c084fc; }
[data-theme="dark"] .modal-features .feature-pill.ft-bed { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.3); color: #a5b4fc; }
[data-theme="dark"] .modal-features .feature-pill.ft-bed svg { color: #818cf8; }
[data-theme="dark"] .modal-features .feature-pill.ft-bath { background: rgba(6,182,212,0.12); border-color: rgba(6,182,212,0.3); color: #67e8f9; }
[data-theme="dark"] .modal-features .feature-pill.ft-bath svg { color: #22d3ee; }
[data-theme="dark"] .modal-features .feature-pill.ft-default { background: rgba(148,163,184,0.1); border-color: rgba(148,163,184,0.2); color: #94a3b8; }
[data-theme="dark"] .modal-features .feature-pill.ft-default svg { color: #94a3b8; }
[data-theme="dark"] .modal-features .feature-pill.ft-kitchen { background: rgba(249,115,22,0.12); border-color: rgba(249,115,22,0.3); color: #fdba74; }
[data-theme="dark"] .modal-features .feature-pill.ft-kitchen svg { color: #fb923c; }
[data-theme="dark"] .modal-features .feature-pill.ft-unit { background: rgba(217,119,6,0.12); border-color: rgba(217,119,6,0.3); color: #fcd34d; }
[data-theme="dark"] .modal-features .feature-pill.ft-unit svg { color: #fbbf24; }
[data-theme="dark"] .modal-features .feature-pill.ft-floor { background: rgba(14,165,233,0.12); border-color: rgba(14,165,233,0.3); color: #7dd3fc; }
[data-theme="dark"] .modal-features .feature-pill.ft-floor svg { color: #38bdf8; }

/* Dark theme — Interactive Description cards */
[data-theme="dark"] .desc-info-card { background: rgba(30,30,40,0.6); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .desc-card-header:hover { background: rgba(255,255,255,0.03); }
[data-theme="dark"] .desc-info-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
[data-theme="dark"] .desc-transport .desc-card-icon { background: rgba(37,99,235,0.15); color: #60a5fa; }
[data-theme="dark"] .desc-schools .desc-card-icon { background: rgba(217,119,6,0.15); color: #fbbf24; }
[data-theme="dark"] .desc-extras .desc-card-icon { background: rgba(22,163,74,0.15); color: #4ade80; }
[data-theme="dark"] .desc-pricing .desc-card-icon { background: rgba(124,58,237,0.15); color: #a78bfa; }
[data-theme="dark"] .desc-transport:hover { border-color: rgba(96,165,250,0.35); }
[data-theme="dark"] .desc-schools:hover { border-color: rgba(251,191,36,0.35); }
[data-theme="dark"] .desc-extras:hover { border-color: rgba(74,222,128,0.35); }
[data-theme="dark"] .desc-pricing:hover { border-color: rgba(0,106,255,0.35); }
[data-theme="dark"] .desc-cta { background: rgba(0,106,255,0.12); }
[data-theme="dark"] .desc-route-pill { background: #006AFF; }
[data-theme="dark"] .desc-stop-item svg { color: #3385FF; }

/* ── Map container with fullscreen button ── */
.map-container { position: relative; width: 100%; margin-top: 12px; }
.modal-map { width: 100%; height: 200px; border-radius: 16px; overflow: hidden; background: #f1f5f9; border: none; }
[data-theme="dark"] .modal-map { background: #1e293b; }
.modal-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Fullscreen toggle button */
.map-fullscreen-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.95);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: all 0.2s ease;
  color: #1e293b;
}
.map-fullscreen-btn:hover {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transform: scale(1.08);
}
.map-fullscreen-btn .icon-shrink { display: none; }
.map-fullscreen-btn .icon-expand { display: block; }
[data-theme="dark"] .map-fullscreen-btn {
  background: rgba(30,41,59,0.92);
  color: #e2e8f0;
}
[data-theme="dark"] .map-fullscreen-btn:hover {
  background: #334155;
}

/* Fullscreen map state */
.map-container.map-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 100015;
  margin: 0;
  background: #000;
}
.map-container.map-fullscreen .modal-map {
  height: 100% !important;
  width: 100% !important;
  border-radius: 0;
  margin: 0;
}
.map-container.map-fullscreen .map-fullscreen-btn {
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  z-index: 100016;
}
.map-container.map-fullscreen .map-fullscreen-btn .icon-expand { display: none; }
.map-container.map-fullscreen .map-fullscreen-btn .icon-shrink { display: block; }

.modal-gallery {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 28px;
  scroll-behavior: smooth;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
}
[data-theme="dark"] .modal-gallery { background: #1e293b; border-top-color: #334155; }
.modal-gallery::-webkit-scrollbar { height: 4px; }
.modal-gallery::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
[data-theme="dark"] .modal-gallery::-webkit-scrollbar-thumb { background: #475569; }
.modal-gallery img {
  width: 100px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  opacity: 0.6;
  border: 3px solid transparent;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.modal-gallery img:hover { opacity: 0.85; transform: translateY(-2px); }
.modal-gallery img.active {
  opacity: 1;
  border-color: #006AFF;
  box-shadow: 0 4px 16px rgba(0,106,255,0.3);
  transform: translateY(-3px);
}

/* Video thumbnails in gallery strip */
.gallery-video-thumb {
  position: relative;
  width: 100px;
  height: 72px;
  border-radius: 12px;
  cursor: pointer;
  opacity: 0.6;
  border: 3px solid transparent;
  transition: all 0.2s ease;
  overflow: hidden;
  flex-shrink: 0;
}
.gallery-video-thumb:hover { opacity: 0.85; transform: translateY(-2px); }
.gallery-video-thumb.active {
  opacity: 1;
  border-color: #006AFF;
  box-shadow: 0 4px 16px rgba(0,106,255,0.3);
  transform: translateY(-3px);
}
.gallery-video-play-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  background: rgba(0,0,0,0.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.gallery-video-play-icon svg { margin-left: 2px; }

/* Gallery preview inside Add Property modal */
#galleryPreview, #galleryPreview img, #galleryPreview div { box-sizing: border-box; }
#galleryPreview img { width: 100px; height: 72px; object-fit: cover; border-radius: var(--radius-xs); box-shadow: var(--shadow-sm); }
input[type="file"]#property-gallery-files { display: block; }
textarea#property-gallery-urls { width: 100%; padding: 10px; border-radius: var(--radius-xs); border: 1px solid var(--border); }

/* ============================================
   SCHEDULE FORM / MODAL
   ============================================ */
#scheduleModal {
  z-index: 100020;
}
.schedule-modal-content {
  max-width: 540px;
  margin: 20px auto;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.06) inset;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
  max-height: calc(100vh - 40px);
  animation: scheduleSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes scheduleSlideIn {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Close button override for schedule modal */
.schedule-modal-content > .close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 10;
  color: rgba(255,255,255,0.85);
  font-size: 1.6rem;
  background: rgba(255,255,255,0.15);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.schedule-modal-content > .close:hover {
  background: rgba(255,255,255,0.3);
  color: #fff;
}

/* Gradient banner */
.schedule-banner {
  position: relative;
  padding: 32px 28px 28px;
  overflow: hidden;
}
.schedule-banner-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 30%, #7c3aed 60%, #8b5cf6 100%);
  z-index: 0;
}
.schedule-banner-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.12) 0%, transparent 50%),
    radial-gradient(circle at 85% 15%, rgba(255,255,255,0.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.05) 0%, transparent 80%);
}
.schedule-banner-content {
  position: relative;
  z-index: 1;
  text-align: center;
}
.schedule-banner-icon {
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.18);
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.schedule-banner-icon svg {
  width: 28px;
  height: 28px;
  color: #fff;
}
.schedule-banner-content h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
.schedule-property-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 16px;
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255,255,255,0.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.18);
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Steps indicator */
.schedule-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 18px 28px 6px;
}
.schedule-step {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}
.schedule-step.active { color: var(--primary); }
.step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--border-light);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border);
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
}
.schedule-step.active .step-dot {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 3px 12px rgba(79,70,229,0.35);
  transform: scale(1.08);
}
.schedule-step.completed .step-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(5,150,105,0.3);
}
.schedule-step.completed .step-dot::after {
  content: '✓';
  font-size: 0.72rem;
}
.step-line {
  width: 36px;
  height: 2.5px;
  background: var(--border);
  margin: 0 10px;
  border-radius: 3px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.step-line.completed {
  background: var(--accent);
  box-shadow: 0 1px 4px rgba(5,150,105,0.2);
}

/* ── Schedule property accordion ── */
.sched-accordion {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.sched-accordion:hover { border-color: var(--primary); }
.sched-accordion.open { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.08); }

.sched-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  background: var(--surface);
  transition: background 0.2s ease;
  user-select: none;
}
.sched-accordion-trigger:hover { background: rgba(79,70,229,0.03); }
.sched-accordion-trigger.has-selection { background: rgba(79,70,229,0.04); }

.sched-accordion-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.sched-accordion-icon {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.2s ease;
}
.sched-accordion-trigger.has-selection .sched-accordion-icon { color: var(--primary); }
#sched-accordion-text {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sched-accordion-trigger.has-selection #sched-accordion-text { color: var(--text); font-weight: 600; }

.sched-accordion-chevron {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}
.sched-accordion.open .sched-accordion-chevron { transform: rotate(180deg); }

.sched-accordion-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(.4,0,.2,1), padding 0.3s ease;
  padding: 0 6px;
  background: var(--bg);
  border-top: 0 solid transparent;
}
.sched-accordion.open .sched-accordion-panel {
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
  border-top: 1px solid var(--border-light);
}
.sched-accordion-panel::-webkit-scrollbar { width: 5px; }
.sched-accordion-panel::-webkit-scrollbar-track { background: transparent; }
.sched-accordion-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }

.sched-prop-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
}
.sched-prop-card:hover {
  background: rgba(79,70,229,0.05);
}
.sched-prop-card.selected {
  background: rgba(79,70,229,0.08);
}
.sched-prop-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--border-light);
}
.sched-prop-info {
  flex: 1;
  min-width: 0;
}
.sched-prop-addr {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.sched-prop-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 500;
}
.sched-prop-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.sched-prop-check svg {
  width: 11px;
  height: 11px;
  opacity: 0;
  color: #fff;
  transition: opacity 0.15s ease;
}
.sched-prop-card.selected .sched-prop-check {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 2px 6px rgba(79,70,229,0.3);
}
.sched-prop-card.selected .sched-prop-check svg {
  opacity: 1;
}

/* Form body */
.schedule-form {
  padding: 20px 28px 28px;
}

/* Form sections */
.form-section {
  margin-bottom: 18px;
}
.form-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-section-label svg {
  width: 16px;
  height: 16px;
  color: var(--primary);
  flex-shrink: 0;
}
.form-section-fields {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Input fields (shared) */
.input-with-icon { position: relative; margin-bottom: 12px; }
.input-with-icon svg.icon-svg, .input-with-icon > svg:first-child {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
  transition: color 0.16s ease;
  z-index: 1;
}
.input-with-icon input, .input-with-icon textarea {
  width: 100%;
  padding: 13px 14px 13px 42px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  color: var(--text);
  font-family: inherit;
}
.input-with-icon textarea { min-height: 80px; padding-top: 12px; resize: vertical; }
.input-with-icon:focus-within svg { color: var(--primary); }
.input-with-icon input:focus, .input-with-icon textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
  background: #fafaff;
}
.input-with-icon input::placeholder, .input-with-icon textarea::placeholder {
  color: var(--text-muted);
  font-weight: 400;
}
/* ── Field validation states ── */
.input-with-icon.field-valid input,
.input-with-icon.field-valid textarea {
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16,185,129,0.12);
}
.input-with-icon.field-valid svg.icon-svg { color: #10b981; }
.input-with-icon.field-invalid input,
.input-with-icon.field-invalid textarea {
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239,68,68,0.12);
}
.input-with-icon.field-invalid svg.icon-svg { color: #ef4444; }
.input-with-icon.field-checking input { border-color: #f59e0b; }
.field-tip {
  font-size: 0.78rem;
  margin-top: 3px;
  padding-left: 2px;
  line-height: 1.3;
}
.field-tip.tip-error { color: #ef4444; }
.field-tip.tip-ok { color: #10b981; }
.date-time {
  display: flex;
  gap: 12px;
}
.date-time .input-with-icon {
  flex: 1;
  margin-bottom: 0;
}

/* 12-hour time selector */
.sched-time-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 42px !important;
}
.sched-time-group .icon-svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
}
.sched-time-sel {
  padding: 10px 8px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  text-align: center;
  min-width: 52px;
}
.sched-time-sel:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
}
.sched-ampm-sel {
  min-width: 56px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(79,70,229,0.06);
  border-color: rgba(79,70,229,0.2);
}
.sched-time-sep {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-muted);
  user-select: none;
}

/* Schedule info note */
.schedule-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #eef2ff, #f0f4ff);
  border: 1px solid rgba(79,70,229,0.12);
  border-radius: 12px;
  margin-bottom: 18px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.schedule-note svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Form actions */
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.btn-secondary {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  padding: 11px 22px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.btn-secondary:hover { background: var(--border-light); border-color: #cbd5e1; }
.schedule-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  font-weight: 600;
}
.schedule-submit-btn svg {
  width: 16px;
  height: 16px;
}

/* Step panels */
.schedule-step-panel {
  animation: stepFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes stepFadeIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.schedule-step-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}
.schedule-step-actions .btn-secondary,
.schedule-step-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.schedule-next-btn {
  padding: 11px 24px;
  font-weight: 600;
}
.step-line.completed {
  background: var(--primary);
}

/* Summary card */
.schedule-summary {
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  border: 1px solid rgba(79,70,229,0.12);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 16px;
}
.schedule-summary-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.schedule-summary-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
}
.schedule-summary-row + .schedule-summary-row {
  border-top: 1px solid var(--border-light);
}
.schedule-summary-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.schedule-summary-icon svg {
  color: var(--primary);
}
.schedule-summary-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.schedule-summary-value {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
}

/* Feedback */
.schedule-feedback {
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 600;
  margin: 12px 28px 0;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: #fef3c7;
  border: 1px solid #fbbf24;
  display: none;
  text-align: center;
}

/* Success state */
.schedule-success {
  display: none;
  text-align: center;
  padding: 40px 28px;
  transform: scale(.92);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.schedule-success.show {
  display: block;
  transform: scale(1);
  opacity: 1;
}
.success-check-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  animation: successPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
@keyframes successPop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.success-check-ring svg {
  width: 40px;
  height: 40px;
}
.success-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #065f46;
  margin-bottom: 6px;
}
.success-sub {
  font-size: 0.9rem;
  color: #047857;
  line-height: 1.5;
}

/* Auto-fill section (legacy) */
.auto-fill-section { margin-bottom: 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; background: var(--border-light); }
.auto-fill-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.auto-fill-header h3 { margin: 0; font-size: 1.05rem; color: var(--text); }
.auto-fill-btn { padding: 6px 12px; font-size: 0.82rem; }
.auto-fill-content { margin-top: 10px; }
.auto-fill-actions { display: flex; gap: 8px; margin-top: 12px; justify-content: center; flex-wrap: wrap; }
.auto-fill-actions .btn-primary { padding: 10px 16px; font-size: 0.88rem; }
.auto-fill-actions .btn-secondary { padding: 10px 16px; font-size: 0.88rem; }

/* ============================================
   ADD PROPERTY MODAL — V4 Professional Redesign
   Clean, Minimal, Corporate SaaS Aesthetic
   ============================================ */
.add-prop-modal {
  max-width: 720px;
  margin: 20px auto;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(15,23,42,0.22), 0 0 0 1px var(--border);
  padding: 0;
  overflow: hidden;
  animation: addPropIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.add-prop-modal::-webkit-scrollbar { width: 4px; }
.add-prop-modal::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.add-prop-modal::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
@keyframes addPropIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Close button */
.add-prop-modal > .close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 10;
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.2s;
}
.add-prop-modal > .close:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* Header — solid dark slate */
.add-prop-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px 20px;
  background: #1e293b;
  position: relative;
}
.add-prop-header::before { display: none; }
.add-prop-header::after { display: none; }
.add-prop-header-icon {
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.1);
}
.add-prop-header-icon svg {
  width: 22px; height: 22px;
  color: #e2e8f0;
}
.add-prop-header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.01em;
}
.add-prop-header-sub {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: #94a3b8;
}

/* Smart Fill Card */
.add-prop-smartfill {
  margin: 14px 0 0;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: border-color 0.2s;
}
.add-prop-smartfill:hover {
  border-color: #94a3b8;
}
.add-prop-smartfill-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s;
}
.add-prop-smartfill-trigger:hover { background: var(--border-light); }
.add-prop-smartfill-badge {
  width: 30px; height: 30px;
  background: #1e293b;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700;
  color: #e2e8f0;
  flex-shrink: 0;
}
.add-prop-smartfill-info { flex: 1; min-width: 0; }
.add-prop-smartfill-title {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.add-prop-smartfill-hint {
  display: block;
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.add-prop-chevron {
  transition: transform 0.25s ease;
  color: var(--text-muted);
  flex-shrink: 0;
}
.add-prop-chevron.rotated { transform: rotate(180deg); }
.add-prop-smartfill-body {
  padding: 0 14px 14px;
}
.add-prop-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.add-prop-toggle-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.add-prop-toggle-item label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.add-prop-toggle-item select {
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.84rem;
  font-family: inherit;
  color: var(--text);
  transition: border-color 0.2s;
}
.add-prop-toggle-item select:focus {
  outline: none;
  border-color: #475569;
  box-shadow: 0 0 0 2px rgba(71,85,105,0.12);
}
.add-prop-chip-toggle {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.add-prop-chip-toggle input[type="checkbox"] { display: none; }
.add-prop-chip-toggle span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.add-prop-chip-toggle:hover span { border-color: #475569; }
.add-prop-chip-toggle input:checked + span {
  background: #1e293b;
  border-color: #1e293b;
  color: #f1f5f9;
  font-weight: 600;
}
.add-prop-smartfill-btns {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.add-prop-btn-fill,
.add-prop-btn-ai,
.add-prop-btn-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  border: none;
}
.add-prop-btn-fill {
  background: #1e293b;
  color: #f1f5f9;
}
.add-prop-btn-fill:hover {
  background: #334155;
}
.add-prop-btn-ai {
  background: #475569;
  color: #f1f5f9;
}
.add-prop-btn-ai:hover {
  background: #334155;
}
.add-prop-btn-clear {
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.add-prop-btn-clear:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* Form */
.add-prop-form {
  padding: 0;
}

/* Steps */
.add-prop-step {
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 0;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
  position: relative;
}
.add-prop-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: #1e293b;
  border-radius: 3px 0 0 3px;
  opacity: 0;
  transition: opacity 0.2s;
}
.add-prop-step:hover {
  border-color: #cbd5e1;
}
.add-prop-step:hover::before {
  opacity: 1;
}
.add-prop-step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 2px;
}
.add-prop-step-num {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: #1e293b;
  color: #e2e8f0;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.add-prop-step-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.add-prop-step-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.add-prop-step-fields {
  padding: 12px 18px 18px;
}

/* Fields */
.add-prop-field {
  margin-bottom: 12px;
}
.add-prop-field:last-child {
  margin-bottom: 0;
}
.add-prop-field label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.add-prop-field label small { text-transform: none; }
.add-prop-field input[type="text"],
.add-prop-field input[type="number"],
.add-prop-field select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--text);
  transition: all 0.15s;
  box-sizing: border-box;
}
.add-prop-field input:focus,
.add-prop-field select:focus,
.add-prop-textarea:focus {
  outline: none;
  border-color: #475569;
  box-shadow: 0 0 0 2px rgba(71,85,105,0.12);
  background: var(--surface);
}
.add-prop-field input:hover,
.add-prop-field select:hover,
.add-prop-textarea:hover {
  border-color: #94a3b8;
}
.add-prop-field input::placeholder { color: var(--text-muted); }
.add-prop-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}
.add-prop-field-row .add-prop-field {
  margin-bottom: 0;
}
.add-prop-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--text);
  resize: vertical;
  transition: all 0.15s;
  box-sizing: border-box;
}
.add-prop-textarea::placeholder { color: var(--text-muted); }
.add-prop-field-note {
  display: block;
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Address lookup */
.address-lookup-wrap {
  position: relative;
}
.address-lookup-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: #1e293b;
  color: #e2e8f0;
  border: none;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, transform .15s;
  z-index: 2;
}
.address-lookup-btn:hover {
  background: #334155;
  transform: translateY(-50%) scale(1.04);
}
.address-lookup-btn.loading {
  pointer-events: none;
  opacity: .7;
}
.address-lookup-btn.loading svg {
  animation: addr-spin .8s linear infinite;
}
@keyframes addr-spin { to { transform: rotate(360deg); } }
.address-lookup-wrap input {
  padding-right: 42px !important;
}
.address-lookup-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  max-height: 220px;
  overflow-y: auto;
  z-index: 999;
}
.address-lookup-dropdown .addr-item {
  padding: 9px 12px;
  cursor: pointer;
  font-size: .86rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .12s;
}
.address-lookup-dropdown .addr-item:last-child { border-bottom: none; }
.address-lookup-dropdown .addr-item:hover,
.address-lookup-dropdown .addr-item.active {
  background: #1e293b;
  color: #f1f5f9;
}
.address-lookup-dropdown .addr-item .addr-icon {
  flex-shrink: 0;
  opacity: .6;
}
.address-lookup-dropdown .addr-no-results {
  padding: 12px;
  text-align: center;
  font-size: .84rem;
  color: var(--text-muted);
}
.address-lookup-status {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  padding: 7px 12px;
  font-size: .82rem;
  border-radius: 6px;
  z-index: 998;
}
.address-lookup-status.success {
  background: rgba(34,197,94,.1);
  color: #16a34a;
  border: 1px solid rgba(34,197,94,.2);
}
.address-lookup-status.error {
  background: rgba(239,68,68,.1);
  color: #dc2626;
  border: 1px solid rgba(239,68,68,.2);
}

/* Price input with $ sign */
.add-prop-price-input {
  position: relative;
}
.add-prop-price-sign {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted);
  pointer-events: none;
}
.add-prop-price-input input {
  padding-left: 26px !important;
}

/* Media tabs */
.add-prop-media-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  background: var(--bg);
  border-radius: 8px;
  padding: 3px;
  border: 1px solid var(--border);
}
.add-prop-media-tab {
  flex: 1;
  cursor: pointer;
}
.add-prop-media-tab input[type="radio"] { display: none; }
.add-prop-media-tab span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.15s;
  text-align: center;
}
.add-prop-media-tab input:checked + span {
  background: #1e293b;
  color: #f1f5f9;
  font-weight: 600;
}
.add-prop-media-tab:hover span { color: var(--text-secondary); }

/* Dropzone */
.add-prop-dropzone {
  position: relative;
  border: 1.5px dashed #cbd5e1;
  border-radius: 10px;
  padding: 0;
  transition: all 0.15s;
  cursor: pointer;
  background: var(--bg);
}
.add-prop-dropzone:hover {
  border-color: #475569;
  background: var(--surface);
}
.add-prop-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.add-prop-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  text-align: center;
  pointer-events: none;
}
.add-prop-dropzone-inner svg {
  color: #94a3b8;
  margin-bottom: 8px;
}
.add-prop-dropzone-inner p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-secondary);
}
.add-prop-dropzone-inner strong { color: #1e293b; }
[data-theme="dark"] .add-prop-dropzone-inner strong { color: #e2e8f0; }
.add-prop-dropzone-hint {
  display: block;
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Inline QR panel for Add Property form */
.inline-qr-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0 0;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.inline-qr-left {
  flex-shrink: 0;
}
.inline-qr-code {
  background: #fff;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  min-height: 148px;
}
.inline-qr-right {
  flex: 1;
  min-width: 0;
}
.inline-qr-title {
  margin: 0 0 4px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #334155;
}
[data-theme="dark"] .inline-qr-title { color: #cbd5e1; }
.inline-qr-hint {
  margin: 0 0 8px;
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.inline-qr-status {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-bottom: 6px;
}
.inline-qr-files {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* Gallery preview */
.add-prop-gallery-preview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.add-prop-gallery-preview img {
  width: 96px;
  height: 68px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}
/* Gallery preview items (shared for images and videos) */
.gallery-preview-item {
  width: 96px;
  height: 68px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.gallery-preview-item.gallery-thumbnail-selected {
  border: 2px solid #1e293b;
  box-shadow: 0 0 0 2px rgba(30,41,59,0.2);
}
[data-theme="dark"] .gallery-preview-item.gallery-thumbnail-selected {
  border-color: #e2e8f0;
  box-shadow: 0 0 0 2px rgba(226,232,240,0.2);
}
/* Drag & drop reorder */
.gallery-draggable {
  cursor: grab;
  transition: transform 0.12s, opacity 0.12s;
}
.gallery-draggable:active { cursor: grabbing; }
.gallery-dragging {
  opacity: 0.3;
  transform: scale(0.94);
}
.gallery-drag-over {
  box-shadow: 0 0 0 2px #1e293b;
  transform: scale(1.04);
}
[data-theme="dark"] .gallery-drag-over {
  box-shadow: 0 0 0 2px #e2e8f0;
}
/* Position badge */
.gallery-pos-badge {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  background: #1e293b;
  color: #e2e8f0;
  border-radius: 9px;
  z-index: 4;
  padding: 0 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  pointer-events: none;
}
.gallery-thumbnail-selected .gallery-pos-badge {
  background: #1e293b;
  color: #f8fafc;
}
.gallery-preview-video {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0f172a;
}
.gallery-preview-video .gallery-video-play-icon {
  width: 24px; height: 24px;
}

/* Sticky Footer */
.add-prop-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  position: sticky;
  bottom: 0;
  z-index: 5;
}
.add-prop-btn-cancel {
  padding: 9px 20px;
  font-size: 0.86rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.add-prop-btn-cancel:hover {
  background: var(--bg);
  color: var(--text);
  border-color: #94a3b8;
}
.add-prop-btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 24px;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  background: #1e293b;
  color: #f8fafc;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  letter-spacing: 0.01em;
}
.add-prop-btn-submit:hover {
  background: #334155;
}
.add-prop-btn-submit:active {
  background: #0f172a;
}
[data-theme="dark"] .add-prop-btn-submit {
  background: #e2e8f0;
  color: #0f172a;
}
[data-theme="dark"] .add-prop-btn-submit:hover {
  background: #f1f5f9;
}

/* Live preview (two-column layout) */
.add-prop-body { display: block; padding: 18px 22px 20px; }
.add-prop-preview { background: var(--bg); border-radius: 10px; border: 1px solid var(--border); padding: 14px; min-height: 360px; }
.add-prop-preview .preview-card { display:flex; gap:12px; align-items:flex-start; }
.add-prop-preview .preview-image { width:120px; height:90px; background-size:cover; background-position:center; border-radius:8px; border:1px solid var(--border); flex-shrink:0; }
.add-prop-preview .preview-body { flex:1; min-width:0; }
.add-prop-preview .preview-title { font-weight:700; font-size:1rem; color:var(--text); margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.add-prop-preview .preview-price { color:#1e293b; font-weight:800; margin-bottom:6px; }
[data-theme="dark"] .add-prop-preview .preview-price { color:#e2e8f0; }
.add-prop-preview .preview-address { color:var(--text-muted); font-size:0.86rem; margin-bottom:8px; }
.add-prop-preview .preview-features { font-size:0.82rem; color:var(--text-secondary); margin-bottom:8px; }
.add-prop-preview .preview-badges { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.add-prop-preview .preview-badges .badge { background:var(--bg); border:1px solid var(--border); padding:4px 8px; border-radius:6px; font-size:0.75rem; color:var(--text-secondary); }
.add-prop-preview .preview-desc { font-size:0.82rem; color:var(--text-muted); margin-bottom:10px; max-height:72px; overflow:hidden; text-overflow:ellipsis; }
.add-prop-preview .preview-gallery { display:flex; gap:6px; flex-wrap:wrap; }
.add-prop-preview .preview-gallery img { width:56px; height:40px; object-fit:cover; border-radius:6px; border:1px solid var(--border); }

@media (max-width: 880px) {
  .add-prop-modal { max-width: 96%; padding: 0; border-radius: 12px; }
  .add-prop-body { padding: 12px 14px 16px; }
  .add-prop-preview { min-height: 0; }
  .add-prop-form { padding: 0; }
  .add-prop-modal > .close { top: 10px; right: 10px; }
  .add-prop-header { padding: 18px 16px 16px; }
  .add-prop-header h2 { font-size: 1rem; }
  .add-prop-step-head { padding: 12px 14px 0; }
  .add-prop-step-fields { padding: 10px 14px 14px; }
  .add-prop-footer { padding: 12px 14px; }
}

/* AI text animation */
.ai-generated { position: relative; }
.ai-generated::after {
  content: "Generado por IA";
  position: absolute;
  top: -8px;
  right: -8px;
  background: #1e293b;
  color: #f1f5f9;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0;
  transform: scale(0.8);
  animation: aiBadge 0.5s ease-out 0.3s forwards;
}
@keyframes aiBadge { 0% { opacity:0; transform:scale(.8); } 50% { opacity:1; transform:scale(1.05); } 100% { opacity:1; transform:scale(1); } }
.ai-text-animation { animation: textGlow 1.5s ease-in-out; }
@keyframes textGlow { 0% { background-color:transparent; } 50% { background-color:rgba(30,41,59,0.04); } 100% { background-color:transparent; } }

/* Upload progress bar (in-modal fallback) */
.upload-progress-track {
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.upload-progress-fill {
  height: 100%;
  width: 0%;
  background: #1e293b;
  border-radius: 999px;
  transition: width 0.25s ease;
}
[data-theme="dark"] .upload-progress-fill { background: #e2e8f0; }
.upload-progress-fill.done {
  background: #16a34a;
}
.upload-progress-fill.error {
  background: #dc2626;
}

/* ============================================
   STALE PROPERTY REMINDERS
   ============================================ */
.stale-reminder-panel {
  background: linear-gradient(135deg, #1e1b4b 0%, #1e293b 100%);
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.stale-reminder-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(251,191,36,0.08);
  border-bottom: 1px solid rgba(251,191,36,0.15);
}
.stale-reminder-icon { font-size: 1.4rem; }
.stale-reminder-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fbbf24;
  font-size: 0.95rem;
}
.stale-reminder-count {
  background: rgba(251,191,36,0.15);
  color: #fbbf24;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}
.stale-reminder-dismiss {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
.stale-reminder-dismiss:hover {
  color: #f8fafc;
  background: rgba(255,255,255,0.08);
}
.stale-reminder-body {
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
}
.stale-group-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 6px;
  padding: 0 4px;
}
.stale-group { display: flex; flex-direction: column; gap: 6px; }
.stale-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.stale-item:hover {
  transform: translateX(3px);
}
.stale-item-critical {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
}
.stale-item-critical:hover {
  background: rgba(239,68,68,0.15);
}
.stale-item-warning {
  background: rgba(251,191,36,0.06);
  border: 1px solid rgba(251,191,36,0.15);
}
.stale-item-warning:hover {
  background: rgba(251,191,36,0.12);
}
.stale-item-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #334155;
}
.stale-item-info { flex: 1; min-width: 0; }
.stale-item-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stale-item-meta {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 2px;
}
.stale-item-days {
  font-size: 0.75rem;
  margin-top: 2px;
}
.stale-item-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  margin-left: auto;
}
.stale-btn {
  border: none;
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
}
.stale-btn:hover {
  transform: scale(1.04);
}
.stale-btn:active {
  transform: scale(0.97);
}
.stale-btn-renew {
  background: rgba(99,102,241,0.15);
  color: #818cf8;
  border: 1px solid rgba(99,102,241,0.25);
}
.stale-btn-renew:hover {
  background: rgba(99,102,241,0.25);
}
.stale-btn-rented {
  background: rgba(16,185,129,0.12);
  color: #34d399;
  border: 1px solid rgba(16,185,129,0.25);
}
.stale-btn-rented:hover {
  background: rgba(16,185,129,0.22);
}
.stale-item-critical .stale-item-days {
  color: #f87171;
}
.stale-item-warning .stale-item-days {
  color: #fbbf24;
}
@media (max-width: 600px) {
  .stale-reminder-body { max-height: 240px; }
  .stale-reminder-header { padding: 10px 14px; }
  .stale-item { padding: 8px 10px; }
  .stale-item-thumb { width: 36px; height: 36px; }
}

/* ============================================
   NOT AVAILABLE APARTMENTS
   ============================================ */
.na-add-form {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
}
.na-form-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.na-input {
  flex: 1;
  min-width: 140px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.6);
  color: #f1f5f9;
  font-size: 0.9rem;
  transition: border-color 0.2s;
}
.na-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.na-input-sm {
  flex: 0 0 100px;
  min-width: 80px;
}
.na-auto-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 500;
  animation: naAlertIn 0.3s ease;
}
@keyframes naAlertIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Auto-delete notice banner */
.na-auto-delete-notice {
  text-align: center;
  padding: 8px 14px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: rgba(99,102,241,0.12);
  color: #818cf8;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Countdown timer on each entry */
.na-timer {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(34,197,94,0.12);
  color: #22c55e;
  margin-left: 4px;
}
.na-timer-expired {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
}
/* Expired item faded */
.na-item-expired {
  opacity: 0.45;
}

.na-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 8px;
  transition: background 0.2s;
}
.na-item:hover {
  background: rgba(30, 41, 59, 0.8);
}
.na-item-auto {
  border-left: 3px solid #ef4444;
}
.na-item-info {
  flex: 1;
  min-width: 0;
}
.na-item-address {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: #f1f5f9;
  font-size: 0.95rem;
}
.na-unit-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(99,102,241,0.2);
  color: #a5b4fc;
  font-size: 0.78rem;
  font-weight: 600;
}
.na-item-date {
  color: #6b7280;
  font-size: 0.78rem;
  margin-top: 2px;
}
.na-auto-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  font-size: 0.78rem;
  font-weight: 500;
}
.na-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 12px;
}
.na-restore-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}
.na-restore-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(5,150,105,0.4);
}
.na-delete-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 8px;
  border: none;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  cursor: pointer;
  transition: background 0.2s;
}
.na-delete-btn:hover {
  background: rgba(239, 68, 68, 0.3);
}
.na-gen-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}
.na-gen-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99,102,241,0.4);
}
.na-gen-pdf {
  background: linear-gradient(135deg, #dc2626, #ef4444);
}
.na-gen-pdf:hover {
  box-shadow: 0 4px 12px rgba(239,68,68,0.4);
}

/* Hint text */
.na-hint {
  margin: 8px 0 0;
  color: #6b7280;
  font-size: 0.78rem;
}

/* Pending list (local) */
.na-pending-list {
  margin-top: 12px;
}
.na-pending-header {
  font-size: 0.82rem;
  font-weight: 700;
  color: #818cf8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.na-pending-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.2);
  margin-bottom: 4px;
  animation: naPendIn 0.2s ease;
}
@keyframes naPendIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.na-pending-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(99,102,241,0.2);
  color: #a5b4fc;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.na-pending-addr {
  flex: 1;
  color: #f1f5f9;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.na-pending-remove {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
.na-pending-remove:hover {
  color: #ef4444;
  background: rgba(239,68,68,0.1);
}
.na-pending-onsite {
  border-color: rgba(245,158,11,0.5);
  background: rgba(245,158,11,0.08);
}
.na-onsite-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(245,158,11,0.2);
  color: #fbbf24;
  font-size: 0.76rem;
  font-weight: 600;
  animation: naPendIn 0.3s ease;
}

/* Save bar */
.na-save-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(30,41,59,0.6);
  border: 1px solid rgba(255,255,255,0.06);
}
.na-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}
.na-save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(99,102,241,0.4);
}
.na-clear-btn {
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: transparent;
  color: #94a3b8;
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.na-clear-btn:hover {
  color: #ef4444;
  border-color: #ef4444;
}

/* Download bar */
.na-download-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(5,150,105,0.15), rgba(16,185,129,0.1));
  border: 1px solid rgba(16,185,129,0.3);
  animation: naAlertIn 0.3s ease;
}
.na-download-label {
  color: #6ee7b7;
  font-weight: 600;
  font-size: 0.88rem;
  flex: 1;
}

@media (max-width: 600px) {
  .na-form-row { flex-direction: column; }
  .na-input-sm { flex: 1; }
  .na-item { flex-direction: column; align-items: flex-start; gap: 10px; }
  .na-item-actions { margin-left: 0; }
  .na-save-bar { flex-direction: column; }
  .na-download-bar { flex-direction: column; text-align: center; }
}

/* ============================================
   UPLOAD QUEUE FLOATING PANEL
   ============================================ */
.uq-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 340px;
  max-height: 420px;
  background: #0f172a;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
  z-index: 100000;
  overflow: hidden;
  font-family: 'Inter', -apple-system, sans-serif;
  animation: uqSlideIn 0.35s cubic-bezier(.22,1,.36,1);
}
@keyframes uqSlideIn {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.uq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: filter 0.15s;
}
.uq-header:hover { filter: brightness(1.1); }
.uq-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
}
.uq-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.uq-collapse-icon {
  color: rgba(255,255,255,0.6);
  font-size: 11px;
}
.uq-clear-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.uq-clear-btn:hover { background: rgba(255,255,255,0.25); }
.uq-body {
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 0;
}
.uq-body::-webkit-scrollbar { width: 4px; }
.uq-body::-webkit-scrollbar-track { background: transparent; }
.uq-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.uq-item {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.15s;
}
.uq-item:last-child { border-bottom: none; }
.uq-item:hover { background: rgba(255,255,255,0.03); }
.uq-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.uq-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.uq-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.uq-item-name {
  color: #e2e8f0;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uq-item-info {
  color: #64748b;
  font-size: 0.72rem;
}
.uq-item-error {
  color: #f87171;
  font-size: 0.72rem;
}
.uq-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.uq-done {
  background: rgba(16,185,129,0.15);
  color: #10b981;
}
.uq-error {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
}
.uq-queued {
  background: rgba(100,116,139,0.15);
  color: #94a3b8;
  font-size: 11px;
}
.uq-uploading {
  background: rgba(99,102,241,0.15);
  color: #818cf8;
}
.uq-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(129,140,248,0.3);
  border-top-color: #818cf8;
  border-radius: 50%;
  animation: uqSpin 0.7s linear infinite;
}
@keyframes uqSpin { to { transform: rotate(360deg); } }
.uq-progress-track {
  margin-top: 8px;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}
.uq-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #818cf8);
  border-radius: 4px;
  transition: width 0.3s ease;
}
.uq-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.uq-action-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.15s, transform 0.15s;
}
.uq-action-btn:hover { transform: scale(1.1); }
.uq-retry {
  background: rgba(99,102,241,0.2);
  color: #818cf8;
  font-size: 14px;
}
.uq-retry:hover { background: rgba(99,102,241,0.35); }
.uq-cancel {
  background: rgba(239,68,68,0.15);
  color: #f87171;
}
.uq-cancel:hover { background: rgba(239,68,68,0.3); }

/* Mobile: full-width panel */
@media (max-width: 480px) {
  .uq-panel {
    width: calc(100% - 16px);
    right: 8px;
    bottom: 8px;
    border-radius: 12px;
  }
}

.uq-status-done .uq-item-name { color: #6ee7b7; }
.uq-status-error .uq-item-name { color: #fca5a5; }

/* ============================================
   NEWSLETTER SUBSCRIPTION
   ============================================ */
.newsletter-section {
  background: #0f172a;
  padding: 3.5rem 0;
}
.newsletter-box {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  padding: 2.5rem 2rem;
  border-radius: 16px;
}
.newsletter-text h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}
.newsletter-text p {
  color: rgba(255,255,255,0.85);
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
}
.newsletter-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.newsletter-form input {
  flex: 1;
  min-width: 180px;
  padding: 0.75rem 1rem;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 0.95rem;
  outline: none;
  transition: var(--transition);
}
.newsletter-form input::placeholder {
  color: rgba(255,255,255,0.6);
}
.newsletter-form input:focus {
  border-color: #fff;
  background: rgba(255,255,255,0.25);
}
.newsletter-form button {
  padding: 0.75rem 2rem;
  border: none;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: var(--transition);
}
.newsletter-form button:hover {
  background: #eef2ff;
  transform: translateY(-1px);
}
.newsletter-msg {
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-xs);
  font-size: 0.9rem;
  font-weight: 500;
}
.newsletter-msg.success {
  background: rgba(255,255,255,0.2);
  color: #d1fae5;
}
.newsletter-msg.error {
  background: rgba(239,68,68,0.2);
  color: #fecaca;
}

@media (max-width: 600px) {
  .newsletter-form {
    flex-direction: column;
  }
  .newsletter-form input,
  .newsletter-form button {
    width: 100%;
    min-width: unset;
  }
  /* iOS auto-zoom fix: inputs must be >= 16px */
  .newsletter-form input { font-size: 1rem !important; }
}

/* ============================================
   FOOTER
   ============================================ */
footer {
  background: #0f172a;
  color: #cbd5e1;
  padding: 3.5rem 0 2rem;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 2.5rem;
}
.footer-brand .footer-logo {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.75rem;
}
.footer-brand .footer-logo span { color: #a5b4fc; }
.footer-brand p { font-size: 0.9rem; line-height: 1.6; color: #94a3b8; max-width: 320px; }

/* Social media icons */
.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #94a3b8;
  transition: all 0.3s ease;
  text-decoration: none;
}
.social-icon:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.social-icon.social-facebook:hover { background: #1877f2; color: #fff; }
.social-icon.social-instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }
.social-icon.social-whatsapp:hover { background: #25d366; color: #fff; }
.social-icon.social-tiktok:hover { background: #010101; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.15); }
.footer-col h4 { color: #fff; font-size: 0.9rem; font-weight: 700; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.06em; }
.footer-col a { display: block; color: #94a3b8; text-decoration: none; font-size: 0.9rem; padding: 4px 0; transition: color var(--transition); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: none;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.08);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: #64748b;
}
.footer-bottom a { color: #94a3b8; text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

/* ============================================
   COLLAGE — base (hidden on mobile, shown on desktop)
   ============================================ */
.modal-collage {
  display: none;
}

/* ============================================
   DESKTOP MODAL — Zillow-inspired from scratch
   ============================================ */
@media (min-width: 901px) {

  /* ── Modal container — not fullscreen ── */
  .preview-content {
    max-width: 1280px;
    max-height: 96vh;
    height: auto;
    width: 96%;
    margin: 2vh auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  }

  /* ── Scroll container ── */
  .modal-top {
    display: flex;
    flex-direction: column;
    max-height: 96vh;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    background: var(--surface);
    border-radius: 16px;
  }

  /* ── Hide mobile image viewer & gallery strip ── */
  .modal-main { display: none !important; }
  .modal-gallery { display: none !important; }

  /* ════════════════════════════════════════════
     PHOTO COLLAGE — Zillow grid with padding
     ════════════════════════════════════════════ */
  .modal-collage {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    padding: 8px 24px 0;
    height: 56vh;
    min-height: 360px;
    max-height: 540px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    background: var(--surface);
  }

  /* ── Status badge (Active / Rented / Unavailable) ── */
  .collage-status-badge {
    position: absolute;
    top: 20px;
    left: 36px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #fff;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    letter-spacing: 0.02em;
    pointer-events: none;
  }
  .collage-status-badge .csb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
  }
  .collage-status-badge.active .csb-dot { background: #22c55e; }
  .collage-status-badge.rented .csb-dot { background: #f59e0b; }
  .collage-status-badge.unavailable .csb-dot { background: #ef4444; }
  [data-theme="dark"] .collage-status-badge {
    background: rgba(30,41,59,0.92);
    color: #e2e8f0;
  }

  .modal-collage .collage-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: filter 0.2s ease;
    display: block;
    border-radius: 4px;
  }
  .modal-collage .collage-img:hover {
    filter: brightness(0.88);
  }
  /* 1st = big left spanning both rows */
  .modal-collage .collage-img:first-of-type {
    grid-column: 1;
    grid-row: 1 / -1;
    border-radius: 12px 0 0 12px;
  }
  /* 2nd = top-middle */
  .modal-collage .collage-img:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
  }
  /* 3rd = top-right */
  .modal-collage .collage-img:nth-of-type(3) {
    grid-column: 3;
    grid-row: 1;
    border-radius: 0 12px 0 0;
  }
  /* 4th = bottom-middle */
  .modal-collage .collage-img:nth-of-type(4) {
    grid-column: 2;
    grid-row: 2;
  }
  /* 5th = bottom-right */
  .modal-collage .collage-img:nth-of-type(5) {
    grid-column: 3;
    grid-row: 2;
    border-radius: 0 0 12px 0;
  }
  /* Fallbacks for fewer images */
  .modal-collage .collage-img:only-of-type {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    border-radius: 12px;
  }
  .modal-collage .collage-img:first-of-type:nth-last-of-type(2) {
    grid-column: 1;
    grid-row: 1 / -1;
    border-radius: 12px 0 0 12px;
  }
  .modal-collage .collage-img:nth-of-type(2):last-of-type {
    grid-column: 2 / -1;
    grid-row: 1 / -1;
    border-radius: 0 12px 12px 0;
  }
  .modal-collage .collage-img:first-of-type:nth-last-of-type(3) {
    grid-column: 1;
    grid-row: 1 / -1;
  }
  .modal-collage .collage-img:nth-of-type(2):nth-last-of-type(2) {
    grid-column: 2 / -1;
    grid-row: 1;
    border-radius: 0 12px 0 0;
  }
  .modal-collage .collage-img:nth-of-type(3):last-of-type {
    grid-column: 2 / -1;
    grid-row: 2;
    border-radius: 0 0 12px 0;
  }

  /* "See all photos" button */
  .collage-more-btn {
    position: absolute;
    bottom: 14px;
    right: 32px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #fff;
    color: #1e293b;
    border: 1px solid #1e293b;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
  .collage-more-btn:hover {
    background: #1e293b;
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  }
  .collage-more-btn svg { width: 16px; height: 16px; }
  [data-theme="dark"] .collage-more-btn {
    background: rgba(30,41,59,0.95);
    color: #e2e8f0;
    border-color: #64748b;
  }
  [data-theme="dark"] .collage-more-btn:hover {
    background: #334155;
    color: #fff;
  }

/* ════════════════════════════════════════════
   ALL PHOTOS GALLERY MODAL
   ════════════════════════════════════════════ */
.all-photos-gallery {
  position: fixed;
  inset: 0;
  z-index: 100010;
  background: var(--surface, #fff);
  display: none;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  overflow: hidden;
}
.all-photos-gallery.active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}
.apg-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  flex-shrink: 0;
  background: var(--surface, #fff);
}
.apg-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: none;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text, #1e293b);
  transition: all 0.2s;
}
.apg-back:hover {
  background: var(--hover, #f1f5f9);
}
.apg-back svg { flex-shrink: 0; }
.apg-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text, #1e293b);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.apg-count {
  font-size: 0.85rem;
  color: var(--muted, #64748b);
  white-space: nowrap;
}

/* Apply & Contact buttons in gallery header */
.apg-cta-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 8px;
}
.apg-apply-btn,
.apg-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.apg-apply-btn {
  background: var(--primary, #2563eb);
  color: #fff;
}
.apg-apply-btn:hover {
  background: var(--primary-dark, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}
.apg-contact-btn {
  background: var(--surface, #fff);
  color: var(--primary, #2563eb);
  border: 1.5px solid var(--primary, #2563eb);
}
.apg-contact-btn:hover {
  background: var(--primary, #2563eb);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
[data-theme="dark"] .apg-apply-btn {
  background: #3b82f6;
}
[data-theme="dark"] .apg-apply-btn:hover {
  background: #2563eb;
}
[data-theme="dark"] .apg-contact-btn {
  background: transparent;
  color: #60a5fa;
  border-color: #60a5fa;
}
[data-theme="dark"] .apg-contact-btn:hover {
  background: #3b82f6;
  color: #fff;
  border-color: #3b82f6;
}

.apg-grid {
  flex: 1;
  overflow-y: auto;
  padding: 32px 48px 48px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
  align-content: start;
  background: var(--bg, #f1f5f9);
}
.apg-item {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: #0b0f18;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.apg-item:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
.apg-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.2s;
}
.apg-item:hover img {
  filter: brightness(0.92);
}
.apg-item video {
  border-radius: 8px;
}
.apg-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  pointer-events: none;
}
/* First photo same size as rest for clean uniform grid */

/* Dark theme */
[data-theme="dark"] .apg-header {
  background: var(--surface, #1e293b);
  border-color: var(--border, #334155);
}
[data-theme="dark"] .apg-back { border-color: #475569; }
[data-theme="dark"] .apg-back:hover { background: #334155; }

/* Mobile */
@media (max-width: 600px) {
  .apg-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    padding: 20px 16px 36px;
    gap: 20px;
  }
  .apg-header { padding: 12px 16px; flex-wrap: wrap; }
  .apg-back-text { display: none; }
  .apg-title { font-size: 0.95rem; }
  .apg-cta-buttons { order: 10; width: 100%; justify-content: center; margin-left: 0; margin-top: 8px; }
  .apg-apply-btn, .apg-contact-btn { flex: 1; justify-content: center; padding: 10px 12px; font-size: 0.8rem; }
}

  /* ════════════════════════════════════════════
     INFO SECTION — Preview collage style: Title → Location → Price → Stats
     ════════════════════════════════════════════ */
  .modal-info {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 32px 40px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 0;
    overflow-y: visible;
  }

  /* ── ROW 1: HEADER — title, location, price, stats ── */
  .preview-header {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 0 32px 24px 0;
    margin-bottom: 0;
    border-bottom: none;
    align-self: start;
  }
  .modal-info h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.35;
    margin-top: 0;
    order: 0;
  }
  .modal-location {
    font-size: 0.9rem;
    order: 1;
  }
  .modal-price {
    font-size: 1.8rem;
    font-weight: 800;
    order: 2;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-top: 4px;
  }

  /* ── ROW 2: STATS — clean row below header ── */
  .preview-stats {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: row;
    gap: 0;
    margin: 0;
    padding: 16px 0;
    border-top: 1px solid var(--border, #e2e8f0);
    border-bottom: 1px solid var(--border, #e2e8f0);
    align-self: start;
    margin-right: 32px;
  }
  .preview-stat {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    background: transparent !important;
    border-radius: 0;
    border-right: none;
  }
  .preview-stat:first-child { padding-left: 0; }
  .preview-stat:hover {
    background: transparent !important;
    transform: none;
    box-shadow: none;
  }
  .preview-stat svg {
    display: block;
    width: 18px; height: 18px;
    padding: 0;
    background: none;
    color: var(--text-secondary, #94a3b8);
    flex-shrink: 0;
    box-sizing: content-box;
  }
  .preview-stat span {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
  }
  .preview-stat small {
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--text-secondary, #475569);
    text-transform: none;
    letter-spacing: 0;
  }

  /* ── ROW 1+: CTA — right sidebar card ── */
  .modal-cta {
    grid-column: 2;
    grid-row: 1 / 20;
    position: sticky;
    top: 16px;
    align-self: start;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    margin-left: 24px;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    background: var(--surface);
    border-top: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .modal-cta.cta-hidden {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
  }
  [data-theme="dark"] .modal-cta {
    box-shadow: 0 2px 16px rgba(0,0,0,0.3);
  }
  .modal-cta .btn-primary {
    width: 100%;
    justify-content: center;
    padding: 15px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
  }
  .modal-cta .btn-primary.apply {
    padding: 16px;
    font-size: 1rem;
    border-radius: 10px;
  }
  /* Outline style for secondary CTA buttons */
  .modal-cta .btn-primary.contact,
  .modal-cta .btn-primary.phone {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
  }
  .modal-cta .btn-primary.contact:hover,
  .modal-cta .btn-primary.phone:hover {
    background: var(--primary);
    color: #fff;
  }

  /* ── Divider below header row ── */
  .preview-interest-btn {
    grid-column: 1;
    margin-top: 20px;
  }

  /* ── CONTENT SECTIONS — span left column ── */
  .preview-section {
    grid-column: 1;
    margin-bottom: 24px;
    padding-top: 24px;
  }
  .preview-section-label {
    font-size: 1rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
    margin-bottom: 16px;
  }
  .preview-section-label svg {
    display: none;
  }

  /* Description text */
  .desc-overview {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-secondary);
  }
  .desc-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* Features — wrap nicely */
  .modal-features {
    gap: 8px;
  }
  .modal-features .feature-pill {
    padding: 10px 16px;
    font-size: 0.88rem;
    border-radius: 10px;
  }
  .modal-features .feature-pill svg {
    width: 16px;
    height: 16px;
  }

  /* ── Move-in estimate — regular left section (not sidebar) ── */
  .preview-section:nth-of-type(3) {
    grid-column: 1;
  }
  .move-in-estimate {
    padding: 20px 24px;
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    max-width: 480px;
  }
  [data-theme="dark"] .move-in-estimate {
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  }
  .estimate-label { font-size: 0.88rem; }
  .estimate-value { font-size: 0.95rem; }
  .estimate-total .estimate-value { font-size: 1.2rem; }

  /* ── MAP — left column ── */
  .map-container {
    grid-column: 1;
    margin-top: 8px;
  }
  .modal-map {
    height: 300px;
    border-radius: 14px;
  }

  /* ── SUGGESTIONS — full width all columns ── */
  .preview-suggestions {
    grid-column: 1 / -1;
    margin-top: 32px;
    padding-top: 28px;
  }
  .suggestion-card { width: 240px; }
  .suggestion-img { height: 140px; }
  .suggestions-scroll { gap: 16px; }
}

/* end of desktop modal */

/* ============================================
   900px BREAKPOINT
   ============================================ */
@media (max-width: 900px) {
  .modal-main { min-height: 260px; border-radius: 0; }
  .modal-info { padding: 20px 16px 0; max-width: none; margin: 0 auto; }
  .modal-gallery img { width: 80px; height: 58px; flex-shrink: 0; border-radius: 10px; }
  .modal-gallery .gallery-video-thumb { width: 80px; height: 58px; flex-shrink: 0; border-radius: 10px; }
  .preview-stats { margin-bottom: 12px; }
  .preview-stat { padding: 8px 6px; border-radius: 12px; }
  .preview-stat span { font-size: 1rem; }
  .move-in-estimate { padding: 12px 14px; }
  .nav-links { display: none; }
  .mobile-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .logo { font-size: 1.2rem; }
  .logo img.site-logo-img { height: 40px; max-height: 40px; }
  header.nav-header.scrolled { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 var(--border), 0 4px 20px rgba(15,23,42,0.08); }
  .nav-admin { display: none !important; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem !important; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* Mobile nav overlay */
.mobile-nav-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; justify-content: flex-end; background: rgba(15,23,42,0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
.mobile-nav-overlay.open { opacity: 1; visibility: visible; }
.mobile-nav-inner { width: 80%; max-width: 340px; background: var(--surface); height: 100%; padding: 20px; box-shadow: -10px 0 40px rgba(15,23,42,0.15); display: flex; flex-direction: column; gap: 16px; }
.mobile-close { background: transparent; border: none; font-size: 2rem; align-self: flex-end; cursor: pointer; color: var(--text-muted); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; transition: background 0.2s; }
.mobile-close:hover { background: var(--border-light); }
.mobile-nav-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.mobile-nav-list a { display: flex; align-items: center; padding: 14px 16px; font-size: 1rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-weight: 600; transition: background var(--transition); min-height: 48px; }
.mobile-nav-list a:hover { background: var(--border-light); }

/* Ensure login modal appears above mobile overlay and other modals */
#loginModal { z-index: 5000; }

.appointment-timestamp { font-size: 0.8rem; color: #9ca3af; text-align: right; margin-top: 12px; }

    /* ============================================
       ADMIN MODAL — Apple-Inspired Elegant Dashboard
       ============================================ */
    .admin-modal-content {
      max-width: 1400px;
      margin: 0 auto;
      background: #1c1c1e;
      border-radius: 0;
      box-shadow: none;
      padding: 0;
      overflow: hidden;
    }
    .admin-modal-content .close {
      top: 14px;
      right: 14px;
      z-index: 10;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      color: #a1a1a6;
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s ease;
      border: none;
    }
    .admin-modal-content .close:hover { 
      background: rgba(255,59,48,0.2); 
      color: #ff453a;
    }

    /* Admin Header — Clean Apple Style */
    .admin-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 24px;
      background: rgba(29, 29, 31, 0.72);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 0.5px solid rgba(255,255,255,0.08);
      color: #fff;
    }
    .admin-header-left { display: flex; align-items: center; gap: 14px; }
    .admin-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, #0a84ff, #5e5ce6);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
    .admin-avatar svg { width: 22px; height: 22px; }
    .admin-header h2 { 
      margin: 0; 
      font-size: 1.25rem; 
      font-weight: 600; 
      color: #f5f5f7;
      letter-spacing: -0.02em;
    }
    .admin-subtitle { margin: 2px 0 0; font-size: 0.82rem; color: #86868b; font-weight: 400; }
    
    /* Role badges — Apple Pill Style */
    .role-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 0.65rem; 
      font-weight: 600; 
      padding: 3px 8px;
      border-radius: 980px; 
      margin-left: 10px; 
      vertical-align: middle; 
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .role-owner {
      background: rgba(255,159,10,0.15); 
      color: #ff9f0a;
    }
    .role-admin {
      background: rgba(10,132,255,0.12); 
      color: #64d2ff;
    }
    
    /* Logout Button — Minimal Apple */
    .admin-logout-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: transparent;
      border: none;
      color: #86868b;
      padding: 8px 14px;
      border-radius: 980px;
      font-weight: 500;
      font-size: 0.82rem;
      cursor: pointer;
      transition: all .2s ease;
    }
    .admin-logout-btn:hover { 
      background: rgba(255,59,48,0.1);
      color: #ff453a;
    }

    /* Settings form — Apple Card */
    .settings-form-card {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 24px;
      padding: 24px;
      background: rgba(44,44,46,0.5);
      -webkit-backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border-radius: 14px;
      margin: 20px;
      border: 0.5px solid rgba(255,255,255,0.06);
      align-items: start;
    }
    @media (max-width: 900px) {
      .settings-form-card { grid-template-columns: 1fr; }
    }

    .settings-form-card .form-section { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
    .settings-form-card .form-section label { 
      font-weight: 500; 
      color: #e5e5e7; 
      font-size: 0.88rem;
      letter-spacing: -0.01em;
    }
    .settings-form-card .form-section input[type="text"],
    .settings-form-card .form-section input[type="url"],
    .settings-form-card .form-section textarea,
    .settings-form-card .form-section input[type="file"] {
      padding: 10px 14px;
      border-radius: 8px;
      border: 0.5px solid rgba(255,255,255,0.08);
      background: rgba(118,118,128,0.12);
      font-size: 0.95rem;
      color: #f5f5f7;
      outline: none;
      transition: all 0.2s ease;
    }
    .settings-form-card .form-section input:focus,
    .settings-form-card .form-section textarea:focus { 
      box-shadow: 0 0 0 3px rgba(10,132,255,0.25); 
      border-color: #0a84ff; 
    }

    /* Logo preview area */
    #settings-logo-preview { 
      display:flex; 
      align-items:center; 
      gap:14px; 
      padding:16px; 
      border-radius:12px; 
      background: rgba(118,118,128,0.08); 
      border: 0.5px dashed rgba(255,255,255,0.12); 
    }
    #settings-logo-preview img { max-height:80px; border-radius:8px; display:block; }
    #settings-logo-preview .logo-meta { color: #86868b; font-size:0.88rem; }

    /* Form actions styling */
    .settings-form-card .form-actions { 
      display:flex; 
      gap:10px; 
      justify-content:flex-end; 
      padding:16px 0 0; 
      grid-column:1/-1;
      border-top: 0.5px solid rgba(255,255,255,0.06);
      margin-top: 8px;
    }
    .settings-form-card .form-actions .btn-secondary { 
      background: rgba(118,118,128,0.12); 
      color: #e5e5e7; 
      border: none; 
      padding: 10px 18px;
      border-radius: 980px;
      font-weight: 500;
      font-size: 0.88rem;
      transition: all .2s;
    }
    .settings-form-card .form-actions .btn-secondary:hover {
      background: rgba(118,118,128,0.2);
    }
    .settings-form-card .form-actions .btn-primary { 
      padding: 10px 22px;
      border-radius: 980px;
      font-weight: 500;
      font-size: 0.88rem;
      background: #0a84ff;
      color: #fff;
      border: none;
      transition: all .2s;
    }
    .settings-form-card .form-actions .btn-primary:hover {
      background: #0077ed;
      transform: scale(1.02);
    }

    /* Feedback */
    #settings-feedback { margin:12px 20px; color:var(--danger); }

    /* Admin Tabs — Apple Segmented Control */
    .admin-tabs {
      display: flex;
      gap: 2px;
      background: rgba(29,29,31,0.72);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 0.5px solid rgba(255,255,255,0.06);
      padding: 0 20px;
      margin-bottom: 0;
      flex-wrap: wrap;
      overflow: visible;
      position: relative;
      z-index: 50;
    }
    .admin-tabs::-webkit-scrollbar { display: none; }
    .tab-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 12px 14px;
      border: none;
      background: transparent;
      color: #86868b;
      font-weight: 400;
      font-size: 0.82rem;
      cursor: pointer;
      border-radius: 0;
      border-bottom: 2px solid transparent;
      transition: all 0.2s ease;
      white-space: nowrap;
      flex-shrink: 0;
      letter-spacing: -0.01em;
    }
    .tab-btn svg { 
      width: 16px; 
      height: 16px; 
      color: #636366; 
      transition: all .2s; 
    }
    .tab-btn.active { 
      color: #f5f5f7; 
      background: transparent;
      border-bottom-color: #0a84ff;
    }
    .tab-btn.active svg { color: #0a84ff; }
    .tab-btn:hover:not(.active) { 
      color: #a1a1a6;
      background: transparent;
    }
    .tab-btn:hover:not(.active) svg { color: #a1a1a6; }
    .tab-divider { 
      width: 0.5px; 
      height: 20px; 
      background: rgba(255,255,255,0.06); 
      align-self: center; 
      margin: 0 4px; 
      flex-shrink: 0; 
    }

    /* General dropdown menu */
    .tab-dropdown {
      position: relative;
      align-self: stretch;
      display: flex;
    }
    .tab-dropdown-trigger {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .tab-dropdown-arrow {
      transition: transform 0.2s;
      margin-left: 2px;
    }
    .tab-dropdown.open .tab-dropdown-arrow {
      transform: rotate(180deg);
    }
    .tab-dropdown-menu {
      display: none;
      position: absolute;
      top: 100%;
      right: 0;
      min-width: 200px;
      background: rgba(44,44,46,0.95);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      backdrop-filter: saturate(180%) blur(20px);
      border: 0.5px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.5);
      padding: 4px;
      z-index: 1000;
      animation: dropdownSlide 0.15s ease;
    }
    @keyframes dropdownSlide {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .tab-dropdown.open .tab-dropdown-menu {
      display: block;
    }
    .tab-dropdown-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 8px 12px;
      border: none;
      background: transparent;
      color: #a1a1a6;
      font-size: 0.82rem;
      font-weight: 400;
      cursor: pointer;
      border-radius: 8px;
      transition: all 0.15s;
      text-align: left;
    }
    .tab-dropdown-item:hover {
      background: rgba(10,132,255,0.12);
      color: #f5f5f7;
    }
    .tab-dropdown-item:hover svg {
      color: #0a84ff;
    }
    .tab-dropdown-item svg {
      width: 16px;
      height: 16px;
      color: #636366;
      flex-shrink: 0;
      transition: color 0.15s;
    }
    .tab-dropdown-item.active {
      background: rgba(10,132,255,0.15);
      color: #f5f5f7;
    }
    .tab-dropdown-item.active svg {
      color: #0a84ff;
    }

    /* ── NA Mode Toggle ── */
    .na-mode-toggle {
      display: flex;
      gap: 0;
      margin-bottom: 18px;
      background: rgba(118,118,128,0.12);
      border-radius: 10px;
      padding: 2px;
      border: none;
    }
    .na-mode-btn {
      flex: 1;
      padding: 8px 14px;
      border: none;
      background: transparent;
      color: #86868b;
      font-size: 0.82rem;
      font-weight: 500;
      cursor: pointer;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.2s;
    }
    .na-mode-btn:hover { color: #a1a1a6; }
    .na-mode-btn.active {
      background: rgba(255,255,255,0.12);
      color: #f5f5f7;
      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    .na-mode-btn.active svg { color: #0a84ff; }

    /* ── New Available Form ── */
    .na-avail-header {
      margin-bottom: 16px;
    }
    .na-avail-header h4 {
      color: #f5f5f7;
      font-size: 0.95rem;
      font-weight: 600;
      margin: 0 0 4px;
    }
    .na-avail-header p {
      color: #86868b;
      font-size: 0.78rem;
      margin: 0;
    }
    .na-avail-form {
      background: rgba(44,44,46,0.4);
      border: 0.5px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      padding: 18px;
    }
    .na-avail-row {
      display: flex;
      gap: 12px;
      margin-bottom: 12px;
    }
    .na-avail-field {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .na-avail-field label {
      color: #86868b;
      font-size: 0.72rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .na-avail-field-sm {
      flex: 0 0 120px;
    }
    .na-avail-actions {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 4px;
    }
    .na-avail-feedback {
      font-size: 0.82rem;
      font-weight: 500;
    }

    /* Hide mobile-only elements on desktop */
    .admin-mobile-bar { display: none; }
    .admin-mobile-menu { display: none; }

    /* Notification badge on admin tabs */
    .notif-badge {
      position: absolute;
      top: 2px;
      right: -2px;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      font-size: 0.65rem;
      font-weight: 600;
      line-height: 16px;
      text-align: center;
      color: #fff;
      background: #ff453a;
      border-radius: 980px;
      pointer-events: none;
      animation: badge-pop .3s ease;
    }
    @keyframes badge-pop {
      0% { transform: scale(0); }
      60% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }

    .tab-content { 
      display: none; 
      padding: 24px 28px 28px; 
      background: #1c1c1e;
      flex: 1;
      min-height: 400px;
    }
    .tab-content.active { display: block; }

    /* Stat Cards — Apple Metrics */
    .admin-stats { 
      display: grid; 
      grid-template-columns: repeat(3, 1fr); 
      gap: 12px; 
      margin-bottom: 24px; 
    }
    .stat-card {
      background: rgba(44,44,46,0.6);
      -webkit-backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      padding: 20px;
      border-radius: 14px;
      border: 0.5px solid rgba(255,255,255,0.06);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      gap: 14px;
      transition: all 0.25s ease;
    }
    .stat-card:hover {
      background: rgba(44,44,46,0.8);
      border-color: rgba(255,255,255,0.1);
    }
    .stat-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
    }
    .stat-total::before { background: #0a84ff; }
    .stat-today::before { background: #ff9f0a; }
    .stat-upcoming::before { background: #30d158; }
    .stat-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .stat-total .stat-icon { 
      background: rgba(10,132,255,0.12); 
      color: #0a84ff; 
    }
    .stat-today .stat-icon { 
      background: rgba(255,159,10,0.12); 
      color: #ff9f0a; 
    }
    .stat-upcoming .stat-icon { 
      background: rgba(48,209,88,0.12); 
      color: #30d158; 
    }
    .stat-number { 
      font-size: 2rem; 
      font-weight: 700; 
      color: #f5f5f7; 
      line-height: 1;
      letter-spacing: -0.03em;
    }
    .stat-label { 
      font-size: 0.78rem; 
      color: #86868b; 
      font-weight: 400; 
      margin-top: 2px;
      letter-spacing: -0.01em;
    }

    /* Admin Controls / Search — Apple Search */
    .admin-controls { 
      display: flex; 
      gap: 10px; 
      margin-bottom: 24px; 
      align-items: center; 
      flex-wrap: wrap; 
    }
    .admin-search-wrap {
      flex: 1;
      min-width: 240px;
      position: relative;
    }
    .admin-search-wrap .search-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #636366;
      pointer-events: none;
    }
    .admin-search-wrap input {
      width: 100%;
      padding: 10px 14px 10px 38px;
      border-radius: 10px;
      border: none;
      background: rgba(118,118,128,0.12);
      color: #f5f5f7;
      font-size: 0.92rem;
      transition: all .2s ease;
      box-sizing: border-box;
    }
    .admin-search-wrap input::placeholder { color: #636366; }
    .admin-search-wrap input:focus {
      outline: none;
      background: rgba(118,118,128,0.2);
      box-shadow: 0 0 0 3px rgba(10,132,255,0.25);
    }
    .admin-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
    .btn-admin-action {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 8px 14px;
      border-radius: 980px;
      border: none;
      background: rgba(118,118,128,0.12);
      color: #a1a1a6;
      font-weight: 500;
      font-size: 0.82rem;
      cursor: pointer;
      transition: all .2s;
    }
    .btn-admin-action:hover { background: rgba(118,118,128,0.2); color: #f5f5f7; }
    .btn-admin-action.refresh:hover { color: #0a84ff; background: rgba(10,132,255,0.12); }
    .btn-admin-action.export:hover { color: #30d158; background: rgba(48,209,88,0.12); }
    .btn-admin-action.danger { color: #ff453a; }
    .btn-admin-action.danger:hover { background: rgba(255,69,58,0.12); }

    /* Admin Card Grid */
    .admin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; max-height: 70vh; overflow-y: auto; padding: 4px; }
    .admin-cards::-webkit-scrollbar { width: 4px; }
    .admin-cards::-webkit-scrollbar-track { background: transparent; }
    .admin-cards::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

    /* ============================================
       APPOINTMENTS v3 — Apple-Inspired Design
       ============================================ */

    /* Container */
    #appointments-tab {
      background: transparent;
      border-radius: 0;
      padding: 0;
      min-height: 80vh;
    }

    /* Header Banner — Clean Apple */
    .appt3-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(44,44,46,0.5);
      border: 0.5px solid rgba(255,255,255,0.06);
      border-radius: 14px;
      padding: 20px 24px;
      margin-bottom: 16px;
      position: relative;
      overflow: hidden;
    }
    .appt3-header::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(94,92,230,0.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .appt3-header-left {
      display: flex;
      align-items: center;
      gap: 14px;
      z-index: 1;
    }
    .appt3-header-icon {
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, #5e5ce6, #bf5af2);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .appt3-header-icon svg { color: #fff; }
    .appt3-header-text h2 {
      margin: 0;
      font-size: 1.3rem;
      font-weight: 600;
      color: #f5f5f7;
      letter-spacing: -0.02em;
    }
    .appt3-header-text p {
      margin: 2px 0 0;
      font-size: 0.82rem;
      color: #86868b;
    }
    .appt3-header-actions {
      display: flex;
      gap: 6px;
      z-index: 1;
    }
    .appt3-action-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: rgba(118,118,128,0.12);
      color: #a1a1a6;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
    }
    .appt3-action-btn:hover {
      background: rgba(118,118,128,0.24);
      color: #f5f5f7;
    }
    .appt3-action-btn.danger:hover { background: rgba(255,69,58,0.15); color: #ff453a; }

    /* Stats Grid — Apple Metric Cards */
    .appt3-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 16px;
    }
    .appt3-stat-card {
      background: rgba(44,44,46,0.5);
      border: 0.5px solid rgba(255,255,255,0.06);
      border-radius: 14px;
      padding: 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: all 0.2s;
      cursor: default;
    }
    .appt3-stat-card:hover {
      background: rgba(44,44,46,0.7);
    }
    .appt3-stat-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .appt3-stat-icon.total { background: rgba(94,92,230,0.12); color: #bf5af2; }
    .appt3-stat-icon.today { background: rgba(10,132,255,0.12); color: #0a84ff; }
    .appt3-stat-icon.upcoming { background: rgba(48,209,88,0.12); color: #30d158; }
    .appt3-stat-icon.pending { background: rgba(255,159,10,0.12); color: #ff9f0a; }
    .appt3-stat-content { flex: 1; }
    .appt3-stat-value {
      font-size: 1.6rem;
      font-weight: 700;
      color: #f5f5f7;
      line-height: 1;
      letter-spacing: -0.03em;
    }
    .appt3-stat-label {
      font-size: 0.72rem;
      font-weight: 500;
      color: #86868b;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-top: 3px;
    }

    /* Toolbar - Search & Filters */
    .appt3-toolbar {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .appt3-search {
      flex: 1;
      min-width: 280px;
      position: relative;
    }
    .appt3-search svg {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: #64748b;
      pointer-events: none;
    }
    .appt3-search input {
      width: 100%;
      padding: 10px 14px 10px 42px;
      background: rgba(118,118,128,0.12);
      border: none;
      border-radius: 10px;
      font-size: 0.92rem;
      color: #f5f5f7;
      font-family: inherit;
      transition: all 0.2s;
    }
    .appt3-search input::placeholder { color: #636366; }
    .appt3-search input:focus {
      outline: none;
      background: rgba(118,118,128,0.2);
      box-shadow: 0 0 0 3px rgba(10,132,255,0.25);
    }
    .appt3-filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .appt3-filter-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      border-radius: 980px;
      border: none;
      background: rgba(118,118,128,0.12);
      font-size: 0.82rem;
      font-weight: 500;
      color: #a1a1a6;
      cursor: pointer;
      transition: all 0.2s;
      font-family: inherit;
    }
    .appt3-filter-btn:hover {
      background: rgba(118,118,128,0.2);
      color: #f5f5f7;
    }
    .appt3-filter-btn.active {
      background: #0a84ff;
      color: #fff;
      border-color: transparent;
    }
    .appt3-filter-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
    .appt3-filter-dot.pending { background: #ff9f0a; }
    .appt3-filter-dot.confirmed { background: #30d158; }
    .appt3-filter-dot.cancelled { background: #ff453a; }
    .appt3-filter-btn.active .appt3-filter-dot { background: rgba(255,255,255,0.7); }

    /* Appointments List */
    .appt3-list {
      display: flex;
      flex-direction: column;
      gap: 0;
      max-height: calc(100vh - 340px);
      overflow-y: auto;
      padding: 12px 4px;
    }
    .appt3-list::-webkit-scrollbar { width: 6px; }
    .appt3-list::-webkit-scrollbar-track { background: transparent; }
    .appt3-list::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.3); border-radius: 3px; }

    /* Appointment Card */
    .appt3-card {
      display: flex;
      align-items: stretch;
      background: rgba(44,44,46,0.5);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 14px;
      overflow: hidden;
      transition: all 0.2s;
      position: relative;
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
      margin-bottom: 32px;
    }
    .appt3-card:last-child {
      margin-bottom: 0;
    }
    .appt3-card:hover {
      background: rgba(44,44,46,0.7);
      border-color: rgba(255,255,255,0.16);
      box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    }

    /* Status Bar */
    .appt3-card-bar {
      width: 5px;
      flex-shrink: 0;
    }
    .appt3-card-bar.pending { background: #ff9f0a; }
    .appt3-card-bar.confirmed { background: #30d158; }
    .appt3-card-bar.cancelled { background: #ff453a; }

    /* Avatar */
    .appt3-avatar {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 1.3rem;
      color: #fff;
      flex-shrink: 0;
      margin: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    /* Card Body */
    .appt3-card-body {
      flex: 1;
      padding: 16px 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
    }
    .appt3-card-header {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .appt3-name {
      font-weight: 600;
      font-size: 1.05rem;
      color: #f5f5f7;
    }
    .appt3-status-badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: 980px;
      font-size: 0.68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .appt3-status-badge.pending { background: rgba(255,159,10,0.12); color: #ff9f0a; border: none; }
    .appt3-status-badge.confirmed { background: rgba(48,209,88,0.12); color: #30d158; border: none; }
    .appt3-status-badge.cancelled { background: rgba(255,69,58,0.12); color: #ff453a; border: none; }

    /* Property */
    .appt3-property {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.9rem;
      font-weight: 500;
      color: #0a84ff;
    }
    .appt3-property svg { color: #64d2ff; flex-shrink: 0; }

    /* Info Pills */
    .appt3-info-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 4px;
    }
    .appt3-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 8px;
      background: rgba(118,118,128,0.08);
      border: none;
      font-size: 0.78rem;
      font-weight: 400;
      color: #a1a1a6;
    }
    .appt3-pill svg { color: #636366; flex-shrink: 0; }
    .appt3-pill.email { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Message */
    .appt3-message {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 10px 12px;
      background: rgba(94,92,230,0.06);
      border-radius: 10px;
      border-left: 2px solid #5e5ce6;
      font-size: 0.82rem;
      color: #a1a1a6;
      font-style: italic;
      line-height: 1.5;
      margin-top: 4px;
      margin-right: 16px;
    }
    .appt3-message svg { color: #5e5ce6; flex-shrink: 0; margin-top: 2px; }

    /* Actions Panel */
    .appt3-card-actions {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      gap: 10px;
      padding: 16px 20px;
      flex-shrink: 0;
      min-width: 160px;
      background: rgba(28,28,30,0.3);
      border-left: 0.5px solid rgba(255,255,255,0.04);
    }
    .appt3-select {
      padding: 8px 12px;
      border-radius: 8px;
      border: none;
      font-size: 0.82rem;
      font-weight: 500;
      color: #e5e5e7;
      background: rgba(118,118,128,0.12);
      cursor: pointer;
      font-family: inherit;
      width: 100%;
      transition: all 0.2s;
    }
    .appt3-select:focus {
      outline: none;
      border-color: #0a84ff;
      box-shadow: 0 0 0 3px rgba(10,132,255,0.25);
    }
    .appt3-btn-group {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .appt3-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: rgba(118,118,128,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #a1a1a6;
      transition: all 0.2s;
    }
    .appt3-btn:hover { background: rgba(118,118,128,0.24); }
    .appt3-btn.call:hover { background: rgba(10,132,255,0.15); color: #0a84ff; }
    .appt3-btn.sms:hover { background: rgba(94,92,230,0.15); color: #5e5ce6; }
    .appt3-btn.wa:hover { background: rgba(48,209,88,0.15); color: #30d158; }
    .appt3-btn.email:hover { background: rgba(255,159,10,0.15); color: #ff9f0a; }
    .appt3-btn.delete:hover { background: rgba(255,69,58,0.15); color: #ff453a; }

    /* Confirm Button */
    .appt3-confirm-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 14px;
      border-radius: 980px;
      border: none;
      background: #30d158;
      color: #fff;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      font-family: inherit;
    }
    .appt3-confirm-btn:hover {
      background: #28c04e;
      transform: scale(1.02);
    }
    .appt3-confirmed-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      border-radius: 980px;
      background: rgba(48,209,88,0.12);
      color: #30d158;
      font-size: 0.68rem;
      font-weight: 600;
      border: none;
    }
    .appt3-timestamp {
      font-size: 0.68rem;
      color: #636366;
      text-align: right;
    }

    /* Empty State */
    .appt3-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 24px;
      text-align: center;
    }
    .appt3-empty-icon {
      width: 64px;
      height: 64px;
      background: rgba(118,118,128,0.12);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #636366;
      margin-bottom: 16px;
    }
    .appt3-empty h3 {
      margin: 0 0 6px;
      font-size: 1.15rem;
      font-weight: 600;
      color: #f5f5f7;
    }
    .appt3-empty p {
      margin: 0;
      font-size: 0.88rem;
      color: #86868b;
      max-width: 320px;
    }

    /* Loading State */
    .appt3-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 60px;
      color: #94a3b8;
    }
    .appt3-spinner {
      width: 24px;
      height: 24px;
      border: 3px solid rgba(99,102,241,0.2);
      border-top-color: #6366f1;
      border-radius: 50%;
      animation: appt3spin 0.8s linear infinite;
    }
    @keyframes appt3spin { to { transform: rotate(360deg); } }

    /* Legacy class mappings for backward compatibility */
    .appt2-banner { display: none; }
    .appt2-stats-strip { display: none; }
    .appt2-toolbar { display: none; }
    .appt2-list { display: none; }

    /* ══════════════════════════════════════════════════════════════════
       ADAPTIVE LIGHT MODE — Apple-Inspired
       All admin sections get light overrides when body.admin-light
       ══════════════════════════════════════════════════════════════════ */

    /* ── Admin Modal + Header ── */
    body.admin-light .admin-modal-content {
      background: #f5f5f7;
    }
    body.admin-light .admin-modal-content .close {
      background: rgba(0,0,0,0.06);
      color: #6e6e73;
    }
    body.admin-light .admin-modal-content .close:hover {
      background: rgba(255,59,48,0.12);
      color: #ff3b30;
    }
    body.admin-light .admin-header {
      background: rgba(255,255,255,0.72);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      backdrop-filter: saturate(180%) blur(20px);
      border-bottom-color: rgba(0,0,0,0.1);
    }
    body.admin-light .admin-header h2 { color: #1d1d1f; }
    body.admin-light .admin-subtitle { color: #6e6e73; }
    body.admin-light .admin-avatar {
      background: linear-gradient(135deg, #007aff, #5856d6);
    }

    /* Role badges */
    body.admin-light .role-owner {
      background: rgba(255,149,0,0.12);
      color: #c77800;
    }
    body.admin-light .role-admin {
      background: rgba(0,122,255,0.1);
      color: #0066cc;
    }

    /* Logout */
    body.admin-light .admin-logout-btn { color: #6e6e73; }
    body.admin-light .admin-logout-btn:hover {
      background: rgba(255,59,48,0.08);
      color: #ff3b30;
    }

    /* ── Settings form ── */
    body.admin-light .settings-form-card {
      background: #ffffff;
      border-color: rgba(0,0,0,0.06);
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    body.admin-light .settings-form-card .form-section label { color: #3a3a3c; }
    body.admin-light .settings-form-card .form-section input[type="text"],
    body.admin-light .settings-form-card .form-section input[type="url"],
    body.admin-light .settings-form-card .form-section textarea,
    body.admin-light .settings-form-card .form-section input[type="file"] {
      background: rgba(142,142,147,0.12);
      border-color: rgba(0,0,0,0.08);
      color: #1d1d1f;
    }
    body.admin-light .settings-form-card .form-section input:focus,
    body.admin-light .settings-form-card .form-section textarea:focus {
      box-shadow: 0 0 0 3px rgba(0,122,255,0.2);
      border-color: #007aff;
    }
    body.admin-light .settings-form-card .form-actions {
      border-top-color: rgba(0,0,0,0.06);
    }
    body.admin-light .settings-form-card .form-actions .btn-secondary {
      background: rgba(142,142,147,0.12);
      color: #3a3a3c;
    }
    body.admin-light .settings-form-card .form-actions .btn-secondary:hover {
      background: rgba(142,142,147,0.2);
    }
    body.admin-light .settings-form-card .form-actions .btn-primary {
      background: #007aff;
    }
    body.admin-light .settings-form-card .form-actions .btn-primary:hover {
      background: #0066d6;
    }
    body.admin-light #settings-logo-preview {
      background: rgba(142,142,147,0.06);
      border-color: rgba(0,0,0,0.08);
    }
    body.admin-light #settings-logo-preview .logo-meta { color: #6e6e73; }

    /* ── Tabs ── */
    body.admin-light .admin-tabs {
      background: rgba(255,255,255,0.72);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      backdrop-filter: saturate(180%) blur(20px);
      border-bottom-color: rgba(0,0,0,0.08);
    }
    body.admin-light .tab-btn { color: #6e6e73; }
    body.admin-light .tab-btn svg { color: #aeaeb2; }
    body.admin-light .tab-btn.active {
      color: #1d1d1f;
      border-bottom-color: #007aff;
    }
    body.admin-light .tab-btn.active svg { color: #007aff; }
    body.admin-light .tab-btn:hover:not(.active) { color: #3a3a3c; }
    body.admin-light .tab-btn:hover:not(.active) svg { color: #6e6e73; }
    body.admin-light .tab-divider { background: rgba(0,0,0,0.06); }

    /* Dropdown */
    body.admin-light .tab-dropdown-menu {
      background: rgba(255,255,255,0.95);
      border-color: rgba(0,0,0,0.1);
      box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    }
    body.admin-light .tab-dropdown-item { color: #6e6e73; }
    body.admin-light .tab-dropdown-item svg { color: #aeaeb2; }
    body.admin-light .tab-dropdown-item:hover {
      background: rgba(0,122,255,0.08);
      color: #1d1d1f;
    }
    body.admin-light .tab-dropdown-item:hover svg { color: #007aff; }
    body.admin-light .tab-dropdown-item.active {
      background: rgba(0,122,255,0.1);
      color: #1d1d1f;
    }
    body.admin-light .tab-dropdown-item.active svg { color: #007aff; }

    /* ── NA Mode Toggle ── */
    body.admin-light .na-mode-toggle { background: rgba(142,142,147,0.12); }
    body.admin-light .na-mode-btn { color: #6e6e73; }
    body.admin-light .na-mode-btn:hover { color: #3a3a3c; }
    body.admin-light .na-mode-btn.active {
      background: #ffffff;
      color: #1d1d1f;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }
    body.admin-light .na-mode-btn.active svg { color: #007aff; }

    /* ── New Available Form ── */
    body.admin-light .na-avail-header h4 { color: #1d1d1f; }
    body.admin-light .na-avail-header p { color: #6e6e73; }
    body.admin-light .na-avail-form {
      background: #ffffff;
      border-color: rgba(0,0,0,0.06);
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    body.admin-light .na-avail-field label { color: #6e6e73; }

    /* ── NA Add Form (Not Available) ── */
    body.admin-light .na-add-form {
      background: #ffffff;
      border-color: rgba(0,0,0,0.08);
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    body.admin-light .na-input {
      background: #ffffff;
      border-color: rgba(0,0,0,0.12);
      color: #1d1d1f;
    }
    body.admin-light .na-input::placeholder { color: #aeaeb2; }
    body.admin-light .na-input:focus {
      border-color: #006AFF;
      box-shadow: 0 0 0 3px rgba(0,106,255,0.1);
    }
    body.admin-light .na-hint { color: #6e6e73; }
    body.admin-light .na-item {
      background: #ffffff;
      border-color: rgba(0,0,0,0.06);
    }
    body.admin-light .na-item:hover { background: #f9fafb; }
    body.admin-light .na-item-address { color: #1d1d1f; }
    body.admin-light .na-history-title { color: #6e6e73 !important; }
    body.admin-light .na-download-bar {
      background: #ffffff;
      border-color: rgba(0,0,0,0.08);
    }
    body.admin-light .na-download-label { color: #1d1d1f; }
    body.admin-light .na-pending-list .na-item { background: rgba(0,106,255,0.05); border-color: rgba(0,106,255,0.15); }
    body.admin-light .na-save-bar { background: #f5f5f7; border-color: rgba(0,0,0,0.08); }
    body.admin-light .na-pending-addr { color: #1d1d1f; }
    body.admin-light .na-pending-item { background: rgba(0,106,255,0.06); border-color: rgba(0,106,255,0.15); }
    body.admin-light .na-pending-num { background: rgba(0,106,255,0.12); color: #006AFF; }
    body.admin-light .na-pending-remove { color: #6e6e73; }
    body.admin-light .na-pending-remove:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
    body.admin-light .na-clear-btn { color: #6e6e73; border-color: rgba(0,0,0,0.12); }
    body.admin-light .na-clear-btn:hover { background: rgba(0,0,0,0.04); color: #1d1d1f; }

    /* ── Tab Content ── */
    body.admin-light .tab-content { background: #f5f5f7; }

    /* ── Stat Cards ── */
    body.admin-light .stat-card {
      background: #ffffff;
      border-color: rgba(0,0,0,0.06);
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    body.admin-light .stat-card:hover {
      background: #ffffff;
      border-color: rgba(0,0,0,0.1);
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    body.admin-light .stat-total .stat-icon {
      background: rgba(0,122,255,0.1);
      color: #007aff;
    }
    body.admin-light .stat-today .stat-icon {
      background: rgba(255,149,0,0.1);
      color: #ff9500;
    }
    body.admin-light .stat-upcoming .stat-icon {
      background: rgba(52,199,89,0.1);
      color: #34c759;
    }
    body.admin-light .stat-number { color: #1d1d1f; }
    body.admin-light .stat-label { color: #6e6e73; }
    body.admin-light .stat-total::before { background: #007aff; }
    body.admin-light .stat-today::before { background: #ff9500; }
    body.admin-light .stat-upcoming::before { background: #34c759; }

    /* ── Admin Controls / Search ── */
    body.admin-light .admin-search-wrap .search-icon { color: #aeaeb2; }
    body.admin-light .admin-search-wrap input {
      background: rgba(142,142,147,0.12);
      color: #1d1d1f;
    }
    body.admin-light .admin-search-wrap input::placeholder { color: #aeaeb2; }
    body.admin-light .admin-search-wrap input:focus {
      background: rgba(142,142,147,0.18);
      box-shadow: 0 0 0 3px rgba(0,122,255,0.2);
    }
    body.admin-light .btn-admin-action {
      background: rgba(142,142,147,0.12);
      color: #6e6e73;
    }
    body.admin-light .btn-admin-action:hover {
      background: rgba(142,142,147,0.2);
      color: #1d1d1f;
    }
    body.admin-light .btn-admin-action.refresh:hover {
      color: #007aff;
      background: rgba(0,122,255,0.08);
    }
    body.admin-light .btn-admin-action.export:hover {
      color: #34c759;
      background: rgba(52,199,89,0.08);
    }
    body.admin-light .btn-admin-action.danger { color: #ff3b30; }
    body.admin-light .btn-admin-action.danger:hover { background: rgba(255,59,48,0.08); }

    /* Scrollbar */
    body.admin-light .admin-cards::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); }

    /* ══ APPOINTMENTS v3 — Light ══ */
    body.admin-light .appt3-header {
      background: #ffffff;
      border-color: rgba(0,0,0,0.06);
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    body.admin-light .appt3-header::before {
      background: radial-gradient(circle, rgba(88,86,214,0.06) 0%, transparent 70%);
    }
    body.admin-light .appt3-header-text h2 { color: #1d1d1f; }
    body.admin-light .appt3-header-text p { color: #6e6e73; }
    body.admin-light .appt3-action-btn {
      background: rgba(142,142,147,0.12);
      color: #6e6e73;
    }
    body.admin-light .appt3-action-btn:hover {
      background: rgba(142,142,147,0.2);
      color: #1d1d1f;
    }
    body.admin-light .appt3-action-btn.danger:hover {
      background: rgba(255,59,48,0.1);
      color: #ff3b30;
    }

    /* Stat cards */
    body.admin-light .appt3-stat-card {
      background: #ffffff;
      border-color: rgba(0,0,0,0.06);
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    body.admin-light .appt3-stat-card:hover { background: #fafafa; }
    body.admin-light .appt3-stat-icon.total { background: rgba(88,86,214,0.08); color: #5856d6; }
    body.admin-light .appt3-stat-icon.today { background: rgba(0,122,255,0.08); color: #007aff; }
    body.admin-light .appt3-stat-icon.upcoming { background: rgba(52,199,89,0.08); color: #34c759; }
    body.admin-light .appt3-stat-icon.pending { background: rgba(255,149,0,0.08); color: #ff9500; }
    body.admin-light .appt3-stat-value { color: #1d1d1f; }
    body.admin-light .appt3-stat-label { color: #6e6e73; }

    /* Toolbar / Search */
    body.admin-light .appt3-search input {
      background: rgba(142,142,147,0.12);
      color: #1d1d1f;
    }
    body.admin-light .appt3-search input::placeholder { color: #aeaeb2; }
    body.admin-light .appt3-search input:focus {
      background: rgba(142,142,147,0.18);
      box-shadow: 0 0 0 3px rgba(0,122,255,0.2);
    }
    body.admin-light .appt3-search svg { color: #aeaeb2; }
    body.admin-light .appt3-filter-btn {
      background: rgba(142,142,147,0.12);
      color: #6e6e73;
    }
    body.admin-light .appt3-filter-btn:hover {
      background: rgba(142,142,147,0.2);
      color: #1d1d1f;
    }
    body.admin-light .appt3-filter-btn.active {
      background: #007aff;
      color: #fff;
    }

    /* List scrollbar */
    body.admin-light .appt3-list::-webkit-scrollbar-thumb {
      background: rgba(0,0,0,0.1);
    }

    /* Appointment card */
    body.admin-light .appt3-card {
      background: #ffffff;
      border-color: rgba(0,0,0,0.08);
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }
    body.admin-light .appt3-card:hover {
      background: #fafafa;
      border-color: rgba(0,0,0,0.1);
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    body.admin-light .appt3-name { color: #1d1d1f; }
    body.admin-light .appt3-status-badge.pending { background: rgba(255,149,0,0.1); color: #c77800; }
    body.admin-light .appt3-status-badge.confirmed { background: rgba(52,199,89,0.1); color: #248a3d; }
    body.admin-light .appt3-status-badge.cancelled { background: rgba(255,59,48,0.1); color: #d70015; }
    body.admin-light .appt3-property { color: #007aff; }
    body.admin-light .appt3-property svg { color: #5ac8fa; }
    body.admin-light .appt3-pill {
      background: rgba(142,142,147,0.08);
      color: #6e6e73;
    }
    body.admin-light .appt3-pill svg { color: #aeaeb2; }
    body.admin-light .appt3-message {
      background: rgba(88,86,214,0.04);
      border-left-color: #5856d6;
      color: #6e6e73;
    }
    body.admin-light .appt3-message svg { color: #5856d6; }

    /* Actions panel */
    body.admin-light .appt3-card-actions {
      background: rgba(242,242,247,0.5);
      border-left-color: rgba(0,0,0,0.04);
    }
    body.admin-light .appt3-select {
      color: #3a3a3c;
      background: rgba(142,142,147,0.12);
    }
    body.admin-light .appt3-select:focus {
      border-color: #007aff;
      box-shadow: 0 0 0 3px rgba(0,122,255,0.2);
    }
    body.admin-light .appt3-btn {
      background: rgba(142,142,147,0.12);
      color: #6e6e73;
    }
    body.admin-light .appt3-btn:hover { background: rgba(142,142,147,0.2); }
    body.admin-light .appt3-btn.call:hover { background: rgba(0,122,255,0.1); color: #007aff; }
    body.admin-light .appt3-btn.sms:hover { background: rgba(88,86,214,0.1); color: #5856d6; }
    body.admin-light .appt3-btn.wa:hover { background: rgba(52,199,89,0.1); color: #34c759; }
    body.admin-light .appt3-btn.email:hover { background: rgba(255,149,0,0.1); color: #ff9500; }
    body.admin-light .appt3-btn.delete:hover { background: rgba(255,59,48,0.1); color: #ff3b30; }
    body.admin-light .appt3-confirm-btn { background: #34c759; }
    body.admin-light .appt3-confirm-btn:hover { background: #28a745; }
    body.admin-light .appt3-confirmed-badge {
      background: rgba(52,199,89,0.1);
      color: #248a3d;
    }
    body.admin-light .appt3-timestamp { color: #aeaeb2; }

    /* Empty state */
    body.admin-light .appt3-empty-icon {
      background: rgba(142,142,147,0.08);
      color: #aeaeb2;
    }
    body.admin-light .appt3-empty h3 { color: #1d1d1f; }
    body.admin-light .appt3-empty p { color: #6e6e73; }

    /* Loading */
    body.admin-light .appt3-loading { color: #6e6e73; }
    body.admin-light .appt3-spinner {
      border-color: rgba(88,86,214,0.15);
      border-top-color: #5856d6;
    }

    /* ══ PROPERTIES — Light ══ */
    body.admin-light .properties-header h3 { color: #1d1d1f; }
    body.admin-light .properties-subtitle { color: #6e6e73; }
    body.admin-light .btn-add-property {
      background: #007aff;
    }
    body.admin-light .btn-add-property:hover { background: #0066d6; }

    /* ══ SECURITY v2 — Light ══ */
    body.admin-light .sec2-banner {
      background: #ffffff;
      border-color: rgba(0,0,0,0.06);
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      color: #1d1d1f;
    }
    body.admin-light .sec2-banner-icon {
      background: rgba(142,142,147,0.08);
    }
    body.admin-light .sec2-banner-text h3 { color: #1d1d1f; }
    body.admin-light .sec2-banner-text p { color: #6e6e73; }
    body.admin-light .sec2-banner-stat {
      background: rgba(142,142,147,0.08);
    }
    body.admin-light .sec2-banner-stat span { color: #1d1d1f; }
    body.admin-light .sec2-banner-stat small { color: #6e6e73; }
    body.admin-light .sec2-create-card {
      background: #ffffff;
      border-color: rgba(0,0,0,0.06);
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    body.admin-light .sec2-create-header { color: #1d1d1f; }
    body.admin-light .sec2-create-header svg { color: #5856d6; }
    body.admin-light .sec2-input-wrap {
      background: rgba(142,142,147,0.12);
    }
    body.admin-light .sec2-input-wrap:focus-within {
      background: rgba(142,142,147,0.18);
      box-shadow: 0 0 0 3px rgba(0,122,255,0.2);
    }
    body.admin-light .sec2-input-wrap svg { color: #aeaeb2; }
    body.admin-light .sec2-input-wrap input { color: #1d1d1f; }
    body.admin-light .sec2-btn--ghost { color: #6e6e73; }
    body.admin-light .sec2-btn--ghost:hover {
      background: rgba(142,142,147,0.12);
      color: #1d1d1f;
    }
    body.admin-light .sec2-btn--outline {
      background: rgba(88,86,214,0.08);
      color: #5856d6;
    }
    body.admin-light .sec2-btn--outline:hover { background: rgba(88,86,214,0.14); }
    body.admin-light .sec2-btn--primary { background: #007aff; }
    body.admin-light .sec2-btn--primary:hover { background: #0066d6; }
    body.admin-light .sec2-feedback {
      color: #248a3d;
      background: rgba(52,199,89,0.08);
    }
    body.admin-light .sec2-users-header { color: #1d1d1f; }
    body.admin-light .sec2-users-header svg { color: #007aff; }
    body.admin-light .sec2-user-row {
      background: #ffffff;
      border-color: rgba(0,0,0,0.06);
      box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }
    body.admin-light .sec2-user-row:hover { background: #fafafa; }
    body.admin-light .sec2-user-name { color: #1d1d1f; }
    body.admin-light .sec2-you-badge {
      background: rgba(0,122,255,0.1);
      color: #0066cc;
    }
    body.admin-light .sec2-user-role { color: #6e6e73; }
    body.admin-light .sec2-user-status { color: #34c759; }

    /* ══ NOTIFICATION PANEL — Light ══ */
    body.admin-light .admin-notif-bell {
      color: #6e6e73;
    }
    body.admin-light .notif-panel {
      background: rgba(255,255,255,0.95);
      border-color: rgba(0,0,0,0.1);
      box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    }

    /* ══ NOTIFICATION BADGE ══ */
    body.admin-light .notif-badge { background: #ff3b30; }

    /* ══ PROPERTY CARDS in admin — Light ══ */
    body.admin-light .property-card {
      background: #ffffff;
      border-color: rgba(0,0,0,0.06);
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    body.admin-light .property-card:hover {
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    }
    body.admin-light .property-card-content { color: #1d1d1f; }
    body.admin-light .property-card-title { color: #1d1d1f; }
    body.admin-light .property-card-address { color: #6e6e73; }

    /* ── Admin Welcome Screen — Light ── */
    body.admin-light #adminWelcomeScreen {
      background: linear-gradient(160deg, #f5f5f7 0%, #e5e5ea 50%, #f5f5f7 100%);
    }
    body.admin-light .admin-welcome-avatar {
      background: linear-gradient(135deg, #007aff, #5856d6);
      box-shadow: 0 0 0 6px rgba(0,122,255,0.15), 0 12px 40px rgba(0,122,255,0.2);
    }
    body.admin-light .admin-welcome-greeting { color: #6e6e73; }
    body.admin-light .admin-welcome-name {
      background: linear-gradient(135deg, #1d1d1f, #5856d6);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    body.admin-light .admin-welcome-sub { color: #aeaeb2; }
    body.admin-light .admin-welcome-dots span { background: #007aff; }

    /* ══ NOTIFICATION PANEL — Light ══ */
    body.admin-light .notif-panel {
      background: #ffffff;
      border-color: rgba(0,0,0,0.1);
      box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    }
    body.admin-light .notif-panel-header {
      background: #f5f5f7;
      border-bottom-color: rgba(0,0,0,0.06);
    }
    body.admin-light .notif-panel-header h4 { color: #1d1d1f; }
    body.admin-light .notif-panel-refresh {
      background: rgba(0,0,0,0.05);
      color: #6e6e73;
    }
    body.admin-light .notif-panel-refresh:hover {
      background: rgba(0,0,0,0.08);
      color: #1d1d1f;
    }
    body.admin-light .notif-panel-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); }
    body.admin-light .notif-panel-body .notif-item {
      background: rgba(0,0,0,0.02);
      border-color: rgba(0,0,0,0.04);
    }
    body.admin-light .notif-panel-body .notif-item:hover { background: rgba(0,122,255,0.05); }
    body.admin-light .notif-panel-body .notif-title { color: #1d1d1f; }
    body.admin-light .notif-panel-body .notif-detail { color: #6e6e73; }
    body.admin-light .notif-panel-body .notif-time { color: #aeaeb2; }
    body.admin-light .notif-panel-empty { color: #aeaeb2; }

    /* ══ MESSAGES / CHAT — Light ══ */
    body.admin-light .chat-conv-card {
      background: #ffffff;
      border-color: rgba(0,0,0,0.06);
    }
    body.admin-light .chat-conv-card:hover {
      border-color: #007aff;
      box-shadow: 0 2px 12px rgba(0,122,255,0.1);
    }
    body.admin-light .chat-conv-card.active {
      border-color: #007aff;
      background: rgba(0,122,255,0.06);
    }
    body.admin-light .chat-conv-name { color: #1d1d1f; }
    body.admin-light .chat-conv-phone { color: #aeaeb2; }
    body.admin-light .chat-conv-last { color: #6e6e73; }
    body.admin-light .chat-conv-time { color: #aeaeb2; }
    body.admin-light .admin-chat-detail {
      background: #ffffff;
      border-color: rgba(0,0,0,0.06);
    }
    body.admin-light .admin-chat-detail-header {
      background: #f5f5f7;
      border-bottom-color: rgba(0,0,0,0.06);
    }
    body.admin-light .admin-chat-detail-header h4 { color: #1d1d1f; }
    body.admin-light .admin-chat-detail-messages {
      background: #fafafa;
    }
    body.admin-light .admin-chat-detail-form {
      border-top-color: rgba(0,0,0,0.06);
    }
    body.admin-light .admin-chat-detail-form input {
      background: rgba(142,142,147,0.12);
      border-color: rgba(0,0,0,0.08);
      color: #1d1d1f;
    }

    /* ---- Admin Welcome Screen ---- */
    #adminWelcomeScreen {
      position: absolute;
      inset: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
      animation: welcomeFadeIn 0.5s ease;
      border-radius: inherit;
    }
    #adminWelcomeScreen.admin-welcome-fadeout {
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    .admin-welcome-inner {
      text-align: center;
      animation: welcomeSlideUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .admin-welcome-avatar {
      width: 80px; height: 80px;
      border-radius: 50%;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 34px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 20px;
      box-shadow: 0 0 0 6px rgba(99,102,241,0.2), 0 12px 40px rgba(99,102,241,0.3);
      animation: welcomePulse 2s ease-in-out infinite;
    }
    .admin-welcome-greeting {
      color: #94a3b8;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .admin-welcome-name {
      color: #f1f5f9;
      font-size: 32px;
      font-weight: 800;
      letter-spacing: 3px;
      margin-bottom: 12px;
      background: linear-gradient(135deg, #e2e8f0, #6366f1);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .admin-welcome-sub {
      color: #64748b;
      font-size: 13px;
      font-weight: 400;
      margin-bottom: 24px;
    }
    .admin-welcome-dots {
      display: flex;
      gap: 8px;
      justify-content: center;
    }
    .admin-welcome-dots span {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #6366f1;
      opacity: 0.4;
      animation: welcomeDot 1.2s ease-in-out infinite;
    }
    .admin-welcome-dots span:nth-child(2) { animation-delay: 0.2s; }
    .admin-welcome-dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes welcomeFadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes welcomeSlideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes welcomePulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(99,102,241,0.2), 0 12px 40px rgba(99,102,241,0.3); } 50% { box-shadow: 0 0 0 12px rgba(99,102,241,0.1), 0 12px 40px rgba(99,102,241,0.4); } }
    @keyframes welcomeDot { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } }

    /* Loading */
    .appt2-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 48px;
      color: #94a3b8;
      font-size: 0.9rem;
    }
    .appt2-spinner {
      width: 32px; height: 32px;
      border: 3px solid #e2e8f0;
      border-top-color: #6366f1;
      border-radius: 50%;
      animation: appt2spin 0.7s linear infinite;
    }
    @keyframes appt2spin { to { transform: rotate(360deg); } }

    /* Empty state */
    .appt2-empty {
      text-align: center;
      padding: 56px 24px;
    }
    .appt2-empty-icon {
      width: 64px; height: 64px;
      border-radius: 50%;
      background: #f1f5f9;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 16px;
    }
    .appt2-empty-icon svg { width: 32px; height: 32px; color: #a5b4fc; }
    .appt2-empty-title { font-size: 1.1rem; font-weight: 700; color: #475569; margin-bottom: 6px; }
    .appt2-empty-sub { font-size: 0.88rem; color: #94a3b8; max-width: 340px; margin: 0 auto; }

    /* Cancelled row opacity */
    .appt2-row[data-status="cancelled"] { opacity: 0.6; }
    .appt2-row[data-status="cancelled"]:hover { opacity: 0.85; }

    /* Properties Tab */
    .properties-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24px;
      flex-wrap: wrap;
      gap: 12px;
    }
    .properties-header h3 { margin: 0; font-size: 1.2rem; color: #f5f5f7; font-weight: 600; letter-spacing: -0.02em; }
    .properties-subtitle { margin: 4px 0 0; font-size: 0.82rem; color: #86868b; }
    .btn-add-property {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 20px;
      border-radius: 980px;
      border: none;
      background: #0a84ff;
      color: #fff;
      font-weight: 500;
      font-size: 0.88rem;
      cursor: pointer;
      transition: all .2s ease;
    }
    .btn-add-property:hover { background: #0077ed; transform: scale(1.02); }
    .properties-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
    /* Admin property cards: always visible (skip scroll-reveal animation) */
    .properties-list .property-card { opacity: 1; transform: translateY(0); }

    /* ===== Security v2 — Apple Style ===== */
    .sec2-banner {
      display: flex;
      align-items: center;
      gap: 14px;
      background: rgba(44,44,46,0.6);
      color: #fff;
      border-radius: 14px;
      padding: 20px 24px;
      margin-bottom: 20px;
      border: 0.5px solid rgba(255,255,255,0.06);
    }
    .sec2-banner-icon {
      width: 44px; height: 44px;
      background: rgba(118,118,128,0.12);
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .sec2-banner-text h3 { margin: 0; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; }
    .sec2-banner-text p { margin: 3px 0 0; font-size: 0.78rem; color: #86868b; }
    .sec2-banner-stat {
      margin-left: auto;
      text-align: center;
      background: rgba(118,118,128,0.12);
      border-radius: 10px;
      padding: 8px 18px;
      flex-shrink: 0;
    }
    .sec2-banner-stat span { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
    .sec2-banner-stat small { font-size: 0.68rem; color: #86868b; text-transform: uppercase; letter-spacing: 0.04em; }

    /* Create card */
    .sec2-create-card {
      background: rgba(44,44,46,0.4);
      border: 0.5px solid rgba(255,255,255,0.06);
      border-radius: 14px;
      padding: 20px 24px;
      margin-bottom: 20px;
    }
    .sec2-create-header {
      display: flex; align-items: center; gap: 10px;
      font-weight: 600; font-size: 0.95rem; color: #f5f5f7;
      margin-bottom: 16px;
    }
    .sec2-create-header svg { color: #5e5ce6; }
    .sec2-form-fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
    .sec2-input-wrap {
      flex: 1; min-width: 160px;
      display: flex; align-items: center; gap: 8px;
      background: rgba(118,118,128,0.12);
      border: none;
      border-radius: 10px;
      padding: 0 12px;
      transition: all 0.2s ease;
    }
    .sec2-input-wrap:focus-within {
      background: rgba(118,118,128,0.2);
      box-shadow: 0 0 0 3px rgba(10,132,255,0.25);
    }
    .sec2-input-wrap svg { color: #636366; flex-shrink: 0; }
    .sec2-input-wrap input {
      border: none; background: transparent; outline: none;
      padding: 10px 0; font-size: 0.92rem; color: #f5f5f7;
      width: 100%;
    }
    .sec2-form-btns { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
    .sec2-btn {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 8px 14px; font-size: 0.82rem; font-weight: 500;
      border-radius: 980px; cursor: pointer; border: none;
      transition: all 0.2s;
    }
    .sec2-btn--ghost { background: transparent; color: #86868b; }
    .sec2-btn--ghost:hover { background: rgba(118,118,128,0.12); color: #f5f5f7; }
    .sec2-btn--outline { background: rgba(94,92,230,0.1); color: #bf5af2; border: none; }
    .sec2-btn--outline:hover { background: rgba(94,92,230,0.18); }
    .sec2-btn--primary { background: #0a84ff; color: #fff; }
    .sec2-btn--primary:hover { background: #0077ed; transform: scale(1.02); }
    .sec2-feedback {
      color: #30d158; font-weight: 600; margin-top: 10px;
      padding: 8px 12px; border-radius: 8px; background: rgba(48,209,88,0.12);
      display: none; font-size: 0.85rem;
    }

    /* Users list */
    .sec2-users-header {
      display: flex; align-items: center; gap: 10px;
      font-weight: 600; font-size: 0.95rem; color: #f5f5f7;
      margin-bottom: 12px;
    }
    .sec2-users-header svg { color: #0a84ff; }
    .sec2-users-list { display: flex; flex-direction: column; gap: 6px; }
    .sec2-user-row {
      display: flex; align-items: center; gap: 14px;
      background: rgba(44,44,46,0.4);
      border: 0.5px solid rgba(255,255,255,0.06);
      border-radius: 12px;
      padding: 14px 18px;
      transition: all 0.2s ease;
    }
    .sec2-user-row:hover { background: rgba(44,44,46,0.7); }

    /* Avatar */
    .sec2-user-avatar {
      width: 40px; height: 40px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-weight: 600; font-size: 1rem;
      flex-shrink: 0;
      text-transform: uppercase;
    }

    /* Info */
    .sec2-user-info { flex: 1; min-width: 0; }
    .sec2-user-name {
      font-weight: 600; font-size: 0.92rem; color: #f5f5f7;
      display: flex; align-items: center; gap: 8px;
    }
    .sec2-you-badge {
      font-size: 0.6rem; font-weight: 600;
      background: rgba(10,132,255,0.15);
      color: #64d2ff;
      padding: 2px 8px;
      border-radius: 980px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .sec2-user-role { font-size: 0.75rem; color: #86868b; margin-top: 2px; }

    /* Status */
    .sec2-user-status {
      display: flex; align-items: center; gap: 6px;
      font-size: 0.75rem; color: #30d158; font-weight: 500;
      flex-shrink: 0;
    }
    .sec2-status-dot {
      width: 7px; height: 7px;
      background: #30d158;
      border-radius: 50%;
      animation: sec2pulse 2s ease-in-out infinite;
    }
    @keyframes sec2pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

    /* Actions */
    .sec2-user-actions { flex-shrink: 0; }
    .sec2-act {
      width: 36px; height: 36px;
      border-radius: 10px; border: none;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all 0.2s;
    }
    .sec2-act--danger { background: #fef2f2; color: #ef4444; }
    .sec2-act--danger:hover { background: #ef4444; color: #fff; }
    .sec2-act--role { background: rgba(245,158,11,.12); color: #f59e0b; }
    .sec2-act--role:hover { background: #f59e0b; color: #fff; }

    /* Security grid layout */
    .sec-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 16px; margin-bottom: 20px;
    }
    @media (max-width: 768px) { .sec-grid { grid-template-columns: 1fr; } }
    .sec-card {
      background: #0f172a;
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 14px;
      padding: 20px 24px;
      display: flex; flex-direction: column;
    }
    .sec-card-full {
      background: #0f172a;
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 14px;
      padding: 20px 24px;
      margin-bottom: 20px;
    }
    .sec-card-header {
      display: flex; align-items: center; gap: 10px;
      font-weight: 700; font-size: 1rem; color: #f1f5f9;
      margin-bottom: 16px;
    }
    .sec-card-header svg { color: #6366f1; }
    .sec-card-body { flex: 1; }
    .sec-label {
      display: block; color: #94a3b8; font-size: .82rem;
      margin-bottom: 6px; text-transform: uppercase;
      letter-spacing: 0.5px; font-weight: 600;
    }
    .sec-inline-edit { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
    .sec-btn-sm { padding: 10px 14px !important; font-size: .82rem !important; white-space: nowrap; }
    .sec-account-info {
      margin-top: 12px; padding: 12px 14px;
      background: rgba(99,102,241,.08);
      border: 1px solid rgba(99,102,241,.15);
      border-radius: 10px; font-size: .85rem; color: #c4b5fd;
    }

    /* Empty state */
    .sec2-empty {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 40px 20px; color: #94a3b8; gap: 12px; font-size: 0.9rem;
    }
    .sec2-empty-icon {
      width: 60px; height: 60px;
      background: #f1f5f9;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: #cbd5e1;
    }
    /* Compat: settings & email tabs still use this class */
    .security-feedback {
      color: #10b981; font-weight: 700; margin-top: 10px;
      padding: 8px 12px; border-radius: 8px; background: #d1fae5;
      display: none; font-size: 0.9rem;
    }

    /* Existing btn-danger kept for backwards compat */
    .btn-danger { background: #dc2626; color: white; border: none; padding: 12px 20px; border-radius: 12px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: background 0.3s; }
    .btn-danger:hover { background: #b91c1c; }

    /* ============================================
       ADMIN LOGIN PAGE — Full-page centered card
       ============================================ */
    .admin-login-page {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 80vh;
      padding: 2rem;
    }
    .admin-login-card {
      max-width: 420px;
      width: 100%;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 25px 60px rgba(2,6,23,0.22);
      overflow: hidden;
    }

    /* ============================================
       LOGIN MODAL — Centered Card Design
       ============================================ */
    .login-modal-content {
      max-width: 420px;
      margin: 60px auto;
      background: #fff;
      border-radius: 20px;
      padding: 0;
      box-shadow: 0 25px 60px rgba(2,6,23,0.22);
      overflow: hidden;
    }
    .login-header {
      text-align: center;
      padding: 32px 28px 20px;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      color: #fff;
    }
    .login-lock-icon {
      width: 64px;
      height: 64px;
      border-radius: 16px;
      background: rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 14px;
      color: #94a3b8;
    }
    .login-header h2 { margin: 0; font-size: 1.5rem; font-weight: 700; color: #fff; }
    .login-subtitle { margin: 8px 0 0; font-size: 0.9rem; color: #94a3b8; line-height: 1.4; }
    .login-form { padding: 24px 28px 28px; }
    .login-field { margin-bottom: 16px; }
    .login-field label {
      display: block;
      font-size: 0.88rem;
      font-weight: 600;
      color: #cbd5e1;
      margin-bottom: 6px;
    }
    .login-feedback {
      color: #f87171;
      font-weight: 600;
      font-size: 0.9rem;
      padding: 10px 12px;
      border-radius: 10px;
      background: rgba(239,68,68,0.1);
      border: 1px solid rgba(239,68,68,0.2);
      margin-bottom: 14px;
      display: none;
    }
    .login-submit-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 20px;
      border-radius: 12px;
      border: none;
      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
      color: #fff;
      font-weight: 700;
      font-size: 1.05rem;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(37,99,235,0.3);
      transition: transform .15s, box-shadow .15s;
      margin-bottom: 10px;
    }
    .login-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,0.35); }
    .login-cancel-btn {
      width: 100%;
      padding: 12px 20px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.1);
      background: transparent;
      color: #94a3b8;
      font-weight: 600;
      font-size: 0.95rem;
      cursor: pointer;
      transition: background .2s;
    }
    .login-cancel-btn:hover { background: #f8fafc; }

/* Auto-detect indicator */
.auto-detect-indicator {
    position: absolute;
    right: 12px;
    top: 12px;
    font-size: 1.2rem;
    opacity: 0.6;
    pointer-events: none;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
    .property-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); transition: transform 0.2s; }
    .property-card:hover { transform: translateY(-2px); }
    .property-card-image { width: 100%; height: 180px; object-fit: cover; }
    .property-card-content { padding: 18px; }
    .property-card-title { font-weight: 700; color: var(--text); margin-bottom: 6px; font-size: 1.1rem; }
    .property-card-address { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 12px; }
    .property-card-price { font-weight: 800; color: var(--price-color); margin-bottom: 12px; font-size: 1.1rem; }
    .property-card-meta { display: flex; gap: 18px; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 12px; }
    .property-card-actions { display: flex; gap: 12px; }
    .property-card-actions button { padding: 8px 16px; border-radius: 8px; border: none; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
    .btn-edit { background: #f59e0b; color: white; }
    .btn-delete { background: #dc2626; color: white; }

/* Mobile-specific improvements: full-screen modals, stacked forms, larger touch targets */

/* ============================================
   MOBILE — max-width: 600px
   ============================================ */
@media (max-width: 600px) {
  /* Full-screen modals */
  .modal { padding: 0; }
  .modal-content {
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    max-height: 100vh;
    overscroll-behavior: contain;
  }

  /* Close button */
  .close {
    position: fixed;
    top: 8px;
    right: 12px;
    z-index: 2100;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(15,23,42,0.7);
    -webkit-backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  }

  /* Share button mobile */
  .modal-share-btn {
    position: fixed;
    top: 8px;
    right: 56px;
    left: auto;
    z-index: 2100;
    width: 40px;
    height: 40px;
    background: rgba(99,102,241,0.85);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  }

  .modal-main img.modal-main-image { touch-action: pan-y; }

  /* Image area — vertical column (same as desktop but full-width on mobile) */
  .modal-top { 
    display: flex;
    flex-direction: column;
    max-height: none;
    overflow-y: visible;
  }
  .modal-main {
    order: 1;
    min-height: 220px;
    max-height: 44vh;
    border-radius: 0;
    width: 100%;
    flex-shrink: 1;
    position: relative;
  }
  .modal-main::after { border-radius: 0; }
  .modal-info { order: 3; }
  .modal-main img.modal-main-image {
    width: 100%;
    height: 100%;
    max-height: 44vh;
    object-fit: cover;
  }

  /* Nav arrows */
  .modal-nav {
    width: 48px;
    height: 48px;
    font-size: 22px;
    background: rgba(15,23,42,0.65);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  }
  .modal-counter { font-size: 0.85rem; padding: 4px 10px; right: 8px; bottom: 8px; }

  /* Info */
  .modal-info { padding: 18px 16px 10px; max-height: none; overflow-y: visible; }
  .modal-info h2 { font-size: 1.25rem; line-height: 1.3; margin-bottom: 4px; }
  .modal-price { font-size: 1rem; font-weight: 800; padding: 5px 14px; }
  .modal-details { font-size: 0.93rem; line-height: 1.55; color: var(--text-secondary); margin-bottom: 0; max-height: none; }
  .desc-cards-grid { gap: 4px; }
  .desc-card-icon { width: 26px; height: 26px; min-width: 26px; border-radius: 7px; }
  .desc-card-icon svg { width: 14px; height: 14px; }
  .desc-card-title { font-size: 0.65rem; }
  .desc-card-text { font-size: 0.76rem; }
  .desc-overview { font-size: 0.84rem; }
  .desc-cta { font-size: 0.78rem; padding: 6px 8px; }

  /* Quick stats */
  .preview-stats { margin-bottom: 14px; }
  .preview-stat { padding: 8px 4px; border-radius: 12px; }
  .preview-stat svg { width: 16px; height: 16px; }
  .preview-stat span { font-size: 1rem; }
  .preview-stat small { font-size: 0.7rem; }

  /* Sections */
  .preview-section { margin-bottom: 12px; }
  .preview-section-label { font-size: 0.75rem; margin-bottom: 6px; }

  /* Move-in estimate */
  .move-in-estimate { padding: 12px 14px; border-radius: 12px; }
  .estimate-label { font-size: 0.85rem; }
  .estimate-formula { font-size: 0.7rem; }
  .estimate-value { font-size: 0.9rem; }
  .estimate-total .estimate-value { font-size: 1.1rem; }

  /* Feature pills */
  .modal-features { gap: 6px; margin-top: 6px; }
  .modal-features .feature-pill { padding: 5px 10px; font-size: 0.85rem; gap: 5px; }
  .modal-features .feature-pill svg { width: 13px; height: 13px; }

  /* Map */
  .map-container { margin: 12px 16px; width: calc(100% - 32px); }
  .modal-map { height: 220px; border-radius: 12px; }

  /* CTA — sticky bottom bar */
  .modal-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2050;
    flex-direction: row;
    gap: 8px;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    margin-top: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  }
  .modal-cta .btn-primary { width: auto; flex: 1; justify-content: center; padding: 12px 10px; font-size: 0.88rem; border-radius: 12px; }
  .modal-cta .btn-primary svg { width: 16px; height: 16px; }

  /* Add bottom padding so content isn't hidden behind sticky CTA */
  .modal-info { padding-bottom: 70px !important; }

  /* Gallery - scrolls with content */
  .modal-gallery { order: 2; padding: 10px 16px 16px; gap: 10px; margin-top: 10px; flex-shrink: 1; min-height: 68px; overflow-x: auto; overflow-y: visible; }
  .modal-gallery img { width: 76px; height: 56px; min-height: 56px; border-radius: 10px; flex-shrink: 0; }
  .modal-gallery .gallery-video-thumb { width: 76px; height: 56px; min-height: 56px; border-radius: 10px; flex-shrink: 0; }

  /* Schedule + Admin modals */
  .schedule-modal-content, .admin-modal-content {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    padding: 0;
    min-height: 100%;
    overflow-y: auto;
  }
  #adminModal {
    padding: 0;
    overflow: hidden;
    background: #1c1c1e;
  }
  #adminModal .admin-modal-content {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    background: #1c1c1e;
  }
  .schedule-banner { padding: 24px 20px 22px; }
  .schedule-banner-icon { width: 44px; height: 44px; border-radius: 12px; }
  .schedule-banner-icon svg { width: 22px; height: 22px; }
  .schedule-banner-content h2 { font-size: 1.15rem; }
  .schedule-property-badge { font-size: 0.8rem; padding: 4px 12px; }
  .schedule-steps { padding: 14px 20px 4px; }
  .schedule-step span { display: none; }
  .step-line { width: 24px; }
  .schedule-form { padding: 16px 20px 24px; }
  .form-section-label { font-size: 0.78rem; }
  .date-time { flex-direction: column; gap: 0; }
  .date-time .input-with-icon { margin-bottom: 12px; }
  .schedule-note { font-size: 0.78rem; }
  .form-actions { flex-direction: column-reverse; gap: 8px; }
  .form-actions .btn-secondary, .form-actions .btn-primary { width: 100%; text-align: center; justify-content: center; }
  .schedule-feedback { margin: 12px 20px 0; }
  .schedule-modal-content > .close { top: 8px; right: 10px; }
  .sched-accordion-panel { max-height: 0; }
  .sched-accordion.open .sched-accordion-panel { max-height: 210px; }
  .sched-prop-card { padding: 8px 10px; gap: 10px; }
  .sched-prop-thumb { width: 40px; height: 40px; border-radius: 6px; }
  .sched-prop-addr { font-size: 0.8rem; }
  .sched-prop-meta { font-size: 0.7rem; }
  .sched-prop-check { width: 18px; height: 18px; }

  /* Schedule step mobile */
  .schedule-step-actions { flex-direction: column-reverse; gap: 8px; }
  .schedule-step-actions .btn-secondary, .schedule-step-actions .btn-primary { width: 100%; justify-content: center; text-align: center; padding: 14px 16px; font-size: 1rem; }
  .schedule-summary { padding: 16px; }
  .schedule-summary-row { gap: 10px; }
  .schedule-summary-icon { width: 32px; height: 32px; border-radius: 8px; }
  .schedule-summary-icon svg { width: 16px; height: 16px; }

  /* Add Property Modal mobile */
  .add-prop-modal {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    max-height: 100vh;
    height: 100%;
  }
  .add-prop-banner { padding: 28px 20px 24px; }
  .add-prop-banner-icon { width: 48px; height: 48px; border-radius: 14px; }
  .add-prop-banner-icon svg { width: 24px; height: 24px; }
  .add-prop-banner-content h2 { font-size: 1.2rem; }
  .add-prop-banner-sub { font-size: 0.82rem; }
  .add-prop-modal > .close { top: 10px; right: 12px; }
  .add-prop-autofill { margin: 0 16px; margin-top: -14px; }
  .add-prop-form { padding: 20px 16px 16px; }
  .add-prop-row-2 { grid-template-columns: 1fr; gap: 0; }
  .add-prop-row-2 .input-with-icon { margin-bottom: 12px; }
  .add-prop-options-grid { grid-template-columns: 1fr; }
  .add-prop-gallery-mode { flex-direction: column; }
  .add-prop-actions { flex-direction: column-reverse; gap: 8px; }
  .add-prop-actions .btn-secondary,
  .add-prop-actions .btn-primary { width: 100%; justify-content: center; text-align: center; padding: 14px 16px; font-size: 1rem; }
  .add-prop-autofill-actions { flex-direction: column; }
  .add-prop-autofill-actions .btn-primary,
  .add-prop-autofill-actions .btn-secondary,
  .add-prop-autofill-actions .btn-ai-gen { width: 100%; justify-content: center; padding: 12px 16px; }
  .add-prop-field-row { grid-template-columns: 1fr; gap: 8px; }
  .add-prop-footer { flex-direction: column-reverse; gap: 8px; padding: 14px 16px; }
  .add-prop-footer .add-prop-btn-cancel,
  .add-prop-footer .add-prop-btn-submit { width: 100%; justify-content: center; text-align: center; }
  .add-prop-smartfill-btns { flex-direction: column; }
  .add-prop-smartfill-btns button { width: 100%; justify-content: center; }
  .inline-qr-panel { flex-direction: column; text-align: center; }
  .inline-qr-code { min-width: 120px; min-height: 120px; }
  .add-prop-step { padding: 14px; }
  .add-prop-step-fields { padding: 12px 0 0; }
  .add-prop-media-tabs { flex-direction: column; }

  /* ═══════════════════════════════════════════
     ADMIN PANEL — MOBILE RESPONSIVE
     ═══════════════════════════════════════════ */

  /* Admin header */
  .admin-header {
    padding: 12px 14px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }
  .admin-header-left { gap: 10px; flex: 1; min-width: 0; }
  .admin-header h2 { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .admin-subtitle { font-size: 0.72rem; }
  .admin-logout-btn { padding: 6px 12px; font-size: 0.78rem; gap: 4px; flex-shrink: 0; }
  .admin-logout-btn svg { width: 14px; height: 14px; }
  .admin-avatar { width: 32px; height: 32px; }
  .admin-avatar svg { width: 18px; height: 18px; }

  /* Notification bell mobile */
  .admin-notif-bell { width: 36px; height: 36px; border-radius: 10px; }
  .admin-notif-bell svg { width: 18px; height: 18px; }
  .notif-panel { width: calc(100vw - 20px); right: -10px; max-height: 70vh; }
  .notif-panel-body { max-height: calc(70vh - 56px); }

  /* ── Mobile App-style bottom nav (hamburger) ── */
  .admin-tabs {
    display: none !important;         /* hide desktop tab bar on mobile */
  }

  /* ── Fixed bottom bar with 4 quick tabs + More ── */
  .admin-mobile-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background: rgba(29,29,31,0.85);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 0.5px solid rgba(255,255,255,0.08);
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mob-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px 6px;
    background: none;
    border: none;
    border-top: none;
    color: #636366;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 0.2s ease;
    position: relative;
  }
  .mob-tab svg { width: 22px; height: 22px; color: inherit; transition: color 0.2s; }
  .mob-tab.active { 
    color: #0a84ff; 
    border-top-color: transparent; 
    background: transparent;
  }
  .mob-tab.active svg { transform: scale(1.08); }
  .mob-tab:active { background: rgba(255,255,255,0.04); }
  .mob-tab:active svg { transform: scale(0.92); }
  .mob-tab span { display: block; }
  .mob-menu-btn { color: #636366; }
  .mob-menu-btn.open { color: #ff9f0a; border-top-color: transparent; }
  .hidden-icon { display: none !important; }
  .mob-menu-btn.open #mobMenuIcon { display: none !important; }
  .mob-menu-btn.open #mobMenuCloseIcon { display: flex !important; }

  /* ── Fullscreen menu overlay ── */
  .admin-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,0.92);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    display: none;
    overflow-y: auto;
    padding: 24px 16px 100px;
  }
  .admin-mobile-menu.open { display: block; animation: mobMenuIn 0.25s ease; }
  @keyframes mobMenuIn { from { opacity: 0; } to { opacity: 1; } }

  .mob-menu-inner { max-width: 400px; margin: 0 auto; }

  .mob-menu-group { margin-bottom: 20px; }
  .mob-menu-group-title {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0a84ff;
    padding: 0 12px 8px;
    border-bottom: 0.5px solid rgba(10,132,255,0.15);
    margin-bottom: 6px;
  }
  .mob-menu-group button {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 14px;
    background: rgba(44,44,46,0.4);
    border: 0.5px solid rgba(255,255,255,0.04);
    border-radius: 12px;
    color: #e5e5e7;
    font-size: 0.95rem;
    font-weight: 400;
    cursor: pointer;
    margin-bottom: 4px;
    transition: all 0.15s ease;
    text-align: left;
  }
  .mob-menu-group button svg { 
    flex-shrink: 0; 
    color: #0a84ff; 
    width: 20px;
    height: 20px;
    transition: color 0.15s;
  }
  .mob-menu-group button:hover,
  .mob-menu-group button:active { 
    background: rgba(10,132,255,0.12); 
    color: #f5f5f7; 
    border-color: rgba(10,132,255,0.15);
  }
  .mob-menu-group button:active {
    transform: scale(0.98);
  }
  .mob-menu-group button:active svg {
    transform: scale(0.9);
  }

  .tab-divider { display: none; }
  .tab-btn .tab-label { font-size: 0; }
  .tab-btn .tab-label::after { content: attr(data-short); font-size: 0.5rem; }

  /* Add bottom padding so content doesn't hide behind the fixed nav */
  #admin { padding-bottom: 72px; }
  .tab-content { padding: 12px 10px 16px; background: #1c1c1e; }
  .admin-inline-panel { padding-bottom: 72px !important; }

  /* Inventory iframe mobile */
  #inventory-tab iframe { height: 75vh; border-radius: 8px; }

  /* Stats */
  .admin-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat-card { padding: 10px 12px; gap: 10px; }
  .stat-icon { width: 36px; height: 36px; flex-shrink: 0; }
  .stat-icon svg { width: 18px !important; height: 18px !important; }
  .stat-number { font-size: 1.3rem; }
  .stat-label { font-size: 0.72rem; }

  /* Controls */
  .admin-controls { flex-direction: column; gap: 10px; }
  .admin-search-wrap { min-width: 100%; }
  .admin-buttons { width: 100%; justify-content: stretch; }
  .btn-admin-action { flex: 1; justify-content: center; padding: 10px 10px; font-size: 0.82rem; }

  /* ── Properties tab mobile ── */
  .properties-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .properties-header h3 { font-size: 1.1rem; }
  .properties-subtitle { font-size: 0.82rem; }
  .btn-add-property { width: 100%; justify-content: center; padding: 12px 16px; font-size: 0.95rem; }
  .properties-list { grid-template-columns: 1fr !important; gap: 14px; }
  .property-card-image { height: 160px; }
  .property-card-content { padding: 14px; }
  .property-card-title { font-size: 1rem; }
  .property-card-address { font-size: 0.88rem; margin-bottom: 8px; }
  .property-card-price { font-size: 1.05rem; margin-bottom: 8px; }
  .property-card-meta { font-size: 0.85rem; gap: 14px; margin-bottom: 10px; }
  .property-card-actions { gap: 8px; }
  .property-card-actions button { flex: 1; padding: 10px 12px; font-size: 0.88rem; text-align: center; }

  /* ── Security tab mobile ── */
  .sec2-banner { flex-wrap: wrap; padding: 14px; gap: 10px; }
  .sec2-banner-icon { width: 42px; height: 42px; border-radius: 10px; }
  .sec2-banner-icon svg { width: 22px; height: 22px; }
  .sec2-banner-text h3 { font-size: 1.05rem; }
  .sec2-banner-text p { font-size: 0.78rem; }
  .sec2-banner-stat { margin-left: 0; width: 100%; text-align: left; display: flex; align-items: center; gap: 8px; padding: 8px 14px; }
  .sec2-banner-stat span { font-size: 1.2rem; }
  .sec2-create-card { padding: 14px; }
  .sec2-create-header { font-size: 0.92rem; }
  .sec2-form-fields { flex-direction: column; }
  .sec2-input-wrap { min-width: 0; }
  /* iOS auto-zoom fix: inputs must be >= 16px */
  .sec2-input-wrap input { padding: 12px 12px 12px 36px; font-size: 1rem !important; }
  .sec2-form-btns { width: 100%; flex-direction: column; gap: 8px; }
  .sec2-form-btns .sec2-btn { width: 100%; justify-content: center; padding: 12px 14px; font-size: 0.92rem; }
  .sec2-user-row { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .sec2-user-status { order: 3; }
  .sec2-user-actions { order: 4; margin-left: auto; }
  .sec2-users-header { font-size: 0.92rem; }

  /* ── Settings tab mobile ── */
  .settings-header { margin-bottom: 12px; }
  .settings-header h3 { font-size: 1.1rem; }
  .settings-form-card {
    grid-template-columns: 1fr !important;
    margin: 10px;
    padding: 14px;
    gap: 12px;
  }
  .settings-form-card .form-section label { font-size: 0.88rem; }
  .settings-form-card .form-section input,
  .settings-form-card .form-section textarea,
  .settings-form-card .form-section input[type="file"] {
    padding: 12px;
    font-size: 0.95rem;
  }
  .settings-form-card .form-actions {
    flex-direction: column-reverse;
    gap: 8px;
    padding: 8px 0 0;
  }
  .settings-form-card .form-actions button {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 12px 16px;
    font-size: 0.95rem;
  }
  #settings-logo-preview { flex-direction: column; align-items: flex-start; }

  /* ── Appointments tab mobile ── */
  .appt2-banner { flex-direction: column; align-items: stretch; padding: 14px; gap: 10px; }
  .appt2-banner-left { gap: 10px; }
  .appt2-banner-icon { width: 40px; height: 40px; border-radius: 10px; }
  .appt2-banner-icon svg { width: 22px; height: 22px; }
  .appt2-title { font-size: 1.05rem; }
  .appt2-subtitle { font-size: 0.78rem; }
  .appt2-banner-actions { justify-content: flex-end; }
  .appt2-stats-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .appt2-stat { padding: 10px 12px; }
  .appt2-stat-num { font-size: 1.3rem; }
  .appt2-stat-label { font-size: 0.68rem; }
  .appt2-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .appt2-search-box { width: 100%; }
  /* iOS auto-zoom fix: inputs must be >= 16px */
  .appt2-search-box input { padding: 10px 8px; font-size: 1rem !important; }
  .appt2-pills { justify-content: stretch; }
  .appt2-pill { flex: 1; text-align: center; justify-content: center; padding: 9px 6px; font-size: 0.76rem; }
  .appt2-row { flex-direction: column; align-items: stretch; }
  .appt2-row-indicator { width: 100%; height: 3px; border-radius: 3px 3px 0 0; }
  .appt2-avatar { margin: 12px 14px 0; }
  .appt2-row-body { padding: 8px 14px; }
  .appt2-row-details { gap: 5px; }
  .appt2-chip--email { max-width: 100%; }
  .appt2-row-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,0.06); justify-content: space-between; align-items: center; }
  .appt2-select { width: auto; flex: 1; min-width: 100px; }
  .appt2-act-group { flex: 1; justify-content: flex-end; }
  .appt2-received { width: 100%; text-align: center; }

  /* ── Messages tab mobile ── */
  .chat-conversations-list { gap: 6px; }
  .chat-conv-card { padding: 12px; gap: 10px; }
  .chat-conv-avatar { width: 38px; height: 38px; font-size: 0.95rem; }
  .chat-conv-name { font-size: 0.88rem; }
  .chat-conv-last { font-size: 0.78rem; }
  .admin-chat-detail { height: 400px; }
  .admin-chat-detail-messages { padding: 12px; gap: 6px; }
  .admin-chat-detail-form { padding: 10px; gap: 6px; }
  /* iOS auto-zoom fix: inputs must be >= 16px */
  .admin-chat-detail-form input { padding: 10px 12px; font-size: 1rem !important; }
  .admin-chat-detail-form button { padding: 10px 14px; font-size: 0.85rem; }

  /* ── Promotions tab mobile ── */
  #promotions-tab .promo-stats { flex-direction: column; gap: 10px; }
  #promotions-tab .settings-card { padding: 14px !important; }

  .action-btn .btn-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); }
  #raw-property-description { min-height: 180px; }

  /* Login mobile */
  .login-modal-content { max-width: 100%; margin: 0; border-radius: 0; height: 100%; }
  .login-header { padding: 24px 20px 16px; }
  .login-form { padding: 20px; }

  /* Touch targets */
  .input-with-icon input, .input-with-icon textarea, .filter-item select, .search-bar input, .admin-controls input {
    padding: 14px 14px 14px 44px;
    font-size: 1rem;
    border-radius: var(--radius-sm);
  }

  .form-actions { flex-direction: column-reverse; gap: 10px; }
  .form-actions button, .auto-fill-actions .btn-primary, .auto-fill-actions .btn-secondary {
    width: 100%;
    padding: 14px 16px;
    font-size: 1.05rem;
    border-radius: var(--radius-sm);
  }

  /* Card actions stack */
  .property-card .card-actions { flex-direction: column; align-items: stretch; }
  .action-btn { width: 100%; justify-content: center; padding: 12px 14px; font-size: 1rem; border-radius: var(--radius-sm); }

  .admin-cards { grid-template-columns: 1fr; padding: 4px; }

  /* Appointment v2 mobile */
  .appt2-banner { flex-direction: column; align-items: stretch; padding: 16px; }
  .appt2-banner-actions { justify-content: flex-end; }
  .appt2-stats-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .appt2-toolbar { flex-direction: column; align-items: stretch; }
  .appt2-search-box { width: 100%; }
  .appt2-pills { justify-content: stretch; }
  .appt2-pill { flex: 1; text-align: center; justify-content: center; padding: 8px 8px; }
  .appt2-row { flex-direction: column; align-items: stretch; }
  .appt2-row-indicator { width: 100%; height: 3px; border-radius: 3px 3px 0 0; }
  .appt2-avatar { margin: 12px 14px 0; }
  .appt2-row-body { padding: 8px 14px; }
  .appt2-row-details { gap: 5px; }
  .appt2-chip--email { max-width: 100%; }
  .appt2-row-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,0.06); justify-content: space-between; align-items: center; }
  .appt2-select { width: auto; flex: 1; min-width: 100px; }
  .appt2-act-group { flex: 1; justify-content: flex-end; }
  .appt2-received { width: 100%; text-align: center; }

  .action-btn .btn-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); }
  #raw-property-description { min-height: 180px; }

  /* ══ MOBILE LIGHT MODE OVERRIDES ══ */
  body.admin-light .tab-content { background: #f5f5f7; }
  body.admin-light .admin-mobile-bar {
    background: rgba(255,255,255,0.85);
    border-top-color: rgba(0,0,0,0.1);
  }
  body.admin-light .mob-tab { color: #aeaeb2; }
  body.admin-light .mob-tab.active { color: #007aff; }
  body.admin-light .mob-tab:active { background: rgba(0,0,0,0.03); }
  body.admin-light .admin-mobile-menu {
    background: rgba(242,242,247,0.96);
  }
  body.admin-light .mob-menu-group-title {
    color: #007aff;
    border-bottom-color: rgba(0,122,255,0.12);
  }
  body.admin-light .mob-menu-group button {
    background: #ffffff;
    border-color: rgba(0,0,0,0.04);
    color: #3a3a3c;
  }
  body.admin-light .mob-menu-group button svg { color: #007aff; }
  body.admin-light .mob-menu-group button:hover,
  body.admin-light .mob-menu-group button:active {
    background: rgba(0,122,255,0.06);
    color: #1d1d1f;
    border-color: rgba(0,122,255,0.1);
  }
  /* Mobile admin #adminModal light */
  body.admin-light #adminModal { background: #f5f5f7; }
  body.admin-light #adminModal .admin-modal-content { background: #f5f5f7; }
  /* Theme toggle mobile size */
  .admin-theme-toggle { width: 32px; height: 32px; }
  .admin-theme-toggle svg { width: 16px; height: 16px; }

  /* Hero mobile */
  .hero { min-height: 56vh; padding-top: 64px; }
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: 1rem; }
  .hero-badge { font-size: 0.78rem; padding: 5px 12px; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn-primary,
  .hero-actions .btn-outline { width: 100%; max-width: 280px; }

  /* Hero search mobile */
  .hero-search { max-width: 100%; margin-top: 1.2rem; }
  .hero-search .search-bar { border-radius: var(--radius-sm); }
  /* iOS auto-zoom fix: inputs must be >= 16px */
  .hero-search .search-bar input { padding: 0.9rem 1rem 0.9rem 40px !important; font-size: 1rem !important; }
  .hero-search .search-bar button { padding: 0 1.2rem; font-size: 0.9rem; }
  .hero-search .search-bar-icon { left: 12px; width: 18px; height: 18px; }

  /* Search/Filters section mobile */
  .search-section { margin-top: 0; padding: 1rem 1rem 0.5rem; }
  /* Filter toggle button (mobile only) */
  .filter-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 720px;
    margin: 12px auto 0;
    padding: 11px 18px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  }
  .filter-toggle-btn:hover { border-color: var(--primary); color: var(--primary); }
  .filter-toggle-chevron { transition: transform 0.3s; }
  .filter-toggle-btn.open .filter-toggle-chevron { transform: rotate(180deg); }

  /* Collapsible filter bar */
  .filter-bar-collapsible {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    border-color: transparent;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.3s ease, margin 0.3s ease, border-color 0.3s ease;
  }
  .filter-bar-collapsible.open {
    max-height: 500px;
    opacity: 1;
    padding: 14px 14px 10px !important;
    margin-top: 10px !important;
    border-color: var(--border);
  }

  .filter-bar { padding: 14px 14px 10px; margin-top: 14px; }
  .filter-bar-row { gap: 10px; }
  .filter-group { min-width: calc(50% - 6px); flex: 0 0 calc(50% - 6px); }
  /* iOS auto-zoom fix: inputs must be >= 16px */
  .filter-group select,
  .filter-group input[type="number"] { padding: 8px 10px; font-size: 1rem !important; }
  .filter-price-range input { width: 45% !important; }
  .filter-actions { flex: 0 0 100%; justify-content: center; flex-wrap: wrap; }
  .filter-clear-btn { width: 100%; justify-content: center; }

  /* Footer mobile */
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Property grid mobile */
  .property-grid { grid-template-columns: 1fr; gap: 1rem; }
  .properties { padding: 2.5rem 0 3rem; }

  /* Zoom hint */
  .zoom-hint {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 8px;
    background: rgba(15,23,42,0.65);
    color: #fff;
    padding: 6px 10px;
    border-radius: 999px;
    z-index: 9999;
    font-size: 12px;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
  }
}

/* ============================================
   FULLSCREEN PHOTO VIEWER
   ============================================ */
.photo-fullscreen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 100020;
  background: rgba(0,0,0,0.96);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.photo-fullscreen.active {
  display: flex;
}
.fs-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  z-index: 10;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
}
.fs-counter {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  background: rgba(0,0,0,0.5);
  padding: 4px 12px;
  border-radius: 999px;
}
.fs-close {
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(255,255,255,0.15);
  -webkit-backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 1.8rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.fs-close:hover { background: rgba(255,255,255,0.3); }
.fs-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  padding: 60px 0 60px;
}
.fs-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.15s ease;
}
.fs-image.zoomed {
  cursor: grab;
  transition: none;
}
.fs-video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: #000;
}
.fs-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  pointer-events: none;
  z-index: 5;
}
.fs-prev, .fs-next {
  width: 48px;
  height: 48px;
  border: none;
  background: rgba(255,255,255,0.15);
  -webkit-backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  transition: background 0.2s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.fs-prev:hover, .fs-next:hover {
  background: rgba(255,255,255,0.3);
}

/* Fullscreen viewer mobile tweaks */
@media (max-width: 600px) {
  .fs-nav { display: none; }
  .fs-body { padding: 50px 0 20px; }
  .fs-header { padding: 8px 12px; }
}

/* ======================= CHAT WIDGET ======================= */
/* Floating widgets positioning */
.chat-widget { position: fixed; bottom: 24px; right: 24px; z-index: 9999; }
.chat-toggle-btn {
  width: 60px; height: 60px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: #fff; cursor: pointer;
  box-shadow: 0 4px 24px rgba(79,70,229,0.45);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.chat-toggle-btn:hover { transform: scale(1.08); box-shadow: 0 6px 32px rgba(79,70,229,0.55); }
.chat-unread-badge {
  position: absolute; top: -4px; right: -4px;
  background: #ef4444; color: #fff; font-size: 11px; font-weight: 700;
  min-width: 20px; height: 20px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px; border: 2px solid #fff;
}
.chat-window {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 420px; max-height: 640px; min-height: 500px;
  background: var(--chat-window-bg); border-radius: 20px;
  box-shadow: 0 20px 80px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05);
  display: flex; flex-direction: column;
  overflow: hidden; animation: chatSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10000;
}
@keyframes chatSlideUp {
  from { opacity: 0; transform: translate(-50%, -45%) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.chat-header {
  background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 100%); color: #fff;
  padding: 16px 18px; display: flex; align-items: center;
  justify-content: space-between; flex-shrink: 0;
}
.chat-header-left { display: flex; align-items: center; gap: 12px; }
.chat-header-avatar {
  position: relative; width: 42px; height: 42px; flex-shrink: 0;
}
.chat-header-avatar img {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  object-fit: cover;
}
.chat-header-online {
  position: absolute; bottom: 1px; right: 1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #22c55e; border: 2px solid #4f46e5;
}
.chat-header-info { display: flex; flex-direction: column; gap: 2px; }
.chat-header-name { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }
.chat-header-status { font-size: 0.75rem; opacity: 0.85; }
.chat-header-actions { display: flex; align-items: center; gap: 6px; }
.chat-close-btn {
  background: rgba(255,255,255,0.15); border: none; color: #fff;
  width: 32px; height: 32px; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.chat-close-btn:hover { background: rgba(255,255,255,0.3); }
.chat-header-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; }
.chat-logout-btn {
  background: rgba(255,255,255,0.15); border: none; color: #fff;
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.chat-logout-btn:hover { background: rgba(255,255,255,0.3); }

/* Login view */
.chat-login-view { display: flex; flex-direction: column; height: 100%; }
.chat-login-body { padding: 24px 22px 16px; flex: 1; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.chat-login-welcome { text-align: center; padding: 8px 0 4px; }
.chat-login-avatar-big {
  width: 72px; height: 72px; margin: 0 auto 12px;
}
.chat-login-avatar-big img {
  width: 72px; height: 72px; border-radius: 50%;
  box-shadow: 0 4px 16px rgba(79,70,229,0.25);
}
.chat-login-title {
  font-size: 1.15rem; font-weight: 700; color: #1f2937;
  margin: 0 0 6px;
}
.chat-login-desc { font-size: 0.88rem; color: #6b7280; margin: 0; line-height: 1.5; }
.chat-login-field { display: flex; flex-direction: column; gap: 5px; }
.chat-login-field label { font-size: 0.82rem; font-weight: 600; color: #374151; }
.chat-login-field input {
  padding: 11px 14px; border: 1.5px solid #e5e7eb; border-radius: 12px;
  font-size: 0.93rem; transition: border-color 0.2s, box-shadow 0.2s;
  background: #f9fafb;
}
.chat-login-field input:focus {
  outline: none; border-color: var(--primary, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
  background: #fff;
}
.chat-login-btn {
  width: 100%; padding: 13px; border-radius: 12px; font-size: 0.95rem;
  margin-top: 6px; font-weight: 600;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  border: none; color: #fff; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}
.chat-login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(79,70,229,0.35);
}
.chat-login-footer {
  text-align: center; padding: 12px; font-size: 0.75rem; color: #9ca3af;
  border-top: 1px solid #f3f4f6;
}
.chat-feedback { font-size: 0.85rem; color: #ef4444; padding: 4px 0; }

/* Messages view */
.chat-messages-view { display: flex; flex-direction: column; height: 560px; }
.chat-messages-container {
  flex: 1; overflow-y: auto; padding: 18px 16px;
  display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(180deg, #f5f3ff 0%, #f9fafb 100%);
}
.chat-empty {
  text-align: center; color: #9ca3af; font-size: 0.9rem; padding: 40px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.chat-empty::before {
  content: '💬'; font-size: 2.5rem;
}

/* Message row with avatar */
.chat-msg-row {
  display: flex; gap: 8px; max-width: 88%; margin-bottom: 2px;
  animation: chatMsgIn 0.25s ease-out;
}
@keyframes chatMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-msg-row-me { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg-row-them { align-self: flex-start; }

.chat-msg-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  margin-top: 2px; object-fit: cover;
}
.chat-msg-content { display: flex; flex-direction: column; gap: 2px; }
.chat-msg-sender {
  font-size: 0.7rem; font-weight: 600; color: #6b7280;
  padding: 0 6px;
}
.chat-msg-row-me .chat-msg-sender { text-align: right; }

.chat-bubble { max-width: 100%; padding: 10px 14px; border-radius: 18px; font-size: 0.9rem; line-height: 1.5; word-break: break-word; position: relative; }
.chat-bubble-me {
  background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 100%); color: #fff;
  border-bottom-right-radius: 6px;
  box-shadow: 0 2px 8px rgba(79,70,229,0.2);
}
.chat-bubble-them {
  background: #fff; color: #1f2937;
  border: 1px solid #e5e7eb; border-bottom-left-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.chat-bubble-time { font-size: 0.68rem; opacity: 0.6; margin-top: 4px; padding: 0 2px; }
.chat-bubble-me .chat-bubble-time { text-align: right; }
.chat-bubble-them .chat-bubble-time { text-align: left; color: #9ca3af; }

/* AI chat bubble styling - same as team */
.chat-bubble-ai {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
  border-bottom-right-radius: 6px;
  box-shadow: 0 2px 8px rgba(79,70,229,0.25);
}
.chat-bubble-ai .chat-bubble-time { text-align: right; }

/* Typing indicator */
.chat-typing {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 16px; background: #fff; border-radius: 18px;
  border: 1px solid #e5e7eb; width: fit-content;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.chat-typing-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #9ca3af;
  animation: chatTypingBounce 1.4s infinite ease-in-out;
}
.chat-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatTypingBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* Send form */
.chat-send-form {
  display: flex; gap: 8px; padding: 14px 16px; border-top: 1px solid #f3f4f6;
  background: #fff; flex-shrink: 0;
}
.chat-send-form input {
  flex: 1; padding: 11px 16px; border: 1.5px solid #e5e7eb;
  border-radius: 24px; font-size: 0.9rem; background: #f9fafb;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.chat-send-form input:focus {
  outline: none; border-color: var(--primary, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
  background: #fff;
}
.chat-send-btn {
  width: 42px; height: 42px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, box-shadow 0.2s;
  flex-shrink: 0;
}
.chat-send-btn:hover { transform: scale(1.06); box-shadow: 0 4px 12px rgba(79,70,229,0.35); }
.chat-book-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e5e7eb;
  background: #fff; color: #6366f1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; flex-shrink: 0; margin-right: 4px;
}
.chat-book-btn:hover { background: #6366f1; color: #fff; border-color: #6366f1; }
.chat-booking-form {
  position: absolute; bottom: 60px; left: 8px; right: 8px;
  background: #fff; border-radius: 12px; padding: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15); z-index: 10;
  display: flex; flex-direction: column; gap: 8px;
}
.chat-booking-header {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: 0.95rem; color: #1e293b; margin-bottom: 4px;
}
.chat-booking-close { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: #64748b; }
.chat-booking-form select, .chat-booking-form input {
  padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px;
  font-size: 0.9rem; background: #f8fafc;
}
.chat-booking-form select:focus, .chat-booking-form input:focus {
  outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.chat-booking-submit {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff; border: none; padding: 12px; border-radius: 8px;
  font-weight: 600; cursor: pointer; transition: transform 0.15s;
}
.chat-booking-submit:hover { transform: scale(1.02); }

/* Admin messages tab */
.chat-conversations-list { display: flex; flex-direction: column; gap: 8px; }
.chat-conv-card {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: #0f172a; border: 1px solid rgba(255,255,255,0.06); border-radius: 12px;
  cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
}
.chat-conv-card:hover { border-color: #6366f1; box-shadow: 0 2px 12px rgba(99,102,241,0.15); }
.chat-conv-card.active { border-color: #6366f1; background: rgba(99,102,241,0.1); }
.chat-conv-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--primary, #4f46e5); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem; flex-shrink: 0;
}
.chat-conv-info { flex: 1; min-width: 0; }
.chat-conv-name { font-weight: 700; font-size: 0.95rem; color: #f1f5f9; display: flex; align-items: center; gap: 8px; }
.chat-conv-phone { font-size: 0.8rem; color: #64748b; }
.chat-conv-last { font-size: 0.82rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-conv-meta { text-align: right; flex-shrink: 0; }
.chat-conv-time { font-size: 0.75rem; color: #64748b; }
.chat-conv-unread {
  display: inline-flex; align-items: center; justify-content: center;
  background: #ef4444; color: #fff; font-size: 0.7rem; font-weight: 700;
  min-width: 20px; height: 20px; border-radius: 10px; padding: 0 5px; margin-top: 4px;
}

/* Admin chat detail */
.admin-chat-detail {
  display: flex; flex-direction: column; height: 480px;
  border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; overflow: hidden;
  background: #0f172a; margin-top: 12px;
}
.admin-chat-detail-header {
  padding: 12px 16px; background: #0f172a; border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: space-between;
}
.admin-chat-detail-header h4 { margin: 0; font-size: 1rem; color: #f1f5f9; }
.admin-chat-detail-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  background: #1e293b;
}
.admin-chat-detail-form {
  display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(255,255,255,0.06);
}
.admin-chat-detail-form input {
  flex: 1; padding: 10px 14px; border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 10px; font-size: 0.9rem; background: #1e293b; color: #f1f5f9;
}
.admin-chat-detail-form input:focus { outline: none; border-color: var(--primary); }
.admin-chat-detail-form button {
  padding: 10px 16px; border-radius: 10px; border: none;
  background: var(--primary, #4f46e5); color: #fff; cursor: pointer;
  font-weight: 600; font-size: 0.9rem;
}

/* Show map button */
.show-map-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px; border-radius: 12px; border: 1.5px solid var(--primary, #4f46e5);
  background: #fff; color: var(--primary, #4f46e5); font-size: 0.95rem;
  font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.show-map-btn:hover {
  background: var(--primary, #4f46e5); color: #fff;
}
.show-map-btn svg { flex-shrink: 0; }

/* Map modal */
.map-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  z-index: 10001; display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.2s ease-out;
}
.map-modal {
  background: #fff; border-radius: 16px; overflow: hidden;
  width: 92%; max-width: 900px; max-height: 90vh;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  animation: contactSlideUp 0.3s ease-out;
  display: flex; flex-direction: column;
}
.map-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #e5e7eb;
}
.map-modal-header h3 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.map-modal-header-actions {
  display: flex; align-items: center; gap: 8px;
}
.map-expand-btn {
  background: none; border: 1px solid #e5e7eb; color: #6b7280;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; cursor: pointer; transition: all 0.2s;
}
.map-expand-btn:hover { background: #f3f4f6; color: #1f2937; border-color: #d1d5db; }
.map-expand-btn .icon-shrink { display: none; }
.map-expand-btn .icon-expand { display: block; }
[data-theme="dark"] .map-expand-btn { border-color: #475569; color: #94a3b8; }
[data-theme="dark"] .map-expand-btn:hover { background: rgba(255,255,255,0.08); color: #e2e8f0; }

/* Map filters bar */
.map-filters {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 20px;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--border, #e5e7eb);
  flex-wrap: wrap;
}
.map-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.map-filter-group label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.map-filter-range {
  display: flex;
  align-items: center;
  gap: 6px;
}
.map-filter-range input {
  width: 90px;
  padding: 7px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 8px;
  font-size: 0.85rem;
  background: var(--bg, #f9fafb);
  color: var(--text, #1e293b);
  outline: none;
  transition: border-color 0.2s;
}
.map-filter-range input:focus {
  border-color: var(--primary, #2563eb);
}
.map-filter-range span {
  color: var(--muted, #9ca3af);
  font-size: 0.85rem;
}
.map-filters select {
  padding: 7px 28px 7px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 8px;
  font-size: 0.85rem;
  background: var(--bg, #f9fafb);
  color: var(--text, #1e293b);
  cursor: pointer;
  outline: none;
  appearance: auto;
  min-width: 120px;
  transition: border-color 0.2s;
}
.map-filters select:focus {
  border-color: var(--primary, #2563eb);
}
.map-filter-apply {
  padding: 7px 18px;
  background: var(--primary, #2563eb);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.map-filter-apply:hover {
  background: var(--primary-dark, #1d4ed8);
  box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}
.map-filter-clear {
  padding: 7px 14px;
  background: none;
  color: var(--muted, #6b7280);
  border: 1px solid var(--border, #d1d5db);
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.map-filter-clear:hover {
  background: var(--hover, #f3f4f6);
  color: var(--text, #1e293b);
}
[data-theme="dark"] .map-filters { background: var(--surface, #1e293b); border-color: var(--border, #334155); }
[data-theme="dark"] .map-filter-range input { background: #0f172a; border-color: #475569; color: #e2e8f0; }
[data-theme="dark"] .map-filters select { background: #0f172a; border-color: #475569; color: #e2e8f0; }
[data-theme="dark"] .map-filter-clear { border-color: #475569; color: #94a3b8; }
[data-theme="dark"] .map-filter-clear:hover { background: rgba(255,255,255,0.06); color: #e2e8f0; }

/* Map filters fullscreen adjust */
.map-modal.map-modal-fullscreen .main-map {
  height: calc(100vh - 57px - 70px) !important;
}
@media (max-width: 600px) {
  .map-filters {
    padding: 10px 14px;
    gap: 8px;
  }
  .map-filter-range input { width: 70px; padding: 6px 8px; }
  .map-filters select { min-width: 100px; padding: 6px 24px 6px 8px; }
  .map-filter-group label { font-size: 0.7rem; }
  .map-filter-apply, .map-filter-clear { padding: 6px 12px; font-size: 0.8rem; }
}

/* Map modal fullscreen state */
.map-modal.map-modal-fullscreen {
  width: 100%; max-width: 100%; max-height: 100vh;
  border-radius: 0; height: 100vh;
}
.map-modal.map-modal-fullscreen .main-map {
  flex: 1;
}
.map-modal.map-modal-fullscreen .map-expand-btn .icon-expand { display: none; }
.map-modal.map-modal-fullscreen .map-expand-btn .icon-shrink { display: block; }
.map-modal-close {
  background: none; border: none; font-size: 1.5rem; color: #9ca3af;
  cursor: pointer; width: 36px; height: 36px; display: flex;
  align-items: center; justify-content: center; border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}
.map-modal-close:hover { background: #f3f4f6; color: #1f2937; }
.map-modal .main-map { height: 500px; width: 100%; border-radius: 0; border: none; box-shadow: none; }
@media (max-width: 600px) {
  .map-modal .main-map { height: 350px; }
}

/* Map section */
.map-section {
  padding: 60px 0;
  background: #f9fafb;
}
.map-section h2 {
  text-align: center; font-size: 2rem; font-weight: 800; margin-bottom: 8px;
}
.map-section .section-subtitle {
  text-align: center; color: #6b7280; margin-bottom: 28px;
}
.main-map {
  width: 100%; height: 450px; border-radius: 16px;
  overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.1);
  border: 2px solid #e5e7eb;
}
.leaflet-popup-content-wrapper {
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}
.map-popup { text-align: center; }
.map-popup h4 { margin: 0 0 4px; font-size: 0.95rem; color: #1f2937; }
.map-popup p { margin: 0 0 8px; font-size: 0.82rem; color: #6b7280; }
.map-popup-btn {
  display: inline-block; padding: 6px 14px; border-radius: 8px;
  background: var(--primary, #4f46e5); color: #fff; font-size: 0.8rem;
  font-weight: 600; text-decoration: none; cursor: pointer; border: none;
}
.map-popup-btn:hover { background: #4338ca; }

/* Property filter tabs */
.property-filters {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;
}
.filter-btn {
  padding: 8px 18px; border-radius: 20px; border: 1.5px solid #e5e7eb;
  background: #fff; color: #374151; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.filter-btn:hover {
  border-color: var(--primary, #4f46e5); color: var(--primary, #4f46e5);
}
.filter-btn.active {
  background: var(--primary, #4f46e5); color: #fff;
  border-color: var(--primary, #4f46e5);
}

/* Nav dropdown */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
}
.nav-dropdown-trigger svg { transition: transform 0.2s; }
.nav-dropdown:hover .nav-dropdown-trigger svg { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 220px; background: #fff; border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15); padding: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  transform: translateX(-50%) translateY(8px);
  z-index: 1000;
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 8px; font-size: 0.9rem;
  color: #374151 !important; text-decoration: none; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nav-dropdown-menu a:hover {
  background: #f5f3ff; color: var(--primary, #4f46e5) !important;
}
.nav-dropdown-menu a.cat-active {
  background: var(--primary, #4f46e5); color: #fff !important;
}
.nav-dropdown-menu a.cat-active svg { color: #fff; }
.nav-dropdown-menu a svg { color: var(--primary, #4f46e5); flex-shrink: 0; }
.mobile-nav-group a.cat-active {
  background: var(--primary, #4f46e5); color: #fff !important;
  border-radius: 8px; padding: 8px 12px;
}
.nav-dropdown-divider {
  height: 1px; background: #e5e7eb; margin: 6px 8px;
}

/* Mobile nav group */
.mobile-nav-group {
  display: flex; flex-direction: column; gap: 4px;
}
.mobile-nav-label {
  font-size: 0.8rem; font-weight: 700; color: #9ca3af;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 8px 0 4px; margin-top: 8px;
}
.mobile-nav-group a {
  padding-left: 16px; font-size: 0.95rem;
}

/* Contact Modal — Ultra Modern 2026 */
.contact-modal-overlay {
  position: fixed; inset: 0; background: var(--modal-backdrop);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  z-index: 10001; display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.3s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
.contact-modal {
  background: var(--modal-bg);
  -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  border-radius: 28px; padding: 40px 36px 36px;
  max-width: 600px; width: 92%; position: relative;
  box-shadow: var(--shadow-xl), 0 0 0 1px var(--border-glass);
  border: 1px solid var(--border-glass);
  animation: contactSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.contact-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  border-radius: 28px 28px 0 0;
}
@keyframes contactSlideUp {
  from { opacity: 0; transform: translateY(40px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.contact-modal-close {
  position: absolute; top: 16px; right: 18px;
  background: var(--surface-glass); border: 1px solid var(--border-glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 1.4rem; color: var(--text-muted); cursor: pointer;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: all var(--transition-bounce);
  box-shadow: var(--shadow-xs);
}
.contact-modal-close:hover { background: rgba(239,68,68,0.15); color: #ef4444; transform: rotate(90deg) scale(1.1); }
.contact-modal-title {
  margin: 0 0 8px; font-size: 1.6rem; font-weight: 800; color: var(--text);
  letter-spacing: -0.02em;
}
.contact-modal-subtitle {
  margin: 0 0 28px; font-size: 1rem; color: var(--text-muted); line-height: 1.6;
}
.contact-modal-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.contact-card {
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass);
  border-radius: 20px; padding: 28px 24px; text-align: center;
  transition: all var(--transition-bounce);
  position: relative;
  overflow: hidden;
}
.contact-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.4s;
}
.contact-card:hover {
  border-color: var(--card-hover-border);
  box-shadow: var(--card-hover-shadow);
  transform: translateY(-6px) scale(1.02);
}
.contact-card:hover::before { opacity: 1; }
.contact-card-icon {
  width: 64px; height: 64px; margin: 0 auto 18px;
  background: var(--gradient-primary); border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 8px 24px var(--primary-glow);
  transition: all var(--transition-bounce);
}
.contact-card:hover .contact-card-icon {
  transform: scale(1.1) rotate(-3deg);
  box-shadow: 0 12px 32px var(--primary-glow);
}
.contact-card h3 {
  margin: 0 0 10px; font-size: 1.1rem; font-weight: 700; color: var(--text);
}
.contact-card-desc {
  margin: 0 0 16px; font-size: 0.85rem; color: var(--text-secondary);
  line-height: 1.6;
}
.contact-card-name {
  margin: 0 0 14px; font-size: 1rem; font-weight: 700;
  color: var(--primary);
}
.contact-card-link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 0.88rem; color: var(--text-secondary); text-decoration: none;
  margin-bottom: 10px; transition: all var(--transition);
  padding: 8px 14px; border-radius: var(--radius-xs);
}
.contact-card-link:hover { color: var(--primary); background: var(--primary-light); }
.contact-card-link svg { flex-shrink: 0; }
@media (max-width: 520px) {
  .contact-modal-cards { grid-template-columns: 1fr; }
  .contact-modal { padding: 32px 24px 28px; }
}

/* ===== Terms & Conditions Page ===== */
.terms-hero {
  padding: 120px 0 48px;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
  color: #fff;
  text-align: center;
}
.terms-hero h1 {
  font-size: 2.4rem;
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.terms-hero p {
  font-size: 1.1rem;
  opacity: 0.85;
  max-width: 600px;
  margin: 0 auto;
}
.terms-section {
  padding: 48px 0 64px;
  background: #f9fafb;
  min-height: 60vh;
}
.terms-container {
  max-width: 820px;
  margin: 0 auto;
}
.terms-last-updated {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 0 0 32px;
  text-align: right;
}

/* Accordion */
.terms-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.accordion-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.accordion-item:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.accordion-item.open {
  border-color: var(--primary, #4f46e5);
  box-shadow: 0 4px 20px rgba(79,70,229,0.1);
}
.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s;
}
.accordion-header:hover {
  background: #f3f4f6;
}
.accordion-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(79,70,229,0.1);
  color: var(--primary, #4f46e5);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.accordion-item.open .accordion-number {
  background: var(--primary, #4f46e5);
  color: #fff;
}
.accordion-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
}
.accordion-chevron {
  flex-shrink: 0;
  color: #9ca3af;
  transition: transform 0.3s ease;
}
.accordion-item.open .accordion-chevron {
  transform: rotate(180deg);
  color: var(--primary, #4f46e5);
}
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 20px 0 66px;
}
.accordion-item.open .accordion-body {
  max-height: 800px;
  padding: 0 20px 20px 66px;
}
.accordion-body p {
  margin: 0 0 12px;
  font-size: 0.95rem;
  color: #374151;
  line-height: 1.7;
}
.accordion-body p:last-child { margin-bottom: 0; }
.accordion-body ul {
  margin: 0 0 12px;
  padding-left: 20px;
}
.accordion-body li {
  font-size: 0.93rem;
  color: #374151;
  line-height: 1.7;
  margin-bottom: 4px;
}
.accordion-body a {
  color: var(--primary, #4f46e5);
  text-decoration: underline;
}
.terms-privacy-heading {
  margin: 36px 0 12px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  text-align: center;
  letter-spacing: -0.02em;
}
.accordion-body strong {
  color: #111827;
}

/* Terms contact */
.terms-contact {
  margin-top: 48px;
  padding: 32px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  text-align: center;
}
.terms-contact h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1f2937;
}
.terms-contact > p {
  margin: 0 0 20px;
  color: #6b7280;
  font-size: 0.95rem;
}
.terms-contact-cards {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
}
.terms-contact-cards > div {
  padding: 16px 24px;
  background: #f9fafb;
  border-radius: 10px;
  font-size: 0.93rem;
  color: #374151;
}
.terms-contact-cards a {
  color: var(--primary, #4f46e5);
  text-decoration: none;
}
.terms-contact-cards a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .terms-hero { padding: 100px 0 36px; }
  .terms-hero h1 { font-size: 1.7rem; }
  .terms-hero p { font-size: 0.95rem; padding: 0 16px; }
  .terms-section { padding: 32px 0 48px; }
  .accordion-header { padding: 14px 16px; gap: 10px; }
  .accordion-body { padding-left: 16px !important; padding-right: 16px !important; }
  .accordion-item.open .accordion-body { padding-left: 16px !important; }
  .accordion-number { width: 28px; height: 28px; font-size: 0.8rem; }
  .terms-contact { padding: 24px 16px; }
  .terms-contact-cards { flex-direction: column; gap: 12px; }
}

/* Chat mobile */
@media (max-width: 480px) {
  .chat-widget { bottom: 16px; right: 16px; }
  .helpbot-widget { bottom: 16px; left: 16px; }
  .chat-window { width: calc(100vw - 24px); max-height: 85vh; min-height: 400px; border-radius: 16px; }
}

/* ======================= HELP BOT WIDGET ======================= */
.helpbot-widget {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9998;
}

/* ── Toggle Button ── */
.helpbot-toggle {
  width: 62px; height: 62px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, #6366f1 0%, #818cf8 50%, #a78bfa 100%);
  color: #fff; cursor: grab;
  box-shadow: 0 6px 28px rgba(99,102,241,0.5), 0 0 0 0 rgba(99,102,241,0.3);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1), box-shadow 0.3s;
  position: relative;
  font-size: 26px;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.helpbot-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(99,102,241,0.25);
  animation: helpbotPulseRing 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes helpbotPulseRing {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.4); opacity: 0; }
}
.helpbot-toggle:active {
  cursor: grabbing;
}
.helpbot-toggle:active::before,
.helpbot-toggle:hover::before {
  display: none;
}
.helpbot-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 36px rgba(99,102,241,0.6);
}
.helpbot-toggle #helpBotIconOpen { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2)); }
.helpbot-toggle::after {
  content: 'FAQ';
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e1b4b;
  color: #e0e7ff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 10px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  letter-spacing: 0.5px;
}
.helpbot-toggle:hover::after { opacity: 1; }

/* ── Window ── */
.helpbot-window {
  position: fixed;
  bottom: 96px;
  left: 24px;
  width: 420px;
  max-height: 700px;
  background: #f8fafc;
  border-radius: 24px;
  box-shadow: 0 25px 80px rgba(0,0,0,0.14), 0 8px 32px rgba(99,102,241,0.08), 0 0 0 1px rgba(99,102,241,0.06);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  -webkit-animation: helpBotSlideUp 0.35s cubic-bezier(.16,1,.3,1);
  animation: helpBotSlideUp 0.35s cubic-bezier(.16,1,.3,1);
  z-index: 9999;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@-webkit-keyframes helpBotSlideUp {
  from { opacity: 0; -webkit-transform: translateY(20px) scale(0.96); transform: translateY(20px) scale(0.96); }
  to { opacity: 1; -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); }
}
@keyframes helpBotSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ── */
.helpbot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 40%, #818cf8 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.helpbot-header::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,0.15) 0%, transparent 45%),
    radial-gradient(circle at 15% 80%, rgba(255,255,255,0.06) 0%, transparent 40%);
  pointer-events: none;
}
.helpbot-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.helpbot-avatar {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.3);
  position: relative;
  flex-shrink: 0;
}
.helpbot-avatar::after {
  content: '';
  position: absolute; bottom: -2px; right: -2px;
  width: 11px; height: 11px;
  background: #34d399;
  border-radius: 50%;
  border: 2.5px solid #4f46e5;
  animation: helpbot-pulse-online 2s ease-in-out infinite;
}
@keyframes helpbot-pulse-online {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0.5); }
  50% { box-shadow: 0 0 0 4px rgba(52,211,153,0); }
}
.helpbot-name {
  font-weight: 700;
  font-size: 0.95rem;
  display: block;
  letter-spacing: -0.2px;
}
.helpbot-status {
  font-size: 0.73rem;
  opacity: 0.8;
  display: block;
  margin-top: 1px;
}
.helpbot-close {
  background: rgba(255,255,255,0.1); border: none; color: #fff;
  font-size: 18px; cursor: pointer;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  transition: background 0.15s, transform 0.15s;
  position: relative;
}
.helpbot-close:hover { background: rgba(255,255,255,0.25); transform: scale(1.06); }

.helpbot-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.helpbot-lang-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 0.73rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.helpbot-lang-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
}
.helpbot-msg .helpbot-lang-badge {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
  font-size: 0.65rem;
  padding: 1px 5px;
}
.helpbot-quick-btn .helpbot-lang-badge {
  background: #6366f1;
  border-color: transparent;
  color: #fff;
  font-size: 0.68rem;
  padding: 2px 6px;
}
.helpbot-lang-btn:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.4);
  transform: translateY(-1px);
}

/* ── Messages Area ── */
.helpbot-messages {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 20px 16px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  max-height: 480px;
  background: #f8fafc;
}
.helpbot-messages::-webkit-scrollbar { width: 4px; }
.helpbot-messages::-webkit-scrollbar-track { background: transparent; }
.helpbot-messages::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 10px; }

/* ── Message Bubbles ── */
.helpbot-msg {
  max-width: 88%;
  padding: 12px 16px;
  font-size: 0.92rem;
  line-height: 1.65;
  animation: helpMsgFade 0.4s cubic-bezier(.16,1,.3,1);
  position: relative;
  word-wrap: break-word;
}
@keyframes helpMsgFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.helpbot-msg.bot {
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  border-radius: 4px 18px 18px 18px;
  align-self: flex-start;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.helpbot-msg.user {
  background: linear-gradient(135deg, #6366f1, #818cf8);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
  align-self: flex-end;
  box-shadow: 0 3px 12px rgba(99,102,241,0.25);
}
.helpbot-msg.bot + .helpbot-msg.bot { margin-top: 4px; }
.helpbot-msg.user + .helpbot-msg.user { margin-top: 4px; }
.helpbot-msg.bot + .helpbot-msg.user,
.helpbot-msg.user + .helpbot-msg.bot { margin-top: 14px; }
.helpbot-msg ul {
  margin: 6px 0 2px;
  padding-left: 18px;
}
.helpbot-msg ol {
  margin: 6px 0 2px;
  padding-left: 18px;
}
.helpbot-msg li {
  margin-bottom: 3px;
}
.helpbot-msg a {
  color: #6366f1;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.helpbot-msg.user a { color: #e0e7ff; }
.helpbot-msg strong { font-weight: 600; }

/* ── Typing Indicator ── */
.helpbot-typing {
  display: flex;
  gap: 5px;
  padding: 14px 18px;
  align-self: flex-start;
  background: #fff;
  border-radius: 4px 18px 18px 18px;
  border: 1px solid #e2e8f0;
  margin-top: 14px;
}
.helpbot-typing span {
  width: 7px; height: 7px;
  background: #6366f1;
  border-radius: 50%;
  -webkit-animation: helpTypingDot 1.4s ease-in-out infinite;
  animation: helpTypingDot 1.4s ease-in-out infinite;
}
.helpbot-typing span:nth-child(2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.helpbot-typing span:nth-child(3) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
@-webkit-keyframes helpTypingDot {
  0%, 60%, 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 0.3; }
  30% { -webkit-transform: translateY(-6px); transform: translateY(-6px); opacity: 1; }
}
@keyframes helpTypingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* AI typing indicator dots */
.helpbot-typing-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.helpbot-typing-dots span {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: bold;
  color: #6366f1;
  -webkit-animation: helpTypingDot 1.4s ease-in-out infinite;
  animation: helpTypingDot 1.4s ease-in-out infinite;
}
.helpbot-typing-dots span:nth-child(2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.helpbot-typing-dots span:nth-child(3) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }

.helpbot-msg-bot {
  max-width: 88%;
  padding: 0;
  align-self: flex-start;
}
.helpbot-msg-bot .helpbot-msg-bubble {
  background: #fff;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  border-radius: 4px 18px 18px 18px;
  padding: 12px 16px;
  font-size: 0.92rem;
  line-height: 1.65;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ── Quick Buttons ── */
.helpbot-quick-btns {
  padding: 10px 14px 12px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 7px;
  border-top: 1px solid #eef2ff;
  background: #fff;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.helpbot-quick-btn {
  padding: 8px 15px;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1.5px solid #e0e7ff;
  border-radius: 22px;
  background: #eef2ff;
  color: #4338ca;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
  line-height: 1.3;
}
.helpbot-quick-btn:hover {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(99,102,241,0.3);
}

/* ── Input Area ── */
.helpbot-input-area {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  padding: 12px 14px;
  gap: 10px;
  border-top: 1px solid #eef2ff;
  background: #fff;
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
}
.helpbot-input-area input {
  flex: 1;
  border: 1.5px solid #e0e7ff;
  border-radius: 22px;
  padding: 11px 18px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
  background: #f8fafc;
}
.helpbot-input-area input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
  background: #fff;
}
.helpbot-send {
  width: 40px; height: 40px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #6366f1, #818cf8);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(99,102,241,0.3);
}
.helpbot-send:hover {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  transform: scale(1.06);
  box-shadow: 0 4px 16px rgba(99,102,241,0.4);
}

/* ── Mobile Fullscreen ── */
@media (max-width: 480px) {
  .helpbot-widget {
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
    left: 16px;
  }
  .helpbot-window {
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    border-radius: 0;
    box-shadow: none;
    -webkit-animation: helpBotFadeIn 0.25s ease-out;
    animation: helpBotFadeIn 0.25s ease-out;
  }
  @-webkit-keyframes helpBotFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes helpBotFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .helpbot-header {
    padding: 14px 16px;
    padding-top: max(14px, calc(env(safe-area-inset-top, 0px) + 8px));
    border-radius: 0;
  }
  .helpbot-messages {
    max-height: none;
    -webkit-flex: 1 1 0px;
    flex: 1 1 0px;
    min-height: 0;
    padding: 16px 14px;
    gap: 6px;
  }
  .helpbot-msg {
    font-size: 0.95rem;
    padding: 12px 16px;
    max-width: 92%;
    line-height: 1.65;
  }
  .helpbot-quick-btns {
    max-height: 130px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px;
  }
  .helpbot-quick-btn {
    padding: 10px 18px;
    font-size: 0.85rem;
  }
  .helpbot-input-area {
    padding: 12px 14px;
    padding-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px));
  }
  .helpbot-input-area input {
    font-size: 1rem !important;
    padding: 13px 18px;
  }
  .helpbot-send {
    width: 44px;
    height: 44px;
  }
  .helpbot-widget.helpbot-open .helpbot-toggle {
    display: none;
  }
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  background: rgba(255,255,255,0.22);
  color: #fff;
  transform: rotate(20deg);
}
.theme-toggle-btn svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.theme-toggle-btn .icon-sun,
.theme-toggle-btn .icon-moon {
  position: absolute;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1), opacity 0.3s ease;
}
.theme-toggle-btn .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0); }
.theme-toggle-btn .icon-moon { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="dark"] .theme-toggle-btn .icon-sun { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="dark"] .theme-toggle-btn .icon-moon { opacity: 0; transform: rotate(90deg) scale(0); }

/* Scrolled navbar theme toggle */
header.nav-header.scrolled .theme-toggle-btn {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}
header.nav-header.scrolled .theme-toggle-btn:hover {
  background: var(--primary);
  color: #fff;
}

/* Mobile nav theme toggle */
.theme-toggle-btn.mobile-theme {
  width: 100%;
  height: 40px;
  border-radius: 12px;
  margin-top: 12px;
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
  gap: 8px;
  font-weight: 600;
  font-size: 0.88rem;
}
.theme-toggle-btn.mobile-theme:hover { background: var(--primary); color: #fff; }
.theme-toggle-btn.mobile-theme .icon-sun,
.theme-toggle-btn.mobile-theme .icon-moon {
  position: static;
}
.theme-toggle-btn.mobile-theme .icon-sun { display: none; }
.theme-toggle-btn.mobile-theme .icon-moon { display: inline-flex; opacity: 1; transform: none; }
[data-theme="dark"] .theme-toggle-btn.mobile-theme .icon-sun { display: inline-flex; opacity: 1; transform: none; }
[data-theme="dark"] .theme-toggle-btn.mobile-theme .icon-moon { display: none; }

/* ============================================
   THEME TRANSITION (smooth switching)
   ============================================ */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.4s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, fill 0.3s ease !important;
}

/* ============================================
   DARK THEME — Component Overrides
   ============================================ */

/* Navbar dark overrides */
[data-theme="dark"] header.nav-header.scrolled .logo { color: #f1f5f9; }
[data-theme="dark"] header.nav-header.scrolled .logo span { color: #a5b4fc; }
[data-theme="dark"] header.nav-header.scrolled .nav-links a { color: #cbd5e1; }
[data-theme="dark"] header.nav-header.scrolled .nav-links a:hover { color: #a5b4fc; background: rgba(79,70,229,0.15); }
[data-theme="dark"] header.nav-header.scrolled .mobile-nav-toggle .hamburger,
[data-theme="dark"] header.nav-header.scrolled .mobile-nav-toggle .hamburger::before,
[data-theme="dark"] header.nav-header.scrolled .mobile-nav-toggle .hamburger::after { background: #f1f5f9; }

/* Hero gradient fades to dark bg */
[data-theme="dark"] .hero::after { background: linear-gradient(to bottom, transparent 80%, var(--bg) 100%); }

/* Search bar dark */
[data-theme="dark"] .search-bar input { color: var(--text); }
[data-theme="dark"] .search-bar input::placeholder { color: var(--text-muted); }

/* Filter clear btn dark hover */
[data-theme="dark"] .filter-clear-btn:hover { background: rgba(239,68,68,0.1); border-color: #ef4444; color: #f87171; }

/* Action button info dark */
[data-theme="dark"] .action-btn.info { background: #334155; }
[data-theme="dark"] .action-btn.info:hover { background: #475569; }

/* Modal dark */
[data-theme="dark"] .modal-main { background: #0f172a; }
[data-theme="dark"] .modal-content { box-shadow: 0 25px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); }
[data-theme="dark"] .close { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.08); color: #94a3b8; }
[data-theme="dark"] .close:hover { background: rgba(239,68,68,0.15); color: #f87171; border-color: rgba(239,68,68,0.25); }
[data-theme="dark"] .preview-stat { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .preview-stat:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(99,102,241,0.15); }
[data-theme="dark"] .move-in-estimate { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .modal-share-btn { box-shadow: 0 4px 16px rgba(99,102,241,0.25); }

/* Interest modal dark */
[data-theme="dark"] .interest-modal { background: var(--surface); }
[data-theme="dark"] .interest-modal-property { background: rgba(79,70,229,0.1); border-color: var(--border); color: #a5b4fc; }
[data-theme="dark"] .interest-form { background: var(--surface); }
[data-theme="dark"] .interest-field label { color: var(--text-secondary); }
[data-theme="dark"] .interest-field input,
[data-theme="dark"] .interest-field textarea { background: var(--bg); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .interest-field input:focus,
[data-theme="dark"] .interest-field textarea:focus { background: var(--surface); border-color: var(--primary); }
[data-theme="dark"] .interest-chip { background: rgba(79,70,229,0.1); border-color: rgba(79,70,229,0.25); color: #a5b4fc; }
[data-theme="dark"] .interest-chip:hover { background: rgba(79,70,229,0.2); border-color: #818cf8; }
[data-theme="dark"] .interest-success h3 { color: var(--text); }
[data-theme="dark"] .interest-success p { color: var(--text-muted); }
[data-theme="dark"] .interest-done-btn { background: var(--border); color: var(--text-secondary); }
[data-theme="dark"] .interest-done-btn:hover { background: #475569; }
[data-theme="dark"] .preview-interest-btn { border-color: var(--border); background: linear-gradient(135deg, rgba(79,70,229,0.08) 0%, rgba(124,58,237,0.08) 100%); }
[data-theme="dark"] .preview-interest-btn:hover { border-color: #818cf8; background: linear-gradient(135deg, rgba(79,70,229,0.15) 0%, rgba(124,58,237,0.15) 100%); }
[data-theme="dark"] .preview-interest-btn-title { color: #a5b4fc; }
[data-theme="dark"] .preview-interest-btn-sub { color: #818cf8; }
[data-theme="dark"] .preview-interest-btn-arrow { color: #818cf8; }

/* Schedule modal dark */
[data-theme="dark"] .schedule-modal-content { background: var(--surface); }
[data-theme="dark"] .schedule-body { background: var(--surface); }
[data-theme="dark"] .sched-accordion { border-color: var(--border); background: var(--bg); }
[data-theme="dark"] .sched-accordion:hover, [data-theme="dark"] .sched-accordion.open { border-color: #818cf8; }
[data-theme="dark"] .sched-accordion-trigger { background: var(--bg); }
[data-theme="dark"] .sched-accordion-trigger:hover { background: rgba(99,102,241,0.06); }
[data-theme="dark"] .sched-accordion-trigger.has-selection { background: rgba(99,102,241,0.08); }
[data-theme="dark"] .sched-accordion-panel { background: var(--surface); }
[data-theme="dark"] .sched-prop-card:hover { background: rgba(99,102,241,0.08); }
[data-theme="dark"] .sched-prop-card.selected { background: rgba(99,102,241,0.12); }
[data-theme="dark"] .sched-prop-addr { color: var(--text); }
[data-theme="dark"] .sched-prop-meta { color: var(--text-muted); }
[data-theme="dark"] .schedule-note { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.18); }
[data-theme="dark"] .schedule-summary { background: rgba(99,102,241,0.06); border-color: rgba(99,102,241,0.15); }
[data-theme="dark"] .input-with-icon input:focus, [data-theme="dark"] .input-with-icon textarea:focus { background: var(--bg); }
[data-theme="dark"] .sched-time-sel { background: var(--bg); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .sched-time-sel:focus { border-color: #818cf8; }
[data-theme="dark"] .sched-ampm-sel { background: rgba(99,102,241,0.1); color: #818cf8; border-color: rgba(99,102,241,0.25); }

/* Chat dark */
[data-theme="dark"] .chat-bubble-them { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .chat-typing { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .chat-send-form { background: var(--chat-window-bg); border-top-color: var(--border); }
[data-theme="dark"] .chat-send-form input { background: var(--bg); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .chat-send-form input:focus { background: var(--surface); }
[data-theme="dark"] .chat-messages-container { background: linear-gradient(180deg, rgba(79,70,229,0.05) 0%, var(--bg) 100%); }
[data-theme="dark"] .chat-login-title { color: var(--text); }
[data-theme="dark"] .chat-login-desc { color: var(--text-muted); }
[data-theme="dark"] .chat-login-field label { color: var(--text-secondary); }
[data-theme="dark"] .chat-login-field input { background: var(--bg); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .chat-login-field input:focus { background: var(--surface); }
[data-theme="dark"] .chat-login-footer { border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .chat-msg-sender { color: var(--text-muted); }
[data-theme="dark"] .chat-empty { color: var(--text-muted); }

/* Helpbot dark */
[data-theme="dark"] .helpbot-window { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .helpbot-messages { background: var(--bg); }
[data-theme="dark"] .helpbot-msg.bot { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .helpbot-bubble-bot { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .helpbot-msg-bot .helpbot-msg-bubble { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .helpbot-typing-dots span { color: var(--text-muted); }
[data-theme="dark"] .helpbot-input-area { background: var(--surface); border-top-color: var(--border); }
[data-theme="dark"] .helpbot-input-area input { background: var(--bg); border-color: var(--border); color: var(--text); }

/* Scrollbar dark */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); }

/* Dropdown menu dark */
[data-theme="dark"] .nav-dropdown-menu { background: var(--surface); box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
[data-theme="dark"] .nav-dropdown-menu a { color: var(--text-secondary) !important; }
[data-theme="dark"] .nav-dropdown-menu a:hover { background: rgba(79,70,229,0.12); color: #a5b4fc !important; }
[data-theme="dark"] .nav-dropdown-divider { background: var(--border); }

/* Mobile nav dark */
[data-theme="dark"] .mobile-nav-inner { background: var(--surface); box-shadow: -10px 0 40px rgba(0,0,0,0.4); }
[data-theme="dark"] .mobile-nav-list a { color: var(--text); }
[data-theme="dark"] .mobile-nav-label { color: var(--text-muted); }
[data-theme="dark"] .mobile-close { color: var(--text-muted); }
[data-theme="dark"] .mobile-close:hover { color: var(--text); }

/* Scrolled navbar dark (mobile) */
[data-theme="dark"] header.nav-header.scrolled { background: var(--nav-scrolled-bg); box-shadow: var(--nav-scrolled-shadow); }

/* Map modal dark */
[data-theme="dark"] .map-modal { background: var(--surface); }
[data-theme="dark"] .map-modal-header { border-bottom-color: var(--border); }
[data-theme="dark"] .map-modal-header h3 { color: var(--text); }
[data-theme="dark"] .map-modal-close:hover { background: rgba(255,255,255,0.08); color: var(--text); }
[data-theme="dark"] .map-modal-body { background: var(--bg); }
[data-theme="dark"] .map-section { background: var(--bg); }
[data-theme="dark"] .map-section .section-subtitle { color: var(--text-muted); }
[data-theme="dark"] .main-map { border-color: var(--border); }
[data-theme="dark"] .map-popup h4 { color: var(--text); }
[data-theme="dark"] .map-popup p { color: var(--text-muted); }
[data-theme="dark"] .map-search-input { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .map-search-results { background: var(--surface); }
[data-theme="dark"] .map-search-result-item { color: var(--text-secondary); }
[data-theme="dark"] .map-search-result-item:hover { background: rgba(79,70,229,0.12); }
[data-theme="dark"] .show-map-btn { background: var(--surface); }

/* Contact modal dark */
[data-theme="dark"] .contact-modal { background: var(--surface); }
[data-theme="dark"] .contact-modal-close:hover { background: rgba(255,255,255,0.08); color: var(--text); }
[data-theme="dark"] .contact-modal-title { color: var(--text); }
[data-theme="dark"] .contact-modal-subtitle { color: var(--text-muted); }
[data-theme="dark"] .contact-card { background: var(--bg); border-color: var(--border); }
[data-theme="dark"] .contact-card h3 { color: var(--text); }
[data-theme="dark"] .contact-card-desc { color: var(--text-muted); }
[data-theme="dark"] .contact-card-link { color: var(--text-secondary); }

/* Filter buttons dark */
[data-theme="dark"] .filter-btn { background: var(--surface); color: var(--text-secondary); border-color: var(--border); }
[data-theme="dark"] .filter-btn:hover { border-color: var(--primary); color: #a5b4fc; }

/* Terms page dark */
[data-theme="dark"] .terms-section { background: var(--bg); }
[data-theme="dark"] .terms-last-updated { color: var(--text-muted); }
[data-theme="dark"] .accordion-item { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .accordion-header:hover { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .accordion-title { color: var(--text); }
[data-theme="dark"] .accordion-body p { color: var(--text-secondary); }
[data-theme="dark"] .accordion-body li { color: var(--text-secondary); }
[data-theme="dark"] .accordion-body strong { color: var(--text); }
[data-theme="dark"] .terms-privacy-heading { color: var(--text); }
[data-theme="dark"] .terms-contact { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .terms-contact h3 { color: var(--text); }
[data-theme="dark"] .terms-contact > p { color: var(--text-muted); }
[data-theme="dark"] .terms-contact-cards > div { background: var(--bg); color: var(--text-secondary); }

/* Helpbot quick buttons dark */
[data-theme="dark"] .helpbot-quick-btns { background: var(--surface); border-top-color: var(--border); }
[data-theme="dark"] .helpbot-quick-btn { background: var(--bg); color: var(--text-secondary); border-color: var(--border); }
[data-theme="dark"] .helpbot-msg.bot { color: var(--text); background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .helpbot-typing { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .helpbot-typing span { background: #818cf8; }

/* Input focus dark */
[data-theme="dark"] .input-with-icon input:focus,
[data-theme="dark"] .input-with-icon textarea:focus { background: var(--surface); }

/* Chat badge dark */
[data-theme="dark"] .chat-badge { border-color: var(--surface); }

/* ============================================
   FEATURE: Favorites (floating heart on card image)
   ============================================ */
.card-fav-btn {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.25s ease; color: #64748b;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.card-fav-btn svg { width: 18px; height: 18px; transition: all 0.25s ease; }
.card-fav-btn:hover { transform: scale(1.15); background: #fff; }
.card-fav-btn.fav-active svg { fill: #ef4444 !important; stroke: #ef4444; animation: heartPop 0.4s ease; }
.card-fav-btn:hover svg { transform: scale(1.1); }
@keyframes heartPop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}
[data-theme="dark"] .card-fav-btn { background: rgba(30,41,59,0.9); color: #94a3b8; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
[data-theme="dark"] .card-fav-btn:hover { background: rgba(51,65,85,0.95); }

/* Compare icon (floating on card image) */
.card-compare-btn {
  position: absolute; top: 12px; right: 56px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1); color: #64748b;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  opacity: 0; pointer-events: none;
}
.card-compare-btn svg { width: 18px; height: 18px; }
.property-card:hover .card-compare-btn { opacity: 1; pointer-events: auto; }
.card-compare-btn:hover { transform: scale(1.15); background: #fff; }
.card-compare-btn.compare-active { opacity: 1 !important; pointer-events: auto !important; background: var(--primary) !important; color: #fff !important; }
.card-compare-btn.compare-active svg { stroke: #fff; }
[data-theme="dark"] .card-compare-btn { background: rgba(15,23,42,0.75); color: #94a3b8; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
[data-theme="dark"] .card-compare-btn:hover { background: rgba(30,41,59,0.95); }

.modal-fav-btn {
  position: absolute; top: 16px; right: 112px; z-index: 12;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.2s; color: #64748b;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.modal-fav-btn:hover { background: rgba(255,255,255,1); transform: scale(1.1); }
.modal-fav-btn.fav-active svg { fill: #ef4444 !important; stroke: #ef4444; }
[data-theme="dark"] .modal-fav-btn { background: rgba(30,41,59,0.85); color: #94a3b8; }
[data-theme="dark"] .modal-fav-btn:hover { background: rgba(30,41,59,1); }

.modal-print-btn, .modal-calc-btn {
  position: absolute; z-index: 12;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.2s; color: #64748b;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.modal-print-btn { top: 16px; right: 160px; }
.modal-calc-btn { top: 16px; right: 208px; }
.modal-print-btn:hover, .modal-calc-btn:hover { background: rgba(255,255,255,1); transform: scale(1.1); }
[data-theme="dark"] .modal-print-btn, [data-theme="dark"] .modal-calc-btn { background: rgba(30,41,59,0.85); color: #94a3b8; }
[data-theme="dark"] .modal-print-btn:hover, [data-theme="dark"] .modal-calc-btn:hover { background: rgba(30,41,59,1); }

.filter-fav-btn, .filter-alert-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-secondary);
  transition: all 0.2s;
}
.filter-fav-btn:hover { border-color: var(--danger,#ef4444); color: var(--danger,#ef4444); }
.filter-fav-btn.active { background: #fef2f2; border-color: var(--danger,#ef4444); color: var(--danger,#ef4444); }
[data-theme="dark"] .filter-fav-btn.active { background: rgba(239,68,68,0.12); }
.filter-alert-btn {
  background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
  color: #fff !important;
  border-color: transparent;
  position: relative;
  overflow: hidden;
}
.filter-alert-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
  animation: alertBtnShimmer 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes alertBtnShimmer {
  0% { transform: translateX(-100%); }
  50%, 100% { transform: translateX(100%); }
}
.filter-alert-btn:hover { border-color: transparent; color: #fff !important; opacity: 0.92; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.35); }

/* ---- Prominent Alerts CTA Banner ---- */
.alerts-cta-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 50%, #ede9fe 100%);
  border: 1.5px solid rgba(99,102,241,0.18);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 18px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.3s, border-color 0.3s;
  position: relative;
  overflow: hidden;
}
.alerts-cta-banner::before {
  content: '';
  position: absolute;
  top: -80%; right: -8%;
  width: 120px; height: 120px;
  background: rgba(99,102,241,0.05);
  border-radius: 50%;
  pointer-events: none;
}
.alerts-cta-banner:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(99,102,241,0.13);
  border-color: rgba(99,102,241,0.35);
}
.alerts-cta-icon {
  position: relative;
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}
.alerts-cta-ping {
  position: absolute;
  top: -2px; right: -2px;
  width: 9px; height: 9px;
  background: #ef4444;
  border-radius: 50%;
  border: 1.5px solid #eef2ff;
}
.alerts-cta-ping::after {
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  background: rgba(239,68,68,0.5);
  animation: alertPing 2s cubic-bezier(0,0,0.2,1) infinite;
  pointer-events: none;
}
@keyframes alertPing {
  0% { transform: scale(1); opacity: 1; }
  70% { transform: scale(2.5); opacity: 0; }
  100% { transform: scale(2.5); opacity: 0; }
}
.alerts-cta-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: #4338ca;
  line-height: 1.35;
}
.alerts-cta-text strong {
  font-weight: 700;
  color: #312e81;
  margin-right: 4px;
}
.alerts-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(99,102,241,0.25);
  pointer-events: none;
  white-space: nowrap;
}
.alerts-cta-banner:hover .alerts-cta-btn {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(99,102,241,0.35);
}

/* Dark mode */
[data-theme="dark"] .alerts-cta-banner {
  background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(99,102,241,0.06) 100%);
  border-color: rgba(99,102,241,0.2);
}
[data-theme="dark"] .alerts-cta-banner::before { background: rgba(99,102,241,0.04); }
[data-theme="dark"] .alerts-cta-text strong { color: #c7d2fe; }
[data-theme="dark"] .alerts-cta-text { color: #a5b4fc; }
[data-theme="dark"] .alerts-cta-ping { border-color: rgba(99,102,241,0.1); }
[data-theme="dark"] .filter-alert-btn { background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%); }

/* Mobile */
@media (max-width: 640px) {
  .alerts-cta-banner { padding: 9px 12px; gap: 8px; }
  .alerts-cta-text { font-size: 12px; }
  .alerts-cta-btn { padding: 6px 10px; font-size: 11px; }
}
.fav-count-badge {
  display: none;
  background: var(--danger,#ef4444); color: #fff; font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center;
}

/* ============================================
   FEATURE: Compare
   ============================================ */

.compare-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  background: var(--surface); border-top: 1.5px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 20px; animation: slideUpBar 0.3s ease;
}
@keyframes slideUpBar { from { transform: translateY(100%); } to { transform: translateY(0); } }
.compare-count { font-weight: 600; color: var(--text); font-size: 14px; }
.compare-go-btn {
  background: var(--primary); color: #fff; border: none; padding: 10px 24px;
  border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 14px; transition: opacity 0.2s;
}
.compare-go-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.compare-clear-btn {
  background: none; border: 1.5px solid var(--border); color: var(--text-muted);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.compare-clear-btn:hover { border-color: var(--danger); color: var(--danger); }

.compare-modal-overlay { z-index: 10001; }
.compare-modal-content { max-width: 900px; }
.compare-modal-content h2 { margin-bottom: 16px; font-size: 22px; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.compare-label { font-weight: 600; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.compare-feat { display: inline-block; background: var(--primary-light); padding: 2px 8px; border-radius: 4px; font-size: 12px; margin: 2px; }
[data-theme="dark"] .compare-bar { background: var(--surface); border-top-color: var(--border); }
@media (max-width: 600px) {
  .compare-modal-content { max-width: 100%; padding: 16px 10px; }
  .compare-modal-content h2 { font-size: 1.1rem; }
  .compare-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-table td { padding: 8px 10px; font-size: 0.82rem; white-space: normal; }
  .compare-label { font-size: 0.7rem; }
  .compare-table col[style*="width:100px"] { width: 70px !important; }
}

/* ============================================
   FEATURE: Recently Viewed
   ============================================ */
.recently-viewed-section { padding: 40px 0 20px; }
.recently-viewed-section h2 { font-size: 22px; margin-bottom: 16px; }
.recently-viewed-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px;
}
.rv-card {
  background: var(--surface); border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border); cursor: pointer; transition: all 0.2s;
}
.rv-card:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px); }
.rv-card img { width: 100%; height: 110px; object-fit: cover; }
.rv-info { padding: 10px 12px; }
.rv-title { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-price { font-size: 14px; font-weight: 700; color: var(--primary); margin-top: 2px; }

/* ============================================
   FEATURE: Testimonials
   ============================================ */
/* ============================================
   SECTION: Why Choose D&Y — Ultra Modern 2026
   ============================================ */
.why-choose-section {
  padding: 80px 0 70px;
  background: var(--bg);
  position: relative;
}
.why-choose-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 100%;
  background: radial-gradient(ellipse at center, var(--primary-light) 0%, transparent 70%);
  opacity: 0.5;
  pointer-events: none;
}
.why-choose-section h2 {
  text-align: center;
  font-size: 32px;
  margin-bottom: 8px;
  position: relative;
}
.why-choose-section .section-subtitle {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 48px;
  position: relative;
}
.why-choose-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.why-card {
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius);
  padding: 32px 26px;
  text-align: center;
  transition: all var(--transition-bounce);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.4s, height 0.4s;
}
.why-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.4s;
  z-index: -1;
}
.why-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  border-color: var(--card-hover-border);
}
.why-card:hover::before { opacity: 1; height: 5px; }
.why-card:hover::after { opacity: 0.03; }
.why-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  transition: transform var(--transition-bounce), box-shadow var(--transition);
}
.why-card:hover .why-icon {
  transform: scale(1.1) rotate(-3deg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}
.why-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.why-card p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}

/* ============================================
   SECTION: How It Works — Ultra Modern 2026
   ============================================ */
.how-it-works-section {
  padding: 80px 0 70px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.how-it-works-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse, var(--accent-light) 0%, transparent 60%);
  opacity: 0.4;
  pointer-events: none;
}
.how-it-works-section h2 {
  text-align: center;
  font-size: 32px;
  margin-bottom: 8px;
  position: relative;
}
.how-it-works-section .section-subtitle {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 56px;
  position: relative;
}
.hiw-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
}
.hiw-step {
  flex: 1;
  text-align: center;
  padding: 0 20px;
  position: relative;
}
.hiw-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 4px 16px var(--primary-glow);
  transition: all var(--transition-bounce);
}
.hiw-step:hover .hiw-number {
  transform: scale(1.15);
  box-shadow: 0 8px 24px var(--primary-glow);
}
.hiw-icon {
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.08));
  border: 1px solid rgba(99,102,241,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  color: var(--primary);
  transition: all var(--transition-bounce);
  position: relative;
}
.hiw-icon::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 26px;
  background: var(--gradient-primary);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s;
}
.hiw-step:hover .hiw-icon {
  transform: scale(1.1) rotate(-3deg);
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(139,92,246,0.15));
  box-shadow: 0 12px 32px rgba(99,102,241,0.2);
  border-color: rgba(99,102,241,0.3);
}
.hiw-step:hover .hiw-icon::before { opacity: 0.1; }
.hiw-connector {
  display: flex;
  align-items: center;
  padding-top: 80px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.3s;
}
.hiw-steps:hover .hiw-connector { opacity: 1; }
.hiw-step h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.hiw-step p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}
.hiw-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 44px;
}
.hiw-cta .btn-outline {
  border: 2px solid var(--primary);
  color: var(--primary);
  background: transparent;
  padding: 12px 28px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  font-size: 15px;
}
.hiw-cta .btn-outline:hover {
  background: var(--primary);
  color: #fff;
}

/* Mobile: Why Choose + How It Works */
@media (max-width: 900px) {
  .why-choose-grid { grid-template-columns: repeat(2, 1fr); }
  .hiw-connector { display: none; }
  .hiw-steps { flex-direction: column; gap: 28px; align-items: center; }
  .hiw-step { max-width: 340px; }
}
@media (max-width: 550px) {
  .why-choose-grid { grid-template-columns: 1fr; gap: 12px; }
  /* Horizontal card layout: icon left, text right using CSS grid */
  .why-card {
    padding: 18px 16px;
    text-align: left;
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 14px;
    align-items: start;
  }
  .why-card::before { height: 0; /* disable top bar for horizontal layout */ }
  .why-icon {
    margin: 0;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    grid-row: 1 / -1;
    align-self: center;
  }
  .why-icon svg { width: 22px; height: 22px; }
  .why-card h3 { font-size: 15px; margin-bottom: 0; grid-column: 2; }
  .why-card p { font-size: 13px; line-height: 1.55; grid-column: 2; }
  .why-choose-section { padding: 44px 0 36px; }
  .how-it-works-section { padding: 44px 0 36px; }
  .hiw-cta { flex-direction: column; align-items: center; }
  .hiw-cta .btn-primary, .hiw-cta .btn-outline { width: 100%; max-width: 280px; text-align: center; }
  .hiw-step { max-width: 100%; }
  .hiw-step p { font-size: 13px; }
  .hiw-number { width: 36px; height: 36px; font-size: 1rem; }
  .hiw-icon svg { width: 26px; height: 26px; }
}

/* === Gallery Showcase === */
.gallery-showcase-section {
  padding: 70px 0 60px;
  background: var(--surface);
}
.gallery-showcase-section h2 {
  text-align: center; font-size: 28px; margin-bottom: 6px;
}
.gallery-showcase-section .section-subtitle {
  text-align: center; color: var(--text-muted); margin-bottom: 32px;
}
.gallery-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 180px;
  gap: 10px;
}
.gallery-showcase-grid .gs-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}
.gallery-showcase-grid .gs-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  z-index: 2;
}
.gallery-showcase-grid .gs-item.gs-featured {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery-showcase-grid .gs-item img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 0.4s;
}
.gallery-showcase-grid .gs-item:hover img {
  transform: scale(1.05);
}
.gallery-showcase-grid .gs-item .gs-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, transparent 50%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px; opacity: 0;
  transition: opacity 0.3s;
}
.gallery-showcase-grid .gs-item:hover .gs-overlay {
  opacity: 1;
}
.gallery-showcase-grid .gs-overlay .gs-label {
  color: #fff; font-size: 0.82rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gallery-showcase-grid .gs-overlay .gs-city {
  color: rgba(255,255,255,.75); font-size: 0.72rem; margin-top: 2px;
}
.gallery-showcase-grid .gs-item.gs-video-item .gs-play-btn {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, transform 0.3s;
  pointer-events: none;
}
.gallery-showcase-grid .gs-item.gs-video-item:hover .gs-play-btn {
  background: var(--primary); transform: translate(-50%, -50%) scale(1.1);
}
.gallery-showcase-more {
  text-align: center; margin-top: 28px;
}
.gallery-showcase-more a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--primary); font-weight: 600; font-size: 0.95rem; text-decoration: none;
  transition: gap 0.3s;
}
.gallery-showcase-more a:hover { gap: 10px; }

@media (max-width: 900px) {
  .gallery-showcase-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 160px; }
  .gallery-showcase-grid .gs-item.gs-featured { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 600px) {
  .gallery-showcase-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; gap: 8px; }
  .gallery-showcase-grid .gs-item.gs-featured { grid-column: span 2; grid-row: span 1; height: 190px; }
  .gallery-showcase-section { padding: 44px 0 36px; }
  /* Show overlay labels on mobile (no hover) */
  .gallery-showcase-grid .gs-item .gs-overlay { opacity: 1; }
}

.testimonials-section { padding: 60px 0; background: var(--bg); }
.testimonials-section h2 { text-align: center; font-size: 28px; margin-bottom: 6px; }
.testimonials-section .section-subtitle { text-align: center; color: var(--text-muted); margin-bottom: 36px; }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.testimonial-card {
  background: var(--surface); border-radius: var(--radius); padding: 28px;
  border: 1px solid var(--border); transition: all 0.3s;
}
.testimonial-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.testimonial-stars { font-size: 18px; color: #f59e0b; margin-bottom: 12px; letter-spacing: 2px; }
.testimonial-stars .star-empty { color: var(--border); }
.testimonial-text { font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); margin-bottom: 18px; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #818cf8);
  color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.testimonial-author strong { display: block; font-size: 14px; color: var(--text); }
.testimonial-author span { font-size: 12px; color: var(--text-muted); }

/* ============================================
   FEATURE: Cookie Consent Banner
   ============================================ */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000;
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -4px 30px rgba(0,0,0,0.12);
  padding: 16px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  animation: slideUpBanner 0.4s ease;
}
@keyframes slideUpBanner { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cookie-banner.cookie-hide { animation: slideDownBanner 0.4s ease forwards; }
@keyframes slideDownBanner { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } }
.cookie-content { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 200px; }
.cookie-content svg { flex-shrink: 0; color: var(--primary); }
.cookie-content p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0; }
.cookie-content a { color: var(--primary); text-decoration: underline; }
.cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-accept {
  background: var(--primary); color: #fff; border: none; padding: 8px 20px;
  border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 13px; transition: background 0.2s;
}
.cookie-accept:hover { background: var(--primary-dark); }
.cookie-decline {
  background: transparent; color: var(--text-muted); border: 1.5px solid var(--border);
  padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; transition: all 0.2s;
}
.cookie-decline:hover { border-color: var(--text-muted); }
[data-theme="dark"] .cookie-banner { background: var(--surface); border-top-color: var(--border); box-shadow: 0 -4px 30px rgba(0,0,0,0.4); }

/* ============================================
   FEATURE: Rent Calculator Modal
   ============================================ */
.rent-calc-overlay { z-index: 10001; }
.rent-calc-content { max-width: 440px; padding: 24px !important; }
.calc-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.calc-icon-circle {
  width: 44px; height: 44px; min-width: 44px; border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.rent-calc-content h2 { font-size: 18px; margin: 0; line-height: 1.2; }
.calc-subtitle { color: var(--text-muted); font-size: 13px; margin: 2px 0 0 0; }
.calc-hint { font-weight: 400; color: var(--text-muted); font-size: 11px; }
.calc-fields { display: flex; gap: 12px; margin-bottom: 16px; }
.calc-field { flex: 1; }
.calc-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }
.calc-input-wrap {
  display: flex; align-items: center; background: var(--input-bg,#fff); border: 1.5px solid var(--border);
  border-radius: 8px; overflow: hidden; transition: border-color 0.2s;
}
.calc-input-wrap:focus-within { border-color: var(--primary); }
.calc-input-wrap span { padding: 0 8px 0 10px; font-weight: 600; color: var(--text-muted); font-size: 14px; }
.calc-input-wrap input {
  border: none; outline: none; padding: 9px 8px 9px 0; font-size: 14px; width: 100%;
  background: transparent; color: var(--text);
}
.calc-empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 10px; text-align: center; color: var(--text-muted); font-size: 13px;
}
.calc-result { display: flex; flex-direction: column; gap: 6px; }
/* Ratio visual bar */
.calc-ratio-bar-wrap { margin-bottom: 4px; }
.calc-ratio-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.calc-ratio-header .calc-ratio-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.calc-ratio-header .calc-ratio-pct { font-size: 20px; font-weight: 800; }
.calc-ratio-pct.ratio-good { color: #059669; }
.calc-ratio-pct.ratio-warn { color: #d97706; }
.calc-ratio-pct.ratio-bad { color: #dc2626; }
.calc-ratio-bar { height: 8px; background: var(--border-light,#e2e8f0); border-radius: 99px; overflow: hidden; }
.calc-ratio-fill { height: 100%; border-radius: 99px; transition: width 0.4s ease, background 0.3s; }
.calc-ratio-fill.ratio-good { background: linear-gradient(90deg, #10b981, #059669); }
.calc-ratio-fill.ratio-warn { background: linear-gradient(90deg, #f59e0b, #d97706); }
.calc-ratio-fill.ratio-bad { background: linear-gradient(90deg, #ef4444, #dc2626); }
.calc-ratio-legend { display: flex; gap: 12px; margin-top: 4px; }
.calc-ratio-legend span { font-size: 10px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.calc-ratio-legend span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.calc-ratio-legend .leg-good::before { background: #10b981; }
.calc-ratio-legend .leg-warn::before { background: #f59e0b; }
.calc-ratio-legend .leg-bad::before { background: #ef4444; }
/* Stats grid */
.calc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.calc-stat-card {
  padding: 10px 12px; background: var(--primary-light); border-radius: 10px; text-align: center;
}
.calc-stat-value { font-size: 16px; font-weight: 700; color: var(--primary); line-height: 1.2; }
.calc-stat-label { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
/* Verdict */
.calc-verdict-msg2 {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 500; line-height: 1.4; margin-top: 4px;
}
.calc-verdict-msg2 svg { min-width: 20px; margin-top: 1px; }
.calc-verdict-msg2.v-pass { background: #d1fae5; color: #065f46; }
.calc-verdict-msg2.v-warn { background: #fef3c7; color: #92400e; }
.calc-verdict-msg2.v-bad { background: #fee2e2; color: #991b1b; }
/* Tip */
.calc-tip { font-size: 11px; color: var(--text-muted); margin-top: 6px; text-align: center; }
.calc-tip b { color: var(--text-secondary); }
/* Dark mode overrides */
[data-theme="dark"] .calc-icon-circle { box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
[data-theme="dark"] .calc-stat-card { background: rgba(79,70,229,0.1); }
[data-theme="dark"] .calc-ratio-bar { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .calc-verdict-msg2.v-pass { background: rgba(5,150,105,0.15); color: #6ee7b7; }
[data-theme="dark"] .calc-verdict-msg2.v-warn { background: rgba(245,158,11,0.15); color: #fbbf24; }
[data-theme="dark"] .calc-verdict-msg2.v-bad { background: rgba(239,68,68,0.12); color: #fca5a5; }
[data-theme="dark"] .calc-input-wrap { background: var(--surface); border-color: var(--border); }

/* ============================================
   FEATURE: Saved Search / Alerts Modal
   ============================================ */
.saved-search-overlay { z-index: 10001; }
.saved-search-content {
  max-width: 480px;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 24px;
}

/* ---- Header ---- */
.ss-header {
  text-align: center;
  padding: 32px 28px 20px;
  background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
  position: relative;
  overflow: hidden;
}
.ss-header::before {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 200px; height: 200px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}
.ss-header::after {
  content: '';
  position: absolute;
  bottom: -30%; left: -15%;
  width: 160px; height: 160px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
}
.ss-icon-ring {
  width: 60px; height: 60px;
  margin: 0 auto 14px;
  background: rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,0.25);
  animation: ssBellRing 2s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
.ss-icon-ring svg { stroke: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15)); }
@keyframes ssBellRing {
  0%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(12deg); }
  20% { transform: rotate(-10deg); }
  30% { transform: rotate(6deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(0deg); }
}
.ss-header h2 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  position: relative;
  z-index: 1;
}
.ss-subtitle {
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Close btn override on gradient header */
.saved-search-content .close {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
  z-index: 5;
}
.saved-search-content .close:hover {
  background: rgba(255,255,255,0.3);
}

/* ---- Form ---- */
.saved-search-content form {
  padding: 24px 28px 28px;
}

/* Divider */
.ss-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
}
.ss-divider::before, .ss-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.ss-field { margin-bottom: 14px; }
.ss-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Input wrapper with icon */
.ss-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.ss-input-icon {
  position: absolute;
  left: 12px;
  pointer-events: none;
  color: var(--text-muted);
  opacity: 0.55;
  transition: opacity 0.2s, color 0.2s;
  z-index: 1;
  flex-shrink: 0;
}
.ss-input-wrap:focus-within .ss-input-icon {
  opacity: 1;
  color: var(--primary);
}
.ss-field input, .ss-field select {
  width: 100%;
  padding: 11px 12px 11px 38px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  background: var(--input-bg, #f8fafc);
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.ss-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
.ss-field input:focus, .ss-field select:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
  background: var(--input-bg, #fff);
}
.ss-field input::placeholder { color: var(--text-muted); opacity: 0.5; }

.ss-field-row { display: flex; gap: 12px; }
.ss-field-row .ss-field { flex: 1; }

/* Submit button */
.ss-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.3s;
  box-shadow: 0 4px 14px rgba(99,102,241,0.3);
  margin-top: 6px;
}
.ss-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99,102,241,0.4);
}
.ss-submit:active {
  transform: translateY(0);
}

/* ---- Success state ---- */
.ss-success {
  text-align: center;
  padding: 48px 28px 36px;
}
.ss-success-ring {
  width: 72px; height: 72px;
  margin: 0 auto 18px;
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: ssSuccessPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ssSuccessPop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.ss-success h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}
.ss-success p {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 24px;
}
.ss-done-btn {
  border-radius: 14px !important;
  padding: 12px 36px !important;
  font-weight: 600;
}

/* ---- Dark mode ---- */
[data-theme="dark"] .ss-header {
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
}
[data-theme="dark"] .ss-field input, [data-theme="dark"] .ss-field select {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .ss-field input:focus, [data-theme="dark"] .ss-field select:focus {
  background: var(--card-bg, var(--surface));
}
[data-theme="dark"] .ss-success-ring {
  background: linear-gradient(135deg, rgba(34,197,94,0.15) 0%, rgba(34,197,94,0.08) 100%);
}

/* ============================================
   Mobile adjustments for new features
   ============================================ */
@media (max-width: 600px) {
  .cookie-banner { flex-direction: column; align-items: stretch; padding: 14px 16px; gap: 12px; }
  .cookie-content { flex-direction: column; text-align: center; }
  .cookie-actions { justify-content: center; }
  .compare-bar { padding: 10px 14px; gap: 8px; }
  .calc-fields { flex-direction: column; gap: 8px; }
  .calc-stats { grid-template-columns: 1fr 1fr; gap: 6px; }
  .rent-calc-content { padding: 18px !important; }
  .ss-field-row { flex-direction: column; gap: 10px; }
  .saved-search-content form { padding: 20px 20px 24px; }
  .ss-header { padding: 28px 20px 18px; }
  .ss-header h2 { font-size: 20px; }
  .ss-icon-ring { width: 52px; height: 52px; }
  .ss-icon-ring svg { width: 24px; height: 24px; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .recently-viewed-grid { grid-template-columns: repeat(2, 1fr); }
  .modal-fav-btn { right: 100px; left: auto; width: 34px; height: 34px; }
  .modal-print-btn { right: 140px; left: auto; width: 34px; height: 34px; }
  .modal-calc-btn { right: 180px; left: auto; width: 34px; height: 34px; }
  .filter-fav-btn span { display: none; }
  .filter-fav-btn { padding: 8px 10px; }
  .filter-alert-btn span { display: none; }
  .filter-alert-btn { padding: 8px 10px; }
  .card-compare-btn { opacity: 1; pointer-events: auto; width: 34px; height: 34px; top: 10px; right: 50px; }
  .card-fav-btn { width: 34px; height: 34px; top: 10px; right: 10px; }
  .card-compare-btn svg, .card-fav-btn svg { width: 16px; height: 16px; }
}

/* ============================================
   FEATURE: Analytics Dashboard v3 (Modern)
   ============================================ */
    /* Analytics Container */
    .ana3-container {
      padding: 0;
    }

    /* Header with glassmorphism */
    .ana3-header {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(139,92,246,0.1) 100%);
      -webkit-backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(139,92,246,0.2);
      border-radius: 20px;
      padding: 24px 28px;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
    }
    .ana3-header::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%);
      pointer-events: none;
    }
    .ana3-header-title {
      display: flex;
      flex-direction: column;
      gap: 4px;
      z-index: 1;
    }
    .ana3-header-title h3 {
      margin: 0;
      font-size: 1.4rem;
      font-weight: 700;
      background: linear-gradient(135deg, #f1f5f9, #c4b5fd);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .ana3-header-title p {
      margin: 0;
      font-size: 0.85rem;
      color: #94a3b8;
    }
    .ana3-header-actions {
      display: flex;
      gap: 10px;
      z-index: 1;
    }
    .ana3-refresh-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.05);
      color: #c4b5fd;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      font-family: inherit;
    }
    .ana3-refresh-btn:hover {
      background: rgba(255,255,255,0.1);
      transform: translateY(-2px);
    }

    /* Period Tabs */
    .ana3-period-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .ana3-period-btn {
      padding: 10px 20px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(30,41,59,0.6);
      color: #94a3b8;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      font-family: inherit;
    }
    .ana3-period-btn:hover {
      background: rgba(255,255,255,0.05);
      border-color: rgba(255,255,255,0.15);
    }
    .ana3-period-btn.active {
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 4px 12px rgba(99,102,241,0.3);
    }

    /* Stats Grid */
    .ana3-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }
    .ana3-stat-card {
      background: rgba(30,41,59,0.5);
      -webkit-backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 16px;
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 14px;
      transition: all 0.25s;
      cursor: default;
    }
    .ana3-stat-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
      border-color: rgba(99,102,241,0.3);
    }
    .ana3-stat-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      flex-shrink: 0;
    }
    .ana3-stat-icon.views { background: linear-gradient(135deg, rgba(99,102,241,0.3), rgba(139,92,246,0.2)); }
    .ana3-stat-icon.visitors { background: linear-gradient(135deg, rgba(16,185,129,0.3), rgba(52,211,153,0.2)); }
    .ana3-stat-icon.properties { background: linear-gradient(135deg, rgba(245,158,11,0.3), rgba(251,191,36,0.2)); }
    .ana3-stat-icon.sessions { background: linear-gradient(135deg, rgba(236,72,153,0.3), rgba(244,114,182,0.2)); }
    .ana3-stat-content {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .ana3-stat-value {
      font-size: 1.6rem;
      font-weight: 800;
      color: #f1f5f9;
      line-height: 1;
    }
    .ana3-stat-label {
      font-size: 0.75rem;
      color: #64748b;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .ana3-stat-change {
      font-size: 0.7rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 2px;
      margin-top: 4px;
    }
    .ana3-stat-change.up { color: #10b981; }
    .ana3-stat-change.down { color: #ef4444; }

    /* Chart Section */
    .ana3-chart-section {
      background: rgba(30,41,59,0.5);
      -webkit-backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 18px;
      padding: 24px;
      margin-bottom: 24px;
    }
    .ana3-chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .ana3-chart-title {
      font-size: 1rem;
      font-weight: 700;
      color: #f1f5f9;
      margin: 0;
    }
    .ana3-chart-legend {
      display: flex;
      gap: 16px;
      font-size: 0.75rem;
      color: #94a3b8;
    }
    .ana3-chart-legend span {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .ana3-chart-legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
    .ana3-chart-legend-dot.views { background: #6366f1; }
    .ana3-chart-legend-dot.sessions { background: #10b981; }
    .ana3-bar-chart {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      height: 180px;
      padding-top: 10px;
    }
    .ana3-bar-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
      justify-content: flex-end;
      gap: 4px;
    }
    .ana3-bar-value {
      font-size: 0.7rem;
      font-weight: 700;
      color: #c4b5fd;
    }
    .ana3-bar {
      width: 100%;
      max-width: 36px;
      background: linear-gradient(180deg, #6366f1, #8b5cf6);
      border-radius: 6px 6px 2px 2px;
      min-height: 4px;
      transition: height 0.5s ease, box-shadow 0.2s;
    }
    .ana3-bar:hover {
      box-shadow: 0 0 16px rgba(99,102,241,0.5);
    }
    .ana3-bar-label {
      font-size: 0.65rem;
      color: #64748b;
      margin-top: 6px;
      font-weight: 500;
    }

    /* Two Column Layout */
    .ana3-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 24px;
    }

    /* Properties Section */
    .ana3-section {
      background: rgba(30,41,59,0.5);
      -webkit-backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 18px;
      padding: 24px;
    }
    .ana3-section-title {
      font-size: 1rem;
      font-weight: 700;
      color: #f1f5f9;
      margin: 0 0 16px 0;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .ana3-section-title svg {
      color: #8b5cf6;
    }

    /* Top Properties List */
    .ana3-prop-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .ana3-prop-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      background: rgba(15,23,42,0.4);
      border: 1px solid rgba(255,255,255,0.04);
      border-radius: 12px;
      transition: all 0.2s;
    }
    .ana3-prop-item:hover {
      background: rgba(15,23,42,0.6);
      border-color: rgba(99,102,241,0.2);
    }
    .ana3-prop-rank {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 0.8rem;
      flex-shrink: 0;
    }
    .ana3-prop-rank.rank-1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1e293b; }
    .ana3-prop-rank.rank-2 { background: linear-gradient(135deg, #94a3b8, #64748b); color: #1e293b; }
    .ana3-prop-rank.rank-3 { background: linear-gradient(135deg, #d97706, #b45309); color: #fff; }
    .ana3-prop-rank.rank-other { background: rgba(100,116,139,0.2); color: #94a3b8; }
    .ana3-prop-thumb {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      object-fit: cover;
      flex-shrink: 0;
      background: rgba(30,41,59,0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #64748b;
      font-size: 18px;
    }
    .ana3-prop-info {
      flex: 1;
      min-width: 0;
    }
    .ana3-prop-name {
      font-size: 0.85rem;
      font-weight: 600;
      color: #e2e8f0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ana3-prop-meta {
      font-size: 0.7rem;
      color: #64748b;
      margin-top: 2px;
    }
    .ana3-prop-views {
      font-size: 0.9rem;
      font-weight: 700;
      color: #c4b5fd;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    /* Saved Searches Section */
    .ana3-searches-table {
      width: 100%;
      border-collapse: collapse;
    }
    .ana3-searches-table th {
      text-align: left;
      padding: 10px 12px;
      font-size: 0.7rem;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .ana3-searches-table td {
      padding: 12px;
      font-size: 0.8rem;
      color: #94a3b8;
      border-bottom: 1px solid rgba(255,255,255,0.03);
    }
    .ana3-searches-table tr:hover td {
      background: rgba(255,255,255,0.02);
    }
    .ana3-delete-btn {
      background: none;
      border: none;
      color: #64748b;
      cursor: pointer;
      padding: 4px;
      border-radius: 6px;
      transition: all 0.2s;
    }
    .ana3-delete-btn:hover {
      background: rgba(239,68,68,0.2);
      color: #f87171;
    }

    /* Responsive */
    @media (max-width: 900px) {
      .ana3-stats { grid-template-columns: repeat(2, 1fr); }
      .ana3-grid-2 { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      .ana3-stats { grid-template-columns: 1fr; }
      .ana3-header { padding: 16px 20px; }
      .ana3-period-tabs { gap: 6px; }
      .ana3-period-btn { padding: 8px 14px; font-size: 0.8rem; }
    }

/* Legacy analytics styles (kept for compatibility) */
.analytics-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px;
}
.analytics-stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 20px; text-align: center; transition: box-shadow 0.2s;
}
.analytics-stat-card:hover { box-shadow: var(--shadow); }
.analytics-stat-emoji { font-size: 28px; margin-bottom: 6px; }
.analytics-stat-value { font-size: 28px; font-weight: 800; color: var(--text); }
.analytics-stat-label { font-size: 12px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

.analytics-chart-section { margin-bottom: 24px; }
.analytics-chart-section h4 { font-size: 16px; margin-bottom: 12px; color: var(--text); }
.analytics-bar-chart {
  display: flex; align-items: flex-end; gap: 6px; height: 160px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px 12px 8px;
}
.analytics-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.analytics-bar {
  width: 100%; max-width: 40px; background: linear-gradient(180deg, var(--primary), #818cf8);
  border-radius: 4px 4px 0 0; min-height: 4px; transition: height 0.5s ease;
}
.analytics-bar-label { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.analytics-bar-value { font-size: 11px; font-weight: 700; color: var(--text-secondary); margin-bottom: 2px; }

.analytics-section { margin-bottom: 24px; }
.analytics-section h4 { font-size: 16px; margin-bottom: 12px; color: var(--text); }
.analytics-top-list { display: flex; flex-direction: column; gap: 6px; }
.analytics-top-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xs);
}
.analytics-rank { font-weight: 700; color: var(--primary); font-size: 14px; min-width: 28px; }
.analytics-top-name { flex: 1; font-size: 14px; color: var(--text); }
.analytics-top-views { font-weight: 600; color: var(--text-muted); font-size: 13px; }

/* ============================================
   ADMIN: Task Board (Kanban)
   ============================================ */
.kanban-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 12px; }
.kanban-column { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; min-height: 200px; }
.kanban-col-header { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.kanban-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-todo { background: #6366f1; }
.dot-progress { background: #f59e0b; }
.dot-done { background: #10b981; }
.kanban-count { background: var(--border-light); color: var(--text-muted); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; margin-left: auto; }
.kanban-cards { display: flex; flex-direction: column; gap: 8px; }
.kanban-card { background: var(--bg); border: 1px solid var(--border-light); border-radius: 10px; padding: 12px; transition: box-shadow 0.2s; }
.kanban-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.kanban-card.prio-high { border-left: 3px solid #ef4444; }
.kanban-card.prio-medium { border-left: 3px solid #f59e0b; }
.kanban-card.prio-low { border-left: 3px solid #10b981; }
.kanban-card-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.kanban-card-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; line-height: 1.4; }
.kanban-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.kanban-prio-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 6px; text-transform: uppercase; }
.kanban-prio-badge.prio-high { background: #fee2e2; color: #dc2626; }
.kanban-prio-badge.prio-medium { background: #fef3c7; color: #d97706; }
.kanban-prio-badge.prio-low { background: #d1fae5; color: #059669; }
[data-theme="dark"] .kanban-prio-badge.prio-high { background: rgba(239,68,68,0.15); }
[data-theme="dark"] .kanban-prio-badge.prio-medium { background: rgba(245,158,11,0.15); }
[data-theme="dark"] .kanban-prio-badge.prio-low { background: rgba(16,185,129,0.15); }
.kanban-date { font-size: 11px; color: var(--text-muted); }
.kanban-card-actions { display: flex; gap: 6px; align-items: center; }
.kanban-card-actions button { font-size: 11px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: all 0.2s; }
.kanban-card-actions button:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.kanban-empty { text-align: center; padding: 30px 10px; color: var(--text-muted); font-size: 13px; line-height: 1.6; }

/* Kanban action buttons */
.kb-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: all .2s; }
.kb-btn svg { flex-shrink: 0; }
.kb-btn-start:hover { background: #6366f1; color: #fff; border-color: #6366f1; }
.kb-btn-complete:hover { background: #10b981; color: #fff; border-color: #10b981; }
.kb-btn-reopen:hover { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.kb-btn-delete { padding: 5px 8px; margin-left: auto; }
.kb-btn-delete:hover { background: #ef4444; color: #fff; border-color: #ef4444; }

/* Task Form Card */
.task-form-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.task-form-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 14px; }
.task-form-grid { display: grid; grid-template-columns: 1fr 160px; gap: 12px; }
.task-form-full { grid-column: 1 / -1; }
.task-form-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.task-form-field label .req { color: #ef4444; }
.task-form-field label .opt { font-weight: 400; color: var(--text-muted); }
.task-form-field input,
.task-form-field select,
.task-form-field textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 13px; font-family: inherit; transition: border-color .2s; box-sizing: border-box; }
.task-form-field input:focus,
.task-form-field select:focus,
.task-form-field textarea:focus { border-color: var(--primary); outline: none; }
.task-form-field textarea { resize: vertical; }
.task-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.btn-task-cancel { padding: 8px 18px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; }
.btn-task-cancel:hover { background: var(--border-light); }
.btn-task-save { padding: 8px 22px; border-radius: 8px; border: none; background: var(--primary); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; }
.btn-task-save:hover { opacity: .9; }

/* How it works hint */
.kanban-hint { background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 10px; padding: 14px 18px; margin-bottom: 14px; }
.kanban-hint p { font-size: 13px; color: #4338ca; margin: 0; line-height: 1.6; }
.kanban-hint .hint-btn { display: inline-flex; align-items: center; gap: 2px; background: #6366f1; color: #fff; padding: 1px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
[data-theme="dark"] .kanban-hint { background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.25); }
[data-theme="dark"] .kanban-hint p { color: #a5b4fc; }
[data-theme="dark"] .kanban-hint .hint-btn { background: #4f46e5; }

@media (max-width: 768px) {
  .kanban-board { grid-template-columns: 1fr; }
  .task-form-grid { grid-template-columns: 1fr; }
}

/* ============================================
   ADMIN: Testimonials / FAQ / Commission shared
   ============================================ */
.admin-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; transition: box-shadow 0.2s; }
.admin-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.admin-card.not-approved { opacity: 0.65; }
.admin-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.admin-card-header strong { font-size: 15px; color: var(--text); }
.admin-card-date { font-size: 12px; color: var(--text-muted); }
.admin-card-stars { color: #f59e0b; font-size: 16px; margin-bottom: 6px; letter-spacing: 2px; }
.admin-card-text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 10px; }
.admin-card-footer { display: flex; justify-content: space-between; align-items: center; }
.admin-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 6px; display: inline-block; }
.badge-green { background: #d1fae5; color: #065f46; }
.badge-yellow { background: #fef3c7; color: #92400e; }
.badge-red { background: #fee2e2; color: #991b1b; }
[data-theme="dark"] .badge-green { background: rgba(5,150,105,0.15); color: #6ee7b7; }
[data-theme="dark"] .badge-yellow { background: rgba(245,158,11,0.15); color: #fbbf24; }
[data-theme="dark"] .badge-red { background: rgba(239,68,68,0.15); color: #fca5a5; }
.admin-card-btns { display: flex; gap: 6px; }
.admin-card-btns button { font-size: 11px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: all 0.2s; }
.admin-card-btns button:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* FAQ items */
.admin-faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 10px; transition: box-shadow 0.2s; }
.admin-faq-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.admin-faq-item.faq-inactive { opacity: 0.5; }
.admin-faq-q { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.faq-order { background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.admin-faq-a { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* Admin table */
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { text-align: left; padding: 10px 12px; background: var(--surface); border-bottom: 2px solid var(--border); color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); color: var(--text); }
.admin-table tr:hover td { background: var(--primary-light); }

/* Notification Center */
.notif-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; transition: box-shadow 0.2s; }
.notif-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.notif-icon { font-size: 20px; min-width: 32px; text-align: center; }
.notif-content { flex: 1; }
.notif-title { font-size: 14px; font-weight: 600; color: var(--text); }
.notif-detail { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.notif-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* ── Admin header notification bell ── */
.admin-notif-bell-wrap { position: relative; }
.admin-notif-bell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  color: #cbd5e1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.admin-notif-bell:hover { background: rgba(255,255,255,0.14); color: #f1f5f9; }
.admin-notif-bell:active { transform: scale(0.92); }
.bell-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  font-size: 0.65rem; font-weight: 700;
  line-height: 18px; text-align: center;
  color: #fff;
  background: #ef4444;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(239,68,68,0.4);
  pointer-events: none;
  animation: badge-pop .3s ease;
}
.notif-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 380px;
  max-height: 480px;
  background: #1e293b;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  overflow: hidden;
  z-index: 1100;
  animation: notifSlideIn 0.2s ease-out;
}
.notif-panel.open { display: block; }
@keyframes notifSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.notif-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: #0f172a;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.notif-panel-header h4 { margin: 0; font-size: 0.95rem; font-weight: 700; color: #f1f5f9; }
.notif-panel-refresh {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.08); border: none; border-radius: 8px;
  color: #94a3b8; cursor: pointer; transition: background 0.2s, color 0.2s;
}
.notif-panel-refresh:hover { background: rgba(255,255,255,0.14); color: #f1f5f9; }
.notif-panel-body { overflow-y: auto; max-height: 400px; padding: 8px; }
.notif-panel-body::-webkit-scrollbar { width: 4px; }
.notif-panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.notif-panel-body .notif-item { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); margin-bottom: 6px; padding: 12px 14px; border-radius: 10px; }
.notif-panel-body .notif-item:hover { background: rgba(96,165,250,0.08); }
.notif-panel-body .notif-title { color: #e2e8f0; font-size: 13px; }
.notif-panel-body .notif-detail { color: #94a3b8; font-size: 11px; }
.notif-panel-body .notif-time { color: #64748b; font-size: 10px; }
.notif-panel-empty { text-align: center; color: #64748b; padding: 40px 16px; font-size: 0.9rem; }
.notif-panel-backdrop {
  display: none; position: fixed; inset: 0; z-index: 1099; background: transparent;
}
.notif-panel-backdrop.open { display: block; }

/* Social Media Post Generator */
.social-post-layout { margin-top: 12px; }
.social-select-prop { margin-bottom: 14px; }
.social-select-prop label { font-size: 13px; font-weight: 600; color: var(--text-secondary); display: block; margin-bottom: 6px; }
.social-select-prop select { width: 100%; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; }
.social-platforms { display: flex; gap: 8px; margin-bottom: 14px; }
.social-plat-btn { padding: 8px 18px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.social-plat-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.social-plat-btn:hover { border-color: var(--primary); }
.social-preview { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.social-post-img { width: 100%; height: 240px; object-fit: cover; }
.social-post-text { padding: 16px; font-size: 13px; line-height: 1.6; color: var(--text); white-space: pre-wrap; word-break: break-word; font-family: inherit; margin: 0; background: transparent; border: none; }

/* SEO Manager */
.seo-field { margin-bottom: 14px; }
.seo-field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }
.seo-field label small { font-weight: 400; color: var(--text-muted); }
.seo-field input, .seo-field textarea, .seo-field select { width: 100%; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 14px; transition: border-color 0.2s; }
.seo-field input:focus, .seo-field textarea:focus { border-color: var(--primary); outline: none; }
.seo-char-count { font-size: 11px; color: var(--text-muted); float: right; margin-top: 2px; }
.seo-preview { margin-top: 20px; }
.seo-preview-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.seo-google-preview { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.seo-gp-url { font-size: 12px; color: #059669; margin-bottom: 2px; }
.seo-gp-title { font-size: 18px; color: #1a0dab; font-weight: 400; margin-bottom: 4px; line-height: 1.3; cursor: pointer; }
.seo-gp-title:hover { text-decoration: underline; }
.seo-gp-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
[data-theme="dark"] .seo-gp-title { color: #8ab4f8; }
[data-theme="dark"] .seo-gp-url { color: #6ee7b7; }

/* Activity Log */
.activity-timeline { display: flex; flex-direction: column; gap: 0; }
.activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-left: 2px solid var(--border); margin-left: 16px; position: relative; }
.activity-item::before { content: ''; position: absolute; left: -6px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); border: 2px solid var(--bg); }
.activity-icon { font-size: 18px; min-width: 28px; }
.activity-content { flex: 1; }
.activity-action { font-size: 14px; font-weight: 600; color: var(--text); }
.activity-details { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.activity-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* ===== PUBLIC FAQ ACCORDION ===== */
.faq-section { padding: 60px 0; background: var(--bg-alt, #f8f9fa); }
.faq-accordion { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--card-bg); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); transition: box-shadow .25s; }
.faq-item:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; font-size: 15px; font-weight: 600; color: var(--text); background: none; border: none; cursor: pointer; text-align: left; gap: 12px; }
.faq-question svg { flex-shrink: 0; transition: transform .3s; color: var(--text-muted); }
.faq-open .faq-question svg { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease; }
.faq-open .faq-answer { max-height: 300px; padding: 0 20px 18px; }
.faq-answer p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin: 0; }
[data-theme="dark"] .faq-item { border-color: var(--border); }
[data-theme="dark"] .faq-item:hover { box-shadow: 0 2px 12px rgba(0,0,0,.3); }

/* ============================================
   MOBILE UI IMPROVEMENTS — 2025 v2
   Comprehensive mobile polish & fixes
   ============================================ */

/* ── Safe-area support for notched phones ── */
body {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* ── Tap-highlight removal for cleaner mobile feel ── */
@media (max-width: 900px) {
  a, button, .action-btn, .filter-btn, .tab-btn, .property-card {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ── Mobile nav drawer: smooth slide + branded look ── */
.mobile-nav-inner {
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.mobile-nav-overlay.open .mobile-nav-inner {
  transform: translateX(0);
}

@media (max-width: 900px) {
  /* ── Mobile nav drawer polish ── */
  .mobile-nav-inner {
    width: 82%;
    max-width: 360px;
    padding: 0;
    border-radius: 20px 0 0 20px;
    overflow-y: auto;
  }
  .mobile-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 40px;
    height: 40px;
    font-size: 1.6rem;
    border-radius: 50%;
    background: rgba(79, 70, 229, 0.08);
    color: var(--text-muted);
  }
  .mobile-nav-list {
    padding: 70px 20px 24px;
    gap: 2px;
  }
  .mobile-nav-list > a,
  .mobile-nav-list > button {
    padding: 13px 16px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    min-height: 48px;
    transition: background 0.18s, color 0.18s;
  }
  .mobile-nav-list > a:hover,
  .mobile-nav-list > button:hover {
    background: rgba(79, 70, 229, 0.07);
    color: var(--primary);
  }
  .mobile-nav-list > a:active,
  .mobile-nav-list > button:active {
    background: rgba(79, 70, 229, 0.13);
  }
  /* Property sub-group indent */
  .mobile-nav-group {
    margin: 4px 0;
    padding: 4px 0 4px 8px;
    border-left: 3px solid var(--primary);
    border-radius: 0;
  }
  .mobile-nav-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 6px 16px 2px;
    font-weight: 700;
  }
  .mobile-nav-group a {
    padding: 11px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
  }
  /* Lang + theme + admin buttons */
  .mobile-lang,
  .mobile-theme,
  .mobile-admin {
    border: 1.5px solid var(--border) !important;
    border-radius: 12px !important;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
  }
  /* ── Hamburger: rounder touch target ── */
  .mobile-nav-toggle {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
}

/* ============================================
   MOBILE ≤ 768px — Tablet / large phone
   ============================================ */
@media (max-width: 768px) {
  /* Slightly tighter container padding */
  .container { padding: 0 1.25rem; }

  /* Map section */
  .map-section { padding: 40px 0; }
  .map-section h2 { font-size: 1.6rem; }
  .main-map { height: 340px; border-radius: 12px; }

  /* Property grid 2-col on tablets */
  .property-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }

  /* Footer social icons — bigger touch targets */
  .social-icon { width: 44px; height: 44px; }

  /* Newsletter */
  .newsletter-box { padding: 2rem 1.5rem; }
  .newsletter-text h2 { font-size: 1.5rem; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .testimonials-section { padding: 50px 0; }

  /* Section headings */
  h2 { margin-bottom: 0.5rem; }
  .section-subtitle { font-size: 0.95rem; margin-bottom: 2rem; }

  /* ── Preview modal: full-width on tablets ── */
  .modal-content {
    width: 96vw !important;
    max-width: 96vw !important;
    margin: 10px auto;
    border-radius: 18px;
  }
}

/* ============================================
   MOBILE ≤ 600px — Phone improvements
   ============================================ */
@media (max-width: 600px) {
  /* ── Container mobile breathing room ── */
  .container { padding: 0 1rem; }

  /* ── Hero polished ── */
  .hero-content {
    padding: 1.5rem 1rem;
    text-align: center;
  }
  .hero-badge {
    margin-bottom: 1rem;
    align-self: center;
  }

  /* ── Property cards: visible immediately on mobile (no reveal delay) ── */
  .property-card {
    opacity: 1;
    transform: none;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s;
    overflow: hidden;
  }
  .property-card.revealed {
    opacity: 1;
    transform: none;
    transition: box-shadow 0.2s;
  }
  .property-card:hover,
  .property-card:hover.revealed,
  .property-card:focus,
  .property-card:focus.revealed { transform: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }

  /* ── Disable hover image zoom on mobile (performance) ── */
  .property-card:hover .card-media img { transform: none; }
  .property-card .card-media img { transition: none; }
  .property-card:hover .card-media::after { opacity: 0; }

  /* ── Reduce scroll-reveal motion on mobile — faster + less distance ── */
  .sr { transform: translateY(15px); }
  .sr-left { transform: translateX(-15px); }
  .sr-right { transform: translateX(15px); }
  .sr, .sr-left, .sr-right, .sr-scale, .sr-fade {
    transition-duration: 0.35s;
  }

  /* ── Property grid: single column on phones ── */
  .property-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* ── Pagination mobile ── */
  .pagination-controls { gap: 4px; margin-top: 1.5rem; }
  .pagination-btn { min-width: 44px; height: 44px; padding: 0 10px; font-size: 0.9rem; border-radius: 8px; }
  .pagination-ellipsis { min-width: 28px; height: 44px; }
  .pagination-info { font-size: 0.85rem; }
  .property-card .card-media { height: 200px; }
  .property-card .card-body { padding: 14px 16px 16px; }
  .property-card .card-header { gap: 8px; }
  .property-card .card-title { font-size: 0.98rem; line-height: 1.35; }
  .property-card .price {
    font-size: 1.05rem;
    padding: 4px 12px;
    border-radius: 8px;
    font-weight: 700;
  }

  /* ── Card address: clean mobile display ── */
  .card-location {
    font-size: 0.88rem;
    gap: 5px;
  }
  .card-location-pin {
    width: 14px;
    height: 14px;
  }

  /* ── Feature tags: horizontal scroll on mobile ── */
  .property-card .features {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
    gap: 5px;
  }
  .property-card .features::-webkit-scrollbar { display: none; }
  .property-card .features .feature-tag {
    flex-shrink: 0;
    font-size: 0.72rem;
    padding: 3px 8px;
  }

  /* ── Meta items compact ── */
  .property-card .meta { gap: 6px; }
  .property-card .meta .meta-item { padding: 4px 10px; font-size: 0.8rem; border-radius: 8px; }

  /* ── Better action buttons spacing ── */
  .property-card .card-actions { gap: 6px; padding-top: 10px; }
  .action-btn {
    padding: 11px 14px;
    font-size: 0.9rem;
    border-radius: 10px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Map section mobile ── */
  .map-section { padding: 36px 0; }
  .map-section h2 { font-size: 1.4rem; margin-bottom: 4px; }
  .main-map { height: 280px; border-radius: 10px; }

  /* ── Newsletter mobile polish ── */
  .newsletter-section { padding: 2.5rem 0; }
  .newsletter-box {
    padding: 1.75rem 1.25rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  }
  .newsletter-text h2 { font-size: 1.35rem; }
  .newsletter-text p { font-size: 0.92rem; margin-bottom: 1.25rem; }
  .newsletter-form {
    flex-direction: column;
    gap: 10px;
  }
  .newsletter-form input {
    padding: 0.85rem 1rem;
    font-size: 16px !important; /* prevent iOS auto-zoom */
    border-radius: 12px;
    width: 100%;
    min-height: 48px;
  }
  .newsletter-form button {
    padding: 0.85rem 1.5rem;
    font-size: 16px !important;
    border-radius: 12px;
    width: 100%;
    min-height: 48px;
  }

  /* ── Testimonials: horizontal scroll on phone ── */
  .testimonials-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 8px;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .testimonials-grid::-webkit-scrollbar { display: none; }
  .testimonial-card {
    min-width: 280px;
    max-width: 85vw;
    flex-shrink: 0;
    scroll-snap-align: start;
    transition: none;
  }
  .testimonial-card:hover { transform: none; box-shadow: none; }
  .testimonials-section { padding: 44px 0; }
  .newsletter-box:hover { transform: none; }

  /* ── Footer mobile ── */
  footer {
    padding: 2.5rem 0 1.5rem;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
  .footer-grid { gap: 1.25rem; }
  .footer-brand p { font-size: 0.85rem; }
  .footer-col h4 { margin-bottom: 0.75rem; font-size: 0.85rem; }
  .footer-col a { font-size: 0.85rem; padding: 5px 0; min-height: 44px; display: flex; align-items: center; }
  .footer-social { gap: 0.5rem; margin-top: 1rem; }
  .social-icon { width: 44px; height: 44px; font-size: 1.1rem; }
  .footer-bottom {
    padding-top: 1rem;
    font-size: 0.78rem;
    gap: 0.5rem;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }

  /* ── FAQ section mobile ── */
  .faq-section { padding: 40px 0; }
  .faq-question {
    padding: 14px 16px;
    font-size: 14px;
    gap: 10px;
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
  }
  .faq-open .faq-answer { padding: 0 16px 14px; }
  .faq-answer p { font-size: 13px; line-height: 1.6; }

  /* ── Section spacing tighter ── */
  .properties { padding: 2rem 0 2.5rem; }
  .section-subtitle { font-size: 0.9rem; margin-bottom: 1.75rem; }

  /* ── Better search bar on mobile ── */
  .search-section { padding: 0.75rem 0.75rem 0.5rem; }

  /* ── Gallery strip in modal: larger thumbs ── */
  .modal-gallery { gap: 8px; margin-top: 12px; padding-bottom: 8px; }
  .modal-gallery img { width: 72px; height: 52px; border-radius: 8px; }
  .modal-gallery .gallery-video-thumb { width: 72px; height: 52px; border-radius: 8px; }

  /* ── Move-in estimate card ── */
  .move-in-estimate { padding: 10px 12px; border-radius: 10px; }
  .estimate-label { font-size: 0.75rem; }
  .estimate-value { font-size: 0.8rem; }
  .estimate-total .estimate-label { font-size: 0.8rem; }
  .estimate-total .estimate-value { font-size: 0.95rem; }

  /* ── Preview stats ── */
  .preview-stats { gap: 6px; }
  .preview-stat { padding: 8px 4px; border-radius: 10px; }
  .preview-stat svg { width: 16px; height: 16px; padding: 3px; }
  .preview-stat span { font-size: 0.95rem; }
  .preview-stat small { font-size: 0.58rem; }

  /* ── Contact modal mobile ── */
  .contact-modal { border-radius: 16px; }
  .contact-modal-title { font-size: 1.25rem; }

  /* ── Interest form mobile ── */
  .interest-modal-header { padding: 14px 16px; }
  .interest-modal-header-left { font-size: 0.95rem; }
  .interest-form { padding: 16px; gap: 12px; }
  /* iOS auto-zoom fix: inputs must be >= 16px */
  .interest-field input,
  .interest-field textarea { padding: 10px 12px; font-size: 1rem !important; border-radius: 10px; }
  .interest-submit-btn { padding: 12px; font-size: 0.9rem; border-radius: 12px; }

  /* ── Chat window: full-screen on phones ── */
  .chat-window {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
    animation: chatSlideUpMobile 0.3s ease-out;
  }
  @keyframes chatSlideUpMobile {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .chat-messages-view { height: 100% !important; }
  .chat-header { padding: 14px 16px; }
  .chat-messages-container { padding: 14px 12px; flex: 1; }
  /* iOS auto-zoom fix: inputs must be >= 16px */
  .chat-send-form input { font-size: 1rem !important; }
  .chat-login-field input { font-size: 1rem !important; }
  .input-with-icon input,
  .input-with-icon textarea { font-size: 1rem !important; }
  .na-input,
  .na-input-sm { font-size: 1rem !important; }

  /* ── Preview modal: near full-screen on phones ── */
  .modal { padding: 0; }
  .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto;
  }
  .modal-top { 
    max-height: none;
    overflow-y: visible;
  }
  /* Modal main image area */
  .modal-main {
    min-height: 280px;
    max-height: 45vh;
    border-radius: 0 !important;
  }
  .modal-main-image {
    max-height: 45vh;
    object-fit: cover;
  }
  /* Modal buttons repositioned for mobile */
  .close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
  }
  .modal-share-btn {
    top: 12px;
    right: 56px;
    left: auto;
    width: 40px;
    height: 40px;
  }
  .modal-share-btn svg { width: 18px; height: 18px; }
  .modal-fav-btn {
    top: 12px;
    right: 100px;
    left: auto;
    width: 40px;
    height: 40px;
  }
  .modal-fav-btn svg { width: 18px; height: 18px; }
  /* Navigation arrows */
  .modal-nav {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  .modal-nav.prev { left: 8px; }
  .modal-nav.next { right: 8px; }
  /* Counter */
  .modal-counter {
    bottom: 8px;
    right: 8px;
    font-size: 0.72rem;
    padding: 4px 10px;
  }
  /* Fullscreen expand button — keep bottom-left, away from counter */
  .fs-expand-btn {
    left: 8px;
    bottom: 8px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }
  .fs-expand-btn svg { width: 16px; height: 16px; }
  /* Modal info scrolls with content, not separately */
  .modal-info {
    max-height: none;
    overflow-y: visible;
    padding: 16px;
  }
  .modal-info h2 { font-size: 1.2rem; }
  .modal-price {
    font-size: 1rem;
    padding: 6px 14px;
  }
  /* Gallery thumbnails */
  .modal-gallery {
    padding: 10px 16px;
    gap: 8px;
  }
  .modal-gallery img,
  .modal-gallery .gallery-video-thumb {
    width: 60px;
    height: 44px;
    border-radius: 6px;
  }
  /* CTA buttons horizontal like desktop */
  .modal-cta {
    flex-direction: row;
    gap: 8px;
    padding: 0 16px 20px;
  }
  .modal-cta .btn-primary {
    width: auto;
    flex: 1;
    justify-content: center;
    padding: 12px 8px;
    font-size: 0.82rem;
  }

  /* ── Login modal mobile ── */
  .login-lock-icon { width: 52px; height: 52px; border-radius: 14px; }
  .login-header h2 { font-size: 1.3rem; }

  /* ── Alerts CTA banner compact ── */
  .alerts-cta-banner {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: 10px;
  }
  .alerts-cta-banner .alerts-cta-icon { width: 28px; height: 28px; }
  .alerts-cta-banner .alerts-cta-text { font-size: 0.78rem; }
  .alerts-cta-banner .alerts-cta-btn { padding: 6px 12px; font-size: 0.72rem; }

  /* ── Saved Search modal: bottom-sheet on phone ── */
  #savedSearchModal .modal-content {
    height: auto !important;
    max-height: 94dvh !important;
    border-radius: 16px 16px 0 0 !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
  }
}

/* ============================================
   MOBILE ≤ 430px — iPhone 12 / 13 / 14 / 15 / 16 optimizations
   Viewport widths: iPhone 12/13/14 = 390px, Pro Max = 428px
   ============================================ */
@media (max-width: 430px) {
  /* ── Prevent iOS auto-zoom on input focus (requires ≥16px) ── */
  .hero-search .search-bar input,
  .search-bar input {
    font-size: 16px !important; /* must be exactly 16px, NOT rem */
  }

  /* ── Hero search: horizontal layout optimized for ~390px ── */
  .hero-search {
    margin-top: 1rem;
    padding: 0 0.25rem;
  }
  .hero-search .search-bar {
    flex-direction: row;
    border-radius: 14px;
    background: rgba(255,255,255,0.13);
    border: 1px solid rgba(255,255,255,0.22);
    -webkit-backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .hero-search .search-bar input {
    padding: 14px 8px 14px 36px !important;
    min-height: 48px;
    font-size: 16px !important;
    color: #fff;
    background: transparent;
    border: none;
    border-radius: 14px 0 0 14px;
  }
  .hero-search .search-bar input::placeholder {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
  }
  .hero-search .search-bar button {
    padding: 0 14px;
    font-size: 0.85rem;
    min-height: 48px;
    border-radius: 0 14px 14px 0;
    background: var(--primary);
    color: #fff;
    white-space: nowrap;
  }
  .hero-search .search-bar-icon {
    left: 10px; width: 16px; height: 16px; color: rgba(255,255,255,0.55);
  }

  /* ── Modern Hero Search Box for 430px ── */
  .hero-search-modern {
    margin-top: 1rem;
    padding: 0 0.25rem;
  }
  .hero-search-box {
    flex-direction: column;
    border-radius: 16px;
    padding: 12px;
    background: rgba(255,255,255,0.98);
    gap: 10px;
  }
  .hero-search-icon {
    display: none;
  }
  .hero-search-box input {
    padding: 14px 16px !important;
    font-size: 16px !important;
    text-align: center;
    width: 100%;
    border-radius: 10px;
    background: #f8fafc;
    color: #1e293b !important;
  }
  .hero-search-box input::placeholder {
    font-size: 14px;
    color: #94a3b8 !important;
  }
  .hero-search-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 20px !important;
    border-radius: 10px !important;
    font-size: 0.95rem;
  }
  .hero-search-btn span {
    display: inline;
  }
  .hero-search-btn svg {
    width: 16px;
    height: 16px;
  }

  /* ── Safe area insets for notch / Dynamic Island ── */
  .hero-content {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }
  header.nav-header {
    padding-top: env(safe-area-inset-top, 0);
  }

  /* ── Filter bar: full-width, friendly touch targets ── */
  .search-section {
    padding: 0.75rem 0.5rem 0.25rem;
    padding-left: max(0.5rem, env(safe-area-inset-left));
    padding-right: max(0.5rem, env(safe-area-inset-right));
  }
  .filter-bar {
    padding: 14px 12px 10px;
    border-radius: 12px;
  }
  .filter-bar-row {
    gap: 10px;
  }
  .filter-group select,
  .filter-group input {
    font-size: 16px !important;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
  }
  .filter-group label {
    font-size: 0.75rem;
    margin-bottom: 3px;
  }

  /* ── Buttons: proper iOS touch targets ── */
  .filter-clear-btn,
  .filter-fav-btn,
  .filter-alert-btn {
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.82rem;
  }
  .filter-toggle-btn {
    min-height: 44px;
    border-radius: 12px;
  }

  /* ── Section title spacing ── */
  .search-section .section-title { font-size: 1.4rem; margin-bottom: 0.25rem; }
  .search-section .section-subtitle { font-size: 0.82rem; margin-bottom: 0.75rem; }

  /* ── Hero mobile: disable shimmer scale to avoid overflow ── */
  .hero::before { animation: none; opacity: 0.7; }
  
  .hero-bg-overlay { background: linear-gradient(165deg, rgba(3,7,18,0.82) 0%, rgba(15,23,42,0.65) 40%, rgba(0,106,255,0.15) 80%, rgba(3,7,18,0.8) 100%); }

  /* ── Property cards mobile: auto height ── */
  .property-card { --card-height: auto; height: auto; }
  .property-card .features .feature-tag:nth-child(n+4) { display: none; } /* Keep 3 features on mobile */
}

/* ============================================
   MOBILE ≤ 480px — Small phone polish
   ============================================ */
@media (max-width: 480px) {
  /* ── Container extra tight ── */
  .container { padding: 0 0.75rem; }

  /* ── Hero small phone ── */
  .hero { min-height: 50vh; padding-top: 56px; }
  .hero h1 { font-size: 1.75rem; letter-spacing: -0.03em; line-height: 1.2; }
  .hero p { font-size: 0.9rem; margin-bottom: 1.5rem; line-height: 1.5; }
  .hero-badge { font-size: 0.72rem; padding: 4px 10px; border-radius: 20px; }
  .hero-content { padding: 1.25rem 0.75rem; }
  .hero-actions {
    gap: 8px;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-outline {
    max-width: 100%;
    padding: 12px 18px;
    font-size: 0.88rem;
    border-radius: 12px;
  }

  /* ── Search bar really small phones ── */
  .search-section { margin-top: 0; padding: 0.5rem 0.5rem 0.25rem; }
  /* Keep hero search bar horizontal with glassmorphism */
  .hero-search .search-bar {
    flex-direction: row;
    border-radius: 14px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    -webkit-backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .hero-search .search-bar input {
    padding: 14px 8px 14px 36px !important;
    font-size: 16px !important;
    color: #fff;
    border-bottom: none;
    border-radius: 14px 0 0 14px;
    background: transparent;
    min-height: 48px;
  }
  .hero-search .search-bar input::placeholder {
    color: rgba(255,255,255,0.55);
    font-size: 13px;
  }
  .hero-search .search-bar button {
    padding: 0 14px;
    border-radius: 0 14px 14px 0;
    font-size: 0.85rem;
    min-height: 48px;
    background: var(--primary);
    color: #fff;
    white-space: nowrap;
  }
  .hero-search .search-bar-icon { left: 10px; width: 16px; height: 16px; color: rgba(255,255,255,0.55); }
  /* Non-hero search bar (filter section) can stack */
  .search-section .search-bar:not(.hero-search .search-bar) input {
    padding: 0.85rem 0.85rem 0.85rem 38px !important;
    font-size: 16px !important;
    border-bottom: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
  }
  .search-section .search-bar button {
    padding: 0.75rem 1rem;
    border-radius: 0 0 14px 14px;
    font-size: 0.88rem;
  }
  .search-bar-icon { left: 10px; }

  /* ── Property card small phone ── */
  .property-card { --card-height: auto; height: auto; }
  .property-card .card-media { height: 200px; }
  .property-card .card-body { padding: 12px 14px 14px; }
  .property-card .card-title { font-size: 0.92rem; }
  .property-card .price { font-size: 0.98rem; }
  .property-card .features { gap: 5px; max-height: 30px; }
  .property-card .features .feature-tag { font-size: 0.7rem; padding: 4px 9px; }
  .property-card .features .feature-tag:nth-child(n+3) { display: none; } /* Show only 2 on small phones */

  /* ── Action buttons: compact on small phones ── */
  .action-btn { padding: 10px 12px; min-height: 44px; }
  .action-btn .btn-icon { width: 32px; height: 32px; border-radius: 8px; }

  /* ── Newsletter small phone ── */
  .newsletter-box { padding: 1.5rem 1rem; }
  .newsletter-text h2 { font-size: 1.2rem; }

  /* ── Footer small phone ── */
  footer {
    padding: 2rem 0 1.25rem;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
  .footer-brand .footer-logo { font-size: 1.1rem; }

  /* ── Map small phone ── */
  .main-map { height: 240px; }

  /* ── Section headings tight ── */
  h2 { font-size: 1.5rem !important; }
  .section-subtitle { font-size: 0.85rem; margin-bottom: 1.5rem; }

  /* ── Modal improvements small phone ── */
  .modal-main { max-height: 38vh; }
  .modal-info { padding: 14px 12px 8px; }
  .modal-info h2 { font-size: 1.15rem; }
  .modal-price { font-size: 0.95rem; padding: 4px 12px; }
  .preview-interest-btn { padding: 10px 12px; border-radius: 10px; }
  .preview-interest-btn-icon { width: 32px; height: 32px; border-radius: 8px; }
  .preview-interest-btn-icon svg { width: 16px; height: 16px; }
  .preview-interest-btn-title { font-size: 0.78rem; }
  .preview-interest-btn-sub { font-size: 0.62rem; }

  /* ── Chat + Helpbot: small screens ── */
  .chat-widget { bottom: 12px; right: 12px; }
  .chat-toggle-btn { width: 48px; height: 48px; }
  .chat-toggle-btn svg { width: 22px; height: 22px; }
  .helpbot-widget { bottom: 12px; left: 12px; }
  .helpbot-toggle { width: 48px; height: 48px; font-size: 22px; }

  /* ── Contact cards ── */
  .contact-modal { padding: 24px 16px 20px; border-radius: 14px; }
  .contact-card { padding: 18px 16px; border-radius: 14px; }
  .contact-card-icon { width: 48px; height: 48px; border-radius: 12px; }

  /* ── Filter group: single column on very small ── */
  .filter-group { min-width: 100%; flex: 0 0 100%; }

  /* ── Filter toggle: compact ── */
  .filter-toggle-btn {
    padding: 10px 14px;
    font-size: 0.85rem;
    border-radius: 12px;
  }

  /* ── Saved Search modal bottom-sheet polish ── */
  .ss-header { padding: 20px 16px 14px; }
  .ss-icon-ring { width: 48px; height: 48px; }
  .ss-header h3 { font-size: 1.1rem; }
  .ss-header p { font-size: 0.8rem; }
  .ss-body { padding: 0 16px 16px; gap: 10px; }
  /* iOS auto-zoom fix: inputs must be >= 16px */
  .ss-input-wrap input,
  .ss-input-wrap select { padding: 10px 10px 10px 38px; font-size: 1rem !important; }
  .ss-divider span { font-size: 0.7rem; }
  .ss-submit { padding: 12px; font-size: 0.88rem; border-radius: 12px; }
}

/* ============================================
   MOBILE ≤ 360px — Extra-small phone
   ============================================ */
@media (max-width: 360px) {
  .hero h1 { font-size: 1.5rem; }
  .hero p { font-size: 0.85rem; }
  .hero { min-height: 45vh; }

  /* Property cards mobile - auto height */
  .property-card { --card-height: auto; height: auto; }
  .property-card .card-media { height: 160px; }
  .property-card .card-body { padding: 10px 12px 12px; }
  .property-card .card-title { font-size: 0.88rem; }
  .property-card .price { font-size: 0.92rem; padding: 3px 10px; }
  .property-card .features { gap: 4px; max-height: 28px; }
  .property-card .features .feature-tag { font-size: 0.68rem; padding: 4px 8px; }

  /* Modal extra-small phone */
  .modal-main { 
    min-height: 200px;
    max-height: 35vh;
  }
  .close {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    font-size: 1.3rem;
  }
  .modal-share-btn {
    top: 8px;
    right: 50px;
    left: auto;
    width: 36px;
    height: 36px;
  }
  .modal-fav-btn {
    top: 8px;
    right: 90px;
    left: auto;
    width: 36px;
    height: 36px;
  }
  .modal-nav {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
  .modal-info { padding: 12px; }
  .modal-info h2 { font-size: 1.1rem; }
  .modal-price { font-size: 0.9rem; padding: 4px 12px; }
  .preview-stats { gap: 4px; }
  .preview-stat { padding: 6px 4px; }
  .preview-stat span { font-size: 0.85rem; }
  .modal-cta .btn-primary { padding: 12px 16px; font-size: 0.88rem; }
  .modal-gallery img,
  .modal-gallery .gallery-video-thumb {
    width: 50px;
    height: 36px;
  }

  .action-btn { font-size: 0.82rem; padding: 10px 10px; }
  .action-btn .btn-label { font-size: 0.8rem; }

  .newsletter-text h2 { font-size: 1.1rem; }

  .search-bar input { font-size: 1rem !important; } /* Keep >= 16px to prevent iOS auto-zoom */
  .search-bar button { font-size: 0.88rem; }

  /* ── Even tighter nav drawer ── */
  .mobile-nav-list { padding: 60px 14px 20px; }
  .mobile-nav-list > a,
  .mobile-nav-list > button { padding: 11px 12px; font-size: 0.88rem; }
  .mobile-nav-group a { font-size: 0.84rem; padding: 9px 12px; }

  /* ── Alerts CTA: hide text to save space ── */
  .alerts-cta-banner .alerts-cta-text { display: none; }
  .alerts-cta-banner { justify-content: center; }
}

/* ============================================
   MOBILE TOUCH FEEDBACK + INTERACTIONS
   ============================================ */
/* Tap feedback for cards and buttons on touch devices */
@media (hover: none) {
  .property-card:active { transform: scale(0.97) !important; transition-duration: 0.1s; }
  .why-card:active { transform: scale(0.96); }
  .hiw-step:active { transform: scale(0.96); }
  .testimonial-card:active { transform: scale(0.97); }
  .btn-primary:active, .btn-outline:active, .btn-success:active { transform: scale(0.95); }
  .gs-item:active { transform: scale(0.96) !important; }
  .action-btn:active { transform: scale(0.92); }
}

/* Smooth section dividers between major areas */
.why-choose-section,
.how-it-works-section,
.gallery-showcase-section,
.testimonials-section,
.faq-section,
.newsletter-section {
  position: relative;
}

/* Animated gradient underline for section titles */
.why-choose-section h2,
.how-it-works-section h2,
.gallery-showcase-section h2,
.testimonials-section h2,
.faq-section .section-title {
  position: relative;
  display: inline-block;
  width: 100%;
}
.why-choose-section h2::after,
.how-it-works-section h2::after,
.gallery-showcase-section h2::after,
.testimonials-section h2::after,
.faq-section .section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), #818cf8);
  margin: 12px auto 0;
  border-radius: 2px;
  transition: width 0.5s cubic-bezier(.22,1,.36,1);
}
.why-choose-section h2.revealed::after,
.how-it-works-section h2.revealed::after,
.gallery-showcase-section h2.revealed::after,
.testimonials-section h2.revealed::after,
.faq-section .section-title.revealed::after {
  width: 80px;
}

/* Hover glow for "Why Choose" icon boxes */
.why-card:hover .why-icon {
  box-shadow: 0 8px 25px rgba(99,102,241,0.3);
  transform: translateY(-3px) scale(1.05);
}
.why-icon {
  transition: transform 0.3s, box-shadow 0.3s;
}

/* Pulse effect on "How It Works" numbers */
.hiw-number {
  transition: transform 0.3s, box-shadow 0.3s;
}
.hiw-step:hover .hiw-number {
  transform: scale(1.12);
  box-shadow: 0 0 0 8px rgba(79,70,229,0.12);
}

/* Testimonial card hover accent */
.testimonial-card {
  transition: all 0.35s cubic-bezier(.22,1,.36,1);
  border-top: 3px solid transparent;
}
.testimonial-card:hover {
  border-top-color: var(--primary);
}

/* Newsletter box subtle animation */
.newsletter-box {
  transition: transform 0.4s, box-shadow 0.4s;
}
.newsletter-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(79,70,229,0.25);
}

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 100px; /* To the left of chat widget */
  z-index: 900;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(79,70,229,0.35);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(79,70,229,0.45);
}
.back-to-top:active { transform: scale(0.92); }
.back-to-top svg { width: 20px; height: 20px; }
@media (max-width: 600px) {
  .back-to-top {
    right: 76px; /* To the left of chat widget */
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
    width: 42px;
    height: 42px;
  }
}

/* ============================================
   MOBILE SECTION DIVIDERS — subtle gradient separators
   ============================================ */
@media (max-width: 768px) {
  .why-choose-section,
  .how-it-works-section,
  .gallery-showcase-section,
  .testimonials-section,
  .faq-section {
    border-top: none;
    border-bottom: none;
  }
  .why-choose-section::before,
  .how-it-works-section::before,
  .gallery-showcase-section::before {
    content: '';
    display: block;
    height: 1px;
    max-width: 120px;
    margin: 0 auto 0;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
  }

  /* Section-to-section spacing tighter on mobile */
  .why-choose-section,
  .how-it-works-section,
  .gallery-showcase-section,
  .testimonials-section { position: relative; }
}

/* ============================================
   HERO CTA BUTTONS — Mobile refinement
   ============================================ */
@media (max-width: 600px) {
  .hero-actions .btn-primary {
    background: linear-gradient(135deg, var(--primary), #818cf8);
    padding: 14px 24px;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(79,70,229,0.35);
    letter-spacing: 0.01em;
  }
  .hero-actions .btn-outline {
    padding: 13px 24px;
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 14px;
    border-width: 2px;
    border-color: rgba(255,255,255,0.5);
    color: #fff;
  }
  .hero-actions .btn-outline:active {
    background: rgba(255,255,255,0.12);
  }
}

/* ============================================
   SCROLL-MARGIN for fixed header offset
   ============================================ */
#propiedades,
#why-choose,
#how-it-works,
#gallery-showcase,
#testimonials,
#faq,
#newsletter {
  scroll-margin-top: 80px;
}
@media (max-width: 768px) {
  #propiedades,
  #why-choose,
  #how-it-works,
  #gallery-showcase,
  #testimonials,
  #faq,
  #newsletter {
    scroll-margin-top: 64px;
  }
}

/* ========= Inline-Style Migrations ========= */

/* Show-map button wrapper */
.show-map-wrapper { text-align: center; margin-top: 12px; }

/* Initial hidden states — revealed by JS */
#paginationControls { display: none; }
.modal-main-video { display: none; }
#interestModal { display: none; }
#interestSuccess { display: none; }
#scheduleModal { display: none; }
#schedule-property-selector { display: none; padding: 0 28px; }
#schedule-step-2,
#schedule-step-3 { display: none; }
#summary-email-row { display: flex; }
#summary-message-row { display: none; }
#mapModal { display: none; }
#recentlyViewedSection { display: none; }
#newsletterMsg { display: none; }
#contactModal { display: none; }
#helpBotIconClose { display: none; }
#helpBotWindow { display: none; }
#chatIconClose { display: none; }
#chatUnreadBadge { display: none; }
#chatWindow { display: none; }
#chatLoginFeedback { display: none; }
#chatMessagesView { display: none; }
#chatBookingForm { display: none; }
#cookieBanner { display: none; }
#compareBar { display: none; }
#compareModal { display: none; }
#rentCalcModal { display: none; }
#savedSearchModal { display: none; }
#ssSuccess { display: none; }

/* Map preview modal content */
#mapPreviewModal > .modal-content { max-width: 540px; }
#mapPreviewTitle { margin: 0 0 4px; }
#mapPreviewAddress { margin: 0 0 12px; color: var(--text-secondary, #666); font-size: .95rem; }
#mapPreviewModal .modal-map { height: 300px; }
.map-preview-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.map-preview-actions .btn-primary { flex: 1; text-align: center; }

/* Schedule property select */
#schedule-property-select {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: .95rem; background: var(--surface); color: var(--text);
}

/* Why-choose icon gradients */
.why-card:nth-child(1) .why-icon { background: linear-gradient(135deg, #006AFF, #3b82f6); }
.why-card:nth-child(2) .why-icon { background: linear-gradient(135deg, #10b981, #34d399); }
.why-card:nth-child(3) .why-icon { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.why-card:nth-child(4) .why-icon { background: linear-gradient(135deg, #ec4899, #f472b6); }

/* Gallery showcase empty state */
.gallery-showcase-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--text-muted); }
.gallery-showcase-empty svg { opacity: .4; margin-bottom: 12px; display: block; margin-left: auto; margin-right: auto; }

/* Footer team names */
.footer-team-name { margin: 0; font-weight: 600; color: #fff; }

/* Interest optional label */
.label-optional { font-weight: 400; color: #94a3b8; }
.label-required { color: #ef4444; }

/* Chat/Helpbot inline SVG alignment */
.status-dot { vertical-align: middle; margin-right: 4px; }
.chat-login-title svg { vertical-align: middle; margin-left: 4px; }
.chat-login-field label svg { vertical-align: -2px; margin-right: 4px; }
.chat-login-btn svg { vertical-align: -3px; margin-right: 6px; }
.chat-login-footer svg { vertical-align: middle; margin-right: 4px; }

/* terms.html footer override */
.footer-bottom-flat { border-top: none; padding-top: 0; }