:root {
  --pv-primary: #0b215b;
  --pv-accent: #2563eb;
  --pv-accent-2: #7c3aed;
  --pv-ink: #0f172a;
  --pv-muted: #64748b;
  --pv-soft: #f8fafc;
  --pv-line: #e2e8f0;
  --pv-card: #ffffff;
  --pv-cream: #fbfaf7;
  --pv-gold: #c8a45d;
  --pv-shadow: 0 24px 80px rgba(11, 33, 91, .12);
  --pv-shadow-soft: 0 14px 40px rgba(15, 23, 42, .08);
  --pv-radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html {
  font-size: 15px;
}
body {
  min-height: 100vh;
  margin: 0;
  color: #334155; /* Neutral readable color */
  background:
    radial-gradient(circle at 12% 2%, rgba(37, 99, 235, .09), transparent 26rem),
    radial-gradient(circle at 92% 10%, rgba(200, 164, 93, .12), transparent 22rem),
    linear-gradient(180deg, #fff 0%, #f8fafc 45%, #fff 100%);
  font-family: "Inter", "Manrope", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0;
  /* Clearance for the fixed navbar wrapper: navbar top:10px + height:58px + gap:12px = 80px */
  padding-top: 80px;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.site-main { overflow-x: clip; }

/* ============================================================
   Typography Hierarchy & Color Scale
   ============================================================ */

/* Primary Headings: Brand primary with weight 800 */
h1, .h1, .display-1, .display-2, .display-3, .display-4, .display-5, .pv-serif {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 60px !important;
  font-weight: 800 !important;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--pv-primary);
}

h2, .h2, .display-6 {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 42px !important;
  font-weight: 800 !important;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--pv-primary);
}

/* Secondary Headings: Softer neutral-800 color with weight 700 */
h3, .h3 {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #1e293b;
}

h4, .h4 {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #1e293b;
}

/* Helper typography scale utilities */
.body-large, .fs-5 {
  font-size: 18px !important;
  font-weight: 500;
  line-height: 1.55;
  color: #334155;
}

p, .body-normal, .fs-6 {
  font-size: 16px !important;
  font-weight: 400;
  line-height: 1.5;
  color: #334155;
}

.small, small, .small-text, .fs-7 {
  font-size: 14px !important;
  font-weight: 500;
  line-height: 1.45;
  color: #475569;
}

.caption, .caption-text, .pv-muted, .text-secondary {
  font-size: 13px !important;
  font-weight: 500;
  line-height: 1.4;
  color: var(--pv-muted) !important;
}

/* Card, Form and Table consistent overrides */
.property-title, .pv-card strong, .pm-command-search strong, .pm-panel-head strong {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #1e293b !important;
}

.property-price {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-weight: 800 !important;
  font-size: 24px !important;
  color: var(--pv-accent) !important;
}

label, .form-label {
  font-family: "Inter", "Manrope", system-ui, sans-serif;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #334155 !important;
}

.form-control, .form-select {
  font-family: "Inter", "Manrope", system-ui, sans-serif;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #1e293b !important;
}

.form-control::placeholder {
  color: #94a3b8 !important;
  font-size: 14px !important;
}

table, .table {
  font-family: "Inter", "Manrope", system-ui, sans-serif;
  width: 100%;
  border-collapse: collapse;
}

thead th {
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 12px !important;
  font-weight: 800 !important; /* Header emphasis */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1e293b !important;
  background-color: #f8fafc !important;
  padding: 14px 16px !important;
  border-bottom: 2px solid #e2e8f0 !important;
}

tbody td {
  font-size: 14px !important;
  color: #334155 !important;
  padding: 14px 16px !important; /* Row readability and padding */
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle;
}

tbody tr {
  transition: background-color 0.15s ease;
}

tbody tr:hover {
  background-color: rgba(37, 99, 235, 0.02) !important; /* Hover row readability */
}

/* Numeric & alignment formatting helpers for reports columns */
.text-numeric, [data-numeric] {
  font-variant-numeric: tabular-nums;
  font-family: "Inter", monospace;
  font-weight: 600;
}

.fw-black { font-weight: 900; }
.pv-eyebrow {
  
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--pv-primary);
  background: rgba(37, 99, 235, .08);
  border: 1px solid rgba(37, 99, 235, .12);
  padding: .48rem .8rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.pv-card {
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(226, 232, 240, .9);
  box-shadow: var(--pv-shadow-soft);
  border-radius: var(--pv-radius);
}
.pv-glass {
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: var(--pv-shadow);
  backdrop-filter: blur(22px);
  border-radius: var(--pv-radius);
}
.glass { background: rgba(255,255,255,.88); border: 1px solid var(--pv-line); box-shadow: var(--pv-shadow-soft); border-radius: var(--pv-radius); }
.pv-btn, .btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 44px;
  padding: .75rem 1.15rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 800;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease !important;
}
.pv-btn-primary, .btn-accent {
  color: #fff !important;
  background: linear-gradient(135deg, var(--pv-primary), var(--pv-accent));
  box-shadow: 0 14px 35px rgba(37, 99, 235, .28);
}
.pv-btn-primary:hover, .btn-accent:hover {
  border-color: rgba(99,102,241,.18) !important;
  box-shadow:
    0 0 0 1px rgba(99,102,241,.08),
    0 8px 24px rgba(99,102,241,.06) !important;
}
.pv-btn-ghost { color: var(--pv-primary); background: #fff; border-color: var(--pv-line); }
.pv-btn-ghost:hover {
  border-color: rgba(99,102,241,.18) !important;
  box-shadow:
    0 0 0 1px rgba(99,102,241,.08),
    0 8px 24px rgba(99,102,241,.06) !important;
}

/* ── Navigation base layer (structure only — glass applied below) ── */
.pv-navbar {
  position: sticky;
  top: 12px;
  z-index: 1050;
  max-width: 1680px;
  width: calc(100% - 48px);
  margin: 12px auto 0;
  border-radius: 20px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 40px rgba(15,23,42,0.15);
  padding: 0;
  transition: background 300ms ease, box-shadow 300ms ease, backdrop-filter 300ms ease;
}
.pv-navbar.navbar-scrolled {
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 16px 56px rgba(15,23,42,0.24), inset 0 1px 0 rgba(255,255,255,0.08);
}
.pv-navbar.navbar-open {
  background: rgba(8,18,38,0.88);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
}
.pv-nav-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  min-height: 62px;
  padding: 0.55rem 1.75rem;
  /* kill old card styling */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  margin: 0;
}
/* Brand */
.pv-brand { display: inline-flex; align-items: center; gap: .7rem; min-width: 0; flex-shrink: 0; }
.pv-brand-mark {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--pv-primary), var(--pv-accent));
  box-shadow: 0 8px 20px rgba(37,99,235,.30);
  flex-shrink: 0;
}
.pv-brand strong { display: block; font-size: 1rem; color: #fff; line-height: 1; }
.pv-brand small  { display: block; color: rgba(255,255,255,0.55); font-size: .7rem; margin-top: .18rem; }
/* Nav links */
.pv-nav-links { display: flex; align-items: center; justify-content: center; gap: .1rem; }
.pv-nav-links a {
  color: rgba(255,255,255,0.78);
  padding: .52rem .88rem;
  border-radius: 10px;
  font-weight: 500;
  font-size: .875rem;
  letter-spacing: .01em;
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}
.pv-nav-links a:hover {
  color: #fff;
  background: rgba(255,255,255,0.10);
}
.pv-nav-links a.active {
  color: #fff;
  background: rgba(255,255,255,0.15);
  font-weight: 600;
}
/* Actions */
.pv-nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; flex-shrink: 0; }
/* Icon buttons */
.pv-icon-action {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.85);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  cursor: pointer;
}
.pv-icon-action:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.28);
  color: #fff;
}
/* Notification dot */
.notify-dot { position: relative; }
.notify-dot::after {
  content: ""; position: absolute; right: 7px; top: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #ef4444; border: 1.5px solid rgba(255,255,255,0.3);
}
/* Avatar */
.pv-avatar {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--pv-accent), var(--pv-accent-2));
  font-weight: 700; font-size: .82rem; letter-spacing: .02em;
  border: 2px solid rgba(255,255,255,0.25);
  flex-shrink: 0;
  object-fit: cover;
}
/* Mobile hamburger */
.pv-mobile-toggle {
  display: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  width: 40px; height: 40px;
  border-radius: 10px;
  color: rgba(255,255,255,0.88);
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1.25rem;
  transition: background .2s ease;
}
.pv-mobile-toggle:hover { background: rgba(255,255,255,0.18); }

/* Hero */
.pv-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 5rem 0 4rem;
}
.pv-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .92;
}
.pv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15,23,42,0.45) 0%, rgba(15,23,42,0.25) 40%, transparent 100%),
    radial-gradient(circle at 80% 50%, rgba(37,99,235,.12), transparent 28rem);
  pointer-events: none;
}
.pv-hero-content { position: relative; z-index: 2; }
.pv-hero h1 {
  max-width: 760px;
  font-size: clamp(3.8rem, 5vw, 5.5rem) !important;
  line-height: 0.95 !important;
  color: var(--pv-primary);
  margin: 1.2rem 0;
}
.pv-hero-copy { max-width: 690px; font-size: 1.15rem; color: #475569; line-height: 1.8; }
.pv-hero-search {
  display: grid;
  grid-template-columns: 1.4fr .9fr .9fr .8fr auto;
  gap: .65rem;
  margin-top: 1.5rem;
  max-width: 980px;
  padding: 24px 28px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
}
.pv-hero-search .form-control, .pv-hero-search .form-select, .filter-panel .form-control, .filter-panel .form-select {
  border: 1px solid var(--pv-line);
  background: #fff;
  border-radius: 14px;
  min-height: 52px;
  color: var(--pv-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.pv-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
  max-width: 900px;
}
.pv-stat-strip .stat-mini { padding: 1.1rem 1.2rem; }
.stat-mini strong { display: block; font-size: 1.6rem; color: var(--pv-primary); }
.stat-mini span { color: var(--pv-muted); font-size: .88rem; }

/* Property cards */
.property-card-premium {
  position: relative;
  overflow: hidden;
  height: 100%;
  background: var(--pv-card);
  border: 1px solid var(--pv-line);
  border-radius: 30px;
  box-shadow: 0 16px 42px rgba(15,23,42,.08);
  transform-style: preserve-3d;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important;
}
.property-card-premium:hover {
  transform: none !important;
  border-color: rgba(99,102,241,.18) !important;
  box-shadow:
    0 0 0 1px rgba(99,102,241,.08),
    0 8px 24px rgba(99,102,241,.06) !important;
}
.property-card-premium .property-media {
  position: relative;
  height: 245px;
  overflow: hidden;
  border-radius: 28px 28px 0 0;
}
.property-card-premium .property-media img,
.detail-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.property-card-premium:hover .property-media img { transform: none !important; }
.fallback-img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  background:
    linear-gradient(135deg, rgba(11,33,91,.78), rgba(37,99,235,.28)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='520' viewBox='0 0 900 520'%3E%3Crect width='900' height='520' fill='%23dbeafe'/%3E%3Cpath d='M0 390L180 250L310 330L520 170L900 360V520H0z' fill='%230b215b' fill-opacity='.15'/%3E%3Cpath d='M250 360h390v160H250z' fill='%23fff' fill-opacity='.58'/%3E%3Cpath d='M300 300h300v220H300z' fill='%232563eb' fill-opacity='.18'/%3E%3C/svg%3E");
  background-size: cover;
}
.media-gradient { position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(180deg, transparent, rgba(11,33,91,.76)); }
.property-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .46rem .72rem;
  border-radius: 999px;
  color: var(--pv-primary);
  background: rgba(255,255,255,.9);
  box-shadow: 0 8px 20px rgba(15,23,42,.12);
  font-size: .78rem;
  font-weight: 900;
}
.floating-save {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  color: var(--pv-primary);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(15,23,42,.14);
  transition: transform .2s ease, color .2s ease;
}
.floating-save:hover { transform: scale(1.08); color: #ef4444; }
.quick-view {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  transform: translateY(12px);
  opacity: 0;
  transition: .28s ease;
}
.property-card-premium:hover .quick-view { transform: translateY(0); opacity: 1; }
.property-card-body { padding: 1.35rem; }
.property-price { color: var(--pv-accent); font-size: 1.65rem; font-weight: 900; letter-spacing: -.04em; }
.property-title { color: var(--pv-ink); font-size: 1.08rem; font-weight: 900; margin: .35rem 0; line-height: 1.35; }
.property-location { color: var(--pv-muted); display: flex; align-items: center; gap: .35rem; font-size: .9rem; }
.property-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pv-line);
  color: #475569;
  font-weight: 700;
  font-size: .86rem;
}

