/* ==========================================================================
   HOMENEX DESIGN SYSTEM — global.css
   Flat Design Paradigm: NO box-shadow permitted.
   Separation via: borders, bg-color contrast, spacing.
   ========================================================================== */

/* ==========================================================================
   DESIGN TOKENS (CSS Custom Properties)
   ========================================================================== */
:root {
   /* Brand — Primary Blue */
   --primary: #003d9b;
   --primary-container: #0052cc;
   --primary-fixed: #dae2ff;
   --primary-hover: #0047b8;
   --primary-active: #002d73;

   --on-primary: #ffffff;
   --on-primary-container: #91afff;
   --on-primary-fixed: #00185d;

   --black: #000000;
   --white: #FFFFFF;

   /* Brand — Secondary Blue */
   --secondary: #0050cd;
   --secondary-container: #0966ff;
   --secondary-fixed: #dbe1ff;

   --secondary-hover: #0048b8;
   --secondary-active: #00327d;

   --on-secondary-fixed: #00184a;
   --on-secondary-container: #f9f7ff;

   /* Surfaces */
   --background: #faf9ff;
   --surface: #faf9ff;
   --surface-container-lowest: #ffffff;
   --surface-container-low: #f1f3ff;
   --surface-container: #e9edff;
   --surface-container-high: #e1e8ff;
   --surface-container-highest: #d8e2ff;

   --on-surface: #051a3e;
   --on-surface-variant: #434652;

   /* Borders & Outlines */
   --outline: #737685;
   --outline-variant: #c3c6d6;

   /* Disabled */
   --disabled-bg: #eef2ff;
   --disabled-text: #94a3b8;
   --disabled-border: #dbe3f0;

   /* Status — Success */
   --success: #15803d;
   --success-text: #166534;
   --success-bg: #dcfce7;
   --success-border: #86efac;
   --success-hover: #22c55e;
   --success-hover-border: #16a34a;
   --success-active: #166534;
   --success-active-text: #ffffff;
   --success-active-border: #14532d;

   /* Status — Warning */
   --warning: #b45309;
   --warning-text: #92400e;
   --warning-bg: #fef3c7;
   --warning-border: #fcd34d;
   --warning-hover: #fde68a;
   --warning-hover-border: #f59e0b;
   --warning-active: #d97706;
   --warning-active-text: #ffffff;
   --warning-active-border: #92400e;

   /* Status — Error */
   --error: #dc2626;
   --error-text: #991b1b;
   --error-bg: #fee2e2;
   --error-border: #fca5a5;
   --error-hover: #fecaca;
   --error-hover-border: #ef4444;
   --error-active: #dc2626;
   --error-active-text: #ffffff;
   --error-active-border: #991b1b;

   /* Status — Info */
   --info: #0369a1;
   --info-text: #075985;
   --info-bg: #e0f2fe;
   --info-border: #7dd3fc;
   --info-hover: #bae6fd;
   --info-hover-border: #38bdf8;
   --info-active: #0284c7;
   --info-active-text: #ffffff;
   --info-active-border: #075985;

   /* Status — Featured */
   --featured: #f59e0b;
   --featured-text: #92400e;
   --featured-bg: #fff7e6;
   --featured-border: #fbbf24;
   --featured-hover: #fcd34d;
   --featured-hover-border: #f59e0b;
   --featured-active: #f59e0b;
   --featured-active-text: #ffffff;
   --featured-active-border: #b45309;

   /* Status — Premium */
   --premium: #ffcc33;
   --premium-text: #6b4f00;
   --premium-bg: #fff9e6;
   --premium-border: #ffd966;
   --premium-hover: #ffe680;
   --premium-hover-border: #ffcc33;
   --premium-active: #ffcc33;
   --premium-active-text: #4a3600;
   --premium-active-border: #c99800;

   /* Brand — Agent Contact Buttons */
   --whatsapp: #25d366;
   --whatsapp-hover: #128c7e;
   --zalo: #0068ff;
   --zalo-hover: #0052cc;
   --line: #06c755;
   --line-hover: #05a947;
   --telegram: #229ed9;
   --telegram-hover: #1687bd;
   --phone: #2563eb;
   --phone-hover: #1d4ed8;
   --email-btn: #64748b;
   --email-btn-hover: #475569;

   /* Spacing Scale */
   --gutter: 24px;
   --stack-xl: 48px;
   --stack-lg: 24px;
   --stack-md: 16px;
   --stack-sm: 8px;
   --stack-xs: 4px;

   /* Layout */
   --nav-height: 50px;
   --sidebar-width: 280px;

   /* Border Radius */
   --radius-xs: 4px;
   --radius-sm: 6px;
   --radius-md: 10px;
   --radius-lg: 16px;
   --radius-xl: 24px;
   --radius-full: 9999px;

   /* Transitions */
   --transition-fast: 0.15s ease;
   --transition-base: 0.2s ease;
   --transition-slow: 0.3s ease;
}

/* ==========================================================================
   CSS RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: "Inter", system-ui, sans-serif;
   color: var(--on-surface);
   background: var(--background);
   -webkit-tap-highlight-color: transparent;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: 'Lexend', sans-serif;
   line-height: 1.25;
}

button {
   border: none;
   background: transparent;
   cursor: pointer;
   outline: none;
   font-family: inherit;
   transition: background var(--transition-fast),
      color var(--transition-fast),
      border-color var(--transition-fast),
      transform var(--transition-fast);
}

input,
select,
textarea {
   border: none;
   outline: none;
   font-family: inherit;
   font-size: inherit;
}

a {
   text-decoration: none;
   color: inherit;
   transition: color var(--transition-fast);
}

img {
   max-width: 100%;
   height: auto;
   display: block;
}

ul,
ol {
   list-style: none;
}

/* ==========================================================================
   MATERIAL SYMBOLS ICON SETUP
   ========================================================================== */
.material-symbols-outlined {
   font-feature-settings: 'liga' 1;
   font-family: 'Material Symbols Outlined' !important;
   font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
   -webkit-font-feature-settings: 'liga' 1;
   -webkit-font-smoothing: antialiased;
   direction: ltr;
   letter-spacing: normal;
   line-height: 1;
   overflow: hidden;
   text-transform: none;
   white-space: nowrap;
   word-wrap: normal;
   user-select: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   vertical-align: middle;
   line-height: 1;
   flex-shrink: 0;
}

html:not(.material-symbols-ready) .material-symbols-outlined {
   opacity: 0;
}

html.material-symbols-ready .material-symbols-outlined {
   opacity: 1;
}

.fill-icon {
   font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24 !important;
}

/* ==========================================================================
   CUSTOM SCROLLBAR
   ========================================================================== */
::-webkit-scrollbar {
   width: 5px;
   height: 5px;
}

::-webkit-scrollbar-track {
   background: transparent;
}

::-webkit-scrollbar-thumb {
   background: var(--surface-container-highest);
   border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
   background: var(--outline-variant);
}

.no-scrollbar::-webkit-scrollbar,
.scrollbar-hide::-webkit-scrollbar {
   display: none;
}

