/* Design Tokens */
:root {
  /* Typography */
  --font-title: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale: fixed sizes for small UI text (already comfortable on
     phones), clamp() for headings so they scale down on narrow viewports
     without extra media queries. Icon glyph sizes are NOT part of this
     scale - they stay literal since they size to their container, not text. */
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 0.95rem;
  --text-md: 1rem;
  --text-lg: clamp(1.05rem, 1rem + 0.3vw, 1.15rem);
  --text-xl: clamp(1.15rem, 1.05rem + 0.5vw, 1.3rem);
  --text-2xl: clamp(1.3rem, 1.15rem + 0.8vw, 1.6rem);
  --text-3xl: clamp(1.4rem, 1.25rem + 1vw, 1.8rem);

  /* Spacing scale used by the mobile bottom tab bar / drawers added below */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
}

/* Dark Theme Variables */
[data-theme="dark"] {
  --bg-primary: #0a0c10;
  --bg-secondary: rgba(22, 28, 36, 0.8);
  --bg-glass: rgba(18, 22, 30, 0.65);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-hover: rgba(255, 255, 255, 0.18);
  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;

  --accent-color: #3b82f6;
  --accent-glow: rgba(59, 130, 246, 0.15);
  --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  --price-gradient: linear-gradient(135deg, #ef4444 0%, #ec4899 100%);

  --card-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  --card-shadow-hover: 0 12px 40px rgba(59, 130, 246, 0.25);

  --glow-1: rgba(59, 130, 246, 0.12);
  --glow-2: rgba(139, 92, 246, 0.1);
}

/* Light Theme Variables */
[data-theme="light"] {
  --bg-primary: #f9fafb;
  --bg-secondary: rgba(255, 255, 255, 0.9);
  --bg-glass: rgba(255, 255, 255, 0.7);
  --border-color: rgba(0, 0, 0, 0.08);
  --border-color-hover: rgba(0, 0, 0, 0.15);
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #9ca3af;

  --accent-color: #2563eb;
  --accent-glow: rgba(37, 99, 235, 0.1);
  --accent-gradient: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --price-gradient: linear-gradient(135deg, #dc2626 0%, #db2777 100%);

  --card-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
  --card-shadow-hover: 0 12px 40px rgba(37, 99, 235, 0.15);

  --glow-1: rgba(37, 99, 235, 0.05);
  --glow-2: rgba(124, 58, 237, 0.04);
}

/* Reset and Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
  line-height: 1.5;
}

/* Background Glows */
.bg-glow {
  position: fixed;
  width: 50vw;
  height: 50vw;
  border-radius: 50%;
  filter: blur(140px);
  z-index: -1;
  pointer-events: none;
}

.bg-glow-1 {
  top: -10vw;
  right: -10vw;
  background-color: var(--glow-1);
}

.bg-glow-2 {
  bottom: 10vw;
  left: -10vw;
  background-color: var(--glow-2);
}

/* Navbar */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  padding: 1rem 2rem;
  transition: var(--transition-smooth);
}

.nav-container {
  max-width: 1440px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.logo {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.75rem;
  font-family: var(--font-title);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Mobile-only: on the details page this swaps in for .logo (see
   body.on-details in the mobile media query below) */
.nav-back-btn {
  display: none;
  flex-shrink: 0;
  height: 36px;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0 0.75rem;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
}
.nav-back-btn:hover {
  background-color: var(--border-color);
}

.logo-icon {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.accent-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-controls {
  display: flex;
  align-items: center;
  min-width: 0;
  flex-shrink: 0;
  gap: 1.5rem;
}

/* Mobile-only icon row (stats toggle + map entry) - hidden on desktop,
   where these live in .nav-controls / the full map banner instead */
.mobile-nav-icons {
  display: none;
  flex-shrink: 0;
}

.mobile-nav-icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-smooth);
}

.mobile-nav-icon-btn:hover,
.mobile-nav-icon-btn[aria-expanded="true"] {
  background-color: var(--accent-glow);
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  background-color: var(--accent-glow);
  color: var(--accent-color);
  border: 1px solid var(--border-color);
}

.badge-pulse i {
  animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {
  0% { opacity: 0.4; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}

.btn-icon {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.btn-icon:hover {
  background-color: var(--border-color);
  border-color: var(--border-color-hover);
}

[data-theme="dark"] .sun-icon { display: none; }
[data-theme="dark"] .moon-icon { display: block; }
[data-theme="light"] .sun-icon { display: block; }
[data-theme="light"] .moon-icon { display: none; }

/* Main Layout */
.main-content {
  max-width: 1440px;
  margin: 2rem auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Extra breathing room on very wide desktop monitors */
@media (min-width: 1600px) {
  .main-content,
  .nav-container {
    max-width: 1600px;
  }
  .listings-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  }
}

/* Stats Dashboard */
.stats-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}

.stat-card {
  background-color: var(--bg-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow: var(--card-shadow);
  transition: var(--transition-smooth);
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-color-hover);
}

.stat-icon-wrapper {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
}

.blue-gradient { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.red-gradient { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); }
.gold-gradient { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-info h3 {
  font-family: var(--font-title);
  font-size: var(--text-3xl);
  font-weight: 800;
  margin-top: 0.2rem;
}

/* Filters Card */
.filter-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  box-shadow: var(--card-shadow);
}

.search-input-wrapper {
  position: relative;
  width: 100%;
}

.search-icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1.1rem;
}

#search-input {
  width: 100%;
  padding: 1.1rem 1.1rem 1.1rem 3rem;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-md);
  transition: var(--transition-smooth);
}

#search-input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.advanced-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}

/* Filter drawer toggle: desktop always shows the full filter row, so this
   button is only relevant (and only shown) on mobile - see media query below */
.btn-toggle-filters {
  display: none;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-group label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.filter-group select,
.filter-group input {
  padding: 0.8rem 1rem;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: var(--transition-smooth);
}

.filter-group select:focus,
.filter-group input:focus {
  outline: none;
  border-color: var(--accent-color);
}

/* Listings Grid Area */
.listings-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
}

.section-title {
  font-family: var(--font-title);
  font-size: var(--text-2xl);
  font-weight: 800;
}

.results-count {
  font-size: var(--text-base);
  color: var(--text-secondary);
  font-weight: 500;
}

.listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  min-height: 200px;
}

