/* ==========================================================================
   PUBLIC REAL ESTATE LUXURY DESIGN SYSTEM & THEME (index.html ONLY)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Kantumruy+Pro:ital,wght@0,300..700;1,300..700&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --pub-bg-dark: #0b0f19;
  --pub-bg-card: #151c2c;
  --pub-bg-card-hover: #1e293b;
  --pub-border-color: rgba(255, 255, 255, 0.08);
  --pub-border-gold: rgba(245, 158, 11, 0.35);
  
  --pub-gold: #f59e0b;
  --pub-gold-glow: #fbbf24;
  --pub-gold-gradient: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
  
  --pub-emerald: #10b981;
  --pub-emerald-gradient: linear-gradient(135deg, #059669 0%, #10b981 60%, #34d399 100%);
  
  --pub-blue-gradient: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  
  --pub-text-primary: #f8fafc;
  --pub-text-secondary: #94a3b8;
  --pub-text-muted: #64748b;
  
  --pub-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.4);
  --pub-shadow-glow: 0 0 25px rgba(245, 158, 11, 0.25);
  --pub-radius: 16px;
}

html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: 'Kantumruy Pro', 'Outfit', system-ui, -apple-system, sans-serif;
  background: linear-gradient(to bottom, rgba(11, 15, 25, 0.86), rgba(11, 15, 25, 0.94)), url('../images/angkor-wat-bg.jpg') center/cover fixed no-repeat;
  color: var(--pub-text-primary);
  transition: background 0.3s ease, color 0.3s ease;
  min-height: 100vh;
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* ==========================================================================
   LIGHT MODE THEME STYLES (CRYSTAL CLEAR HIGH CONTRAST)
   ========================================================================== */

body.light-theme {
  background: linear-gradient(to bottom, rgba(248, 250, 252, 0.94), rgba(241, 245, 249, 0.98)), url('../images/angkor-wat-bg.jpg') center/cover fixed no-repeat !important;
  color: #0f172a !important;
}

/* 1. Header Navbar */
.navbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
  padding-bottom: 8px !important;
  padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  background: rgba(15, 23, 42, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  min-height: calc(48px + env(safe-area-inset-top, 0px)) !important;
  box-sizing: border-box !important;
}

body.light-theme .navbar {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .brand-name-gold {
  color: #2563eb !important;
  font-weight: 900 !important;
}

body.light-theme .brand-name-white {
  color: #0f172a !important;
  font-weight: 900 !important;
}

.brand-name-gold {
  color: #38bdf8 !important;
  font-weight: 900 !important;
}

.navbar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  user-select: none !important;
}

.brand-title-styled {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 1.08rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

.brand-sub-styled {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  display: block !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  margin-top: 2px !important;
}

body.light-theme .brand-sub-styled {
  color: #64748b !important;
}

/* Header Action Buttons */
.btn-header-action {
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.btn-header-submit {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
}

body.light-theme .btn-header-submit {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid #0f172a !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15) !important;
}

body.light-theme .btn-header-submit:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
}

.btn-header-guide {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
}

body.light-theme .btn-header-guide {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1.5px solid #cbd5e1 !important;
}

body.light-theme .btn-header-guide:hover {
  background: #f8fafc !important;
  border-color: #0f172a !important;
  color: #0f172a !important;
}

.btn-header-icon {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #e2e8f0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

#headerNotifBtn {
  position: relative !important;
}

body.light-theme .btn-header-icon {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #475569 !important;
}

body.light-theme .btn-header-icon:hover {
  background: #ffffff !important;
  border-color: #0f172a !important;
  color: #0f172a !important;
}

/* Agent Login & Badge in Header (Compact Icon Button) */
.btn-agent-nav {
  padding: 0 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  font-size: 0.82rem !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

body.light-theme .btn-agent-nav {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme .btn-agent-nav:hover {
  background: #f8fafc !important;
  border-color: #0f172a !important;
}

/* 2. Unified Standard Badges (Harmonious & Elegant - Single Row Horizontal Scroll) */
.card-badges-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  margin-bottom: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-bottom: 2px !important;
}

.card-badges-row::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.badge {
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  line-height: 1.25 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.badge-type {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body.light-theme .badge-type {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

.badge-sale {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

body.light-theme .badge-sale {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}

.badge-rent {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

body.light-theme .badge-rent {
  background: #eff6ff !important;
  color: #0369a1 !important;
  border: 1px solid #bae6fd !important;
}

.badge-title-hard {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

body.light-theme .badge-title-hard {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}

.badge-title-soft {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.light-theme .badge-title-soft {
  background: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

.badge-sold {
  background: rgba(239, 68, 68, 0.9) !important;
  color: #ffffff !important;
  border: 1px solid #ef4444 !important;
}

/* 3. Property Cards */
/* 3. Luxury Property Cards with High Contrast & Readability */
.property-card {
  background: #151c2c !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

body.light-theme .property-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06) !important;
}

.property-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

body.light-theme .property-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12) !important;
}

/* Thumbnail & Price Tag */
.property-thumb-wrap {
  position: relative !important;
  width: 100% !important;
  height: 240px !important;
  min-height: 240px !important;
  overflow: hidden !important;
  background: #0f172a !important;
}

.property-thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.35s ease !important;
}

.property-card:hover .property-thumb {
  transform: scale(1.05) !important;
}

.price-tag {
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  background: rgba(15, 23, 42, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #fbbf24 !important;
  font-weight: 900 !important;
  border: 1.5px solid rgba(245, 158, 11, 0.6) !important;
  border-radius: 9px !important;
  font-size: 0.95rem !important;
  padding: 4px 10px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
  letter-spacing: 0.3px !important;
  z-index: 2 !important;
}

.price-tag-closed {
  background: rgba(220, 38, 38, 0.92) !important;
  border-color: rgba(248, 113, 113, 0.8) !important;
  color: #ffffff !important;
}

/* Top-Right Floating Property Code (Pure text, no background box, no # icon) */
.property-code-badge {
  position: absolute !important;
  top: 8px !important;
  right: 10px !important;
  z-index: 4 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #fbbf24 !important;
  border: none !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  box-shadow: none !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 5px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.9) !important;
  letter-spacing: 0.35px !important;
  pointer-events: none !important;
}

body.light-theme .property-code-badge {
  background: transparent !important;
  color: #fbbf24 !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 5px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.9) !important;
}

.property-code-badge i {
  display: none !important;
}

/* Floating View Count Badge on Property Thumbnail */
.property-views-badge {
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1.2px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 4px 9px !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38) !important;
  pointer-events: none !important;
  user-select: none !important;
}

.property-views-badge i {
  color: #38bdf8 !important;
  font-size: 0.74rem !important;
}

/* Card Body */
.property-body {
  padding: 12px 12px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

/* Card Badges Row (Single Row Horizontal Scroll / Draggable) */
.card-badges-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  margin-bottom: 7px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-bottom: 2px !important;
  cursor: grab !important;
}

.card-badges-row:active {
  cursor: grabbing !important;
}

.card-badges-row::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.badge {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  padding: 4px 9px !important;
  border-radius: 7px !important;
  line-height: 1.25 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.badge i {
  font-size: 0.80rem !important;
}

/* Category Badge */
.badge-type,
body.light-theme .badge-type {
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
}

body.dark-theme .badge-type {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fcd34d !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

/* Sale / Rent Badge */
.badge-sale,
body.light-theme .badge-sale {
  background: #ecfdf5 !important;
  color: #065f46 !important;
  border: 1px solid #a7f3d0 !important;
}

body.dark-theme .badge-sale {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.badge-rent,
body.light-theme .badge-rent {
  background: #f0f9ff !important;
  color: #075985 !important;
  border: 1px solid #bae6fd !important;
}

body.dark-theme .badge-rent {
  background: rgba(56, 189, 248, 0.18) !important;
  color: #7dd3fc !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
}

/* Hard / Soft Title Badge */
.badge-title-hard,
body.light-theme .badge-title-hard {
  background: #f5f3ff !important;
  color: #5b21b6 !important;
  border: 1px solid #ddd6fe !important;
}

body.dark-theme .badge-title-hard {
  background: rgba(168, 85, 247, 0.18) !important;
  color: #d8b4fe !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
}

.badge-title-soft,
body.light-theme .badge-title-soft {
  background: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}

body.dark-theme .badge-title-soft {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Property Title (High Contrast & Bold) */
.property-title,
body.light-theme .property-title {
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  line-height: 1.4 !important;
  margin: 4px 0 6px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body.dark-theme .property-title {
  color: #f8fafc !important;
}

/* Property Location */
.property-location,
body.light-theme .property-location {
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-bottom: 8px !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  -webkit-overflow-scrolling: touch !important;
  cursor: grab !important;
}

.property-location::-webkit-scrollbar,
body.light-theme .property-location::-webkit-scrollbar,
body.dark-theme .property-location::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body.dark-theme .property-location {
  color: #94a3b8 !important;
}

.property-location i {
  color: #0284c7 !important;
  font-size: 0.78rem !important;
  flex-shrink: 0 !important;
}

/* Property Specs Bar (Strict Single Row, Left-Right Draggable/Scrollable) */
.property-specs,
body.light-theme .property-specs {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  font-size: 0.88rem !important;
  margin-top: auto !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  cursor: grab !important;
  user-select: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.property-specs::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.property-specs:active {
  cursor: grabbing !important;
}

body.dark-theme .property-specs {
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
}

.property-specs .spec-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.88rem !important;
  line-height: 1.3 !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.property-specs .spec-item strong {
  font-weight: 700 !important;
  font-size: 0.90rem !important;
}

.property-specs .spec-item i {
  font-size: 0.90rem !important;
}

.property-specs .spec-code {
  margin-left: auto !important;
  color: #f59e0b !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
}

/* Footer Action Buttons */
.property-footer {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 8px 12px 12px !important;
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.light-theme .property-footer {
  border-top: 1px solid #f1f5f9 !important;
  background: #ffffff !important;
}

.btn-card-action-detail {
  flex: 1 !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 800 !important;
  font-size: 0.98rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
  transition: all 0.2s ease !important;
}

.btn-card-action-detail i {
  font-size: 1.05rem !important;
}

.btn-card-action-detail:hover {
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.5) !important;
  transform: translateY(-1px) !important;
}

.btn-card-action-calc {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #38bdf8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.92rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-card-action-calc:hover {
  background: rgba(2, 132, 199, 0.2) !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

body.light-theme .btn-card-action-calc {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0284c7 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .btn-card-action-calc:hover {
  background: #f0f9ff !important;
  border-color: #0284c7 !important;
  color: #0369a1 !important;
}

body.light-theme .btn-action-main:hover {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(59, 130, 246, 0.9)) !important;
  border-color: rgba(191, 219, 254, 0.8) !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
}

.btn-action-main.is-closed {
  background: rgba(100, 116, 139, 0.8) !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
}

/* 4. Category Pills - DEFAULT = DARK MODE */
.cat-pill {
  background: rgba(30, 41, 59, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #cbd5e1 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease !important;
}

/* Light Mode cat-pill */
body.light-theme .cat-pill {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #334155 !important;
  border: 1.5px solid rgba(203, 213, 225, 0.8) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.cat-pill:hover {
  background: rgba(15, 23, 42, 0.95) !important;
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
  transform: translateY(-1px);
}

body.light-theme .cat-pill:hover {
  background: #f0fdf4 !important;
  color: #059669 !important;
  border-color: #34d399 !important;
  transform: translateY(-1px);
}

.cat-pill.active {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.22) 0%, rgba(16, 185, 129, 0.18) 100%) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  color: #34d399 !important;
  border: 1.5px solid rgba(52, 211, 153, 0.5) !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.2) !important;
  transform: translateY(-1px);
  font-weight: 850 !important;
}

body.light-theme .cat-pill.active {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.22) 0%, rgba(16, 185, 129, 0.16) 100%) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  color: #047857 !important;
  border: 1.5px solid rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-1px);
  font-weight: 850 !important;
}

/* 5. Toolbar & Search Hub */
body.light-theme .luxury-search-hub {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

body.light-theme .search-input {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.light-theme .btn-toggle-filters,
.btn-toggle-filters {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.22) 0%, rgba(16, 185, 129, 0.16) 100%) !important;
  backdrop-filter: blur(10px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%) !important;
  color: #047857 !important;
  border: 1.5px solid rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
  font-weight: 850 !important;
}

body:not(.light-theme) .btn-toggle-filters,
body.dark-theme .btn-toggle-filters {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.22) 0%, rgba(16, 185, 129, 0.16) 100%) !important;
  color: #34d399 !important;
  border: 1.5px solid rgba(52, 211, 153, 0.4) !important;
}

body.light-theme .btn-toggle-filters:hover,
body.light-theme .btn-toggle-filters.active-open,
.btn-toggle-filters:hover,
.btn-toggle-filters.active-open {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.35) 0%, rgba(16, 185, 129, 0.28) 100%) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25) !important;
  border-color: rgba(16, 185, 129, 0.7) !important;
  color: #047857 !important;
}

body:not(.light-theme) .btn-toggle-filters:hover,
body:not(.light-theme) .btn-toggle-filters.active-open,
body.dark-theme .btn-toggle-filters:hover,
body.dark-theme .btn-toggle-filters.active-open {
  color: #34d399 !important;
  border-color: #34d399 !important;
}

body.light-theme .btn-reset-filters {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #475569 !important;
}

body.light-theme .btn-reset-filters:hover {
  background: #f8fafc !important;
  border-color: #0f172a !important;
  color: #0f172a !important;
}

body.light-theme .agent-card-public {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme .agent-name-public {
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   MOBILE APP BOTTOM NAVIGATION (UNIFIED DARK GLASSMORPHISM MATCHING ADMIN APP)
   ========================================================================== */

/* Hidden on Desktop / Public Web (PC Screen) */
.mobile-bottom-nav {
  display: none !important;
}

/* Visible ONLY on Mobile Devices (Public App on Phone) */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 68px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    background: rgba(11, 19, 38, 0.78) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.20) !important;
    backdrop-filter: blur(25px) saturate(210%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(210%) !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.22) !important;
    z-index: 990 !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  body.light-theme .mobile-bottom-nav {
    background: rgba(11, 19, 38, 0.78) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.20) !important;
    backdrop-filter: blur(25px) saturate(210%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(210%) !important;
    box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.22) !important;
  }

  /* Automatically hide bottom nav when any modal is open */
  body:has(.modal-overlay.active) .mobile-bottom-nav,
  body.modal-open .mobile-bottom-nav,
  body.modal-active .mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

#aiAdvisorWidgetContainer {
  pointer-events: none !important;
}

.ai-floating-trigger-btn {
  pointer-events: auto !important;
}

.ai-chat-window {
  pointer-events: none !important;
  visibility: hidden !important;
}

.ai-chat-window.active {
  pointer-events: auto !important;
  visibility: visible !important;
}

#modalContainer {
  position: relative !important;
  z-index: 9999999 !important;
  pointer-events: none;
}

#modalContainer:not(:empty),
#modalContainer > *,
.custom-modal-overlay,
.unified-map-modal-overlay,
.unified-map-modal-card,
#unifiedMapContainer,
#unifiedMapContainer .leaflet-pane,
#unifiedMapContainer .leaflet-map-pane,
#unifiedMapContainer .leaflet-tile-pane,
#unifiedMapContainer .leaflet-marker-pane,
#unifiedMapContainer .leaflet-control-container,
#unifiedMapContainer .leaflet-interactive {
  pointer-events: auto !important;
}

.unified-map-modal-overlay {
  z-index: 200000 !important;
  pointer-events: auto !important;
  touch-action: auto !important;
}

#unifiedMapContainer {
  touch-action: pan-x pan-y pinch-zoom !important;
  cursor: grab;
}

#unifiedMapContainer:active {
  cursor: grabbing;
}

.modal-overlay {
  pointer-events: none !important;
  visibility: hidden !important;
}

.modal-overlay.active {
  pointer-events: auto !important;
  visibility: visible !important;
}

#propertyModal {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  box-sizing: border-box !important;
}

#propertyModal .compact-admin-modal {
  max-height: 92vh !important;
  max-height: 92dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: auto !important;
  width: 96% !important;
  max-width: 720px !important;
}

#propertyModal form {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}

#propertyModal .modal-header {
  flex-shrink: 0 !important;
}

#propertyModal .modal-body {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 14px 18px !important;
}

#propertyModal .modal-footer {
  flex-shrink: 0 !important;
}




.bottom-nav-item,
body.light-theme .bottom-nav-item,
body.dark-theme .bottom-nav-item {
  color: #94a3b8 !important;
  font-weight: 700 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  font-size: 0.74rem !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  opacity: 1 !important;
  padding: 4px 6px !important;
  position: relative !important;
}

.bottom-nav-item .nav-icon-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 28px !important;
  border-radius: 14px !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.bottom-nav-item .nav-label,
.bottom-nav-item span,
body.light-theme .bottom-nav-item .nav-label,
body.light-theme .bottom-nav-item span {
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1px !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  transition: color 0.2s ease !important;
}

.bottom-nav-item i,
body.light-theme .bottom-nav-item i {
  font-size: 1.25rem !important;
  color: rgba(255, 255, 255, 0.92) !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease, filter 0.2s ease !important;
}

.bottom-nav-item:hover,
body.light-theme .bottom-nav-item:hover {
  opacity: 1 !important;
}

.bottom-nav-item:hover .nav-icon-wrap {
  background: rgba(16, 185, 129, 0.15) !important;
  transform: translateY(-2px) !important;
}

.bottom-nav-item:hover i,
body.light-theme .bottom-nav-item:hover i {
  color: #34d399 !important;
}

.bottom-nav-item.active,
body.light-theme .bottom-nav-item.active,
body:not(.light-theme) .bottom-nav-item.active,
body.dark-theme .bottom-nav-item.active {
  color: #34d399 !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

.bottom-nav-item.active .nav-icon-wrap,
body.light-theme .bottom-nav-item.active .nav-icon-wrap {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.22), rgba(16, 185, 129, 0.16)) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(52, 211, 153, 0.4) !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.25) !important;
  transform: translateY(-2px) scale(1.05) !important;
}

.bottom-nav-item.active .nav-label,
.bottom-nav-item.active span,
body.light-theme .bottom-nav-item.active .nav-label,
body.light-theme .bottom-nav-item.active span,
body:not(.light-theme) .bottom-nav-item.active .nav-label,
body:not(.light-theme) .bottom-nav-item.active span,
body.dark-theme .bottom-nav-item.active .nav-label,
body.dark-theme .bottom-nav-item.active span {
  color: #34d399 !important;
  font-weight: 800 !important;
}

.bottom-nav-item.active i,
body.light-theme .bottom-nav-item.active i,
body:not(.light-theme) .bottom-nav-item.active i,
body.dark-theme .bottom-nav-item.active i {
  color: #34d399 !important;
  filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.7)) !important;
}

.bottom-nav-item.center-fab .fab-circle,
body.light-theme .bottom-nav-item.center-fab .fab-circle {
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%) !important;
  border: 2.5px solid #ffffff !important;
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.45), 0 0 0 3px rgba(16, 185, 129, 0.25), inset 0 2px 3px rgba(255, 255, 255, 0.75) !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease !important;
  animation: fabLuxuryFloat 3s infinite ease-in-out !important;
}

body:not(.light-theme) .bottom-nav-item.center-fab .fab-circle,
body.dark-theme .bottom-nav-item.center-fab .fab-circle {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%) !important;
  border: 2.5px solid #ffffff !important;
  box-shadow: 0 8px 26px rgba(5, 150, 105, 0.55), 0 0 0 3px rgba(16, 185, 129, 0.35), inset 0 2px 3px rgba(255, 255, 255, 0.75) !important;
}

.bottom-nav-item.center-fab .fab-circle i,
body.light-theme .bottom-nav-item.center-fab .fab-circle i,
body:not(.light-theme) .bottom-nav-item.center-fab .fab-circle i,
body.dark-theme .bottom-nav-item.center-fab .fab-circle i {
  font-size: 1.55rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bottom-nav-item.center-fab:hover .fab-circle,
.bottom-nav-item.center-fab:active .fab-circle,
body.light-theme .bottom-nav-item.center-fab:hover .fab-circle,
body.light-theme .bottom-nav-item.center-fab:active .fab-circle {
  transform: scale(1.12) translateY(-2px) !important;
  background: linear-gradient(135deg, #34d399 0%, #059669 60%, #065f46 100%) !important;
  border-color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(5, 150, 105, 0.65), 0 0 0 4px rgba(16, 185, 129, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.9) !important;
}

/* Center FAB Button Label (បន្ថែម / ផ្ញើលក់) */
.bottom-nav-item.center-fab .fab-label,
#navPostText,
body.light-theme .bottom-nav-item.center-fab .fab-label,
body.light-theme #navPostText,
body:not(.light-theme) .bottom-nav-item.center-fab .fab-label,
body:not(.light-theme) #navPostText,
body.dark-theme .bottom-nav-item.center-fab .fab-label,
body.dark-theme #navPostText {
  color: #fbbf24 !important;
  font-weight: 900 !important;
  font-size: 0.78rem !important;
  margin-top: 3px !important;
  letter-spacing: 0.2px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75) !important;
  display: block !important;
  line-height: 1.2 !important;
}

.bottom-nav-item.center-fab:hover .fab-label,
#navPostText:hover,
body.light-theme .bottom-nav-item.center-fab:hover .fab-label,
body.light-theme #navPostText:hover,
body:not(.light-theme) .bottom-nav-item.center-fab:hover .fab-label,
body:not(.light-theme) #navPostText:hover,
body.dark-theme .bottom-nav-item.center-fab:hover .fab-label,
body.dark-theme #navPostText:hover {
  color: #fef08a !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.8) !important;
}

/* Light Theme Showcase Detail Overrides */
body.light-theme .showcase-card,
body.light-theme .showcase-sidebar-card,
body.light-theme .modal-content {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

body.light-theme .showcase-title,
body.light-theme .modal-title,
body.light-theme h1:not(.modal-header-white-title), 
body.light-theme h2:not(.modal-header-white-title), 
body.light-theme h3:not(.modal-header-white-title), 
body.light-theme h4:not(.modal-header-white-title) {
  color: #0f172a;
}

body.light-theme .modal-header h1,
body.light-theme .modal-header h2,
body.light-theme .modal-header h3,
body.light-theme .modal-header h4,
.modal-header-white-title {
  color: #ffffff !important;
}

body.light-theme .showcase-desc,
body.light-theme .showcase-location,
body.light-theme p {
  color: #334155 !important;
}

.theme-toggle-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

body.light-theme .theme-toggle-btn {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Nav Official Agent Profile Chip */
.nav-agent-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 4px 12px 4px 6px;
  border-radius: 20px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.25s ease;
}

.nav-agent-chip:hover {
  border-color: var(--pub-gold);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

.nav-agent-avatar-wrap {
  position: relative;
  width: 28px;
  height: 28px;
}

.nav-agent-avatar-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--pub-gold);
}

.nav-agent-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-agent-name {
  font-size: 0.8rem;
  font-weight: 800;
  color: #ffffff;
}

.nav-agent-tag {
  font-size: 0.7rem;
  color: #10b981;
  font-weight: 700;
}

body.light-theme .nav-agent-chip {
  background: #ffffff !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme .nav-agent-name {
  color: #0f172a !important;
}

/* ==========================================================================
   MOBILE REAL ESTATE APP OPTIMIZATIONS (@media max-width: 768px)
   ========================================================================== */

.navbar-centered {
  justify-content: center !important;
  text-align: left !important;
  padding: 10px 16px !important;
}

.navbar-brand-centered {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  text-align: left !important;
}

@media (max-width: 768px) {
  .navbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 7px !important;
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    height: auto !important;
    min-height: calc(50px + env(safe-area-inset-top, 0px)) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  .navbar > div:first-child {
    min-width: 0 !important;
    flex: 0 1 auto !important;
    gap: 4px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }

  .navbar > div:last-child,
  .nav-actions {
    flex-shrink: 0 !important;
    gap: 3px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin-left: auto !important;
  }

  .navbar-brand {
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }

  .navbar-brand img {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    margin-right: 4px !important;
    flex-shrink: 0 !important;
  }

  .btn-sidebar-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 7px !important;
    color: #ffffff !important;
    font-size: 0.90rem !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }

  body.light-theme .btn-sidebar-toggle {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
  }

  .brand-icon {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.82rem !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  .brand-title-styled {
    font-size: 0.80rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    line-height: 1.1 !important;
  }

  .brand-sub-styled {
    display: none !important;
  }

  .agent-nav-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
  }

  .agent-nav-pill {
    width: auto !important;
    min-width: unset !important;
    max-width: none !important;
    height: 26px !important;
    padding: 2px 8px !important;
    border-radius: 99px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
    border: 1.5px solid #f59e0b !important;
    background: rgba(245, 158, 11, 0.25) !important;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }

  .agent-nav-avatar {
    display: none !important;
  }

  .agent-nav-info {
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  .agent-nav-name {
    display: inline-block !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    color: #fbbf24 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
    line-height: 1 !important;
  }

  .agent-nav-role {
    display: none !important;
  }

  .agent-nav-arrow {
    display: inline-block !important;
    font-size: 0.60rem !important;
    color: #fbbf24 !important;
    margin-left: 1px !important;
    flex-shrink: 0 !important;
  }

  .agent-nav-logout-btn {
    display: inline-flex !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    font-size: 0.74rem !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
  }

  .btn-header-icon,
  #headerNotifBtn,
  #flagLangBtn,
  #themeToggleBtn {
    position: relative !important;
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    font-size: 0.70rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  #flagLangBtn img,
  #flagLangIcon svg,
  #flagLangBtn svg {
    width: 15px !important;
    height: 15px !important;
  }

  /* Hide redundant agents button on mobile header (accessible via drawer & bottom bar) */
  #headerAgentsBtn,
  .nav-agent-chip,
  .btn-admin-nav,
  .contact-pill-header,
  .header-action-btns,
  .desktop-nav-links {
    display: none !important;
  }
}

@media (max-width: 400px) {
  .navbar {
    padding-top: max(6px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 6px !important;
    padding-left: max(5px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(5px, env(safe-area-inset-right, 0px)) !important;
    height: auto !important;
    min-height: calc(48px + env(safe-area-inset-top, 0px)) !important;
    gap: 3px !important;
  }

  .brand-title-styled {
    font-size: 0.74rem !important;
  }

  .agent-nav-pill {
    max-width: none !important;
    width: auto !important;
    padding: 2px 6px !important;
    flex-shrink: 0 !important;
  }

  .agent-nav-name {
    max-width: none !important;
    font-size: 0.72rem !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 768px) {
  .theme-toggle-btn {
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
    flex-shrink: 0 !important;
  }

  .dashboard-container {
    padding: 10px 12px 90px !important;
  }

  .toolbar-card.luxury-search-hub {
    margin-bottom: 12px !important;
    padding: 10px !important;
    border-radius: 14px !important;
  }

  .search-row-primary,
  .search-row-secondary {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .search-input-wrap {
    grid-column: span 2 !important;
  }

  .filter-select {
    padding: 7px 8px !important;
    font-size: 0.76rem !important;
  }

  .hero-banner {
    border-radius: 18px !important;
    padding: 22px 14px 18px !important;
    margin-bottom: 20px !important;
  }

  .hero-text-block h1 {
    font-size: 1.3rem !important;
    line-height: 1.3 !important;
  }

  .hero-text-block p {
    font-size: 0.78rem !important;
    margin-bottom: 14px !important;
  }

  .hero-search-engine {
    padding: 12px !important;
    border-radius: 16px !important;
    margin-bottom: 14px !important;
  }

  .hero-search-inputs-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .hero-input-group:first-child {
    grid-column: span 2 !important;
  }

  .btn-hero-search-submit {
    grid-column: span 2 !important;
    padding: 10px 16px !important;
    font-size: 0.86rem !important;
    justify-content: center !important;
  }

  .cat-pill {
    padding: 6px 14px !important;
    font-size: 0.78rem !important;
  }

  /* 2x2 Mobile App Grid for Trust Highlights */
  .trust-highlights-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
  }

  .highlight-card {
    padding: 12px 10px !important;
    border-radius: 14px !important;
  }

  .highlight-icon-wrap {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.1rem !important;
    margin-bottom: 8px !important;
  }

  .highlight-title {
    font-size: 0.82rem !important;
    margin-bottom: 2px !important;
  }

  .highlight-desc {
    font-size: 0.68rem !important;
    line-height: 1.3 !important;
  }

  .section-header-wrap {
    margin-bottom: 14px !important;
  }

  .section-header-title {
    font-size: 1.15rem !important;
  }

  /* 2-Column Property Grid on Mobile */
  .properties-grid,
  .property-grid,
  #publicPropertiesGrid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .property-card {
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  .property-thumb-wrap {
    height: 220px !important;
    min-height: 220px !important;
  }

  .price-tag {
    font-size: 0.88rem !important;
    padding: 3.5px 8px !important;
    border-radius: 7px !important;
  }

  .property-body {
    padding: 10px 8px !important;
    box-sizing: border-box !important;
  }

  .card-badges-row {
    gap: 4px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    margin-bottom: 5px !important;
  }

  .card-badges-row .badge {
    font-size: 0.78rem !important;
    padding: 2.5px 6px !important;
    line-height: 1.25 !important;
  }

  .card-badges-row .badge i {
    font-size: 0.76rem !important;
  }

  .property-title {
    font-size: 1.02rem !important;
    line-height: 1.35 !important;
    margin-bottom: 5px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-word !important;
  }

  .property-location {
    font-size: 0.72rem !important;
    margin-bottom: 6px !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: grab !important;
  }

  .property-location i {
    font-size: 0.74rem !important;
  }

  .property-specs {
    font-size: 0.82rem !important;
    padding: 6px 10px !important;
    gap: 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    cursor: grab !important;
    box-sizing: border-box !important;
  }

  .property-specs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .property-specs .spec-item {
    font-size: 0.82rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .property-specs .spec-item i {
    font-size: 0.82rem !important;
  }

  .property-specs .spec-item strong {
    font-size: 0.84rem !important;
    font-weight: 700 !important;
  }

  .property-specs .spec-code {
    font-size: 0.82rem !important;
    font-weight: 800 !important;
  }

  .btn-card-action-detail {
    min-height: 38px !important;
    height: 38px !important;
    font-size: 0.92rem !important;
    padding: 0 10px !important;
    gap: 6px !important;
  }

  .btn-card-action-detail i {
    font-size: 0.98rem !important;
  }

  .property-actions {
    padding: 4px 5px !important;
    gap: 3px !important;
    align-items: center !important;
    display: flex !important;
    box-sizing: border-box !important;
  }

  .property-actions .btn {
    line-height: 1.2 !important;
  }

  .property-actions .btn.btn-action-icon {
    width: 27px !important;
    min-width: 27px !important;
    height: 28px !important;
    padding: 0 !important;
    font-size: 0.70rem !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
  }

  .property-actions .btn.btn-action-main {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 28px !important;
    padding: 0 4px !important;
    font-weight: 800 !important;
    font-size: 0.70rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    border-radius: 6px !important;
  }

  .property-actions .btn.btn-action-main i {
    font-size: 0.65rem !important;
    flex-shrink: 0 !important;
  }

  .property-actions .btn.btn-action-main span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.70rem !important;
  }

  /* Mobile Floating Interactive Map Button */
  .floating-map-btn-mobile {
    position: fixed;
    bottom: 78px;
    right: 14px;
    z-index: 998;
    background: linear-gradient(135deg, #0284c7, #38bdf8);
    color: #ffffff;
    border: none;
    padding: 10px 16px;
    border-radius: 25px;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.4);
    /* Removed jitter */
  }

  @keyframes floatBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }
}


@media (max-width: 768px) {
  .nav-agent-chip {
    display: none !important;
  }
}

/* ==========================================================================
   LUXURY NAVBAR HEADER
   ========================================================================== */

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 15, 25, 0.88) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--pub-border-color);
  padding: 6px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-icon {
  width: 44px;
  height: 44px;
  background: var(--pub-gold-gradient);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0b0f19;
  font-size: 1.4rem;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.brand-title-styled {
  font-family: 'Outfit', 'Kantumruy Pro', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand-name-gold {
  color: var(--pub-gold-glow);
  font-size: 1.22em;
  font-weight: 900;
  display: inline-block;
  vertical-align: baseline;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.35);
  letter-spacing: -0.01em;
}

.brand-name-white {
  color: #ffffff;
  font-size: 0.92em;
  font-weight: 700;
  vertical-align: baseline;
}

.brand-sub-styled {
  font-size: 0.72rem;
  color: var(--pub-text-secondary);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.desktop-nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.desktop-nav-links a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.25s ease;
}

.desktop-nav-links a:hover,
.desktop-nav-links a.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.desktop-nav-links a.active {
  color: var(--pub-gold-glow);
  border-bottom: 2px solid var(--pub-gold);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-pill-header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
}

.contact-pill-header:hover {
  background: rgba(16, 185, 129, 0.22);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.btn-admin-nav {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95)) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: var(--pub-gold-glow) !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  transition: all 0.25s ease !important;
}

.btn-admin-nav:hover {
  background: var(--pub-gold-gradient) !important;
  color: #0b0f19 !important;
  border-color: var(--pub-gold) !important;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4) !important;
}

/* Hide desktop nav links on small screens */
@media (max-width: 992px) {
  .desktop-nav-links, .contact-pill-header {
    display: none !important;
  }
}

/* ==========================================================================
   HERO BANNER & INTEGRATED SEARCH HUB
   ========================================================================== */

.hero-banner {
  background: radial-gradient(circle at 50% 0%, rgba(30, 41, 59, 0.82) 0%, rgba(11, 15, 25, 0.96) 100%),
              url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat !important;
  background-blend-mode: overlay;
  border: 1px solid var(--pub-border-gold) !important;
  border-radius: 24px !important;
  padding: 38px 24px 30px !important;
  margin-bottom: 32px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
  position: relative;
  overflow: hidden;
}

.hero-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.hero-agent-badge-container {
  margin-bottom: 16px;
}

.hero-agent-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 6px 16px 6px 8px;
  border-radius: 30px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-agent-badge:hover {
  transform: translateY(-2px);
  border-color: var(--pub-gold);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3);
}

.hero-agent-avatar-wrap {
  position: relative;
  width: 34px;
  height: 34px;
}

.hero-agent-avatar-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--pub-gold);
}

.online-indicator-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  background: #10b981;
  border-radius: 50%;
  border: 2px solid #0f172a;
}

.hero-agent-name {
  font-size: 0.85rem;
  font-weight: 800;
  color: #ffffff;
}

.hero-agent-verified-tag {
  font-size: 0.72rem;
  color: #10b981;
  font-weight: 700;
  margin-left: 4px;
}

.hero-badge-arrow {
  font-size: 0.75rem;
  color: var(--pub-gold);
  margin-left: 4px;
}

.hero-text-block h1 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em;
  margin-bottom: 8px !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.hero-text-block p {
  font-size: clamp(0.88rem, 1.6vw, 1.02rem) !important;
  color: #cbd5e1 !important;
  max-width: 680px;
  margin-bottom: 22px !important;
  line-height: 1.6;
}

/* Integrated Hero Search Form */
.hero-search-engine {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 16px;
  max-width: 980px;
  width: 100%;
  margin: 0 auto 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.hero-search-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
}

.search-tab-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.search-tab-btn.active {
  background: var(--pub-gold-gradient);
  color: #0b0f19;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

.hero-search-inputs-grid {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr 1fr auto;
  gap: 10px;
  align-items: center;
}

.hero-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.hero-input-group i {
  position: absolute;
  left: 14px;
  color: var(--pub-gold);
  font-size: 0.95rem;
  pointer-events: none;
}

.hero-input-field {
  width: 100%;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 12px 14px 12px 40px;
  border-radius: 12px;
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: all 0.25s ease;
}

.hero-input-field:focus {
  border-color: var(--pub-gold);
  background: rgba(30, 41, 59, 1);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.hero-select-field {
  width: 100%;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 12px 14px 12px 38px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f59e0b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}

.hero-select-field option {
  background: #0f172a;
  color: #ffffff;
}

.btn-hero-search-submit {
  background: var(--pub-emerald-gradient);
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
  transition: all 0.28s ease;
}

.btn-hero-search-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
  filter: brightness(1.1);
}

@media (max-width: 900px) {
  .hero-search-inputs-grid {
    grid-template-columns: 1fr 1fr;
  }
  .btn-hero-search-submit {
    grid-column: span 2;
    justify-content: center;
  }
}

@media (max-width: 580px) {
  .hero-search-inputs-grid {
    grid-template-columns: 1fr;
  }
  .btn-hero-search-submit {
    grid-column: span 1;
  }
}

/* Category Pills Bar */
.category-pills {
  margin-top: 10px;
}

.cat-pill {
  background: rgba(30, 41, 59, 0.7) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 8px 18px !important;
  border-radius: 20px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
}

.cat-pill:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-color: var(--pub-gold) !important;
}

.cat-pill.active {
  background: var(--pub-gold-gradient) !important;
  color: #0b0f19 !important;
  border-color: var(--pub-gold-glow) !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   TRUST HIGHLIGHTS / STATS RIBBON
   ========================================================================== */

.trust-highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 36px;
}