/* Listing/detail */
.page-hero {
  padding: 3.5rem 0 3rem;
  background: linear-gradient(180deg, #fff, #f8fafc);
  border-bottom: 1px solid var(--pv-line);
}
.listing-grid-shell {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 2rem;
}
.filter-panel {
  padding: 1.4rem;
  position: sticky;
  top: 108px;
  transform: none !important;
  transition: none !important;
  box-shadow: var(--pv-shadow-soft) !important;
  border-color: rgba(226, 232, 240, 0.9) !important;
}
.filter-panel::before {
  display: none !important;
}
.filter-panel:hover {
  transform: none !important;
  box-shadow: var(--pv-shadow-soft) !important;
  border-color: rgba(226, 232, 240, 0.9) !important;
}
.filter-panel .form-control, .filter-panel .form-select { min-height: 48px; }
.listing-tools { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.map-panel { height: 440px; overflow: hidden; border-radius: var(--pv-radius); }
.map-panel > div { min-height: 100%; height: 100%; }
.detail-showcase { padding: 3rem 0 6rem; }
.detail-gallery {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 1rem;
}
.detail-gallery-main { min-height: 560px; overflow: hidden; border-radius: 36px; }
.detail-gallery-side { display: grid; gap: 1rem; }
.detail-tile { min-height: 270px; overflow: hidden; border-radius: 28px; background: #dbeafe; }
.detail-summary {
  position: sticky;
  top: 110px;
  padding: 1.4rem;
}
.detail-price { color: var(--pv-primary); font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 900; letter-spacing: -.05em; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 0 14px;
  height: 34px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--pv-primary);
  font-weight: 800;
  font-size: 13px;
}
.amenity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.amenity-item { padding: 1rem; }
.amenity-item i { color: var(--pv-accent); font-size: 1.35rem; }

/* Dashboards */
.dashboard-shell {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: calc(100vh - 92px);
  background: #f8fafc;
}
.dashboard-sidebar {
  padding: 1.5rem;
  border-right: 1px solid var(--pv-line);
  background: rgba(255,255,255,.72);
  position: sticky;
  top: 68px;
  height: calc(100vh - 68px);
  min-height: calc(100vh - 68px);
  overflow-y: auto;
}
.dashboard-main { padding: 2.4rem; min-width: 0; }
.dash-nav-label { color: var(--pv-muted); font-size: .78rem; text-transform: uppercase; font-weight: 700; letter-spacing: .12em; margin: 1.4rem 0 .7rem; }
.dash-link {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .82rem .9rem;
  border-radius: 16px;
  color: #475569;
  font-weight: 600; /* Sidebar labels and link readability */
  margin-bottom: .35rem;
  font-size: .92rem;
  transition: all 0.2s ease;
}
.dash-link.active { background: rgba(37, 99, 235, 0.08); color: var(--pv-primary); font-weight: 700; border-left: 3px solid var(--pv-accent); border-radius: 0 16px 16px 0; }
.dash-link:hover { background: #eff6ff; color: var(--pv-primary); }
.dashboard-hero {
  padding: 2.25rem !important;
  background: linear-gradient(135deg, #5b8ef5 0%, #a87cf8 100%) !important;
  color: #fff !important;
  border-radius: 34px;
  box-shadow: 0 24px 60px rgba(99,102,241,.18) !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}
.dashboard-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 60%);
  border-radius: inherit;
  pointer-events: none;
}
.dashboard-hero h1, .dashboard-hero .h1, .dashboard-hero .display-5 {
  color: #ffffff !important;
  text-shadow: 0 1px 8px rgba(80,50,180,.18);
}
.dashboard-hero .pv-muted { color: rgba(255,255,255,.94) !important; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.kpi-card { padding: 1.25rem; position: relative; overflow: hidden; }
.kpi-card i {
  position: absolute;
  right: 1.1rem;
  top: 1.1rem;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--pv-accent);
  background: #eff6ff;
}
.kpi-card span { color: var(--pv-muted); font-weight: 700; }
.kpi-card strong { display: block; margin-top: .6rem; color: var(--pv-ink); font-size: 2rem; letter-spacing: -.04em; }
a.kpi-card { transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important; }
a.kpi-card:hover {
  transform: none !important;
  border-color: rgba(99,102,241,.18) !important;
  box-shadow:
    0 0 0 1px rgba(99,102,241,.08),
    0 8px 24px rgba(99,102,241,.06) !important;
}
.activity {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--pv-line);
  color: var(--pv-ink);
}
.activity span { color: var(--pv-muted); }
.pipeline-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.pipeline-col { min-height: 260px; padding: 1rem; background: #f8fafc; border: 1px solid var(--pv-line); border-radius: 24px; }
.lead-pill { padding: .9rem; margin-top: .8rem; border-radius: 18px; background: #fff; box-shadow: var(--pv-shadow-soft); }

/* Footer/auth/forms */
.pv-footer { padding: 5rem 0 2rem; background: #fff; border-top: 1px solid var(--pv-line); }
.pv-footer h6 { color: var(--pv-primary); font-weight: 900; margin-bottom: 1rem; }
.pv-footer a:not(.pv-brand) { display: block; color: var(--pv-muted); margin: .45rem 0; }
.pv-footer-bottom { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--pv-line); color: var(--pv-muted); font-size: .9rem; }
.city-tile {
  position: relative;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease;
}
.city-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(37,99,235,.1), transparent 58%);
  opacity: 0;
  transition: opacity .28s ease;
}
.city-tile:hover { transform: translateY(-5px); box-shadow: var(--pv-shadow); }
.city-tile:hover::before { opacity: 1; }
.city-tile span { position: relative; font-size: 1.5rem; color: var(--pv-primary); font-weight: 900; }
.city-tile small, .city-tile i { position: relative; color: var(--pv-muted); }
.fallback-img.big { min-height: 100%; }
.auth-screen { min-height: 82vh; display: grid; place-items: center; padding: 5rem 1rem; background: radial-gradient(circle at 15% 0%, rgba(37,99,235,.12), transparent 26rem), #fff; }
.auth-card { width: min(460px, 100%); padding: 2rem; }
.auth-card.wide { width: min(760px, 100%); }
.auth-card p { display: grid; gap: .4rem; margin-bottom: 1rem; }
.auth-card input, .auth-card select, .auth-card textarea, .glass input, .glass select, .glass textarea, .pv-card input, .pv-card select, .pv-card textarea {
  border: 1px solid var(--pv-line) !important;
  background: #fff !important;
  color: var(--pv-ink) !important;
  border-radius: 16px !important;
  min-height: 48px;
}
.toast-stack { position: fixed; top: 96px; right: 24px; width: min(360px, calc(100vw - 48px)); z-index: 2000; }
.pv-toast { padding: 1rem 1.1rem; margin-bottom: .8rem; }

@media (max-width: 1200px) {
  .pv-hero-search { grid-template-columns: repeat(2, 1fr); }
  .pv-hero-search button { grid-column: 1 / -1; }
  .listing-grid-shell { grid-template-columns: 1fr; }
  .filter-panel { position: relative; top: 0; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .pipeline-board { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 992px) {
  .pv-nav-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  .pv-mobile-toggle {
    display: grid !important;
  }
  .pv-nav-actions {
    display: flex !important;
    gap: 0.4rem !important;
    margin-left: auto !important;
    align-items: center !important;
  }
  .pv-nav-links {
    width: 100% !important;
    display: none;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.75rem 0 !important;
    gap: 0.25rem !important;
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
    margin-top: 0.75rem !important;
  }
  .pv-nav-links.is-open {
    display: flex !important;
  }
  .pv-nav-links a {
    padding: 0.8rem 1rem !important;
    border-radius: 12px !important;
    display: block !important;
    width: 100% !important;
  }
  .dashboard-shell { grid-template-columns: 1fr; }
  .dashboard-sidebar { position: relative; top: 0; height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: .25rem; }
  .dashboard-main { padding: 1.25rem; }
  .detail-gallery { grid-template-columns: 1fr; }
  .detail-gallery-main { min-height: 360px; }
  .amenity-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .pv-section { padding: 4rem 0; }
  .pv-hero { min-height: auto; padding: 4rem 0 3rem; }
  .pv-hero h1 { font-size: 3.4rem; }
  .pv-hero-search, .pv-stat-strip, .kpi-grid, .pipeline-board { grid-template-columns: 1fr; }
  .property-card-premium .property-media { height: 220px; }
  .dashboard-sidebar { grid-template-columns: 1fr; }
  .dashboard-hero { padding: 1.35rem; }
}



/*   Premium light repair layer */

/* Phase 8: Skeleton Loaders */
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 8px;
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-card { height: 320px; border-radius: 28px; margin-bottom: 1.5rem; }
.skeleton-text { height: 1.2rem; margin-bottom: 0.5rem; width: 100%; }
.skeleton-title { height: 2rem; margin-bottom: 1rem; width: 60%; }
.skeleton-circle { width: 48px; height: 48px; border-radius: 50%; }

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.loading-overlay.is-hidden { opacity: 0; pointer-events: none; }

/* ============================================================
   PREMIUM THEME LAYER
   ============================================================ */
  body {
    color: var(--text-primary);
    background:
      radial-gradient(circle at 78% 8%, rgba(139,92,246,.13), transparent 30rem),
      radial-gradient(circle at 12% 18%, rgba(244,114,182,.09), transparent 24rem),
      linear-gradient(180deg, #f8fafc 0%, #eef2ff 42%, #f8fafc 100%);
  }
  
  .container, .container-fluid {
    width: min(100% - 2rem, 1320px);
    margin-inline: auto;
  }
  .container-fluid { width: min(100% - 1rem, 1880px); }
  .row { display: flex; flex-wrap: wrap; margin-inline: -.75rem; }
  .row > * { padding-inline: .75rem; width: 100%; min-width: 0; }
  .g-2 { gap: .5rem 0; }
  .g-3 { gap: .75rem 0; }
  .g-4 { gap: 1rem 0; }
  .g-5 { gap: 1.25rem 0; }
  .col-6 { flex: 0 0 50%; max-width: 50%; }
  .col-12 { flex: 0 0 100%; max-width: 100%; }
  .d-flex { display: flex !important; }
  .vstack { display: flex; flex-direction: column; }
  .align-items-center { align-items: center !important; }
  .align-items-start { align-items: flex-start !important; }
  .align-items-end { align-items: flex-end !important; }
  .justify-content-between { justify-content: space-between !important; }
  .justify-content-end { justify-content: flex-end !important; }
  .gap-2 { gap: .5rem !important; }
  .gap-3 { gap: .75rem !important; }
  .flex-wrap { flex-wrap: wrap !important; }
  .flex-column { flex-direction: column !important; }
  .text-center { text-align: center !important; }
  .text-lg-end { text-align: right !important; }
  .w-100 { width: 100% !important; }
  .mb-0 { margin-bottom: 0 !important; }
  .mb-2 { margin-bottom: .5rem !important; }
  .mb-3 { margin-bottom: .75rem !important; }
  .mb-4 { margin-bottom: 1rem !important; }
  .mb-5 { margin-bottom: 1.5rem !important; }
  .mt-2 { margin-top: .5rem !important; }
  .mt-3 { margin-top: .75rem !important; }
  .mt-4 { margin-top: 1rem !important; }
  .py-5 { padding-block: 3rem !important; }
  .p-3 { padding: .75rem !important; }
  .p-4 { padding: 1rem !important; }
  .small { font-size: .875rem !important; }
  .fs-5 { font-size: 1.08rem !important; }
  .display-3 { font-size: clamp(2.4rem, 5vw, 4rem); }
  .display-4 { font-size: clamp(2rem, 4vw, 3.4rem); }
  .display-5 { font-size: clamp(1.75rem, 3vw, 2.6rem); }
  .display-6 { font-size: clamp(1.45rem, 2.4vw, 2rem); }
  .fw-bold { font-weight: 800 !important; }
  .form-control, .form-select {
    display: block;
    width: 100%;
    padding: .75rem .9rem;
    border-radius: 16px;
  }
  @media (min-width: 768px) {
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  }
  @media (min-width: 992px) {
    .col-lg-2 { flex: 0 0 16.666%; max-width: 16.666%; }
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-lg-5 { flex: 0 0 41.666%; max-width: 41.666%; }
    .col-lg-8 { flex: 0 0 66.666%; max-width: 66.666%; }
    .text-lg-end { text-align: right !important; }
    .flex-lg-row { flex-direction: row !important; }
    .align-items-lg-end { align-items: flex-end !important; }
  }
  @media (min-width: 1200px) {
    .col-xl-4 { flex: 0 0 33.333%; max-width: 33.333%; }
    .col-xl-5 { flex: 0 0 41.666%; max-width: 41.666%; }
    .col-xl-7 { flex: 0 0 58.333%; max-width: 58.333%; }
    .col-xl-8 { flex: 0 0 66.666%; max-width: 66.666%; }
  }
  
  .ambient-scene { opacity: .28; mix-blend-mode: multiply; }
  .pv-card, .pv-glass, .glass {
    background: rgba(255,255,255,.82);
    border-color: rgba(148,163,184,.42);
    box-shadow: 0 18px 55px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.9);
  }
  .pv-card::before, .pv-glass::before, .glass::before,
  .city-tile::after, .dashboard-hero::after, .pipeline-col::before,
  .lead-pill::before, .map-panel::before, .auth-card::before,
  .stat-mini::before, .activity::before, .detail-gallery-main::before,
  .detail-tile::before, .amenity-item::before, .listing-tools::before,
  .dash-link::before, .property-media::before {
    background:
      radial-gradient(circle at var(--pv-spot-x,50%) var(--pv-spot-y,50%), rgba(139,92,246,.22), transparent 14rem),
      linear-gradient(110deg, transparent 20%, rgba(244,114,182,.12) 46%, transparent 64%);
  }
  .pv-card.is-3d-active, .pv-glass.is-3d-active, .glass.is-3d-active,
  .city-tile.is-3d-active, .dashboard-hero.is-3d-active, .pipeline-col.is-3d-active,
  .lead-pill.is-3d-active, .map-panel.is-3d-active, .auth-card.is-3d-active,
  .stat-mini.is-3d-active, .activity.is-3d-active, .detail-gallery-main.is-3d-active,
  .detail-tile.is-3d-active, .amenity-item.is-3d-active, .listing-tools.is-3d-active,
  .dash-link.is-3d-active, .property-media.is-3d-active {
    border-color: rgba(139,92,246,.45);
    box-shadow: 0 24px 64px rgba(99,102,241,.18), 0 0 0 1px rgba(244,114,182,.12);
  }
  
  .pv-navbar.is-scrolled {
    background: rgba(248,250,252,.86);
    box-shadow: 0 12px 40px rgba(15,23,42,.08), 0 1px 0 rgba(148,163,184,.3);
  }
  .pv-nav-inner {
    background: rgba(255,255,255,.86);
    border-color: rgba(148,163,184,.42);
    box-shadow: 0 16px 46px rgba(15,23,42,.1), inset 0 1px 0 rgba(255,255,255,.9);
  }
  .pv-brand strong, .pm-panel-head strong, .property-title,
  .pm-floating-panel strong, .pm-op-card strong, .pm-role-card strong,
  .kpi-card strong, .activity, .pipeline-col strong, .lead-pill,
  .pv-footer h6, .auth-card label, h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
  }
  .pv-nav-links a, .pv-brand small, .pm-panel-head span, .dash-link,
  .property-location, .stat-mini span, .pm-op-card span, .pm-role-card span,
  .pm-city-card span, .pm-city-card small, .pv-footer a:not(.pv-brand),
  .pv-footer-bottom, .pm-floating-panel span {
    color: var(--text-secondary);
  }
  .pv-nav-links a:hover, .dash-link.active, .dash-link:hover {
    color: var(--accent);
    background: rgba(139,92,246,.1);
  }
  .notify-dot::after { border-color: #fff; }
  .pv-btn-ghost {
    color: var(--text-primary);
    background: rgba(255,255,255,.75);
    border-color: rgba(148,163,184,.5);
  }
  .pv-btn-ghost:hover {
    background: rgba(139,92,246,.1);
    border-color: rgba(139,92,246,.45);
    box-shadow: 0 10px 30px rgba(99,102,241,.18);
  }
  
  .pv-hero, .pm-hero {
    background:
      radial-gradient(circle at 76% 36%, rgba(139,92,246,.18), transparent 34rem),
      radial-gradient(circle at 40% 82%, rgba(244,114,182,.10), transparent 24rem),
      linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
  }
  .pv-hero::before, .pm-hero::before {
    background:
      linear-gradient(90deg, rgba(248,250,252,.98) 0%, rgba(248,250,252,.9) 42%, rgba(248,250,252,.62) 68%, rgba(248,250,252,.18) 100%),
      radial-gradient(circle at 82% 45%, rgba(139,92,246,.14), transparent 30rem);
  }
  .pv-hero h1, .pm-hero-copy h1 {
    background: linear-gradient(135deg, #111827 0%, #312e81 35%, #7c3aed 68%, #db2777 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .pv-hero-copy { color: var(--text-secondary); }
  .pm-command-search, .pv-hero-search { box-shadow: 0 22px 70px rgba(15,23,42,.1); }
  .pm-command-search label { color: #64748b; }
  .pm-command-search .form-control, .pm-command-search .form-select,
  .pv-hero-search .form-control, .pv-hero-search .form-select,
  .filter-panel .form-control, .filter-panel .form-select,
  .auth-card input, .auth-card select, .auth-card textarea,
  .glass input, .glass select, .glass textarea,
  .pv-card input, .pv-card select, .pv-card textarea {
    background: rgba(255,255,255,.88) !important;
    color: var(--text-primary) !important;
    border-color: rgba(148,163,184,.55) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  }
  .form-control::placeholder { color: #64748b; }
  .pm-filter-chips {
    display: flex; flex-wrap: wrap; gap: .7rem;
    margin-top: 1.25rem;
  }
  .chip {
    min-height: 42px;
    padding: .72rem 1.08rem;
    gap: .52rem;
    background: rgba(255,255,255,.8);
    color: #5b21b6;
    border-color: rgba(139,92,246,.28);
    box-shadow: 0 8px 24px rgba(99,102,241,.08);
  }
  
  .pm-command-stack {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 1.5rem;
    min-height: auto;
    align-content: center;
  }
  @media (min-width: 1200px) {
    .pm-command-stack {
      display: grid;
      grid-template-areas: 
        "holo holo"
        "panel-a panel-b";
      grid-template-columns: 1fr 1fr;
      gap: 1.25rem;
    }
    .pm-holo-panel { grid-area: holo; }
    .pm-panel-a { grid-area: panel-a; }
    .pm-panel-b { grid-area: panel-b; }
  }
  
  .pm-holo-panel {
    position: relative;
    right: auto; top: auto;
    width: 100%;
    background: rgba(255,255,255,.82);
    border-color: rgba(139,92,246,.32);
    box-shadow: 0 32px 85px rgba(99,102,241,.16), inset 0 1px 0 rgba(255,255,255,.9);
    transform: rotateY(-6deg) rotateX(2deg) !important;
  }
  .pm-floating-panel {
    position: relative;
    width: 100%;
    background: rgba(255,255,255,.88);
    box-shadow: 0 18px 45px rgba(15,23,42,.1);
  }
  .pm-panel-a { left: auto; top: auto; transform: rotateY(4deg) translateZ(10px) !important; }
  .pm-panel-b { right: auto; bottom: auto; transform: rotateY(-4deg) translateZ(15px) !important; }
  
  .pm-ring-core { box-shadow: 0 22px 55px rgba(139,92,246,.32), 0 0 34px rgba(168,85,247,.18); }
  .pm-mini-grid div {
    background: rgba(139,92,246,.08);
    border-color: rgba(139,92,246,.18);
  }
  .pm-mini-grid strong, .stat-mini strong { color: var(--accent); }
  
  .pm-ops-band, .page-hero {
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(238,242,255,.72));
    border-color: rgba(148,163,184,.35);
  }
  .pm-section-head {
    display: flex; justify-content: space-between; align-items: end;
    gap: 1.25rem; margin-bottom: 2rem;
  }
  .pm-featured-section { background: rgba(255,255,255,.36); }
  .property-swiper { padding: .35rem .1rem 3.3rem; overflow: hidden; }
  .property-swiper .swiper-wrapper {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .property-swiper .swiper-slide {
    height: auto;
    flex: 0 0 min(330px, 82vw);
    scroll-snap-align: start;
  }
  @media (min-width: 768px) {
    .property-swiper .swiper-slide { flex-basis: min(360px, 44vw); }
  }
  @media (min-width: 1100px) {
    .property-swiper .swiper-slide { flex-basis: min(360px, 27vw); }
  }
  .pm-carousel-controls {
    position: absolute; right: .25rem; bottom: .25rem;
    display: flex; gap: .6rem; z-index: 4;
  }
  
  .property-card-premium {
    background: rgba(255,255,255,.9);
    border-color: rgba(148,163,184,.42);
    box-shadow: 0 18px 42px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.9);
    border-radius: 24px;
    min-height: 100%;
  }
  .property-card-premium:hover, .property-card-premium.is-3d-active {
    border-color: rgba(99,102,241,.18) !important;
    box-shadow:
      0 0 0 1px rgba(99,102,241,.08),
      0 8px 24px rgba(99,102,241,.06) !important;
  }
  .property-card-premium .property-media {
    height: 190px;
    border-radius: 22px 22px 0 0;
  }
  .fallback-img {
    background:
      linear-gradient(135deg, rgba(99,102,241,.52), rgba(168,85,247,.32), rgba(244,114,182,.22)),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='520' viewBox='0 0 900 520'%3E%3Crect width='900' height='520' fill='%23eef2ff'/%3E%3Cpath d='M0 390L180 250L310 330L520 170L900 360V520H0z' fill='%238b5cf6' fill-opacity='.18'/%3E%3Cpath d='M250 360h390v160H250z' fill='%23111827' fill-opacity='.06'/%3E%3Cpath d='M300 300h300v220H300z' fill='%23a855f7' fill-opacity='.12'/%3E%3C/svg%3E");
    background-size: cover;
  }
  .media-gradient { background: linear-gradient(180deg, transparent, rgba(255,255,255,.92)); }
  .property-badge, .floating-save {
    background: rgba(255,255,255,.88);
    color: #6d28d9;
    border-color: rgba(139,92,246,.3);
    box-shadow: 0 8px 22px rgba(15,23,42,.1);
  }
  .property-card-body { padding: 1.12rem; }
  .property-price { font-size: 1.35rem; color: #4f46e5; }
  .property-title { font-size: 1rem; min-height: 2.7em; }
  .property-facts {
    color: #64748b;
    border-top-color: rgba(148,163,184,.28);
    font-size: .78rem;
  }
  .property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
  }
  .listing-grid-shell {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.25rem;
  }
  .filter-panel { padding: 1rem; }
  .listing-tools { background: rgba(255,255,255,.7); padding: 1rem; border-radius: 20px; }
  
  .map-panel {
    min-height: 440px;
    background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(238,242,255,.88));
  }
  .leaflet-container {
    width: 100%; height: 100%;
    min-height: 440px;
    border-radius: inherit;
    font-family: inherit;
  }
  .leaflet-popup-content-wrapper {
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(15,23,42,.18);
    padding: 0;
    overflow: hidden;
  }
  .leaflet-popup-content { margin: 0; min-width: 220px; }
  .leaflet-popup-tip-container { margin-top: -1px; }
  .pv-map-popup { overflow: hidden; border-radius: 18px; }
  .pv-popup-img {
    display: block; width: 100%; height: 130px;
    object-fit: cover; flex-shrink: 0;
  }
  .pv-popup-body {
    padding: .85rem 1rem 1rem;
  }
  .pv-popup-body strong {
    display: block; font-size: .88rem; font-weight: 700;
    color: #0f172a; line-height: 1.3; margin-bottom: .35rem;
  }
  .pv-popup-badge {
    display: inline-block; margin-bottom: .4rem;
    padding: .15rem .6rem; border-radius: 999px;
    font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    background: rgba(124,58,237,.12); color: #7c3aed;
    border: 1px solid rgba(124,58,237,.2);
  }
  .pv-popup-price {
    font-size: .9rem; font-weight: 800; color: #7c3aed; margin-bottom: .3rem;
  }
  .pv-popup-loc {
    font-size: .72rem; color: #64748b; margin-bottom: .5rem;
    display: flex; align-items: center; gap: .25rem;
  }
  .pv-popup-cta {
    display: flex; align-items: center; justify-content: center; gap: .35rem;
    width: 100%; padding: .45rem .8rem;
    border-radius: 8px; font-size: .75rem; font-weight: 700;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff !important; text-decoration: none !important;
    transition: opacity .15s;
  }
  .pv-popup-cta:hover { opacity: .88; }
  /* Cluster marker */
  .pv-cluster {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff; font-weight: 800; font-size: .85rem;
    box-shadow: 0 4px 16px rgba(124,58,237,.38);
    border: 1px solid rgba(255,255,255,.9);
  }
  .pv-map-fallback {
    height: 100%; min-height: 440px; padding: 1.5rem;
    background:
      linear-gradient(135deg, rgba(139,92,246,.08), rgba(244,114,182,.06)),
      repeating-linear-gradient(0deg, transparent, transparent 42px, rgba(148,163,184,.16) 43px),
      repeating-linear-gradient(90deg, transparent, transparent 42px, rgba(148,163,184,.16) 43px);
  }
  .pv-map-fallback-pin {
    display: inline-flex; align-items: center; gap: .55rem;
    margin: .35rem; padding: .65rem .85rem;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(139,92,246,.25);
    box-shadow: 0 10px 24px rgba(15,23,42,.08);
    color: #312e81; font-weight: 800;
  }
  /* Location picker map */
  #locationPickerMap {
    width: 100%; height: 340px;
    border-radius: 18px;
    border: 1px solid rgba(14,165,233,.3);
    cursor: crosshair;
  }
  .location-picker-wrap {
    position: relative;
  }
  .location-picker-wrap .picker-overlay-label {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    z-index: 9999; pointer-events: none;
    background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
    padding: .35rem 1rem; border-radius: 999px;
    font-size: .75rem; font-weight: 700; color: #0ea5e9;
    border: 1px solid rgba(14,165,233,.35);
    box-shadow: 0 4px 16px rgba(14,165,233,.18);
    white-space: nowrap;
  }
  #locationPickerHint {
    font-size: .76rem; color: #64748b; margin-top: .4rem;
    min-height: 1.2em;
  }
  .lat-lng-readonly {
    background: rgba(248,250,252,.85) !important;
    border-color: rgba(14,165,233,.3) !important;
    color: #0ea5e9 !important; font-weight: 700 !important;
    font-family: monospace;
  }


  .pm-dashboard-preview { padding: 1.2rem; }
  .pm-analytics-grid {
    display: grid;
    grid-template-columns: minmax(0,1.3fr) minmax(180px,.7fr);
    gap: 1rem;
  }
  .pm-analytics-kpis {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
  }
  .pm-chart-card {
    height: 220px;
    padding: .9rem;
    border-radius: 20px;
    background: rgba(248,250,252,.82);
    border: 1px solid rgba(148,163,184,.32);
  }
  .pv-chart-fallback {
    width: 100%; height: 100%; min-height: 160px;
    display: flex; align-items: end; gap: .55rem;
    padding: 1rem .35rem .4rem;
  }
  .pv-chart-fallback.is-trend span {
    flex: 1;
    border-radius: 999px 999px 6px 6px;
    background: linear-gradient(180deg, #8b5cf6, #c4b5fd);
    box-shadow: 0 8px 18px rgba(139,92,246,.22);
  }
  .pv-chart-fallback.is-donut {
    align-items: center; justify-content: center; flex-direction: column;
  }
  .pv-chart-donut {
    width: 132px; height: 132px; border-radius: 50%;
    background: conic-gradient(#8b5cf6 0 42%, #ec4899 42% 66%, #14b8a6 66% 84%, #f59e0b 84% 100%);
    box-shadow: inset 0 0 0 28px #fff, 0 14px 34px rgba(99,102,241,.18);
  }
  .pv-chart-legend {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .8rem;
    color: #475569; font-size: .78rem; font-weight: 800;
  }
  .pv-chart-legend span { display: inline-flex; align-items: center; gap: .35rem; }
  .pv-chart-legend b {
    width: 8px; height: 8px; border-radius: 50%;
    background: #8b5cf6;
  }
  .pv-chart-legend span:nth-child(2) b { background: #ec4899; }
  .pv-chart-legend span:nth-child(3) b { background: #14b8a6; }
  .pv-chart-legend span:nth-child(4) b { background: #f59e0b; }
  .pm-activity-timeline {
    grid-column: 1 / -1;
    border-radius: 20px;
    background: rgba(248,250,252,.72);
    border: 1px solid rgba(148,163,184,.28);
    padding: .35rem .9rem;
  }
  .pm-demo-access {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .8rem; margin: 1.1rem 0 1.25rem;
  }
  .pm-demo-card {
    display: grid; grid-template-columns: 44px minmax(0,1fr) auto;
    align-items: center; gap: .8rem;
    padding: .9rem; border-radius: 20px;
    border: 1px solid rgba(148,163,184,.34);
    background: rgba(255,255,255,.84);
    box-shadow: 0 12px 28px rgba(15,23,42,.07);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .pm-demo-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(99,102,241,.15); }
  .pm-demo-card i {
    width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: 15px; color: #fff;
  }
  .pm-demo-card strong { display: block; color: #111827; line-height: 1.2; }
  .pm-demo-card small { display: block; color: #64748b; margin-top: .15rem; }
  .pm-demo-card em {
    font-style: normal; color: #6d28d9; font-weight: 900; font-size: .82rem;
  }
  .pm-demo-card.buyer i { background: linear-gradient(135deg,#6366f1,#8b5cf6); }
  .pm-demo-card.seller i { background: linear-gradient(135deg,#ec4899,#f43f5e); }
  .pm-demo-card.agent i { background: linear-gradient(135deg,#10b981,#14b8a6); }
  .pm-demo-card.admin i { background: linear-gradient(135deg,#f59e0b,#ef4444); }
  
  .dashboard-shell {
    background: linear-gradient(180deg, #f8fafc, #eef2ff);
  }
  .dashboard-sidebar {
    background: rgba(255,255,255,.78);
    border-right-color: rgba(148,163,184,.35);
  }
  .dashboard-hero { box-shadow: 0 24px 60px rgba(99,102,241,.18); }
  .kpi-card, .pipeline-col, .lead-pill, .activity {
    background: rgba(255,255,255,.74);
    border-color: rgba(148,163,184,.32);
  }
  .activity { border-bottom-color: rgba(148,163,184,.28); }
  .pv-footer {
    background: linear-gradient(180deg, #eef2ff, #f8fafc);
    border-top-color: rgba(148,163,184,.35);
  }
  .auth-screen {
    background:
      radial-gradient(ellipse at 15% 0%, rgba(139,92,246,.14), transparent 34%),
      radial-gradient(ellipse at 85% 100%, rgba(244,114,182,.10), transparent 34%),
      #f8fafc;
  }
  .pv-toast {
    background: rgba(255,255,255,.95);
    color: var(--text-primary);
    border-color: rgba(139,92,246,.25);
  }
  
  @media (max-width: 1200px) {
    .pm-command-stack { grid-template-columns: 1fr; grid-template-areas: none; }
    .pm-holo-panel, .pm-panel-a, .pm-panel-b { grid-area: auto; transform: none !important; }
    .listing-grid-shell { grid-template-columns: 1fr; }
    .filter-panel { position: relative; top: 0; }
  }
  @media (max-width: 992px) {
    .pm-demo-access, .pm-analytics-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 576px) {
    .pm-analytics-kpis, .pm-demo-access { grid-template-columns: 1fr; }
    .property-grid { grid-template-columns: 1fr; }
    .pm-carousel-controls { left: .25rem; right: auto; }
    .chip { width: 100%; justify-content: center; }
  }

/* ==========================================================================
   PHASE 2 PREMIUM UI REFINEMENTS
   ========================================================================== */

/* Hero Content Grid Alignment */
@media (min-width: 992px) {
  .pm-hero-content {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3.5rem;
    align-items: center;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

/* Command Search Layout */
.pm-command-search {
  display: grid !important;
  align-items: flex-end !important;
  gap: 1.25rem !important;
  margin-top: 2rem !important;
  margin-bottom: 1.5rem !important;
  padding: 1.5rem 1.8rem !important;
}
.pm-command-search > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pm-command-search label {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
}
.pm-command-search button {
  height: 52px;
}
@media (max-width: 992px) {
  .pm-command-search {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* KPI Mini Stats Styling */
.stat-mini {
  padding: 1.35rem 1.5rem !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(226, 232, 240, 0.86) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.stat-mini:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 20px 48px rgba(99, 102, 241, 0.12) !important;
  border-color: rgba(139, 92, 246, 0.32) !important;
}

/* Heart Icon Perfect Centering */
.floating-save {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.floating-save i {
  font-size: 1.15rem;
  line-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform 0.25s ease;
}
.floating-save:hover {
  transform: scale(1.18) !important;
  background: #ffffff !important;
  color: #ef4444 !important;
  box-shadow: 0 10px 24px rgba(239, 68, 68, 0.22) !important;
}
.floating-save.is-active {
  background: #ffffff !important;
  border-color: rgba(239, 68, 68, 0.15) !important;
}

/* Featured Property Card Premium Shadow and Hover Actions */
.property-card-premium {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.property-card-premium:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 32px 72px rgba(11, 33, 91, 0.16), 0 10px 30px rgba(139, 92, 246, 0.08) !important;
  border-color: rgba(139, 92, 246, 0.38) !important;
}
.property-card-premium .property-card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Swiper Alignment & Clipping Fixes */
.property-swiper {
  position: relative !important;
  padding: 1.5rem 0.5rem 3.5rem !important;
  margin-top: -1.5rem !important;
  margin-bottom: -1.5rem !important;
  overflow: hidden !important;
}
.swiper-initialized .swiper-wrapper {
  overflow-x: visible !important;
  scroll-snap-type: none !important;
  gap: 0 !important;
}
.property-swiper .swiper-slide {
  height: auto !important;
  display: flex !important;
  flex-direction: column;
  padding-bottom: 1.5rem;
}
.pm-inventory-rail {
  overflow: hidden !important;
}

/* Authentication Page Forms Styling */
.auth-card input, .auth-card select, .auth-card textarea {
  width: 100% !important;
  display: block !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.95rem !important;
  border-radius: 16px !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.auth-card input:focus, .auth-card select:focus {
  border-color: var(--pv-accent) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.14) !important;
  outline: none !important;
}
.auth-card input.ps-5, .auth-card select.ps-5 {
  padding-left: 3.25rem !important;
}
.auth-card input.px-5 {
  padding-left: 3.25rem !important;
  padding-right: 3.25rem !important;
}

/* Ambient Scene Background Floating */
.ambient-scene {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: .28 !important;
  mix-blend-mode: multiply !important;
}

/* Prevent horizontal page scroll without breaking position: sticky */
html, body {
  overflow-x: clip !important;
}

/* Homepage Spacing & Grid System Updates */
.pm-ops-band {
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(238,242,255,.72));
  border-top: 1px solid rgba(148,163,184,.35);
  border-bottom: 1px solid rgba(148,163,184,.35);
  padding: 2.5rem 0 !important;
  margin: 0 !important;
}
.pm-ops-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
}
.pm-op-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 2rem 1.5rem !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important;
  height: 100% !important;
}
.pm-op-card:hover {
  transform: none !important;
  background: #ffffff !important;
  border-color: rgba(99, 102, 241, 0.18) !important;
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.08),
    0 8px 24px rgba(99, 102, 241, 0.06) !important;
}
.pm-op-card i {
  font-size: 2.5rem !important;
  color: var(--pv-accent) !important;
  margin-bottom: 1rem !important;
}
.pm-op-card strong {
  font-size: 1.25rem !important;
  margin-bottom: 0.5rem !important;
  color: var(--text-primary) !important;
}
.pm-op-card span {
  font-size: 0.9rem !important;
  color: var(--text-secondary) !important;
}

@media (max-width: 992px) {
  .pm-ops-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }
}
@media (max-width: 576px) {
  .pm-ops-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* Management grid layout (mockup and workspaces) */
@media (min-width: 992px) {
  .pm-management-grid {
    display: grid !important;
    grid-template-columns: 1.25fr 0.75fr !important;
    gap: 4rem !important;
    align-items: start !important;
  }
}
.pm-workflow-panel h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
  line-height: 1.15 !important;
  margin-bottom: 2rem !important;
}
.pm-role-list {
  display: none !important; /* Hide redundant role list since demo-access is beautiful and responsive */
}

/* City demand grid layout */
.pm-city-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 1.5rem !important;
  margin-top: 1.5rem !important;
}
.pm-city-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: relative !important;
  padding: 2rem 2.25rem !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.pm-city-card:hover {
  transform: translateY(-5px) !important;
  background: #ffffff !important;
  border-color: rgba(139, 92, 246, 0.38) !important;
  box-shadow: 0 24px 50px rgba(99, 102, 241, 0.12) !important;
}
.pm-city-card span {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin-bottom: 0.35rem !important;
}
.pm-city-card strong {
  font-size: 1.65rem !important;
  font-weight: 900 !important;
  color: var(--pv-accent) !important;
}
.pm-city-card small {
  font-size: 0.85rem !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
.pm-city-card i {
  position: absolute !important;
  right: 2.25rem !important;
  bottom: 2.25rem !important;
  font-size: 1.3rem !important;
  color: var(--pv-muted) !important;
  transition: transform 0.25s ease !important;
}
.pm-city-card:hover i {
  transform: translate(4px, -4px) !important;
  color: var(--pv-accent) !important;
}

/* Section padding consistency */
.pv-section {
  padding: 7rem 0 !important;
}
.pv-section-sm {
  padding: 5rem 0 !important;
}
.pm-featured-section {
  padding: 7rem 0 !important;
}
@media (max-width: 768px) {
  .pv-section, .pm-featured-section {
    padding: 4.5rem 0 !important;
  }
  .pv-section-sm {
    padding: 3.5rem 0 !important;
  }
  .pm-section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
}
@media (max-width: 576px) {
  .pv-section, .pm-featured-section {
    padding: 3.5rem 0 !important;
  }
  .pv-section-sm {
    padding: 2.5rem 0 !important;
  }
}

/* Amenities Selection Grid */
.amenities-selection-grid ul {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 1rem !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.amenities-selection-grid li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.amenities-selection-grid label {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 1rem 1.25rem !important;
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  font-size: 0.95rem !important;
  width: 100% !important;
}

.amenities-selection-grid label:hover {
  background: #ffffff !important;
  border-color: rgba(99, 102, 241, 0.38) !important;
  box-shadow: 0 10px 24px rgba(99, 102, 241, 0.08) !important;
  transform: translateY(-2px) !important;
}

.amenities-selection-grid label input[type="checkbox"],
.amenities-selection-grid input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #6366f1 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  order: -1 !important;
}

.amenities-selection-grid label:has(input[type="checkbox"]:checked) {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08)) !important;
  border-color: #6366f1 !important;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.1) !important;
  color: #4f46e5 !important;
}

/* Redesigned Command Center Layout overrides */
.pm-command-center-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

@media (min-width: 768px) {
  .border-start-md {
    border-left: 1px solid rgba(148, 163, 184, 0.25) !important;
  }
}

/* ==========================================================================
   PropVista Premium UI Polish Layer
   ========================================================================== */

/* 1. Activity Timeline Redesign */
.activity {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1.25rem !important;
  padding: 1.1rem 1.4rem !important;
  border: 1px solid var(--pv-line) !important;
  background: var(--pv-soft) !important;
  border-radius: 18px !important;
  margin-bottom: 0.85rem !important;
  color: var(--pv-ink) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02) !important;
}
.activity:hover {
  transform: translateY(-2px) !important;
  background: #ffffff !important;
  border-color: rgba(37, 99, 235, 0.24) !important;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06) !important;
}
.activity::before {
  content: "" !important;
  display: inline-block !important;
  width: 10px !important;
}
.kpi-card span {
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
}
.kpi-card strong {
  font-size: 2.3rem !important;
  margin-top: 0.6rem !important;
  font-weight: 800 !important;
}

/* 5. Recommended Homes card overrides */
.property-title {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  line-height: 1.35 !important;
  color: var(--pv-primary) !important;
}
.property-badge {
  border-radius: 999px !important;
  padding: 0.35rem 0.9rem !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(8px) !important;
  background: rgba(11, 33, 91, 0.8) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(11, 33, 91, 0.16) !important;
}

/* 6. Dashboard Sidebar Refinements */
.dashboard-sidebar {
  border-right: 1px solid var(--pv-line) !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  transition: width 0.3s ease !important;
}
.dash-link {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease !important;
  border-radius: 14px !important;
  margin: 0.25rem 0 !important;
  padding: 0.9rem 1.25rem !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.9rem !important;
  border: 1px solid transparent !important;
}
.dash-link i {
  font-size: 1.25rem !important;
  transition: transform 0.2s ease !important;
}
.dash-link:hover {
  background-color: rgba(99,102,241,.06) !important;
  color: #4f46e5 !important;
  border-color: rgba(99,102,241,.18) !important;
  box-shadow:
    0 0 0 1px rgba(99,102,241,.08),
    0 8px 24px rgba(99,102,241,.06) !important;
}
.dash-link:hover i {
  transform: none !important;
}
.dash-link.active {
  background: rgba(99,102,241,.12) !important;
  border: 1px solid rgba(99,102,241,.18) !important;
  color: #1e3a8a !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
.dash-link.active i {
  color: #4f46e5 !important;
}
.dash-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 3px;
  background: #4f46e5;
  border-radius: 999px;
}

/* 7. Skeleton Shimmer Loaders */
.shimmer-element {
  position: relative !important;
  overflow: hidden !important;
  background: #f1f5f9 !important;
}
.shimmer-element::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  transform: translateX(-100%) !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent) !important;
  animation: shimmer-swipe 1.6s infinite !important;
}
@keyframes shimmer-swipe {
  100% { transform: translateX(100%); }
}
.skeleton-widget {
  height: 140px;
  border-radius: 24px;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--pv-line);
}
.skeleton-notification {
  height: 75px;
  border-radius: 18px;
  margin-bottom: 0.8rem;
  background: #fff;
  border: 1px solid var(--pv-line);
}

/* 8. Mobile Responsiveness */
@media (max-width: 992px) {
  .dashboard-shell {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  .dashboard-sidebar {
    width: 100% !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--pv-line) !important;
    padding: 1.25rem !important;
    background: #ffffff !important;
  }
  .dashboard-main {
    padding: 1.25rem !important;
    width: 100% !important;
  }
  .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 1.25rem !important;
  }
}
@media (max-width: 576px) {
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 9. Accessibility Focus States & Button Hover */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--pv-accent) !important;
  outline-offset: 2px !important;
}
.pv-btn {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important;
}
.pv-btn:hover {
  transform: none !important;
  border-color: rgba(99,102,241,.18) !important;
  box-shadow:
    0 0 0 1px rgba(99,102,241,.08),
    0 8px 24px rgba(99,102,241,.06) !important;
}
.pv-btn:active {
  transform: none !important;
}
/* 10. Image aspect ratio & auto-fit settings */
img.pv-avatar {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}
.rounded-circle {
  object-fit: cover !important;
}
.property-media img,
.gallery-main-container img,
.gallery-tile-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.object-fit-cover {
  object-fit: cover !important;
}

/* Premium Fullscreen Lightbox / Image Viewer */
.pv-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.pv-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.pv-lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 1;
  transition: all 0.25s ease;
  z-index: 2010;
}
.pv-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.08) rotate(90deg);
}
.pv-lightbox-content {
  position: relative;
  max-width: 85%;
  max-height: 75%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pv-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  transform: scale(0.92);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.pv-lightbox.is-open .pv-lightbox-img {
  transform: scale(1);
}
.pv-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 2rem;
  transition: all 0.25s ease;
  z-index: 2010;
}
.pv-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-50%) scale(1.08);
}
.pv-lightbox-prev {
  left: 32px;
}
.pv-lightbox-next {
  right: 32px;
}
.pv-lightbox-counter {
  position: absolute;
  bottom: 32px;
  color: rgba(255, 255, 255, 0.85);
  font-family: monospace;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 20px;
  border-radius: 24px;
}
@media (max-width: 768px) {
}

/* Premium Fullscreen Lightbox / Image Viewer */
.pv-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.pv-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.pv-lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 1;
  transition: all 0.25s ease;
  z-index: 2010;
}
.pv-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.08) rotate(90deg);
}
.pv-lightbox-content {
  position: relative;
  max-width: 85%;
  max-height: 75%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pv-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
  transform: scale(0.92);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.pv-lightbox.is-open .pv-lightbox-img {
  transform: scale(1);
}
.pv-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 2rem;
  transition: all 0.25s ease;
  z-index: 2010;
}
.pv-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-50%) scale(1.08);
}
.pv-lightbox-prev {
  left: 32px;
}
.pv-lightbox-next {
  right: 32px;
}
.pv-lightbox-counter {
  position: absolute;
  bottom: 32px;
  color: rgba(255, 255, 255, 0.85);
  font-family: monospace;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 20px;
  border-radius: 24px;
}
@media (max-width: 768px) {
  .pv-lightbox-nav {
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
  }
  .pv-lightbox-prev { left: 12px; }
  .pv-lightbox-next { right: 12px; }
  .pv-lightbox-close { top: 16px; right: 16px; }
}

/* Sidebar scrollbar hiding and spacing fixes */
aside.detail-sidebar::-webkit-scrollbar {
  display: none;
}
aside.detail-sidebar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* ==========================================================================
   UI ALIGNMENT & RESPONSIVENESS OVERRIDES
   ========================================================================== */

/* Navbar alignment fixes */
.pv-navbar .dropdown-toggle::after {
  display: none !important;
}
.pv-nav-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end;
  gap: .55rem;
}
.pv-nav-actions > a, .pv-nav-actions > div {
  display: flex !important;
  align-items: center !important;
}
.pv-nav-actions .pv-avatar {
  margin: 0 !important;
}
.pv-nav-actions button.pv-icon-action {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.pv-nav-actions button.pv-icon-action .badge,
.pv-nav-actions button.pv-icon-action .pv-nav-badge {
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  font-size: 0.65rem !important;
  padding: 3px 6px !important;
  /* Small offset to sit just outside the button edge — stays within the bell button bounds */
  transform: translate(35%, -35%) !important;
}

/* Dashboard Shell & Sidebar Mobile collapsing fix */
@media (max-width: 992px) {
  .dashboard-shell {
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
  }
  .dashboard-sidebar {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--pv-line) !important;
    padding: 1.25rem !important;
    background: #ffffff !important;
  }
  .dashboard-main {
    padding: 1.5rem 1rem !important;
    width: 100% !important;
  }
}

/* Equal card heights in grids and Swiper */
.property-grid > div {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.property-grid > div > .property-card-premium {
  flex-grow: 1 !important;
  height: 100% !important;
}
.swiper-slide {
  height: auto !important;
}
.swiper-slide > .property-card-premium {
  height: 100% !important;
}

/* Property Detail Gallery — self-contained, no overflow leakage */
.detail-gallery-premium {
  overflow: hidden !important;
  /* Establish a block formatting context to contain all child elements */
  display: block;
}

/* ≥ 768px: main image has explicit height; side tiles fill remaining flex space */
@media (min-width: 768px) {
  .detail-gallery-premium .row {
    height: auto !important;
  }
  .detail-gallery-premium .gallery-main-container {
    height: 500px !important;
    min-height: auto !important;
    max-height: 500px !important;
    overflow: hidden !important;
  }
  /* Side tiles grow into the flex column — only enforce overflow containment */
  .detail-gallery-premium .gallery-tile-container {
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
}

/* < 768px: stacked single column, explicit height on main image only */
@media (max-width: 767px) {
  .detail-gallery-premium .gallery-main-container {
    height: 280px !important;
    min-height: auto !important;
    max-height: 280px !important;
    overflow: hidden !important;
  }
  .detail-gallery-premium .gallery-tile-container {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
  }
}

/* Finance Calculator & Sidebar responsive alignment */
@media (min-width: 1200px) {
  .detail-sidebar {
    position: sticky !important;
    top: 100px !important;
    z-index: 10 !important;
    overflow: visible !important;
    padding-right: 4px !important;
    padding-bottom: 20px !important;
  }
}
@media (max-width: 1199px) {
  .detail-sidebar {
    position: static !important;
    overflow: visible !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }
}

.detail-sidebar .d-flex.justify-content-between {
  flex-wrap: wrap !important;
  gap: 0.5rem;
}
@media (max-width: 375px) {
  .detail-sidebar #emi-downpayment-pct, 
  .detail-sidebar #emi-interest {
    font-size: 0.85rem !important;
  }
  .detail-sidebar .pv-card {
    padding: 1rem !important;
  }
}

/* Notifications Page Spacing adjustments */
.dashboard-main {
  padding-top: 1.5rem !important;
}
.dashboard-main h1 {
  margin-top: 0.5rem !important;
}
.dashboard-main .mb-4 {
  margin-bottom: 1.25rem !important;
}

/* Reports Layout Overrides */

@media (min-width: 1200px) {
  .reports-chart-left {
    width: 65% !important;
    flex: 0 0 65% !important;
  }
  .reports-chart-right {
    width: 35% !important;
    flex: 0 0 35% !important;
  }
}

/* Property Detail CSS Grid Layout & Sticky Sidebar */
.grid-sidebar-calculator {
  min-height: 320px !important;
}

@media (min-width: 1024px) {
  .detail-grid-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    column-gap: 2rem !important;
  }
  .detail-left-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  .detail-right-col {
    position: relative !important;
  }
  .detail-sidebar {
    width: 100% !important;
    min-width: 360px !important;
    max-width: 400px !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  .detail-sidebar .pv-card {
    width: 100% !important;
  }
}

@media (min-width: 1200px) {
  .detail-sidebar {
    position: sticky !important;
    top: 100px !important;
    z-index: 10 !important;
    height: fit-content !important;
  }
}

@media (max-width: 1199px) {
  .detail-sidebar {
    position: static !important;
  }
}

@media (max-width: 1023px) {
  .detail-grid-row {
    display: block !important;
  }
  .detail-left-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  .detail-right-col {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .detail-sidebar {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    width: 100% !important;
  }
}

/* Responsive Vertical Timeline for viewports < 768px */
@media (max-width: 767px) {
  .timeline-steps {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.5rem !important;
  }
  .timeline-line {
    display: none !important;
  }
  .timeline-step {
    width: 100% !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
  }
  .timeline-step > .rounded-circle {
    margin: 0 !important;
  }
}

/* ============================================================
   AI Match & Card Readability Upgrades
   ============================================================ */
.ai-reasons-box {
  background: rgba(248, 250, 252, 0.8) !important;
  border-left: 4px solid var(--pv-accent) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
  font-family: "Inter", system-ui, sans-serif;
}
.ai-reasons-box .fw-bold {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700 !important;
  color: #1e293b !important;
}
.ai-reasons-box ul li {
  font-weight: 500;
  color: #475569 !important;
}
.property-badge-container .property-badge.bg-primary {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, var(--pv-primary), var(--pv-accent)) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ============================================================
   AI Match Grid & Spacing Upgrades
   ============================================================ */

/* Wide results 3-column, 2-column, 1-column responsive grid layout */
.ai-match-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  width: 100%;
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .ai-match-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1200px) {
  .ai-match-grid {
    grid-template-columns: repeat(3, minmax(380px, 1fr));
    gap: 32px;
  }
}

/* Breathing room overrides for property cards inside AI match */
.ai-match-grid .property-card-premium {
  margin-bottom: 2rem !important; /* vertical spacing */
  border-radius: 24px;
}

.ai-match-grid .property-card-body {
  padding: 1.75rem !important; /* internal padding */
}

/* Checklist reason boxes updates */
.ai-match-grid .ai-reasons-box {
  margin-top: 1.75rem !important; /* reason section spacing */
  padding: 1.25rem 1.5rem !important;
  border-radius: 16px;
}

.ai-match-grid .ai-reasons-box ul li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 0.88rem !important;
  line-height: 1.55;
  margin-bottom: 0.75rem !important;
}

.ai-match-grid .ai-reasons-box ul li i {
  font-size: 1.15rem !important;
  margin-top: 1px;
}

/* Badge size and alignment upgrades to prevent crowding */
.property-badge-container {
  gap: 6px !important;
}

.property-badge-container .property-badge {
  font-size: 0.76rem !important;
  padding: 0.45rem 0.8rem !important;
  border-radius: 8px !important;
}

/* ==========================================================================
   UI REFINEMENT PASS OVERRIDES (NO BACKEND CHANGES)
   ========================================================================== */

/* 1. TYPOGRAPHY AUDIT & SITE-WIDE RHYTHM */
h1, .h1, .display-1, .display-2, .display-3, .display-4, .display-5 {
  font-family: "Manrope", "Inter", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(56px, 5.5vw, 64px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
}

h2, .h2, .display-6 {
  font-family: "Manrope", "Inter", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(40px, 4vw, 48px) !important;
  line-height: 1.20 !important;
  letter-spacing: -0.02em !important;
}

h3, .h3 {
  font-family: "Manrope", "Inter", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 3vw, 32px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
}

body, p, .body-normal, .fs-6 {
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.body-large, .fs-5, p.pv-hero-copy {
  font-size: 18px !important;
  line-height: 1.6 !important;
}

/* 2. HOMEPAGE HERO VISUAL CENTERING & PREMIUM AESTHETIC */
.pv-hero, .pm-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(100vh - 92px) !important;
  padding: 0 !important; /* Perfect flex centering */
  position: relative !important;
}

/* Darker Overlay on Background Video (40-55%) */
.pv-hero::before, .pm-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(11, 21, 44, 0.48) !important; /* Elegant 48% Navy/Slate Dark Overlay */
  z-index: 1 !important;
  pointer-events: none !important;
}

.pv-hero-canvas {
  z-index: 0 !important;
}

.pv-hero-content, .pm-hero-content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 950px !important; /* Section 1: Max stack width 950px */
  margin-inline: auto !important;
  text-align: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 1. HOMEPAGE HERO CENTERED CONTENT STACK */
.pm-hero-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 1.5rem !important; /* Equal premium luxury SaaS spacing */
  width: 100% !important;
  max-width: 950px !important;
  margin-inline: auto !important;
}

