/* =========================================
SECTION: LISTINGS PAGE
DESCRIPTION: Search and filtering interface
========================================= */

/* ===================================
   LISTINGS PAGE STYLES
   =================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  background-color: var(--bg-light);
  color: var(--text-dark);
  overflow-x: hidden;
}

:root {
  --primary-color: #6366f1;
  --primary-dark: #4f46e5;
  --secondary-color: #ec4899;
  --accent-color: #8b5cf6;
  --text-dark: #1e293b;
  --text-light: #64748b;
  --bg-light: #f8fafc;
  --bg-white: #ffffff;
  --border-color: #e2e8f0;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

/* ===================================
   PAGE HERO SECTION
   =================================== */

.listings-hero {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 100px 20px 40px;
  overflow: hidden;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.listings-hero .bg-shapes {
  display: none; /* Removed heavy background shapes to keep layout light */
}

.listings-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  text-align: center;
  color: white;
}

.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  opacity: 0.9;
}

.breadcrumb a {
  color: white;
  text-decoration: none;
  transition: opacity 0.3s;
}

.breadcrumb a:hover {
  opacity: 0.7;
}

.breadcrumb svg {
  width: 16px;
  height: 16px;
}

#pageMainTitle {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.2;
}

#pageDescription {
  font-size: 18px;
  line-height: 1.6;
  opacity: 0.95;
  max-width: 700px;
  margin: 0 auto;
}

/* ===================================
   MAIN LISTINGS SECTION
   =================================== */

.listings-main-section {
  padding: 40px 4rem 60px;
  background: var(--bg-light);
  min-height: calc(100vh - 100px);
}

.listings-main-container {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* ===================================
   TOP CONTROLS BAR (DYNAMIC FILTERS)
   =================================== */

.top-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

#dynamicPageHeading {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
}

.custom-filters-wrapper {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.custom-dropdown {
  position: relative;
}

.custom-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: white;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s;
}

.custom-dropdown-btn:hover,
.custom-dropdown.open .custom-dropdown-btn {
  border-color: var(--primary-color);
}

.custom-dropdown-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s;
}

.custom-dropdown.open .custom-dropdown-btn svg {
  transform: rotate(180deg);
}

.custom-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
  min-width: 320px;
}

.custom-dropdown.open .custom-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Multi-Select Locations */
.dropdown-options {
  max-height: 250px;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 10px;
  color: var(--text-dark);
  text-align: center;
  margin: 0;
  background: white;
  min-height: 40px;
  line-height: 1.2;
  word-break: break-word;
}

.custom-checkbox:hover {
  background: var(--bg-light);
  border-color: var(--primary-color);
}

.custom-checkbox:has(input:checked) {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: rgba(99, 102, 241, 0.05);
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.dropdown-footer-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  gap: 16px;
  background: var(--bg-light);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.btn-reset {
  padding: 8px;
  background: transparent;
  border: none;
  color: var(--text-light);
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  font-size: 14px;
}

.btn-reset:hover {
  color: var(--text-dark);
}

.btn-apply {
  padding: 8px 24px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  font-size: 14px;
}

.btn-apply:hover {
  opacity: 0.9;
}

/* Single Select Price & Type (Dark Theme like reference) */
.price-menu,
.type-menu {
  background: #5b5753;
  color: white;
  border: none;
  padding: 8px 0;
  min-width: 220px;
}

.price-list,
.type-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.price-list li,
.type-list li {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  transition: background 0.2s;
  gap: 12px;
}

.price-list li:hover,
.type-list li:hover {
  background: rgba(255, 255, 255, 0.1);
}

.price-list li.active,
.type-list li.active {
  background: rgba(255, 255, 255, 0.15);
  font-weight: 600;
}

.price-list li .check-icon {
  width: 16px;
  height: 16px;
  opacity: 0;
}

.price-list li.active .check-icon {
  opacity: 1;
}

/* ===================================
   HORIZONTAL FILTER BAR
   =================================== */

.horizontal-filter-bar {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 10px 0;
  margin-bottom: 30px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.horizontal-filter-bar::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.scroll-filter-btn {
  white-space: nowrap;
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  background: var(--bg-white);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.3s ease;
}

.scroll-filter-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.scroll-filter-btn.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

/* ===================================
   LISTINGS GRID
   =================================== */

.listings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 50px;
}

.listings-grid.highlight {
  animation: gridFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes gridFadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================================
   PROPERTY CARD
   =================================== */

.listing-property-card {
  background: var(--bg-white);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
  position: relative;
  cursor: pointer;
}

.listing-property-card:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Property Card Image */
.property-card-image {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-bottom: 1px solid var(--border-color);
}

.property-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}

.listing-property-card:hover .property-card-image img {
  transform: scale(1.1);
}

.property-badges {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 2;
}

.badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.badge.featured {
  background: linear-gradient(135deg, #f59e0b, #eab308);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.badge.for-lease {
  background: rgba(59, 130, 246, 0.9);
  color: white;
}

.badge.coworking {
  background: rgba(139, 92, 246, 0.9);
  color: white;
}

/* Property Card Content */
.property-card-content {
  padding: 16px;
}

.property-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.property-category {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.property-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}

.property-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
  line-height: 1.3;
}

.property-location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-light);
  margin-bottom: 12px;
}