.trust-card {
  background: rgba(21, 28, 44, 0.7);
  border: 1px solid var(--pub-border-color);
  backdrop-filter: blur(12px);
  padding: 18px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.3s ease;
}

.trust-card:hover {
  transform: translateY(-3px);
  border-color: var(--pub-border-gold);
  background: rgba(30, 41, 59, 0.8);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.trust-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.trust-icon-gold {
  background: rgba(245, 158, 11, 0.12);
  color: var(--pub-gold-glow);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.trust-icon-emerald {
  background: rgba(16, 185, 129, 0.12);
  color: var(--pub-emerald);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.trust-icon-blue {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.trust-icon-purple {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.25);
}

.trust-info-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 2px;
}

.trust-info-sub {
  font-size: 0.76rem;
  color: var(--pub-text-secondary);
  line-height: 1.3;
}

/* ==========================================================================
   PUBLIC PROPERTY CARDS GRID
   ========================================================================== */

.section-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--pub-border-color);
}

.section-header-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.properties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 24px;
}

.property-card {
  background: var(--pub-bg-card) !important;
  border: 1px solid var(--pub-border-color) !important;
  border-radius: var(--pub-radius) !important;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  display: flex;
  flex-direction: column;
}

.property-card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--pub-border-gold) !important;
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(245, 158, 11, 0.15) !important;
  background: var(--pub-bg-card-hover) !important;
}

.property-thumb-wrap {
  position: relative;
  overflow: hidden;
  height: 220px;
}

.property-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.property-card:hover .property-thumb {
  transform: scale(1.08);
}

.price-tag {
  position: absolute !important;
  bottom: 10px !important;
  left: 10px !important;
  background: rgba(15, 23, 42, 0.78) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #fbbf24 !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 0.86rem !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  z-index: 5 !important;
}

.property-body {
  padding: 18px !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-badges-row {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  margin-bottom: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
}

.card-badges-row::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.badge {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  text-transform: uppercase;
}

.badge-sale {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.badge-rent {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

.badge-title-hard {
  background: rgba(168, 85, 247, 0.15) !important;
  color: #c084fc !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

.badge-title-soft {
  background: rgba(245, 158, 11, 0.15) !important;
  color: var(--pub-gold-glow) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.property-title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.property-location {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--pub-text-secondary);
  font-size: 0.75rem;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.property-specs {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 10px 12px;
  border-radius: 10px;
  margin-top: auto;
  font-size: 0.78rem;
  color: #cbd5e1;
}

.spec-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}

.spec-item i {
  color: var(--pub-gold);
}

.property-actions {
  padding: 14px 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(15, 23, 42, 0.4);
}

/* ==========================================================================
   FEATURE PROMO BANNERS & SECTIONS
   ========================================================================== */

.map-cta-banner {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9)),
              url('https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=1600&q=80') center/cover;
  background-blend-mode: overlay;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 20px;
  padding: 30px;
  margin: 40px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.map-cta-text h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
}

.map-cta-text p {
  font-size: 0.88rem;
  color: #94a3b8;
  max-width: 540px;
}

.btn-open-map-lg {
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
  transition: all 0.28s ease;
}

.btn-open-map-lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.6);
}

@media (max-width: 768px) {
  .map-cta-banner {
    flex-direction: column;
    text-align: center;
  }
}

/* Dual Feature Cards (Submit Property & Loan Calc) */
.dual-promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

.promo-card {
  background: var(--pub-bg-card);
  border: 1px solid var(--pub-border-color);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
}

.promo-card:hover {
  border-color: var(--pub-border-gold);
  transform: translateY(-3px);
}

.promo-card-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 14px;
}

.promo-card h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
}

.promo-card p {
  font-size: 0.84rem;
  color: var(--pub-text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}

@media (max-width: 768px) {
  .dual-promo-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   VERIFIED AGENTS SECTION
   ========================================================================== */

.agents-section {
  margin-bottom: 48px;
}

.agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.agent-card-public {
  background: var(--pub-bg-card);
  border: 1px solid var(--pub-border-color);
  border-radius: 18px;
  padding: 18px;
  text-align: center;
  transition: all 0.3s ease;
}

.agent-card-public:hover {
  border-color: var(--pub-border-gold);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.agent-avatar-public {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 12px;
  border: 2px solid var(--pub-gold);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.agent-name-public {
  font-size: 0.98rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
}

.agent-tag-public {
  font-size: 0.74rem;
  color: #10b981;
  font-weight: 700;
  margin-bottom: 14px;
}

.agent-actions-public {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.btn-agent-contact {
  flex: 1;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-agent-call {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.btn-agent-call:hover {
  background: #10b981;
  color: #ffffff;
}

.btn-agent-tg {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.btn-agent-tg:hover {
  background: #0284c7;
  color: #ffffff;
}

/* ==========================================================================
   PUBLIC WEB FOOTER
   ========================================================================== */

.app-footer {
  background: #080b12 !important;
  border-top: 1px solid var(--pub-border-color);
  padding: 24px 16px 85px !important;
  margin-top: 20px !important;
}

.footer-content-grid {
  max-width: 1200px;
  margin: 0 auto 16px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 24px;
  text-align: left !important;
}

.footer-brand-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
}

.footer-brand-desc {
  font-size: 0.8rem;
  color: var(--pub-text-secondary);
  line-height: 1.5;
}

.footer-col-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--pub-gold-glow);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links-list li {
  margin-bottom: 4px;
}

.footer-links-list a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  transition: color 0.2s ease;
}

.footer-links-list a:hover {
  color: #ffffff;
}

.footer-bottom-bar {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--pub-text-muted);
}

@media (max-width: 768px) {
  .app-footer {
    padding: 14px 14px 68px !important;
    margin-top: 12px !important;
    text-align: left !important;
  }

  .footer-content-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 8px !important;
    margin-bottom: 8px !important;
    text-align: left !important;
  }

  .footer-content-grid > div:first-child {
    grid-column: span 2 !important;
  }

  .footer-content-grid > div:last-child {
    grid-column: span 2 !important;
  }

  .footer-brand-title {
    font-size: 0.95rem !important;
    margin-bottom: 3px !important;
  }

  .footer-brand-desc {
    font-size: 0.73rem !important;
    line-height: 1.35 !important;
  }

  .footer-col-title {
    font-size: 0.76rem !important;
    margin-bottom: 4px !important;
  }

  .footer-links-list li {
    margin-bottom: 2px !important;
    font-size: 0.73rem !important;
  }

  .footer-bottom-bar {
    flex-direction: column !important;
    gap: 4px !important;
    text-align: left !important;
    align-items: center !important;
    padding-top: 6px !important;
    font-size: 0.68rem !important;
  }

  /* Floating Interactive Map Shortcut Button */
  .floating-map-btn-mobile {
    position: fixed !important;
    bottom: 74px !important;
    right: 10px !important;
    z-index: 998 !important;
    background: linear-gradient(135deg, #0284c7, #38bdf8) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 14px !important;
    border-radius: 20px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4) !important;
    animation: map-btn-pulse 2.5s infinite !important;
    transition: transform 0.2s ease !important;
  }

  .floating-map-btn-mobile:active {
    transform: scale(0.94) !important;
  }
}

/* ==========================================================================
   PUBLIC LUXURY ANIMATIONS & VISUAL EFFECTS
   ========================================================================== */

@keyframes title-gold-glow {
  0%, 100% {
    opacity: 0.95;
  }
  50% {
    opacity: 1;
  }
}

.brand-title-styled {
  letter-spacing: -0.3px;
}

@keyframes flame-bounce {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.6));
  }
  50% {
    transform: translateY(-3px) scale(1.18);
    filter: drop-shadow(0 0 14px rgba(245, 158, 11, 0.9));
  }
}

@keyframes card-fade-up {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes map-btn-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.7);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(2, 132, 199, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(2, 132, 199, 0);
  }
}

.brand-title-styled {
  animation: title-gold-glow 3.5s infinite ease-in-out;
}

.section-header-title i.fa-fire {
  display: inline-block;
  /* Removed jitter */
}

.property-card-public {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.property-card-public:hover {
  transform: translateY(-5px) scale(1.02) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3), 0 0 20px rgba(245, 158, 11, 0.25) !important;
  border-color: rgba(245, 158, 11, 0.6) !important;
}

.cat-pill {
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.cat-pill:hover {
  transform: translateY(-2px) scale(1.05) !important;
}

.cat-pill.active {
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4) !important;
  transform: scale(1.04) !important;
}

/* ==========================================================================
   PUBLIC HERO BANNER, AGENCY SHOWCASE & FOOTER STYLES
   ========================================================================== */

.hero-banner-showcase {
  background: transparent;
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  margin-bottom: 24px;
  border: 1px solid var(--pub-border-gold);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-banner-showcase::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.hero-badge-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid var(--pub-border-gold);
  color: #fbbf24;
  padding: 6px 16px;
  border-radius: 99px;
  font-size: 0.84rem;
  font-weight: 800;
  margin-bottom: 14px;
}

.hero-main-heading {
  font-size: 1.8rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 10px;
  line-height: 1.3;
}

.hero-sub-heading {
  font-size: 0.95rem;
  color: #94a3b8;
  max-width: 680px;
  margin: 0 auto 20px auto;
  line-height: 1.6;
}

.hero-stats-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.hero-stat-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  padding: 8px 16px;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Agency Showcase Section */
.agency-showcase-section {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin: 32px 0 24px 0;
  border: 1px solid var(--pub-border-gold);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .hero-slider-section,
  .hero-sub-action-bar,
  .hero-banner-showcase,
  #heroShowcaseSection,
  .hero-slider-section,
  .hero-sub-action-bar,
  .hero-top-left-actions,
  .agency-showcase-section {
    display: none !important;
  }
}

.agency-info-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.agency-logo-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d97706, #10b981);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #fff;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
  flex-shrink: 0;
}

.agency-title-text h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 4px 0;
}

.agency-title-text p {
  font-size: 0.85rem;
  color: #fbbf24;
  margin: 0;
  font-weight: 600;
}

.agency-actions-right {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Professional Public Footer */
.public-footer {
  background: #0b0f19 !important;
  border-top: 2px solid var(--pub-border-gold);
  padding: 36px 20px 84px 20px !important;
  margin-top: 36px;
  color: #cbd5e1 !important;
  font-size: 0.88rem;
}

@media (max-width: 768px) {
  .public-footer {
    padding: 28px 16px 115px 16px !important;
    margin-top: 24px;
  }
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto 24px auto;
}

.footer-col h4 {
  color: #ffffff !important;
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--pub-gold);
  padding-bottom: 4px;
  display: inline-block;
}

.footer-col p {
  color: #cbd5e1 !important;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #cbd5e1 !important;
}

.footer-links li {
  color: #cbd5e1 !important;
  font-size: 0.84rem;
}

.footer-links a {
  color: #cbd5e1 !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #fbbf24 !important;
}

.footer-bottom-bar {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 16px;
  font-size: 0.8rem;
  color: #94a3b8 !important;
}

body.light-theme .hero-banner-showcase {
  background: transparent !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.3) !important;
}

body.light-theme .hero-badge-title {
  background: rgba(245, 158, 11, 0.22) !important;
  border: 1px solid #f59e0b !important;
  color: #fbbf24 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.3) !important;
}

body.light-theme .hero-main-heading {
  color: #ffffff !important;
}

body.light-theme .hero-sub-heading {
  color: #cbd5e1 !important;
}

body.light-theme .hero-sub-action-bar .hero-stat-pill,
body.light-theme .hero-stat-pill {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}

body.light-theme .hero-sub-action-bar .hero-stat-pill span,
body.light-theme .hero-stat-pill span {
  color: #0f172a !important;
  font-weight: 800 !important;
}

body.light-theme .agency-showcase-section {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25) !important;
}

body.light-theme .agency-title-text h3 {
  color: #ffffff !important;
}

body.light-theme .public-footer {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  color: #334155 !important;
  border-top: 2px solid #d97706 !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .footer-col h4 {
  color: #0f172a !important;
  border-bottom: 2px solid #d97706 !important;
}

body.light-theme .footer-col p,
body.light-theme .footer-links li,
body.light-theme .footer-links a {
  color: #334155 !important;
}

body.light-theme .footer-links a:hover {
  color: #d97706 !important;
}

body.light-theme .footer-bottom-bar {
  border-top: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

#flagLangBtn {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35) !important;
}

#flagLangIcon {
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 0.85rem !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

#themeToggleBtn {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
}

#themeIcon {
  color: #fbbf24 !important;
}

body.light-theme #flagLangBtn {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

body.light-theme #flagLangIcon {
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 0.85rem !important;
  text-shadow: none !important;
}

body.light-theme #themeToggleBtn {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

body.light-theme #themeIcon {
  color: #d97706 !important;
}

body.light-theme .agent-nav-pill {
  background: #ffffff !important;
  border: 1.5px solid #f59e0b !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.22) !important;
}

body.light-theme .agent-nav-name {
  color: #d97706 !important;
  font-weight: 900 !important;
}

body.light-theme .agent-nav-arrow {
  color: #d97706 !important;
}

body.light-theme #headerNotifBtn {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

/* ==========================================================================
   ULTRA-CATCHY ANIMATED OWNER HUB BANNER CARD
   ========================================================================== */

@keyframes bullhornSwingPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  10% { transform: scale(1.18) rotate(-14deg); }
  20% { transform: scale(1.18) rotate(14deg); }
  30% { transform: scale(1.18) rotate(-10deg); }
  40% { transform: scale(1.18) rotate(10deg); }
  50% { transform: scale(1.05) rotate(0deg); }
}

@keyframes shimmerBeamSweep {
  0% { transform: translateX(-150%) skewX(-25deg); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(250%) skewX(-25deg); opacity: 0; }
}

@keyframes auraPulseRing {
  0% { transform: scale(0.9); opacity: 0.8; box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); }
  70% { transform: scale(1.4); opacity: 0; box-shadow: 0 0 0 14px rgba(245, 158, 11, 0); }
  100% { transform: scale(0.9); opacity: 0; }
}

@keyframes freeBadgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); }
  50% { transform: scale(1.06); box-shadow: 0 0 16px rgba(16, 185, 129, 0.8), 0 0 25px rgba(52, 211, 153, 0.5); }
}

@keyframes arrowBtnBounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

/* Banner Container */
.owner-hub-banner-card {
  position: relative;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.9) 60%, rgba(15, 23, 42, 0.95) 100%);
  border: 1.8px solid rgba(245, 158, 11, 0.55);
  border-radius: 20px;
  padding: 16px 20px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 20px rgba(245, 158, 11, 0.15);
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
}

.owner-hub-banner-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: #fbbf24;
  box-shadow: 0 18px 45px rgba(245, 158, 11, 0.35), 0 0 30px rgba(245, 158, 11, 0.25);
}

/* Shimmer Beam Effect */
.shimmer-light-beam {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
  pointer-events: none;
  animation: shimmerBeamSweep 4.5s ease-in-out infinite;
  z-index: 1;
}

/* Megaphone Icon Box & Aura Ring */
.owner-megaphone-box {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
}


.pulse-ring-aura {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  pointer-events: none;
  animation: auraPulseRing 2.5s ease-out infinite;
}

.owner-banner-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: #ffffff !important;
  margin: 0 0 3px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.owner-banner-sub {
  font-size: 0.82rem;
  color: #cbd5e1 !important;
  margin: 0;
  line-height: 1.4;
  font-weight: 600;
}

/* Free Badge Metallic Pulse */
.pulse-badge-emerald {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(5, 150, 105, 0.2) 100%) !important;
  border: 1.5px solid #10b981 !important;
  color: #34d399 !important;
  font-size: 0.74rem !important;
  padding: 3px 10px !important;
  border-radius: 99px !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  /* Removed jitter */
}

/* Arrow Right Button Indicator */
.owner-banner-arrow-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.1);
  border: 1.5px solid rgba(37, 99, 235, 0.3);
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.owner-hub-banner-card:hover .owner-banner-arrow-btn {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  border-color: #2563eb;
  transform: scale(1.1);
}


/* Light Theme Overrides for Banner Card */
body.light-theme .owner-hub-banner-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
}

body.light-theme .owner-hub-banner-card:hover {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

body.light-theme .shimmer-light-beam {
  background: linear-gradient(90deg, transparent 0%, rgba(15, 23, 42, 0.04) 50%, transparent 100%) !important;
}

body.light-theme .owner-megaphone-box {
  background: #0f172a !important;
  color: #38bdf8 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important;
}

body.light-theme .owner-banner-title {
  color: #0f172a !important;
  font-weight: 800 !important;
}

body.light-theme .owner-banner-sub {
  color: #64748b !important;
  font-weight: 600 !important;
}

body.light-theme .owner-banner-badge {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #047857 !important;
  font-weight: 800 !important;
}

body.light-theme .owner-banner-arrow-btn {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

.owner-hub-section {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.92) 50%, rgba(15, 30, 42, 0.96) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-lg);
  padding: 16px 14px;
  margin-bottom: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}

.owner-hub-section::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

.owner-hub-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 0.76rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.owner-hub-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 4px;
  line-height: 1.3;
}

.owner-hub-subtitle {
  font-size: 0.8rem;
  color: #cbd5e1;
  max-width: 680px;
  margin: 0 auto 12px auto;
  line-height: 1.45;
}

.owner-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

@media (max-width: 992px) {
  .owner-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

@media (max-width: 576px) {
  .owner-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .owner-hub-section {
    padding: 12px 10px;
  }
  
  .owner-hub-title {
    font-size: 1.12rem;
  }
  
  .owner-hub-subtitle {
    font-size: 0.76rem;
    margin-bottom: 10px;
  }
}

.owner-benefit-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 10px;
  text-align: left;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.owner-benefit-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.owner-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.icon-gold-bg {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.icon-emerald-bg {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.icon-sky-bg {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.icon-purple-bg {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.owner-card-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
}

.owner-card-desc {
  font-size: 0.74rem;
  color: #94a3b8;
  line-height: 1.35;
}

/* 3-Step Process Flow Bar */
.owner-steps-bar {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 12px;
}

.owner-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (max-width: 768px) {
  .owner-steps-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.owner-step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}

.owner-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d97706, #f59e0b);
  color: #ffffff;
  font-weight: 900;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.owner-step-text {
  display: flex;
  flex-direction: column;
}

.owner-step-text strong {
  color: #f1f5f9;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
}

.owner-step-text span {
  color: #94a3b8;
  font-size: 0.7rem;
}

.owner-hub-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Owner Guide Modal Tabs & FAQs */
.sub-modal-tabs {
  display: flex;
  gap: 8px;
  background: rgba(15, 23, 42, 0.6);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 12px;
}

.sub-tab-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sub-tab-btn.active {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Light Theme Overrides for Owner Hub */
body.light-theme .owner-hub-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 60%, #fffbe6 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .owner-hub-title {
  color: #0f172a !important;
}

body.light-theme .owner-hub-subtitle {
  color: #475569 !important;
}

body.light-theme .owner-benefit-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .owner-benefit-card:hover {
  border-color: #f59e0b !important;
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.15) !important;
}

body.light-theme .owner-hub-subtitle {
  color: #0f172a !important;
  font-weight: 700 !important;
}

body.light-theme .owner-benefit-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
}

body.light-theme .owner-card-title {
  color: #0f172a !important;
  font-size: 0.88rem !important;
  font-weight: 900 !important;
}

body.light-theme .owner-card-desc {
  color: #1e293b !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

body.light-theme .owner-steps-bar {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

body.light-theme .owner-step-text strong {
  color: #0f172a !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
}

body.light-theme .owner-step-text span {
  color: #334155 !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   MODAL POPUP LIGHT & DARK THEME UNIFIED CONTRAST FIXES
   ========================================================================== */

.modal-overlay {
  z-index: 9999999 !important;
}

.modal-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header span,
.modal-header i {
  color: #ffffff !important;
}

.modal-header .btn-icon,
.modal-header .btn-outline,
.modal-header button.btn-icon,
.modal-header .btn-close,
.modal-header .btn-close-modal {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.modal-header .btn-icon:hover,
.modal-header .btn-outline:hover,
.modal-header button.btn-icon:hover,
.modal-header .btn-close:hover,
.modal-header .btn-close-modal:hover {
  background: rgba(239, 68, 68, 0.9) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  transform: rotate(90deg) !important;
}

/* Light Theme Modal Overrides */
body.light-theme .modal-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body.light-theme .modal-header h1,
body.light-theme .modal-header h2,
body.light-theme .modal-header h3,
body.light-theme .modal-header h4,
body.light-theme .modal-header span,
body.light-theme .modal-header i {
  color: #ffffff !important;
}

body.light-theme .modal-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25) !important;
}

body.light-theme .modal-body {
  background: #ffffff !important;
  color: #0f172a !important;
}

body.light-theme .modal-body h1,
body.light-theme .modal-body h2,
body.light-theme .modal-body h3,
body.light-theme .modal-body h4 {
  color: #0f172a !important;
}

body.light-theme .modal-body p,
body.light-theme .modal-body label {
  color: #334155 !important;
}

body.light-theme .sub-modal-tabs {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
}

body.light-theme .sub-tab-btn {
  color: #475569 !important;
}

body.light-theme .sub-tab-btn.active {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
}

body.light-theme .modal-footer {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}

/* Dedicated Glassmorphic Close Button for Modals */
.modal-close-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.85) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  transform: rotate(90deg) scale(1.08) !important;
}

/* ==========================================================================
   SEARCH & FILTER HUB DARK & LIGHT THEME STYLES
   ========================================================================== */

/* Dark Mode (Default Theme) */
.toolbar-card.luxury-search-hub {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
}

.luxury-search-hub .search-input-wrap input {
  background: #1e293b !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.luxury-search-hub .search-input-wrap input::placeholder {
  color: #94a3b8 !important;
}

.luxury-search-hub .filter-select {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.luxury-search-hub .filter-select option {
  background: transparent !important;
  color: #ffffff !important;
}

.luxury-search-hub .cat-pill {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.luxury-search-hub .cat-pill:hover {
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

.luxury-search-hub .cat-pill.active {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.22) 0%, rgba(16, 185, 129, 0.18) 100%) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  color: #34d399 !important;
  border: 1.5px solid rgba(52, 211, 153, 0.5) !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.2) !important;
  font-weight: 850 !important;
}

/* Light Mode Overrides */
body.light-theme .toolbar-card.luxury-search-hub {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

body.light-theme .luxury-search-hub .search-input-wrap input {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

body.light-theme .luxury-search-hub .search-input-wrap input::placeholder {
  color: #64748b !important;
}

body.light-theme .luxury-search-hub .filter-select {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

body.light-theme .luxury-search-hub .filter-select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

body.light-theme .luxury-search-hub .cat-pill {
  background: rgba(241, 245, 249, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

body.light-theme .luxury-search-hub .cat-pill:hover {
  border-color: #34d399 !important;
  color: #059669 !important;
  background: #f0fdf4 !important;
}

body.light-theme .luxury-search-hub .cat-pill.active {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.22) 0%, rgba(16, 185, 129, 0.16) 100%) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  color: #047857 !important;
  border: 1.5px solid rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
  font-weight: 850 !important;
}

/* ==========================================================================
   ULTRA-LUXURY GLASSMORPHIC NOTIFICATION MODAL & ANIMATIONS
   ========================================================================== */

@keyframes notifSlideIn {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulseBellRing {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(8deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(2deg); }
}

@keyframes pulseUnreadDot {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
  }
  70% {
    transform: scale(1.15);
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

.notif-badge-pill {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 99px;
  border: 1.5px solid #0f172a;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
}

.nav-icon-wrap .notif-badge-pill {
  position: absolute;
  top: -5px;
  right: -8px;
}

.sidebar-menu-list .notif-badge-pill,
#adminSidebarNotifBadge {
  position: static !important;
  margin-left: auto !important;
}

.notif-badge-pill.show {
  display: inline-flex !important;
}

.header-notif-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  font-size: 0.65rem !important;
  font-weight: 900 !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  border-radius: 99px !important;
  border: 1.5px solid #0f172a !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.7) !important;
  pointer-events: none !important;
  z-index: 100 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  animation: notifPulseGlow 2s infinite ease-in-out;
}

.header-notif-badge.show {
  display: flex !important;
}

body.light-theme .header-notif-badge {
  border: 1.5px solid #ffffff !important;
}

.has-unread-notif {
  color: #fbbf24 !important;
  animation: bellShake 3s ease infinite !important;
}

@keyframes bellShake {
  0%, 80%, 100% { transform: rotate(0); }
  85% { transform: rotate(15deg); }
  90% { transform: rotate(-15deg); }
  95% { transform: rotate(10deg); }
}

.luxury-notif-backdrop {
  background: rgba(11, 15, 25, 0.78) !important;
  backdrop-filter: blur(12px) !important;
}

.luxury-notif-modal {
  max-width: 650px !important;
  width: 94vw !important;
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.4) !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(245, 158, 11, 0.15) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.luxury-notif-header {
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 41, 59, 0.98) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.notif-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.notif-bell-icon-pulse {
  width: 38px;
  height: 38px;
  min-width: 38px;
  max-width: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.15) 100%);
  border: 1px solid rgba(245, 158, 11, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fbbf24;
  font-size: 1.15rem;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
  flex-shrink: 0;
}

.notif-bell-icon-pulse i {
  animation: pulseBellRing 3s ease-in-out infinite;
}

.notif-title-text-group {
  min-width: 0;
  flex: 1;
}

.notif-header-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: #ffffff !important;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-header-sub {
  font-size: 0.74rem;
  color: #94a3b8;
  margin: 2px 0 0 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-header-actions-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.notif-header-actions-bar .btn-mark-all-read {
  flex: 1;
  justify-content: center;
}

.notif-header-actions-bar .btn-clear-all-notifs {
  flex: 1;
  justify-content: center;
}

.btn-mark-all-read {
  background: rgba(16, 185, 129, 0.18);
  border: 1.5px solid rgba(52, 211, 153, 0.6);
  color: #34d399;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.btn-mark-all-read:hover {
  background: #059669;
  border-color: #10b981;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.btn-clear-all-notifs {
  background: rgba(239, 68, 68, 0.18);
  border: 1.5px solid rgba(248, 113, 113, 0.5);
  color: #f87171;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.btn-clear-all-notifs:hover {
  background: #dc2626;
  border-color: #ef4444;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.notif-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.notif-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #f87171;
  transform: rotate(90deg);
}

/* Filter Segmented Control Bar */
.luxury-notif-filter-bar {
  padding: 10px 16px;
  background: rgba(15, 23, 42, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.luxury-notif-filter-bar::-webkit-scrollbar {
  display: none;
}

.notif-filter-pill {
  background: rgba(30, 41, 59, 0.7);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 7px 14px;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 6px;
}

.notif-filter-pill:hover {
  background: rgba(30, 41, 59, 0.95);
  color: #f8fafc;
  border-color: rgba(245, 158, 11, 0.4);
  transform: translateY(-1px);
}

.notif-filter-pill.active {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%) !important;
  color: #0f172a !important;
  border-color: #fbbf24 !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4) !important;
  transform: scale(1.03) !important;
}

/* Notification Body & Items */
.luxury-notif-body {
  padding: 16px !important;
  max-height: 68vh !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: rgba(15, 23, 42, 0.4) !important;
}

.notif-card-luxury {
  position: relative;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: notifSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  backdrop-filter: blur(8px);
}

.notif-card-luxury:hover {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
  border-color: rgba(245, 158, 11, 0.5);
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 15px rgba(245, 158, 11, 0.15);
}

.notif-card-luxury.unread {
  border-left: 4px solid #f59e0b !important;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
}

.notif-card-luxury.type-new_listing {
  border-left: 4px solid #10b981;
}

.notif-card-luxury.type-sold {
  border-left: 4px solid #ef4444;
}

.notif-card-luxury.type-rented {
  border-left: 4px solid #38bdf8;
}

.notif-card-luxury.type-price_change {
  border-left: 4px solid #f59e0b;
}

/* Avatar Icon Boxes */
.notif-avatar-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.notif-avatar-icon.type-new_listing {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #ffffff;
}

.notif-avatar-icon.type-sold {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: #ffffff;
}

.notif-avatar-icon.type-rented {
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  color: #ffffff;
}

.notif-avatar-icon.type-price_change {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  color: #ffffff;
}

.notif-content-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notif-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.notif-pill-tag {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.3;
}

.badge-notif-emerald {
  background: rgba(16, 185, 129, 0.22);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.5);
  font-weight: 800;
}

.badge-notif-crimson {
  background: rgba(239, 68, 68, 0.22);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.5);
  font-weight: 800;
}

.badge-notif-sky {
  background: rgba(56, 189, 248, 0.22);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.5);
  font-weight: 800;
}

.badge-notif-gold {
  background: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.5);
  font-weight: 800;
}

.notif-time-ago {
  font-size: 0.74rem;
  color: #94a3b8;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.notif-card-title {
  font-size: 0.94rem;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.35;
}

.notif-card-desc {
  font-size: 0.82rem;
  color: #cbd5e1;
  line-height: 1.45;
  font-weight: 500;
}

.unread-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 10px #f59e0b;
  position: absolute;
  top: 14px;
  right: 14px;
  animation: pulseUnreadDot 2s infinite;
}

/* Empty State */
.notif-empty-state {
  text-align: center;
  padding: 42px 20px;
  color: #94a3b8;
}

.empty-icon-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px auto;
  font-size: 1.8rem;
  color: #64748b;
}

.empty-title {
  font-size: 1rem;
  font-weight: 800;
  color: #f8fafc;
  margin-bottom: 4px;
}

.empty-sub {
  font-size: 0.82rem;
  color: #64748b;
  margin: 0;
}

/* Light Mode Luxury Overrides */
body.light-theme .luxury-notif-backdrop {
  background: rgba(15, 23, 42, 0.6) !important;
}

body.light-theme .luxury-notif-modal {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important;
  border-color: rgba(217, 119, 6, 0.35) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25) !important;
}

body.light-theme .luxury-notif-header {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
  border-bottom-color: #e2e8f0 !important;
}

body.light-theme .notif-header-title {
  color: #0f172a !important;
}

body.light-theme .notif-header-sub {
  color: #64748b !important;
}

body.light-theme .btn-mark-all-read {
  background: #ecfdf5 !important;
  border: 1.5px solid #10b981 !important;
  color: #065f46 !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15) !important;
}

body.light-theme .btn-mark-all-read:hover {
  background: #059669 !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.3) !important;
}

body.light-theme .btn-clear-all-notifs {
  background: #fef2f2 !important;
  border: 1.5px solid #fca5a5 !important;
  color: #b91c1c !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.15) !important;
}

body.light-theme .btn-clear-all-notifs:hover {
  background: #dc2626 !important;
  border-color: #b91c1c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3) !important;
}

body.light-theme .notif-bell-icon-pulse {
  background: #fef3c7 !important;
  border: 1px solid #fde047 !important;
  color: #d97706 !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15) !important;
}

body.light-theme .notif-close-btn {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

body.light-theme .notif-close-btn:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

body.light-theme .luxury-notif-filter-bar {
  background: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
}

body.light-theme .notif-filter-pill {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1.5px solid #cbd5e1 !important;
  font-weight: 700 !important;
}

body.light-theme .notif-filter-pill:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

body.light-theme .notif-filter-pill.active {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
  border-color: #b45309 !important;
  font-weight: 800 !important;
}

.notif-icon-emerald {
  color: #10b981;
}

.notif-icon-crimson {
  color: #ef4444;
}

.notif-icon-gold {
  color: #f59e0b;
}

body.light-theme .notif-icon-emerald {
  color: #059669 !important;
}

body.light-theme .notif-icon-crimson {
  color: #dc2626 !important;
}

body.light-theme .notif-icon-gold {
  color: #d97706 !important;
}

body.light-theme .badge-notif-emerald {
  background: #ecfdf5 !important;
  color: #065f46 !important;
  border: 1.5px solid #10b981 !important;
  font-weight: 800 !important;
}

body.light-theme .badge-notif-crimson {
  background: #fef2f2 !important;
  color: #991b1b !important;
  border: 1.5px solid #ef4444 !important;
  font-weight: 800 !important;
}

body.light-theme .badge-notif-sky {
  background: #f0f9ff !important;
  color: #075985 !important;
  border: 1.5px solid #0284c7 !important;
  font-weight: 800 !important;
}

body.light-theme .badge-notif-gold {
  background: #fffbeb !important;
  color: #92400e !important;
  border: 1.5px solid #f59e0b !important;
  font-weight: 800 !important;
}

body.light-theme .luxury-notif-body {
  background: #f8fafc !important;
}

body.light-theme .notif-card-luxury {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme .notif-card-luxury:hover {
  background: #ffffff !important;
  border-color: #d97706 !important;
  box-shadow: 0 12px 28px rgba(217, 119, 6, 0.15) !important;
}

body.light-theme .notif-card-title {
  color: #0f172a !important;
}

body.light-theme .notif-card-desc {
  color: #334155 !important;
}

body.light-theme .notif-time-ago {
  color: #64748b !important;
}

body.light-theme .notif-close-btn {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

/* ==========================================================================
   ULTRA-CATCHY ACTION BUTTONS FOR OWNER MODALS & FOOTERS
   ========================================================================== */

@keyframes pulseGlowEmerald {
  0%, 100% {
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4), 0 0 30px rgba(16, 185, 129, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 25px rgba(16, 185, 129, 0.85), 0 0 45px rgba(52, 211, 153, 0.55);
    transform: scale(1.02);
  }
}

@keyframes pulseGlowTelegram {
  0%, 100% {
    box-shadow: 0 0 12px rgba(14, 165, 233, 0.35);
  }
  50% {
    box-shadow: 0 0 22px rgba(14, 165, 233, 0.8), 0 0 35px rgba(56, 189, 248, 0.45);
  }
}

@keyframes iconFlyBounce {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(3px, -3px) rotate(12deg); }
  50% { transform: translate(-1px, 1px) rotate(-6deg); }
  75% { transform: translate(2px, -2px) rotate(6deg); }
}

@keyframes iconPulseSpin {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25) rotate(15deg); }
}

/* Primary CTA Emerald Button (Submit Property) */
.btn-cta-emerald-animated {
  background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #6ee7b7 !important;
  border-radius: 99px !important;
  padding: 13px 26px !important;
  font-size: 0.96rem !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  letter-spacing: 0.02em !important;
  animation: pulseGlowEmerald 2.5s ease-in-out infinite !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.btn-cta-emerald-animated:hover {
  background: linear-gradient(135deg, #047857 0%, #059669 50%, #10b981 100%) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 35px rgba(16, 185, 129, 0.6) !important;
  border-color: #ffffff !important;
}

.btn-cta-emerald-animated i {
  font-size: 1.15rem !important;
  animation: iconFlyBounce 3s ease-in-out infinite !important;
}

/* Telegram Animated Button */
.btn-telegram-animated {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 50%, #38bdf8 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid #7dd3fc !important;
  border-radius: 99px !important;
  padding: 11px 22px !important;
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  animation: pulseGlowTelegram 3s ease-in-out infinite !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  flex: 1 !important;
  min-width: 150px !important;
  box-sizing: border-box !important;
}

.btn-telegram-animated:hover {
  background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 10px 28px rgba(14, 165, 233, 0.5) !important;
  color: #ffffff !important;
}

.btn-telegram-animated i {
  font-size: 1.1rem !important;
  animation: iconFlyBounce 2.5s ease-in-out infinite !important;
}

/* Outline Guide & FAQs Button */
.btn-guide-animated {
  background: rgba(245, 158, 11, 0.1) !important;
  border: 1.8px solid #f59e0b !important;
  color: #d97706 !important;
  border-radius: 99px !important;
  padding: 11px 20px !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  flex: 1 !important;
  min-width: 150px !important;
  box-sizing: border-box !important;
}

.btn-guide-animated:hover {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
  border-color: #fbbf24 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4) !important;
}

.btn-guide-animated i {
  font-size: 1rem !important;
  animation: iconPulseSpin 3s ease-in-out infinite !important;
}

/* Dark Theme Overrides */
body:not(.light-theme) .btn-guide-animated {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fbbf24 !important;
  border-color: rgba(245, 158, 11, 0.7) !important;
}



/* ==========================================================================
   SMART SCROLL AUTO-HIDE TRANSITIONS (TOP HEADER & FLOATING BTN ONLY)
   ========================================================================== */

.floating-map-btn-mobile,
header.navbar,
.navbar,
.app-header,
.header-toolbar {
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease, box-shadow 0.32s ease !important;
  will-change: transform, opacity;
}

/* Bottom Navigation Bar remains permanently fixed on mobile (No auto-hide) */
@media (max-width: 768px) {
  .mobile-bottom-nav,
  .mobile-bottom-nav.nav-autohide {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }
}

/* Auto-hide Floating Map & Action Buttons on Scroll Down */
.floating-map-btn-mobile.btn-autohide,
.floating-action-btn.btn-autohide {
  transform: translateY(140%) scale(0.75) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Auto-hide Top Navigation Header Bar on Scroll Down */
header.navbar.header-autohide,
.navbar.header-autohide,
.app-header.header-autohide,
.header-toolbar.header-autohide {
  transform: translateY(-110%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* ==========================================================================
   LUXURY VIBRANT BUTTONS, DROPDOWNS & FILTER CONTROLS
   ========================================================================== */

/* Search Toolbar Hub Container - DEFAULT = DARK MODE */
.luxury-search-hub {
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.92) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--radius-lg, 16px) !important;
  padding: 18px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Light Mode Override */
body.light-theme .luxury-search-hub {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

/* Filter Dropdown Select Boxes & Search Inputs - DEFAULT = DARK MODE */
.filter-select,
.search-input {
  background: rgba(15, 23, 42, 0.85) !important;
  color: #f8fafc !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  outline: none !important;
  cursor: pointer !important;
}

/* Light Mode Override */
body.light-theme .filter-select,
body.light-theme .search-input {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

/* Hover Elevation & Gold Glow Effects - Dark Mode */
.filter-select:hover,
.search-input:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: #fbbf24 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 26px rgba(245, 158, 11, 0.35) !important;
}

/* Hover - Light Mode */
body.light-theme .filter-select:hover,
body.light-theme .search-input:hover {
  border-color: #d97706 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 8px 22px rgba(217, 119, 6, 0.18), 0 2px 6px rgba(0,0,0,0.06) !important;
}

/* Active Focus State with Glowing Aura - Dark Mode */
.filter-select:focus,
.search-input:focus {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.3), 0 10px 30px rgba(245, 158, 11, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* Focus - Light Mode */
body.light-theme .filter-select:focus,
body.light-theme .search-input:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.22), 0 8px 24px rgba(245, 158, 11, 0.25) !important;
}

/* Click Touch Active Scale Effect */
.filter-select:active,
.search-input:active,
button:active,
.btn:active,
.cat-pill:active,
.bottom-nav-item:active {
  transform: scale(0.96) translateY(0) !important;
  transition: transform 0.1s ease !important;
}

/* Option Items inside Select Dropdowns */
.filter-select option {
  background: #1e293b !important;
  color: #f8fafc !important;
  padding: 10px !important;
  font-weight: 700 !important;
}

body.light-theme .filter-select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* Category Filter Pills Bar */
.cat-pill {
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cat-pill:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.35) !important;
}

/* Shimmer Light Beam Effect on Action Buttons */
.btn-emerald,
.btn-primary,
.pulse-btn-emerald,
.btn-cta-emerald-animated {
  position: relative !important;
  overflow: hidden !important;
}

.btn-emerald::after,
.btn-primary::after,
.pulse-btn-emerald::after,
.btn-cta-emerald-animated::after {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -60% !important;
  width: 50% !important;
  height: 200% !important;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  transform: rotate(25deg) !important;
  transition: all 0.65s ease !important;
  pointer-events: none !important;
}

.btn-emerald:hover::after,
.btn-primary:hover::after,
.pulse-btn-emerald:hover::after,
.btn-cta-emerald-animated:hover::after {
  left: 130% !important;
}

/* Mobile Bottom Navigation Animations */
@keyframes navTabPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.28) translateY(-3px); }
  100% { transform: scale(1) translateY(0); }
}