/* Loading state */
.loading-state, .empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 2rem;
  color: var(--text-secondary);
  text-align: center;
  gap: 1rem;
}

.loading-spinner {
  font-size: 2.5rem;
  color: var(--accent-color);
}

.empty-state i {
  font-size: 3rem;
  color: var(--text-muted);
}

/* Card Styling */
.post-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
  position: relative;
}

.post-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-color-hover);
  box-shadow: var(--card-shadow-hover);
}

.card-photo-wrapper {
  position: relative;
  width: 100%;
  padding-top: 66%; /* 3:2 Aspect Ratio */
  background-color: var(--bg-primary);
  overflow: hidden;
}

.card-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.post-card:hover .card-photo {
  transform: scale(1.05);
}

.card-badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 2;
}

.card-badge {
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.badge-new {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.badge-today {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.card-price-badge {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: var(--price-gradient);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-title);
  font-size: var(--text-xl);
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
  z-index: 2;
}

/* Data source badge - top-right of the photo, color-coded per source site */
.card-source-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.card-source-badge.source-khmer24 {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}
.card-source-badge.source-realestate {
  background: linear-gradient(135deg, #7cc142 0%, #5a9e2f 100%);
}
.card-source-badge.source-harbor {
  background: linear-gradient(135deg, #1a9d5c 0%, #147a47 100%);
}

.card-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.75rem;
}

.card-location-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent-color);
  background-color: var(--accent-glow);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  width: fit-content;
}

.card-title-zh {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* min-height (not height) keeps card titles visually aligned across a grid
     row while staying in sync with --text-lg instead of a hand-tuned rem value */
  min-height: calc(var(--text-lg) * 1.4 * 2);
}

.card-title-original {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: -0.25rem;
}

.card-attributes-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.attribute-pill {
  font-size: var(--text-xs);
  font-weight: 600;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

.card-footer {
  margin-top: auto;
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-time {
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.post-card {
  cursor: pointer;
}

/* View Hiding / Showing */
.hidden {
  display: none !important;
}

/* Back Button Row */
.back-nav-row {
  margin-bottom: 1.5rem;
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-back:hover {
  background-color: var(--border-color);
  border-color: var(--border-color-hover);
  transform: translateX(-4px);
}

/* Two Column Details Layout */
.details-layout {
  display: grid;
  grid-template-columns: 1.8fr 1.2fr;
  gap: 2rem;
  align-items: start;
}

.details-main-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.details-side-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 90px; /* Under sticky navbar */
  min-width: 0;
}

/* Hero Section inside Details */
.details-hero {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  background-color: var(--bg-primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.details-hero-preview {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.details-hero img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.details-hero .card-price-badge {
  bottom: 1.5rem;
  right: 1.5rem;
  font-size: var(--text-2xl);
  padding: 0.6rem 1.2rem;
}

.details-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.75rem;
}

.details-gallery-item {
  display: block;
  aspect-ratio: 4 / 3;
  width: 100%;
  padding: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  box-shadow: var(--card-shadow);
  cursor: zoom-in;
}

.details-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.details-gallery-item:hover img {
  transform: scale(1.04);
}

body.image-preview-open {
  overflow: hidden;
}

.image-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(5, 7, 12, 0.96);
  touch-action: none;
  user-select: none;
}

.image-preview-overlay.visible {
  display: flex;
}

.image-preview-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.5rem 1rem 3rem;
}

.image-preview-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.image-preview-close {
  position: fixed;
  top: calc(1rem + var(--safe-top));
  right: calc(1rem + var(--safe-right));
  z-index: 3002;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.image-preview-counter {
  position: fixed;
  top: calc(1rem + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 3001;
  min-width: 4rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.image-preview-hint {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + var(--safe-bottom));
  transform: translateX(-50%);
  z-index: 3001;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-full);
  background: rgba(15, 23, 42, 0.58);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* Main Details Block */
.details-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.details-title-zh {
  font-family: var(--font-title);
  font-size: var(--text-3xl);
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-primary);
}

.details-title-original {
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.4;
  border-left: 3px solid var(--border-color);
  padding-left: 0.75rem;
}

.details-location-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent-color);
  background-color: var(--accent-glow);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  width: fit-content;
}

.details-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.details-meta-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-base);
}

.details-meta-item i {
  color: var(--accent-color);
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}

.details-meta-label {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.details-meta-value {
  font-weight: 600;
}

/* Sidebar Cards */
.side-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.side-card-title {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Phone and Map Buttons */
.phone-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.phone-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.25rem;
  gap: 0.75rem;
  align-items: stretch;
}

.btn-phone-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem 1.25rem;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
  font-size: var(--text-base);
  transition: var(--transition-smooth);
  min-width: 0;
}

.btn-phone-item span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.btn-phone-telegram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, #229ED9, #0088cc);
  border: 1px solid rgba(34, 158, 217, 0.45);
  border-radius: var(--radius-sm);
  color: #fff;
  text-decoration: none;
  font-size: 1.25rem;
  transition: var(--transition-smooth);
}