.property-location svg {
  width: 16px;
  height: 16px;
  color: var(--primary-color);
}

/* Property Features */
.property-features {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 12px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1;
}

.feature-item svg {
  width: 16px;
  height: 16px;
  color: var(--primary-color);
}

.feature-item span {
  font-size: 11px;
  color: var(--text-light);
  font-weight: 500;
}

/* Property Footer */
.property-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.btn-primary-small,
.btn-secondary-small {
  flex: 1;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-align: center;
}

.btn-primary-small {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--accent-color)
  );
  color: white;
}

.btn-primary-small:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.btn-secondary-small {
  background: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
}

.btn-secondary-small:hover {
  background: var(--primary-color);
  color: white;
}

/* ===================================
   PAGINATION
   =================================== */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 50px;
}

.pagination-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: white;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-dark);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.pagination-btn:hover:not(:disabled) {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-btn svg {
  width: 18px;
  height: 18px;
}

.pagination-numbers {
  display: flex;
  gap: 8px;
  align-items: center;
}

.page-number {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-color);
  background: white;
  color: var(--text-dark);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.page-number:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.page-number.active {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--accent-color)
  );
  color: white;
  border-color: transparent;
}

.page-dots {
  color: var(--text-light);
  font-weight: 600;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

@media (max-width: 1200px) {
  .listings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .listings-main-section {
    padding: 20px 16px 40px;
  }

  .top-controls-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .custom-filters-wrapper {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 0 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .custom-filters-wrapper::-webkit-scrollbar {
    display: none;
  }

  .custom-filters-wrapper .custom-dropdown {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: 130px !important;
    position: relative !important;
  }

  .custom-dropdown-btn {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  .custom-dropdown-menu {
    width: 280px;
    min-width: unset;
    position: absolute;
    top: calc(100% + 8px);
    bottom: auto;
  }

  /* Specific alignments for dropdown menus to prevent off-screen overflow on mobile */
  #locationDropdownContainer .custom-dropdown-menu {
    left: 0 !important;
    right: auto !important;
  }

  /* When 3 dropdowns are displayed in the location flow, Popular Locations is on the right side of the first row on mobile.
     We align its menu to the right to prevent massive off-screen layout leakage and horizontal overflow. */
  .custom-filters-wrapper.has-three-filters #locationDropdownContainer .custom-dropdown-menu {
    right: 0 !important;
    left: auto !important;
  }

  #priceDropdownContainer .custom-dropdown-menu {
    right: 0 !important;
    left: auto !important;
  }

  #typeDropdownContainer .custom-dropdown-menu {
    left: 0 !important;
    right: auto !important;
  }

  .dropdown-options {
    padding: 10px;
  }

  .dropdown-footer-actions {
    padding: 10px;
  }

  .btn-apply {
    padding: 8px 16px;
  }

  #pageMainTitle {
    font-size: 36px;
  }

  #pageDescription {
    font-size: 16px;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-left,
  .filter-right {
    width: 100%;
    flex-direction: column;
  }

  .filter-group {
    width: 100%;
    min-width: unset;
  }

  .filter-select {
    width: 100%;
    min-width: unset;
  }

  .results-count {
    justify-content: center;
    width: 100%;
  }

  .listings-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pagination {
    flex-wrap: wrap;
  }

  .pagination-numbers {
    order: 3;
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .listings-main-section {
    padding: 16px 12px 32px;
  }

  .listings-hero {
    padding: 100px 16px 60px;
  }

  .dropdown-options {
    grid-template-columns: repeat(2, 1fr);
  }

  #pageMainTitle {
    font-size: 28px;
  }

  #pageDescription {
    font-size: 14px;
  }

  .property-title {
    font-size: 18px;
  }

  .property-features {
    gap: 8px;
  }

  .feature-item svg {
    width: 18px;
    height: 18px;
  }

  .property-footer {
    flex-direction: column;
  }

  .btn-primary-small,
  .btn-secondary-small {
    width: 100%;
  }
}