.bottom-nav-item.active i {
  animation: navTabPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* FAB Center Button Luxury Float & Glow */
@keyframes fabLuxuryFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.16), 0 0 0 2px rgba(16, 185, 129, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
  }
  50% {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 22px rgba(16, 185, 129, 0.24), 0 0 0 3px rgba(16, 185, 129, 0.18), inset 0 1px 2px rgba(255, 255, 255, 0.75) !important;
  }
}

.bottom-nav-item.center-fab .fab-circle {
  animation: fabLuxuryFloat 3s infinite ease-in-out !important;
  transition: all 0.3s ease !important;
}

.bottom-nav-item.center-fab:hover .fab-circle {
  transform: scale(1.12) translateY(-2px) !important;
}

/* ==========================================================================
   ONE-CLICK COLLAPSIBLE FILTER HUB STYLING FOR PUBLIC APP
   ========================================================================== */

.search-main-bar {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* Button to Toggle Collapsible Filters Panel */
.btn-toggle-filters {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(167, 243, 208, 0.6) !important;
  border-radius: 12px !important;
  padding: 10px 18px !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.25) !important;
}

.btn-toggle-filters:hover,
.btn-toggle-filters.active-open {
  background: linear-gradient(135deg, #34d399 0%, #059669 100%) !important;
  color: #ffffff !important;
  border-color: rgba(167, 243, 208, 0.9) !important;
  box-shadow: 0 5px 16px rgba(16, 185, 129, 0.38) !important;
  transform: translateY(-2px) !important;
}

.toggle-arrow {
  transition: transform 0.3s ease !important;
  font-size: 0.8rem !important;
}

.filter-active-count-badge {
  background: #ef4444 !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.8) !important;
}

/* Reset Button */
.btn-reset-filters {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #64748b !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.btn-reset-filters:hover {
  background: #fee2e2 !important;
  color: #ef4444 !important;
  border-color: #fca5a5 !important;
  transform: rotate(180deg) scale(1.05) !important;
}

body:not(.light-theme) .btn-reset-filters {
  background: rgba(15, 23, 42, 0.8) !important;
  color: #cbd5e1 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Collapsible Panel Container */
.collapsible-filters-panel {
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1.5px dashed rgba(226, 232, 240, 0.8) !important;
}

body:not(.light-theme) .collapsible-filters-panel {
  border-top-color: rgba(255, 255, 255, 0.15) !important;
}

.filter-panel-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

body:not(.light-theme) .filter-panel-header {
  color: #f8fafc !important;
}

.btn-close-panel {
  background: rgba(0, 0, 0, 0.06) !important;
  border: none !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body:not(.light-theme) .btn-close-panel {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}

/* Grid Layout for the 8 Filters */
.filters-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 12px !important;
}

.filter-field-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.filter-field-label {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #475569 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body:not(.light-theme) .filter-field-label {
  color: #cbd5e1 !important;
}

.filter-field-label i {
  color: #d97706 !important;
}

body:not(.light-theme) .filter-field-label i {
  color: #fbbf24 !important;
}

.filter-panel-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 16px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}

body:not(.light-theme) .filter-panel-footer {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   HORIZONTAL MULTI-COLUMN GRID LAYOUT FOR FILTER HUB (ជួរដេក 2-4 ច្រក)
   ========================================================================== */

.filters-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}

/* Mobile & Tablet Screens: 2 Columns Side-By-Side Horizontally (ជួរដេក) */
@media (max-width: 900px) {
  .filters-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .filter-field-group {
    margin-bottom: 0 !important;
  }

  .filter-field-label {
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .filter-select {
    padding: 7px 8px !important;
    font-size: 0.8rem !important;
    height: 38px !important;
  }
}

@media (max-width: 480px) {
  .filters-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
}

.filter-field-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.filter-field-label {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  color: #475569 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
}

body:not(.light-theme) .filter-field-label {
  color: #cbd5e1 !important;
}

.filter-select {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03) !important;
  outline: none !important;
  cursor: pointer !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.filter-select:hover {
  border-color: #d97706 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.15) !important;
}

.filter-select:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
}

body:not(.light-theme) .filter-select {
  background: rgba(15, 23, 42, 0.85) !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

body:not(.light-theme) .filter-select:hover {
  border-color: #fbbf24 !important;
  background: rgba(30, 41, 59, 0.95) !important;
}

/* ==========================================================================
   SINGLE-ROW HORIZONTAL BAR FOR SEARCH & FILTER BUTTON (ជួរដេកជាមួយគ្នា)
   ========================================================================== */

.search-main-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.search-input-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  position: relative !important;
  margin: 0 !important;
}

.search-input-wrap .search-input {
  width: 100% !important;
  box-sizing: border-box !important;
  text-overflow: ellipsis !important;
}

.btn-toggle-filters {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(167, 243, 208, 0.6) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.25) !important;
  height: 42px !important;
  box-sizing: border-box !important;
}

.btn-reset-filters {
  flex-shrink: 0 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #64748b !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.92rem !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
}

/* Mobile Responsive Single Line Tweaks */
@media (max-width: 480px) {
  .search-main-bar {
    gap: 6px !important;
  }

  .search-input-wrap .search-input {
    padding: 8px 10px 8px 32px !important;
    font-size: 0.8rem !important;
    height: 40px !important;
  }

  .search-input-wrap .search-icon {
    font-size: 0.82rem !important;
    left: 10px !important;
  }

  .btn-toggle-filters {
    padding: 8px 10px !important;
    font-size: 0.78rem !important;
    height: 40px !important;
    gap: 4px !important;
  }

  .btn-reset-filters {
    width: 40px !important;
    height: 40px !important;
  }
}


/* Responsive Fluid Banner for Mobile Screens */
@media (max-width: 768px) {
  .owner-hub-banner-card {
    padding: 12px 14px !important;
    border-radius: 16px !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .owner-megaphone-box {
    width: 42px !important;
    height: 42px !important;
    font-size: 1.2rem !important;
    border-radius: 12px !important;
  }

  .owner-banner-title {
    font-size: 0.94rem !important;
    gap: 6px !important;
    line-height: 1.3 !important;
  }

  .pulse-badge-emerald {
    font-size: 0.68rem !important;
    padding: 2px 7px !important;
  }

  .owner-banner-sub {
    font-size: 0.76rem !important;
    color: #1e293b !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }

  .owner-banner-arrow-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 480px) {
  .owner-hub-banner-card {
    padding: 10px 12px !important;
    border-radius: 14px !important;
    gap: 8px !important;
  }

  .owner-megaphone-box {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.1rem !important;
    border-radius: 10px !important;
  }

  .owner-banner-title {
    font-size: 0.86rem !important;
    gap: 5px !important;
  }

  .pulse-badge-emerald {
    font-size: 0.64rem !important;
    padding: 1px 6px !important;
  }

  .owner-banner-sub {
    font-size: 0.72rem !important;
  }

  .owner-banner-arrow-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.9rem !important;
  }
}


/* ==========================================================================
   PUBLIC PROPERTY SUBMISSION MODAL - PREMIUM STYLING
   ========================================================================== */

.owner-submission-alert-box {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(6, 182, 212, 0.08) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.38) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.08) !important;
}

.owner-submission-alert-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #059669, #10b981);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}

.owner-submission-alert-content {
  flex: 1;
  min-width: 0;
}

.owner-submission-alert-title {
  font-size: 0.84rem;
  font-weight: 800;
  color: #065f46 !important;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.owner-submission-alert-text {
  font-size: 0.78rem;
  color: #0f172a !important;
  line-height: 1.45;
  font-weight: 600;
  margin: 0;
}

/* Owner Contact Hero Card */
/* Owner Contact Hero Card */
.owner-contact-hero-card {
  background: linear-gradient(135deg, #131b2e 0%, #0f172a 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  position: relative;
  overflow: hidden;
  color: #f1f5f9 !important;
}

body.light-theme .owner-contact-hero-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.3) !important;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.08) !important;
  color: #0f172a !important;
}

.owner-card-header,
.property-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 10px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px dashed rgba(56, 189, 248, 0.25) !important;
}

.property-card-header {
  border-bottom-color: rgba(56, 189, 248, 0.25) !important;
}

body.light-theme .owner-card-header,
body.light-theme .property-card-header {
  border-bottom: 1px dashed #cbd5e1 !important;
}

.owner-header-badge,
.property-title-badge {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  color: #34d399 !important;
  margin: 0 !important;
}

.property-title-badge {
  color: #38bdf8 !important;
}

body.light-theme .owner-header-badge {
  color: #059669 !important;
}

body.light-theme .property-title-badge {
  color: #0284c7 !important;
}

.owner-privacy-pill {
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 99px !important;
  background: linear-gradient(135deg, #059669, #047857) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.property-tag-pill {
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 99px !important;
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Property Details Hero Card */
.property-details-hero-card {
  background: linear-gradient(135deg, #131b2e 0%, #0f172a 100%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  position: relative;
  overflow: hidden;
  color: #f1f5f9 !important;
}

body.light-theme .property-details-hero-card {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%) !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}

/* Fancy Input Wrappers */
.fancy-input-wrap {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.fancy-input-wrap .fancy-icon {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0.85rem !important;
  color: #64748b !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.fancy-input-wrap .icon-emerald {
  color: #059669 !important;
}

.fancy-input-wrap .icon-telegram {
  color: #0284c7 !important;
}

.fancy-input-wrap input {
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  border: 1.5px solid #334155 !important;
  background: #1e293b !important;
  color: #f1f5f9 !important;
  font-weight: 700 !important;
}

body.light-theme .fancy-input-wrap input {
  border: 1.5px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

.fancy-input-wrap input:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important;
}

.compact-2col-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px 10px !important;
}

@media (max-width: 540px) {
  .compact-2col-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   SUBMISSION MODAL COMPLETE SCROLL FIX (DESKTOP & MOBILE)
   ========================================================================== */

.compact-submission-modal {
  background: #0f172a !important;
  color: #f1f5f9 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  border-radius: 16px !important;
  position: relative !important;
  display: block !important;
}

body.light-theme .compact-submission-modal {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
}

@media (max-width: 640px) {
  .compact-submission-modal {
    max-height: 92vh !important;
    width: 96vw !important;
  }
}

.compact-submission-modal .modal-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
}

.compact-submission-modal .sub-modal-tab-header-wrap {
  position: sticky !important;
  top: 48px !important;
  z-index: 90 !important;
  background: #0b1120 !important;
  padding: 8px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.light-theme .compact-submission-modal .sub-modal-tab-header-wrap {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.compact-submission-modal .sub-modal-tabs {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  padding: 4px !important;
}

body.light-theme .compact-submission-modal .sub-modal-tabs {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
}

.compact-submission-modal .sub-tab-btn {
  color: #94a3b8 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  background: transparent !important;
}

.compact-submission-modal .sub-tab-btn.active {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
}

body.light-theme .compact-submission-modal .sub-tab-btn {
  color: #64748b !important;
}

body.light-theme .compact-submission-modal .sub-tab-btn.active {
  background: #ffffff !important;
  color: #0284c7 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.compact-submission-modal .modal-footer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 100 !important;
  background: #0f172a !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3) !important;
}

body.light-theme .compact-submission-modal .modal-footer {
  background: #ffffff !important;
  border-top: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08) !important;
}

#subTabFormContainer,
#subTabFormContainer form,
#subTabTgContainer {
  height: auto !important;
  overflow: visible !important;
}

#subTabFormContainer .modal-body {
  overflow: visible !important;
  max-height: none !important;
  padding: 12px 14px 20px 14px !important;
  background: #0b1120 !important;
  color: #f1f5f9 !important;
}

body.light-theme #subTabFormContainer .modal-body {
  background: #ffffff !important;
  color: #0f172a !important;
}

#subTabTgContainer {
  background: #0b1120 !important;
  color: #f1f5f9 !important;
}

body.light-theme #subTabTgContainer {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* ==========================================================================
   2-COLUMN & 3-COLUMN COMPACT SUBMISSION MODAL ROWS
   ========================================================================== */

.sub-2col-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 6px !important;
}

.sub-3col-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 6px 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 6px !important;
}

@media (max-width: 480px) {
  .sub-3col-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
}

.compact-submission-modal .form-group {
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.compact-submission-modal label {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #f1f5f9 !important;
  margin-bottom: 3px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

body.light-theme .compact-submission-modal label {
  color: #334155 !important;
}

.compact-submission-modal input,
.compact-submission-modal select,
.compact-submission-modal textarea {
  height: 38px !important;
  padding: 6px 10px !important;
  font-size: 0.84rem !important;
  font-family: inherit !important;
  border-radius: 8px !important;
  border: 1.5px solid #334155 !important;
  background: #1e293b !important;
  color: #f1f5f9 !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease-in-out !important;
}

.compact-submission-modal input:hover,
.compact-submission-modal select:hover {
  border-color: #64748b !important;
}

.compact-submission-modal input:focus,
.compact-submission-modal select:focus,
.compact-submission-modal textarea:focus {
  outline: none !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25) !important;
  background: #0f172a !important;
}

body.light-theme .compact-submission-modal input,
body.light-theme .compact-submission-modal select,
body.light-theme .compact-submission-modal textarea {
  border: 1.5px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

body.light-theme .compact-submission-modal input:focus,
body.light-theme .compact-submission-modal select:focus,
body.light-theme .compact-submission-modal textarea:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
  background: #f8fafc !important;
}

.compact-submission-modal textarea {
  height: 60px !important;
  min-height: 50px !important;
  resize: vertical !important;
}

.compact-submission-modal .fancy-input-wrap input {
  padding-left: 28px !important;
}

.compact-submission-modal .fancy-icon {
  left: 8px !important;
  font-size: 0.8rem !important;
}

.compact-submission-modal .owner-contact-hero-card,
.compact-submission-modal .property-details-hero-card {
  padding: 8px 12px !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
}

.compact-submission-modal .btn.btn-outline {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  color: #f1f5f9 !important;
}

/* Smart Location Hub Theming */
.sub-location-hub {
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
}

body.light-theme .sub-location-hub {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
}

.sub-location-label {
  color: #38bdf8 !important;
  font-weight: 800 !important;
  font-size: 0.82rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}

body.light-theme .sub-location-label {
  color: #0284c7 !important;
}

.sub-location-input-bar {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  background: #0f172a !important;
  border: 1.5px solid #334155 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  height: 38px !important;
  box-sizing: border-box !important;
  transition: all 0.2s !important;
}

body.light-theme .sub-location-input-bar {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
}

.sub-location-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 100% !important;
  background: #1e293b !important;
  color: #38bdf8 !important;
  border-right: 1px solid #334155 !important;
  font-size: 0.88rem !important;
  flex-shrink: 0 !important;
}

body.light-theme .sub-location-icon {
  background: #f0f9ff !important;
  color: #0284c7 !important;
  border-right: 1px solid #e2e8f0 !important;
}

#subMapUrl {
  color: #f1f5f9 !important;
}

body.light-theme #subMapUrl {
  color: #0f172a !important;
}

/* Map Drawer Theming */
.sub-map-drawer-box {
  display: block !important;
  margin-top: 6px !important;
  background: #111c33 !important;
  border: 1.5px solid #1e293b !important;
  border-radius: 10px !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  color: #f1f5f9 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.light-theme .sub-map-drawer-box {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #0f172a !important;
}

.sub-map-instruction-text {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  color: #cbd5e1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

body.light-theme .sub-map-instruction-text {
  color: #475569 !important;
}

.sub-map-layer-switch {
  display: inline-flex !important;
  background: #0f172a !important;
  padding: 2px !important;
  border-radius: 6px !important;
  border: 1px solid #334155 !important;
}

body.light-theme .sub-map-layer-switch {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

.sub-map-quick-jump-btn {
  background: #0f172a !important;
  border: 1px solid #334155 !important;
  color: #cbd5e1 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.sub-map-quick-jump-btn:hover {
  background: #1e293b !important;
  color: #38bdf8 !important;
  border-color: #38bdf8 !important;
}

body.light-theme .sub-map-quick-jump-btn {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

body.light-theme .sub-map-quick-jump-btn:hover {
  background: #e0f2fe !important;
  color: #0284c7 !important;
  border-color: #38bdf8 !important;
}

/* Notice Card Theming */
.notice-animated-card-themed {
  padding: 8px 12px !important;
  gap: 8px !important;
  margin-top: 0 !important;
  background: rgba(2, 132, 199, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  color: #e2e8f0 !important;
}

body.light-theme .notice-animated-card-themed {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  color: #0369a1 !important;
}

body.light-theme .compact-submission-modal .btn.btn-outline {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #475569 !important;
}


/* ==========================================================================
   ULTRA-PREMIUM LUXURY REAL ESTATE HERO CAROUSEL
   ========================================================================== */

.hero-slider-section {
  position: relative !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
  border: 2px solid rgba(245, 158, 11, 0.65) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.55), 0 0 35px rgba(245, 158, 11, 0.25) !important;
  min-height: 440px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: #0f172a !important;
}

/* Background Slides Track */
.hero-slides-track {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.hero-bg-slide {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 0 !important;
  transform: scale(1.08) !important;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 6.5s ease-out !important;
  will-change: opacity, transform !important;
}

.hero-bg-slide.active {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Glassmorphic Luxury Gradient Overlay */
.hero-glass-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  backdrop-filter: none !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Hero Content Layer */
.hero-content-layer {
  position: relative !important;
  z-index: 5 !important;
  padding: 34px 24px 28px 24px !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Floating Real Estate Highlight Card */
.hero-floating-prop-card {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 10 !important;
  background: rgba(15, 23, 42, 0.78) !important;
  backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.65) !important;
  border-radius: 14px !important;
  padding: 6px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(245, 158, 11, 0.25) !important;
  transition: all 0.3s ease !important;
  max-width: 90% !important;
}

.hero-floating-prop-card:hover {
  transform: translateY(-2px) scale(1.02) !important;
  border-color: #fbbf24 !important;
  background: rgba(15, 23, 42, 0.9) !important;
}

.hero-floating-badge-code {
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 0.72rem !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  letter-spacing: 0.02em !important;
}

.hero-floating-info {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

.hero-floating-title {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
}

.hero-floating-price {
  font-size: 0.8rem !important;
  font-weight: 900 !important;
  color: #34d399 !important;
}

/* Slider Nav Arrows */
.hero-nav-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.3s ease !important;
}

.hero-nav-arrow:hover {
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
  color: #0f172a !important;
  border-color: #fbbf24 !important;
  transform: translateY(-50%) scale(1.1) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.4) !important;
}

.hero-nav-prev {
  left: 14px !important;
}

.hero-nav-next {
  right: 14px !important;
}

/* Interactive Slider Pagination Dots */
.hero-slider-dots {
  position: absolute !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.hero-slider-dot {
  width: 28px !important;
  height: 6px !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.3) !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.35s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.hero-slider-dot.active {
  width: 44px !important;
  background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.6) !important;
}

@media (max-width: 768px) {
  .hero-slider-section,
  .hero-sub-action-bar {
    display: none !important;
  }
}


/* ==========================================================================
   HERO SUB-ACTION BAR (BELOW SLIDESHOW)
   ========================================================================== */

.hero-slider-section {
  min-height: 380px !important;
  height: 380px !important;
  border-radius: 20px !important;
  margin-bottom: 16px !important;
}

.hero-sub-action-bar {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  width: 100% !important;
}

.hero-sub-action-bar .hero-stats-row {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.hero-sub-action-bar .hero-stat-pill {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  padding: 8px 16px !important;
  border-radius: 99px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.25s ease !important;
}

body.dark-theme .hero-sub-action-bar .hero-stat-pill {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #f1f5f9 !important;
}

.hero-sub-action-bar .hero-stat-pill:hover {
  transform: translateY(-2px) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.2) !important;
}

.hero-sub-btn-row {
  display: flex !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.hero-sub-btn-row .btn-emerald {
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  padding: 11px 26px !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35) !important;
}

.btn-owner-guide-luxury {
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  padding: 11px 24px !important;
  border-radius: 12px !important;
  border: 1.5px solid rgba(245, 158, 11, 0.6) !important;
  color: #0f172a !important;
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

body.dark-theme .btn-owner-guide-luxury {
  background: rgba(15, 23, 42, 0.8) !important;
  color: #ffffff !important;
}

.btn-owner-guide-luxury:hover {
  transform: translateY(-2px) !important;
  border-color: #f59e0b !important;
  background: #fffbe6 !important;
  color: #b45309 !important;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.25) !important;
}


/* ==========================================================================
   STATE-OF-THE-ART REAL ESTATE SLIDESHOW SHOWCASE
   ========================================================================== */

.hero-banner-showcase {
  position: relative !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
  border: 2px solid rgba(245, 158, 11, 0.65) !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.45), 0 0 35px rgba(245, 158, 11, 0.2) !important;
  min-height: 440px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 40px 24px 34px 24px !important;
  text-align: left !important;
  background: #0f172a !important;
}

/* Background Slideshow Track */
.hero-slides-track {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

.hero-bg-slide {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 0 !important;
  transform: scale(1.06) !important;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 6.5s ease-out !important;
  will-change: opacity, transform !important;
}

.hero-bg-slide.active {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Glassmorphic Luxury Gradient Overlay (Clear & High-Contrast) */
.hero-glass-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  backdrop-filter: none !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Floating Real Estate Highlight Card (Top Right) */
.hero-floating-prop-card {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 10 !important;
  background: rgba(15, 23, 42, 0.88) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.75) !important;
  border-radius: 9999px !important;
  padding: 8px 18px 8px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 24px rgba(245, 158, 11, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  max-width: 90% !important;
}

.hero-floating-prop-card:hover {
  transform: translateY(-3px) scale(1.03) !important;
  border-color: #fbbf24 !important;
  background: rgba(15, 23, 42, 0.96) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 32px rgba(245, 158, 11, 0.5) !important;
}

.hero-floating-prop-card:hover .hero-floating-action-icon {
  transform: translateX(3px) scale(1.1) !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.9) !important;
}

.hero-floating-badge-code {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  font-size: 0.78rem !important;
  padding: 5px 12px !important;
  border-radius: 9999px !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.45) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.hero-floating-info {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  gap: 2px !important;
  justify-content: center !important;
  min-width: 110px !important;
}

.hero-floating-title {
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
  line-height: 1.25 !important;
  letter-spacing: 0.2px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
  white-space: nowrap !important;
  max-width: 240px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.hero-floating-price {
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  color: #34d399 !important;
  line-height: 1.2 !important;
  text-shadow: 0 0 12px rgba(52, 211, 153, 0.4) !important;
  letter-spacing: 0.3px !important;
  font-family: inherit !important;
}

.hero-floating-action-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.5) !important;
  transition: all 0.3s ease !important;
  flex-shrink: 0 !important;
}

/* Slider Nav Arrows */
.hero-nav-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.3s ease !important;
}

.hero-nav-arrow:hover {
  background: linear-gradient(135deg, #d97706, #f59e0b) !important;
  color: #0f172a !important;
  border-color: #fbbf24 !important;
  transform: translateY(-50%) scale(1.1) !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.5) !important;
}

.hero-nav-prev {
  left: 16px !important;
}

.hero-nav-next {
  right: 16px !important;
}

/* Slider Pagination Dots */
.hero-slider-dots {
  position: absolute !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.hero-slider-dot {
  width: 28px !important;
  height: 6px !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.35) !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.35s ease !important;
}

.hero-slider-dot.active {
  width: 44px !important;
  background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.7) !important;
}

/* Inner Elements Layer */
.hero-banner-showcase > div:not(.hero-slides-track):not(.hero-glass-overlay):not(.hero-floating-prop-card):not(.hero-slider-dots),
.hero-banner-showcase > h1,
.hero-banner-showcase > p {
  position: relative !important;
  z-index: 5 !important;
}

/* Top-Left Floating Action Buttons on Slideshow */
.hero-top-left-actions {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* COMPLETE MOBILE HIDE FOR PUBLIC APP (< 768px) */
@media (max-width: 768px) {
  .hero-banner-showcase,
  #heroShowcaseSection,
  .hero-slider-section,
  .hero-sub-action-bar,
  .hero-top-left-actions,
  .hero-floating-prop-card,
  .hero-nav-arrow,
  .hero-slider-dots,
  .agency-showcase-section {
    display: none !important;
  }
}


/* Top Navbar Action Buttons */
.header-action-btns {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

@media (max-width: 768px) {
  .header-action-btns {
    display: none !important;
  }
}


/* ==========================================================================
   HERO SLIDESHOW OWNER SUBMISSION CALL-TO-ACTION CARD
   ========================================================================== */

.hero-owner-submission-card {
  position: absolute !important;
  bottom: 24px !important;
  left: 20px !important;
  right: 20px !important;
  max-width: 660px !important;
  margin: 0 auto !important;
  z-index: 12 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 12px 18px !important;
  background: rgba(15, 23, 42, 0.76) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(37, 99, 235, 0.3) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  /* Removed jitter animation */
  transition: all 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes heroOwnerCardPulse {
  0% {
    transform: translateY(0) scale(1);
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(37, 99, 235, 0.25);
  }
  100% {
    transform: translateY(-3px) scale(1.015);
    border-color: rgba(56, 189, 248, 0.85);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(56, 189, 248, 0.45);
  }
}

.hero-owner-submission-card:hover {
  transform: translateY(-5px) scale(1.025) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 40px rgba(56, 189, 248, 0.6) !important;
}

body.light-theme .hero-owner-submission-card {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12), 0 0 20px rgba(37, 99, 235, 0.15) !important;
}

body.light-theme .hero-owner-submission-card:hover {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: #2563eb !important;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18), 0 0 30px rgba(37, 99, 235, 0.3) !important;
}

@media (max-width: 768px) {
  .hero-owner-submission-card {
    bottom: 14px !important;
    left: 12px !important;
    right: 12px !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
  }
}

/* ==========================================================================
   PUBLIC WEB AGENT PORTAL & AUTHENTICATION STYLES
   ========================================================================== */

/* Agent Navbar Login & Pill Controls */
.agent-nav-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.btn-agent-nav {
  padding: 0 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  font-size: 0.82rem !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1.5px solid #f59e0b !important;
  color: #fbbf24 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.btn-agent-nav:hover {
  background: #f59e0b !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
}

.agent-nav-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.9)) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.6) !important;
  padding: 3px 8px 3px 4px !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.agent-nav-pill:hover {
  border-color: #fbbf24 !important;
  box-shadow: 0 3px 14px rgba(245, 158, 11, 0.4) !important;
  transform: translateY(-1px) !important;
}

.agent-nav-avatar {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25) !important;
}

.agent-nav-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  line-height: 1.12 !important;
}

.agent-nav-pill {
  max-width: none !important;
  width: auto !important;
  flex-shrink: 0 !important;
}

.agent-nav-name {
  font-size: 0.80rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  letter-spacing: 0.1px !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.agent-nav-role {
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  color: #fbbf24 !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.agent-nav-arrow {
  font-size: 0.58rem !important;
  color: #94a3b8 !important;
  margin-left: 1px !important;
  transition: transform 0.2s ease !important;
}

.agent-nav-pill:hover .agent-nav-arrow {
  color: #fbbf24 !important;
}

.agent-nav-logout-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  color: #f87171 !important;
  border: 1px solid rgba(248, 113, 113, 0.4) !important;
  background: rgba(239, 68, 68, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  padding: 0 !important;
  font-size: 0.74rem !important;
}

.agent-nav-logout-btn:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4) !important;
}

@media (max-width: 640px) {
  .agent-nav-role {
    display: none !important;
  }
}

/* Agent Login Modal Luxury Box */
.agent-login-box {
  background: #0f172a !important;
  color: #f1f5f9 !important;
  border: 1.5px solid rgba(245, 158, 11, 0.4) !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.8), 0 0 30px rgba(245, 158, 11, 0.15) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

body.light-theme .agent-login-box {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid rgba(212, 175, 55, 0.4) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2) !important;
}

.agent-login-body {
  background: #0b1120 !important;
  color: #f1f5f9 !important;
}

body.light-theme .agent-login-body {
  background: #ffffff !important;
  color: #0f172a !important;
}

.agent-login-info-strip {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #a7f3d0 !important;
}

body.light-theme .agent-login-info-strip {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
}

.agent-login-label {
  color: #f1f5f9 !important;
  font-weight: 800 !important;
}

body.light-theme .agent-login-label {
  color: #1e293b !important;
}

.agent-login-sublabel {
  color: #94a3b8 !important;
}

body.light-theme .agent-login-sublabel {
  color: #64748b !important;
}

.agent-login-input-wrap {
  background: #1e293b !important;
  border: 1.5px solid #334155 !important;
  transition: all 0.2s ease-in-out !important;
}

.agent-login-input-wrap:focus-within {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important;
  background: #0f172a !important;
}

body.light-theme .agent-login-input-wrap {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
}

body.light-theme .agent-login-input-wrap:focus-within {
  border-color: #d97706 !important;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15) !important;
  background: #ffffff !important;
}

.agent-login-input-icon {
  background: rgba(255, 255, 255, 0.04) !important;
  border-right: 1px solid #334155 !important;
  color: #94a3b8 !important;
}

body.light-theme .agent-login-input-icon {
  background: rgba(0, 0, 0, 0.02) !important;
  border-right: 1px solid #e2e8f0 !important;
  color: #64748b !important;
}

.agent-login-input {
  color: #f1f5f9 !important;
  background: transparent !important;
}

.agent-login-input::placeholder {
  color: #64748b !important;
  opacity: 0.85 !important;
  font-weight: 500 !important;
}

/* Chrome / Safari / Edge Autofill Fix for Dark Mode */
.agent-login-input-wrap input:-webkit-autofill,
.agent-login-input-wrap input:-webkit-autofill:hover, 
.agent-login-input-wrap input:-webkit-autofill:focus, 
.agent-login-input-wrap input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #1e293b inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  font-weight: 700 !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

body.light-theme .agent-login-input {
  color: #0f172a !important;
}

body.light-theme .agent-login-input::placeholder {
  color: #94a3b8 !important;
  opacity: 0.9 !important;
}

body.light-theme .agent-login-input-wrap input:-webkit-autofill,
body.light-theme .agent-login-input-wrap input:-webkit-autofill:hover, 
body.light-theme .agent-login-input-wrap input:-webkit-autofill:focus, 
body.light-theme .agent-login-input-wrap input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #0f172a !important;
}

.agent-login-btn-cancel {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  color: #f1f5f9 !important;
}

body.light-theme .agent-login-btn-cancel {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #475569 !important;
}

.agent-quick-acc-btn {
  background: #1e293b !important;
  border: 1.5px solid #334155 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-align: left !important;
}

.agent-quick-acc-btn:hover {
  background: rgba(245, 158, 11, 0.15) !important;
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
  transform: translateY(-1px) !important;
}

body.light-theme .agent-quick-acc-btn {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #1e293b !important;
}

body.light-theme .agent-quick-acc-btn:hover {
  background: #fffbe6 !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
}


/* ==========================================================================
   MY LISTINGS MODAL LUXURY REDESIGN
   ========================================================================== */
.agent-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}

.agent-kpi-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 10px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
  min-width: 0 !important;
}

.agent-kpi-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  flex-shrink: 0 !important;
}

