:root {
  /* Add any listing-page specific variables here if needed */
}

/* --- Listing Hero Section (Similar to About/Contact Hero) --- */
.listing-hero {
  padding: 120px 0 60px 0; /* Adjust padding */
  background-color: var(--primary-accent); /* Use accent color */
  color: var(--light-bg); /* White text */
  text-align: center;
  margin-top: var(--header-height-scrolled); /* Space for fixed header */
}

html[data-theme="dark"] .listing-hero {
  background-color: var(--dark-primary-accent);
  color: var(--dark-text);
}

.listing-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem); /* Responsive title */
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.2;
}

/* --- Filter Section --- */
.filter-section {
  /* Uses global .section styles */
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: var(--card-bg); /* Subtle background */
}

.filter-form {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  gap: 15px; /* Space between elements */
  align-items: center; /* Align items vertically */
  justify-content: center; /* Center items */
}

.filter-form select,
.filter-form input[type="number"],
.filter-form button,
.filter-form .filter-reset-link {
  padding: 10px 15px;
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
  font-family: var(--font-primary);
  font-size: 0.9rem;
  background-color: var(--body-bg); /* Match body background */
  color: var(--text-color);
  height: 42px; /* Consistent height */
  flex-grow: 1; /* Allow elements to grow */
  min-width: 150px; /* Minimum width */
  transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.filter-form select:focus,
.filter-form input[type="number"]:focus {
  outline: none;
  border-color: var(--primary-accent);
  box-shadow: 0 0 0 2px rgba(var(--rgb-primary-accent), 0.2); /* Use RGB variable if defined */
  /* Fallback box-shadow */
  box-shadow: 0 0 0 2px rgba(22, 75, 146, 0.2);
}
html[data-theme="dark"] .filter-form select:focus,
html[data-theme="dark"] .filter-form input[type="number"]:focus {
   box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.3); /* Dark mode focus */
}

.filter-form select {
  /* Appearance for dropdown arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a0aec0'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd' /%3E%3C/svg%3E"); /* Simple SVG arrow */
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1em;
  padding-right: 2.5rem; /* Space for arrow */
}

/* Adjust number input appearance */
.filter-form input[type="number"] {
  /* Add styles if needed, e.g., hide spinners */
  -moz-appearance: textfield; /* Firefox */
}
.filter-form input[type="number"]::-webkit-outer-spin-button,
.filter-form input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.filter-form button[type="submit"],
.filter-form .filter-reset-link {
    flex-grow: 0; /* Don't allow buttons to grow excessively */
    min-width: 120px; /* Minimum width for buttons */
    cursor: pointer;
    text-align: center;
}

.filter-form button[type="submit"] {
    /* Uses .btn and .btn--primary styles from home.css */
}
.filter-form .filter-reset-link {
    /* Uses .btn and .btn--secondary styles from home.css */
    /* Adjust padding/height if needed to match other inputs */
    display: inline-flex; /* Align text center */
    justify-content: center;
    align-items: center;
    text-decoration: none;
}


@media (max-width: 991px) {
    .filter-form select,
    .filter-form input[type="number"] {
        min-width: calc(50% - 10px); /* Two items per row approx */
    }
}
@media (max-width: 575px) {
    .filter-form select,
    .filter-form input[type="number"] {
        min-width: 100%; /* One item per row */
    }
}


/* --- Property List Section --- */
.property-list-section {
  /* Uses global .section styles */
}

/* Re-use property grid and card styles from home.css */
/* Ensure .property-grid and .property-card styles are available */
/* If not, copy them from home.css to here or a global stylesheet */

/* Add listing-page specific card adjustments if needed */
.listing-page .property-card {
    /* Example: slightly different shadow or margin */
}

.property-card__detail-button {
    /* Uses .btn .btn--secondary styles */
    display: block; /* Make it block */
    width: calc(100% - 40px); /* Full width minus padding */
    margin: 0 20px 20px 20px; /* Position at bottom */
    text-align: center;
}

.no-properties-message {
  text-align: center;
  padding: 60px 20px;
  font-size: 1.2rem;
  color: var(--text-secondary-color);
  font-style: italic;
}

/* --- Pagination --- */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  padding-bottom: 40px; /* Space below pagination */
}

/* Custom Pagination Styling (Tailwind-like) */
.pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px; /* Reduced gap */
  font-family: var(--font-primary);
}

.pagination .page-item {
  list-style-type: none;
}

.pagination .page-item .page-link,
.pagination .page-item span { /* Include span for disabled items */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px; /* Minimum width */
  height: 36px;
  padding: 0 10px; /* Horizontal padding */
  border-radius: var(--border-radius);
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  color: var(--text-secondary-color);
  border: 1px solid var(--border-color);
  background-color: var(--body-bg);
  text-decoration: none;
  user-select: none; /* Prevent text selection */
}