.no-scrollbar,
.scrollbar-hide {
   -ms-overflow-style: none;
   scrollbar-width: none;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */
.hidden {
   display: none !important;
}

/* Custom icons for symbols used instead of inline styles */
.icon-16 {
   font-size: 16px;
}

.icon-18 {
   font-size: 18px;
}

.icon-20 {
   font-size: 20px;
}

.icon-24 {
   font-size: 24px;
}

/* ==========================================================================
   TYPOGRAPHY SCALE
   ========================================================================== */
.text-display {
   font-family: 'Lexend', sans-serif;
   font-size: 40px;
   line-height: 1.1;
   font-weight: 800;
}

.text-h1 {
   font-family: 'Lexend', sans-serif;
   font-size: 32px;
   line-height: 1.2;
   font-weight: 700;
}

.text-h2 {
   font-family: 'Lexend', sans-serif;
   font-size: 26px;
   line-height: 1.2;
   font-weight: 700;
}

.text-h3 {
   font-family: 'Lexend', sans-serif;
   font-size: 20px;
   line-height: 1.3;
   font-weight: 700;
}

.text-title-lg {
   font-size: 18px;
   line-height: 1.4;
   font-weight: 700;
}

.text-title-md {
   font-size: 16px;
   line-height: 1.4;
   font-weight: 700;
}

.text-title-sm {
   font-size: 14px;
   line-height: 1.4;
   font-weight: 700;
}

.text-body-lg {
   font-size: 16px;
   line-height: 1.6;
   font-weight: 400;
}

.text-body-md {
   font-size: 14px;
   line-height: 1.5;
   font-weight: 400;
}

.text-body-sm {
   font-size: 12px;
   line-height: 1.5;
   font-weight: 400;
}

.text-label-lg {
   font-size: 14px;
   line-height: 1;
   font-weight: 700;
   letter-spacing: 0.01em;
}

.text-label-md {
   font-size: 13px;
   line-height: 1;
   font-weight: 700;
   letter-spacing: 0.01em;
}

.text-label-sm {
   font-size: 11px;
   line-height: 1;
   font-weight: 700;
   letter-spacing: 0.04em;
   text-transform: uppercase;
}

.text-price {
   font-family: 'Lexend', sans-serif;
   font-size: 18px;
   font-weight: 700;
}

.text-price-lg {
   font-family: 'Lexend', sans-serif;
   font-size: 24px;
   font-weight: 700;
}

/* ==========================================================================
   GLOBAL BUTTON SYSTEM
   ========================================================================== */

/* --- Primary Button --- */
.btn-primary {
   padding: 8px 18px;
   background: var(--primary);
   color: var(--on-primary);
   border-radius: var(--radius-full);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   font-weight: 600;
   font-size: 13px;
   white-space: nowrap;
   transition: background var(--transition-fast);
}

.btn-primary:hover {
   background: var(--primary-container);
}

.btn-primary:active {
   transform: scale(0.98);
}

.btn-primary .material-symbols-outlined {
   font-size: 18px;
}

/* --- Outline Button --- */
.btn-outline {
   padding: 8px 18px;
   background: #ffffff;
   color: var(--primary);
   border: 1px solid var(--primary);
   border-radius: var(--radius-md);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   font-weight: 600;
   font-size: 13px;
   white-space: nowrap;
   transition: background var(--transition-fast), color var(--transition-fast);
}

.btn-outline:hover {
   background: var(--surface-container-low);
}

.btn-outline:active {
   transform: scale(0.98);
}

/* --- No- Outline Button --- */
.btn-no-outline {
   padding: 3px 8px;
   background: transparent;
   color: var(--primary);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   font-weight: 500;
   font-size: 13px;
   transition: background var(--transition-fast), color var(--transition-fast);
}

.btn-no-outline:hover {
   background: var(--surface-container-low);
}

.btn-no-outline:active {
   transform: scale(0.98);
}

/* --- Ghost / Secondary Button --- */
.btn-ghost {
   padding: 8px 16px;
   background: transparent;
   color: var(--on-surface-variant);
   border: 1px solid var(--outline-variant);
   border-radius: var(--radius-md);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   font-weight: 600;
   font-size: 13px;
   white-space: nowrap;
   transition: background var(--transition-fast),
      border-color var(--transition-fast),
      color var(--transition-fast);
}

.btn-ghost:hover {
   background: var(--surface-container-low);
   border-color: var(--outline);
   color: var(--on-surface);
}

.btn-ghost:active {
   transform: scale(0.98);
}

/* --- Danger Button --- */
.btn-danger {
   padding: 8px 18px;
   background: transparent;
   color: var(--error);
   border: 1px solid #fca5a5;
   border-radius: var(--radius-md);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   font-weight: 600;
   font-size: 13px;
   transition: background var(--transition-fast);
}

.btn-danger:hover {
   background: var(--error-container);
}

.btn-danger:active {
   transform: scale(0.98);
}

/* ==========================================================================
   GLOBAL LAYOUT SYSTEM
   ========================================================================== */
.layout-container {
   max-width: 1440px;
   margin: 0 auto;
   width: 100%;
}

.main-wrapper {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: var(--gutter);
   padding: 16px;
}

.main-content {
   flex: 1;
   min-width: 0;
}

/* Desktop sidebar: hidden by default, revealed by media query */
.desktop-sidebar {
   display: none;
}

@media (min-width: 1024px) {

   /* Sidebar layout activated */
   .main-wrapper {
      flex-direction: row;
      padding: 24px;
      gap: var(--gutter);
      /*
       * min-height ensures the flex row is always at least as tall as the
       * viewport area below the navbar. Without this, a short main-content
       * would make the row too short to contain the sticky sidebar, causing
       * the sidebar to visually overlap the footer when expanded.
       */
      min-height: calc(100vh - var(--nav-height));
   }

   /* Show desktop sidebar */
   .desktop-sidebar {
      display: block;
      width: var(--sidebar-width);
      flex-shrink: 0;
      position: sticky;
      top: calc(var(--nav-height) + 16px);
      align-self: flex-start;
   }
}

/* ==========================================================================
   TOP NAVBAR
   ========================================================================== */
.top-navbar {
   width: 100%;
   height: var(--nav-height);
   flex-shrink: 0;
   display: flex;
   justify-content: center;
   background: rgba(250, 249, 255, 0.8);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid rgba(195, 198, 214, 0.3);
   position: sticky;
   top: 0;
   z-index: 2900;
}

.navbar-container {
   width: 100%;
   max-width: 1920px;
   padding: 0 var(--gutter);
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 100%;
   gap: 12px;
}

.brand-logo {
   display: flex;
   align-items: center;
   gap: 8px;
   cursor: pointer;
   flex-shrink: 0;
   text-decoration: none;
}

.brand-logo img {
   height: 30px;
   width: auto;
}

.brand-wordmark {
   font-family: 'Lexend', sans-serif;
   font-size: 18px;
   font-weight: 800;
   color: var(--primary);
   letter-spacing: -0.02em;
}

/* AI-driven Search Bar Component */
.search-container {
   display: flex;
   align-items: center;
   background: var(--surface-container-lowest);
   border: 1px solid var(--outline-variant);
   border-radius: var(--radius-full);
   padding: 5px 6px 5px 14px;
   transition: border-color var(--transition-fast), background-color var(--transition-fast);
   position: relative;
   gap: 8px;
}

/* Hide global search bar by default on all pages */
.global-search-bar {
   display: none;
}

@media (min-width: 1024px) {
   .page-map-search .global-search-bar {
      display: flex;
      flex: 1;
      max-width: 480px;
      margin: 0 24px;
   }
}

/* Mobile View: Hide navbar search bar */
@media (max-width: 1023px) {
   .global-search-bar {
      display: none;
   }
}

.search-container:focus-within {
   border-color: var(--primary);
   background-color: var(--surface-container-lowest);
}

.search-container .ai-search-icon {
   color: var(--primary);
   font-size: 18px;
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.search-container .search-input {
   flex: 1;
   border: none;
   background: transparent;
   color: var(--on-surface);
   outline: none;
   font-size: 13px;
   padding: 4px 6px;
   width: 100%;
}

.search-container .search-input::placeholder {
   color: var(--outline);
}

/* trailing search button matching support-search-btn */
.support-search-btn,
.search-container .support-search-btn {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: var(--primary);
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: background var(--transition-fast), transform var(--transition-fast);
   cursor: pointer;
}

.search-container .support-search-btn:hover {
   background: var(--primary-container);
}

.search-container .support-search-btn:active {
   transform: scale(0.95);
}

.support-search-btn .material-symbols-outlined,
.search-container .support-search-btn .material-symbols-outlined {
   font-size: 16px;
}

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

.nav-divider {
   width: 1px;
   height: 22px;
   background: var(--outline-variant);
   flex-shrink: 0;
}

.user-avatar {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   overflow: hidden;
   border: 1px solid var(--outline-variant);
   cursor: pointer;
   flex-shrink: 0;
   transition: border-color var(--transition-fast);
}

.user-avatar:hover {
   border-color: var(--primary);
}

.user-avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.avatar-letter {
   background: var(--avatar-color);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2.5rem;
   font-weight: 700;
   border-radius: 50%;
   user-select: none;
}

.avatar-letter-sm {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-weight: 700;
   font-size: 14px;
   border-radius: 50%;
   user-select: none;
}

.btn-mobile-more-list {
   display: none;
}

@media (min-width: 1024px) {
   .nav-actions {
      display: flex;
      align-items: center;
      gap: 8px;
   }

   .btn-mobile-more-list {
      display: none !important;
   }
}

@media (max-width: 1023px) {
   .navbar-container {
      position: relative;
   }

   .brand-logo {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
   }

   .nav-actions {
      display: flex !important;
      align-items: center;
      gap: 4px;
      position: absolute;
      right: var(--gutter);
   }

   /* Hide desktop-only text buttons & avatar on mobile */
   .nav-actions .btn-primary,
   .nav-actions .nav-divider,
   .nav-actions .user-avatar {
      display: none !important;
   }

   /* Icon-only Language dropdown on mobile (Inverse 38px Circle Button) */
   .nav-actions .language-dropdown {
      gap: 0;
   }

   .nav-actions .language-dropdown #currentLanguage,
   .nav-actions .language-dropdown .arrow-icon {
      display: none !important;
   }

   .nav-actions .language-btn {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: var(--radius-sm);
      background: var(--surface-container-lowest, #ffffff);
      color: var(--primary);
      border: 1px solid var(--primary);
      cursor: pointer;
      padding: 0;
      gap: 0;
      transition: background var(--transition-fast);
   }

   .nav-actions .language-btn:hover,
   .nav-actions .language-btn:active {
      background: var(--primary-fixed, #dae2ff);
      border-color: var(--primary);
   }

   .nav-actions .language-btn .glob-icon {
      font-size: 20px !important;
      color: var(--primary) !important;
   }

   .nav-actions .language-menu {
      right: 0;
      left: auto;
   }

   /* Icon-only Mobile More List button */
   .btn-mobile-more-list {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: transparent;
      border: none;
      color: var(--on-surface);
      cursor: pointer;
      padding: 0;
   }

   .btn-mobile-more-list:hover,
   .btn-mobile-more-list:active {
      background: var(--surface-container-high);
   }
}

/* Return to Map Button on section header */
.btn-return-map {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 6px 14px;
   font-size: 13px;
   font-weight: 600;
   color: var(--primary);
   background: var(--surface-container-lowest, #ffffff);
   border: 1px solid var(--outline-variant, #c3c6d6);
   border-radius: var(--radius-full, 9999px);
   text-decoration: none;
   margin-left: auto;
   transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.btn-return-map:hover {
   background: var(--primary-fixed, #dae2ff);
   border-color: var(--primary);
   color: var(--primary);
}

.btn-return-map .material-symbols-outlined {
   font-size: 18px !important;
   color: inherit !important;
   margin-right: 0 !important;
}

/* language switcher */
.language-dropdown {
   position: relative;
   display: flex;
   line-height: 1;
   gap: 6px;
}

.language-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   padding: 4.5px 10px;
   background: var(--surface-container-lowest, #ffffff);
   color: var(--primary);
   border: 1px solid var(--primary);
   border-radius: var(--radius-full);
   font-weight: 600;
   font-size: 13px;
   white-space: nowrap;
   cursor: pointer;
   transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.language-btn:hover {
   background: var(--primary-fixed, #dae2ff);
   color: var(--primary);
   border-color: var(--primary);
}

.language-btn .material-symbols-outlined {
   font-size: 18px;
   color: var(--primary);
}

.language-menu {
   position: absolute;
   top: 100%;
   margin-top: 6px;
   left: 0;
   background: var(--surface-container-lowest);
   border: 1px solid var(--outline-variant);
   border-radius: var(--radius-sm);
   overflow: hidden;
   display: none;
   z-index: 1000;
   width: max-content;
}

.language-menu.open {
   display: block;
}

.language-item {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 5px 10px;
   cursor: pointer;
}

.language-item:hover {
   background: var(--surface-container-low);
}

/* ==========================================================================
   MOBILE DRAWER (Slide-in sidebar for mobile/tablet)
   ========================================================================== */

.mobile-menu-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 6px;
   border-radius: var(--radius-sm);
   color: var(--on-surface);
   transition: background var(--transition-fast);
   flex-shrink: 0;
}

.mobile-menu-btn:hover {
   background: var(--surface-container-low);
}

.mobile-menu-btn .material-symbols-outlined {
   font-size: 24px;
}

.drawer-overlay {
   position: fixed;
   inset: 0;
   z-index: 3000;
   visibility: hidden;
   transition: visibility var(--transition-slow);
}

.drawer-overlay.open {
   visibility: visible;
}

.drawer-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(5, 26, 62, 0.45);
   opacity: 0;
   transition: opacity var(--transition-slow);
}

.drawer-overlay.open .drawer-backdrop {
   opacity: 1;
}

.drawer-panel {
   position: absolute;
   top: 0;
   left: 0;
   width: var(--sidebar-width);
   height: 100%;
   background: var(--primary);
   border-right: 1px solid rgba(255, 255, 255, 0.08);
   display: flex;
   flex-direction: column;
   transform: translateX(-100%);
   transition: transform var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
   padding: 12px;
   gap: 4px;
   overflow-y: auto;
   z-index: 2000;
}

.drawer-overlay.open .drawer-panel {
   transform: translateX(0);
}

.drawer-close-btn {
   color: rgba(255, 255, 255, 0.75);
   align-self: flex-end;
   padding: 6px;
   border-radius: var(--radius-sm);
   display: flex;
   align-items: center;
   transition: background var(--transition-fast), color var(--transition-fast);
}

.drawer-close-btn:hover {
   background: rgba(255, 255, 255, 0.1);
   color: white;
}

@media (min-width: 1024px) {

   /* Hide mobile hamburger */
   .mobile-menu-btn {
      display: none !important;
   }
}


/* ==========================================================================
   SIDEBAR CARD (Shared inner component for desktop & mobile drawer)
   ========================================================================== */
.sidebar-card {
   background: var(--primary);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: var(--radius-lg);
   padding: 12px;
   display: flex;
   flex-direction: column;
   gap: 4px;
   height: 100%;
   overflow-y: auto;
}

/* --- Profile Summary --- */
.profile-summary {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 10px;
   padding: 12px 8px 8px;
}

.avatar-large {
   width: 76px;
   height: 76px;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid rgba(255, 255, 255, 0.2);
   transition: transform var(--transition-slow);
}

.avatar-large:hover {
   transform: scale(1.05);
}

.sidebar-profile-name {
   font-family: 'Lexend', sans-serif;
   font-size: 17px;
   font-weight: 700;
   color: var(--on-primary);
   line-height: 1.25;
   white-space: normal;
   word-break: break-word;
   overflow-wrap: break-word;
}

.badge-verified-container {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 3px 10px;
   background: var(--primary-container);
   border-radius: var(--radius-full);
   border: 1px solid rgba(255, 255, 255, 0.18);
   margin: 10px auto;
}

.badge-verified-container .material-symbols-outlined {
   font-size: 13px;
   color: var(--secondary-fixed);
}

.sidebar-profile-role {
   color: white;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.04em;
   text-transform: uppercase;
}

/* --- Profile Summary: Auth State Toggling ---
   Add class "logged-out" to .profile-summary to switch to guest UI.
   Default (no class) = logged-in state. */

.profile-summary.logged-out .logged-in-only {
   display: none;
}

.profile-summary.logged-out .logged-out-only {
   display: flex;
}

/* Guest avatar icon */
.guest-avatar-icon {
   width: 68px;
   height: 68px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.12);
   border: 2px solid rgba(255, 255, 255, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, 0.65);
}

.guest-avatar-icon .material-symbols-outlined {
   font-size: 36px;
}

/* Logged-out CTA buttons in sidebar */
.profile-summary-auth-actions {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   width: 100%;
   padding: 0 4px;
}

/* --- Guest / Logged Out State Styles --- */
/* In guest state (logged out), hide avatar */
body.guest-state .top-navbar .user-avatar {
   display: none !important;
}

/* --- Body scroll lock (mobile modals) --- */
body.body-scroll-locked {
   overflow: hidden !important;
}

/* --- List Property CTA --- */
.btn-auth-signin,
.btn-register {
   width: 100%;
   padding: 9px 12px;
   background: var(--secondary-container);
   color: var(--on-secondary-container);
   border-radius: var(--radius-full);
   font-weight: 700;
   font-size: 13px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   margin-bottom: 14px;
   transition: background var(--transition-fast);
}

.btn-auth-signin .material-symbols-outlined,
.btn-register .material-symbols-outlined {
   font-size: 18px;
}

.btn-auth-signin:hover,
.btn-register:hover {
   background: #0a55d4;
}

.btn-auth-signin:active,
.btn-register:active {
   transform: scale(0.98);
}

/* --- Navigation Menu --- */
.sidebar-menu {
   display: flex;
   flex-direction: column;
   gap: 2px;
   flex: 1;
}

.nav-group {
   display: flex;
   flex-direction: column;
}

.nav-link {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 10px;
   color: white;
   border-radius: var(--radius-sm);
   font-weight: 600;
   font-size: 13px;
   text-decoration: none;
   width: 100%;
   text-align: left;
   transition: background var(--transition-fast),
      color var(--transition-fast),
      padding-left var(--transition-fast);
}

.nav-link .material-symbols-outlined {
   font-size: 20px;
   flex-shrink: 0;
}

.nav-link:hover {
   background: rgba(255, 255, 255, 0.1);
   color: white;
   padding-left: 14px;
}

.nav-link.active {
   background: rgba(255, 255, 255, 0.18);
   color: white;
   font-weight: 700;
   padding-left: 9px;
}

.nav-parent-btn {
   cursor: pointer;
   background: transparent;
   border: none;
}

.arrow-icon {
   margin-left: auto;
   font-size: 18px !important;
   transition: transform var(--transition-base);
}

.nav-group.open .arrow-icon {
   transform: rotate(180deg);
}

/* --- Accordion Submenu --- */
.submenu {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows var(--transition-slow);
   overflow: hidden;
   padding-left: 30px;
}

.submenu-inner {
   min-height: 0;
   display: flex;
   flex-direction: column;
   gap: 1px;
   padding: 3px 0;
}

.nav-group.open .submenu {
   grid-template-rows: 1fr;
}

.submenu-link {
   display: flex;
   align-items: center;
   padding: 7px 10px;
   color: rgba(255, 255, 255, 0.6);
   border-radius: var(--radius-sm);
   font-size: 12px;
   font-weight: 500;
   text-decoration: none;
   transition: all var(--transition-fast);
}

.submenu-link:hover {
   color: white;
   background: rgba(255, 255, 255, 0.1);
   padding-left: 14px;
}

.submenu-link.active {
   color: white;
   background: rgba(255, 255, 255, 0.15);
   font-weight: 700;
}

/* --- Logout --- */
.logout-btn {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 10px;
   color: rgba(255, 255, 255, 0.65);
   border-radius: var(--radius-sm);
   font-weight: 600;
   font-size: 13px;
   width: 100%;
   text-align: left;
   transition: background var(--transition-fast), color var(--transition-fast);
   margin-top: 30px;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   padding-top: 12px;
}

.logout-btn .material-symbols-outlined {
   font-size: 20px;
}

.logout-btn:hover {
   color: white;
   background: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   BREADCRUMB COMPONENT
   ========================================================================== */
.breadcrumb-nav {
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 12px;
   color: var(--on-surface-variant);
   margin-bottom: 4px;
   flex-wrap: wrap;
}

.breadcrumb-item {
   cursor: pointer;
   transition: color var(--transition-fast);
}

.breadcrumb-item:hover {
   color: var(--primary);
}

.breadcrumb-separator {
   font-size: 12px;
}

.breadcrumb-current {
   color: var(--primary);
   font-weight: 700;
}

.filter-btn-more,
.view-list-btn,
.btn-back {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: var(--primary);
   color: var(--on-primary);
   border: 1px solid var(--primary);
   border-radius: var(--radius-sm);
   font-size: 14px;
   font-weight: 600;
   text-decoration: none;
   padding: 6px 12px;
   margin-bottom: 16px;
   transition: all var(--transition-fast);
}

.filter-btn-more,
.view-list-btn {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   cursor: pointer;
   margin-bottom: 0px;
}

.filter-btn-more:hover,
.view-list-btn:hover,
.btn-back:hover {
   color: var(--white);
   background: var(--primary-container);
   border: 1px solid var(--primary-container);
}

.filter-btn-more .material-symbols-outlined,
.view-list-btn .material-symbols-outlined,
.btn-back .material-symbols-outlined {
   font-size: 20px;
}

.header-top-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
   width: 100%;
   margin-bottom: 16px;
   flex-wrap: wrap;
}

.header-top-row .breadcrumb-nav {
   margin-bottom: 0;
}

.header-top-row .btn-back {
   margin-bottom: 0;
}

.main-content-header {
   margin-bottom: 20px;
}

.section-header {
   display: flex;
   flex-direction: column;
   gap: 4px;
   margin-top: 16px;
   margin-bottom: 20px;
}

.section-title {
   font-family: 'Lexend', sans-serif;
   font-size: 22px;
   font-weight: 700;
   color: var(--on-surface);
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
}

.section-title .section-title-icon,
.section-title .material-symbols-outlined {
   color: var(--primary);
   font-size: 26px;
   vertical-align: middle;
   margin-right: 6px;
}

.section-subtitle {
   font-size: 13px;
   color: var(--on-surface-variant);
   font-weight: 400;
}

@media (max-width: 1023px) {

   .btn-back span:not(.material-symbols-outlined) {
      font-size: 0;
   }

   .btn-back span:not(.material-symbols-outlined)::before {
      content: "Map";
      font-size: 14px;
   }

   /* Section header */
   .section-title {
      font-size: 19px;
   }
}

/* ==========================================================================
   SHARED TAB NAVIGATION
   ========================================================================== */
.tab-nav {
   display: flex;
   border-bottom: 2px solid var(--outline-variant);
   margin-bottom: 24px;
   overflow-x: auto;
   scrollbar-width: none;
   gap: 0;
}

.tab-nav::-webkit-scrollbar {
   display: none;
}

.tab-btn {
   flex-shrink: 0;
   padding: 10px 20px;
   background: transparent;
   border: none;
   border-bottom: 2px solid transparent;
   margin-bottom: -2px;
   color: var(--on-surface-variant);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   transition: color var(--transition-fast), border-color var(--transition-fast);
   white-space: nowrap;
   display: flex;
   align-items: center;
   gap: 7px;
}

.tab-btn:hover {
   color: var(--primary);
}

.tab-btn.active {
   background: var(--primary);
   color: var(--on-primary, #ffffff);
   font-weight: 700;
}

.tab-btn .material-symbols-outlined {
   font-size: 17px;
}

.tab-count {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 20px;
   height: 20px;
   padding: 0 5px;
   background: var(--surface-container);
   border-radius: var(--radius-full);
   font-size: 11px;
   font-weight: 700;
   color: var(--on-surface-variant);
   transition: background var(--transition-fast), color var(--transition-fast);
}

.tab-btn.active .tab-count {
   background: var(--primary);
   color: var(--on-primary);
}

@media (max-width: 1023px) {

   /* Tab nav */
   .tab-btn {
      padding: 9px 14px;
      font-size: 12px;
   }
}

/* ==========================================================================
   SHARED PAGINATION
   ========================================================================== */
.pagination-container {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 20px 16px;
   gap: 4px;
}

.page-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 36px;
   height: 36px;
   padding: 0 6px;
   border-radius: var(--radius-full);
   border: 1px solid transparent;
   background: transparent;
   color: var(--on-surface-variant);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   transition: all var(--transition-fast);
}

.page-btn:hover:not(:disabled) {
   background: var(--surface-container-low);
   border-color: var(--outline-variant);
   color: var(--primary);
}

.page-btn.active {
   background: var(--primary);
   border-color: var(--primary);
   color: var(--on-primary);
}

.page-btn:disabled {
   opacity: 0.35;
   cursor: not-allowed;
}

.page-btn .material-symbols-outlined {
   font-size: 17px;
}

@media (max-width: 1023px) {

   /* Pagination compact */
   .pagination-container {
      gap: 2px;
      padding: 16px 8px;
   }

   .page-btn {
      min-width: 32px;
      height: 32px;
      font-size: 12px;
   }
}

/* ==========================================================================
   SHARED VIEW TOGGLE BUTTONS
   ========================================================================== */
.view-toggles {
   display: flex;
   background: var(--surface-container-low);
   border-radius: var(--radius-sm);
   padding: 3px;
   border: 1px solid var(--outline-variant);
   gap: 2px;
}

.view-btn {
   padding: 3px;
   border-radius: var(--radius-xs);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--on-surface-variant);
   transition: all var(--transition-fast);
}

.view-btn .material-symbols-outlined {
   font-size: 18px;
}

.view-btn.active {
   background: var(--primary);
   color: var(--on-primary);
}

.view-btn:not(.active):hover {
   background: var(--surface-container);
}

/* ==========================================================================
   FORM COMPONENTS (Generic)
   ========================================================================== */
.form-group {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.form-label {
   font-size: 13px;
   font-weight: 600;
   color: var(--on-surface-variant);
}

.required,
.form-label .required {
   color: var(--error);
}

.form-input,
.form-select,
.form-textarea {
   width: 100%;
   padding: 10px 13px;
   background: var(--surface-container-lowest);
   border: 1px solid var(--outline-variant);
   border-radius: var(--radius-md);
   font-size: 14px;
   color: var(--on-surface);
   transition: border-color var(--transition-fast), background var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
   border-color: var(--primary);
   background: var(--surface-container-lowest);
}

.form-input[readonly],
.form-select[disabled] {
   background: var(--surface-container-low);
   color: var(--outline);
   cursor: not-allowed;
}

.form-textarea {
   resize: vertical;
   min-height: 100px;
   line-height: 1.5;
}

/* ==========================================================================
   STATUS BADGE SYSTEM
   ========================================================================== */
.badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 3px 9px;
   border-radius: var(--radius-xs);
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
}

.badge-success {
   background: var(--success-bg);
   color: var(--success);
   border: 1px solid var(--success-border);
}

.badge-warning {
   background: var(--warning-bg);
   color: var(--warning);
   border: 1px solid var(--warning-border);
}

.badge-error {
   background: var(--error-container);
   color: var(--error);
   border: 1px solid #fca5a5;
}

.badge-info {
   background: var(--info-bg);
   color: var(--info);
   border: 1px solid var(--info-border);
}

.badge-neutral {
   background: var(--surface-container);
   color: var(--on-surface-variant);
   border: 1px solid var(--outline-variant);
}

.badge-primary {
   background: var(--primary-fixed);
   color: var(--primary);
   border: 1px solid var(--surface-container-highest);
}

.badge-purple {
   background: #f3e8ff;
   color: #7e22ce;
   border: 1px solid #e9d5ff;
}

/* ==========================================================================
   CARD BASE COMPONENT
   ========================================================================== */
.card-base {
   background: var(--surface-container-lowest);
   border: 1px solid var(--outline-variant);
   border-radius: var(--radius-md);
   overflow: hidden;
}

.card-header-bar {
   padding: 10px 16px;
   border-bottom: 1px solid var(--outline-variant);
   background: var(--surface-container-low);
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.card-header-bar h3,
.account-management-accordion summary h3 {
   font-size: 11px;
   font-weight: 700;
   color: var(--on-surface-variant);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   font-family: 'Inter', sans-serif;
}

/* ==========================================================================
   MAIN FOOTER
   ========================================================================== */
.main-footer {
   width: 100%;
   background: var(--surface-container-lowest);
   border-top: 1px solid var(--outline-variant);
   padding: 20px var(--gutter);
   display: flex;
   justify-content: center;
   flex-shrink: 0;
}

.footer-container {
   width: 100%;
   max-width: 1920px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
}

/* Left side: links */
.footer-links {
   display: flex;
   align-items: center;
   gap: 4px;
   flex-wrap: wrap;
}

.footer-link-item {
   font-size: 13px;
   font-weight: 600;
   color: var(--on-surface-variant);
   padding: 4px 10px;
   transition: color var(--transition-fast);
}

.footer-link-item:hover {
   color: var(--primary);
   text-decoration: none;
}

.footer-link-item .material-symbols-outlined {
   font-size: 16px;
}

/* Right side: branding */
.footer-info {
   display: flex;
   align-items: center;
   gap: 12px;
   flex-shrink: 0;
}

.footer-logo {
   height: 22px;
   width: auto;
   display: block;
   opacity: 0.75;
   transition: opacity var(--transition-fast);
}

.footer-logo:hover {
   opacity: 1;
}

.footer-copyright {
   font-size: 12px;
   font-weight: 500;
   color: var(--on-surface-variant);
   white-space: nowrap;
}

/* Mobile footer stacking */
@media (max-width: 1023px) {
   .footer-container {
      flex-direction: column;
      gap: 14px;
      text-align: center;
   }

   .footer-links {
      flex-wrap: wrap;
      justify-content: center;
      order: 1;
   }

   .footer-link-item {
      margin-left: 10px;
   }

   .footer-info {
      flex-direction: column;
      gap: 6px;
      order: 2;
   }
}

/* ==========================================================================
   EMPTY STATE COMPONENT
   ========================================================================== */
.empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 60px 24px;
   border: 2px dashed var(--outline-variant);
   border-radius: var(--radius-lg);
}

.empty-state-icon {
   font-size: 48px;
   color: var(--outline);
   margin-bottom: 16px;
   animation: pulse-icon 2.4s ease-in-out infinite alternate;
}

.empty-state-title {
   font-family: 'Lexend', sans-serif;
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 8px;
}

.empty-state-desc {
   font-size: 13px;
   color: var(--on-surface-variant);
   max-width: 320px;
   line-height: 1.6;
   margin-bottom: 24px;
}

@keyframes pulse-icon {
   from {
      transform: scale(1);
      opacity: 0.6;
   }

   to {
      transform: scale(1.1);
      opacity: 1;
   }
}


/* ==========================================================================
   PROPERTY DETAIL MODAL SYSTEM
   ========================================================================== */
#property-detail-modal {
   position: fixed;
   inset: 0;
   z-index: 3500;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(2px);
   display: none;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.3s ease;
}

#property-detail-modal.active {
   display: flex;
   opacity: 1;
}

#property-detail-modal .modal-body {
   width: 80%;
   height: 90vh;
   background: var(--surface-container-lowest);
   border: 1px solid var(--outline-variant);
   border-radius: var(--radius-lg);
   position: relative;
   overflow-y: auto;
   padding: 48px 24px 24px;
   transform: translateY(20px);
   transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#property-detail-modal.active .modal-body {
   transform: translateY(0);
}

/* Sticky close button: stays at top-right as user scrolls */
#property-detail-modal .btn-close {
   position: sticky;
   top: -25px;
   float: right;
   margin-top: -40px;
   margin-right: -8px;
   margin-bottom: 8px;
   cursor: pointer;
   background: var(--surface-container-low);
   color: var(--on-surface-variant);
   border: 1px solid var(--outline-variant);
   border-radius: var(--radius-full);
   padding: 8px;
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--transition-fast);
}

#property-detail-modal .btn-close:hover {
   background: var(--surface-container-high);
   color: var(--on-surface);
}