.agent-kpi-val {
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.agent-kpi-lbl {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.agent-prop-item-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
}

.agent-prop-item-card:hover {
  border-color: #0284c7 !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.12) !important;
}

.agent-prop-card-top {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.agent-prop-thumb-wrap {
  position: relative !important;
  width: 70px !important;
  height: 70px !important;
  flex-shrink: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #0f172a !important;
}

.agent-prop-thumb-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.agent-prop-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.agent-prop-title-text {
  font-size: 0.86rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  margin: 0 0 4px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.agent-prop-card-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid #f1f5f9 !important;
  flex-wrap: wrap !important;
}

.agent-prop-status-select {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  height: 32px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  border: 1.5px solid #cbd5e1 !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  cursor: pointer !important;
  flex: 1 !important;
  min-width: 110px !important;
  max-width: 140px !important;
}

.agent-prop-action-btns {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
}

.agent-action-btn-sm {
  height: 32px !important;
  padding: 0 9px !important;
  border-radius: 8px !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border: none !important;
  transition: all 0.15s ease !important;
}
/* ==========================================================================
   ULTRA-PREMIUM VIP AGENT HUB MODAL STYLING & ANIMATIONS
   ========================================================================== */

.agent-vip-hub-card {
  max-width: 440px !important;
  width: 95vw !important;
  max-height: calc(100dvh - 20px) !important;
  max-height: calc(100vh - 20px) !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 18px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 25px 60px -10px rgba(15, 23, 42, 0.4), 0 0 30px rgba(245, 158, 11, 0.12) !important;
  animation: agentHubPop 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  margin: auto !important;
}

@media (max-width: 420px) {
  .agent-vip-hub-card {
    border-radius: 14px !important;
    width: 96vw !important;
  }
  .agent-vip-header,
  body.light-theme .agent-vip-header {
    padding: 8px 12px !important;
  }
  .agent-vip-header h3,
  .agent-vip-header .agent-vip-name-title,
  body.light-theme .agent-vip-header h3,
  body.light-theme .agent-vip-header .agent-vip-name-title {
    font-size: 0.95rem !important;
  }
  .agent-vip-avatar-wrap {
    width: 34px !important;
    height: 34px !important;
    font-size: 1.0rem !important;
  }
  .agent-vip-body {
    padding: 8px 10px 10px !important;
    gap: 5px !important;
  }
  .agent-stats-master-card {
    padding: 6px 10px !important;
    border-radius: 10px !important;
  }
  .agent-stats-master-count,
  .agent-stats-value {
    font-size: 0.98rem !important;
  }
  .agent-stats-label {
    font-size: 0.60rem !important;
  }
  .agent-vip-mini-stat {
    padding: 4px 2px !important;
    border-radius: 8px !important;
  }
  .agent-vip-mini-stat .mini-stat-num {
    font-size: 0.90rem !important;
  }
  .agent-vip-mini-stat .mini-stat-label {
    font-size: 0.58rem !important;
    white-space: nowrap !important;
  }
  .agent-vip-mini-stat .mini-stat-icon {
    font-size: 0.70rem !important;
  }
  .agent-vip-btn-logout {
    min-height: 32px !important;
    padding: 4px 10px !important;
    font-size: 0.72rem !important;
  }
}

@keyframes agentHubPop {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(16px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Dark Mode / Default Agent VIP Header */
.agent-vip-header,
body.dark-theme .agent-vip-header {
  background: linear-gradient(135deg, #0b0f19 0%, #1e293b 100%) !important;
  padding: 12px 14px !important;
  color: #ffffff !important;
  position: relative !important;
  border-bottom: 1.5px solid rgba(245, 158, 11, 0.35) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.agent-vip-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  animation: agentHeaderShine 4s infinite ease-in-out;
  pointer-events: none;
}

@keyframes agentHeaderShine {
  0% { left: -100%; }
  40%, 100% { left: 200%; }
}

.agent-vip-header h3,
.agent-vip-header .agent-vip-name-title,
body.dark-theme .agent-vip-header h3,
body.dark-theme .agent-vip-header .agent-vip-name-title {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95) !important;
}

.agent-vip-header .agent-vip-phone-tag,
body.dark-theme .agent-vip-header .agent-vip-phone-tag {
  color: #f1f5f9 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.agent-vip-close-btn,
.agent-vip-header .modal-close-btn,
body.dark-theme .agent-vip-close-btn {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

/* Light Mode Theme Styles for Agent VIP Header */
body.light-theme .agent-vip-header {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
  color: #0f172a !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  padding: 10px 14px !important;
}

body.light-theme .agent-vip-header::before {
  display: none !important;
}

body.light-theme .agent-vip-header h3,
body.light-theme .agent-vip-header .agent-vip-name-title {
  color: #0f172a !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  font-size: 1.02rem !important;
}

body.light-theme .agent-vip-header .agent-vip-phone-tag {
  color: #334155 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

body.light-theme .agent-vip-close-btn,
body.light-theme .agent-vip-header .modal-close-btn {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  width: 28px !important;
  height: 28px !important;
}

body.light-theme .agent-vip-close-btn:hover,
body.light-theme .agent-vip-header .modal-close-btn:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #ef4444 !important;
}

body.light-theme .agent-vip-header .agent-vip-role-tag {
  color: #b45309 !important;
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.agent-vip-avatar-wrap {
  position: relative !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  color: #0f172a !important;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.4) !important;
  flex-shrink: 0 !important;
}

.agent-vip-status-dot {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 10px !important;
  height: 10px !important;
  background: #10b981 !important;
  border: 2px solid #0f172a !important;
  border-radius: 50% !important;
  box-shadow: 0 0 6px #10b981 !important;
  animation: pulseDot 2s infinite !important;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; }
}

/* Spacious 2-Tier Master & Category KPI Stats */
.agent-stats-master-card {
  background: linear-gradient(135deg, #111c33 0%, #172544 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.2s ease !important;
}

body.light-theme .agent-stats-master-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.agent-stats-master-card:hover {
  border-color: rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

body.light-theme .agent-stats-master-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}

.agent-stats-label {
  color: #94a3b8 !important;
}
body.light-theme .agent-stats-label {
  color: #64748b !important;
}

.agent-stats-master-count {
  color: #f8fafc !important;
}
body.light-theme .agent-stats-master-count {
  color: #0f172a !important;
}

.agent-stats-unit {
  color: #94a3b8 !important;
}
body.light-theme .agent-stats-unit {
  color: #64748b !important;
}

.agent-stats-value {
  color: #fbbf24 !important;
}
body.light-theme .agent-stats-value {
  color: #d97706 !important;
}

.agent-vip-mini-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 5px !important;
}

@media (max-width: 420px) {
  .agent-vip-mini-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
  }
}

.agent-vip-mini-stat {
  border-radius: 10px !important;
  padding: 5px 3px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
  cursor: default !important;
}

body.light-theme .agent-vip-mini-stat {
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03) !important;
}

.agent-vip-mini-stat:hover {
  transform: translateY(-3px) scale(1.02) !important;
}

/* 1. House */
.agent-vip-mini-stat.house {
  background: linear-gradient(145deg, rgba(124, 58, 237, 0.22), rgba(91, 33, 182, 0.32)) !important;
  border: 1.5px solid rgba(167, 139, 250, 0.35) !important;
}
.agent-vip-mini-stat.house .mini-stat-icon { color: #c4b5fd !important; }
.agent-vip-mini-stat.house .mini-stat-num { color: #f5f3ff !important; }
.agent-vip-mini-stat.house .mini-stat-label { color: #ddd6fe !important; }

body.light-theme .agent-vip-mini-stat.house {
  background: linear-gradient(145deg, #f5f3ff, #ede9fe) !important;
  border: 1.5px solid #ddd6fe !important;
}
body.light-theme .agent-vip-mini-stat.house .mini-stat-icon { color: #7c3aed !important; }
body.light-theme .agent-vip-mini-stat.house .mini-stat-num { color: #5b21b6 !important; }
body.light-theme .agent-vip-mini-stat.house .mini-stat-label { color: #6d28d9 !important; }

/* 2. Land */
.agent-vip-mini-stat.land {
  background: linear-gradient(145deg, rgba(217, 119, 6, 0.22), rgba(180, 83, 9, 0.32)) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.35) !important;
}
.agent-vip-mini-stat.land .mini-stat-icon { color: #fde68a !important; }
.agent-vip-mini-stat.land .mini-stat-num { color: #fffbeb !important; }
.agent-vip-mini-stat.land .mini-stat-label { color: #fef08a !important; }

body.light-theme .agent-vip-mini-stat.land {
  background: linear-gradient(145deg, #fffbeb, #fef3c7) !important;
  border: 1.5px solid #fde68a !important;
}
body.light-theme .agent-vip-mini-stat.land .mini-stat-icon { color: #d97706 !important; }
body.light-theme .agent-vip-mini-stat.land .mini-stat-num { color: #b45309 !important; }
body.light-theme .agent-vip-mini-stat.land .mini-stat-label { color: #92400e !important; }

/* 3. Sale */
.agent-vip-mini-stat.sale {
  background: linear-gradient(145deg, rgba(225, 29, 72, 0.22), rgba(190, 18, 60, 0.32)) !important;
  border: 1.5px solid rgba(251, 113, 133, 0.35) !important;
}
.agent-vip-mini-stat.sale .mini-stat-icon { color: #fda4af !important; }
.agent-vip-mini-stat.sale .mini-stat-num { color: #fff1f2 !important; }
.agent-vip-mini-stat.sale .mini-stat-label { color: #fecdd3 !important; }

body.light-theme .agent-vip-mini-stat.sale {
  background: linear-gradient(145deg, #fef2f2, #fee2e2) !important;
  border: 1.5px solid #fecaca !important;
}
body.light-theme .agent-vip-mini-stat.sale .mini-stat-icon { color: #e11d48 !important; }
body.light-theme .agent-vip-mini-stat.sale .mini-stat-num { color: #be123c !important; }
body.light-theme .agent-vip-mini-stat.sale .mini-stat-label { color: #9f1239 !important; }

/* 4. Rent */
.agent-vip-mini-stat.rent {
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.22), rgba(5, 150, 105, 0.32)) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.35) !important;
}
.agent-vip-mini-stat.rent .mini-stat-icon { color: #6ee7b7 !important; }
.agent-vip-mini-stat.rent .mini-stat-num { color: #ecfdf5 !important; }
.agent-vip-mini-stat.rent .mini-stat-label { color: #a7f3d0 !important; }

body.light-theme .agent-vip-mini-stat.rent {
  background: linear-gradient(145deg, #ecfdf5, #d1fae5) !important;
  border: 1.5px solid #a7f3d0 !important;
}
body.light-theme .agent-vip-mini-stat.rent .mini-stat-icon { color: #059669 !important; }
body.light-theme .agent-vip-mini-stat.rent .mini-stat-num { color: #047857 !important; }
body.light-theme .agent-vip-mini-stat.rent .mini-stat-label { color: #065f46 !important; }

.agent-vip-kpi-lbl {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  letter-spacing: 0.2px !important;
}

/* Action Buttons arranged in 2-Column Grid with Micro-Interactions */
.agent-vip-action-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
}

@media (max-width: 420px) {
  .agent-vip-action-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
  }
}

.agent-vip-action-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 5px 8px !important;
  border-radius: 10px !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1.5px solid transparent !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  gap: 4px !important;
}

@media (max-width: 420px) {
  .agent-vip-action-btn {
    padding: 4px 6px !important;
    min-height: 34px !important;
    border-radius: 8px !important;
    gap: 3px !important;
  }
}

.agent-vip-action-btn:hover {
  transform: translateY(-1px) !important;
}

.agent-vip-action-btn .btn-left {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  flex: 1 !important;
  overflow: hidden !important;
}

.agent-vip-action-btn .btn-left span {
  font-size: 0.71rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

@media (max-width: 420px) {
  .agent-vip-action-btn .btn-left {
    gap: 4px !important;
  }
  .agent-vip-action-btn .btn-left span {
    font-size: 0.67rem !important;
  }
}

.agent-vip-action-btn .btn-icon-box {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.78rem !important;
  flex-shrink: 0 !important;
}

@media (max-width: 420px) {
  .agent-vip-action-btn .btn-icon-box {
    width: 21px !important;
    height: 21px !important;
    font-size: 0.70rem !important;
    border-radius: 5px !important;
  }
}

.agent-vip-action-btn .btn-arrow {
  display: none !important;
}

/* ==========================================================================
   6 DISTINCT SOFT PASTEL ACTION BUTTON THEMES (Agent VIP Hub)
   ========================================================================== */

/* Common Badge Styles */
.agent-vip-action-btn .btn-stat-badge {
  font-size: 0.65rem !important;
  font-weight: 900 !important;
  padding: 1.5px 6px !important;
  border-radius: 99px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 0.2px !important;
  flex-shrink: 0 !important;
}

.agent-vip-action-btn .btn-role-badge {
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  padding: 1.5px 6px !important;
  border-radius: 99px !important;
  letter-spacing: 0.4px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 420px) {
  .agent-vip-action-btn .btn-stat-badge,
  .agent-vip-action-btn .btn-role-badge {
    font-size: 0.58rem !important;
    padding: 1px 4.5px !important;
  }
}

/* --- LIGHT THEME (Soft Pastel Elegance 60% & High Clarity) --- */

/* 1. Intelligence Map (Soft Ocean Sky Blue) */
body.light-theme .agent-vip-btn-map,
.agent-vip-btn-map {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
  color: #0369a1 !important;
  border: 1.5px solid #7dd3fc !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12) !important;
}
body.light-theme .agent-vip-btn-map:hover,
.agent-vip-btn-map:hover {
  background: linear-gradient(135deg, #bae6fd 0%, #7dd3fc 100%) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.22) !important;
  color: #0c4a6e !important;
}
body.light-theme .agent-vip-btn-map .btn-icon-box,
.agent-vip-btn-map .btn-icon-box {
  background: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(2, 132, 199, 0.35) !important;
}
body.light-theme .agent-vip-btn-map .btn-arrow,
.agent-vip-btn-map .btn-arrow {
  color: #0369a1 !important;
  opacity: 0.9 !important;
}

/* 2. Manage Properties (Soft Regal Lavender Purple) */
body.light-theme .agent-vip-btn-manage,
.agent-vip-btn-manage {
  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%) !important;
  color: #6b21a8 !important;
  border: 1.5px solid #d8b4fe !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.12) !important;
}
body.light-theme .agent-vip-btn-manage:hover,
.agent-vip-btn-manage:hover {
  background: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%) !important;
  border-color: #c084fc !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.22) !important;
  color: #581c87 !important;
}
body.light-theme .agent-vip-btn-manage .btn-icon-box,
.agent-vip-btn-manage .btn-icon-box {
  background: #7c3aed !important;
  color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(124, 58, 237, 0.35) !important;
}
body.light-theme .agent-vip-btn-manage .btn-arrow,
.agent-vip-btn-manage .btn-arrow {
  color: #6b21a8 !important;
  opacity: 0.9 !important;
}

/* 3. Viewing Tours & Inspection Reports (Soft Warm Honey Amber) */
body.light-theme .agent-vip-btn-tours,
.agent-vip-btn-tours {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  color: #92400e !important;
  border: 1.5px solid #fcd34d !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.12) !important;
}
body.light-theme .agent-vip-btn-tours:hover,
.agent-vip-btn-tours:hover {
  background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.22) !important;
  color: #78350f !important;
}
body.light-theme .agent-vip-btn-tours .btn-icon-box,
.agent-vip-btn-tours .btn-icon-box {
  background: #d97706 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(217, 119, 6, 0.35) !important;
}
body.light-theme .agent-vip-btn-tours .btn-stat-badge,
.agent-vip-btn-tours .btn-stat-badge {
  background: #b45309 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}
body.light-theme .agent-vip-btn-tours .btn-arrow,
.agent-vip-btn-tours .btn-arrow {
  color: #92400e !important;
  opacity: 0.9 !important;
}

/* 4. Shared Research Database (Soft Fresh Mint Emerald Green) */
body.light-theme .agent-vip-btn-research,
.agent-vip-btn-research {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
  color: #166534 !important;
  border: 1.5px solid #86efac !important;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.12) !important;
}
body.light-theme .agent-vip-btn-research:hover,
.agent-vip-btn-research:hover {
  background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%) !important;
  border-color: #4ade80 !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.22) !important;
  color: #14532d !important;
}
body.light-theme .agent-vip-btn-research .btn-icon-box,
.agent-vip-btn-research .btn-icon-box {
  background: #16a34a !important;
  color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(22, 163, 74, 0.35) !important;
}
body.light-theme .agent-vip-btn-research .btn-stat-badge,
.agent-vip-btn-research .btn-stat-badge {
  background: #15803d !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}
body.light-theme .agent-vip-btn-research .btn-arrow,
.agent-vip-btn-research .btn-arrow {
  color: #166534 !important;
  opacity: 0.9 !important;
}

/* 5. Contacts & Portfolio (Soft Royal Indigo Blue) */
body.light-theme .agent-vip-btn-contacts,
.agent-vip-btn-contacts {
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%) !important;
  color: #3730a3 !important;
  border: 1.5px solid #a5b4fc !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.12) !important;
}
body.light-theme .agent-vip-btn-contacts:hover,
.agent-vip-btn-contacts:hover {
  background: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 100%) !important;
  border-color: #818cf8 !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.22) !important;
  color: #312e81 !important;
}
body.light-theme .agent-vip-btn-contacts .btn-icon-box,
.agent-vip-btn-contacts .btn-icon-box {
  background: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(79, 70, 229, 0.35) !important;
}
body.light-theme .agent-vip-btn-contacts .btn-stat-badge,
.agent-vip-btn-contacts .btn-stat-badge {
  background: #4338ca !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}
body.light-theme .agent-vip-btn-contacts .btn-arrow,
.agent-vip-btn-contacts .btn-arrow {
  color: #3730a3 !important;
  opacity: 0.9 !important;
}

/* 6. Super Admin Portal (Soft Warm Coral Peach / Terracotta) */
body.light-theme .agent-vip-btn-admin,
.agent-vip-btn-admin {
  background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%) !important;
  color: #9a3412 !important;
  border: 1.5px solid #fdba74 !important;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.12) !important;
}
body.light-theme .agent-vip-btn-admin:hover,
.agent-vip-btn-admin:hover {
  background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%) !important;
  border-color: #fb923c !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.22) !important;
  color: #7c2d12 !important;
}
body.light-theme .agent-vip-btn-admin .btn-icon-box,
.agent-vip-btn-admin .btn-icon-box {
  background: #ea580c !important;
  color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(234, 88, 12, 0.35) !important;
}
body.light-theme .agent-vip-btn-admin .btn-role-badge,
.agent-vip-btn-admin .btn-role-badge {
  background: #c2410c !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  border: none !important;
}
body.light-theme .agent-vip-btn-admin .btn-arrow,
.agent-vip-btn-admin .btn-arrow {
  color: #9a3412 !important;
  opacity: 0.9 !important;
}

/* 7. Logout (Soft Crimson Rose) */
body.light-theme .agent-vip-btn-logout,
.agent-vip-btn-logout {
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important;
  color: #be123c !important;
  border: 1.5px solid #fecdd3 !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 0.78rem !important;
  padding: 7px 12px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.08) !important;
}
body.light-theme .agent-vip-btn-logout:hover,
.agent-vip-btn-logout:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #9f1239 !important;
  box-shadow: 0 4px 10px rgba(225, 29, 72, 0.16) !important;
}

/* --- DARK THEME (Neon Glow & Sleek Tint Accents 60% Subdued) --- */

body:not(.light-theme) .agent-vip-btn-map,
body.dark-theme .agent-vip-btn-map {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.20), rgba(3, 105, 161, 0.28)) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
  color: #38bdf8 !important;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.2) !important;
}
body:not(.light-theme) .agent-vip-btn-map:hover,
body.dark-theme .agent-vip-btn-map:hover {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.30), rgba(3, 105, 161, 0.38)) !important;
  border-color: #38bdf8 !important;
  color: #bae6fd !important;
}
body:not(.light-theme) .agent-vip-btn-map .btn-icon-box,
body.dark-theme .agent-vip-btn-map .btn-icon-box {
  background: rgba(2, 132, 199, 0.4) !important;
  color: #7dd3fc !important;
}
body:not(.light-theme) .agent-vip-btn-map .btn-arrow,
body.dark-theme .agent-vip-btn-map .btn-arrow {
  color: #38bdf8 !important;
}

body:not(.light-theme) .agent-vip-btn-manage,
body.dark-theme .agent-vip-btn-manage {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.20), rgba(109, 40, 217, 0.28)) !important;
  border: 1.5px solid rgba(192, 132, 252, 0.45) !important;
  color: #c084fc !important;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.2) !important;
}
body:not(.light-theme) .agent-vip-btn-manage:hover,
body.dark-theme .agent-vip-btn-manage:hover {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.30), rgba(109, 40, 217, 0.38)) !important;
  border-color: #c084fc !important;
  color: #f3e8ff !important;
}
body:not(.light-theme) .agent-vip-btn-manage .btn-icon-box,
body.dark-theme .agent-vip-btn-manage .btn-icon-box {
  background: rgba(124, 58, 237, 0.4) !important;
  color: #e9d5ff !important;
}
body:not(.light-theme) .agent-vip-btn-manage .btn-arrow,
body.dark-theme .agent-vip-btn-manage .btn-arrow {
  color: #c084fc !important;
}

body:not(.light-theme) .agent-vip-btn-tours,
body.dark-theme .agent-vip-btn-tours {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.20), rgba(217, 119, 6, 0.28)) !important;
  border: 1.5px solid rgba(251, 191, 36, 0.45) !important;
  color: #fbbf24 !important;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.2) !important;
}
body:not(.light-theme) .agent-vip-btn-tours:hover,
body.dark-theme .agent-vip-btn-tours:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.30), rgba(217, 119, 6, 0.38)) !important;
  border-color: #fbbf24 !important;
  color: #fef3c7 !important;
}
body:not(.light-theme) .agent-vip-btn-tours .btn-icon-box,
body.dark-theme .agent-vip-btn-tours .btn-icon-box {
  background: rgba(245, 158, 11, 0.4) !important;
  color: #fde68a !important;
}
body:not(.light-theme) .agent-vip-btn-tours .btn-stat-badge,
body.dark-theme .agent-vip-btn-tours .btn-stat-badge {
  background: rgba(245, 158, 11, 0.35) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.45) !important;
}
body:not(.light-theme) .agent-vip-btn-tours .btn-arrow,
body.dark-theme .agent-vip-btn-tours .btn-arrow {
  color: #fbbf24 !important;
}

body:not(.light-theme) .agent-vip-btn-research,
body.dark-theme .agent-vip-btn-research {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.20), rgba(5, 150, 105, 0.28)) !important;
  border: 1.5px solid rgba(52, 211, 153, 0.45) !important;
  color: #34d399 !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.2) !important;
}
body:not(.light-theme) .agent-vip-btn-research:hover,
body.dark-theme .agent-vip-btn-research:hover {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.30), rgba(5, 150, 105, 0.38)) !important;
  border-color: #34d399 !important;
  color: #dcfce7 !important;
}
body:not(.light-theme) .agent-vip-btn-research .btn-icon-box,
body.dark-theme .agent-vip-btn-research .btn-icon-box {
  background: rgba(16, 185, 129, 0.4) !important;
  color: #a7f3d0 !important;
}
body:not(.light-theme) .agent-vip-btn-research .btn-stat-badge,
body.dark-theme .agent-vip-btn-research .btn-stat-badge {
  background: rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
  border: 1px solid rgba(52, 211, 153, 0.45) !important;
}
body:not(.light-theme) .agent-vip-btn-research .btn-arrow,
body.dark-theme .agent-vip-btn-research .btn-arrow {
  color: #34d399 !important;
}

body:not(.light-theme) .agent-vip-btn-contacts,
body.dark-theme .agent-vip-btn-contacts {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.20), rgba(79, 70, 229, 0.28)) !important;
  border: 1.5px solid rgba(129, 140, 248, 0.45) !important;
  color: #818cf8 !important;
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.2) !important;
}
body:not(.light-theme) .agent-vip-btn-contacts:hover,
body.dark-theme .agent-vip-btn-contacts:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.30), rgba(79, 70, 229, 0.38)) !important;
  border-color: #818cf8 !important;
  color: #e0e7ff !important;
}
body:not(.light-theme) .agent-vip-btn-contacts .btn-icon-box,
body.dark-theme .agent-vip-btn-contacts .btn-icon-box {
  background: rgba(99, 102, 241, 0.4) !important;
  color: #c7d2fe !important;
}
body:not(.light-theme) .agent-vip-btn-contacts .btn-stat-badge,
body.dark-theme .agent-vip-btn-contacts .btn-stat-badge {
  background: rgba(99, 102, 241, 0.35) !important;
  color: #818cf8 !important;
  border: 1px solid rgba(129, 140, 248, 0.45) !important;
}
body:not(.light-theme) .agent-vip-btn-contacts .btn-arrow,
body.dark-theme .agent-vip-btn-contacts .btn-arrow {
  color: #818cf8 !important;
}

body:not(.light-theme) .agent-vip-btn-admin,
body.dark-theme .agent-vip-btn-admin {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.20), rgba(234, 88, 12, 0.28)) !important;
  border: 1.5px solid rgba(251, 146, 60, 0.45) !important;
  color: #fb923c !important;
  box-shadow: 0 3px 10px rgba(249, 115, 22, 0.2) !important;
}
body:not(.light-theme) .agent-vip-btn-admin:hover,
body.dark-theme .agent-vip-btn-admin:hover {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.30), rgba(234, 88, 12, 0.38)) !important;
  border-color: #fb923c !important;
  color: #ffedd5 !important;
}
body:not(.light-theme) .agent-vip-btn-admin .btn-icon-box,
body.dark-theme .agent-vip-btn-admin .btn-icon-box {
  background: rgba(249, 115, 22, 0.4) !important;
  color: #fed7aa !important;
}
body:not(.light-theme) .agent-vip-btn-admin .btn-role-badge,
body.dark-theme .agent-vip-btn-admin .btn-role-badge {
  background: #ea580c !important;
  color: #ffffff !important;
}
body:not(.light-theme) .agent-vip-btn-admin .btn-arrow,
body.dark-theme .agent-vip-btn-admin .btn-arrow {
  color: #fb923c !important;
}

body:not(.light-theme) .agent-vip-btn-logout,
body.dark-theme .agent-vip-btn-logout {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.35) !important;
  color: #f87171 !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 0.84rem !important;
  padding: 10px 14px !important;
}
body:not(.light-theme) .agent-vip-btn-logout:hover,
body.dark-theme .agent-vip-btn-logout:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

/* Sidebar Agent Profile Box Styles */
.sidebar-agent-profile-box {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

.sidebar-agent-name {
  color: #0f172a !important;
}

.sidebar-agent-map-btn {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0284c7 !important;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.25) !important;
}

body:not(.light-theme) .sidebar-agent-profile-box,
body.dark-theme .sidebar-agent-profile-box {
  background: rgba(15, 23, 42, 0.95) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: #ffffff !important;
}

body:not(.light-theme) .sidebar-agent-name,
body.dark-theme .sidebar-agent-name {
  color: #ffffff !important;
}

body:not(.light-theme) .sidebar-agent-map-btn,
body.dark-theme .sidebar-agent-map-btn {
  background: #0f172a !important;
  color: #38bdf8 !important;
  border: 1px solid #0284c7 !important;
}
.agent-modal-footer {
  background: #ffffff !important;
  border-top: 1.5px solid #e2e8f0 !important;
}

body:not(.light-theme) .agent-modal-footer,
body.dark-theme .agent-modal-footer {
  background: #0b1120 !important;
  border-top: 1.5px solid #1e293b !important;
}

.hotline-btns-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

@media (max-width: 380px) {
  .hotline-btns-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

.agent-footer-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
}

.agent-footer-btn:hover {
  transform: translateY(-2px) !important;
}

.agent-footer-btn.call-btn {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  border-color: rgba(52, 211, 153, 0.4) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25) !important;
}

.agent-footer-btn.call-btn:hover {
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.agent-footer-btn.telegram-btn {
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
  color: #ffffff !important;
  border-color: rgba(125, 211, 252, 0.4) !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25) !important;
}

.agent-footer-btn.telegram-btn:hover {
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Responsive Owner Information Box & Grid */
.owner-info-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.owner-info-grid .owner-grid-full {
  grid-column: span 2 !important;
}

@media (max-width: 600px) {
  .owner-info-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .owner-info-grid .owner-grid-full {
    grid-column: span 1 !important;
  }
}

/* Multi-Phone Dynamic Input Component */
.btn-add-phone-mini {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: #059669 !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  width: auto !important;
  height: auto !important;
  min-height: 24px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.15) !important;
  flex-shrink: 0 !important;
}

.btn-add-phone-mini:hover {
  background: #10b981 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(16, 185, 129, 0.35) !important;
}

.phone-inputs-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  width: 100% !important;
}