/* Heading Typography & Color Improvement */
.pv-hero h1, .pm-hero-copy h1 {
  font-family: "Manrope", "Inter", system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(2.5rem, 6.2vw, 4.8rem) !important; /* Refined clamp to prevent mobile overflow */
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  color: #FFFFFF !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: 0 8px 32px rgba(0,0,0,.45) !important;
  margin: 0 !important; /* Margin managed by stack gap */
}

.pv-hero-accent {
  background: linear-gradient(90deg, #8B5CF6, #A855F7) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  display: inline-block !important;
}

.pv-hero-copy {
  color: rgba(255, 255, 255, 0.92) !important; /* High contrast readable text */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  margin: 0 !important; /* Margin managed by stack gap */
  max-width: 700px !important;
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
}

.pv-eyebrow {
  color: #5b6cff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.4rem 0.9rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin: 0 !important; /* Margin managed by stack gap */
}

/* Glassmorphism Feature Chips with Soft Contrast */
.pm-feature-chips-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.85rem !important; /* Slightly tighter premium spacing */
  width: 100% !important;
  margin: 0 !important;
}

.pm-feature-chips-container .pv-hero-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important; /* Slightly smaller height */
  padding: 0.5rem 1.25rem !important; /* Slightly smaller padding */
  box-sizing: border-box !important;
  background: rgba(255, 255, 255, 0.18) !important; /* Subtle background */
  border: 1px solid rgba(255, 255, 255, 0.25) !important; /* Softer border */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 50px !important;
  color: #FFFFFF !important; /* High contrast white text on dark video */
  font-weight: 600 !important;
  font-size: 0.88rem !important; /* Slightly smaller font size */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; /* Soft shadow */
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin: 0 !important;
  opacity: 0.95 !important;
}