/* ===================================
   HIDDEN CLASS (for filtering)
   =================================== */

.listing-property-card.hidden {
  display: none;
}

/* ===================================
   EMPTY STATE
   =================================== */

.empty-state {
  text-align: center;
  padding: 60px 20px;
  grid-column: 1 / -1;
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  color: var(--text-light);
}

.empty-state h3 {
  font-size: 24px;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.empty-state p {
  font-size: 16px;
  color: var(--text-light);
  max-width: 400px;
  margin: 0 auto;
}

/* ========================================================
   MOBILE-ONLY OVERRIDES FOR LISTINGS PAGE (max-width: 576px)
   ======================================================== */
@media (max-width: 576px) {
  /* Task #1: Fix Horizontal Filter Bar Overflow & Allow Smooth Swipe Scroll */
  .horizontal-filter-bar {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 8px 4px !important;
    margin-bottom: 20px !important;
    -webkit-overflow-scrolling: touch !important; /* Premium smooth swipe physics */
    box-sizing: border-box !important;
  }

  .scroll-filter-btn {
    flex-shrink: 0 !important; /* Guarantee chips maintain full layout size and scroll instead of squeezing */
    padding: 6px 12px !important;
    font-size: 13px !important;
    border-radius: 16px !important;
  }

  /* Task #2: Compact Mobile Pagination & Bottom Section */
  .pagination {
    margin-top: 24px !important;
    margin-bottom: 12px !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .pagination-btn {
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-width: 1px !important;
    border-radius: 6px !important;
    gap: 4px !important;
  }

  .pagination-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  .pagination-numbers {
    gap: 6px !important;
    order: 3 !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .page-number {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
    border-width: 1px !important;
    border-radius: 6px !important;
  }

  .page-dots {
    font-size: 13px !important;
  }

  /* Safe bottom padding override for global Mobile Action Bar */
  .footer {
    padding-bottom: calc(75px + env(safe-area-inset-bottom)) !important;
  }

  /* Task #1.5: Fix 3-Dropdown Mobile Page Overflow & Layout Stretching */
  .custom-filters-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .custom-filters-wrapper .custom-dropdown {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: 0 !important; /* Overrides min-width 130px to let it shrink safely */
    box-sizing: border-box !important;
  }

  .custom-dropdown-btn {
    width: 100% !important;
    min-width: 0 !important; /* Allow the button itself to shrink safely */
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .custom-dropdown-btn .btn-text {
    display: inline-block !important;
    max-width: calc(100% - 20px) !important; /* Reserve spacing for the chevron */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: left !important;
    flex-grow: 1 !important;
  }

  .custom-dropdown-btn svg,
  .custom-dropdown-btn i {
    flex-shrink: 0 !important; /* Chevron should never shrink */
  }
}

/* END: LISTINGS PAGE */