.phone-input-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  animation: phoneRowFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes phoneRowFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.phone-input-row .fancy-input-wrap,
.phone-input-row .dim-input-box {
  flex: 1 !important;
  min-width: 0 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.fancy-input-wrap input.multi-phone-input,
.modal-card .fancy-input-wrap input.multi-phone-input {
  padding-left: 36px !important;
  padding-right: 10px !important;
  height: 36px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

.fancy-input-wrap .fancy-icon {
  position: absolute !important;
  left: 11px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  z-index: 5 !important;
  color: #10b981 !important;
  font-size: 0.82rem !important;
}

.btn-remove-phone {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 7px !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.btn-remove-phone:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
}

.agent-kpi-card {
  background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

.agent-kpi-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  flex-shrink: 0 !important;
}

.agent-kpi-val {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  line-height: 1.1 !important;
}

.agent-kpi-lbl {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
}

/* Agent My Listings Item Card */
.agent-prop-item-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
  transition: all 0.2s ease !important;
}

.agent-prop-item-card:hover {
  border-color: #f59e0b !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
}

.agent-prop-thumb {
  width: 60px !important;
  height: 60px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.agent-prop-title {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 2px !important;
}

.agent-prop-meta {
  font-size: 0.75rem !important;
  color: #64748b !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.status-badge-pill {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.status-badge-available {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
}

.status-badge-reserved {
  background: #fffbeb !important;
  color: #d97706 !important;
  border: 1px solid #fde68a !important;
}

.status-badge-sold {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
}

.status-badge-rented {
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1px solid #bfdbfe !important;
}

/* ==========================================================================
   AI REAL ESTATE ADVISOR FLOATING WIDGET & CHAT WINDOW
   ========================================================================== */

.ai-floating-trigger-btn {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 9990 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(16px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(190%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
  border-radius: 9999px !important;
  padding: 6px 14px 6px 6px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 15px rgba(56, 189, 248, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.ai-floating-trigger-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
  background: rgba(15, 23, 42, 0.85) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 22px rgba(56, 189, 248, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.35) !important;
  border-color: #38bdf8 !important;
}

.ai-floating-trigger-btn.chat-open {
  transform: scale(0.88) !important;
  opacity: 0.7 !important;
}

.ai-trigger-icon-wrap {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
  flex-shrink: 0 !important;
}

.ai-trigger-icon-wrap i {
  color: #ffffff !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)) !important;
}

.ai-online-dot {
  position: absolute !important;
  top: -1px !important;
  right: -1px !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  border: 1.5px solid #0f172a !important;
  box-shadow: 0 0 6px #10b981 !important;
}

.ai-trigger-text-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  line-height: 1.15 !important;
  padding-right: 6px !important;
  user-select: none !important;
}

.ai-trigger-title {
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
  letter-spacing: 0.3px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.ai-trigger-sub {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  color: #38bdf8 !important;
  white-space: nowrap !important;
  opacity: 0.95 !important;
}

@media (max-width: 768px) {
  .ai-floating-trigger-btn {
    bottom: 74px !important;
    right: 14px !important;
    padding: 4px 10px 4px 4px !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
  }

  .ai-trigger-icon-wrap {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.95rem !important;
  }

  .ai-trigger-text-group {
    display: flex !important;
    padding-right: 4px !important;
  }

  .ai-trigger-title {
    font-size: 0.76rem !important;
  }

  .ai-trigger-sub {
    display: none !important;
  }
}

/* AI Chat Window */
.ai-chat-window {
  position: fixed !important;
  bottom: 80px !important;
  right: 20px !important;
  width: 400px !important;
  max-width: calc(100vw - 28px) !important;
  height: 560px !important;
  max-height: calc(100vh - 100px) !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 25px rgba(245, 158, 11, 0.25) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.4) !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 100005 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: translateY(20px) scale(0.95) !important;
  pointer-events: none !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.ai-chat-window.active {
  opacity: 1 !important;
  transform: translateY(0px) scale(1) !important;
  pointer-events: auto !important;
}

/* Header */
.ai-chat-header {
  flex-shrink: 0 !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  padding: 14px 16px !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1.5px solid rgba(245, 158, 11, 0.35) !important;
}

.ai-header-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.ai-avatar-circle {
  position: relative !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4) !important;
}

.ai-avatar-live-status {
  position: absolute !important;
  bottom: 0px !important;
  right: 0px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  border: 2px solid #0f172a !important;
}

.ai-bot-name {
  font-size: 0.92rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.ai-gold-pill {
  font-size: 0.6rem !important;
  font-weight: 900 !important;
  background: rgba(245, 158, 11, 0.25) !important;
  color: #fbbf24 !important;
  border: 1px solid #f59e0b !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
}

.ai-bot-status {
  font-size: 0.68rem !important;
  color: #94a3b8 !important;
  font-weight: 600 !important;
}

.ai-header-controls {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.ai-ctrl-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #cbd5e1 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.76rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.ai-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Quick Prompts Bar */
.ai-prompts-bar {
  flex-shrink: 0 !important;
  display: flex !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
  cursor: grab !important;
  user-select: none !important;
  scrollbar-width: thin !important;
}

.ai-prompts-bar.dragging {
  cursor: grabbing !important;
  user-select: none !important;
  scroll-behavior: auto !important;
}

.ai-prompts-bar::-webkit-scrollbar {
  height: 5px !important;
}

.ai-prompts-bar::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
}

.ai-prompts-bar::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 99px !important;
}

.ai-prompts-bar::-webkit-scrollbar-thumb:hover {
  background: #f59e0b !important;
}

.ai-prompt-chip {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 9999px !important;
  padding: 4px 10px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  user-select: none !important;
}

.ai-prompt-chip:hover {
  border-color: #f59e0b !important;
  background: #fffbe6 !important;
  color: #b45309 !important;
  transform: translateY(-1px) !important;
}

/* Message Feed */
.ai-message-feed {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: #ffffff !important;
}

.ai-msg-row {
  display: flex !important;
  gap: 8px !important;
  max-width: 100% !important;
}

.ai-msg-row.user {
  justify-content: flex-end !important;
}

.ai-msg-row.bot {
  justify-content: flex-start !important;
}

.ai-avatar-tiny {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.8rem !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.ai-msg-bubble {
  padding: 10px 14px !important;
  border-radius: 14px !important;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
  max-width: 86% !important;
  word-break: break-word !important;
}

.ai-msg-bubble.user {
  background: linear-gradient(135deg, #0f172a, #1e293b) !important;
  color: #ffffff !important;
  border-bottom-right-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important;
}

.ai-msg-bubble.bot {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-bottom-left-radius: 4px !important;
}

.ai-msg-text strong {
  color: #0f172a !important;
  font-weight: 800 !important;
}

.ai-msg-bubble.user .ai-msg-text strong {
  color: #fbbf24 !important;
}

.ai-msg-time {
  font-size: 0.65rem !important;
  color: #94a3b8 !important;
  margin-top: 4px !important;
  text-align: right !important;
}

/* Typing Indicator */
.ai-typing-bubble {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.ai-typing-bubble span {
  width: 6px !important;
  height: 6px !important;
  background: #f59e0b !important;
  border-radius: 50% !important;
  animation: aiBounce 1.2s infinite ease-in-out !important;
}

.ai-typing-bubble span:nth-child(2) { animation-delay: 0.2s !important; }
.ai-typing-bubble span:nth-child(3) { animation-delay: 0.4s !important; }

@keyframes aiBounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
}

/* Property Chat Card Grid */
.ai-chat-props-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.ai-prop-card-chat {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  display: flex !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
}

.ai-prop-card-chat:hover {
  border-color: #f59e0b !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.ai-prop-thumb-wrap {
  position: relative !important;
  width: 80px !important;
  flex-shrink: 0 !important;
}

.ai-prop-thumb {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.ai-prop-price-tag {
  position: absolute !important;
  bottom: 4px !important;
  left: 4px !important;
  background: rgba(15, 23, 42, 0.85) !important;
  color: #34d399 !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
}

.ai-prop-body {
  padding: 6px 8px 6px 0 !important;
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.ai-prop-code-row {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.ai-prop-badge {
  font-size: 0.62rem !important;
  background: #0f172a !important;
  color: #fbbf24 !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  font-weight: 800 !important;
}

.ai-prop-code {
  font-size: 0.64rem !important;
  color: #64748b !important;
  font-weight: 700 !important;
}

.ai-prop-title {
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ai-prop-loc {
  font-size: 0.68rem !important;
  color: #64748b !important;
}

.ai-prop-actions {
  display: flex !important;
  gap: 4px !important;
  margin-top: 4px !important;
}

.ai-btn-view {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 3px 6px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: #334155 !important;
  cursor: pointer !important;
}

.ai-btn-book {
  background: #047857 !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.ai-btn-book:hover {
  background: #059669 !important;
}

/* Input Bar */
.ai-input-wrapper {
  flex-shrink: 0 !important;
  position: relative !important;
  bottom: 0 !important;
  z-index: 10 !important;
  padding: 10px 14px !important;
  background: #f8fafc !important;
  border-top: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.03) !important;
}

.ai-input-wrapper form {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ai-input-wrapper input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 42px !important;
  border-radius: 9999px !important;
  border: 1.5px solid #cbd5e1 !important;
  padding: 0 16px !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  background: #ffffff !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.ai-input-wrapper input:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2) !important;
}

.ai-send-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.ai-send-btn:hover {
  transform: scale(1.08) !important;
  background: linear-gradient(135deg, #0369a1, #075985) !important;
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.5) !important;
}

@media (max-width: 768px) {
  .ai-chat-window {
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 85vh !important;
    max-height: 90vh !important;
    border-radius: 20px 20px 0 0 !important;
    z-index: 100005 !important;
  }
  
  .ai-input-wrapper {
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
}

/* ==========================================================================
   PWA INSTALLATION MODAL & SMART BANNER STYLES (iOS & Android)
   ========================================================================== */

.pwa-install-backdrop {
  z-index: 1000000 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pwa-install-card {
  max-width: 480px !important;
  width: 92vw !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #0f172a !important;
  border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 35px rgba(245, 158, 11, 0.2) !important;
}

.pwa-modal-header {
  background: linear-gradient(135deg, #0b0f19 0%, #1e293b 100%);
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pwa-header-brand-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.pwa-header-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.pwa-modal-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 900;
  color: #ffffff !important;
  line-height: 1.3;
}

.pwa-modal-sub {
  margin: 2px 0 0 0;
  font-size: 0.76rem;
  color: #cbd5e1 !important;
  font-weight: 600;
}

.pwa-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.pwa-close-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #f87171 !important;
  transform: rotate(90deg);
}

.pwa-modal-body {
  padding: 20px !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #0f172a;
}

.pwa-benefit-box {
  background: rgba(245, 158, 11, 0.12);
  border: 1.5px solid rgba(245, 158, 11, 0.4);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pwa-benefit-box i {
  font-size: 1.8rem;
  color: #f59e0b;
  flex-shrink: 0;
}

.pwa-benefit-text {
  font-size: 0.82rem;
  color: #fef08a;
  font-weight: 700;
  line-height: 1.45;
}

.pwa-section-heading {
  color: #ffffff;
  font-size: 0.94rem;
  margin: 0;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pwa-steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pwa-step-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(30, 41, 59, 0.75);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}

.pwa-step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.9rem;
  color: #ffffff !important;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.pwa-step-num.step-1 {
  background: linear-gradient(135deg, #0284c7, #0369a1);
}

.pwa-step-num.step-2 {
  background: linear-gradient(135deg, #10b981, #059669);
}

.pwa-step-num.step-3 {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.pwa-step-text {
  font-size: 0.85rem;
  color: #f1f5f9;
  line-height: 1.55;
  font-weight: 500;
  flex: 1;
}

.pwa-step-text strong {
  color: #ffffff;
  font-weight: 800;
}

.pwa-guide-icon-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  vertical-align: middle;
  margin: 0 2px;
}

.pwa-guide-icon-pill.pwa-icon-share {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.pwa-guide-icon-pill.pwa-icon-add {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.pwa-ios-bottom-hint {
  background: rgba(15, 23, 42, 0.8);
  border: 1px dashed rgba(56, 189, 248, 0.4);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #38bdf8;
  font-weight: 700;
  text-align: center;
  animation: pulseHint 2s infinite ease-in-out;
}

@keyframes pulseHint {
  0%, 100% { transform: translateY(0); opacity: 0.9; }
  50% { transform: translateY(3px); opacity: 1; }
}

.btn-pwa-confirm {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff !important;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-pwa-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.55);
}

/* Light Theme overrides for PWA Install Modal */
body.light-theme .pwa-install-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.22) !important;
}

body.light-theme .pwa-modal-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}

body.light-theme .pwa-modal-body {
  background: #ffffff !important;
}

body.light-theme .pwa-benefit-box {
  background: #fffbeb !important;
  border: 1.5px solid #f59e0b !important;
}

body.light-theme .pwa-benefit-box i {
  color: #d97706 !important;
}

body.light-theme .pwa-benefit-text {
  color: #78350f !important;
}

body.light-theme .pwa-section-heading {
  color: #0f172a !important;
}

body.light-theme .pwa-step-card {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .pwa-step-card:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

body.light-theme .pwa-step-text {
  color: #334155 !important;
}

body.light-theme .pwa-step-text strong {
  color: #0f172a !important;
}

body.light-theme .pwa-guide-icon-pill.pwa-icon-share {
  background: #e0f2fe !important;
  color: #0369a1 !important;
  border: 1.5px solid #38bdf8 !important;
}

body.light-theme .pwa-guide-icon-pill.pwa-icon-add {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1.5px solid #10b981 !important;
}

body.light-theme .pwa-ios-bottom-hint {
  background: #f0f9ff !important;
  border: 1.5px dashed #0284c7 !important;
  color: #0369a1 !important;
}

/* Smart Floating Banner in Light Theme */
body.light-theme #pwaSmartBanner {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1.5px solid #d97706 !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18), 0 0 20px rgba(217, 119, 6, 0.2) !important;
}

body.light-theme #pwaSmartBanner .pwa-banner-title {
  color: #0f172a !important;
}

body.light-theme #pwaSmartBanner .pwa-banner-sub {
  color: #475569 !important;
}

body.light-theme #pwaSmartBanner .pwa-banner-close {
  background: #f1f5f9 !important;
  color: #64748b !important;
}

body.light-theme .sidebar-pwa-install-btn {
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
}

body.light-theme .sidebar-pwa-install-btn span {
  color: #065f46 !important;
}

.pwa-already-installed-box {
  text-align: center;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pwa-installed-icon-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.3));
  border: 2px solid #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #10b981;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
}

.pwa-installed-title {
  font-size: 1.15rem;
  font-weight: 900;
  color: #10b981;
  margin: 0;
}

.pwa-installed-desc {
  font-size: 0.88rem;
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0;
  max-width: 360px;
}

body.light-theme .pwa-installed-title {
  color: #047857 !important;
}

body.light-theme .pwa-installed-desc {
  color: #334155 !important;
}

/* ==========================================================================
   PUBLIC & ADMIN MODAL FORM STYLES (DARK / LIGHT THEME)
   ========================================================================== */

.photo-slot-main {
  background: #ffffff;
}

.photo-slot-sub {
  background: #ffffff;
}

.form-owner-info-box {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1.5px solid #cbd5e1;
}

.multi-phone-input {
  width: 100%;
  padding: 6px 10px 6px 36px;
  height: 36px;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #0f172a;
  box-sizing: border-box;
}

.multi-phone-input::placeholder {
  color: #94a3b8 !important;
  opacity: 0.75 !important;
  font-weight: 500 !important;
}

/* Dark Theme Support (Default or body.dark-theme) */
body:not(.light-theme) .photo-slot-main,
body:not(.light-theme) .photo-slot-sub,
body.dark-theme .photo-slot-main,
body.dark-theme .photo-slot-sub {
  background: #0f172a !important;
  border-color: #334155 !important;
}

body:not(.light-theme) .photo-slot-main div,
body:not(.light-theme) .photo-slot-sub div,
body:not(.light-theme) .photo-slot-sub span,
body.dark-theme .photo-slot-main div,
body.dark-theme .photo-slot-sub div,
body.dark-theme .photo-slot-sub span {
  color: #f8fafc;
}

body:not(.light-theme) .photo-placeholder-icon,
body.dark-theme .photo-placeholder-icon {
  background: #1e293b !important;
  color: #38bdf8 !important;
}

body:not(.light-theme) .btn-slot-folder,
body.dark-theme .btn-slot-folder {
  background: #1e293b !important;
  color: #34d399 !important;
  border-color: #334155 !important;
}

body:not(.light-theme) .multi-phone-input,
body:not(.light-theme) input.multi-phone-input,
body.dark-theme .multi-phone-input,
body.dark-theme input.multi-phone-input {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}

body:not(.light-theme) .multi-phone-input::placeholder,
body.dark-theme .multi-phone-input::placeholder {
  color: #64748b !important;
  opacity: 0.75 !important;
  font-weight: 500 !important;
}

body:not(.light-theme) .form-owner-info-box,
body.dark-theme .form-owner-info-box {
  background: #131b2e !important;
  border: 1.5px solid #1e293b !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

body:not(.light-theme) .form-owner-info-box label,
body:not(.light-theme) .form-owner-info-box span,
body.dark-theme .form-owner-info-box label,
body.dark-theme .form-owner-info-box span {
  color: #f8fafc !important;
}

body:not(.light-theme) .form-owner-info-box input,
body.dark-theme .form-owner-info-box input {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}

body:not(.light-theme) .owner-privacy-tag,
body.dark-theme .owner-privacy-tag {
  background: rgba(16, 185, 129, 0.18) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
}

body:not(.light-theme) .btn-add-phone-mini,
body.dark-theme .btn-add-phone-mini {
  background: rgba(16, 185, 129, 0.18) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
}

/* Phone Portfolio Live Alert Box */
.phone-portfolio-live-banner {
  margin-top: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1.5px solid #93c5fd;
  border-radius: 10px;
  color: #1e40af;
  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.12);
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  transition: all 0.2s ease-in-out;
  width: 100%;
  box-sizing: border-box;
}

.phone-portfolio-live-banner .stat-chip {
  background: #ffffff;
  color: #1e40af;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #bfdbfe;
  font-weight: 700;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.phone-portfolio-live-banner .stat-chip-total {
  background: #ffffff;
  color: #047857;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid #a7f3d0;
  font-weight: 800;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  white-space: nowrap;
}

.phone-portfolio-live-banner .btn-view-portfolio {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff !important;
  border: none;
  padding: 6px 13px;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
  transition: transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.phone-portfolio-live-banner .btn-view-portfolio:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
}

.phone-portfolio-live-banner .btn-view-portfolio:active {
  transform: translateY(0);
}

body.dark-theme .phone-portfolio-live-banner,
body:not(.light-theme) .phone-portfolio-live-banner {
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.45) 0%, rgba(30, 64, 175, 0.3) 100%) !important;
  border: 1.5px solid rgba(96, 165, 250, 0.4) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

body.dark-theme .phone-portfolio-live-banner .stat-chip,
body:not(.light-theme) .phone-portfolio-live-banner .stat-chip {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(96, 165, 250, 0.3) !important;
  color: #93c5fd !important;
}

body.dark-theme .phone-portfolio-live-banner .stat-chip-total,
body:not(.light-theme) .phone-portfolio-live-banner .stat-chip-total {
  background: rgba(6, 78, 59, 0.5) !important;
  border: 1px solid rgba(52, 211, 153, 0.4) !important;
  color: #6ee7b7 !important;
}

/* ==========================================================================
   ULTIMATE MOBILE RESPONSIVENESS & ANTI-CLIPPING SYSTEM
   ========================================================================== */

@media (max-width: 480px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .navbar {
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 7px !important;
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    height: auto !important;
    min-height: calc(50px + env(safe-area-inset-top, 0px)) !important;
    gap: 6px !important;
  }

  .brand-title-styled {
    font-size: 0.88rem !important;
  }

  .properties-grid,
  .property-grid,
  #publicPropertiesGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 7px !important;
  }

  .property-card {
    border-radius: 12px !important;
  }

  .property-body {
    padding: 8px 6px !important;
  }

  .property-title {
    font-size: 0.98rem !important;
    line-height: 1.35 !important;
    margin-bottom: 4px !important;
  }

  .property-location {
    font-size: 0.72rem !important;
    margin-bottom: 5px !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    cursor: grab !important;
  }

  .property-specs {
    font-size: 0.80rem !important;
    padding: 5px 8px !important;
    gap: 8px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    cursor: grab !important;
  }

  .property-specs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .property-specs .spec-item {
    font-size: 0.80rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .property-specs .spec-item strong {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
  }

  .property-specs .spec-item i {
    font-size: 0.80rem !important;
  }

  .property-specs .spec-code {
    font-size: 0.80rem !important;
    font-weight: 800 !important;
  }

  .property-actions {
    padding: 4px 4px !important;
    gap: 3px !important;
  }

  .property-actions .btn.btn-action-icon {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    font-size: 0.68rem !important;
    border-radius: 6px !important;
  }

  .property-actions .btn.btn-action-main {
    height: 26px !important;
    padding: 0 3px !important;
    font-size: 0.68rem !important;
    gap: 2px !important;
    border-radius: 6px !important;
  }

  .property-actions .btn.btn-action-main i {
    font-size: 0.62rem !important;
  }

  .property-actions .btn.btn-action-main span {
    font-size: 0.68rem !important;
  }
}

@media (max-width: 360px) {
  .properties-grid,
  .property-grid,
  #publicPropertiesGrid {
    gap: 5px !important;
  }

  .property-thumb-wrap {
    height: 200px !important;
    min-height: 200px !important;
  }

  .price-tag {
    font-size: 0.70rem !important;
    padding: 2px 5px !important;
  }

  .property-actions .btn.btn-action-icon {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    font-size: 0.64rem !important;
  }

  .property-actions .btn.btn-action-main {
    height: 24px !important;
    font-size: 0.64rem !important;
    padding: 0 2px !important;
  }

  .property-actions .btn.btn-action-main span {
    font-size: 0.64rem !important;
  }
}


/* ==========================================================================
   UNIFIED MAP MODAL RESPONSIVE HEADER
   ========================================================================== */
.unified-map-header-bar {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  padding: 8px 12px !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  border-bottom: 2px solid var(--accent-gold, #f59e0b) !important;
  flex-shrink: 0 !important;
  z-index: 1001 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.unified-map-title-box {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

.unified-map-title-box h3 {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

.unified-map-title-box span {
  font-size: 0.68rem !important;
  color: #a5f3fc !important;
  font-weight: 600 !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

.unified-map-actions-box {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 576px) {
  .unified-map-header-bar {
    padding: 6px 8px !important;
    gap: 6px !important;
  }
  .unified-map-title-box .map-icon-circle {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.85rem !important;
  }
  .unified-map-title-box h3 {
    font-size: 0.80rem !important;
  }
  .unified-map-title-box span {
    display: none !important;
  }
  .unified-map-actions-box {
    gap: 4px !important;
  }
  .btn-unified-map-ocr {
    padding: 4px 6px !important;
    font-size: 0.68rem !important;
  }
  .btn-unified-map-ocr span.text-extra {
    display: none !important;
  }
  #unifiedMapCountPill {
    padding: 3px 6px !important;
    font-size: 0.66rem !important;
  }
}


/* ============================================================
   STABILIZE PUBLIC UI (Eliminate all jitter, shake, and twitch)
   ============================================================ */
.property-card-public,
.property-card,
.hero-owner-submission-card,
.hero-floating-prop-card,
.agent-card,
.badge-pill,
.cat-pill {
  animation: none !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(0) !important;
}

.property-card-public:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2) !important;
}

.hero-owner-submission-card:hover {
  transform: translateY(-3px) !important;
}

/* ============================================================
   THEMED MODALS (FULL DARK MODE & LIGHT MODE SUPPORT)
   ============================================================ */

/* --- 1. Mortgage Loan Calculator Modal --- */
.mortgage-modal-card {
  background: #0f172a !important;
  color: #f1f5f9 !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.8), 0 0 35px rgba(16, 185, 129, 0.2) !important;
}

body.light-theme .mortgage-modal-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 25px 60px -10px rgba(15, 23, 42, 0.18), 0 0 30px rgba(16, 185, 129, 0.1) !important;
}

/* Modal Header Theming */
.mortgage-modal-header {
  background: linear-gradient(135deg, #0b0f19 0%, #1e293b 100%) !important;
  border-bottom: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  color: #ffffff !important;
}

.mortgage-modal-header h3,
.mortgage-header-title,
#standaloneMortgageModal .mortgage-modal-header h3 {
  color: #ffffff !important;
}

.mortgage-modal-header .mortgage-header-sub,
.mortgage-header-sub {
  color: #34d399 !important;
}

.mortgage-close-btn,
.mortgage-modal-header button {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

.mortgage-close-btn i,
.mortgage-modal-header button i {
  color: #ffffff !important;
}

body.light-theme .mortgage-modal-header {
  background: linear-gradient(135deg, #064e3b 0%, #047857 50%, #059669 100%) !important;
  border-bottom: 1.5px solid #10b981 !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.2) !important;
}

body.light-theme .mortgage-modal-header h3,
body.light-theme .mortgage-header-title,
body.light-theme #standaloneMortgageModal .mortgage-modal-header h3 {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
}

body.light-theme .mortgage-modal-header .mortgage-header-sub,
body.light-theme .mortgage-header-sub {
  color: #fef08a !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body.light-theme .mortgage-close-btn,
body.light-theme .mortgage-modal-header button {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

body.light-theme .mortgage-close-btn i,
body.light-theme .mortgage-modal-header button i {
  color: #ffffff !important;
  font-weight: 900 !important;
}

.mortgage-modal-body {
  background: #0b1120 !important;
  color: #f1f5f9 !important;
}

body.light-theme .mortgage-modal-body {
  background: #ffffff !important;
  color: #0f172a !important;
}

.mortgage-input-label {
  color: #f1f5f9 !important;
  font-weight: 800 !important;
}

body.light-theme .mortgage-input-label {
  color: #1e293b !important;
}

.mortgage-price-input,
.fancy-input-wrap input.mortgage-price-input,
.mortgage-modal-card #standalonePriceInput {
  background: #1e293b !important;
  color: #34d399 !important;
  border: 1.5px solid #334155 !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
}

body.light-theme .mortgage-price-input,
body.light-theme .fancy-input-wrap input.mortgage-price-input,
body.light-theme .mortgage-modal-card #standalonePriceInput {
  background: #f8fafc !important;
  color: #047857 !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.mortgage-calc-widget {
  background: #111c33 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
}

body.light-theme .mortgage-calc-widget {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
}

.mortgage-row-title {
  color: #f1f5f9 !important;
  font-weight: 800 !important;
  font-size: 0.84rem !important;
}

body.light-theme .mortgage-row-title {
  color: #1e293b !important;
}

.mortgage-dp-val {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
  font-weight: 800 !important;
}

body.light-theme .mortgage-dp-val {
  background: #e0f2fe !important;
  color: #0284c7 !important;
  border: 1px solid #bae6fd !important;
}

.mortgage-rate-val {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  font-weight: 800 !important;
}

body.light-theme .mortgage-rate-val {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}

.mortgage-years-val {
  background: rgba(139, 92, 246, 0.2) !important;
  color: #c084fc !important;
  border: 1px solid rgba(139, 92, 246, 0.45) !important;
  font-weight: 800 !important;
}

body.light-theme .mortgage-years-val {
  background: #f3e8ff !important;
  color: #7c3aed !important;
  border: 1.5px solid #c4b5fd !important;
}

/* Universal High-Contrast Range Slider Tracks & Thumbs for Mobile & Desktop */
.mortgage-range-slider,
.mortgage-calc-widget input[type="range"],
.calc-row input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 7px !important;
  border-radius: 99px !important;
  background: #334155 !important;
  outline: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 6px 0 !important;
}

body.light-theme .mortgage-range-slider,
body.light-theme .mortgage-calc-widget input[type="range"],
body.light-theme .calc-row input[type="range"] {
  background: #334155 !important;
}

/* WebKit Slider Thumb (iOS Safari, Mobile Chrome, Edge, Android WebViews) */
.mortgage-range-slider::-webkit-slider-thumb,
.mortgage-calc-widget input[type="range"]::-webkit-slider-thumb,
.calc-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 2.5px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
  cursor: pointer !important;
  transition: transform 0.12s ease !important;
}

.mortgage-range-slider::-webkit-slider-thumb:active,
.mortgage-calc-widget input[type="range"]::-webkit-slider-thumb:active,
.calc-row input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.18) !important;
}

/* Firefox Thumb */
.mortgage-range-slider::-moz-range-thumb,
.mortgage-calc-widget input[type="range"]::-moz-range-thumb,
.calc-row input[type="range"]::-moz-range-thumb {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 2.5px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
  cursor: pointer !important;
}

/* Thumb colors matching each specific slider */
#standaloneSliderDp::-webkit-slider-thumb {
  background: #10b981 !important;
}
#standaloneSliderDp::-moz-range-thumb {
  background: #10b981 !important;
}

#standaloneSliderRate::-webkit-slider-thumb {
  background: #f59e0b !important;
}
#standaloneSliderRate::-moz-range-thumb {
  background: #f59e0b !important;
}

#standaloneSliderYears::-webkit-slider-thumb {
  background: #8b5cf6 !important;
}
#standaloneSliderYears::-moz-range-thumb {
  background: #8b5cf6 !important;
}

/* Result Box Theming */
.mortgage-calc-result-box {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.light-theme .mortgage-calc-result-box {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.18) 0%, rgba(16, 185, 129, 0.12) 100%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.12) !important;
  color: #0f172a !important;
}

body.light-theme .mortgage-calc-result-box div[style*="color: #94a3b8"] {
  color: #1e293b !important;
  font-weight: 800 !important;
}

body.light-theme .mortgage-calc-result-box .calc-result-amount {
  color: #0f172a !important;
  text-shadow: none !important;
  font-weight: 900 !important;
}

body.light-theme .mortgage-calc-result-box div[style*="border-top"] {
  border-top: 1px dashed rgba(15, 23, 42, 0.2) !important;
}

body.light-theme .mortgage-calc-result-box #standaloneCalcPrincipal {
  color: #0f172a !important;
  font-weight: 900 !important;
}

body.light-theme .mortgage-calc-result-box #standaloneCalcInterest {
  color: #b45309 !important;
  font-weight: 900 !important;
}

body.light-theme .mortgage-calc-result-box #standaloneCalcTotal {
  color: #0369a1 !important;
  font-weight: 900 !important;
}

body:not(.light-theme) .calc-result-box,
body.dark-theme .calc-result-box {
  background: #0f172a !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body:not(.light-theme) .calc-result-amount,
body.dark-theme .calc-result-amount {
  color: #38bdf8 !important;
  text-shadow: 0 0 16px rgba(56, 189, 248, 0.3) !important;
}

body.light-theme .calc-result-box,
body.light-mode .calc-result-box {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border: 1.5px solid #bae6fd !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.08) !important;
  color: #0f172a !important;
}

body.light-theme .calc-result-box div[style*="color: #94a3b8"],
body.light-mode .calc-result-box div[style*="color: #94a3b8"],
body.light-theme .calc-result-label,
body.light-mode .calc-result-label {
  color: #0369a1 !important;
  font-weight: 700 !important;
}

body.light-theme .calc-result-amount,
body.light-mode .calc-result-amount {
  color: #0284c7 !important;
  text-shadow: none !important;
  font-weight: 900 !important;
}

.mortgage-modal-footer {
  background: #0f172a !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.light-theme .mortgage-modal-footer {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
}

body.light-theme .mortgage-modal-footer .btn-emerald {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.22) 0%, rgba(16, 185, 129, 0.18) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.45) !important;
  color: #0f172a !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.15) !important;
  font-weight: 900 !important;
}

body.light-theme .mortgage-modal-footer .btn-emerald i,
body.light-theme .mortgage-modal-footer .btn-emerald span {
  color: #0f172a !important;
  font-weight: 900 !important;
}

body.light-theme .mortgage-modal-footer .btn-emerald:hover {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.35) 0%, rgba(16, 185, 129, 0.28) 100%) !important;
  border-color: rgba(16, 185, 129, 0.7) !important;
  color: #0f172a !important;
}

.mortgage-btn-close {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  color: #f1f5f9 !important;
}

body.light-theme .mortgage-btn-close {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #475569 !important;
}

/* --- 2. Team & Agent Directory Modal Dark Theme Support --- */
.agent-modal-card {
  background: #0f172a !important;
}

body.light-theme .agent-modal-card {
  background: #ffffff !important;
}

.agent-modal-body-themed {
  background: #0b1120 !important;
}

body.light-theme .agent-modal-body-themed {
  background: #f8fafc !important;
}

.agent-card-item-themed {
  background: #1e293b !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

body.light-theme .agent-card-item-themed {
  background: #ffffff !important;
  border: 1.5px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

.agent-name-themed {
  color: #ffffff !important;
}

body.light-theme .agent-name-themed {
  color: #0f172a !important;
}

.agent-title-themed {
  color: #94a3b8 !important;
}

body.light-theme .agent-title-themed {
  color: #64748b !important;
}

.agent-email-link-themed {
  background: rgba(2, 132, 199, 0.15) !important;
  border: 1px solid rgba(2, 132, 199, 0.35) !important;
  color: #38bdf8 !important;
}

body.light-theme .agent-email-link-themed {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  color: #0284c7 !important;
}

.agent-info-box-themed {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cbd5e1 !important;
}

body.light-theme .agent-info-box-themed {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

.agent-modal-footer-themed {
  background: #0f172a !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.1) !important;
}

body.light-theme .agent-modal-footer-themed {
  background: #ffffff !important;
  border-top: 1.5px solid #e2e8f0 !important;
}

/* --- 3. Owner Center & Property Hub Modal Dark Mode Support --- */
.owner-center-modal-card {
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  background: #0f172a !important;
  color: #f1f5f9 !important;
  border: 1.5px solid rgba(251, 191, 36, 0.3) !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.7) !important;
}

.owner-center-modal-card .owner-portal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: calc(88vh - 130px) !important;
  overflow-y: auto !important;
}

.owner-center-modal-card .owner-modal-footer-themed {
  flex-shrink: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 8px 16px !important;
}

body.light-theme .owner-center-modal-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

body.light-theme .owner-center-modal-card .owner-modal-footer-themed {
  border-top: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
}

/* Owner Center Header Theming (Soft Emerald Light Green) */
.owner-center-modal-header {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 100%) !important;
  color: #ffffff !important;
  border-bottom: 1.5px solid rgba(52, 211, 153, 0.35) !important;
}

body.light-theme .owner-center-modal-header {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  border-bottom: 1.5px solid #34d399 !important;
}

body.light-theme .owner-center-modal-header h3,
body.light-theme .owner-center-modal-header span {
  color: #ffffff !important;
}

body.light-theme .owner-center-modal-header .owner-header-sub {
  color: #d1fae5 !important;
}

body.light-theme .owner-center-modal-header .owner-header-crown {
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
}

body.light-theme .owner-center-modal-header .owner-header-crown i {
  color: #ffffff !important;
}

body.light-theme .owner-center-modal-header .modal-close-btn {
  background: rgba(255, 255, 255, 0.22) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
}

body.light-theme .owner-center-modal-header .modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.85) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

.owner-nav-tabs-bar {
  background: #111c33 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.light-theme .owner-nav-tabs-bar {
  background: #f1f5f9 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.owner-nav-tab {
  color: #94a3b8 !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
}

.owner-nav-tab.active {
  background: #1e293b !important;
  color: #38bdf8 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.light-theme .owner-nav-tab {
  color: #64748b !important;
  background: transparent !important;
}

body.light-theme .owner-nav-tab.active {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  border: none !important;
}

.owner-portal-body {
  background: #0b1120 !important;
  color: #f1f5f9 !important;
}

body.light-theme .owner-portal-body {
  background: #ffffff !important;
  color: #0f172a !important;
}

.owner-phone-box {
  background: #1e293b !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  color: #f1f5f9 !important;
}

body.light-theme .owner-phone-box {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #0f172a !important;
}

.owner-phone-label {
  color: #f1f5f9 !important;
}

body.light-theme .owner-phone-label {
  color: #0f172a !important;
}

.owner-pin-badge {
  font-size: 0.72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  color: #34d399 !important;
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}

.owner-pin-badge i {
  color: #34d399 !important;
  font-size: 0.75rem;
}

body.light-theme .owner-pin-badge,
body.light-mode .owner-pin-badge {
  color: #059669 !important;
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  box-shadow: none;
}

body.light-theme .owner-pin-badge i,
body.light-mode .owner-pin-badge i {
  color: #059669 !important;
}

.owner-phone-input {
  background: #0f172a !important;
  color: #38bdf8 !important;
  border: 1.5px solid #334155 !important;
}

.owner-phone-input::placeholder {
  color: #64748b !important;
  opacity: 0.85 !important;
  font-weight: 600 !important;
}

body.light-theme .owner-phone-input {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
}

body.light-theme .owner-phone-input::placeholder {
  color: #94a3b8 !important;
  opacity: 0.9 !important;
  font-weight: 500 !important;
}

#ownerPortalPinInput {
  background: #0f172a !important;
  color: #fbbf24 !important;
  border: 1.5px solid #334155 !important;
}

#ownerPortalPinInput::placeholder {
  color: #64748b !important;
  opacity: 0.85 !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}

body.light-theme #ownerPortalPinInput {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
}

body.light-theme #ownerPortalPinInput::placeholder {
  color: #94a3b8 !important;
  opacity: 0.9 !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}

.owner-login-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

@media (max-width: 480px) {
  .owner-login-row-grid {
    grid-template-columns: 1fr !important;
  }
}

.owner-empty-box {
  background: #111c33 !important;
  border: 1.5px dashed rgba(255, 255, 255, 0.15) !important;
  color: #94a3b8 !important;
}

body.light-theme .owner-empty-box {
  background: #f8fafc !important;
  border: 1.5px dashed #cbd5e1 !important;
  color: #64748b !important;
}

.owner-empty-title {
  color: #ffffff !important;
}

body.light-theme .owner-empty-title {
  color: #0f172a !important;
}

.owner-stat-card-total {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f1f5f9 !important;
}