.pm-feature-chips-container .pv-hero-chip:hover {
  transform: translateY(-1px) !important;
  background: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
  opacity: 1 !important;
}

.pm-feature-chips-container .pv-hero-chip i {
  font-size: 0.95rem !important;
  color: rgba(255, 255, 255, 0.9) !important; /* Subtle white icon */
  margin-right: 0.4rem !important;
}

/* Search Panel Width & Proportions (Section 2) */
.pm-command-search {
  margin: 0 !important;
  width: 100% !important;
  /* Upgraded glass panel */
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 32px 80px rgba(11, 33, 91, 0.30) !important;
  border-radius: 24px !important;
}

@media (min-width: 992px) {
  .pm-command-search {
    display: grid !important;
    /* Location wider: 4.5fr · Asset: 2.5fr · Budget: 1.8fr · Button: 1.8fr */
    grid-template-columns: 4.5fr 2.5fr 1.8fr 1.8fr !important;
    /* Expanded width for better breathing room */
    max-width: 1260px !important;
    gap: 1.4rem !important;
    padding: 2rem 2.6rem !important;
    box-sizing: border-box !important;
    align-items: flex-end !important;
  }
}

.pm-command-search .form-control,
.pm-command-search .form-select,
.pm-command-search button {
  height: 58px !important;
  border-radius: 14px !important;
}
/* Ensure Location label gets a visual boost */
.pm-command-search > div:first-child label {
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
}