.pagination .page-item a.page-link:hover { /* Hover only on links */
  background-color: var(--card-bg);
  border-color: var(--primary-accent);
  color: var(--primary-accent);
  transform: translateY(-2px);
  box-shadow: 0 2px 5px var(--shadow-color);
}

.pagination .page-item.active span.page-link { /* Active state */
  background-color: var(--primary-accent);
  color: white;
  border-color: var(--primary-accent);
  font-weight: 600;
  cursor: default;
}

.pagination .page-item.disabled span.page-link,
.pagination .page-item.disabled span { /* Disabled state */
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--card-bg);
}

/* Style for '...' separator */
.pagination .page-item.disabled span {
    border: none;
    background-color: transparent;
}

/* Previous/Next Arrows (using Font Awesome) */
.pagination .page-item .page-link[rel="prev"]::before,
.pagination .page-item .page-link[rel="next"]::after {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin: 0 4px; /* Space around arrow */
}
.pagination .page-item .page-link[rel="prev"]::before {
    content: '\f053'; /* Angle Left */
}
.pagination .page-item .page-link[rel="next"]::after {
    content: '\f054'; /* Angle Right */
}

/* Hide text for prev/next on small screens if needed */
@media (max-width: 480px) {
  .pagination .page-item .page-link[rel="prev"] span,
  .pagination .page-item .page-link[rel="next"] span {
     /* display: none; */ /* Uncomment to hide text */
  }
   .pagination .page-item .page-link[rel="prev"],
   .pagination .page-item .page-link[rel="next"] {
      padding: 0 8px; /* Adjust padding if text hidden */
   }
}

/* --- Blur Effect (if using the JS hover effect) --- */
/* Base property card styling */
.property-card {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  z-index: 1;
}

/* Overlay for creating the blur effect */
.blur-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-bg, rgba(255, 255, 255, 0.6));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 5; /* Below focused card, above blurred cards */
}
html[data-theme="dark"] .blur-overlay {
    --overlay-bg: rgba(18, 31, 58, 0.7); /* Dark overlay */
}

.blur-overlay.active {
  opacity: 1;
}

/* Class for cards that should be blurred */
.card-blur {
  filter: blur(4px);
  opacity: 0.7;
  transform: scale(0.98);
  z-index: 0; /* Send blurred cards back */
}

/* Class for the focused card */
.card-focus {
  transform: scale(1.05); /* Slightly less zoom than before */
  z-index: 10; /* Above overlay */
  box-shadow: 0 15px 35px var(--shadow-hover-color);
}

/* Ensure image container scales correctly within focused card */
.card-focus .property-image-container {
    /* Styles already applied via .property-card hover */
}

/* Ensure badges stay relatively clear */
.card-blur .property-card__badges {
    opacity: 0.8;
}

/* --- Badge and Filter Link Positioning --- */

/* Position badges on top of the card */
.property-card__badges {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 5;
  display: flex;
  flex-direction: row;
  gap: 6px;
}

/* Style for badge links */
.badge-link {
  text-decoration: none;
  z-index: 3;
  position: relative;
}

.badge-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* Location filter link positioning */
.location-filter-link {
  position: absolute;
  bottom: 50px;  /* Position it above the price */
  right: 15px;
  background-color: rgba(var(--rgb-primary-accent, 22, 75, 146), 0.8);
  color: white;
  font-size: 0.8rem;
  padding: 3px 8px;
  border-radius: var(--border-radius);
  text-decoration: none;
  z-index: 3;
  transition: all 0.2s ease;
}

html[data-theme="dark"] .location-filter-link {
  background-color: rgba(var(--rgb-dark-primary-accent, 74, 144, 226), 0.8);
}

.location-filter-link:hover {
  background-color: var(--primary-accent);
  transform: translateY(-2px);
}

/* Make sure the main link covers the card area */
.property-card__link {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* Update badges display */
.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: var(--border-radius);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge--jual {
  background-color: var(--success-color, #28a745);
  color: white;
}

.badge--sewa {
  background-color: var(--info-color, #17a2b8);
  color: white;
}

.badge--jual-sewa {
  background: linear-gradient(90deg, var(--success-color, #28a745) 0%, var(--info-color, #17a2b8) 100%);
  color: white;
}

.badge--jual-cepat {
  background-color: var(--warning-color, #ffc107);
  color: var(--dark-bg);
}

.badge--type {
  background-color: #0f3a75;
  color: white;
}

.badge--tipe {
  background-color: #6e7683;
  color: white;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
  .location-filter-link {
    bottom: 70px; /* Adjust position on smaller screens */
    right: 10px;
    font-size: 0.7rem;
  }
  
  .property-card__badges {
    gap: 4px;
  }
  
  .badge {
    font-size: 0.65rem;
    padding: 3px 6px;
  }
}