body.light-theme .owner-stat-card-total {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

.owner-listing-card-themed {
  background: #1e293b !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  color: #f1f5f9 !important;
}

body.light-theme .owner-listing-card-themed {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
  color: #0f172a !important;
}

.owner-listing-title-themed {
  color: #ffffff !important;
}

body.light-theme .owner-listing-title-themed {
  color: #0f172a !important;
}

/* --- Owner Land Parcel Card Theming (Modern, Luxury, Responsive) --- */
.owner-portal-section-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.light-theme .owner-portal-section-bar {
  border-bottom: 1px solid #e2e8f0 !important;
}

.owner-portal-heading-text {
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

body.light-theme .owner-portal-heading-text {
  color: #0f172a !important;
}

.owner-portal-subheading-text {
  font-size: 0.74rem !important;
  color: #94a3b8 !important;
  margin-top: 2px !important;
}

body.light-theme .owner-portal-subheading-text {
  color: #64748b !important;
}

.owner-parcels-empty-box {
  text-align: center !important;
  padding: 36px 16px !important;
  background: rgba(15, 23, 42, 0.4) !important;
  border-radius: 14px !important;
  border: 1.5px dashed rgba(255, 255, 255, 0.15) !important;
  margin-top: 12px !important;
}

body.light-theme .owner-parcels-empty-box {
  background: #f8fafc !important;
  border: 1.5px dashed #cbd5e1 !important;
  color: #0f172a !important;
}

.owner-parcels-grid-2col {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

@media (max-width: 400px) {
  .owner-parcels-grid-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* --- All Client Parcels Map Modal - Luxury Dark & Light Mode Engine --- */
.all-parcels-map-modal-card {
  max-width: 960px !important;
  width: 96vw !important;
  max-height: 90vh !important;
  height: 86vh !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
  background: #0f172a !important;
  color: #f8fafc !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
}

body.light-theme .all-parcels-map-modal-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* Modal Header */
.all-parcels-map-header {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 100%) !important;
  padding: 12px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1.5px solid rgba(52, 211, 153, 0.35) !important;
  flex-shrink: 0 !important;
  color: #ffffff !important;
}

body.light-theme .all-parcels-map-header {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  border-bottom: 1.5px solid #34d399 !important;
  color: #ffffff !important;
}

.all-parcels-map-header h3 {
  margin: 0 !important;
  font-size: 0.98rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
}

.all-parcels-map-header .all-parcels-header-sub {
  font-size: 0.72rem !important;
  color: #d1fae5 !important;
  margin-top: 1px !important;
}

.all-parcels-map-header .modal-close-btn {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s !important;
}

.all-parcels-map-header .modal-close-btn:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

/* Quick Jump Bar */
.all-parcels-quick-jump-bar {
  padding: 8px 14px !important;
  background: #111c33 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

body.light-theme .all-parcels-quick-jump-bar {
  background: #f8fafc !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}

.all-parcels-jump-label {
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

body.light-theme .all-parcels-jump-label {
  color: #0284c7 !important;
}

.all-parcels-select-input {
  background: #1e293b !important;
  color: #ffffff !important;
  border: 1px solid #334155 !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  outline: none !important;
  flex: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

body.light-theme .all-parcels-select-input {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme .all-parcels-select-input:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

/* Modal Footer */
.all-parcels-map-footer {
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  background: #0f172a !important;
  color: #f1f5f9 !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.1) !important;
}

body.light-theme .all-parcels-map-footer {
  background: #ffffff !important;
  color: #0f172a !important;
  border-top: 1.5px solid #e2e8f0 !important;
}

.all-parcels-list-label {
  font-weight: 900 !important;
  color: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.all-parcels-toggle-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  font-size: 0.70rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  background: rgba(56, 189, 248, 0.12) !important;
  color: #38bdf8 !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
}

.all-parcels-toggle-pill-btn:hover {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  transform: translateY(-1px);
}

.all-parcels-toggle-pill-btn.is-collapsed {
  background: rgba(245, 158, 11, 0.18) !important;
  border-color: #f59e0b !important;
  color: #f59e0b !important;
}

body.light-theme .all-parcels-toggle-pill-btn {
  background: #e0f2fe !important;
  border: 1px solid #7dd3fc !important;
  color: #0369a1 !important;
}

body.light-theme .all-parcels-toggle-pill-btn:hover {
  background: #bae6fd !important;
}

body.light-theme .all-parcels-toggle-pill-btn.is-collapsed {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
}

.all-parcels-chips-container::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.all-parcels-chips-container::-webkit-scrollbar-track {
  background: transparent;
}
.all-parcels-chips-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
}
body.light-theme .all-parcels-chips-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
}

.all-parcels-chip-btn {
  cursor: pointer !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  transition: all 0.2s !important;
}

body.light-theme .all-parcels-chip-btn {
  background: #f8fafc !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

body.light-theme .all-parcels-chip-btn:hover {
  background: #f1f5f9 !important;
}

.owner-map-modal-close-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  padding: 6px 18px !important;
  border-radius: 8px !important;
  font-size: 0.80rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  transition: all 0.2s !important;
}

.owner-map-modal-close-btn:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

body.light-theme .owner-map-modal-close-btn {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.light-theme .owner-map-modal-close-btn:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

/* --- Preview Single Parcel Modal Theming --- */
.preview-parcel-modal-card {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
}

body.light-theme .preview-parcel-modal-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.preview-parcel-modal-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

body.light-theme .preview-parcel-modal-header {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
  color: #0f172a !important;
}

.preview-parcel-modal-header h3 {
  color: #38bdf8 !important;
}

body.light-theme .preview-parcel-modal-header h3 {
  color: #0284c7 !important;
}

.preview-parcel-header-sub {
  color: #94a3b8 !important;
}

body.light-theme .preview-parcel-header-sub {
  color: #64748b !important;
}

.preview-parcel-modal-header .modal-close-btn {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.light-theme .preview-parcel-modal-header .modal-close-btn {
  background: rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #0f172a !important;
}

.preview-parcel-modal-footer {
  background: rgba(15, 23, 42, 0.95) !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
}

body.light-theme .preview-parcel-modal-footer {
  background: #ffffff !important;
  border-top: 1.5px solid #e2e8f0 !important;
  color: #475569 !important;
}

/* ==========================================================================
   OWNER PORTAL PARCELS TABLE - LUXURY DARK & LIGHT THEME
   ========================================================================== */
.owner-parcels-table-card {
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-top: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

body.light-theme .owner-parcels-table-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

.owner-parcels-table {
  width: 100% !important;
  min-width: 650px !important;
  border-collapse: collapse !important;
  font-size: 0.78rem !important;
}

.owner-parcels-table thead tr {
  background: #111c33 !important;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.1) !important;
}

body.light-theme .owner-parcels-table thead tr {
  background: #f8fafc !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}

.owner-parcels-table th {
  padding: 10px 12px !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
}

body.light-theme .owner-parcels-table th {
  color: #475569 !important;
}

.owner-parcels-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: background 0.15s ease !important;
}

.owner-parcels-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

body.light-theme .owner-parcels-table tbody tr {
  border-bottom: 1px solid #f1f5f9 !important;
}

body.light-theme .owner-parcels-table tbody tr:hover {
  background: #f8fafc !important;
}

.owner-parcels-table td {
  padding: 8px 12px !important;
  vertical-align: middle !important;
  color: inherit !important;
}

body.light-theme .owner-parcels-table td {
  color: #0f172a !important;
}

.owner-table-thumb-wrap {
  width: 90px !important;
  height: 52px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: #0b1329 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.owner-table-thumb-wrap:hover {
  transform: scale(1.05) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25) !important;
}

body.light-theme .owner-table-thumb-wrap {
  background: #0b1329 !important;
  border: 1px solid #cbd5e1 !important;
}

.owner-table-actions-row {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.owner-table-btn-view {
  padding: 5px 8px !important;
  border-radius: 6px !important;
  background: rgba(2, 132, 199, 0.15) !important;
  border: 1px solid rgba(2, 132, 199, 0.35) !important;
  color: #38bdf8 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  transition: all 0.2s !important;
}

body.light-theme .owner-table-btn-view {
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
  color: #0284c7 !important;
}

.owner-table-btn-view:hover {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

.owner-table-btn-edit {
  padding: 5px 8px !important;
  border-radius: 6px !important;
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  color: #fbbf24 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  transition: all 0.2s !important;
}

body.light-theme .owner-table-btn-edit {
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #d97706 !important;
}

.owner-table-btn-edit:hover {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
}

.owner-table-btn-submit {
  padding: 5px 8px !important;
  border-radius: 6px !important;
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  transition: all 0.2s !important;
}

body.light-theme .owner-table-btn-submit {
  background: #d1fae5 !important;
  border-color: #6ee7b7 !important;
  color: #059669 !important;
}

.owner-table-btn-submit:hover {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
}

.owner-table-btn-delete {
  padding: 5px 8px !important;
  border-radius: 6px !important;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  transition: all 0.2s !important;
}

body.light-theme .owner-table-btn-delete {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

.owner-table-btn-delete:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

/* Owner Map Frosted Glass Pill Buttons (Like AI Advisor Style) */
.owner-map-glass-pill-btn {
  background: rgba(15, 23, 42, 0.78) !important;
  backdrop-filter: blur(16px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(190%) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.45) !important;
  border-radius: 9999px !important;
  padding: 6px 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #ffffff !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 12px rgba(56, 189, 248, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  user-select: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.owner-map-glass-pill-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
}

.owner-map-glass-pill-btn.active {
  background: rgba(6, 78, 59, 0.85) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 14px rgba(52, 211, 153, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}

.owner-map-glass-pill-btn.inactive {
  background: rgba(30, 41, 59, 0.75) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  color: #94a3b8 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Leaflet Tooltip for Parcel Total Area (Compact Frosted Glass Card) */
.custom-parcel-map-tooltip {
  background: rgba(15, 23, 42, 0.90) !important;
  backdrop-filter: blur(14px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(190%) !important;
  border: 1.2px solid #10b981 !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  padding: 2px 7px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 10px rgba(16, 185, 129, 0.25) !important;
  text-align: center !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

.custom-parcel-map-tooltip::before,
.custom-parcel-map-tooltip::after {
  display: none !important;
}

/* Custom side length edge badges (Clear leaflet default divIcon styles) */
.custom-side-meter-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.custom-side-meter-icon .owner-parcel-side-meter-pill {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(15, 23, 42, 0.90) !important;
  backdrop-filter: blur(14px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(190%) !important;
  border: 1.3px solid #38bdf8 !important;
  color: #ffffff !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 10px rgba(56, 189, 248, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  line-height: 1.1 !important;
}

.owner-parcel-actions-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.light-theme .owner-parcel-actions-grid {
  border-top: 1px solid #f1f5f9 !important;
}

.owner-parcel-card-themed {
  background: #1e293b !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 6px !important;
  transition: all 0.22s ease !important;
}

.owner-parcel-card-themed:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
}

body.light-theme .owner-parcel-card-themed {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
  color: #0f172a !important;
}

body.light-theme .owner-parcel-card-themed:hover {
  transform: translateY(-2px) !important;
  border-color: #0284c7 !important;
  box-shadow: 0 8px 24px rgba(2, 132, 199, 0.12) !important;
}

.owner-parcel-title-themed {
  margin: 0 !important;
  font-size: 0.94rem !important;
  font-weight: 800 !important;
  color: #38bdf8 !important;
  line-height: 1.35 !important;
}

body.light-theme .owner-parcel-title-themed {
  color: #0284c7 !important;
}

.owner-parcel-vertex-badge {
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

body.light-theme .owner-parcel-vertex-badge {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
}

.owner-parcel-area-text {
  font-size: 1.2rem !important;
  font-weight: 900 !important;
  color: #10b981 !important;
}

body.light-theme .owner-parcel-area-text {
  color: #059669 !important;
}

.owner-parcel-sub-area {
  font-size: 0.76rem !important;
  color: #94a3b8 !important;
  font-weight: 700 !important;
}

body.light-theme .owner-parcel-sub-area {
  color: #64748b !important;
}

.owner-parcel-meta-text {
  font-size: 0.74rem !important;
  color: #94a3b8 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body.light-theme .owner-parcel-meta-text {
  color: #475569 !important;
}

.owner-parcel-notes-box {
  font-size: 0.74rem !important;
  color: #cbd5e1 !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  margin-top: 6px !important;
  line-height: 1.45 !important;
}

body.light-theme .owner-parcel-notes-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

.owner-parcel-date-text {
  font-size: 0.70rem !important;
  color: #64748b !important;
  margin-top: 6px !important;
}

body.light-theme .owner-parcel-date-text {
  color: #64748b !important;
}

.owner-parcel-footer-divider {
  display: flex !important;
  gap: 6px !important;
  margin-top: 8px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  flex-wrap: wrap !important;
}

body.light-theme .owner-parcel-footer-divider {
  border-top: 1px solid #f1f5f9 !important;
}

.owner-btn-view-parcel {
  flex: 1 !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  background: rgba(2, 132, 199, 0.18) !important;
  border: 1px solid rgba(2, 132, 199, 0.4) !important;
  color: #38bdf8 !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  transition: all 0.2s ease !important;
}

body.light-theme .owner-btn-view-parcel {
  background: #f0f9ff !important;
  border: 1.5px solid #bae6fd !important;
  color: #0284c7 !important;
}

body.light-theme .owner-btn-view-parcel:hover {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(2, 132, 199, 0.25) !important;
}

.owner-btn-edit-parcel {
  padding: 7px 10px !important;
  border-radius: 8px !important;
  background: rgba(245, 158, 11, 0.18) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: #fbbf24 !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  transition: all 0.2s ease !important;
}

body.light-theme .owner-btn-edit-parcel {
  background: #fefce8 !important;
  border: 1.5px solid #fde047 !important;
  color: #b45309 !important;
}

body.light-theme .owner-btn-edit-parcel:hover {
  background: #d97706 !important;
  border-color: #d97706 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(217, 119, 6, 0.25) !important;
}

.owner-btn-submit-parcel {
  padding: 7px 10px !important;
  border-radius: 8px !important;
  background: rgba(16, 185, 129, 0.18) !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  color: #34d399 !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  transition: all 0.2s ease !important;
}

body.light-theme .owner-btn-submit-parcel {
  background: #f0fdf4 !important;
  border: 1.5px solid #bbf7d0 !important;
  color: #15803d !important;
}

body.light-theme .owner-btn-submit-parcel:hover {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(22, 163, 74, 0.25) !important;
}

.owner-btn-delete-parcel {
  padding: 7px 11px !important;
  border-radius: 8px !important;
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #f87171 !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

body.light-theme .owner-btn-delete-parcel {
  background: #fef2f2 !important;
  border: 1.5px solid #fecaca !important;
  color: #dc2626 !important;
}

body.light-theme .owner-btn-delete-parcel:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(220, 38, 38, 0.25) !important;
}


.owner-hotline-box-themed {
  background: #111c33 !important;
  border: 1.5px dashed rgba(255, 255, 255, 0.18) !important;
  color: #f1f5f9 !important;
}

body.light-theme .owner-hotline-box-themed {
  background: #f8fafc !important;
  border: 1.5px dashed #cbd5e1 !important;
  color: #0f172a !important;
}

.owner-modal-footer-themed {
  background: #0b1329 !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.owner-modal-close-btn {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  padding: 9px 24px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.owner-modal-close-btn:hover,
.owner-modal-close-btn:active {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #38bdf8 !important;
  border-color: #38bdf8 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(56, 189, 248, 0.3) !important;
}

body.light-theme .owner-modal-footer-themed {
  background: #f8fafc !important;
  border-top: 1.5px solid #e2e8f0 !important;
}

body.light-theme .owner-modal-close-btn {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .owner-modal-close-btn:hover,
body.light-theme .owner-modal-close-btn:active {
  background: #f1f5f9 !important;
  color: #0284c7 !important;
  border-color: #0284c7 !important;
}

@media (max-width: 640px) {
  .owner-modal-footer-themed {
    justify-content: center !important;
  }
  .owner-modal-footer-themed .owner-modal-close-btn {
    width: 100% !important;
    padding: 10px 20px !important;
  }
}

/* Photo Slots Dark Theme Support */
.photo-slot-main,
.photo-slot-sub {
  background: #111c33 !important;
  border: 1.5px dashed rgba(255, 255, 255, 0.15) !important;
}

body.light-theme .photo-slot-main,
body.light-theme .photo-slot-sub {
  background: #f8fafc !important;
  border: 1.5px dashed #cbd5e1 !important;
}

.photo-placeholder-icon {
  background: rgba(2, 132, 199, 0.2) !important;
  color: #38bdf8 !important;
}

body.light-theme .photo-placeholder-icon {
  background: #e0f2fe !important;
  color: #0284c7 !important;
}

.dim-input-box input {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border: 1.5px solid #334155 !important;
}

body.light-theme .dim-input-box input {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
}

.dim-input-box #subTotalArea {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  border: 1.5px solid #f59e0b !important;
}

body.light-theme .dim-input-box #subTotalArea {
  background: #fffbe6 !important;
  color: #d97706 !important;
  border: 1.5px solid #f59e0b !important;
}

.notice-animated-card {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  color: #fef08a !important;
}

body.light-theme .notice-animated-card {
  background: #fffbe6 !important;
  border: 1px solid #fcd34d !important;
  color: #451a03 !important;
}

/* Dimension Group & Photo Container Zero-Bleed Dark Theme */
.dim-input-group,
.compact-submission-modal .dim-input-group,
.modal-card .dim-input-group {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.photo-management-container,
.compact-submission-modal .photo-management-container,
.modal-card .photo-management-container {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.photo-management-container label {
  color: #f1f5f9 !important;
  font-weight: 800 !important;
}

body.light-theme .photo-management-container label {
  color: #0f172a !important;
}

.compact-submission-modal input::placeholder,
.compact-submission-modal textarea::placeholder,
.dim-input-box input::placeholder {
  color: #64748b !important;
  opacity: 0.85 !important;
}

body.light-theme .compact-submission-modal input::placeholder,
body.light-theme .compact-submission-modal textarea::placeholder,
body.light-theme .dim-input-box input::placeholder {
  color: #94a3b8 !important;
  opacity: 0.9 !important;
}

/* Public Grid Empty State Card */
body.light-theme .public-empty-state-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1.5px dashed rgba(217, 119, 6, 0.4) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

body.light-theme .public-empty-state-card h3 {
  color: #0f172a !important;
  text-shadow: none !important;
}

body.light-theme .public-empty-state-card p {
  color: #475569 !important;
}

/* ==========================================================================
   GLOBAL BROWSER AUTOFILL DARK THEME OVERRIDE (CHROME, EDGE, SAFARI, BRAVE)
   ========================================================================== */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1e293b inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  font-weight: 700 !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

body.light-theme input:-webkit-autofill,
body.light-theme input:-webkit-autofill:hover, 
body.light-theme input:-webkit-autofill:focus, 
body.light-theme input:-webkit-autofill:active,
body.light-theme textarea:-webkit-autofill,
body.light-theme select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #0f172a !important;
}

/* ==========================================================================
   AGENT MY LISTINGS MODAL LUXURY THEME
   ========================================================================== */
.agent-my-listings-modal-card {
  background: #0f172a !important;
  color: #f1f5f9 !important;
  border: 2px solid #0284c7 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(2, 132, 199, 0.2) !important;
}

body.light-theme .agent-my-listings-modal-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 2px solid #0284c7 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45) !important;
}

.agent-my-listings-body {
  background: #0b1120 !important;
  color: #f1f5f9 !important;
}

body.light-theme .agent-my-listings-body {
  background: #f8fafc !important;
  color: #0f172a !important;
}

/* KPI Cards */
.agent-kpi-card-total {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.45) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
}

.agent-kpi-card-total .agent-kpi-val {
  color: #34d399 !important;
}

.agent-kpi-card-total .agent-kpi-lbl {
  color: #6ee7b7 !important;
}

body.light-theme .agent-kpi-card-total {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;
  border: 1.5px solid #86efac !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
}

body.light-theme .agent-kpi-card-total .agent-kpi-val {
  color: #065f46 !important;
}

body.light-theme .agent-kpi-card-total .agent-kpi-lbl {
  color: #059669 !important;
}

.agent-kpi-card-intent {
  background: linear-gradient(135deg, rgba(12, 74, 110, 0.45) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
  border: 1.5px solid rgba(2, 132, 199, 0.35) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
}

.agent-kpi-card-intent .agent-kpi-lbl {
  color: #7dd3fc !important;
}

body.light-theme .agent-kpi-card-intent {
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%) !important;
  border: 1.5px solid #7dd3fc !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
}

body.light-theme .agent-kpi-card-intent .agent-kpi-lbl {
  color: #0284c7 !important;
}

.agent-kpi-card-type {
  background: linear-gradient(135deg, rgba(59, 7, 100, 0.45) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.35) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
}

.agent-kpi-card-type .agent-kpi-lbl {
  color: #d8b4fe !important;
}

body.light-theme .agent-kpi-card-type {
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%) !important;
  border: 1.5px solid #d8b4fe !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
}

body.light-theme .agent-kpi-card-type .agent-kpi-lbl {
  color: #7c3aed !important;
}

.agent-kpi-card-value {
  background: linear-gradient(135deg, rgba(69, 26, 3, 0.45) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
}

.agent-kpi-card-value .agent-kpi-lbl {
  color: #fcd34d !important;
}

body.light-theme .agent-kpi-card-value {
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%) !important;
  border: 1.5px solid #fde68a !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
}

body.light-theme .agent-kpi-card-value .agent-kpi-lbl {
  color: #d97706 !important;
}

/* Toolbar, Inputs & Filter Drawer */
.agent-my-listings-toolbar {
  background: #111c33 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  color: #f1f5f9 !important;
}

body.light-theme .agent-my-listings-toolbar {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
  color: #0f172a !important;
}

.agent-listings-search-input {
  background: #1e293b !important;
  border: 1.5px solid #334155 !important;
  color: #f1f5f9 !important;
  padding-left: 36px !important;
  padding-right: 12px !important;
}

.agent-listings-search-input::placeholder {
  color: #64748b !important;
}

body.light-theme .agent-listings-search-input {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  padding-left: 36px !important;
  padding-right: 12px !important;
}

body.light-theme .agent-listings-search-input::placeholder {
  color: #94a3b8 !important;
}

.agent-btn-reset-icon {
  background: #1e293b !important;
  color: #94a3b8 !important;
  border: 1.5px solid #334155 !important;
}

body.light-theme .agent-btn-reset-icon {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1.5px solid #cbd5e1 !important;
}

.agent-view-mode-tabs {
  background: #1e293b !important;
}

.agent-view-mode-tabs button {
  color: #94a3b8 !important;
  background: transparent !important;
}

.agent-view-mode-tabs button.active,
.agent-view-mode-tabs button#btnAgentViewCards[style*="rgb(15, 23, 42)"],
.agent-view-mode-tabs button#btnAgentViewTable[style*="rgb(15, 23, 42)"] {
  background: #0284c7 !important;
  color: #ffffff !important;
}

body.light-theme .agent-view-mode-tabs {
  background: #e2e8f0 !important;
}

body.light-theme .agent-view-mode-tabs button {
  color: #475569 !important;
}

body.light-theme .agent-view-mode-tabs button.active {
  background: #0f172a !important;
  color: #ffffff !important;
}

.agent-advanced-filter-drawer {
  border-top: 1.5px dashed rgba(255, 255, 255, 0.15) !important;
}

body.light-theme .agent-advanced-filter-drawer {
  border-top: 1.5px dashed #cbd5e1 !important;
}

.agent-loc-filter-box {
  background: rgba(2, 132, 199, 0.12) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  color: #7dd3fc !important;
}

body.light-theme .agent-loc-filter-box {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  color: #0369a1 !important;
}

.agent-filter-select {
  background: #1e293b !important;
  border: 1.5px solid #334155 !important;
  color: #f1f5f9 !important;
}

body.light-theme .agent-filter-select {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

.agent-pill-row-wrap {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.light-theme .agent-pill-row-wrap {
  border-top: 1px solid #f1f5f9 !important;
}

.agent-filter-pill-btn {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border: 1px solid #334155 !important;
}

.agent-filter-pill-btn.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0284c7 !important;
}

body.light-theme .agent-filter-pill-btn {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

body.light-theme .agent-filter-pill-btn.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0284c7 !important;
}

.agent-count-badge {
  background: rgba(2, 132, 199, 0.2) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
}

body.light-theme .agent-count-badge {
  background: #e0f2fe !important;
  color: #0284c7 !important;
  border: 1px solid #bae6fd !important;
}

/* Empty State */
.agent-my-listings-empty {
  background: #111c33 !important;
  border: 1.5px dashed rgba(255, 255, 255, 0.18) !important;
  color: #f1f5f9 !important;
}

.agent-empty-title {
  color: #ffffff !important;
}

.agent-btn-reset-filter {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #f1f5f9 !important;
}

body.light-theme .agent-my-listings-empty {
  background: #ffffff !important;
  border: 1.5px dashed #cbd5e1 !important;
  color: #0f172a !important;
}

body.light-theme .agent-empty-title {
  color: #334155 !important;
}

body.light-theme .agent-btn-reset-filter {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

/* Property Cards */
.agent-manage-card-themed {
  background: #111c33 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  color: #f1f5f9 !important;
}

.agent-manage-card-title {
  color: #ffffff !important;
}

.agent-manage-status-select {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
  color: #f1f5f9 !important;
}

body.light-theme .agent-manage-card-themed {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  color: #0f172a !important;
}

body.light-theme .agent-manage-card-title {
  color: #0f172a !important;
}

body.light-theme .agent-manage-status-select {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

/* Table View */
.agent-manage-table-wrap {
  background: #111c33 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
}

.agent-manage-table-row {
  border-bottom: 1px solid #1e293b !important;
  background: #111c33 !important;
  color: #f1f5f9 !important;
}

.agent-manage-table-row:nth-child(even) {
  background: #0b1120 !important;
}

body.light-theme .agent-manage-table-wrap {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
}

body.light-theme .agent-manage-table-row {
  border-bottom: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

body.light-theme .agent-manage-table-row:nth-child(even) {
  background: #f8fafc !important;
}

/* Footer */
.agent-my-listings-footer {
  background: #0f172a !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f1f5f9 !important;
}

.agent-btn-footer-close {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #f1f5f9 !important;
}

body.light-theme .agent-my-listings-footer {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

body.light-theme .agent-btn-footer-close {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}

/* ==========================================================================
   BACKUP & RESTORE MODAL LUXURY THEME
   ========================================================================== */
.backup-restore-modal-card {
  background: #0f172a !important;
  color: #f1f5f9 !important;
  border: 2px solid #0284c7 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(2, 132, 199, 0.2) !important;
}

body.light-theme .backup-restore-modal-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 2px solid #0284c7 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45) !important;
}

.backup-restore-body {
  background: #0b1120 !important;
  color: #f1f5f9 !important;
}

body.light-theme .backup-restore-body {
  background: #ffffff !important;
  color: #0f172a !important;
}

.backup-summary-box {
  background: #111c33 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
}

body.light-theme .backup-summary-box {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
}

.backup-stat-card {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #f1f5f9 !important;
}

body.light-theme .backup-stat-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

.backup-action-card-export {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.4) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
}

.backup-card-title-green {
  color: #34d399 !important;
}

body.light-theme .backup-action-card-export {
  background: #ecfdf5 !important;
  border: 1.5px solid #10b981 !important;
}

body.light-theme .backup-card-title-green {
  color: #065f46 !important;
}

.backup-action-card-import {
  background: linear-gradient(135deg, rgba(12, 74, 110, 0.4) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
  border: 1.5px solid rgba(2, 132, 199, 0.35) !important;
}

.backup-card-title-blue {
  color: #38bdf8 !important;
}

body.light-theme .backup-action-card-import {
  background: #f0f9ff !important;
  border: 1.5px solid #0284c7 !important;
}

body.light-theme .backup-card-title-blue {
  color: #075985 !important;
}

.backup-action-card-cloud {
  background: linear-gradient(135deg, rgba(59, 7, 100, 0.4) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.35) !important;
}

.backup-card-title-purple {
  color: #c084fc !important;
}

body.light-theme .backup-action-card-cloud {
  background: #faf5ff !important;
  border: 1.5px solid #a855f7 !important;
}

body.light-theme .backup-card-title-purple {
  color: #581c87 !important;
}

/* ==========================================================================
   RESEARCH LEADS / OCR DATABASE MODAL LUXURY THEME
   ========================================================================== */
.research-leads-modal-card {
  background: #0f172a !important;
  color: #f1f5f9 !important;
  border: 2px solid #0284c7 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 30px rgba(2, 132, 199, 0.25) !important;
}

body.light-theme .research-leads-modal-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 2px solid #0284c7 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45) !important;
}

.research-leads-body {
  background: #0b1120 !important;
  color: #f1f5f9 !important;
}

body.light-theme .research-leads-body {
  background: #f8fafc !important;
  color: #0f172a !important;
}

/* KPI Cards */
.research-kpi-card-total {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.4) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
  border: 1.5px solid rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

.research-kpi-card-total .research-kpi-val {
  color: #34d399 !important;
}

.research-kpi-card-total .research-kpi-lbl {
  color: #a7f3d0 !important;
}

body.light-theme .research-kpi-card-total {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;
  border: 1.5px solid #86efac !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
}

body.light-theme .research-kpi-card-total .research-kpi-val {
  color: #065f46 !important;
}

body.light-theme .research-kpi-card-total .research-kpi-lbl {
  color: #059669 !important;
}

.research-kpi-card-type {
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.35) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.4) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

.research-kpi-card-type .research-kpi-lbl {
  color: #d8b4fe !important;
}

body.light-theme .research-kpi-card-type {
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%) !important;
  border: 1.5px solid #d8b4fe !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
}

body.light-theme .research-kpi-card-type .research-kpi-lbl {
  color: #7c3aed !important;
}

.research-kpi-card-intent {
  background: linear-gradient(135deg, rgba(12, 74, 110, 0.4) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
  border: 1.5px solid rgba(2, 132, 199, 0.4) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

.research-kpi-card-intent .research-kpi-lbl {
  color: #7dd3fc !important;
}

body.light-theme .research-kpi-card-intent {
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%) !important;
  border: 1.5px solid #7dd3fc !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
}

body.light-theme .research-kpi-card-intent .research-kpi-lbl {
  color: #0284c7 !important;
}

.research-kpi-card-status {
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.35) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.4) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}

.research-kpi-card-status .research-kpi-lbl {
  color: #fde68a !important;
}

body.light-theme .research-kpi-card-status {
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%) !important;
  border: 1.5px solid #fde68a !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
}

body.light-theme .research-kpi-card-status .research-kpi-lbl {
  color: #d97706 !important;
}

/* Tabs Segment */
.research-tabs-segment {
  background: #111c33 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
}

.research-tab-pill {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.research-tab-pill.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0284c7 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4) !important;
}

.research-tab-badge {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #f1f5f9 !important;
}

body.light-theme .research-tabs-segment {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
}

body.light-theme .research-tab-pill {
  background: transparent !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

body.light-theme .research-tab-pill.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: none !important;
}

body.light-theme .research-tab-badge {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Filter Toolbar */
.research-filter-toolbar {
  background: #111c33 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.research-search-input {
  background: #1e293b !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  color: #f1f5f9 !important;
}

.research-search-input::placeholder {
  color: #64748b !important;
}

.research-btn-reset-icon {
  background: #1e293b !important;
  color: #94a3b8 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
}

.research-advanced-filter-drawer {
  border-top: 1.5px dashed rgba(255, 255, 255, 0.15) !important;
}

.research-loc-filter-box {
  background: rgba(2, 132, 199, 0.12) !important;
  border: 1px solid rgba(2, 132, 199, 0.35) !important;
  color: #38bdf8 !important;
}

.research-filter-select {
  background: #1e293b !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  color: #f1f5f9 !important;
}

.research-filter-select option {
  background: #0f172a !important;
  color: #f1f5f9 !important;
}

.research-pill-row-wrap {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.research-quick-pill {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.research-quick-pill.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0284c7 !important;
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.4) !important;
}

.research-count-badge {
  background: rgba(2, 132, 199, 0.18) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(2, 132, 199, 0.4) !important;
}

/* Light Theme overrides for filters */
body.light-theme .research-filter-toolbar {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
}

body.light-theme .research-search-input {
  background: #f8fafc !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.light-theme .research-btn-reset-icon {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1.5px solid #cbd5e1 !important;
}

body.light-theme .research-advanced-filter-drawer {
  border-top: 1.5px dashed #cbd5e1 !important;
}

body.light-theme .research-loc-filter-box {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  color: #0369a1 !important;
}

body.light-theme .research-filter-select {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.light-theme .research-filter-select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

body.light-theme .research-pill-row-wrap {
  border-top: 1px solid #f1f5f9 !important;
}

body.light-theme .research-quick-pill {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

body.light-theme .research-quick-pill.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border: 1px solid #0284c7 !important;
}

body.light-theme .research-count-badge {
  background: #e0f2fe !important;
  color: #0284c7 !important;
  border: 1px solid #bae6fd !important;
}

/* Empty State */
.research-leads-empty-state {
  color: #94a3b8 !important;
}

.research-leads-empty-state h4 {
  color: #f1f5f9 !important;
}

body.light-theme .research-leads-empty-state {
  color: #64748b !important;
}

body.light-theme .research-leads-empty-state h4 {
  color: #334155 !important;
}

/* Research Lead Cards & 2-Column Grid */
.public-research-grid-container {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  .public-research-grid-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
}

.research-lead-card-themed {
  background: #111c33 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.research-lead-title {
  color: #f1f5f9 !important;
}

.research-agent-badge {
  background: #1e293b !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.research-lead-loc-row {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
}

.research-btn-cobroke {
  background: #1e293b !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(2, 132, 199, 0.3) !important;
}

body.light-theme .research-lead-card-themed {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05) !important;
}

body.light-theme .research-lead-title {
  color: #0f172a !important;
}

body.light-theme .research-agent-badge {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

body.light-theme .research-lead-loc-row {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

body.light-theme .research-btn-cobroke {
  background: #f1f5f9 !important;
  color: #0369a1 !important;
  border: 1px solid #cbd5e1 !important;
}

/* ==========================================================================
   ENRICH RESEARCH LEAD MODAL LUXURY THEME
   ========================================================================== */
.enrich-modal-card {
  background: #0f172a !important;
  color: #f1f5f9 !important;
  border: 2px solid #059669 !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.85), 0 0 30px rgba(16, 185, 129, 0.25) !important;
}

body.light-theme .enrich-modal-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 2px solid #059669 !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45) !important;
}

.enrich-focus-toolbar {
  background: #091322 !important;
  border-bottom: 1.5px solid rgba(16, 185, 129, 0.3) !important;
}

.enrich-focus-switcher {
  background: #1e293b !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
}

body.light-theme .enrich-focus-toolbar {
  background: #f0fdf4 !important;
  border-bottom: 1.5px solid #86efac !important;
}

body.light-theme .enrich-focus-switcher {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
}

.enrich-form-body {
  background: #0b1120 !important;
}

body.light-theme .enrich-form-body {
  background: #f8fafc !important;
}

.enrich-group-card {
  background: #111c33 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
}

body.light-theme .enrich-group-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.03) !important;
}

.enrich-label {
  color: #cbd5e1 !important;
}

body.light-theme .enrich-label {
  color: #334155 !important;
}

.enrich-input {
  background: #1e293b !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  color: #f1f5f9 !important;
}

.enrich-input::placeholder {
  color: #64748b !important;
}

body.light-theme .enrich-input {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

.enrich-select {
  background: #1e293b !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  color: #f1f5f9 !important;
}

.enrich-select option {
  background: #0f172a !important;
  color: #f1f5f9 !important;
}

body.light-theme .enrich-select {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
}

body.light-theme .enrich-select option {
  background: #ffffff !important;
  color: #0f172a !important;
}

.enrich-intent-toggle-wrap {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.light-theme .enrich-intent-toggle-wrap {
  background: #f1f5f9 !important;
  border: none !important;
}

.enrich-phone-wrapper {
  background: rgba(16, 185, 129, 0.08) !important;
}

body.light-theme .enrich-phone-wrapper {
  background: #ffffff !important;
}

.enrich-phone-row-box {
  background: #1e293b !important;
}

.enrich-phone-label-badge {
  background: #111c33 !important;
  color: #38bdf8 !important;
}

body.light-theme .enrich-phone-row-box {
  background: #ffffff !important;
}

body.light-theme .enrich-phone-label-badge {
  background: #f1f5f9 !important;
  color: #0369a1 !important;
}

.enrich-gps-bar {
  background: rgba(2, 132, 199, 0.12) !important;
  border: 1px solid rgba(2, 132, 199, 0.3) !important;
}

body.light-theme .enrich-gps-bar {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
}

.enrich-btn-cancel {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body.light-theme .enrich-btn-cancel {
  background: #e2e8f0 !important;
  color: #334155 !important;
  border: none !important;
}

/* ==========================================================================
   APPSHEET MULTI-SHEET INTEGRATION HUB LUXURY THEME
   ========================================================================== */
.appsheet-subnav-bar {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.appsheet-subnav-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.appsheet-subnav-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #f1f5f9 !important;
}

.appsheet-subnav-btn.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border-color: #34d399 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

.appsheet-dropzone-card {
  background: #0f172a !important;
  border-color: #10b981 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}

.appsheet-dropzone-card h3 {
  color: #f1f5f9 !important;
}

.appsheet-loaded-section,
.appsheet-grid-container,
.appsheet-livesync-card {
  background: #0f172a !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f1f5f9 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}

/* Light Theme Overrides for AppSheet Hub */
body.light-theme .appsheet-subnav-bar {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
}

body.light-theme .appsheet-subnav-btn {
  background: #ffffff !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

body.light-theme .appsheet-subnav-btn:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
}

body.light-theme .appsheet-subnav-btn.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border-color: #047857 !important;
}

body.light-theme .appsheet-dropzone-card {
  background: #ffffff !important;
  border-color: #10b981 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
}

body.light-theme .appsheet-dropzone-card h3 {
  color: #0f172a !important;
}

body.light-theme .appsheet-loaded-section,
body.light-theme .appsheet-grid-container,
body.light-theme .appsheet-livesync-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
}

/* ==========================================================================
   UNIFIED MAP DYNAMIC PIN SCALING (EXPANDS ON ZOOM IN, SCALES ON ZOOM OUT)
   ========================================================================== */
.custom-map-smart-icon-pin > div,
.custom-map-smart-ocr-pin > div {
  transform: scale(var(--unified-map-pin-scale, 1)) !important;
  transform-origin: 50% 100% !important;
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.25, 1) !important;
  will-change: transform;
}

/* Close-up view: Prominent luxury pins */
#unifiedMapContainer.map-zoom-detailed .custom-map-smart-icon-pin > div,
#unifiedMapContainer.map-zoom-detailed .custom-map-smart-ocr-pin > div {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.55)) !important;
}

/* Mid zoom: Soft neat shadow */
#unifiedMapContainer.map-zoom-mid .custom-map-smart-icon-pin > div,
#unifiedMapContainer.map-zoom-mid .custom-map-smart-ocr-pin > div {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)) !important;
}

/* Far / Province zoom: Ultra-clean micro needle styling */
#unifiedMapContainer.map-zoom-far .custom-map-smart-icon-pin > div,
#unifiedMapContainer.map-zoom-far .custom-map-smart-ocr-pin > div {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)) !important;
}
#unifiedMapContainer.map-zoom-far .custom-map-smart-icon-pin i,
#unifiedMapContainer.map-zoom-far .custom-map-smart-ocr-pin i {
  display: none !important;
}

/* Custom Luxury Real Estate Cluster Badges */
.custom-luxury-map-cluster {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  cursor: pointer !important;
}
.custom-luxury-map-cluster:hover {
  transform: scale(1.18) !important;
  z-index: 10000 !important;
}
.custom-luxury-map-cluster div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* ==========================================================================
   GLOWING ADMINISTRATIVE BOUNDARY POLYGON STYLING (GOOGLE MAPS RED DASHED)
   ========================================================================== */
.glowing-location-boundary-polygon {
  filter: drop-shadow(0 0 6px rgba(220, 38, 38, 0.6)) !important;
  stroke-dasharray: 6 6 !important;
  animation: boundaryDashFlow 25s linear infinite !important;
  transition: all 0.3s ease !important;
}

@keyframes boundaryDashFlow {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 200;
  }
}

.luxury-boundary-tooltip {
  background: #0f172a !important;
  color: #ef4444 !important;
  border: 1.5px solid #dc2626 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
  padding: 4px 8px !important;
}
.luxury-boundary-tooltip::before {
  border-top-color: #dc2626 !important;
}

/* ==========================================================================
   Modern Real Estate Map Cluster Badges
   ========================================================================== */
.custom-modern-cluster-wrapper {
  background: transparent !important;
  border: none !important;
}

.modern-map-cluster-bubble {
  position: relative;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: clusterBubbleFloat 3s infinite ease-in-out;
}

.modern-map-cluster-bubble:hover {
  transform: scale(1.22) !important;
  z-index: 99999 !important;
}

.modern-map-cluster-bubble.cluster-large {
  animation: clusterBubbleFloat 2.4s infinite ease-in-out, clusterNeonPulse 2s infinite ease-in-out;
}

@keyframes clusterBubbleFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.04);
  }
}

@keyframes clusterNeonPulse {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(236, 72, 153, 0.7), 0 0 0 3px rgba(244, 114, 182, 0.4), inset 0 1px 2px rgba(255,255,255,0.6);
  }
}

/* 1-Click GPS Pulse Effect */
@keyframes gpsPulseEffect {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7), 0 2px 8px rgba(5, 150, 105, 0.35);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0), 0 4px 12px rgba(5, 150, 105, 0.5);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0), 0 2px 8px rgba(5, 150, 105, 0.35);
  }
}

.btn-gps-pulse {
  animation: gpsPulseEffect 2.2s infinite ease-in-out !important;
}

.custom-sub-map-pin {
  background: transparent !important;
  border: none !important;
}

/* ==========================================================================
   PUBLIC SHOWCASE PROPERTY DETAIL VIEW & PAGINATION - DYNAMIC THEMES
   ========================================================================== */