.btn-phone-item:hover {
  background-color: var(--border-color);
  border-color: var(--border-color-hover);
  color: var(--accent-color);
  transform: translateY(-1px);
}

.btn-phone-telegram:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 158, 217, 0.24);
}

.btn-map-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem 1.25rem;
  background-color: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-sm);
  color: #f59e0b;
  font-weight: 600;
  text-decoration: none;
  font-size: var(--text-base);
  transition: var(--transition-smooth);
}

.btn-map-item:hover {
  background-color: #f59e0b;
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.btn-original-web {
  width: 100%;
  text-align: center;
  padding: 1rem;
  border-radius: var(--radius-sm);
  background: var(--accent-gradient);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-base);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 15px var(--accent-glow);
  transition: var(--transition-smooth);
}

.btn-original-web:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

/* Description Text & Bullet Grid */
.details-desc-text {
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--text-secondary);
}

.desc-bullet-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.desc-bullet-item {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: var(--transition-smooth);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  min-width: 0;
}

.desc-bullet-item > div {
  min-width: 0;
}

.desc-bullet-item:hover {
  border-color: var(--border-color-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Span full width for items that are long descriptions (no colons) */
.desc-bullet-item:not(.spec-like) {
  grid-column: 1 / -1;
  align-items: flex-start;
}

.desc-bullet-icon-default {
  color: var(--accent-color);
  font-size: 0.8rem;
  flex-shrink: 0;
  margin-top: 0.35rem; /* Align with first line of text */
}

.desc-bullet-emoji {
  font-size: 1.1rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.desc-bullet-dot {
  color: var(--text-muted);
  font-size: 0.4rem;
  flex-shrink: 0;
  margin-top: 0.55rem;
}

.desc-bullet-key {
  font-weight: 700;
  color: var(--text-primary);
  font-size: var(--text-base);
  overflow-wrap: break-word;
}

.desc-bullet-val {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: var(--text-base);
  overflow-wrap: break-word;
}

.desc-bullet-text {
  overflow-wrap: break-word;
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.55;
}

.details-desc-paragraph {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-secondary);
  white-space: pre-wrap;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.original-desc-box {
  margin-top: 1rem;
  font-size: var(--text-sm);
}

.original-desc-box summary {
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 600;
  outline: none;
  user-select: none;
}

.original-desc-box summary:hover {
  color: var(--text-secondary);
}

.original-desc-content {
  padding: 1rem;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  margin-top: 0.5rem;
  white-space: pre-wrap;
  font-size: var(--text-xs);
  line-height: 1.5;
}

.no-phones {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}

.card-view-details {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent-color);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: var(--transition-smooth);
}

.post-card:hover .card-view-details {
  transform: translateX(3px);
}

/* Specs layout in sidebar */
.specs-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.spec-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--border-color);
  font-size: var(--text-base);
}

