body { font-family: 'Poppins', sans-serif; background: var(--primary-dark); color: var(--text-white); line-height: 1.6; }
a { text-decoration: none; color: inherit; transition: var(--transition); }

.page-container { max-width: 1400px; margin: 0 auto; padding: 100px 2rem 3rem; }
.page-header { margin-bottom: 2rem; }
.page-title { font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; }
.page-title span { color: var(--accent-cyan); }
.page-subtitle { color: var(--text-gray); }

.filters-bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 2rem; padding: 1.25rem; background: var(--secondary-dark); border-radius: var(--radius-lg); border: 1px solid var(--border-color); }
.filter-group { display: flex; align-items: center; gap: 0.5rem; }
.filter-group label { font-size: 0.8rem; color: var(--text-gray); font-weight: 600; white-space: nowrap; }
.filter-group select, .filter-group input { padding: 0.6rem 1rem; background: var(--tertiary-dark); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-white); font-family: inherit; font-size: 0.9rem; }
.filter-group select:focus, .filter-group input:focus { outline: none; border-color: var(--accent-blue); }
.filter-pills { display: flex; gap: 0.5rem; }
.filter-pill { padding: 0.5rem 1rem; border-radius: var(--radius-full); background: var(--tertiary-dark); color: var(--text-gray); font-size: 0.85rem; font-weight: 500; border: 1px solid transparent; }
.filter-pill:hover { color: var(--text-white); border-color: var(--accent-blue); }
.filter-pill.active { background: var(--accent-blue); color: white; }
.filter-apply { padding: 0.6rem 1.25rem; background: var(--accent-blue); color: white; border: none; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; font-weight: 600; }
.filter-apply:hover { background: var(--accent-blue-hover); }

.results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.results-count { color: var(--text-gray); }
.results-count strong { color: var(--accent-cyan); }
.sort-select { padding: 0.5rem 1rem; background: var(--secondary-dark); border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--text-white); font-family: inherit; }

.listings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
.listing-card { background: var(--card-bg); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-color); transition: var(--transition); }
.listing-card:hover { transform: translateY(-5px); border-color: var(--accent-blue); box-shadow: 0 10px 30px rgba(0,119,255,0.15); }
.listing-image-container { position: relative; height: 200px; overflow: hidden; }
.listing-image { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.listing-card:hover .listing-image { transform: scale(1.05); }
.listing-badges { position: absolute; top: 0.75rem; left: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.badge { padding: 0.25rem 0.6rem; border-radius: var(--radius-sm); font-size: 0.7rem; font-weight: 700; }
.badge-rent { background: var(--success-green); color: white; }
.badge-sale { background: var(--accent-blue); color: white; }
.badge-condition { background: var(--warning-orange); color: white; }
.listing-price { position: absolute; bottom: 0.75rem; right: 0.75rem; background: rgba(18,26,43,0.9); padding: 0.4rem 0.75rem; border-radius: var(--radius-sm); font-weight: 700; color: var(--accent-cyan); }
.listing-content { padding: 1.25rem; }
.listing-location { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-gray); margin-bottom: 0.4rem; }
.listing-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.listing-specs { display: flex; gap: 0.75rem; font-size: 0.8rem; color: var(--text-gray); margin-bottom: 0.75rem; }
.listing-specs span { display: flex; align-items: center; gap: 0.3rem; }
.listing-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--border-color); }
.listing-seller { font-size: 0.8rem; color: var(--text-gray); display: flex; align-items: center; gap: 0.4rem; }
.listing-details { color: var(--accent-blue); font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 0.3rem; }

.pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; }
.pagination a, .pagination span { padding: 0.6rem 1rem; border-radius: var(--radius-sm); background: var(--secondary-dark); color: var(--text-gray); border: 1px solid var(--border-color); font-weight: 600; }
.pagination a:hover { border-color: var(--accent-blue); color: var(--text-white); }
.pagination .current { background: var(--accent-blue); color: white; border-color: var(--accent-blue); }

.no-results { text-align: center; padding: 4rem 2rem; }
.no-results i { font-size: 4rem; color: var(--text-gray); opacity: 0.3; margin-bottom: 1rem; }
.no-results h3 { margin-bottom: 0.5rem; }
.no-results p { color: var(--text-gray); }

.listing-buy-btn { display: flex; align-items: center; justify-content: center; gap: 0.4rem; background: var(--success-green); color: white; padding: 0.5rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.8rem; margin-top: 0.5rem; transition: var(--transition); }
.listing-buy-btn:hover { background: #38a169; }
.listing-buy-btn.rent { background: var(--warning-orange); }
.listing-buy-btn.rent:hover { background: #dd7230; }
.footer { background: var(--secondary-dark); text-align: center; padding: 2rem; color: var(--text-gray); font-size: 0.85rem; border-top: 1px solid var(--border-color); margin-top: 3rem; }
@media (max-width: 768px) { .filters-bar { flex-direction: column; } .listings-grid { grid-template-columns: 1fr; } .page-container { padding: 80px 1rem 2rem; } .page-title { font-size: 1.5rem; } .results-header { flex-direction: column; gap: 0.5rem; } }