/* 1. DARK MODE (Default in Public Web) */
body:not(.light-theme) .showcase-header-nav a.back-to-dashboard {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body:not(.light-theme) .showcase-title-block {
  background: linear-gradient(180deg, #151c2c 0%, #0f172a 100%) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-top: 3.5px solid var(--accent-gold) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body:not(.light-theme) .showcase-title {
  color: #ffffff !important;
}

body:not(.light-theme) .showcase-location {
  color: #94a3b8 !important;
}

body:not(.light-theme) .feature-matrix {
  background: linear-gradient(135deg, #151c2c 0%, #0f172a 100%) !important;
  border: 1.2px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body:not(.light-theme) .feature-box {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body:not(.light-theme) .feature-box .label {
  color: #94a3b8 !important;
}

body:not(.light-theme) .feature-box .val {
  color: #ffffff !important;
}

body:not(.light-theme) .showcase-card {
  background: #151c2c !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  color: #f8fafc !important;
}

body:not(.light-theme) .showcase-card h3 {
  color: #ffffff !important;
}

body:not(.light-theme) .description-text {
  color: #cbd5e1 !important;
}

body:not(.light-theme) .calc-row-header {
  color: #cbd5e1 !important;
}

body:not(.light-theme) .calc-row-header span {
  color: #cbd5e1 !important;
}

body:not(.light-theme) .calc-result-box {
  background: #0f172a !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #ffffff !important;
}

body:not(.light-theme) .agent-sticky-card {
  background: #151c2c !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body:not(.light-theme) .agent-info h4 {
  color: #ffffff !important;
}

body:not(.light-theme) .agent-info p {
  color: #94a3b8 !important;
}

body:not(.light-theme) .btn-view-agent-profile {
  background: #1e293b !important;
  color: #fbbf24 !important;
  border: 1.5px solid rgba(245, 158, 11, 0.4) !important;
}

body:not(.light-theme) .btn-call-secondary {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1.5px solid rgba(16, 185, 129, 0.4) !important;
}

/* Hide QR Code Scan Box in Standalone App and on Mobile / Tablet */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui), (max-width: 992px) {
  .qr-scan-badge-box {
    display: none !important;
  }
}

html.is-pwa-app .qr-scan-badge-box,
body.is-pwa-app .qr-scan-badge-box,
body.is-app .qr-scan-badge-box,
.is-standalone .qr-scan-badge-box {
  display: none !important;
}

body:not(.light-theme) .qr-scan-badge-box,
body.dark-theme .qr-scan-badge-box {
  background: #1e293b !important;
  border: 1.8px dashed rgba(245, 158, 11, 0.65) !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

body:not(.light-theme) .qr-scan-badge-box .qr-scan-badge-label,
body:not(.light-theme) .qr-scan-badge-box .qr-scan-text,
body:not(.light-theme) .qr-scan-badge-box span,
body.dark-theme .qr-scan-badge-box .qr-scan-badge-label,
body.dark-theme .qr-scan-badge-box .qr-scan-text,
body.dark-theme .qr-scan-badge-box span {
  color: #f8fafc !important;
  font-weight: 800 !important;
}

body:not(.light-theme) .qr-scan-badge-box i,
body.dark-theme .qr-scan-badge-box i {
  color: #fbbf24 !important;
}

body:not(.light-theme) .qr-scan-badge-box img,
body.dark-theme .qr-scan-badge-box img {
  background: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

body:not(.light-theme) .amenity-chip {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e2e8f0 !important;
}

body:not(.light-theme) .luxury-pagination-bar {
  background: rgba(21, 28, 44, 0.95) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  color: #f8fafc !important;
}

body:not(.light-theme) .luxury-pagination-bar .pagination-info {
  color: #cbd5e1 !important;
}

body:not(.light-theme) .luxury-pagination-bar .pagination-info strong.info-total {
  color: #ffffff !important;
}

body:not(.light-theme) .luxury-pagination-bar .pagination-nav-btn {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
}

body:not(.light-theme) .luxury-pagination-bar .pagination-nav-btn:disabled {
  background: rgba(30, 41, 59, 0.5) !important;
  color: #64748b !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

body:not(.light-theme) .luxury-pagination-bar .pagination-pill-btn:not(.active) {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
}

.luxury-pagination-bar .pagination-pill-btn.active,
.luxury-pagination-bar button.active {
  background: linear-gradient(135deg, #0284c7, #0369a1) !important;
  color: #ffffff !important;
  border: 1.5px solid #0284c7 !important;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.45) !important;
  font-weight: 900 !important;
  transform: scale(1.06);
}

body:not(.light-theme) .luxury-pagination-bar .pagination-select {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
}

/* 2. LIGHT MODE (When body has .light-theme) */
body.light-theme .showcase-header-nav a.back-to-dashboard {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

body.light-theme .showcase-title-block {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-left: 1px solid #e2e8f0 !important;
  border-right: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-top: 3.5px solid var(--accent-gold) !important;
}

body.light-theme .showcase-title {
  color: #0f172a !important;
}

body.light-theme .showcase-location {
  color: #475569 !important;
}

body.light-theme .feature-matrix {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1.2px solid rgba(245, 158, 11, 0.3) !important;
}

body.light-theme .feature-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

body.light-theme .feature-box .label {
  color: #475569 !important;
}

body.light-theme .feature-box .val {
  color: #0f172a !important;
}

body.light-theme .showcase-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

body.light-theme .showcase-card h3 {
  color: #0f172a !important;
}

body.light-theme .description-text {
  color: #334155 !important;
}

body.light-theme .calc-row-header {
  color: #334155 !important;
}

body.light-theme .calc-row-header span {
  color: #334155 !important;
}

body.light-theme .agent-sticky-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

body.light-theme .agent-info h4 {
  color: #0f172a !important;
}

body.light-theme .agent-info p {
  color: #64748b !important;
}

body.light-theme .btn-view-agent-profile {
  background: linear-gradient(135deg, #ffffff 0%, #fffbe6 100%) !important;
  color: var(--primary-900) !important;
  border: 1.8px solid var(--accent-gold) !important;
}

body.light-theme .amenity-chip {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

body.light-theme .luxury-pagination-bar,
body:not(.dark-theme) .luxury-pagination-bar {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  color: #334155 !important;
}

body.light-theme .luxury-pagination-bar .pagination-info,
body:not(.dark-theme) .luxury-pagination-bar .pagination-info {
  color: #475569 !important;
}

body.light-theme .luxury-pagination-bar .pagination-info strong.info-total,
body:not(.dark-theme) .luxury-pagination-bar .pagination-info strong.info-total {
  color: #0f172a !important;
}

body.light-theme .luxury-pagination-bar .pagination-nav-btn,
body:not(.dark-theme) .luxury-pagination-bar .pagination-nav-btn {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

body.light-theme .luxury-pagination-bar .pagination-pill-btn:not(.active),
body:not(.dark-theme) .luxury-pagination-bar .pagination-pill-btn:not(.active) {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

body.light-theme .luxury-pagination-bar .pagination-select,
body:not(.dark-theme) .luxury-pagination-bar .pagination-select {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
}

/* ==========================================================================
   SMART CONTACTS & PORTFOLIO HUB MODAL - DYNAMIC THEMES (DARK & LIGHT)
   ========================================================================== */

/* 1. DARK MODE (Default in Public Web) */
body:not(.light-theme) .smart-contacts-modal-card {
  background: #0f172a !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7) !important;
  color: #f8fafc !important;
}

body:not(.light-theme) .smart-contacts-modal-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #ffffff !important;
  border-bottom: 2px solid #0284c7 !important;
}

body:not(.light-theme) .smart-contacts-modal-header.portfolio-detail {
  border-bottom-color: #f59e0b !important;
}

body:not(.light-theme) .smart-contacts-modal-header-title {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

body:not(.light-theme) .smart-contacts-modal-header-sub {
  color: #38bdf8 !important;
}

body:not(.light-theme) .smart-contacts-modal-close-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

body:not(.light-theme) .smart-contacts-modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.8) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

body:not(.light-theme) .smart-contacts-modal-body {
  background: #0b0f19 !important;
}

body:not(.light-theme) .smart-contacts-kpi-card {
  background: #151c2c !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

body:not(.light-theme) .smart-contacts-filter-box {
  background: #151c2c !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

body:not(.light-theme) .smart-contacts-search-input {
  background: #1e293b !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

body:not(.light-theme) .btn-pub-contact-filter:not(.active) {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body:not(.light-theme) .smart-contacts-item-card {
  background: #151c2c !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  color: #f8fafc !important;
}

body:not(.light-theme) .smart-contacts-item-card.is-vip {
  border-color: rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.15) !important;
}

body:not(.light-theme) .smart-contacts-item-name {
  color: #ffffff !important;
}

body:not(.light-theme) .smart-contacts-item-loc {
  color: #94a3b8 !important;
}

body:not(.light-theme) .smart-contacts-phone-box {
  background: #1e293b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body:not(.light-theme) .smart-contacts-quick-action-box {
  background: #151c2c !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

body:not(.light-theme) .smart-contacts-prop-card {
  background: #151c2c !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  color: #f8fafc !important;
}

body:not(.light-theme) .smart-contacts-prop-title {
  color: #ffffff !important;
}

body:not(.light-theme) .smart-contacts-modal-footer {
  background: #0f172a !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body:not(.light-theme) .smart-contacts-close-btn {
  background: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* 2. LIGHT MODE (When body.light-theme is present) */
body.light-theme .smart-contacts-modal-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2) !important;
  color: #0f172a !important;
}

body.light-theme .smart-contacts-modal-header {
  background: #ffffff !important;
  color: #0f172a !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}

body.light-theme .smart-contacts-modal-header.portfolio-detail {
  border-bottom: 2px solid #f59e0b !important;
}

body.light-theme .smart-contacts-modal-header-title {
  color: #0f172a !important;
  text-shadow: none !important;
}

body.light-theme .smart-contacts-modal-header-sub {
  color: #0284c7 !important;
}

body.light-theme .smart-contacts-modal-close-btn {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #475569 !important;
}

body.light-theme .smart-contacts-modal-close-btn:hover {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #ef4444 !important;
}

body.light-theme .smart-contacts-modal-body {
  background: #f8fafc !important;
}

body.light-theme .smart-contacts-kpi-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}

body.light-theme .smart-contacts-filter-box {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02) !important;
}

body.light-theme .smart-contacts-search-input {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
}

body.light-theme .btn-pub-contact-filter:not(.active) {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1.5px solid #cbd5e1 !important;
}

body.light-theme .smart-contacts-item-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02) !important;
}

body.light-theme .smart-contacts-item-card.is-vip {
  border-color: #f59e0b !important;
  box-shadow: 0 4px 12px rgba(245,158,11,0.1) !important;
}

body.light-theme .smart-contacts-item-name {
  color: #0f172a !important;
}

body.light-theme .smart-contacts-item-loc {
  color: #64748b !important;
}

body.light-theme .smart-contacts-phone-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

body.light-theme .smart-contacts-quick-action-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

body.light-theme .smart-contacts-prop-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02) !important;
}

body.light-theme .smart-contacts-prop-title {
  color: #0f172a !important;
}

body.light-theme .smart-contacts-modal-footer {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
}

body.light-theme .smart-contacts-close-btn {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1.5px solid #cbd5e1 !important;
}

/* ==========================================================================
   LEAFLET FULLSCREEN UNIFIED MAP - LUXURY DARK & LIGHT THEME ENGINE
   ========================================================================== */

/* 1. Dark Mode Leaflet UI Controls */
body:not(.light-theme) .leaflet-control-zoom a,
body.dark-theme .leaflet-control-zoom a {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body:not(.light-theme) .leaflet-control-zoom a:hover,
body.dark-theme .leaflet-control-zoom a:hover {
  background: #334155 !important;
  color: #38bdf8 !important;
}

body:not(.light-theme) .leaflet-control-attribution,
body.dark-theme .leaflet-control-attribution {
  background: rgba(15, 23, 42, 0.85) !important;
  color: #94a3b8 !important;
  backdrop-filter: blur(4px);
}

body:not(.light-theme) .leaflet-control-attribution a,
body.dark-theme .leaflet-control-attribution a {
  color: #38bdf8 !important;
}

body:not(.light-theme) .leaflet-popup-content-wrapper,
body.dark-theme .leaflet-popup-content-wrapper {
  background: #151c2c !important;
  color: #f8fafc !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
  border-radius: 12px !important;
}

body:not(.light-theme) .leaflet-popup-tip,
body.dark-theme .leaflet-popup-tip {
  background: #151c2c !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body:not(.light-theme) .leaflet-popup-content,
body.dark-theme .leaflet-popup-content {
  color: #f8fafc !important;
}

/* 2. Light Mode Leaflet UI Controls */
body.light-theme .leaflet-control-zoom a {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

body.light-theme .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #64748b !important;
}

/* ==========================================================================
   PUBLIC FIELD RESEARCH OCR MODAL & CONTROLS (100% IDENTICAL TO ADMIN)
   ========================================================================== */
.admin-ocr-modal-card {
  max-width: 740px;
  width: 95vw;
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0,0,0,0.4);
  border: 1.5px solid rgba(6, 182, 212, 0.4);
  background: #ffffff;
  box-sizing: border-box;
}

.admin-ocr-modal-body {
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  background: #ffffff;
  box-sizing: border-box;
}

.admin-ocr-dropzone {
  border: 2px dashed #0891b2;
  background: #f0fdfa;
  border-radius: 12px;
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 14px;
}

.admin-ocr-dropzone:hover {
  background: #e0f2fe;
}

.admin-ocr-dropzone-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 3px 0;
}

.admin-ocr-dropzone-desc {
  font-size: 0.76rem;
  color: #64748b;
  margin: 0;
}

.admin-ocr-phones-box {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  box-sizing: border-box;
}

.admin-ocr-phones-title {
  font-size: 0.8rem;
  font-weight: 900;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.admin-ocr-add-phone-btn {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 9px;
  color: #059669;
  border: 1px solid #86efac;
  background: #f0fdf4;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.admin-rlead-phone-badge {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #dcfce7;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
  flex-shrink: 0;
}

.admin-rlead-phone-input,
.public-rlead-phone-input {
  font-size: 0.95rem;
  font-weight: 900;
  color: #047857;
  height: 38px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  flex: 1;
  min-width: 0;
  padding: 0 10px;
  box-sizing: border-box;
  background: #ffffff;
}

.admin-ocr-field-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

.admin-ocr-input,
.admin-ocr-select {
  width: 100%;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  height: 38px;
  padding: 0 10px;
  font-weight: 700;
  font-size: 0.86rem;
  box-sizing: border-box;
  background: #ffffff;
  color: #0f172a;
}

.admin-ocr-map-box {
  background: #ffffff;
  border: 1.5px solid #0284c7;
  border-radius: 12px;
  padding: 10px;
  box-sizing: border-box;
}

.admin-ocr-map-title {
  font-size: 0.82rem;
  font-weight: 900;
  color: #0369a1;
}

.admin-ocr-gps-btn {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #16a34a;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.74rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap !important;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.admin-ocr-gps-btn:hover {
  background: #dcfce7;
  border-color: #4ade80;
}

.admin-ocr-coord-input {
  font-size: 0.76rem;
  font-weight: 800;
  color: #0284c7;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 5px 8px;
  width: 100%;
  box-sizing: border-box;
}

.admin-ocr-cancel-btn {
  background: #e2e8f0;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  padding: 9px 18px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
}

/* Dark Theme Overrides for Public */
body:not(.light-theme) .admin-ocr-modal-card,
body.dark-theme .admin-ocr-modal-card {
  background: #0b1329 !important;
  border-color: rgba(6, 182, 212, 0.45) !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.8) !important;
}

body:not(.light-theme) .admin-ocr-modal-body,
body.dark-theme .admin-ocr-modal-body {
  background: #0b1329 !important;
}

body:not(.light-theme) .admin-ocr-dropzone,
body.dark-theme .admin-ocr-dropzone {
  background: #0f172a !important;
  border-color: #06b6d4 !important;
}

body:not(.light-theme) .admin-ocr-dropzone:hover,
body.dark-theme .admin-ocr-dropzone:hover {
  background: #131f37 !important;
}

body:not(.light-theme) .admin-ocr-dropzone-title,
body.dark-theme .admin-ocr-dropzone-title {
  color: #f8fafc !important;
}

body:not(.light-theme) .admin-ocr-dropzone-desc,
body.dark-theme .admin-ocr-dropzone-desc {
  color: #94a3b8 !important;
}

body:not(.light-theme) .admin-ocr-phones-box,
body.dark-theme .admin-ocr-phones-box {
  background: #0f172a !important;
  border-color: #1e293b !important;
}

body:not(.light-theme) .admin-ocr-phones-title,
body.dark-theme .admin-ocr-phones-title {
  color: #f8fafc !important;
}

body:not(.light-theme) .admin-ocr-add-phone-btn,
body.dark-theme .admin-ocr-add-phone-btn {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #6ee7b7 !important;
}

body:not(.light-theme) .admin-rlead-phone-badge,
body.dark-theme .admin-rlead-phone-badge {
  background: rgba(16, 185, 129, 0.25) !important;
  color: #6ee7b7 !important;
}

body:not(.light-theme) .admin-rlead-phone-input,
body:not(.light-theme) .public-rlead-phone-input,
body.dark-theme .admin-rlead-phone-input,
body.dark-theme .public-rlead-phone-input {
  background: #131b2e !important;
  border-color: #334155 !important;
  color: #6ee7b7 !important;
}

body:not(.light-theme) .admin-ocr-field-label,
body.dark-theme .admin-ocr-field-label {
  color: #cbd5e1 !important;
}

body:not(.light-theme) .admin-ocr-input,
body:not(.light-theme) .admin-ocr-select,
body.dark-theme .admin-ocr-input,
body.dark-theme .admin-ocr-select {
  background: #131b2e !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

body:not(.light-theme) #publicRLeadCode,
body.dark-theme #publicRLeadCode {
  color: #38bdf8 !important;
}

body:not(.light-theme) #publicRLeadPrice,
body.dark-theme #publicRLeadPrice {
  color: #fbbf24 !important;
}

body:not(.light-theme) .admin-ocr-map-box,
body.dark-theme .admin-ocr-map-box {
  background: #0f172a !important;
  border-color: rgba(2, 132, 199, 0.5) !important;
}

body:not(.light-theme) .admin-ocr-map-title,
body.dark-theme .admin-ocr-map-title {
  color: #38bdf8 !important;
}

body:not(.light-theme) .admin-ocr-gps-btn,
body.dark-theme .admin-ocr-gps-btn {
  background: rgba(16, 185, 129, 0.2) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #6ee7b7 !important;
}

body:not(.light-theme) .admin-ocr-coord-input,
body.dark-theme .admin-ocr-coord-input {
  background: #131b2e !important;
  border-color: #334155 !important;
}

#adminFieldResearchInteractiveMap,
#publicFieldResearchInteractiveMap {
  width: 100% !important;
  height: 260px !important;
  min-height: 260px !important;
  border-radius: 8px !important;
  border: 1.5px solid #cbd5e1 !important;
  background: #0f172a !important;
  position: relative !important;
  z-index: 10 !important;
}

/* ==========================================================================
   ULTRA-LUXURY MOBILE STARTUP SPLASH SCREEN (3-TIER DISTRIBUTED DESIGN)
   ========================================================================== */
.app-startup-splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 45%, #1e293b 0%, #0b1120 60%, #030712 100%);
  z-index: 99999999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: max(24px, env(safe-area-inset-top, 24px)) 20px max(24px, env(safe-area-inset-bottom, 24px)) 20px;
  box-sizing: border-box;
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.55s ease;
  user-select: none;
  touch-action: manipulation;
  overflow: hidden;
}

.app-startup-splash-screen.splash-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: scale(1.06);
}

/* Tier 1: Top Accent Bar */
.splash-top-section {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: 10px;
  animation: splashFadeIn 0.7s ease-out;
}

.splash-top-chip {
  font-size: 0.74rem;
  color: #94a3b8;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 5px 14px;
  border-radius: 99px;
  letter-spacing: 0.5px;
}

/* Tier 2: Majestic Center Hero */
.splash-center-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 360px;
  animation: splashHeroPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes splashHeroPop {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(15px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes splashFadeIn {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.splash-glow-aura {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.38) 0%, rgba(16, 185, 129, 0.18) 50%, transparent 75%);
  filter: blur(32px);
  pointer-events: none;
  animation: auraPulse 3s infinite ease-in-out;
}

@keyframes auraPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.75; }
  50% { transform: translate(-50%, -50%) scale(1.22); opacity: 1; }
}

.splash-logo-wrap {
  position: relative;
  width: 130px;
  height: 130px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: splashLogoFloat 3s infinite ease-in-out;
}

@keyframes splashLogoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(0.6deg); }
}

.splash-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(245, 158, 11, 0.5));
}

.splash-brand-title {
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}

.splash-gold-text {
  color: #fbbf24;
  text-shadow: 0 2px 12px rgba(251, 191, 36, 0.55);
}

.splash-white-text {
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.35);
}

.splash-brand-en {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 3px;
  color: #38bdf8;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.splash-brand-slogan {
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 600;
  max-width: 290px;
  line-height: 1.4;
}

/* Tier 3: Bottom Controls & Copyright */
.splash-bottom-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  padding-bottom: 12px;
  animation: splashFadeInBottom 0.8s ease-out;
}

@keyframes splashFadeInBottom {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

.splash-progress-container {
  width: 200px;
  height: 5px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.splash-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f59e0b 0%, #10b981 50%, #38bdf8 100%);
  border-radius: 99px;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.85);
  transition: width 0.3s ease-out;
}

.splash-status-text {
  font-size: 0.74rem;
  color: #cbd5e1;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
}

.splash-footer-badge {
  font-size: 0.72rem;
  color: #e2e8f0;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  padding: 6px 16px;
  border-radius: 99px;
  border: 1.5px solid rgba(251, 191, 36, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   3D LUXURY MAP PIN ANIMATIONS & RADAR SONAR PULSE
   ========================================================================== */
.custom-3d-luxury-map-pin {
  background: transparent !important;
  border: none !important;
}

.pin-3d-floating-wrapper {
  position: relative;
  width: 28px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  animation: pin3dFloat 2.2s infinite ease-in-out;
}

@keyframes pin3dFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.pin-3d-ground-shadow {
  position: absolute;
  bottom: 0px;
  left: 50%;
  width: 14px;
  height: 5px;
  margin-left: -7px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 80%);
  border-radius: 50%;
  animation: pinShadowScale 2.2s infinite ease-in-out;
}

@keyframes pinShadowScale {
  0%, 100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(0.65);
    opacity: 0.45;
  }
}

.pin-3d-sonar-pulse {
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 18px;
  height: 8px;
  margin-left: -9px;
  border: 1.5px solid #f43f5e;
  border-radius: 50%;
  box-sizing: border-box;
  animation: pinSonarWave 1.8s infinite cubic-bezier(0.1, 0.8, 0.3, 1);
  pointer-events: none;
}

@keyframes pinSonarWave {
  0% {
    transform: scale(0.4);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

/* ==========================================================================
   PUBLIC FIELD RESEARCH & OCR HUB RESPONSIVE 3-COLUMN WEB / 2-COLUMN APP
   ========================================================================== */

.admin-research-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Web Desktop: Exactly 3 Columns on Web */
@media (min-width: 900px) {
  .admin-research-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .public-research-modal-card {
    max-width: 1320px !important;
    width: 96vw !important;
  }
}

/* Mobile & App Screens: Exactly 2 Columns */
@media (max-width: 899px) {
  .admin-research-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
}

/* ==========================================================================
   PUBLIC SMART CONTACTS & PORTFOLIO HUB RESPONSIVE 3-COLUMN WEB / 2-COLUMN APP
   ========================================================================== */

.smart-contacts-grid,
#publicContactsListGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Web Desktop: Exactly 3 Columns on Web */
@media (min-width: 900px) {
  .smart-contacts-grid,
  #publicContactsListGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .smart-contacts-modal-card {
    max-width: 1320px !important;
    width: 96vw !important;
  }
}

/* Mobile & App Screens: Exactly 2 Columns */
@media (max-width: 899px) {
  .smart-contacts-grid,
  #publicContactsListGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* ==========================================================================
   PUBLIC CONTACT PORTFOLIO DETAIL PROPERTIES: 3 COLUMNS ON WEB / 2 IN APP
   ========================================================================== */

.smart-contacts-portfolio-props-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Web Desktop: Exactly 3 Columns on Web */
@media (min-width: 900px) {
  .smart-contacts-portfolio-props-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .smart-contacts-portfolio-modal-card {
    max-width: 1320px !important;
    width: 96vw !important;
  }
}

/* Mobile & App Screens: Exactly 2 Columns */
@media (max-width: 899px) {
  .smart-contacts-portfolio-props-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* Ultra-High Priority Z-Index Fix for Cadastral GIS Modals (ធានាមិនអោយលិចក្រោមផ្ទាំងផែនទី) */
.cadastral-drawer-overlay {
  z-index: 99999998 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  inset: 0 !important;
}

.cadastral-modal-overlay,
#cadastralPointsModal,
#cadastralFeaturePickerModal {
  z-index: 99999999 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ==========================================================================
   SMART LOCATION HUB & MAP DRAWER (DARK / LIGHT MODE ADAPTATION)
   ========================================================================== */

/* Base Styles (Shared) */
.sub-location-hub-card {
  box-sizing: border-box !important;
  width: 100% !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  margin-bottom: 6px !important;
}

.sub-location-hub-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.sub-location-hub-label {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}

.sub-map-gps-btn {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10b981 !important;
  border: 1.5px solid rgba(16, 185, 129, 0.35) !important;
  padding: 4px 10px !important;
  border-radius: 7px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s ease !important;
}

.sub-map-gps-btn:hover {
  background: rgba(16, 185, 129, 0.28) !important;
  border-color: #10b981 !important;
  color: #059669 !important;
}

.sub-map-toggle-btn {
  padding: 4px 10px !important;
  border-radius: 7px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s ease !important;
}

.sub-map-input-row {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  width: 100% !important;
}

.sub-map-url-wrap {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  min-width: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  height: 38px !important;
  transition: all 0.2s ease !important;
}

.sub-map-url-icon {
  width: 36px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.82rem !important;
  flex-shrink: 0 !important;
}

.sub-map-url-input {
  flex: 1 !important;
  min-width: 0 !important;
  height: 38px !important;
  border: none !important;
  background: transparent !important;
  padding: 0 10px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  outline: none !important;
  width: 100% !important;
}

.sub-map-paste-btn {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #d97706 !important;
  border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
  padding: 0 10px !important;
  height: 38px !important;
  border-radius: 8px !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.sub-map-paste-btn:hover {
  background: rgba(245, 158, 11, 0.28) !important;
  border-color: #d97706 !important;
}

.sub-map-preview-btn {
  padding: 0 10px !important;
  height: 38px !important;
  border-radius: 8px !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.sub-map-drawer-card {
  margin-top: 10px !important;
  padding: 10px !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}

.sub-map-hint-text {
  font-size: 0.73rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.sub-map-layer-wrap {
  display: flex !important;
  border-radius: 6px !important;
  padding: 2px !important;
  gap: 2px !important;
}

.sub-map-layer-btn {
  border: none !important;
  padding: 3px 9px !important;
  border-radius: 4px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
}

.sub-map-expand-btn {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #3b82f6 !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s ease !important;
}

.sub-map-expand-btn:hover {
  background: rgba(59, 130, 246, 0.28) !important;
  border-color: #3b82f6 !important;
}

.sub-form-leaflet-container {
  height: 200px !important;
  min-height: 200px !important;
  width: 100% !important;
  border-radius: 8px !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  margin: 6px 0 !important;
  display: block !important;
}

.sub-map-city-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
  margin-top: 6px !important;
}

.sub-map-city-label {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
}

.sub-map-city-btn {
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

/* 1. DARK MODE (DEFAULT in public app when body:not(.light-theme) or body.dark-theme) */
body:not(.light-theme) .sub-location-hub-card,
body.dark-theme .sub-location-hub-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.4) !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
}

body:not(.light-theme) .sub-location-hub-label,
body.dark-theme .sub-location-hub-label {
  color: #fbbf24 !important;
}

body:not(.light-theme) .sub-location-hub-label i,
body.dark-theme .sub-location-hub-label i {
  color: #f97316 !important;
}

body:not(.light-theme) .sub-map-toggle-btn,
body.dark-theme .sub-map-toggle-btn {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border: 1.5px solid #334155 !important;
  padding: 4px 10px !important;
  border-radius: 7px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s ease !important;
}

body:not(.light-theme) .sub-map-toggle-btn:hover,
body.dark-theme .sub-map-toggle-btn:hover {
  background: #334155 !important;
  border-color: #64748b !important;
}

body:not(.light-theme) .sub-map-url-wrap,
body.dark-theme .sub-map-url-wrap {
  background: #1e293b !important;
  border: 1.5px solid #334155 !important;
}

body:not(.light-theme) .sub-map-url-wrap:focus-within,
body.dark-theme .sub-map-url-wrap:focus-within {
  border-color: #ea580c !important;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.25) !important;
}

body:not(.light-theme) .sub-map-url-icon,
body.dark-theme .sub-map-url-icon {
  background: rgba(234, 88, 12, 0.18) !important;
  color: #fb923c !important;
  border-right: 1px solid rgba(234, 88, 12, 0.3) !important;
}

body:not(.light-theme) .sub-map-url-input,
body.dark-theme .sub-map-url-input {
  color: #f1f5f9 !important;
}

body:not(.light-theme) .sub-map-url-input::placeholder,
body.dark-theme .sub-map-url-input::placeholder {
  color: #94a3b8 !important;
}

body:not(.light-theme) .sub-map-preview-btn,
body.dark-theme .sub-map-preview-btn {
  background: rgba(2, 132, 199, 0.18) !important;
  color: #38bdf8 !important;
  border: 1.5px solid rgba(2, 132, 199, 0.35) !important;
  padding: 0 10px !important;
  height: 38px !important;
  border-radius: 8px !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

body:not(.light-theme) .sub-map-preview-btn:hover,
body.dark-theme .sub-map-preview-btn:hover {
  background: rgba(2, 132, 199, 0.3) !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

body:not(.light-theme) .sub-map-drawer-card,
body.dark-theme .sub-map-drawer-card {
  background: #0f172a !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body:not(.light-theme) .sub-map-hint-text,
body.dark-theme .sub-map-hint-text {
  color: #cbd5e1 !important;
}

body:not(.light-theme) .sub-map-layer-wrap,
body.dark-theme .sub-map-layer-wrap {
  background: #1e293b !important;
  border: 1px solid #334155 !important;
}

body:not(.light-theme) .sub-map-layer-btn,
body.dark-theme .sub-map-layer-btn {
  border: none !important;
  padding: 3px 9px !important;
  border-radius: 4px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  background: transparent !important;
  color: #94a3b8 !important;
  transition: all 0.2s ease !important;
}

body:not(.light-theme) .sub-map-layer-btn.active,
body.dark-theme .sub-map-layer-btn.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body:not(.light-theme) .sub-form-leaflet-container,
body.dark-theme .sub-form-leaflet-container {
  border: 1.5px solid #334155 !important;
}

body:not(.light-theme) .sub-map-city-label,
body.dark-theme .sub-map-city-label {
  color: #94a3b8 !important;
}

body:not(.light-theme) .sub-map-city-btn,
body.dark-theme .sub-map-city-btn {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border: 1px solid #334155 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

body:not(.light-theme) .sub-map-city-btn:hover,
body.dark-theme .sub-map-city-btn:hover {
  background: #334155 !important;
  color: #ffffff !important;
  border-color: #64748b !important;
}

/* 2. LIGHT MODE (When body.light-theme is present) */
body.light-theme .sub-location-hub-card {
  background: linear-gradient(135deg, rgba(254, 243, 199, 0.45) 0%, rgba(255, 251, 235, 0.8) 100%) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.45) !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
}

body.light-theme .sub-location-hub-label {
  color: #d97706 !important;
}

body.light-theme .sub-location-hub-label i {
  color: #ea580c !important;
}

body.light-theme .sub-map-toggle-btn {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  padding: 4px 10px !important;
  border-radius: 7px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: all 0.2s ease !important;
}

body.light-theme .sub-map-toggle-btn:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
}

body.light-theme .sub-map-url-wrap {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
}

body.light-theme .sub-map-url-wrap:focus-within {
  border-color: #ea580c !important;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15) !important;
}

body.light-theme .sub-map-url-icon {
  background: #fff7ed !important;
  color: #ea580c !important;
  border-right: 1px solid #fed7aa !important;
}

body.light-theme .sub-map-url-input {
  color: #0f172a !important;
}

body.light-theme .sub-map-url-input::placeholder {
  color: #94a3b8 !important;
}

body.light-theme .sub-map-preview-btn {
  background: #ffffff !important;
  color: #0284c7 !important;
  border: 1.5px solid #bae6fd !important;
  padding: 0 10px !important;
  height: 38px !important;
  border-radius: 8px !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

body.light-theme .sub-map-preview-btn:hover {
  background: #f0f9ff !important;
  border-color: #0284c7 !important;
}

body.light-theme .sub-map-drawer-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .sub-map-hint-text {
  color: #475569 !important;
}

body.light-theme .sub-map-layer-wrap {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}

body.light-theme .sub-map-layer-btn {
  border: none !important;
  padding: 3px 9px !important;
  border-radius: 4px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  background: transparent !important;
  color: #64748b !important;
  transition: all 0.2s ease !important;
}

body.light-theme .sub-map-layer-btn.active {
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .sub-form-leaflet-container {
  border: 1.5px solid #cbd5e1 !important;
}

body.light-theme .sub-map-city-label {
  color: #64748b !important;
}

body.light-theme .sub-map-city-btn {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

body.light-theme .sub-map-city-btn:hover {
  background: #e2e8f0 !important;
}

/* ==========================================================================
   FULLSCREEN GLOBAL MAP PICKER MODAL (DARK / LIGHT THEME ADAPTATION)
   ========================================================================== */
body:not(.light-theme) #globalFullscreenMapModal .gfull-map-top-bar,
body.dark-theme #globalFullscreenMapModal .gfull-map-top-bar {
  background: rgba(15, 23, 42, 0.94) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  color: #f1f5f9 !important;
}

body:not(.light-theme) #globalFullscreenMapModal #btnGFullBack,
body.dark-theme #globalFullscreenMapModal #btnGFullBack {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
}

body:not(.light-theme) #globalFullscreenMapModal .gfull-layer-wrap,
body.dark-theme #globalFullscreenMapModal .gfull-layer-wrap {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body:not(.light-theme) #globalFullscreenMapModal .gfull-layer-btn,
body.dark-theme #globalFullscreenMapModal .gfull-layer-btn {
  background: transparent !important;
  color: #94a3b8 !important;
}

body:not(.light-theme) #globalFullscreenMapModal .gfull-layer-btn.active,
body.dark-theme #globalFullscreenMapModal .gfull-layer-btn.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body:not(.light-theme) #globalFullscreenMapModal #btnGFullGPS,
body.dark-theme #globalFullscreenMapModal #btnGFullGPS {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}

body:not(.light-theme) #globalFullscreenMapModal #btnGFullClose,
body.dark-theme #globalFullscreenMapModal #btnGFullClose {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}

body:not(.light-theme) #globalFullscreenMapModal .gfull-search-wrap,
body.dark-theme #globalFullscreenMapModal .gfull-search-wrap {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body:not(.light-theme) #globalFullscreenMapModal #gFullMapSearchInput,
body.dark-theme #globalFullscreenMapModal #gFullMapSearchInput {
  color: #f1f5f9 !important;
}

body:not(.light-theme) #globalFullscreenMapModal #gFullMapSearchInput::placeholder,
body.dark-theme #globalFullscreenMapModal #gFullMapSearchInput::placeholder {
  color: #94a3b8 !important;
}

.owners-search-input,
input.owners-search-input,
#contactSearchInput {
  padding-left: 44px !important;
  padding-right: 42px !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   OWNER PROPERTY LIGHTBOX THEME ADAPTIVE STYLES
   ========================================================================== */
body.light-theme #ownerPropertyLightboxModal {
  background: rgba(15, 23, 42, 0.65) !important;
}
body.light-theme #ownerPropertyLightboxModal .owner-lightbox-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18) !important;
}
body.light-theme #ownerPropertyLightboxModal .owner-lightbox-header {
  background: linear-gradient(135deg, #ffffff, #f8fafc) !important;
  color: #0f172a !important;
  border-bottom: 2px solid #10b981 !important;
}
body.light-theme #ownerPropertyLightboxModal .owner-lightbox-title {
  color: #0f172a !important;
}
body.light-theme #ownerPropertyLightboxModal .owner-lightbox-close-btn {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #64748b !important;
  border: 1px solid #cbd5e1 !important;
}
body.light-theme #ownerPropertyLightboxModal .owner-lightbox-close-btn:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
  border-color: #fca5a5 !important;
}
body.light-theme #ownerPropertyLightboxModal .owner-lightbox-viewer {
  background: #f8fafc !important;
  border-right: 1.5px solid #e2e8f0 !important;
}
body.light-theme #ownerPropertyLightboxModal .owner-lightbox-viewport {
  border: 1.5px solid #cbd5e1 !important;
}
body.light-theme #ownerPropertyLightboxModal .owner-lightbox-details {
  background: #ffffff !important;
}
body.light-theme #ownerPropertyLightboxModal .owner-lightbox-price-label {
  color: #64748b !important;
}
body.light-theme #ownerPropertyLightboxModal .owner-lightbox-price-val {
  color: #059669 !important;
}
body.light-theme #ownerPropertyLightboxModal .owner-lightbox-infobox {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}
body.light-theme #ownerPropertyLightboxModal .owner-lightbox-info-row {
  color: #1e293b !important;
}
body.light-theme #ownerPropertyLightboxModal .owner-lightbox-info-row strong {
  color: #0f172a !important;
}
body.light-theme #ownerPropertyLightboxModal .owner-lightbox-desc-title {
  color: #64748b !important;
}
body.light-theme #ownerPropertyLightboxModal .owner-lightbox-desc-box {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
}
body.light-theme #ownerPropertyLightboxModal .owner-lightbox-footer {
  border-top: 1px solid #e2e8f0 !important;
}
body.light-theme #ownerPropertyLightboxModal .owner-lightbox-btn-req {
  background: #f0f9ff !important;
  border: 1.5px solid #0284c7 !important;
  color: #0284c7 !important;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15) !important;
}
body.light-theme #ownerPropertyLightboxModal .owner-lightbox-btn-close {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
}
body.light-theme #ownerPropertyLightboxModal .owner-lightbox-badge-live {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
}
body.light-theme #ownerPropertyLightboxModal .owner-lightbox-badge-pending {
  background: #fffbeb !important;
  color: #d97706 !important;
  border: 1px solid #fde68a !important;
}



/* ==========================================================================
   UNIVERSAL PHOTO LIGHTBOX - ADAPTIVE LIGHT & DARK THEMES
   ========================================================================== */

/* --- BASE & LIGHT THEME (Default & when body.light-theme / html.light / .theme-light / .is-light) --- */
#universalPhotoLightboxModal {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 9999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  transition: background 0.3s ease !important;
}

body.light-theme #universalPhotoLightboxModal,
html.light #universalPhotoLightboxModal,
#universalPhotoLightboxModal.theme-light {
  background: rgba(15, 23, 42, 0.60) !important;
}

#universalPhotoLightboxModal .universal-lightbox-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 18px !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.22) !important;
  max-width: 900px !important;
  width: 95vw !important;
  max-height: 94vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  color: #0f172a !important;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
}

body.light-theme #universalPhotoLightboxModal .universal-lightbox-card,
html.light #universalPhotoLightboxModal .universal-lightbox-card,
#universalPhotoLightboxModal.theme-light .universal-lightbox-card,
#universalPhotoLightboxModal .universal-lightbox-card.is-light {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.22) !important;
  color: #0f172a !important;
}

#universalPhotoLightboxModal .lightbox-header-bar {
  background: #ffffff !important;
  padding: 10px 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  transition: background 0.3s ease, border-color 0.3s ease !important;
}

body.light-theme #universalPhotoLightboxModal .lightbox-header-bar,
html.light #universalPhotoLightboxModal .lightbox-header-bar,
#universalPhotoLightboxModal.theme-light .lightbox-header-bar,
#universalPhotoLightboxModal .universal-lightbox-card.is-light .lightbox-header-bar {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

#universalPhotoLightboxModal .lightbox-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

#universalPhotoLightboxModal .lightbox-type-badge {
  background: rgba(37, 99, 235, 0.08) !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
  font-size: 0.70rem !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.3s ease !important;
}

body.light-theme #universalPhotoLightboxModal .lightbox-type-badge,
html.light #universalPhotoLightboxModal .lightbox-type-badge,
#universalPhotoLightboxModal.theme-light .lightbox-type-badge,
#universalPhotoLightboxModal .universal-lightbox-card.is-light .lightbox-type-badge {
  background: rgba(37, 99, 235, 0.08) !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
}

#universalPhotoLightboxModal .lightbox-title {
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  transition: color 0.3s ease !important;
}

body.light-theme #universalPhotoLightboxModal .lightbox-title,
html.light #universalPhotoLightboxModal .lightbox-title,
#universalPhotoLightboxModal.theme-light .lightbox-title,
#universalPhotoLightboxModal .universal-lightbox-card.is-light .lightbox-title {
  color: #0f172a !important;
}

#universalPhotoLightboxModal .lightbox-close-btn {
  flex: 0 0 30px !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  margin: 0 0 0 auto !important;
  background: rgba(239, 68, 68, 0.12) !important;
  color: #dc2626 !important;
  border: 1.5px solid rgba(239, 68, 68, 0.35) !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  line-height: 1 !important;
}

#universalPhotoLightboxModal .lightbox-close-btn:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
  transform: scale(1.08) !important;
}

body.light-theme #universalPhotoLightboxModal .lightbox-close-btn,
html.light #universalPhotoLightboxModal .lightbox-close-btn,
#universalPhotoLightboxModal.theme-light .lightbox-close-btn,
#universalPhotoLightboxModal .universal-lightbox-card.is-light .lightbox-close-btn {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #dc2626 !important;
  border: 1.5px solid rgba(239, 68, 68, 0.35) !important;
}