.spec-item:last-child {
  border-bottom: none;
}

.spec-key {
  color: var(--text-secondary);
  font-weight: 500;
}

.spec-val {
  font-weight: 600;
  color: var(--text-primary);
}

/* Responsive details layout */
@media (max-width: 900px) {
  .details-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .details-side-col {
    position: static;
  }
}

/* Map View Navigation Banner & Nav Button */
.btn-map-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(8, 145, 178, 0.15) 100%);
  border: 1px solid #06b6d4;
  border-radius: var(--radius-sm);
  color: #06b6d4;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.btn-map-nav:hover {
  background: #06b6d4;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.map-navigation-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.6) 0%, rgba(31, 41, 55, 0.6) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
  gap: 1.5rem;
  transition: var(--transition-smooth);
}
.map-navigation-banner:hover {
  border-color: rgba(6, 182, 212, 0.3);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
/* display:contents makes the <a> invisible to the box model on desktop, so
   .map-nav-content and .btn-map-banner-action still lay out as direct flex
   children of .map-navigation-banner exactly as before wrapping them in a
   link. Mobile overrides this to a real flex row - see media query below. */
.map-nav-link {
  display: contents;
  color: inherit;
  text-decoration: none;
}
.map-nav-chevron {
  display: none;
}
.map-nav-content {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.map-nav-icon {
  font-size: 2.2rem;
  color: #06b6d4;
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.5));
  background: rgba(6, 182, 212, 0.1);
  padding: 0.8rem;
  border-radius: var(--radius-md);
  display: flex;
  justify-content: center;
  align-items: center;
}
.map-nav-text h3 {
  font-family: var(--font-title);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: #fff;
}
.map-nav-text p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.4;
}
.btn-map-banner-action {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.6rem;
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  border: none;
  border-radius: var(--radius-md);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-smooth);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.3);
}
.btn-map-banner-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.5);
}

/* Mobile adjustments for map navigation banner */
@media (max-width: 768px) {
  .map-navigation-banner {
    flex-direction: column;
    align-items: stretch;
    padding: 1.2rem;
    gap: 1.2rem;
  }
  .map-nav-content {
    gap: 0.8rem;
  }
  .map-nav-icon {
    font-size: 1.8rem;
    padding: 0.6rem;
  }
  .map-nav-text h3 {
    font-size: var(--text-lg);
  }
  .map-nav-text p {
    font-size: var(--text-sm);
  }
  .btn-map-banner-action {
    justify-content: center;
  }
}

/* Phnom Penh SVG Map & Sync Dialog Styles */
.btn-sync-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  background-color: var(--accent-glow);
  border: 1px solid var(--accent-color);
  border-radius: var(--radius-sm);
  color: var(--accent-color);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-sync-nav:hover {
  background-color: var(--accent-color);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--accent-glow);
}

.btn-sync-nav i {
  transition: transform 0.6s ease;
}

.btn-sync-nav:hover i {
  transform: rotate(180deg);
}

/* Map Section Card */
.map-section-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--card-shadow);
}

.map-header {
  margin-bottom: 1.25rem;
}

