/* browse.css - Overhauled */

/* Browse Hero Section */
.browse-hero {
  background-size: cover;
  background-position: center;
  padding: var(--spacing-lg) 0 var(--spacing-xxl) 0; /* More padding bottom */
  color: var(--text-light);
  position: relative;
  min-height: 400px; /* Adjust height */
  display: flex;
  align-items: flex-start; /* Align content top */
  justify-content: center;
}
.browse-hero::before {
  /* Overlay */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.5)
  ); /* Darker overlay */
  z-index: 1;
}
.browse-hero-content {
  position: relative;
  z-index: 2;
  max-width: 1000px; /* Wider content for filters */
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding-top: var(--spacing-xl); /* Space from top */
}
.browse-hero .page-title {
  color: var(--text-light);
  margin-bottom: var(--spacing-sm);
}
.browse-hero .hero-subtitle {
  color: var(--text-light);
  opacity: 0.9;
  margin-bottom: var(--spacing-lg);
}

/* Top Filter Bar */
.top-filter-bar {
  background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent */
  backdrop-filter: blur(5px);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
  margin-top: var(--spacing-lg);
  max-width: 950px; /* Limit width */
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.top-filter-form {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: stack */
  gap: var(--spacing-md);
  align-items: center;
}
@media (min-width: 992px) {
  /* Desktop: inline */
  .top-filter-form {
    grid-template-columns: repeat(3, 1fr) auto;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  /* Tablet: 2x2 */
  .top-filter-form {
    grid-template-columns: 1fr 1fr;
  }
  .top-filter-form button {
    grid-column: 1 / -1; /* Button full width */
  }
}

.top-filter-form .filter-group {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  background-color: var(--bg-primary);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.top-filter-form .filter-group:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 191, 161, 131), 0.25);
}
.top-filter-form .filter-group i {
  padding: 0 var(--spacing-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  width: 40px; /* Fixed width */
  text-align: center;
  flex-shrink: 0;
  border-right: 1px solid var(--border-color);
  line-height: calc(var(--spacing-sm) * 2 + 1em); /* Align icon vertically */
}
.top-filter-form .filter-group select {
  /* Inherits global styles, but remove border/bg */
  border: none;
  background-color: transparent;
  flex-grow: 1;
  padding: var(--spacing-sm);
  padding-right: calc(var(--spacing-md) * 1.5); /* Space for arrow */
  font-size: var(--font-size-sm);
  height: calc(var(--spacing-sm) * 2 + 1em + 2px); /* Match input height */
  line-height: 1.5;
}
.top-filter-form .filter-group select:focus {
  outline: none;
  box-shadow: none;
}
.top-filter-form button {
  /* Inherits .btn .btn-primary */
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
  height: calc(var(--spacing-sm) * 2 + 1em + 2px); /* Match input height */
}

/* Browse Content Area */
/* .browse-content {
  Uses .section
} */
.browse-layout {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: Content only */
  gap: var(--spacing-xl);
}
@media (min-width: 992px) {
  /* Desktop: Sidebar + Content */
  .browse-layout {
    grid-template-columns: 300px 1fr; /* Sidebar width */
  }
}

/* Filters Sidebar */
.filters-sidebar {
  background: var(--bg-secondary);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
  height: fit-content; /* Size to content */
}
@media (min-width: 992px) {
  .filters-sidebar {
    position: sticky; /* Make sidebar sticky */
    top: 80px; /* Adjust based on header height + desired gap */
  }
}

.sidebar-title {
  font-size: var(--font-size-lg);
  font-family: var(--font-primary);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  color: var(--secondary-color);
}
.filter-section {
  margin-bottom: var(--spacing-lg);
}
.filter-section:last-of-type {
  margin-bottom: 0; /* No margin after last section */
}
.filter-section h4 {
  font-size: var(--font-size-md);
  font-weight: 600;
  margin-bottom: var(--spacing-md);
  color: var(--text-primary); /* Darker text */
}
.filter-section .form-group {
  /* Reduce margin inside sidebar */
  margin-bottom: var(--spacing-sm);
}
.filter-section .form-group label {
  font-size: var(--font-size-xs); /* Smaller labels */
  margin-bottom: 4px;
  font-weight: 500;
}
.filter-section select,
.filter-section input {
  font-size: var(--font-size-sm); /* Smaller inputs */
  padding: var(--spacing-xs) var(--spacing-sm);
}

/* Specific Input Groupings */
.price-inputs,
.size-inputs,
.bed-bath-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
}

/* Checkbox Filters */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  max-height: 200px; /* Limit height and allow scroll */
  overflow-y: auto; /* Add scroll if needed */
  padding-right: var(--spacing-xs); /* Space for scrollbar */
  border: 1px solid var(--border-color); /* Add border */
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-sm);
  background-color: var(--bg-primary); /* White background */
}
.checkbox-group label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 2px 0; /* Small vertical padding */
}
.checkbox-group label:hover {
  color: var(--text-primary);
}
.checkbox-group input[type='checkbox'] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary-color);
  flex-shrink: 0;
}