body.light-theme #universalPhotoLightboxModal .lightbox-close-btn:hover,
html.light #universalPhotoLightboxModal .lightbox-close-btn:hover,
#universalPhotoLightboxModal.theme-light .lightbox-close-btn:hover,
#universalPhotoLightboxModal .universal-lightbox-card.is-light .lightbox-close-btn:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
}

#universalPhotoLightboxModal #universalLightboxViewport {
  position: relative !important;
  width: 100% !important;
  height: 60vh !important;
  min-height: 320px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: radial-gradient(circle, #f8fafc 0%, #e2e8f0 100%) !important;
  cursor: grab !important;
  user-select: none !important;
  touch-action: none !important;
  transition: background 0.3s ease !important;
}

body.light-theme #universalPhotoLightboxModal #universalLightboxViewport,
html.light #universalPhotoLightboxModal #universalLightboxViewport,
#universalPhotoLightboxModal.theme-light #universalLightboxViewport,
#universalPhotoLightboxModal .universal-lightbox-card.is-light #universalLightboxViewport {
  background: radial-gradient(circle, #f8fafc 0%, #e2e8f0 100%) !important;
}

#universalPhotoLightboxModal #universalLightboxMainImg {
  max-width: 98% !important;
  max-height: 98% !important;
  object-fit: contain !important;
  transform-origin: center center !important;
  will-change: transform !important;
  pointer-events: none !important;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.12)) !important;
}

#universalPhotoLightboxModal .lightbox-zoom-controls {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  z-index: 10 !important;
}

#universalPhotoLightboxModal #universalLightboxZoomBadge {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(6px) !important;
  color: #0284c7 !important;
  font-size: 0.70rem !important;
  font-weight: 900 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s ease !important;
}

body.light-theme #universalPhotoLightboxModal #universalLightboxZoomBadge,
html.light #universalPhotoLightboxModal #universalLightboxZoomBadge,
#universalPhotoLightboxModal.theme-light #universalLightboxZoomBadge,
#universalPhotoLightboxModal .universal-lightbox-card.is-light #universalLightboxZoomBadge {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0284c7 !important;
  border: 1px solid #cbd5e1 !important;
}

#universalPhotoLightboxModal .lightbox-reset-btn {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(6px) !important;
  color: #334155 !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  border: 1px solid #cbd5e1 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.2s !important;
}

#universalPhotoLightboxModal .lightbox-reset-btn:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}

#universalPhotoLightboxModal .lightbox-drag-hint-wrap {
  position: absolute !important;
  bottom: 8px !important;
  left: 10px !important;
  right: 10px !important;
  text-align: center !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

#universalPhotoLightboxModal .lightbox-drag-hint {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(6px) !important;
  color: #475569 !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  padding: 3px 12px !important;
  border-radius: 99px !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s ease !important;
}

body.light-theme #universalPhotoLightboxModal .lightbox-drag-hint,
html.light #universalPhotoLightboxModal .lightbox-drag-hint,
#universalPhotoLightboxModal.theme-light .lightbox-drag-hint,
#universalPhotoLightboxModal .universal-lightbox-card.is-light .lightbox-drag-hint {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

#universalPhotoLightboxModal .lightbox-controls-toolbar {
  background: #ffffff !important;
  padding: 9px 14px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  border-top: 1px solid #e2e8f0 !important;
  transition: background 0.3s ease, border-color 0.3s ease !important;
}

body.light-theme #universalPhotoLightboxModal .lightbox-controls-toolbar,
html.light #universalPhotoLightboxModal .lightbox-controls-toolbar,
#universalPhotoLightboxModal.theme-light .lightbox-controls-toolbar,
#universalPhotoLightboxModal .universal-lightbox-card.is-light .lightbox-controls-toolbar {
  background: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
}

#universalPhotoLightboxModal .lightbox-actions-group {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

#universalPhotoLightboxModal .btn-lb-action {
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  background: #f8fafc !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

#universalPhotoLightboxModal .btn-lb-action:hover {
  background: #edf2f7 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
}

#universalPhotoLightboxModal .btn-lb-action i {
  font-size: 0.82rem !important;
  color: #0284c7 !important;
  opacity: 0.95 !important;
}

body.light-theme #universalPhotoLightboxModal .btn-lb-action,
html.light #universalPhotoLightboxModal .btn-lb-action,
#universalPhotoLightboxModal.theme-light .btn-lb-action,
#universalPhotoLightboxModal .universal-lightbox-card.is-light .btn-lb-action {
  background: #f8fafc !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

body.light-theme #universalPhotoLightboxModal .btn-lb-action i,
html.light #universalPhotoLightboxModal .btn-lb-action i,
#universalPhotoLightboxModal.theme-light .btn-lb-action i,
#universalPhotoLightboxModal .universal-lightbox-card.is-light .btn-lb-action i {
  color: #0284c7 !important;
}

#universalPhotoLightboxModal .btn-lb-download {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.28) !important;
}

#universalPhotoLightboxModal .btn-lb-download i {
  color: #ffffff !important;
}

#universalPhotoLightboxModal .btn-lb-download:hover {
  background: linear-gradient(135deg, #059669, #047857) !important;
  color: #ffffff !important;
  border-color: rgba(16, 185, 129, 0.6) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(16, 185, 129, 0.4) !important;
}

body.light-theme #universalPhotoLightboxModal .btn-lb-download,
html.light #universalPhotoLightboxModal .btn-lb-download,
#universalPhotoLightboxModal.theme-light .btn-lb-download,
#universalPhotoLightboxModal .universal-lightbox-card.is-light .btn-lb-download {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border: 1px solid rgba(16, 185, 129, 0.4) !important;
}

#universalPhotoLightboxModal .btn-lb-cloud i {
  color: #2563eb !important;
}

body.light-theme #universalPhotoLightboxModal .btn-lb-cloud i,
html.light #universalPhotoLightboxModal .btn-lb-cloud i,
#universalPhotoLightboxModal.theme-light .btn-lb-cloud i,
#universalPhotoLightboxModal .universal-lightbox-card.is-light .btn-lb-cloud i {
  color: #2563eb !important;
}

#universalPhotoLightboxModal .lightbox-details-pill {
  font-size: 0.84rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  background: rgba(15, 23, 42, 0.04) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  transition: all 0.3s ease !important;
}

body.light-theme #universalPhotoLightboxModal .lightbox-details-pill,
html.light #universalPhotoLightboxModal .lightbox-details-pill,
#universalPhotoLightboxModal.theme-light .lightbox-details-pill,
#universalPhotoLightboxModal .universal-lightbox-card.is-light .lightbox-details-pill {
  background: rgba(15, 23, 42, 0.04) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

#universalPhotoLightboxModal .lightbox-details-pill .lb-price {
  font-weight: 900 !important;
  color: #059669 !important;
}

#universalPhotoLightboxModal .lightbox-details-pill .lb-location {
  font-size: 0.74rem !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   DARK THEME OVERRIDES FOR UNIVERSAL PHOTO LIGHTBOX
   Applies when: body.dark-theme, html.dark, #universalPhotoLightboxModal.theme-dark, or .universal-lightbox-card.is-dark
   ========================================================================== */
body.dark-theme #universalPhotoLightboxModal,
html.dark #universalPhotoLightboxModal,
#universalPhotoLightboxModal.theme-dark {
  background: rgba(2, 6, 23, 0.85) !important;
}

body.dark-theme #universalPhotoLightboxModal .universal-lightbox-card,
html.dark #universalPhotoLightboxModal .universal-lightbox-card,
#universalPhotoLightboxModal.theme-dark .universal-lightbox-card,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 25px 90px rgba(0, 0, 0, 0.85) !important;
  color: #f8fafc !important;
}

body.dark-theme #universalPhotoLightboxModal .lightbox-header-bar,
html.dark #universalPhotoLightboxModal .lightbox-header-bar,
#universalPhotoLightboxModal.theme-dark .lightbox-header-bar,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark .lightbox-header-bar {
  background: #111c34 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

body.dark-theme #universalPhotoLightboxModal .lightbox-type-badge,
html.dark #universalPhotoLightboxModal .lightbox-type-badge,
#universalPhotoLightboxModal.theme-dark .lightbox-type-badge,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark .lightbox-type-badge {
  background: rgba(59, 130, 246, 0.18) !important;
  border: 1px solid rgba(96, 165, 250, 0.35) !important;
  color: #93c5fd !important;
}

body.dark-theme #universalPhotoLightboxModal .lightbox-title,
html.dark #universalPhotoLightboxModal .lightbox-title,
#universalPhotoLightboxModal.theme-dark .lightbox-title,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark .lightbox-title {
  color: #f8fafc !important;
}

body.dark-theme #universalPhotoLightboxModal .lightbox-close-btn,
html.dark #universalPhotoLightboxModal .lightbox-close-btn,
#universalPhotoLightboxModal.theme-dark .lightbox-close-btn,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark .lightbox-close-btn {
  background: rgba(239, 68, 68, 0.2) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.5) !important;
  color: #f87171 !important;
}

body.dark-theme #universalPhotoLightboxModal .lightbox-close-btn:hover,
html.dark #universalPhotoLightboxModal .lightbox-close-btn:hover,
#universalPhotoLightboxModal.theme-dark .lightbox-close-btn:hover,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark .lightbox-close-btn:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

body.dark-theme #universalPhotoLightboxModal #universalLightboxViewport,
html.dark #universalPhotoLightboxModal #universalLightboxViewport,
#universalPhotoLightboxModal.theme-dark #universalLightboxViewport,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark #universalLightboxViewport {
  background: radial-gradient(circle, #172235 0%, #0b1120 100%) !important;
}

body.dark-theme #universalPhotoLightboxModal #universalLightboxZoomBadge,
html.dark #universalPhotoLightboxModal #universalLightboxZoomBadge,
#universalPhotoLightboxModal.theme-dark #universalLightboxZoomBadge,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark #universalLightboxZoomBadge {
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

body.dark-theme #universalPhotoLightboxModal .lightbox-reset-btn,
html.dark #universalPhotoLightboxModal .lightbox-reset-btn,
#universalPhotoLightboxModal.theme-dark .lightbox-reset-btn,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark .lightbox-reset-btn {
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

body.dark-theme #universalPhotoLightboxModal .lightbox-reset-btn:hover,
html.dark #universalPhotoLightboxModal .lightbox-reset-btn:hover,
#universalPhotoLightboxModal.theme-dark .lightbox-reset-btn:hover,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark .lightbox-reset-btn:hover {
  background: rgba(59, 130, 246, 0.3) !important;
  color: #ffffff !important;
  border-color: rgba(96, 165, 250, 0.5) !important;
}

body.dark-theme #universalPhotoLightboxModal .lightbox-drag-hint,
html.dark #universalPhotoLightboxModal .lightbox-drag-hint,
#universalPhotoLightboxModal.theme-dark .lightbox-drag-hint,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark .lightbox-drag-hint {
  background: rgba(15, 23, 42, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.dark-theme #universalPhotoLightboxModal .lightbox-controls-toolbar,
html.dark #universalPhotoLightboxModal .lightbox-controls-toolbar,
#universalPhotoLightboxModal.theme-dark .lightbox-controls-toolbar,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark .lightbox-controls-toolbar {
  background: #111c34 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-theme #universalPhotoLightboxModal .btn-lb-action,
html.dark #universalPhotoLightboxModal .btn-lb-action,
#universalPhotoLightboxModal.theme-dark .btn-lb-action,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark .btn-lb-action {
  background: rgba(30, 41, 59, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

body.dark-theme #universalPhotoLightboxModal .btn-lb-action:hover,
html.dark #universalPhotoLightboxModal .btn-lb-action:hover,
#universalPhotoLightboxModal.theme-dark .btn-lb-action:hover,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark .btn-lb-action:hover {
  background: rgba(51, 65, 85, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.dark-theme #universalPhotoLightboxModal .btn-lb-action i,
html.dark #universalPhotoLightboxModal .btn-lb-action i,
#universalPhotoLightboxModal.theme-dark .btn-lb-action i,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark .btn-lb-action i {
  color: #93c5fd !important;
  opacity: 0.95 !important;
}

body.dark-theme #universalPhotoLightboxModal .btn-lb-download,
html.dark #universalPhotoLightboxModal .btn-lb-download,
#universalPhotoLightboxModal.theme-dark .btn-lb-download,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark .btn-lb-download {
  background: linear-gradient(135deg, #059669, #047857) !important;
  color: #ffffff !important;
  border: 1px solid rgba(52, 211, 153, 0.45) !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.45) !important;
}

body.dark-theme #universalPhotoLightboxModal .btn-lb-download i,
html.dark #universalPhotoLightboxModal .btn-lb-download i,
#universalPhotoLightboxModal.theme-dark .btn-lb-download i,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark .btn-lb-download i {
  color: #ffffff !important;
}

body.dark-theme #universalPhotoLightboxModal .btn-lb-download:hover,
html.dark #universalPhotoLightboxModal .btn-lb-download:hover,
#universalPhotoLightboxModal.theme-dark .btn-lb-download:hover,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark .btn-lb-download:hover {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border-color: rgba(110, 231, 183, 0.6) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.6) !important;
}

body.dark-theme #universalPhotoLightboxModal .btn-lb-cloud i,
html.dark #universalPhotoLightboxModal .btn-lb-cloud i,
#universalPhotoLightboxModal.theme-dark .btn-lb-cloud i,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark .btn-lb-cloud i {
  color: #60a5fa !important;
}

body.dark-theme #universalPhotoLightboxModal .lightbox-details-pill,
html.dark #universalPhotoLightboxModal .lightbox-details-pill,
#universalPhotoLightboxModal.theme-dark .lightbox-details-pill,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark .lightbox-details-pill {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-theme #universalPhotoLightboxModal .lightbox-details-pill .lb-price,
html.dark #universalPhotoLightboxModal .lightbox-details-pill .lb-price,
#universalPhotoLightboxModal.theme-dark .lightbox-details-pill .lb-price,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark .lightbox-details-pill .lb-price {
  color: #34d399 !important;
}

body.dark-theme #universalPhotoLightboxModal .lightbox-details-pill .lb-location,
html.dark #universalPhotoLightboxModal .lightbox-details-pill .lb-location,
#universalPhotoLightboxModal.theme-dark .lightbox-details-pill .lb-location,
#universalPhotoLightboxModal .universal-lightbox-card.is-dark .lightbox-details-pill .lb-location {
  color: #cbd5e1 !important;
}

/* ==========================================================================
   AGENT VIEWING TOURS & CRM MODAL THEME STYLING (PERFECT LIGHT & DARK ADAPTIVE)
   ========================================================================== */

/* Base Modal Cards */
#agentViewingToursModal .agent-viewing-tours-card,
#createViewingTourModal .modal-card,
#submitViewingFeedbackModal .modal-card {
  border-radius: 20px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: 92vh !important;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}

#createViewingTourModal form,
#submitViewingFeedbackModal form {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

#createViewingTourModal .vt-form-body,
#submitViewingFeedbackModal .vt-form-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#createViewingTourModal .vt-form-footer,
#submitViewingFeedbackModal .vt-form-footer {
  flex-shrink: 0 !important;
  padding: 12px 18px !important;
  display: flex !important;
  gap: 10px !important;
  z-index: 20 !important;
}

/* Fallback scrolling if .vt-form-body container is missing */
#createViewingTourModal form:not(:has(.vt-form-body)),
#submitViewingFeedbackModal form:not(:has(.vt-form-body)) {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* =================== LIGHT THEME STYLES =================== */

/* Light Theme Outer Card */
body.light-theme #agentViewingToursModal .agent-viewing-tours-card,
body.light-theme #createViewingTourModal .modal-card,
body.light-theme #submitViewingFeedbackModal .modal-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18) !important;
}

/* Light Theme Modal Headers */
body.light-theme #agentViewingToursModal .vt-modal-header,
body.light-theme #createViewingTourModal .vt-modal-header,
body.light-theme #submitViewingFeedbackModal .vt-modal-header {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  color: #0f172a !important;
  border-bottom: 2.5px solid #f59e0b !important;
}
body.light-theme #agentViewingToursModal .vt-modal-header .vt-header-title,
body.light-theme #createViewingTourModal .vt-modal-header .vt-header-title,
body.light-theme #submitViewingFeedbackModal .vt-modal-header .vt-header-title {
  color: #0f172a !important;
}
body.light-theme #agentViewingToursModal .vt-modal-header .vt-header-sub,
body.light-theme #createViewingTourModal .vt-modal-header .vt-header-sub,
body.light-theme #submitViewingFeedbackModal .vt-modal-header .vt-header-sub {
  color: #b45309 !important;
}
body.light-theme #agentViewingToursModal .modal-close-btn,
body.light-theme #createViewingTourModal .modal-close-btn,
body.light-theme #submitViewingFeedbackModal .modal-close-btn {
  background: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #334155 !important;
}
body.light-theme #agentViewingToursModal .modal-close-btn:hover,
body.light-theme #createViewingTourModal .modal-close-btn:hover,
body.light-theme #submitViewingFeedbackModal .modal-close-btn:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Light Theme Form Body & Scrollable Containers */
body.light-theme #createViewingTourModal form,
body.light-theme #submitViewingFeedbackModal form,
body.light-theme #createViewingTourModal .vt-form-body,
body.light-theme #submitViewingFeedbackModal .vt-form-body,
body.light-theme .vt-cards-body {
  background: #ffffff !important;
  color: #0f172a !important;
}

body.light-theme #createViewingTourModal .vt-form-footer,
body.light-theme #submitViewingFeedbackModal .vt-form-footer {
  background: #ffffff !important;
  border-top: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.05) !important;
}

/* Light Theme Tab Bar */
body.light-theme .viewing-tours-tabs-bar {
  background: #f1f5f9 !important;
  border-bottom: 2px solid #e2e8f0 !important;
}

/* Light Theme Inactive Tab Buttons */
body.light-theme .viewing-tour-tab-btn {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
body.light-theme .viewing-tour-tab-btn:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}
body.light-theme .viewing-tour-tab-btn .viewing-tour-badge {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Light Theme Active Tabs */
body.light-theme .viewing-tour-tab-btn.tab-upcoming.active {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  border: 1.5px solid #d97706 !important;
  box-shadow: 0 3px 12px rgba(245, 158, 11, 0.35) !important;
}
body.light-theme .viewing-tour-tab-btn.tab-upcoming.active .viewing-tour-badge {
  background: #ffffff !important;
  color: #b45309 !important;
}

body.light-theme .viewing-tour-tab-btn.tab-pending.active {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  border: 1.5px solid #b91c1c !important;
  box-shadow: 0 3px 12px rgba(239, 68, 68, 0.35) !important;
}
body.light-theme .viewing-tour-tab-btn.tab-pending.active .viewing-tour-badge {
  background: #ffffff !important;
  color: #b91c1c !important;
}

body.light-theme .viewing-tour-tab-btn.tab-completed.active {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border: 1.5px solid #047857 !important;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.35) !important;
}
body.light-theme .viewing-tour-tab-btn.tab-completed.active .viewing-tour-badge {
  background: #ffffff !important;
  color: #047857 !important;
}

/* Light Theme Empty State */
body.light-theme .vt-empty-container .vt-empty-icon {
  color: #f59e0b !important;
  opacity: 0.95 !important;
  font-size: 3.2rem !important;
  margin-bottom: 14px !important;
  display: block !important;
  filter: drop-shadow(0 4px 10px rgba(245, 158, 11, 0.25)) !important;
}
body.light-theme .vt-empty-container .vt-empty-title {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  margin-bottom: 8px !important;
}
body.light-theme .vt-empty-container .vt-empty-desc {
  font-size: 0.88rem !important;
  color: #475569 !important;
  max-width: 420px !important;
  margin: 0 auto 20px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
}

/* Light Theme Viewing Tour Cards */
body.light-theme .viewing-tour-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important;
  color: #0f172a !important;
}
body.light-theme .viewing-tour-card .vt-client-name {
  color: #0f172a !important;
  font-weight: 900 !important;
}
body.light-theme .viewing-tour-card .vt-top-border {
  border-bottom: 1px solid #e2e8f0 !important;
}
body.light-theme .viewing-tour-card .vt-bottom-border {
  border-top: 1px solid #e2e8f0 !important;
}
body.light-theme .viewing-tour-card .vt-meta-label {
  color: #475569 !important;
  font-weight: 800 !important;
}
body.light-theme .viewing-tour-card .vt-meta-sub {
  color: #64748b !important;
}
body.light-theme .viewing-tour-card .vt-prop-item {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
}
body.light-theme .viewing-tour-card .vt-prop-title {
  color: #0f172a !important;
  font-weight: 800 !important;
}
body.light-theme .viewing-tour-card .vt-prop-sub {
  color: #64748b !important;
}
body.light-theme .viewing-tour-card .vt-feedback-box {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}
body.light-theme .viewing-tour-card .vt-feedback-notes {
  color: #334155 !important;
}
body.light-theme .viewing-tour-card .vt-alt-box {
  background: #f5f3ff !important;
  border: 1.5px dashed #a78bfa !important;
}
body.light-theme .viewing-tour-card .vt-alt-title {
  color: #6d28d9 !important;
}
body.light-theme .viewing-tour-card .vt-alt-text {
  color: #1e293b !important;
}

/* Light Theme Forms in Create & Feedback Modals */
body.light-theme #createViewingTourModal label,
body.light-theme #submitViewingFeedbackModal label {
  color: #0f172a !important;
  font-weight: 800 !important;
}
body.light-theme #createViewingTourModal input,
body.light-theme #createViewingTourModal select,
body.light-theme #createViewingTourModal textarea,
body.light-theme #submitViewingFeedbackModal input,
body.light-theme #submitViewingFeedbackModal select,
body.light-theme #submitViewingFeedbackModal textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
}
body.light-theme #createViewingTourModal input:focus,
body.light-theme #createViewingTourModal select:focus,
body.light-theme #createViewingTourModal textarea:focus,
body.light-theme #submitViewingFeedbackModal input:focus,
body.light-theme #submitViewingFeedbackModal select:focus,
body.light-theme #submitViewingFeedbackModal textarea:focus {
  border-color: #f59e0b !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
}
body.light-theme #createViewingTourModal .vt-props-picker-box {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
}
body.light-theme #createViewingTourModal .vt-props-picker-box select {
  background: #ffffff !important;
  color: #0f172a !important;
}
body.light-theme #submitViewingFeedbackModal .feedback-prop-card {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
}
body.light-theme #submitViewingFeedbackModal .feedback-prop-card .prop-title-text {
  color: #0f172a !important;
}
body.light-theme #submitViewingFeedbackModal .vt-alt-req-box {
  background: #f5f3ff !important;
  border: 1.5px solid #c4b5fd !important;
}


/* =================== DARK THEME STYLES =================== */

/* Dark Theme Outer Cards */
body.dark-theme #agentViewingToursModal .agent-viewing-tours-card,
body.dark-theme #createViewingTourModal .modal-card,
body.dark-theme #submitViewingFeedbackModal .modal-card,
body:not(.light-theme) #agentViewingToursModal .agent-viewing-tours-card,
body:not(.light-theme) #createViewingTourModal .modal-card,
body:not(.light-theme) #submitViewingFeedbackModal .modal-card {
  background: #0f172a !important;
  color: #f8fafc !important;
  border: 1.5px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(245, 158, 11, 0.15) !important;
}

/* Dark Theme Modal Headers */
body.dark-theme #agentViewingToursModal .vt-modal-header,
body.dark-theme #createViewingTourModal .vt-modal-header,
body.dark-theme #submitViewingFeedbackModal .vt-modal-header,
body:not(.light-theme) #agentViewingToursModal .vt-modal-header,
body:not(.light-theme) #createViewingTourModal .vt-modal-header,
body:not(.light-theme) #submitViewingFeedbackModal .vt-modal-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #ffffff !important;
  border-bottom: 2.5px solid #f59e0b !important;
}
body.dark-theme #agentViewingToursModal .vt-modal-header .vt-header-title,
body.dark-theme #createViewingTourModal .vt-modal-header .vt-header-title,
body.dark-theme #submitViewingFeedbackModal .vt-modal-header .vt-header-title,
body:not(.light-theme) #agentViewingToursModal .vt-modal-header .vt-header-title,
body:not(.light-theme) #createViewingTourModal .vt-modal-header .vt-header-title,
body:not(.light-theme) #submitViewingFeedbackModal .vt-modal-header .vt-header-title {
  color: #ffffff !important;
}
body.dark-theme #agentViewingToursModal .vt-modal-header .vt-header-sub,
body.dark-theme #createViewingTourModal .vt-modal-header .vt-header-sub,
body.dark-theme #submitViewingFeedbackModal .vt-modal-header .vt-header-sub,
body:not(.light-theme) #agentViewingToursModal .vt-modal-header .vt-header-sub,
body:not(.light-theme) #createViewingTourModal .vt-modal-header .vt-header-sub,
body:not(.light-theme) #submitViewingFeedbackModal .vt-modal-header .vt-header-sub {
  color: #fde68a !important;
}
body.dark-theme #agentViewingToursModal .modal-close-btn,
body.dark-theme #createViewingTourModal .modal-close-btn,
body.dark-theme #submitViewingFeedbackModal .modal-close-btn,
body:not(.light-theme) #agentViewingToursModal .modal-close-btn,
body:not(.light-theme) #createViewingTourModal .modal-close-btn,
body:not(.light-theme) #submitViewingFeedbackModal .modal-close-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}
body.dark-theme #agentViewingToursModal .modal-close-btn:hover,
body.dark-theme #createViewingTourModal .modal-close-btn:hover,
body.dark-theme #submitViewingFeedbackModal .modal-close-btn:hover,
body:not(.light-theme) #agentViewingToursModal .modal-close-btn:hover,
body:not(.light-theme) #createViewingTourModal .modal-close-btn:hover,
body:not(.light-theme) #submitViewingFeedbackModal .modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
}

/* Dark Theme Form Body & Scrollable Containers */
body.dark-theme #createViewingTourModal form,
body.dark-theme #submitViewingFeedbackModal form,
body:not(.light-theme) #createViewingTourModal form,
body:not(.light-theme) #submitViewingFeedbackModal form,
body.dark-theme #createViewingTourModal .vt-form-body,
body.dark-theme #submitViewingFeedbackModal .vt-form-body,
body:not(.light-theme) #createViewingTourModal .vt-form-body,
body:not(.light-theme) #submitViewingFeedbackModal .vt-form-body,
body.dark-theme .vt-cards-body,
body:not(.light-theme) .vt-cards-body {
  background: #0b1120 !important;
  color: #f8fafc !important;
}

body.dark-theme #createViewingTourModal .vt-form-footer,
body.dark-theme #submitViewingFeedbackModal .vt-form-footer,
body:not(.light-theme) #createViewingTourModal .vt-form-footer,
body:not(.light-theme) #submitViewingFeedbackModal .vt-form-footer {
  background: #0f172a !important;
  border-top: 1.5px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.45) !important;
}

/* Dark Theme Tab Bar */
body.dark-theme .viewing-tours-tabs-bar,
body:not(.light-theme) .viewing-tours-tabs-bar {
  background: rgba(15, 23, 42, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Dark Theme Inactive Tab Buttons */
body.dark-theme .viewing-tour-tab-btn,
body:not(.light-theme) .viewing-tour-tab-btn {
  background: rgba(30, 41, 59, 0.85) !important;
  color: #e2e8f0 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
}
body.dark-theme .viewing-tour-tab-btn:hover,
body:not(.light-theme) .viewing-tour-tab-btn:hover {
  background: rgba(51, 65, 85, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}
body.dark-theme .viewing-tour-tab-btn .viewing-tour-badge,
body:not(.light-theme) .viewing-tour-tab-btn .viewing-tour-badge {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-size: 0.70rem !important;
  padding: 2px 7px !important;
  font-weight: 900 !important;
}

/* Dark Theme Active Tabs */
body.dark-theme .viewing-tour-tab-btn.tab-upcoming.active,
body:not(.light-theme) .viewing-tour-tab-btn.tab-upcoming.active {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #ffffff !important;
  border: 1.5px solid #fbbf24 !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.45) !important;
}
body.dark-theme .viewing-tour-tab-btn.tab-upcoming.active .viewing-tour-badge,
body:not(.light-theme) .viewing-tour-tab-btn.tab-upcoming.active .viewing-tour-badge {
  background: #ffffff !important;
  color: #92400e !important;
}

body.dark-theme .viewing-tour-tab-btn.tab-pending.active,
body:not(.light-theme) .viewing-tour-tab-btn.tab-pending.active {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: #ffffff !important;
  border: 1.5px solid #f87171 !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.45) !important;
}
body.dark-theme .viewing-tour-tab-btn.tab-pending.active .viewing-tour-badge,
body:not(.light-theme) .viewing-tour-tab-btn.tab-pending.active .viewing-tour-badge {
  background: #ffffff !important;
  color: #991b1b !important;
}

body.dark-theme .viewing-tour-tab-btn.tab-completed.active,
body:not(.light-theme) .viewing-tour-tab-btn.tab-completed.active {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #ffffff !important;
  border: 1.5px solid #34d399 !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.45) !important;
}
body.dark-theme .viewing-tour-tab-btn.tab-completed.active .viewing-tour-badge,
body:not(.light-theme) .viewing-tour-tab-btn.tab-completed.active .viewing-tour-badge {
  background: #ffffff !important;
  color: #065f46 !important;
}

/* Dark Theme Empty State */
body.dark-theme .vt-empty-container .vt-empty-icon,
body:not(.light-theme) .vt-empty-container .vt-empty-icon {
  color: #f59e0b !important;
  opacity: 0.85 !important;
  font-size: 3.2rem !important;
  margin-bottom: 14px !important;
  display: block !important;
}
body.dark-theme .vt-empty-container .vt-empty-title,
body:not(.light-theme) .vt-empty-container .vt-empty-title {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin-bottom: 8px !important;
}
body.dark-theme .vt-empty-container .vt-empty-desc,
body:not(.light-theme) .vt-empty-container .vt-empty-desc {
  font-size: 0.88rem !important;
  color: #cbd5e1 !important;
  max-width: 420px !important;
  margin: 0 auto 20px !important;
  line-height: 1.5 !important;
}

/* Dark Theme Viewing Tour Cards */
body.dark-theme .viewing-tour-card,
body:not(.light-theme) .viewing-tour-card {
  background: rgba(15, 23, 42, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
  color: #f8fafc !important;
}
body.dark-theme .viewing-tour-card .vt-client-name,
body:not(.light-theme) .viewing-tour-card .vt-client-name {
  color: #ffffff !important;
  font-weight: 900 !important;
}
body.dark-theme .viewing-tour-card .vt-top-border,
body:not(.light-theme) .viewing-tour-card .vt-top-border {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.dark-theme .viewing-tour-card .vt-bottom-border,
body:not(.light-theme) .viewing-tour-card .vt-bottom-border {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.dark-theme .viewing-tour-card .vt-meta-label,
body:not(.light-theme) .viewing-tour-card .vt-meta-label {
  color: #cbd5e1 !important;
  font-weight: 800 !important;
}
body.dark-theme .viewing-tour-card .vt-meta-sub,
body:not(.light-theme) .viewing-tour-card .vt-meta-sub {
  color: #94a3b8 !important;
}
body.dark-theme .viewing-tour-card .vt-prop-item,
body:not(.light-theme) .viewing-tour-card .vt-prop-item {
  background: rgba(15, 23, 42, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
}
body.dark-theme .viewing-tour-card .vt-prop-title,
body:not(.light-theme) .viewing-tour-card .vt-prop-title {
  color: #ffffff !important;
  font-weight: 800 !important;
}
body.dark-theme .viewing-tour-card .vt-prop-sub,
body:not(.light-theme) .viewing-tour-card .vt-prop-sub {
  color: #94a3b8 !important;
}
body.dark-theme .viewing-tour-card .vt-feedback-box,
body:not(.light-theme) .viewing-tour-card .vt-feedback-box {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
}
body.dark-theme .viewing-tour-card .vt-feedback-notes,
body:not(.light-theme) .viewing-tour-card .vt-feedback-notes {
  color: #cbd5e1 !important;
}
body.dark-theme .viewing-tour-card .vt-alt-box,
body:not(.light-theme) .viewing-tour-card .vt-alt-box {
  background: rgba(124, 58, 237, 0.15) !important;
  border: 1.5px dashed #8b5cf6 !important;
}
body.dark-theme .viewing-tour-card .vt-alt-title,
body:not(.light-theme) .viewing-tour-card .vt-alt-title {
  color: #c4b5fd !important;
}
body.dark-theme .viewing-tour-card .vt-alt-text,
body:not(.light-theme) .viewing-tour-card .vt-alt-text {
  color: #e2e8f0 !important;
}

/* Dark Theme Forms in Create & Feedback Modals */
body.dark-theme #createViewingTourModal label,
body.dark-theme #submitViewingFeedbackModal label,
body:not(.light-theme) #createViewingTourModal label,
body:not(.light-theme) #submitViewingFeedbackModal label {
  color: #f1f5f9 !important;
  font-weight: 800 !important;
}
body.dark-theme #createViewingTourModal input,
body.dark-theme #createViewingTourModal select,
body.dark-theme #createViewingTourModal textarea,
body.dark-theme #submitViewingFeedbackModal input,
body.dark-theme #submitViewingFeedbackModal select,
body.dark-theme #submitViewingFeedbackModal textarea,
body:not(.light-theme) #createViewingTourModal input,
body:not(.light-theme) #createViewingTourModal select,
body:not(.light-theme) #createViewingTourModal textarea,
body:not(.light-theme) #submitViewingFeedbackModal input,
body:not(.light-theme) #submitViewingFeedbackModal select,
body:not(.light-theme) #submitViewingFeedbackModal textarea {
  background: #1e293b !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
}
body.dark-theme #createViewingTourModal input:focus,
body.dark-theme #createViewingTourModal select:focus,
body.dark-theme #createViewingTourModal textarea:focus,
body.dark-theme #submitViewingFeedbackModal input:focus,
body.dark-theme #submitViewingFeedbackModal select:focus,
body.dark-theme #submitViewingFeedbackModal textarea:focus,
body:not(.light-theme) #createViewingTourModal input:focus,
body:not(.light-theme) #createViewingTourModal select:focus,
body:not(.light-theme) #createViewingTourModal textarea:focus,
body:not(.light-theme) #submitViewingFeedbackModal input:focus,
body:not(.light-theme) #submitViewingFeedbackModal select:focus,
body:not(.light-theme) #submitViewingFeedbackModal textarea:focus {
  border-color: #f59e0b !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3) !important;
}
body.dark-theme #createViewingTourModal .vt-props-picker-box,
body:not(.light-theme) #createViewingTourModal .vt-props-picker-box {
  background: rgba(15, 23, 42, 0.6) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
}
body.dark-theme #createViewingTourModal .vt-props-picker-box select,
body:not(.light-theme) #createViewingTourModal .vt-props-picker-box select {
  background: #1e293b !important;
  color: #ffffff !important;
}
body.dark-theme #submitViewingFeedbackModal .feedback-prop-card,
body:not(.light-theme) #submitViewingFeedbackModal .feedback-prop-card {
  background: rgba(15, 23, 42, 0.5) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
}
body.dark-theme #submitViewingFeedbackModal .feedback-prop-card .prop-title-text,
body:not(.light-theme) #submitViewingFeedbackModal .feedback-prop-card .prop-title-text {
  color: #ffffff !important;
}
body.dark-theme #submitViewingFeedbackModal .vt-alt-req-box,
body:not(.light-theme) #submitViewingFeedbackModal .vt-alt-req-box {
  background: rgba(139, 92, 246, 0.15) !important;
  border: 1.5px solid rgba(139, 92, 246, 0.35) !important;
}

/* Mobile Responsiveness for Viewing Tour Modals */
@media (max-width: 640px) {
  #createViewingTourModal.modal-overlay,
  #submitViewingFeedbackModal.modal-overlay {
    padding: 6px !important;
    align-items: center !important;
    overflow-y: auto !important;
  }

  #createViewingTourModal .modal-card,
  #submitViewingFeedbackModal .modal-card {
    width: 98vw !important;
    max-width: 98vw !important;
    max-height: 94vh !important;
    height: 94vh !important;
    border-radius: 16px !important;
  }

  #createViewingTourModal .vt-modal-header,
  #submitViewingFeedbackModal .vt-modal-header {
    padding: 10px 14px !important;
  }

  #createViewingTourModal .vt-form-body,
  #submitViewingFeedbackModal .vt-form-body {
    padding: 12px 14px 18px !important;
    gap: 10px !important;
  }

  #createViewingTourModal .vt-form-footer,
  #submitViewingFeedbackModal .vt-form-footer {
    padding: 10px 14px !important;
    gap: 8px !important;
  }

  #createViewingTourModal .vt-form-footer .btn,
  #submitViewingFeedbackModal .vt-form-footer .btn {
    padding: 9px 12px !important;
    font-size: 0.82rem !important;
  }
}