.map-title {
  font-family: var(--font-title);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.map-subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.map-svg-wrapper {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.phnom-penh-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* SVG Map Items */
.map-district-group {
  cursor: pointer;
}

.map-district-block {
  opacity: 0.55;
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 1px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.map-district-group:hover .map-district-block {
  opacity: 0.9;
  stroke: #fff;
  stroke-width: 1.5px;
  filter: drop-shadow(0 0 10px var(--accent-color));
}

.map-district-block.active {
  opacity: 0.95;
  stroke: #fff;
  stroke-width: 3px !important;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 15px var(--accent-color));
}

.map-district-name {
  fill: #fff;
  font-size: 12px;
  font-weight: 800;
  text-anchor: middle;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.map-district-eng {
  fill: rgba(255, 255, 255, 0.7);
  font-size: 9px;
  font-weight: 600;
  text-anchor: middle;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.map-district-count {
  fill: #fff;
  font-size: 10px;
  font-weight: 800;
  text-anchor: middle;
  pointer-events: none;
  user-select: none;
  background-color: rgba(0,0,0,0.5);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Sync Overlay Widget */
.sync-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 12, 16, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  transition: opacity 0.3s ease;
}

.sync-panel-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  max-width: 650px;
  width: 100%;
  padding: 2rem;
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  animation: modal-slide-up 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sync-panel-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 32px;
  height: 32px;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.sync-panel-close:hover {
  background-color: var(--border-color);
  color: var(--text-primary);
}

.sync-panel-title {
  font-family: var(--font-title);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sync-panel-tip {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: -0.5rem;
}

.sync-form-row {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.sync-form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sync-form-group label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.sync-form-group select {
  padding: 0.6rem 1rem;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  outline: none;
}

.btn-sync-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.5rem;
  background: var(--accent-gradient);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-base);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-sync-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px var(--accent-glow);
}

.btn-sync-submit:disabled {
  background: var(--border-color);
  color: var(--text-muted);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Console logs */
.sync-console-wrapper {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: #080c14;
}

.sync-console-header {
  background-color: #0b0f19;
  border-bottom: 1px solid var(--border-color);
  padding: 0.6rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-secondary);
}

.sync-console-output {
  margin: 0;
  padding: 1rem;
  height: 200px;
  overflow-y: auto;
  font-family: Consolas, "Fira Code", monospace;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: #38bdf8;
  white-space: pre-wrap;
  word-break: break-all;
  scrollbar-width: thin;
}

.sync-status-idle {
  color: var(--text-muted);
}

.sync-status-running {
  color: #eab308;
  animation: pulse 1.5s infinite;
}

.sync-status-success {
  color: #22c55e;
  font-weight: 800;
}

.sync-status-failed {
  color: #ef4444;
  font-weight: 800;
}

/* Site Footer */
.site-footer {
  text-align: center;
  padding: 2.5rem 1.5rem;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-top: 4rem;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  :root {
    --text-xs: 0.72rem;
    --text-sm: 0.8rem;
    --text-base: 0.9rem;
    --text-md: 0.98rem;
    --text-lg: 1.05rem;
    --text-xl: 1.14rem;
    --text-2xl: 1.24rem;
    --text-3xl: 1.38rem;
    --radius-md: 12px;
    --radius-lg: 16px;
  }

  .navbar {
    padding: 0.55rem 0.75rem;
  }
  .nav-container {
    gap: 0.5rem;
  }
  .logo {
    gap: 0.5rem;
    flex-shrink: 1;
  }
  .logo span {
    display: none;
  }
  .logo::after {
    content: "Rent-KH";
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .advanced-row {
    grid-template-columns: 1fr;
  }
  .listings-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  /* Three separately-bordered/shadowed cards triple the visual weight of
     the same 3 numbers. Mobile apps show this as ONE thin stat strip with
     dividers between segments instead - .stats-dashboard becomes the single
     card, .stat-card becomes a plain borderless segment inside it.
     Collapsed by default - toggled via #btn-toggle-stats in the navbar. */
  .stats-dashboard {
    display: none;
    background-color: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--card-shadow);
    padding: 0.65rem 0;
    gap: 0;
  }
  .stats-dashboard.expanded {
    display: flex;
  }
  .stat-card {
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    min-height: 4.2rem;
    padding: 0 0.65rem;
    gap: 0.35rem;
    position: relative;
  }
  .stat-card:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background-color: var(--border-color);
  }
  .stat-icon-wrapper {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
    border-radius: 6px;
  }
  .stat-label {
    font-size: 0.66rem;
    letter-spacing: 0;
    line-height: 1.2;
  }
  .stat-info h3 {
    font-size: 0.98rem;
    margin-top: 0.05rem;
    line-height: 1.2;
    word-break: break-word;
  }

  .main-content {
    gap: 0.75rem;
    margin-top: 0.6rem;
    margin-bottom: 0.75rem;
  }
  /* This margin-bottom (1.5rem desktop) is the gap under the back button on
     the details/map pages - same "too much top whitespace" issue */
  .back-nav-row {
    margin-bottom: 0.75rem;
  }
  /* Map entry moved to the navbar icon row (.mobile-nav-icons) on mobile,
     so the banner section is no longer needed here at all */
  .map-navigation-banner {
    display: none;
  }
  .filter-card {
    padding: 0;
    gap: 0.4rem;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .search-input-wrapper .search-icon {
    left: 0.95rem;
    font-size: 1rem;
  }
  #search-input {
    min-height: 40px;
    padding: 0.58rem 0.7rem 0.58rem 2.35rem;
    font-size: var(--text-base);
    line-height: 1.25;
  }
  .filter-group {
    gap: 0.38rem;
  }
  .filter-group label {
    line-height: 1.25;
  }
  .filter-group select,
  .filter-group input {
    min-height: 44px;
    padding: 0.7rem 0.85rem;
    font-size: var(--text-base);
  }
  .card-content {
    padding: 0.9rem;
    gap: 0.55rem;
  }
  .card-badges {
    top: 0.65rem;
    left: 0.65rem;
    gap: 0.35rem;
  }
  .card-badge,
  .card-source-badge {
    padding: 0.28rem 0.55rem;
    letter-spacing: 0;
  }
  .card-source-badge {
    top: 0.65rem;
    right: 0.65rem;
  }
  .card-price-badge {
    bottom: 0.65rem;
    right: 0.65rem;
    padding: 0.42rem 0.75rem;
    font-size: var(--text-xl);
  }
  .card-title-zh {
    line-height: 1.35;
    min-height: calc(var(--text-lg) * 1.35 * 2);
  }
  .card-title-original {
    line-height: 1.3;
  }
  .card-attributes-row {
    gap: 0.4rem;
    margin-top: 0.1rem;
  }
  .attribute-pill {
    padding: 0.28rem 0.55rem;
    line-height: 1.25;
  }
  .card-footer {
    padding-top: 0.75rem;
    gap: 0.65rem;
  }
  .card-time {
    min-width: 0;
    line-height: 1.25;
  }
  .section-header {
    align-items: flex-start;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .section-title {
    line-height: 1.2;
  }
  .results-count {
    line-height: 1.3;
    text-align: right;
  }
  .loading-state,
  .empty-state {
    padding: 3rem 1rem;
    min-height: 14rem;
  }

  /* Filter drawer: collapsed by default on mobile so the search bar isn't
     pushed down a full screen of region/price/sort controls */
  .search-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .btn-toggle-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0.52rem 0.75rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
  }
  .toggle-chevron {
    transition: transform 0.25s ease;
  }
  .btn-toggle-filters[aria-expanded="true"] .toggle-chevron {
    transform: rotate(180deg);
  }
  .advanced-row {
    display: none;
    gap: 0.5rem;
  }
  .advanced-row.expanded {
    display: grid;
  }

  /* Top-right nav controls are replaced by the bottom tab bar on mobile
     (see the Mobile Bottom Tab Bar section) */
  .nav-controls {
    display: none;
  }
  .mobile-nav-icons {
    display: flex;
    gap: 0.4rem;
  }
  .mobile-nav-icon-btn,
  .nav-back-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
  }
  .nav-back-btn {
    width: auto;
    padding: 0 0.6rem;
  }

  /* Details AND map page: back button takes over the logo's spot in the
     shared navbar, so both pages share the exact same back-button style
     and position instead of the map page floating its own separate one */
  body.on-details .logo,
  body.on-map .logo {
    display: none;
  }
  body.on-details .nav-back-btn,
  body.on-map .nav-back-btn {
    display: flex;
  }
  #details-view .back-nav-row {
    display: none;
  }

  /* Sync modal form overflows when select + button share a row */
  .sync-panel-card {
    width: calc(100vw - 1.5rem);
    max-height: calc(100vh - 1.5rem);
    overflow-y: auto;
    padding: 1rem;
    gap: 1rem;
    border-radius: var(--radius-md);
  }
  .sync-panel-close {
    top: 0.8rem;
    right: 0.8rem;
    width: 40px;
    height: 40px;
  }
  .sync-panel-title {
    padding-right: 2.7rem;
    line-height: 1.25;
  }
  .sync-form-row {
    flex-direction: column;
    align-items: stretch;
    padding: 0.8rem;
    gap: 0.75rem;
  }
  .sync-form-group select,
  .btn-sync-submit {
    min-height: 44px;
  }
  .sync-console-output {
    height: min(200px, 34vh);
    padding: 0.75rem;
    line-height: 1.55;
  }
  .btn-sync-submit {
    justify-content: center;
  }

  .details-layout,
  .details-main-col,
  .details-side-col {
    gap: 0.85rem;
  }
  .details-hero {
    padding-top: 62%;
    border-radius: var(--radius-md);
  }
  .details-hero .card-price-badge {
    bottom: 0.75rem;
    right: 0.75rem;
    padding: 0.45rem 0.8rem;
    font-size: var(--text-xl);
  }
  .details-gallery {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: 0.05rem 0 0.15rem;
    scrollbar-width: none;
  }
  .details-gallery::-webkit-scrollbar {
    display: none;
  }
  .details-gallery-item {
    flex: 0 0 74px;
    scroll-snap-align: start;
  }
  .details-card {
    padding: 0;
    gap: 0.65rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .details-title-zh {
    line-height: 1.28;
  }
  .details-title-original {
    font-size: var(--text-sm);
    line-height: 1.45;
    padding-left: 0.65rem;
  }
  .details-location-badge {
    padding: 0.36rem 0.7rem;
    line-height: 1.25;
  }
  .details-meta-grid {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    padding: 0.7rem;
    border-radius: var(--radius-sm);
  }
  .details-meta-item {
    gap: 0.65rem;
    line-height: 1.35;
  }
  .side-card {
    padding: 0;
    gap: 0.65rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .side-card-title {
    line-height: 1.25;
    padding-bottom: 0.45rem;
    margin-bottom: 0;
  }
  .phone-list {
    gap: 0.6rem;
  }
  .phone-row {
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 0.55rem;
  }
  .btn-phone-item,
  .btn-phone-telegram,
  .btn-map-item,
  .btn-original-web {
    min-height: 44px;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    line-height: 1.25;
  }
  .btn-phone-item {
    justify-content: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    gap: 0.45rem;
  }
  .btn-phone-telegram {
    padding: 0;
    font-size: 1.12rem;
  }
  .specs-list {
    gap: 0.45rem;
  }
  .spec-item {
    padding: 0.45rem 0;
    gap: 0.75rem;
    line-height: 1.35;
  }
  .desc-bullet-list {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .desc-bullet-item,
  .details-desc-paragraph,
  .original-desc-content {
    padding: 0.68rem 0.75rem;
  }
  .desc-bullet-item {
    gap: 0.6rem;
    align-items: flex-start;
  }
  .desc-bullet-key,
  .desc-bullet-val,
  .desc-bullet-text,
  .details-desc-paragraph {
    line-height: 1.55;
  }
  .image-preview-stage {
    padding: 4rem 0.5rem 2.75rem;
  }
  .image-preview-close {
    top: calc(0.75rem + var(--safe-top));
    right: calc(0.75rem + var(--safe-right));
    width: 46px;
    height: 46px;
  }
  .image-preview-counter {
    top: calc(0.85rem + var(--safe-top));
  }
  .image-preview-hint {
    bottom: calc(0.75rem + var(--safe-bottom));
  }

  .main-content {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }
}

/* Full-Screen Map View Layout - sits below the shared navbar (not over it)
   on every screen size, so the map page keeps the same persistent common
   navigation as the home/details pages instead of covering it up */
#map-view {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  width: 100vw;
  height: calc(100vh - var(--navbar-height));
  z-index: 1000;
  background-color: #0b0f19;
  display: flex;
  flex-direction: column;
}

#map-view .main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#map-view .back-nav-row {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 1010;
  margin: 0;
  pointer-events: auto;
}

#map-view .map-section-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  width: 100%;
  height: 100%;
  position: relative;
}

#map-view .map-header {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  text-align: right;
  z-index: 1010;
  pointer-events: none;
}