.btn-apply-filters {
  width: 100%;
  margin-top: var(--spacing-lg);
}

/* Mobile Filter Toggle */
.mobile-filter-toggle {
  display: none; /* Hidden on desktop */
  width: 100%;
  padding: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  background-color: var(--secondary-color);
  color: var(--text-light);
  border: none;
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.mobile-filter-toggle i {
  margin-right: var(--spacing-sm);
}

/* .filter-content-wrapper {
  Wrapper for content to toggle
} */

/* Hide sidebar content on mobile by default */
@media (max-width: 991px) {
  .filters-sidebar {
    position: relative; /* Remove sticky on mobile */
    top: auto;
    padding: 0;
    border: none;
    background: none;
    margin-bottom: var(--spacing-lg); /* Space below filters on mobile */
  }
  .sidebar-title {
    display: none;
  } /* Hide desktop title */
  .mobile-filter-toggle {
    display: block;
  } /* Show mobile button */
  .filter-content-wrapper {
    display: none; /* Hide content initially */
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background-color: var(--bg-secondary);
  }
  .filter-content-wrapper.open {
    display: block; /* Show when toggled */
  }
  /* .filter-section.basic-filters {
   
    display: none;
  } */
  .btn-clear-filters {
    /* Ensure clear button is visible on mobile */
    display: block;
  }
}

/* Properties Listing Area */
/* .properties-listing {
  Main content area
} */

.listing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap; /* Wrap on small screens */
  gap: var(--spacing-sm);
}
.results-count {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
  flex-shrink: 0; /* Prevent shrinking */
}
.sort-options {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.sort-options label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
  flex-shrink: 0; /* Prevent label shrinking */
}
.sort-options select {
  padding: 6px 10px; /* Smaller select */
  padding-right: 30px; /* Ensure space for arrow */
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  background-position-x: calc(100% - 8px); /* Adjust arrow */
  max-width: 200px; /* Limit width of sort dropdown */
}

.property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

/* No Results Message */
.no-results-message {
  grid-column: 1 / -1; /* Span full width */
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-lg); /* Add horizontal padding */
  color: var(--text-secondary);
  border: 2px dashed var(--border-color);
  border-radius: var(--border-radius-md);
  background-color: var(--bg-secondary);
}
.no-results-message p {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}
.no-results-message p:last-of-type {
  font-size: var(--font-size-md);
  color: var(--text-secondary);
  margin-bottom: 0;
}

/* Pagination Styling */
.pagination {
  margin-top: var(--spacing-xl);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap; /* Allow wrapping */
}
.pagination-numbers {
  display: flex;
  flex-wrap: wrap; /* Allow numbers wrap */
  justify-content: center;
  gap: var(--spacing-xs);
}
.pagination-numbers a, /* Changed from button to a */
.pagination-numbers span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 var(--spacing-sm); /* Added padding for numbers */
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  background-color: var(--bg-primary);
  text-decoration: none;
  transition: var(--transition-base);
  line-height: 1; /* Ensure single line */
}
.pagination-numbers span {
  /* Ellipsis */
  border: none;
  background-color: transparent;
  cursor: default;
  padding: 0 var(--spacing-xs); /* Less padding for ellipsis */
}
.pagination-numbers a:hover,
.pagination-numbers a.active {
  background-color: var(--primary-color);
  color: var(--text-on-primary);
  border-color: var(--primary-color);
  font-weight: 600;
}
.pagination-btn {
  /* Prev/Next buttons */
  padding: 0 var(--spacing-md);
  height: 38px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-base);
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none; /* Remove underline for links */
}
.pagination-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--border-color) 80%, black);
}
.pagination-btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--bg-secondary);
  pointer-events: none; /* Disable clicks */
}

/* Responsive Adjustments for Browse */
@media (max-width: 768px) {
  .browse-hero {
    min-height: auto;
    padding-bottom: var(--spacing-xl);
  }
  .browse-hero-content {
    padding-top: var(--spacing-lg);
  }
  .top-filter-bar {
    margin-top: var(--spacing-lg);
  }
  .listing-header {
    flex-direction: column;
    align-items: stretch;
  } /* Stack header items */
  .results-count {
    margin-bottom: var(--spacing-sm);
  }
  .sort-options {
    justify-content: flex-start;
  } /* Align sort left */
  .property-grid {
    grid-template-columns: 1fr;
  } /* Stack cards on mobile */
}

@media (max-width: 480px) {
  .top-filter-form {
    gap: var(--spacing-sm);
  }
  .top-filter-bar {
    padding: var(--spacing-sm);
  }
  .browse-layout {
    gap: var(--spacing-lg);
  }
  .property-grid {
    gap: var(--spacing-md);
  }
}