/* Popular filter chips styling under search */
.pm-filter-chips .chip {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.pm-filter-chips .chip:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
}

/* 3. PROPERTIES PAGE LISTING GRID (3 COLUMNS) & CARDS */
.property-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* Desktop: 3 cards per row */
  gap: 2.2rem !important; /* Enhanced spacing rhythm */
}

@media (max-width: 991.98px) {
  .property-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* Tablet: 2 cards per row */
    gap: 1.8rem !important;
  }
}

@media (max-width: 575.98px) {
  .property-grid {
    grid-template-columns: repeat(1, 1fr) !important; /* Mobile: 1 card per row */
    gap: 1.5rem !important;
  }
}

/* Premium Card Refinements (Airbnb Luxe / Sotheby's style) */
.property-card-premium {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 30px rgba(11, 33, 91, 0.03) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important;
}

.property-card-premium:hover {
  transform: none !important;
  border-color: rgba(99, 102, 241, 0.18) !important;
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.08),
    0 8px 24px rgba(99, 102, 241, 0.06) !important;
}

.property-card-premium .property-media {
  height: 280px !important; /* Increased image height for premium look */
  border-radius: 19px 19px 0 0 !important;
}

@media (max-width: 575.98px) {
  .property-card-premium .property-media {
    height: 240px !important;
  }
}