#map-view .map-title,
#map-view .map-subtitle {
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.95);
}

#map-view .map-title {
  font-size: var(--text-xl);
  margin: 0;
  color: #fff;
  font-family: var(--font-title);
  font-weight: 700;
}

#map-view .map-subtitle {
  font-size: var(--text-sm);
  margin: 0.3rem 0 0 0;
  color: var(--text-secondary);
}

#map-view .map-svg-wrapper {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-color: #05070c;
  display: flex;
  justify-content: center;
  align-items: center;
}

#map-view .phnom-penh-svg {
  width: 100%;
  height: 100%;
  max-height: none;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

/* Floating Zoom controls */
.map-controls {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 1010;
}

.btn-map-ctrl {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: rgba(17, 24, 39, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-map-ctrl:hover {
  background-color: #06b6d4;
  border-color: #06b6d4;
  color: #fff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 20px rgba(6, 182, 212, 0.4);
}

.btn-map-ctrl:active {
  transform: scale(0.95);
}

/* Hide header controls on mobile to avoid overlapping */
@media (max-width: 768px) {
  #map-view .map-header {
    display: none;
  }
  .map-controls {
    bottom: 1.5rem;
    right: 1.5rem;
  }
  .btn-map-ctrl {
    width: 2.7rem;
    height: 2.7rem;
    font-size: 1rem;
  }
}

/* ==========================================================================
   Mobile Bottom Tab Bar
   Primary navigation (home / map / theme) lives here on phones,
   in thumb reach, instead of the top-right icon row (desktop keeps that).
   ========================================================================== */
:root {
  --tabbar-height: 60px;
  --navbar-height: 57px;
}

.bottom-tab-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1600; /* above map-view (1000) and its floating controls (1010),
                    below the sync overlay (2000) so the modal still covers it */
  height: calc(var(--tabbar-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background-color: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-color);
  align-items: stretch;
  justify-content: space-around;
}

.tab-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.tab-bar-item i {
  font-size: 1.05rem;
}

.tab-bar-item.active {
  color: var(--accent-color);
}

.tab-bar-item:active {
  transform: scale(0.94);
}

@media (max-width: 640px) {
  .bottom-tab-bar {
    display: flex;
  }
  .tab-bar-item {
    min-height: 44px;
    line-height: 1.15;
  }
  .tab-bar-item i {
    font-size: 1.1rem;
  }

  /* Reserve room at the bottom of scrollable views so content doesn't end
     up hidden behind the fixed tab bar */
  .main-content {
    padding-bottom: calc(var(--tabbar-height) + var(--safe-bottom) + 1rem);
  }

  /* Mobile only: the navbar back button replaces the map page's own floating
     back button/title (desktop keeps them - it has no other way back since
     nav-controls has no back link, same reasoning as the details page) */
  #map-view .back-nav-row {
    display: none;
  }

  /* #map-view is a fixed fullscreen layout (own top/bottom chrome), so it
     needs its own reserved space instead of main-content's padding */
  #map-view .map-svg-wrapper {
    padding-bottom: calc(var(--tabbar-height) + var(--safe-bottom));
  }
  .map-controls {
    right: 1rem;
    bottom: calc(var(--tabbar-height) + var(--safe-bottom) + 0.85rem);
    gap: 0.5rem;
  }
  .btn-map-ctrl {
    width: 44px;
    height: 44px;
  }
}

/* ==========================================================================
   Pull-to-refresh (touch gesture, home view only - see initPullToRefresh)
   Grows as a normal block from height:0, pushing content down naturally
   instead of overlaying it, so it never fights with the sticky navbar.
   ========================================================================== */
.ptr-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.ptr-icon {
  font-size: 1.05rem;
  transition: transform 0.2s ease;
}

.ptr-indicator.ptr-ready .ptr-icon {
  transform: rotate(180deg);
}

.ptr-indicator.ptr-loading .ptr-icon {
  animation: ptr-spin 0.7s linear infinite;
}

@keyframes ptr-spin {
  to { transform: rotate(360deg); }
}

/* Mobile Details Page Layout Overrides */
.mobile-quick-specs-grid {
  display: none;
}

@media (max-width: 768px) {
  .details-title-zh {
    font-size: var(--text-xl) !important;
  }

  .mobile-quick-specs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  .mq-spec-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.4rem;
    text-align: center;
    gap: 0.4rem;
  }

  .mq-spec-card i {
    color: var(--accent-color);
    font-size: 1.1rem;
  }

  .mq-spec-val {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-all;
  }

  .property-map-container {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }
}