.modal-details-wrapper {
   overflow: visible !important;
}

.details-main-layout {
   margin: 0 auto;
   padding: 24px 0 60px 0;
   display: flex;
   gap: var(--gutter);
}

.left-content-frame {
   flex: 1;
   width: 65%;
   display: flex;
   flex-direction: column;
   gap: 24px;
}

.right-sidebar-frame {
   width: 35%;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.carousel-wrapper-block {
   position: relative;
   width: 100%;
   border: 1px solid var(--outline-variant);
   border-radius: var(--radius-md);
   overflow: hidden;
   background: var(--surface-container-highest);
   aspect-ratio: 16 / 9;
}

.carousel-wrapper-block.is-pushed-listing {
   border-color: #2563eb !important;
}

.carousel-wrapper-block.is-gold-zone {
   border-color: #ffd700 !important;
}

.carousel-wrapper-block.is-gold-zone.is-pushed-listing {
   border-color: #ffd700 !important;
}

/* Property Image Overlay Indicators (Gold Zone & Push Status) for Modal & Global views */
.property-image-overlays {
   position: absolute;
   bottom: 8px;
   left: 8px;
   right: 8px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex-wrap: wrap;
   gap: 6px;
   z-index: 5;
   pointer-events: none;
}

.property-image-overlays.pos-bottom-right {
   justify-content: flex-end;
}

.property-image-overlays.pos-bottom-center {
   justify-content: center;
}

.property-overlay-badge {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 4px 10px;
   border-radius: 20px;
   font-size: 11px;
   font-weight: 700;
   line-height: 1.2;
   letter-spacing: 0.3px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   pointer-events: auto;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.property-overlay-badge:hover {
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.property-overlay-badge.badge--gold-zone {
   background: linear-gradient(135deg, rgba(255, 215, 0, 0.92) 0%, rgba(218, 165, 32, 0.95) 100%);
   color: #1a1500;
   border: 1px solid rgba(255, 255, 255, 0.6);
   box-shadow: 0 2px 10px rgba(218, 165, 32, 0.4);
}

.property-overlay-badge.badge--gold-zone .overlay-badge-img {
   width: 16px;
   height: 16px;
   object-fit: contain;
}

.property-overlay-badge.badge--gold-zone .overlay-badge-icon {
   font-size: 15px;
   color: #1a1500;
}

.property-overlay-badge.badge--push-status {
   background: linear-gradient(135deg, rgba(37, 99, 235, 0.92) 0%, rgba(29, 78, 216, 0.95) 100%);
   color: #ffffff;
   border: 1px solid rgba(255, 255, 255, 0.4);
   box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4);
}

.property-overlay-badge.badge--push-status .overlay-badge-icon {
   font-size: 15px;
   color: #ffffff;
}

.property-image-overlays.style-image-only .property-overlay-badge {
   background: transparent;
   border: none;
   box-shadow: none;
   padding: 0;
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
}

.property-image-overlays.style-image-only .overlay-badge-text {
   display: none;
}

.property-image-overlays.style-image-only .overlay-badge-img {
   width: 32px;
   height: 32px;
   filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.property-image-overlays.style-compact .property-overlay-badge {
   padding: 3px 8px;
   font-size: 10px;
   border-radius: 12px;
}

.image-carousel-container {
   display: flex;
   height: 100%;
   width: 100%;
   transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-carousel-container.no-transition {
   transition: none !important;
}

.carousel-slide-slide {
   flex-shrink: 0;
   width: 100%;
   height: 100%;
   position: relative;
}

.carousel-slide-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.carousel-arrows {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 16px;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.2s;
   z-index: 25;
}

.carousel-wrapper-block:hover .carousel-arrows,
.recommended-slider-wrapper:hover .carousel-arrows {
   opacity: 1;
}

.carousel-arrow-btn {
   width: 40px;
   height: 40px;
   border-radius: var(--radius-full);
   background: rgba(195, 198, 214, 0.5);
   border: 1px solid rgba(195, 198, 214, 0.5);
   color: #ffffff;
   backdrop-filter: blur(8px);
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: auto;
}

.carousel-arrow-btn:hover {
   background: rgba(195, 198, 214, 0.5);
}

.counter-badge-node {
   position: absolute;
   top: 16px;
   right: 16px;
   left: auto;
   background: rgba(5, 26, 62, 0.4);
   backdrop-filter: blur(8px);
   color: #ffffff;
   font-size: 12px;
   font-weight: 700;
   padding: 4px 12px;
   border-radius: var(--radius-full);
   z-index: 20;
}

.carousel-wrapper-block .card-tag {
   position: absolute;
   top: 16px;
   left: 16px;
   padding: 6px 12px;
   font-size: 11px;
   z-index: 20;
}

.carousel-wrapper-block .card-tags {
   position: absolute;
   top: 16px;
   left: 16px;
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   max-width: calc(100% - 120px);
   z-index: 20;
}

.carousel-wrapper-block .card-tags .card-tag {
   position: static;
   top: auto;
   left: auto;
   text-transform: none;
}

.indicators-bullet-bar {
   position: absolute;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 8px;
   padding: 6px 12px;
   border-radius: var(--radius-full);
   background: rgba(5, 26, 62, 0.2);
   backdrop-filter: blur(8px);
   z-index: 20;
   align-items: center;
}

.info-header-card {
   background: var(--surface-container-lowest);
   border-radius: var(--radius-md);
   padding: 24px;
   border: 1px solid var(--outline-variant);
}

.card-pill-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
}

.tag-pill-featured {
   padding: 4px 12px;
   background: var(--primary-fixed);
   color: var(--on-primary-fixed);
   font-size: 11px;
   font-weight: 700;
   border-radius: var(--radius-full);
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.rating-inline-panel {
   display: flex;
   align-items: center;
   gap: 4px;
   color: var(--on-surface-variant);
   font-size: 13px;
}

.price-inline-block {
   margin: 12px 0 20px 0;
}

.font-price-display {
   font-family: 'Lexend', sans-serif;
   font-size: 24px;
   font-weight: 800;
   color: var(--primary);
}

.specs-meta-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
   border-top: 1px solid var(--outline-variant);
   padding-top: 16px;
}

.spec-meta-cell {
   display: flex;
   align-items: center;
   gap: 8px;
   color: var(--on-surface);
   font-size: 13px;
   font-weight: 500;
}

.spec-meta-cell .material-symbols-outlined {
   color: var(--primary);
   font-size: 20px;
}

.amenities-flow-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;
   margin-top: 16px;
}

.amenity-row-item {
   display: flex;
   align-items: center;
   gap: 8px;
   color: var(--on-surface);
   font-size: 13px;
   font-weight: 500;
}

.amenity-row-item .material-symbols-outlined {
   color: var(--primary);
   font-size: 20px;
}

.amenity-stacked-info {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.amenity-stacked-info .amenity-item-name {
   font-size: 13px;
   font-weight: 600;
   color: var(--on-surface);
   line-height: 1.25;
}

.amenity-stacked-info .amenity-item-distance {
   font-size: 11px;
   color: var(--on-surface-variant);
   font-weight: 400;
   line-height: 1.25;
}

.description-expandable-box {
   position: relative;
   overflow: hidden;
   margin-top: 16px;
}

.description-para-node {
   color: var(--on-surface-variant);
   line-height: 1.6;
   transition: all 0.3s;
   font-size: 14px;
}

.description-para-node.line-clamp-4 {
   display: -webkit-box;
   -webkit-line-clamp: 4;
   line-clamp: 4;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.btn-read-more-trigger {
   margin-top: 8px;
   color: var(--primary);
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 13px;
   cursor: pointer;
}

.agent-profile-card {
   padding: 24px;
   border-radius: var(--radius-md);
   border: 1px solid var(--outline-variant);
   background: var(--surface-container-lowest);
}

.agent-identity-block {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 20px;
}

.agent-avatar-frame {
   position: relative;
   width: 64px;
   height: 64px;
   border-radius: var(--radius-full);
   overflow: hidden;
   flex-shrink: 0;
}

.agent-avatar-frame img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.agent-live-dot {
   position: absolute;
   bottom: 2px;
   right: 2px;
   width: 12px;
   height: 12px;
   background: #22c55e;
   border: 2px solid var(--surface-container-lowest);
   border-radius: var(--radius-full);
}

.agent-identity-meta h3 {
   display: flex;
   align-items: center;
   gap: 4px;
   color: var(--on-surface);
   font-size: 16px;
   font-weight: 700;
}

.agent-btn-call {
   width: 40px;
   height: 40px;
   border-radius: var(--radius-full);
   background: var(--surface-container-high);
   color: var(--primary);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-left: auto;
   border: 1px solid var(--outline-variant);
   transition: all var(--transition-fast);
}

.agent-btn-call:hover {
   background: var(--surface-container-highest);
}

.agent-contacts-list {
   display: flex;
   flex-direction: column;
   gap: 16px;
   border-top: 1px solid var(--outline-variant);
   padding-top: 16px;
}

.agent-contact-cell {
   display: flex;
   align-items: start;
   gap: 12px;
}

.agent-contact-cell .material-symbols-outlined {
   color: var(--primary);
   margin-top: 2px;
   font-size: 20px;
}

.agent-contact-cell p:first-child {
   color: var(--on-surface-variant);
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
}

.agent-contact-cell p:last-child {
   color: var(--on-surface);
   font-weight: 500;
   margin-top: 2px;
   font-size: 13px;
}

.location-container-block {
   margin-top: 16px;
}

.map-section-wrapper {
   margin-top: 16px;
   width: 100%;
   aspect-ratio: 16 / 9;
   min-height: 200px;
   border-radius: var(--radius-md);
   overflow: hidden;
   border: 1px solid var(--outline-variant);
   position: relative;
   background: var(--surface-container-low);
}

.property-location-map-shell {
   display: grid;
   grid-template-areas: "stack";
   align-items: stretch;
}

.property-location-map {
   grid-area: stack;
   width: 100%;
   height: 100%;
   min-height: 200px;
   background: var(--surface-container-low);
}

.property-location-map-fallback {
   grid-area: stack;
   display: grid;
   place-items: center;
   padding: 20px;
   color: var(--on-surface-variant);
   font-size: 14px;
   font-weight: 600;
   text-align: center;
}

.map-section-wrapper img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.bottom-action-ribbon {
   width: 100%;
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 16px;
   min-width: 0;
}

.ribbon-btn-action {
   flex: 1 1 0;
   min-width: 0;
   height: 56px;
   border-radius: var(--radius-md);
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   color: #ffffff;
   font-family: inherit;
   font-size: 14px;
   line-height: 1;
   padding: 0 14px;
   white-space: nowrap;
   overflow: hidden;
   cursor: pointer;
   transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.ribbon-btn-action:hover {
   transform: translateY(-1px);
}

.ribbon-label {
   display: inline-block;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
}

.ribbon-brand-icon {
   font-size: 22px;
   line-height: 1;
   flex: 0 0 auto;
}

.ribbon-brand-glyph {
   width: 22px;
   height: 22px;
   border-radius: var(--radius-full);
   background: rgba(255, 255, 255, 0.95);
   color: var(--zalo, #0068ff);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   font-weight: 800;
   line-height: 1;
   flex: 0 0 auto;
}

.bottom-action-ribbon.is-compact {
   gap: 8px;
}

.bottom-action-ribbon.is-compact .ribbon-btn-action {
   flex: 1 1 48px;
   min-width: 48px;
   padding: 0;
}

.bottom-action-ribbon.is-compact .ribbon-label {
   display: none;
}

.ribbon-call {
   background-color: var(--phone);
   border: 1px solid var(--phone);
}

.ribbon-call:hover {
   background-color: var(--phone-hover);
   border: 1px solid var(--phone-hover);
}

.ribbon-messenger {
   background-color: var(--primary);
   border: 1px solid var(--primary);
}

.ribbon-messenger:hover {
   background-color: var(--primary-hover);
   border: 1px solid var(--primary-hover);
}

.ribbon-login-required {
   background-color: var(--primary);
   border: 1px solid var(--primary);
}

.ribbon-login-required:hover {
   background-color: var(--primary-hover);
   border: 1px solid var(--primary-hover);
}

.ribbon-whatsapp {
   background-color: var(--whatsapp, #25d366);
   border: 1px solid var(--whatsapp, #25d366);
}

.ribbon-whatsapp:hover {
   background-color: var(--whatsapp-hover, #128c7e);
   border: 1px solid var(--whatsapp-hover, #128c7e);
}

.ribbon-zalo {
   background-color: var(--zalo, #0068ff);
   border: 1px solid var(--zalo, #0068ff);
}

.ribbon-zalo:hover {
   background-color: var(--zalo-hover, #0052cc);
   border: 1px solid var(--zalo-hover, #0052cc);
}

.ribbon-line {
   background-color: var(--line, #06c755);
   border: 1px solid var(--line, #06c755);
}

.ribbon-line:hover {
   background-color: var(--line-hover, #05a947);
   border: 1px solid var(--line-hover, #05a947);
}

.ribbon-telegram {
   background-color: var(--telegram, #229ed9);
   border: 1px solid var(--telegram, #229ed9);
}

.ribbon-telegram:hover {
   background-color: var(--telegram-hover, #1687bd);
   border: 1px solid var(--telegram-hover, #1687bd);
}

.ribbon-email {
   background-color: var(--email-btn);
   border: 1px solid var(--email-btn);
}

.ribbon-email:hover {
   background-color: var(--email-btn-hover);
   border: 1px solid var(--email-btn-hover);
}

.title-action-row {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 16px;
   margin-bottom: 6px;
}

.inline-action-group {
   display: flex;
   gap: 8px;
   flex-shrink: 0;
   margin-top: 2px;
}

.btn-inline-share,
.btn-inline-fav {
   width: 36px;
   height: 36px;
   border-radius: var(--radius-full);
   border: 1px solid var(--outline-variant);
   color: var(--on-surface-variant);
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   transition: all var(--transition-fast);
}

.btn-inline-share:hover {
   background: var(--surface-container-low);
   color: var(--primary);
   border-color: var(--primary);
}


/* --- Inline Style Replacements for Property Detail Modal --- */
.rating-inline-panel .star-icon {
   color: #eab308;
   font-size: 18px;
}

.rating-inline-panel .rating-value {
   font-weight: 700;
   color: var(--on-surface);
}

.rating-inline-panel .rating-count {
   color: var(--on-surface-variant);
   font-weight: normal;
}

.price-inline-block p:first-child {
   color: var(--on-surface-variant);
   margin-bottom: 2px;
}

.price-inline-block .font-price-display {
   font-size: 24px;
}

.price-inline-block .price-period {
   font-weight: normal;
   color: var(--on-surface-variant);
}

.mobile-stacked-section h2 {
   color: var(--on-surface);
   margin-bottom: 16px;
}

.location-header-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.location-header-row h2 {
   color: var(--on-surface);
}

.location-header-row .location-header-btn {
   color: var(--primary);
   font-weight: 700;
}

.right-sidebar-frame .location-container-block-desktop {
   display: none;
}

.agent-contact-cell p.agent-about-text,
#modal-agent-about {
   line-height: 1.6;
   color: var(--on-surface-variant);
   margin-top: 2px;
   white-space: pre-line !important;
   word-break: break-word !important;
}

.agent-identity-meta h3 .verified-icon {
   font-size: 20px;
}

.bottom-action-ribbon .ribbon-btn-action .material-symbols-outlined {
   font-size: 20px;
   flex: 0 0 auto;
}

.amenity-stacked-info {
   display: flex;
   flex-direction: column;
}

/* Recommended Properties Horizontal Slider */
.recommended-section {
   margin: 48px 0;
   padding-top: 32px;
   border-top: 1px solid var(--outline-variant);
}

.recommended-section h2 {
   font-family: 'Lexend', sans-serif;
   font-size: 20px;
   font-weight: 700;
   color: var(--on-surface);
   margin-bottom: 20px;
}

.recommended-slider {
   display: flex;
   overflow-x: auto;
   gap: 16px;
   scroll-snap-type: x mandatory;
   padding-bottom: 16px;
   scrollbar-width: thin;
   scrollbar-color: var(--outline-variant) var(--surface-container-low);
}

.recommended-slider::-webkit-scrollbar {
   height: 6px;
   display: block;
}

.recommended-slider::-webkit-scrollbar-track {
   background: var(--surface-container-low);
   border-radius: var(--radius-full);
}

.recommended-slider::-webkit-scrollbar-thumb {
   background: var(--outline-variant);
   border-radius: var(--radius-full);
}

.recommended-slider::-webkit-scrollbar-thumb:hover {
   background: var(--outline);
}

.recommended-slider .property-card {
   flex: 0 0 340px;
   min-width: 320px;
   scroll-snap-align: start;
   cursor: pointer;
}

.recommended-slider-wrapper {
   position: relative;
   width: 100%;
}

@media (max-width: 1023px) {

   .carousel-wrapper-block:hover .carousel-arrows,
   .recommended-slider-wrapper:hover .carousel-arrows {
      opacity: 1;
   }

   .recommended-slider {
      padding-bottom: 8px;
   }

   .recommended-slider::-webkit-scrollbar {
      display: none;
   }
}

/* Sticky sidebar behaviors on desktop viewports */
@media (min-width: 1024px) {
   .page-property-detail .right-sidebar-frame {
      position: sticky;
      top: calc(var(--nav-height) + 24px);
      align-self: flex-start;
   }

   #property-detail-modal .right-sidebar-frame {
      position: sticky;
      top: 0;
      align-self: flex-start;
   }
}

/* ---- Mobile Property Detail Modal Responsive Overrides ---- */
@media (max-width: 1023px) {
   #property-detail-modal {
      align-items: flex-end;
   }

   #property-detail-modal .modal-body {
      width: 100%;
      height: 90vh;
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      transform: translateY(100%);
      margin: 0;
      padding: 0 0;
      border-top: 1px solid var(--outline-variant);
      overscroll-behavior-y: contain !important;
   }

   #property-detail-modal.active .modal-body {
      transform: translateY(0);
   }

   /* On mobile: absolute close overlay over the top corner */
   #property-detail-modal .btn-close {
      position: absolute;
      top: 50px;
      right: 16px;
      left: auto;
      z-index: 100;
      width: 40px;
      height: 40px;
      background: rgba(0, 0, 0, 0.45);
      color: white;
      border: none;
      border-radius: var(--radius-full);
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
   }

   #property-detail-modal .btn-close:hover {
      background: rgba(0, 0, 0, 0.65);
      color: white;
   }

   /* Swap image counter to the left and center align it with the close button */
   #property-detail-modal .counter-badge-node {
      left: 16px !important;
      right: auto !important;
      top: 24px !important;
      display: none;
   }

   .details-main-layout {
      flex-direction: column !important;
      padding: 0 0 0px 0 !important;
      gap: 0 !important;
   }

   .left-content-frame,
   .right-sidebar-frame {
      width: 100% !important;
      display: flex;
      flex-direction: column;
      gap: 0 !important;
      position: static !important;
   }

   .carousel-wrapper-block {
      border-radius: 0 !important;
      aspect-ratio: 4 / 3;
      border-left: none;
      border-right: none;
      border-top: none;
   }

   .indicators-bullet-bar {
      bottom: 48px !important;
   }

   .mobile-canvas-adjustment-panel {
      padding: 0 16px;
      margin-top: -32px;
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
   }

   .info-header-card {
      border-radius: var(--radius-md) !important;
   }

   .specs-meta-grid {
      grid-template-columns: repeat(2, 1fr) !important;
   }

   .mobile-stacked-section {
      margin-top: 32px;
      padding: 0 16px;
   }

   .right-sidebar-frame .agent-profile-card {
      margin: 32px 16px 0 16px !important;
      border-radius: var(--radius-md) !important;
   }

   .right-sidebar-frame .location-container-block {
      margin: 32px 16px 0 16px !important;
      display: none !important;
      background: transparent !important;
      border: none !important;
      padding: 0 !important;
   }

   .left-content-frame .location-container-block {
      display: block !important;
      margin: 32px 16px 0 16px !important;
      background: transparent !important;
      border: none !important;
      padding: 0 !important;
   }

   .bottom-action-ribbon {
      position: sticky;
      bottom: 0;
      left: 0;
      width: 100%;
      gap: 8px;
      background: transparent;
      backdrop-filter: blur(20px);
      border-top: 1px solid var(--outline-variant);
      padding: 12px;
      z-index: 1000;
      margin-top: 0 !important;
      padding-bottom: calc(12px + env(safe-area-inset-bottom));
   }

   .bottom-action-ribbon .ribbon-btn-action {
      flex: 1 1 48px;
      min-width: 48px;
      height: 52px;
      padding: 0;
      border-radius: var(--radius-sm);
   }

   .bottom-action-ribbon .ribbon-label {
      display: none;
   }

   .bottom-action-ribbon.ribbon-count-1 .ribbon-label,
   .bottom-action-ribbon .ribbon-btn-action.ribbon-login-required .ribbon-label {
      display: inline-block !important;
      font-size: 14px;
      font-weight: 600;
   }

   .bottom-action-ribbon.ribbon-count-1 .ribbon-btn-action,
   .bottom-action-ribbon .ribbon-btn-action.ribbon-login-required {
      width: 100%;
      flex: 1 1 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 16px;
   }

   .recommended-section h2 {
      margin: 0 16px 20px 16px;
   }
}

/* ==========================================================================
   AGENT PROFILE BANNER & NAVIGATION
   ========================================================================== */

/* Button in Agent Profile Card inside Right Sidebar */
.btn-agent-listings {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
   padding: 10px 16px;
   background: transparent;
   color: var(--primary);
   border: 1px solid var(--outline-variant);
   border-radius: var(--radius-md);
   font-family: inherit;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   transition: all var(--transition-fast);
   margin-top: 16px;
}

.btn-agent-listings:hover {
   background: var(--surface-container-low);
   border-color: var(--primary);
}

.btn-agent-listings .material-symbols-outlined {
   font-size: 18px;
}

/* Agent Profile Banner */
.agent-profile-banner {
   display: flex;
   flex-direction: column;
   background: var(--surface-container-low);
   border: 1px solid var(--outline-variant);
   border-radius: var(--radius-lg);
   padding: 24px;
   gap: 24px;
   margin-top: 24px;
   margin-bottom: 24px;
}

.agent-banner-top-row {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   gap: 24px;
}

.agent-banner-identity {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 10px;
   flex-shrink: 0;
   width: 145px;
}

.agent-banner-avatar {
   width: 120px;
   height: 120px;
   border-radius: 50%;
   object-fit: cover;
   flex-shrink: 0;
   border: 1px solid var(--outline-variant);
}

.agent-banner-rating {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 2px;
}

.agent-rating-stars {
   display: flex;
   gap: 1px;
   color: #eab308;
}

.agent-rating-stars .material-symbols-outlined {
   font-size: 14px;
}

.agent-rating-text {
   font-size: 12px;
   color: var(--on-surface-variant);
   font-weight: 600;
   white-space: nowrap;
}

.agent-banner-secondary-actions {
   display: flex;
   gap: 8px;
   justify-content: center;
   margin-top: 4px;
}

.agent-banner-info {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   gap: 12px;
   text-align: left;
}

.agent-banner-info-header {
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.agent-banner-name {
   font-family: 'Lexend', sans-serif;
   font-size: 26px;
   font-weight: 800;
   color: var(--on-surface);
   margin: 0;
}

.agent-banner-title {
   font-size: 14px;
   font-weight: 600;
   color: var(--primary);
   margin: 0;
}

.agent-banner-company {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 13px;
   color: var(--on-surface-variant);
}

.agent-banner-bio .material-symbols-outlined,
.agent-banner-company .material-symbols-outlined {
   font-size: 16px;
   color: var(--on-surface-variant);
}

.agent-banner-badges {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.agent-badge-pill {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 4px 10px;
   background: transparent;
   border: 1px solid var(--outline-variant);
   border-radius: var(--radius-full);
   font-size: 11px;
   font-weight: 600;
   color: var(--on-surface-variant);
}

.agent-badge-pill .material-symbols-outlined {
   font-size: 14px;
   color: var(--primary);
}

.agent-banner-stats-grid {
   display: flex;
   gap: 32px;
}

.agent-stat-item {
   display: flex;
   flex-direction: column;
   gap: 1px;
}

.agent-stat-number {
   font-family: 'Lexend', sans-serif;
   font-size: 18px;
   font-weight: 800;
   color: var(--on-surface);
}

.agent-stat-label {
   font-size: 11px;
   color: var(--on-surface-variant);
}

.agent-banner-bio {
   font-size: 13px;
   line-height: 1.5;
   color: var(--on-surface-variant);
   margin: 0;
   max-width: 650px;
   white-space: pre-line;
   word-break: break-word;
}

.agent-banner-actions {
   display: flex;
   gap: 12px;
   padding-top: 16px;
   border-top: 1px solid var(--outline-variant);
   width: 100%;
}

.btn-banner-call,
.btn-banner-wa,
.btn-banner-email {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 12px 16px;
   font-family: inherit;
   font-size: 13px;
   font-weight: 700;
   border-radius: var(--radius-md);
   cursor: pointer;
   transition: all var(--transition-fast);
   flex: 1;
   border: none;
}

.btn-banner-call.btn-outline,
.btn-banner-email.btn-outline {
   background: transparent;
   color: var(--primary);
   border: 1px solid var(--primary);
}

.btn-banner-call.btn-outline:hover,
.btn-banner-email.btn-outline:hover {
   background: var(--surface-container-high);
}

.btn-banner-call:active,
.btn-banner-wa:active,
.btn-banner-email:active {
   transform: scale(0.98);
}

.btn-banner-wa.btn-whatsapp {
   background: var(--whatsapp-bg);
   color: white;
}

.btn-banner-wa.btn-whatsapp:hover {
   background: var(--whatsapp-hover);
}

.btn-banner-call .material-symbols-outlined,
.btn-banner-wa .material-symbols-outlined,
.btn-banner-email .material-symbols-outlined {
   font-size: 18px;
}

.btn-banner-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   border: 1px solid var(--outline-variant);
   border-radius: var(--radius-md);
   background: transparent;
   color: var(--on-surface-variant);
   cursor: pointer;
   transition: all var(--transition-fast);
}

.btn-banner-icon:hover {
   background: var(--surface-container-low);
   border-color: var(--primary);
   color: var(--primary);
}

.btn-banner-icon:active {
   transform: scale(0.95);
}

.btn-banner-icon .material-symbols-outlined {
   font-size: 18px;
}

/* Mobile Responsiveness for Agent Banner */
@media (max-width: 1023px) {
   .agent-profile-banner {
      padding: 20px 16px;
      gap: 20px;
   }

   .agent-banner-top-row {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 16px;
      width: 100%;
   }

   .agent-banner-identity {
      width: 100%;
   }

   .agent-banner-info {
      width: 100%;
      align-items: center;
      text-align: center;
   }

   .agent-banner-info-header {
      align-items: center;
   }

   .agent-banner-company {
      justify-content: center;
   }

   .agent-banner-badges {
      justify-content: center;
   }

   .agent-banner-stats-grid {
      width: 100%;
      justify-content: center;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
   }

   .agent-stat-item {
      align-items: center;
   }

   .agent-banner-bio {
      text-align: center;
   }

   .agent-banner-actions {
      flex-direction: row;
      width: 100%;
      gap: 8px;
   }

   .btn-banner-call,
   .btn-banner-wa,
   .btn-banner-email {
      flex: 1;
      justify-content: center;
      padding: 12px 8px;
      font-size: 12px;
   }
}



/* ==========================================================================
   GLOBAL INQUIRY MODAL SYSTEM
   ========================================================================== */
.inquiry-modal {
   position: fixed;
   inset: 0;
   z-index: 4000;
   background: rgba(5, 26, 62, 0.4);
   backdrop-filter: blur(4px);
   display: none;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.inquiry-modal.active {
   display: flex;
   opacity: 1;
}

.inquiry-modal-body {
   width: 600px;
   max-width: 90%;
   background: var(--surface-container-lowest);
   border: 1px solid var(--outline-variant);
   border-radius: var(--radius-lg);
   position: relative;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   padding: 24px;
   transform: translateY(20px);
   transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   max-height: 90vh;
}

.inquiry-modal.active .inquiry-modal-body {
   transform: translateY(0);
}

#inquiry-modal-form {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   overflow: hidden;
}

/* Modal Header */
.inquiry-modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 20px;
   padding-bottom: 12px;
   border-bottom: 1px solid var(--outline-variant);
}

.inquiry-modal-title {
   font-family: 'Lexend', sans-serif;
   font-size: 20px;
   font-weight: 600;
   color: var(--on-surface);
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0;
}

.inquiry-modal-title .inquiry-title-icon {
   color: var(--primary);
   font-size: 24px;
}

/* Close Button */
.inquiry-modal-body .btn-close {
   background: var(--surface-container-low);
   color: var(--on-surface-variant);
   border: 1px solid var(--outline-variant);
   border-radius: var(--radius-full);
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all var(--transition-fast);
   padding: 0;
}

.inquiry-modal-body .btn-close:hover {
   background: var(--surface-container-high);
   color: var(--on-surface);
}

/* Scroll Content */
.inquiry-modal-scroll-content {
   overflow-y: auto;
   flex-grow: 1;
   padding-right: 4px;
}

.inquiry-modal-scroll-content::-webkit-scrollbar {
   width: 6px;
}

.inquiry-modal-scroll-content::-webkit-scrollbar-track {
   background: transparent;
}

.inquiry-modal-scroll-content::-webkit-scrollbar-thumb {
   background: var(--outline-variant);
   border-radius: var(--radius-full);
}

/* Form Styles */
.inquiry-modal-body .form-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
}

@media (min-width: 1024px) {
   .inquiry-modal-body .form-grid {
      grid-template-columns: 2fr 1fr;
      margin-bottom: 10px;
   }

   .inquiry-modal-body .form-group.full-width {
      grid-column: 1 / -1;
   }
}

.inquiry-modal-body .form-row {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
}

@media (min-width: 1024px) {
   .inquiry-modal-body .form-row {
      grid-template-columns: 1fr 1fr;
      grid-column: 1 / -1;
   }
}

.inquiry-modal-body .form-actions-row {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
   margin-top: 4px;
   padding-top: 8px;
   border-top: 1px solid var(--outline-variant);
   flex-shrink: 0;
}

/* File Upload Styles */
.inquiry-modal-body .file-upload-area {
   border: 2px dashed var(--outline-variant);
   border-radius: var(--radius-md);
   padding: 20px;
   text-align: center;
   cursor: pointer;
   transition: border-color var(--transition-fast), background var(--transition-fast);
   background: var(--surface-container-lowest);
}

.inquiry-modal-body .file-upload-area:hover {
   border-color: var(--primary);
   background: var(--surface-container-low);
}

.inquiry-modal-body .file-upload-area .material-symbols-outlined {
   font-size: 28px;
   color: var(--outline);
   margin-bottom: 6px;
}

.inquiry-modal-body .file-upload-label {
   font-size: 13px;
   color: var(--on-surface-variant);
   margin: 0;
}

.inquiry-modal-body .file-upload-label strong {
   color: var(--primary);
}

.inquiry-modal-body .file-upload-hint {
   font-size: 11px;
   color: var(--outline);
   margin-top: 4px;
   margin-bottom: 0;
}

.inquiry-modal-body .file-count-badge {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   font-size: 11px;
   font-weight: 600;
   color: var(--primary);
   margin-top: 8px;
}

.inquiry-modal-body .file-count-badge .icon-small-attach {
   font-size: 14px;
}

/* Submit Button Style */
.inquiry-modal-body .btn-new-inquiry {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 9px 18px;
   background: var(--primary);
   color: white;
   border: none;
   border-radius: var(--radius-full);
   font-size: 13px;
   font-weight: 700;
   transition: background var(--transition-fast);
   white-space: nowrap;
   cursor: pointer;
}

.inquiry-modal-body .btn-new-inquiry:hover {
   background: var(--primary-container);
}

.inquiry-modal-body .btn-new-inquiry:active {
   transform: scale(0.98);
}

.inquiry-modal-body .btn-new-inquiry .material-symbols-outlined {
   font-size: 18px;
}

.btn-spinner {
   animation: modal-spin 1s linear infinite;
   display: inline-block;
}

/* Mobile Responsive Drawer Overrides */
@media (max-width: 1023px) {
   .inquiry-modal {
      align-items: flex-end;
   }

   .inquiry-modal-body {
      width: 100%;
      max-width: 100%;
      height: 80vh;
      max-height: 90vh;
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      transform: translateY(100%);
      margin: 0;
      border: none;
      border-top: 1px solid var(--outline-variant);
      padding: 20px 16px;
   }

   .inquiry-modal.active .inquiry-modal-body {
      transform: translateY(0);
   }
}

/* Hide mobile map list button by default on all pages */
.mobile-map-list-btn {
   display: none !important;
}

/* Redesigned Property Modal dynamic states & load spinner */
.modal-loading-overlay {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 60px 20px;
   width: 100%;
}

.modal-loading-overlay p {
   margin-top: 16px;
   font-size: 14px;
   color: var(--on-surface-variant);
}

.modal-loading-overlay .spinner {
   width: 40px;
   height: 40px;
   border: 4px solid var(--outline-variant);
   border-top-color: var(--primary);
   border-radius: 50%;
   animation: modal-spin 1s linear infinite;
}

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

.agent-avatar-frame .avatar-letter {
   width: 100%;
   height: 100%;
   font-size: 1.5rem;
}

/* Agent Profile Contact Actions Row inside Modal */
/* .agent-contact-actions-row {
   display: flex;
   gap: 12px;
   margin: 16px 0 20px 0;
} */

.btn-agent-action {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 10px 14px;
   border-radius: var(--radius-md);
   border: none;
   font-weight: 600;
   font-size: 13px;
   color: #ffffff;
   cursor: pointer;
   transition: all 0.2s ease;
}

.btn-agent-action .material-symbols-outlined {
   font-size: 18px;
}

.btn-agent-action.btn-whatsapp {
   background: var(--whatsapp);
}

.btn-agent-action.btn-whatsapp:hover {
   background: var(--whatsapp-hover);
}

.btn-agent-action.btn-call {
   background: var(--phone);
}

.btn-agent-action.btn-call:hover {
   background: var(--phone-hover);
}

.btn-agent-action.btn-email {
   background: var(--email-btn);
}

.btn-agent-action.btn-email:hover {
   background: var(--email-btn-hover);
}

/* Property Card Agent Contact Actions */
.card-agent {
   position: relative;
   display: flex;
   align-items: center;
}

.card-agent-actions {
   display: flex;
   gap: 6px;
   margin-left: auto;
   align-items: center;
}

.btn-card-agent-action {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
   border-radius: var(--radius-full);
   border: none;
   color: #ffffff;
   cursor: pointer;
   transition: all 0.15s ease;
}

.btn-card-agent-action .material-symbols-outlined {
   font-size: 15px;
}

.btn-card-agent-action.btn-card-whatsapp {
   background: var(--whatsapp);
}

.btn-card-agent-action.btn-card-whatsapp:hover {
   background: var(--whatsapp-hover);
}

.btn-card-agent-action.btn-card-call {
   background: var(--phone);
}

.btn-card-agent-action.btn-card-call:hover {
   background: var(--phone-hover);
}

.btn-card-agent-action.btn-card-email {
   background: var(--email-btn);
}

.btn-card-agent-action.btn-card-email:hover {
   background: var(--email-btn-hover);
}

/* Modal Favorite Button Red Color State */
.btn-inline-fav.saved,
.btn-inline-fav.active {
   border-color: var(--error) !important;
   color: var(--error) !important;
}

.btn-inline-fav.saved .material-symbols-outlined,
.btn-inline-fav.active .material-symbols-outlined {
   font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24 !important;
}

@media (max-width: 768px) {
   .btn-agent-action .btn-text {
      display: none;
   }

   .btn-agent-action {
      padding: 10px;
   }
}

/* Reusable Avatar Background Colors (No Inline Styles) */
.avatar-color-0 {
   background-color: #2563eb;
   --avatar-color: #2563eb;
}

.avatar-color-1 {
   background-color: #7c3aed;
   --avatar-color: #7c3aed;
}

.avatar-color-2 {
   background-color: #db2777;
   --avatar-color: #db2777;
}

.avatar-color-3 {
   background-color: #ea580c;
   --avatar-color: #ea580c;
}

.avatar-color-4 {
   background-color: #059669;
   --avatar-color: #059669;
}

.avatar-color-5 {
   background-color: #0891b2;
   --avatar-color: #0891b2;
}

.avatar-color-6 {
   background-color: #4f46e5;
   --avatar-color: #4f46e5;
}

.avatar-color-7 {
   background-color: #9333ea;
   --avatar-color: #9333ea;
}

.avatar-color-8 {
   background-color: #dc2626;
   --avatar-color: #dc2626;
}

.avatar-color-9 {
   background-color: #0f766e;
   --avatar-color: #0f766e;
}

/* Reusable Inline Verified Badge (No Inline Styles) */
.verified-badge {
   color: var(--primary) !important;
   font-size: 16px !important;
   vertical-align: middle !important;
}

/* Reusable Avatar Letter Font Sizes */
.avatar-letter-large {
   font-size: 2rem !important;
}

.avatar-letter-small {
   font-size: 14px !important;
}

/* Property detail modal location map */
.property-location-map-shell {
   width: 100%;
   aspect-ratio: 16 / 9;
   min-height: 240px;
   position: relative;
   overflow: hidden;
   border-radius: 16px;
   background: var(--surface-2, #f3f4f6);
}

.property-location-map-host {
   display: block;
}

.property-location-map {
   width: 100%;
   height: 100%;
   min-height: inherit;
}

.property-location-map-fallback {
   margin: 0;
   min-height: 240px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}