.property-card-premium .property-card-body {
  padding: 1.75rem !important; /* Increased content padding */
}

.property-card-premium .property-price {
  font-size: 1.5rem !important;
  color: #5b6cff !important; /* Accent color for price */
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

.property-card-premium .property-title {
  font-family: "Manrope", "Inter", sans-serif !important;
  font-size: 1.25rem !important; /* Luxury font sizing */
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #0b215b !important; /* Deep Navy title */
  margin: 0.6rem 0 !important;
}

.property-card-premium .property-location {
  font-size: 0.92rem !important;
  color: #64748b !important;
  margin-bottom: 0.8rem !important;
}

.property-card-premium .property-facts {
  border-top: 1px solid rgba(148, 163, 184, 0.15) !important;
  padding-top: 0.85rem !important;
  margin-top: auto !important;
}

/* 4. DETAIL PAGE SECTION HEADERS & ICONS REFINEMENT */
.detail-section-heading {
  font-size: 1.75rem !important; /* Reduced heading size */
  font-weight: 700 !important;
  line-height: 1.15 !important;
  font-family: "Playfair Display", Georgia, serif !important;
  display: block !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important; /* Better consistent spacing */
}

.detail-section-heading i {
  font-size: 0.65em !important;
  vertical-align: middle !important;
  margin-right: 0.5rem !important;
  display: inline-block !important;
}

/* AI Property Insights Icon Badge Reduction */
#ai-insights-section .rounded-circle {
  width: 32px !important;
  height: 32px !important;
  opacity: 0.9 !important;
  flex-shrink: 0 !important;
}

/* 5. DASHBOARD NOTIFICATIONS PREMIUM REFINEMENTS */
.inbox-badge {
  font-size: 0.88rem !important;
  padding: 0.5rem 1.25rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
}

@media (min-width: 1200px) {
  .dashboard-main {
    max-width: 1200px !important;
    margin-right: auto !important;
  }
}

.notifications-main {
  padding-top: 1.5rem !important; /* Raises content cards to avoid empty-space/low-start look */
}

.notifications-main h2 {
  font-size: 1.75rem !important; /* Reduced heading prominence for better hierarchy */
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.notifications-list {
  max-width: 900px !important; /* Constrains notifications on wide screens for premium density */
  width: 100% !important;
}

/* Category filter chips centering and spacing resets */
.pm-filter-chips {
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.7rem !important;
  width: 100% !important;
}

/* Ensure search form buttons scale correctly */
.pm-command-search button {
  width: 100% !important;
}

/* 6. ADMIN DASHBOARD ACTION-BUTTON TOOLBAR */
.admin-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important; /* Equal spacing */
}
.admin-toolbar .pv-btn {
  height: 44px !important; /* Enforce exact equal height */
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* Align KPI card links properly in kpi-grid to enforce equal height */
.kpi-grid a {
  display: flex !important;
  text-decoration: none !important;
  color: inherit !important;
  height: 100% !important;
  width: 100% !important;
}
.kpi-grid a > .kpi-card {
  width: 100% !important;
  height: 100% !important;
}

/* 7. ADMIN USERS & DASHBOARD SIDEBAR ALIGNMENT */
.dashboard-sidebar {
  padding-top: 1.5rem !important; /* Matches dashboard-main top padding to prevent low starting menu */
}
.dashboard-sidebar .dash-nav-label:first-of-type {
  margin-top: 0 !important; /* Aligns first label with main content */
}

/* 8. NOTIFICATIONS CONTAINER CENTERING */
.notifications-container {
  max-width: 900px !important;
  width: 100% !important;
  margin-inline: auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.notifications-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* 9. GLOBAL SPACING & ALIGNMENT SYSTEM STANDARDIZATION */
.dashboard-main {
  padding: 2rem !important; /* Content padding: 32px */
}
.kpi-grid {
  gap: 1.5rem !important; /* Card gap: 24px */
}
.dashboard-main > .row,
.dashboard-main > .kpi-grid,
.dashboard-main > div {
  margin-bottom: 2.25rem !important; /* Section gap: ~36-48px */
}
.pv-card {
  padding: 1.5rem !important; /* Consistent inner card padding */
  border-radius: 20px !important; /* Consistent card border radius */
}

/* ── Page Header System (Standard: Favorites) ── */
.pv-page-header {
  margin-bottom: 40px !important;
  max-width: 1200px !important;
}
.pv-page-header .pv-eyebrow {
  margin-bottom: 16px !important;
  display: inline-flex !important;
}
.pv-page-header h1 {
  margin-bottom: 12px !important;
  font-size: 48px !important;
}
.pv-page-header p {
  margin-bottom: 0 !important;
  font-size: 18px !important;
}

/* ── Premium Verification Status Badge ── */
.pv-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  padding: 0.32rem 0.85rem !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
.pv-status-badge i {
  font-size: 0.8rem !important;
}
.pv-status-verified {
  background: rgba(22, 163, 74, 0.1) !important;
  color: #15803d !important;
  border: 1px solid rgba(22, 163, 74, 0.25) !important;
}
.pv-status-standard {
  background: rgba(100, 116, 139, 0.1) !important;
  color: #475569 !important;
  border: 1px solid rgba(100, 116, 139, 0.22) !important;
}

/* ── Homepage Bottom CTA: Scoped padding reduction ── */
.pm-final-cta.dashboard-hero {
  padding: 1.75rem !important;
}

/* ── Inner section (no outer padding — used inside dashboard-main) ── */
.pv-section-inner {
  padding: 0;
}

/* ── page-hero inside dashboard-main: remove double-stack top padding ── */
.dashboard-main .page-hero {
  padding-top: 0 !important;
  margin-left: -2.4rem !important;
  margin-right: -2.4rem !important;
  padding-left: 2.4rem !important;
  padding-right: 2.4rem !important;
}

/* ── Stable Filter Form Controls ── */
.filter-panel .form-control,
.filter-panel .form-select {
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
.filter-panel .form-control:hover,
.filter-panel .form-select:hover {
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
  border-color: var(--pv-line) !important;
}
.filter-panel .form-control:focus,
.filter-panel .form-select:focus {
  border-color: var(--pv-primary) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
  transform: none !important;
}

@media (prefers-color-scheme: dark) {
  .filter-panel .form-control:hover,
  .filter-panel .form-select:hover {
    border-color: rgba(148,163,184,.55) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
  }
}

/* ── Notification Cards Premium Hover ── */
.notifications-list .pv-card {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important;
}
.notifications-list .pv-card:hover {
  transform: none !important;
  border-color: rgba(99, 102, 241, 0.18) !important;
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.08),
    0 8px 24px rgba(99, 102, 241, 0.06) !important;
}

/* ── Scoped overrides for landing page hero/navbar integration ── */
body.is-home-page {
  padding-top: 0 !important;
}
body.is-home-page .pv-hero,
body.is-home-page .pm-hero {
  min-height: 100vh !important;
  padding-top: 100px !important; /* Elegant shift downward by exactly 50px under vertical flex centering */
}

/* ── Property Marketplace Layout & Card Upgrades ── */
/* 1. Property Grid desktop/tablet change */
.property-grid {
  grid-template-columns: repeat(2, 1fr) !important; /* Desktop/Tablet: 2 cards per row */
  gap: 2.5rem !important; /* Premium wide spacing */
}

@media (max-width: 575.98px) {
  .property-grid {
    grid-template-columns: repeat(1, 1fr) !important; /* Mobile: 1 card per row */
    gap: 1.5rem !important;
  }
}

/* 2. Filters Sidebar width reduction */
.listing-grid-shell {
  grid-template-columns: 250px minmax(0, 1fr) !important; /* Reduce width from 330px to 250px */
  gap: 2.5rem !important;
}

@media (max-width: 992px) {
  .listing-grid-shell {
    grid-template-columns: 1fr !important;
  }
}

/* 3. Property Card Dimensions & Balance */
.property-grid .property-card-premium .property-media {
  height: 335px !important; /* Increased image dominance */
}

@media (max-width: 991.98px) {
  .property-grid .property-card-premium .property-media {
    height: 300px !important;
  }
}
@media (max-width: 575.98px) {
  .property-grid .property-card-premium .property-media {
    height: 240px !important;
  }
}

/* 4. Luxury Hover Experience (No neon, slight lift) */
.property-grid .property-card-premium:hover {
  transform: translateY(-3px) !important; /* Subtle premium 3px lift */
  border-color: rgba(99, 102, 241, 0.18) !important;
  box-shadow:
    0 12px 30px rgba(15, 23, 42, 0.06),
    0 0 0 1px rgba(99, 102, 241, 0.08) !important;
}

/* 5. Image Hover subtle zoom */
.property-grid .property-card-premium .property-media img {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.property-grid .property-card-premium:hover .property-media img {
  transform: scale(1.025) !important; /* Subtle zoom */
}

/* 6. Price Hierarchy Upgrade */
.property-grid .property-card-premium .property-price {
  font-size: 1.65rem !important; /* Stronger size */
  font-weight: 800 !important; /* Strong weight */
  letter-spacing: -0.02em !important;
  color: #2563eb !important; /* Ensure clear visibility with existing blue scale */
}

/* 7. Favorite Button Hover update */
.property-grid .property-card-premium .floating-save:hover {
  transform: none !important; /* Remove animation bounce */
  background: rgba(255, 255, 255, 0.95) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important; /* Tiny shadow */
}

/* ── Scoped Homepage Hero Search CTA Improvement ── */
.pm-command-search button {
  min-width: 180px !important;
  white-space: nowrap !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important;
}
.pm-command-search button:hover {
  transform: none !important; /* No scaling, no translateY, no bounce animation */
  box-shadow:
    0 12px 30px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(99, 102, 241, 0.10) !important; /* Subtle luxury glow */
}

/* ── Workspace Page Hero Typography Scale Down ── */
.workspace-page-title {
  font-size: 2.25rem !important; /* Visual size matching 2rem–2.5rem */
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.025em !important;
}
.workspace-page-subtitle {
  font-size: 1.025rem !important; /* Visual size matching 1rem–1.05rem */
  line-height: 1.55 !important;
}






/* +------------------------------------------------------------------+
   �  PROPVISTA V2 LANDING PAGE � LUXURY REAL ESTATE INTELLIGENCE    �
   �  Complete design system for the redesigned homepage.            �
   +------------------------------------------------------------------+ */

/* --- V2 Design Tokens --- */
:root {
  --lp-gold: #c8a45d;
  --lp-gold-light: #e8c580;
  --lp-violet: #7c3aed;
  --lp-violet-light: #a78bfa;
  --lp-emerald: #059669;
  --lp-emerald-light: #34d399;
  --lp-section-pad: clamp(5rem, 10vw, 9rem);
  --lp-radius: 24px;
}

/* --- Reset: no body padding on homepage hero --- */
body.is-home-page { padding-top: 0 !important; }

/* --- Shared V2 container --- */
.lp-container { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 4rem); }

/* --- Shared V2 eyebrow pill --- */
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.95rem; border-radius: 100px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(37,99,235,0.10); border: 1px solid rgba(37,99,235,0.22); color: #2563eb;
}
.lp-eyebrow--violet { background: rgba(124,58,237,0.10); border-color: rgba(124,58,237,0.22); color: #7c3aed; }
.lp-eyebrow--emerald { background: rgba(5,150,105,0.10); border-color: rgba(5,150,105,0.22); color: #059669; }
.lp-eyebrow--gold { background: rgba(200,164,93,0.12); border-color: rgba(200,164,93,0.28); color: #b8862a; }
.lp-eyebrow--light { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.28); color: #ffffff; }
.lp-eyebrow--glass { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* --- Shared V2 buttons --- */
.lp-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.75rem; border-radius: 12px;
  font-weight: 600; font-size: 0.92rem; letter-spacing: 0.01em;
  cursor: pointer; text-decoration: none; border: 1.5px solid transparent;
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1); white-space: nowrap;
}
.lp-btn--primary { background: linear-gradient(135deg, #2563eb, #7c3aed); color: #ffffff; box-shadow: 0 8px 24px rgba(37,99,235,0.35); }
.lp-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(37,99,235,0.45); color: #ffffff; }
.lp-btn--ghost { background: rgba(255,255,255,0.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgba(255,255,255,0.30); color: #ffffff; }
.lp-btn--ghost:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.50); transform: translateY(-2px); color: #ffffff; }
.lp-btn--ghost-light { background: rgba(255,255,255,0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgba(255,255,255,0.28); color: #ffffff; }
.lp-btn--ghost-light:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.50); transform: translateY(-2px); color: #ffffff; }
.lp-btn--lg { padding: 0.9rem 2.1rem; font-size: 1rem; border-radius: 14px; }

/* --- Shared section head --- */
.lp-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 3.5rem; flex-wrap: wrap; }
.lp-section-head--centered { flex-direction: column; align-items: center; text-align: center; }
.lp-section-head__title { font-family: "Manrope","Inter",system-ui,sans-serif; font-weight: 800 !important; font-size: clamp(2rem,4vw,2.8rem) !important; line-height: 1.15 !important; letter-spacing: -0.025em; color: #0b215b; margin: 0.5rem 0 0; }
.lp-section-head__title--light { color: #ffffff !important; }
.lp-section-head__sub { font-size: 1rem; color: #64748b; margin: 0.6rem 0 0; max-width: 520px; line-height: 1.6; }
.lp-section-head__sub--wide { max-width: 640px; }
.lp-section-head__sub--light { color: rgba(255,255,255,0.75) !important; }

/* --- V2 Reveal animation --- */
.lp-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.lp-reveal.is-visible { opacity: 1; transform: translateY(0); }
.lp-reveal--delay-1 { transition-delay: 0.08s; }
.lp-reveal--delay-2 { transition-delay: 0.16s; }
.lp-reveal--delay-3 { transition-delay: 0.24s; }
.lp-reveal--delay-4 { transition-delay: 0.32s; }
.lp-reveal--delay-5 { transition-delay: 0.44s; }

/* -- SECTION 1 � CINEMATIC HERO -- */
.lp-hero { position: relative; width: 100%; height: 100vh; min-height: 640px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lp-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.lp-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8,16,36,0.30) 0%, rgba(8,16,36,0.42) 50%, rgba(8,16,36,0.68) 100%); z-index: 1; }
.lp-hero__content { position: relative; z-index: 2; width: 100%; max-width: 860px; margin-inline: auto; padding-inline: 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.lp-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.42rem 1.1rem; border-radius: 100px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: #ffffff; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lp-hero__headline { font-family: "Manrope","Inter",system-ui,sans-serif !important; font-weight: 800 !important; font-size: clamp(2.4rem,5.5vw,4.2rem) !important; line-height: 1.05 !important; letter-spacing: -0.03em !important; color: #ffffff !important; text-shadow: 0 4px 24px rgba(0,0,0,0.4) !important; margin: 0 !important; }
.lp-hero__headline-accent { background: linear-gradient(120deg, #e8c580, #c8a45d); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.lp-hero__sub { font-size: clamp(0.95rem,2vw,1.1rem) !important; color: rgba(255,255,255,0.88) !important; max-width: 640px !important; line-height: 1.65 !important; text-shadow: 0 1px 6px rgba(0,0,0,0.3) !important; margin: 0 !important; }
.lp-hero__chips { display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: center; }
.lp-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.38rem 1rem; border-radius: 100px; font-size: 0.82rem; font-weight: 600; color: #ffffff; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 0.25s ease; }
.lp-chip:hover { background: rgba(255,255,255,0.22); }
.lp-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }

/* Glass search */
.lp-search { width: 100%; max-width: 920px; background: rgba(255,255,255,0.11); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.22); border-radius: 20px; padding: 1.5rem 1.75rem; box-shadow: 0 24px 72px rgba(0,0,0,0.28); display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto; gap: 0; align-items: center; }
.lp-search__group { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 1rem; }
.lp-search__label { font-size: 0.72rem !important; font-weight: 600 !important; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.65) !important; }
.lp-search__input { background: transparent !important; border: none !important; outline: none !important; color: #ffffff !important; font-size: 0.95rem !important; font-weight: 500 !important; padding: 0 !important; width: 100%; -webkit-appearance: none; appearance: none; }
.lp-search__input::placeholder { color: rgba(255,255,255,0.50) !important; }
.lp-search__input option { color: #1e293b; background: #ffffff; }
.lp-search__divider { width: 1px; height: 40px; background: rgba(255,255,255,0.20); flex-shrink: 0; }
.lp-search__btn { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: 1rem; padding: 0.75rem 1.5rem; border-radius: 12px; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #ffffff; font-size: 0.9rem; font-weight: 600; border: none; cursor: pointer; white-space: nowrap; transition: all 0.25s ease; box-shadow: 0 8px 20px rgba(37,99,235,0.38); }
.lp-search__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37,99,235,0.50); }

/* Scroll hint */
.lp-hero__scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; opacity: 0.6; }
.lp-scroll-dot { width: 26px; height: 40px; border: 2px solid rgba(255,255,255,0.45); border-radius: 13px; position: relative; }
.lp-scroll-dot::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 4px; height: 8px; border-radius: 2px; background: rgba(255,255,255,0.75); animation: lp-scroll-bounce 1.8s ease-in-out infinite; }
@keyframes lp-scroll-bounce { 0%,100%{transform:translateX(-50%) translateY(0);opacity:1} 60%{transform:translateX(-50%) translateY(10px);opacity:0.4} }

/* -- SECTION 2 � SCROLL STORYTELLING -- */
.lp-story { padding: var(--lp-section-pad) 0; background: #ffffff; }
.lp-story__container { max-width: 1320px; margin-inline: auto; padding-inline: clamp(1.25rem,4vw,4rem); display: flex; flex-direction: column; gap: 7rem; }
.lp-story__row { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.lp-story__row--img-right { direction: rtl; }
.lp-story__row--img-right > * { direction: ltr; }
.lp-story__img-wrap { position: relative; border-radius: var(--lp-radius); overflow: hidden; box-shadow: 0 32px 80px rgba(11,33,91,0.16); aspect-ratio: 4/3; }
.lp-story__img { width: 100%; height: 100%; object-fit: cover; transition: transform 6s ease; }
.lp-story__img-wrap:hover .lp-story__img { transform: scale(1.04); }
.lp-story__img-badge { position: absolute; bottom: 1.25rem; left: 1.25rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 1rem; border-radius: 100px; font-size: 0.78rem; font-weight: 700; color: #ffffff; background: rgba(8,16,36,0.60); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.20); }
.lp-story__img-badge--right { left: auto; right: 1.25rem; }
.lp-story__copy { display: flex; flex-direction: column; gap: 1.1rem; }
.lp-story__heading { font-family: "Manrope","Inter",system-ui,sans-serif !important; font-weight: 800 !important; font-size: clamp(1.75rem,3.5vw,2.4rem) !important; line-height: 1.15 !important; letter-spacing: -0.025em !important; color: #0b215b !important; margin: 0 !important; }
.lp-story__body { font-size: 1rem !important; color: #475569 !important; line-height: 1.7 !important; margin: 0 !important; }
.lp-story__features { list-style: none; padding: 0; margin: 0.25rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.lp-story__features li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem !important; font-weight: 500; color: #334155; }
.lp-story__features .bi-check-circle-fill { color: #059669; font-size: 1rem; }
.lp-story__link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9rem; color: #2563eb; text-decoration: none; margin-top: 0.5rem; transition: gap 0.2s ease; }
.lp-story__link:hover { gap: 0.65rem; color: #0b215b; }

/* -- SECTION 3  FEATURED PROPERTY -- */
.lp-featured {
  padding: 8.5rem 0;
  background: linear-gradient(179deg, #f1f3f6 0%, #4743ce 100%);
}
.lp-btn--ghost-dark {
  background: rgba(11, 33, 91, 0.05) !important;
  border: 1px solid rgba(11, 33, 91, 0.16) !important;
  color: #0b215b !important;
}
.lp-btn--ghost-dark:hover {
  background: rgba(11, 33, 91, 0.09) !important;
  border-color: rgba(11, 33, 91, 0.28) !important;
  transform: translateY(-2px) !important;
  color: #0b215b !important;
}
.lp-featured__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem; }
.lp-prop-card { border-radius: 20px; overflow: hidden; background: #ffffff; box-shadow: 0 20px 60px rgba(11,33,91,0.18); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease; }
.lp-prop-card:hover { transform: translateY(-8px); box-shadow: 0 36px 80px rgba(11,33,91,0.30); }
.lp-prop-card__link { display: block; text-decoration: none; color: inherit; }
.lp-prop-card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.lp-prop-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.lp-prop-card:hover .lp-prop-card__img { transform: scale(1.06); }
.lp-prop-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 60%); }
.lp-prop-card__badges { position: absolute; top: 1rem; left: 1rem; display: flex; gap: 0.45rem; flex-wrap: wrap; }
.lp-prop-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.28rem 0.7rem; border-radius: 100px; font-size: 0.72rem; font-weight: 700; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.lp-prop-badge--verified { background: rgba(5,150,105,0.85); color: #ffffff; }
.lp-prop-badge--type { background: rgba(8,16,36,0.60); color: #ffffff; border: 1px solid rgba(255,255,255,0.20); }
.lp-prop-card__body { padding: 1.4rem 1.5rem; }
.lp-prop-card__location { font-size: 0.78rem !important; font-weight: 500; color: #64748b !important; }
.lp-prop-card__title { font-family: "Manrope","Inter",system-ui,sans-serif !important; font-weight: 700 !important; font-size: 1.15rem !important; color: #0f172a !important; margin: 0.35rem 0 0.5rem !important; line-height: 1.3 !important; }
.lp-prop-card__price { font-family: "Manrope","Inter",system-ui,sans-serif !important; font-weight: 800 !important; font-size: 1.35rem !important; color: #0b215b !important; margin-bottom: 0.75rem !important; }
.lp-prop-card__highlights { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.lp-prop-card__highlights span { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem !important; font-weight: 500; color: #475569 !important; background: #f8fafc; border: 1px solid #e2e8f0; padding: 0.25rem 0.65rem; border-radius: 8px; }

/* -- SECTION 4 � AI INTELLIGENCE -- */
.lp-ai { padding: var(--lp-section-pad) 0; background: #f8fafc; }
.lp-ai__grid { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 1.5rem; }
.lp-ai-card { background: #ffffff; border-radius: var(--lp-radius); padding: 2rem 2.25rem; border: 1px solid #e2e8f0; box-shadow: 0 8px 32px rgba(11,33,91,0.07); transition: transform 0.35s ease, box-shadow 0.35s ease; display: flex; flex-direction: column; gap: 0.75rem; }
.lp-ai-card:hover { transform: translateY(-4px); box-shadow: 0 20px 54px rgba(11,33,91,0.14); }
.lp-ai-card--large { grid-row: 1 / 3; }
.lp-ai-card__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; background: rgba(37,99,235,0.10); color: #2563eb; flex-shrink: 0; }
.lp-ai-card__icon--violet { background: rgba(124,58,237,0.10); color: #7c3aed; }
.lp-ai-card__icon--emerald { background: rgba(5,150,105,0.10); color: #059669; }
.lp-ai-card__icon--gold { background: rgba(200,164,93,0.12); color: #b8862a; }
.lp-ai-card__title { font-family: "Manrope","Inter",system-ui,sans-serif !important; font-weight: 700 !important; font-size: 1.2rem !important; color: #0f172a !important; margin: 0 !important; }
.lp-ai-card__body { font-size: 0.9rem !important; color: #64748b !important; line-height: 1.6 !important; margin: 0 !important; }
.lp-ai-card__link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; font-weight: 600; color: #2563eb; text-decoration: none; margin-top: auto; transition: gap 0.2s ease; }
.lp-ai-card__link:hover { gap: 0.55rem; }
.lp-ai-card__demo { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.85rem; }
.lp-score-bar { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0.2rem 0.5rem; align-items: center; }
.lp-score-bar__label { font-size: 0.8rem !important; font-weight: 600; color: #334155 !important; grid-column: 1; }
.lp-score-bar__val { font-size: 0.85rem !important; font-weight: 700; color: #0f172a !important; grid-column: 2; grid-row: 1/3; align-self: center; }
.lp-score-bar__track { height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; grid-column: 1; }
.lp-score-bar__fill { height: 100%; width: var(--fill,0%); background: linear-gradient(90deg,#2563eb,#7c3aed); border-radius: 4px; }
.lp-score-bar__fill--emerald { background: linear-gradient(90deg,#059669,#34d399); }
.lp-score-bar__fill--gold { background: linear-gradient(90deg,#b8862a,#e8c580); }
.lp-ai-match-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.lp-ai-match-pill { padding: 0.32rem 0.8rem; border-radius: 100px; font-size: 0.78rem; font-weight: 600; background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.lp-ai-match-pill--strong { background: linear-gradient(135deg,#2563eb,#7c3aed); color: #ffffff; border-color: transparent; }
.lp-persona-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.5rem; }
.lp-tag { padding: 0.28rem 0.75rem; border-radius: 8px; font-size: 0.75rem; font-weight: 600; background: rgba(124,58,237,0.08); color: #7c3aed; border: 1px solid rgba(124,58,237,0.18); }

/* -- SECTION 5 � MARKET PULSE -- */
.lp-market { padding: var(--lp-section-pad) 0; background:  linear-gradient(126deg, #92acd2 0%, #1f1bac 100%);   position: relative; overflow: hidden; }
.lp-market::before { content:""; position:absolute; top:-20%; right:-10%; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(37,99,235,0.12) 0%,transparent 70%); pointer-events:none; }
.lp-market__kpi-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; margin-bottom: 3rem; }
.lp-kpi-card { background: rgba(255,255,255,0.07); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 1.5rem 1.6rem; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.lp-kpi-card:hover { transform: translateY(-4px); box-shadow: 0 16px 50px rgba(0,0,0,0.25); }
.lp-kpi-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.lp-kpi-card__label { font-size: 0.78rem !important; font-weight: 600; color: rgba(255,255,255,0.60) !important; letter-spacing: 0.04em; text-transform: uppercase; }
.lp-kpi-card__trend { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.72rem; font-weight: 700; padding: 0.22rem 0.6rem; border-radius: 100px; }
.lp-kpi-card__trend--up { color: #4ade80; background: rgba(74,222,128,0.12); }
.lp-kpi-card__trend--down { color: #f87171; background: rgba(248,113,113,0.12); }
.lp-kpi-card__value { font-family: "Manrope","Inter",system-ui,sans-serif !important; font-weight: 800 !important; font-size: clamp(1.5rem,3vw,2rem) !important; color: #ffffff !important; line-height: 1.1 !important; margin-bottom: 0.35rem !important; }
.lp-kpi-card__sub { font-size: 0.75rem !important; color: rgba(255,255,255,0.45) !important; }
.lp-market__signal-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: center; }
.lp-market__img-block { position: relative; border-radius: var(--lp-radius); overflow: hidden; aspect-ratio: 4/3; }
.lp-market__img { width: 100%; height: 100%; object-fit: cover; }
.lp-market__img-badge { position: absolute; bottom: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; border-radius: 100px; font-size: 0.75rem; font-weight: 700; color: #ffffff; background: rgba(8,16,36,0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.20); }
.lp-market__img-badge::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:#4ade80; animation:lp-live-pulse 1.6s ease-in-out infinite; }
@keyframes lp-live-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.4)} }
.lp-market__signals-title { font-family: "Manrope","Inter",system-ui,sans-serif !important; font-weight: 700 !important; font-size: 1.2rem !important; color: #ffffff !important; margin: 0 0 1.25rem !important; }
.lp-signal-list { display: flex; flex-direction: column; gap: 0.85rem; }
.lp-signal { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background 0.25s ease; }
.lp-signal:hover { background: rgba(255,255,255,0.10); }
.lp-signal__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; animation: lp-live-pulse 2s ease-in-out infinite; }
.lp-signal__dot--green { background: #4ade80; }
.lp-signal__dot--amber { background: #fbbf24; }
.lp-signal__dot--blue { background: #60a5fa; }
.lp-signal__text { flex: 1; }
.lp-signal__text strong { display: block; font-size: 0.88rem !important; font-weight: 600; color: #ffffff !important; }
.lp-signal__text span { font-size: 0.78rem !important; color: rgba(255,255,255,0.55) !important; }
.lp-signal__tag { padding: 0.25rem 0.7rem; border-radius: 100px; font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.lp-signal__tag--buy { background: rgba(74,222,128,0.15); color: #4ade80; }
.lp-signal__tag--hold { background: rgba(251,191,36,0.15); color: #fbbf24; }
.lp-signal__tag--watch { background: rgba(96,165,250,0.15); color: #60a5fa; }

/* -- SECTION 6 � TRUST / STATS -- */
.lp-stats { padding: var(--lp-section-pad) 0; background: #ffffff; }
.lp-stats__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.lp-stat-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: var(--lp-radius); padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: 0.6rem; transition: transform 0.35s ease, box-shadow 0.35s ease; }
.lp-stat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 50px rgba(11,33,91,0.10); border-color: rgba(37,99,235,0.20); }
.lp-stat-card__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; background: rgba(37,99,235,0.10); color: #2563eb; margin-bottom: 0.35rem; }
.lp-stat-card__icon--violet { background: rgba(124,58,237,0.10); color: #7c3aed; }
.lp-stat-card__icon--emerald { background: rgba(5,150,105,0.10); color: #059669; }
.lp-stat-card__icon--gold { background: rgba(200,164,93,0.12); color: #b8862a; }
.lp-stat-card__num { font-family: "Manrope","Inter",system-ui,sans-serif !important; font-weight: 800 !important; font-size: clamp(2rem,4vw,2.8rem) !important; color: #0b215b !important; line-height: 1.1 !important; }
.lp-stat-card__label { font-size: 1rem !important; font-weight: 700 !important; color: #0f172a !important; margin: 0 !important; }
.lp-stat-card__sub { font-size: 0.82rem !important; color: #64748b !important; margin: 0 !important; }

/* -- SECTION 7 • FINAL CTA -- */
.lp-cta {
  position: relative;
  padding: 8.5rem 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-cta__bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.lp-cta__bg-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.lp-cta:hover .lp-cta__bg-img img {
  transform: scale(1.05) !important;
}
.lp-cta__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0.45) 100%);
  z-index: 1;
}
.lp-cta__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  padding: 4.5rem 3.5rem;
  background: rgba(15, 23, 42, 0.38); /* Premium slate/indigo glass backplate */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  box-shadow: 0 30px 70px rgba(8, 16, 36, 0.35);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.lp-cta__content:hover {
  border-color: rgba(99, 102, 241, 0.25); /* Subtle indigo highlight on focus/hover */
  box-shadow: 0 35px 80px rgba(8, 16, 36, 0.45);
}
.lp-cta__headline {
  font-family: "Manrope","Inter",system-ui,sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
  margin: 0 !important;
}
.lp-cta__accent {
  background: linear-gradient(120deg, #e8c580, #c8a45d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-cta__body {
  font-size: 1.08rem !important;
  color: rgba(255, 255, 255, 0.88) !important; /* Enhanced readability contrast */
  max-width: 580px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}
.lp-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.95rem;
  justify-content: center;
}

/* Responsiveness for glass plate */
@media (max-width: 768px) {
  .lp-cta {
    padding: 6rem 0;
  }
  .lp-cta__content {
    padding: 3.5rem 2rem;
    margin-inline: 1.5rem;
    gap: 1.4rem;
  }
}
/* Role access cards styles removed */

/* -- HOMEPAGE NAVBAR: Transparent at top ? Glass on scroll -- */
body.is-home-page:not(.navbar-scrolled) .pv-navbar { background: transparent !important; border-color: rgba(255,255,255,0.18) !important; box-shadow: none !important; }
body.is-home-page:not(.navbar-scrolled) .pv-navbar .pv-brand strong { color: #ffffff !important; }
body.is-home-page:not(.navbar-scrolled) .pv-navbar .pv-brand small { color: rgba(255,255,255,0.70) !important; }
body.is-home-page:not(.navbar-scrolled) .pv-nav-links a { color: rgba(255,255,255,0.90) !important; }
body.is-home-page:not(.navbar-scrolled) .pv-nav-links a:hover { color: #ffffff !important; background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.22) !important; }
body.is-home-page:not(.navbar-scrolled) .pv-navbar .pv-icon-action { background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.20) !important; color: #ffffff !important; }
body.is-home-page:not(.navbar-scrolled) .pv-navbar .pv-icon-action:hover { background: rgba(255,255,255,0.22) !important; }
body.is-home-page:not(.navbar-scrolled) .pv-nav-profile-link { color: rgba(255,255,255,0.90) !important; }
body.is-home-page:not(.navbar-scrolled) .pv-nav-logout { background: rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.85) !important; border-color: rgba(255,255,255,0.18) !important; }
body.is-home-page:not(.navbar-scrolled) .pv-nav-actions .pv-btn-ghost { background: rgba(255,255,255,0.14) !important; border-color: rgba(255,255,255,0.22) !important; color: #ffffff !important; }
body.is-home-page.navbar-scrolled .pv-navbar { background: rgba(255,255,255,0.88) !important; backdrop-filter: blur(36px) !important; -webkit-backdrop-filter: blur(36px) !important; box-shadow: 0 8px 40px rgba(11,33,91,0.14),0 1px 0 rgba(255,255,255,0.40) inset !important; border-color: rgba(255,255,255,0.50) !important; }

/* -- RESPONSIVE -- */
@media (max-width: 1024px) {
  .lp-story__row { grid-template-columns: 1fr; gap: 2.5rem; }
  .lp-story__row--img-right { direction: ltr; }
  .lp-story__container { gap: 5rem; }
  .lp-featured__grid { grid-template-columns: 1fr 1fr; }
  .lp-featured__grid .lp-prop-card:nth-child(3) { grid-column: 1/-1; max-width: 560px; margin-inline: auto; }
  .lp-ai__grid { grid-template-columns: 1fr; }
  .lp-ai-card--large { grid-row: auto; }
  .lp-market__kpi-row { grid-template-columns: repeat(2,1fr); }
  .lp-market__signal-row { grid-template-columns: 1fr; gap: 2rem; }
  .lp-stats__grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .lp-search { grid-template-columns: 1fr; padding: 1.25rem; gap: 0.5rem; }
  .lp-search__divider { display: none; }
  .lp-search__group { padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.15); }
  .lp-search__group:last-of-type { border-bottom: none; }
  .lp-search__btn { margin-left: 0; margin-top: 0.5rem; width: 100%; justify-content: center; }
  .lp-featured__grid { grid-template-columns: 1fr; }
  .lp-featured__grid .lp-prop-card:nth-child(3) { max-width: 100%; }
  .lp-market__kpi-row { grid-template-columns: 1fr 1fr; }
  .lp-section-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .lp-hero__ctas,.lp-cta__btns { flex-direction: column; width: 100%; }
  .lp-btn,.lp-btn--lg { width: 100%; justify-content: center; }
  .lp-stats__grid,.lp-market__kpi-row,.lp-ai__grid { grid-template-columns: 1fr; }
  .lp-story__container { gap: 3.5rem; }
}

/* --- CSS-class based pre-reveal state (JS adds lp-will-reveal, removes when visible) --- */
.lp-will-reveal {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1) !important;
}
.lp-will-reveal.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* --- PATCH: lp-will-reveal uses translate-only (no opacity hide) for reliability --- */
/* Sections are visible by default. JS adds lp-will-reveal just before observing,
   and removes it immediately on intersection (so no FOUC). */
.lp-will-reveal {
  transform: translateY(16px) !important;
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1) !important;
}
.lp-will-reveal.is-visible,
.lp-will-reveal:not([style]) {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* --- lp-entered: cosmetic scroll slide animation (sections visible by default) --- */
/* No opacity:0 � elements are always shown. This is a pure enhancement animation. */
@keyframes lp-slide-in {
  from { transform: translateY(18px); opacity: 0.7; }
  to   { transform: translateY(0);    opacity: 1;   }
}
.lp-entered {
  animation: lp-slide-in 0.65s cubic-bezier(0.16,1,0.3,1) both;
}

/* ══════════════════════════════════════════
   SECTION 1 · CINEMATIC SCROLL FILM
   ══════════════════════════════════════════ */














@keyframes lp-hint-scroll {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* ══════════════════════════════════════════
   ASPECT RATIOS & TRANSITIONS FOR PROPERTIES
   ══════════════════════════════════════════ */
/* Property Marketplace Cards: 16:10 */
.property-card-premium .property-media {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  overflow: hidden !important;
}

/* Homepage Featured Cards: 16:9 */
.lp-prop-card__media {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}

/* Hero & Carousel Cover Mode */
.gallery-main-container img,
.detail-gallery-main img,
.gallery-tile-container img,
.carousel-item img,
.lp-cta__bg-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Soft image loading transitions */
.lp-prop-card__img,
.property-media img,
.gallery-tile-container img,
.carousel-item img {
  opacity: 0;
  transition: opacity 0.4s ease-in-out !important;
}

.lp-prop-card__img.is-loaded,
.property-media img.is-loaded,
.gallery-tile-container img.is-loaded,
.carousel-item img.is-loaded {
  opacity: 1 !important;
}

/* ══════════════════════════════════════════
   SECTION 1 · CINEMATIC SCROLL FILM
   ══════════════════════════════════════════ */
.lp-cinematic {
  position: relative;
  width: 100%;
  height: 600vh; /* scroll range of 600vh */
  background: #081024;
  overflow: visible;
}

.lp-cinematic__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #081024;
  transition: opacity 0.3s ease;
}

.lp-cinematic__canvas,
.lp-cinematic__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-cinematic__hint {
  position: absolute;
  bottom: 3.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.lp-cinematic__hint-text {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.lp-cinematic__hint-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0));
  position: relative;
  overflow: hidden;
}

.lp-cinematic__hint-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #e8c580, rgba(255, 255, 255, 0));
  animation: lp-hint-scroll 2s cubic-bezier(0.15, 0.85, 0.45, 1) infinite;
}

@keyframes lp-hint-scroll {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* ================================================================
   PropVista V8 Cinematic Image Story Experience
   ================================================================ */
.lp-story-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.lp-story-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.00);
  transform-origin: center;
  will-change: opacity, transform;
  transition: opacity 0.4s ease-out;
}

.lp-story-img.active {
  opacity: 1;
}

.lp-cinematic__vignette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.15), rgba(15, 23, 42, 0.30));
  z-index: 2;
}

/* ================================================================
   PropVista /properties/ Page Visual Scale Override (8% Reduction)
   ================================================================ */
body.is-properties-page .workspace-page-title {
  font-size: 2.07rem !important; /* reduced by 8% from 2.25rem */
}
body.is-properties-page .workspace-page-subtitle {
  font-size: 0.94rem !important; /* reduced from 1.025rem */
}
body.is-properties-page .filter-panel {
  padding: 1.2rem !important; /* compact layout */
}
body.is-properties-page .filter-panel .form-control,
body.is-properties-page .filter-panel .form-select {
  min-height: 40px !important; /* reduced by ~16% for professional fit */
  font-size: 0.88rem !important;
  padding: 0.375rem 0.75rem !important;
}
body.is-properties-page .filter-panel .vstack {
  gap: 0.75rem !important;
}
body.is-properties-page .filter-panel h2 {
  font-size: 1.1rem !important;
}
body.is-properties-page .property-card-premium .property-card-body {
  padding: 1.45rem !important; /* reduced from 1.75rem */
}
body.is-properties-page .property-card-premium .property-media {
  height: 258px !important; /* reduced from 280px by 8% */
}
body.is-properties-page .property-card-premium .property-title {
  font-size: 1.15rem !important; /* reduced from 1.25rem by 8% */
}
body.is-properties-page .property-card-premium .property-price {
  font-size: 1.38rem !important; /* reduced from 1.5rem by 8% */
}
body.is-properties-page .property-card-premium .property-location {
  font-size: 0.85rem !important;
}
body.is-properties-page .property-card-premium .property-facts {
  padding-top: 0.75rem !important;
  font-size: 0.8rem !important;
}
body.is-properties-page .pv-btn {
  min-height: 40px !important; /* reduced from 44px */
  padding: 0.65rem 1rem !important;
  font-size: 0.88rem !important;
}
body.is-properties-page [data-save-search-form] {
  padding: 0.3rem 0.5rem !important;
}
body.is-properties-page [data-save-search-form] input {
  font-size: 0.75rem !important;
}
body.is-properties-page [data-save-search-form] button {
  min-height: 28px !important;
  font-size: 0.75rem !important;
  padding: 0.25rem 0.75rem !important;
}
body.is-properties-page .listing-tools h2 {
  font-size: 1.15rem !important; /* reduced inventory header */
}
body.is-properties-page .listing-tools .pv-muted.small {
  font-size: 0.78rem !important;
}

/* ============================================================
   Phase 3: Premium Glass Control Bar (Detail Page)
   ============================================================ */
.gallery-glass-control-bar {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 20px;
  background: rgba(11, 33, 91, 0.75) !important; /* PropVista primary #0b215b with transparency */
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  width: max-content;
  max-width: 92%;
  transition: all 0.3s ease;
}

.gallery-control-btn {
  background: none !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
}

.gallery-control-btn:hover {
  color: #ffffff !important;
}

.gallery-control-btn:active {
  transform: scale(0.95) !important;
}

.gallery-photo-counter {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-left: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.25) !important;
  padding: 0 16px !important;
  user-select: none !important;
}

@media (max-width: 576px) {
  .gallery-glass-control-bar {
    padding: 6px 14px !important;
    gap: 8px !important;
  }
  .gallery-control-btn {
    padding: 4px 6px !important;
  }
  .gallery-control-btn span {
    display: none !important; /* Hide "Previous Photo" label text on mobile, keep arrows */
  }
  .gallery-photo-counter {
    padding: 0 10px !important;
    font-size: 0.72rem !important;
  }
}

/* ============================================================
   Phase 4: Property Card Image Standardization
   ============================================================ */
/* Ensure all property-media containers have consistent aspect ratio */
.property-card-premium .property-media {
  aspect-ratio: 4 / 3;
  height: unset; /* Use aspect-ratio instead of fixed height */
  overflow: hidden;
}
.property-card-premium .property-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Landing page featured cards - standardized height */
.lp-prop-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.lp-prop-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}