/* ===== Properties Page - Modern Sidebar Layout ===== */

:root {
    --bg-primary: #0D1321;
    --bg-secondary: #1B2336;
    --bg-card: #1B2336;
    --border-color: #232B3E;
    --text-primary: #FFFFFF;
    --text-secondary: #B0B7C3;
    --accent-violet: #7A7AFF;
    --accent-violet-glow: rgba(122, 122, 255, 0.25);
    --accent-violet-hover: #6B6BEE;
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Mobile Filter Toggle */
.mobile-filter-toggle {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--accent-violet);
    color: white;
    border: none;
    padding: 15px 25px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(122, 122, 255, 0.4);
    z-index: 999;
    transition: all 0.3s ease;
}

.mobile-filter-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(122, 122, 255, 0.5);
}

.mobile-filter-toggle i {
    margin-right: 8px;
}

/* ===== MOBILE FILTER & SORT BAR ===== */
.mobile-filter-bar {
    display: none;
    position: sticky;
    top: 80px; /* Below navbar */
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: 15px 20px;
    z-index: 98;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.mobile-filter-options {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.mobile-filter-btn {
    flex: 1;
    max-width: 150px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.mobile-filter-btn:hover {
    background: var(--accent-violet);
    color: white;
    border-color: var(--accent-violet);
}

.mobile-filter-btn.active {
    background: var(--accent-violet);
    color: white;
    border-color: var(--accent-violet);
}

.mobile-filter-btn i:last-child {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Mobile Sort Dropdown */
.mobile-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 20px;
    right: 20px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 99;
    margin-top: 10px;
}

.mobile-dropdown.show {
    display: block;
}

.dropdown-content {
    padding: 15px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background: var(--bg-secondary);
}

.dropdown-item input {
    margin-right: 12px;
}

.dropdown-item span {
    font-size: 0.95rem;
    color: var(--text-primary);
}

/* Mobile Filters Popup */
.mobile-filters-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

.mobile-filters-popup.show {
    display: block;
}

.popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.popup-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.mobile-filters-popup.show .popup-content {
    transform: translateX(0);
}

.popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.popup-header h2 {
    margin: 0;
    font-size: 1.3rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.popup-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-primary);
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.popup-close:hover {
    background: var(--border-color);
}

.popup-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.popup-footer {
    display: flex;
    gap: 15px;
    padding: 20px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.btn-reset {
    flex: 1;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-reset:hover {
    background: var(--border-color);
}

.btn-apply {
    flex: 2;
    background: var(--accent-violet);
    border: 1px solid var(--accent-violet);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-apply:hover {
    background: var(--accent-violet-hover);
    border-color: var(--accent-violet-hover);
}

/* Main Container */
.properties-container {
    display: flex;
    gap: 0;
    min-height: 100vh;
    padding-top: 80px;
}

/* ===== FILTERS SIDEBAR ===== */
.filters-sidebar {
    width: 30%;
    min-width: 320px;
    max-width: 400px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    position: fixed;
    left: 0;
    top: 80px;
    bottom: 0;
    z-index: 100;
    transition: transform 0.3s ease;
}

.sidebar-header {
    padding: 25px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 10;
}

.sidebar-header h2 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin: 0;
}

.sidebar-header i {
    margin-right: 10px;
    color: var(--accent-violet);
}

.close-sidebar {
    display: none;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
    transition: color 0.3s ease;
}

.close-sidebar:hover {
    color: var(--text-primary);
}

.sidebar-content {
    padding: 20px;
}

/* Filter Sections */
.filter-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.filter-section:last-of-type {
    border-bottom: none;
}

.filter-section h3 {
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 15px;
    font-weight: 600;
}

.filter-section h3 i {
    margin-right: 8px;
    color: var(--accent-violet);
    font-size: 0.9rem;
}

.filter-group {
    margin-bottom: 15px;
}

.filter-group label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.filter-group input,
.filter-group select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: var(--accent-violet);
    box-shadow: 0 0 0 3px var(--accent-violet-glow);
}

.filter-group input::placeholder {
    color: var(--text-secondary);
}

/* Filter Chips */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.chip {
    padding: 6px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.chip:hover {
    background: var(--accent-violet);
    border-color: var(--accent-violet);
    color: white;
}

/* Checkbox Group */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.checkbox-label:hover {
    background: var(--bg-primary);
}

.checkbox-label input[type='checkbox'] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    cursor: pointer;
    accent-color: var(--accent-violet);
}

.checkbox-label span {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.checkbox-label input:checked + span {
    color: var(--text-primary);
    font-weight: 500;
}

/* Filter Actions */
.filter-actions {
    display: flex;
    gap: 10px;
    margin-top: 25px;
    position: sticky;
    bottom: 0;
    background: var(--bg-secondary);
    padding: 15px 0;
}

.btn-apply,
.btn-reset {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-apply {
    background: var(--accent-violet);
    color: white;
}

.btn-apply:hover {
    background: var(--accent-violet-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--accent-violet-glow);
}

.btn-reset {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-reset:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* ===== MAIN CONTENT AREA ===== */
.properties-main {
    width: calc(100% - 320px); /* Fixed width calculation */
    margin-left: 320px; /* Match sidebar min-width */
    padding: 30px;
    min-height: calc(100vh - 80px);
    box-sizing: border-box;
}

@media (min-width: 1400px) {
    .properties-main {
        width: calc(100% - 400px); /* Match sidebar max-width */
        margin-left: 400px;
    }
}

@media (max-width: 1100px) {
    .properties-main {
        width: calc(100% - 320px); /* Keep consistent with sidebar min-width */
        margin-left: 320px;
    }
}

/* Results Header */
.results-header {
    margin-bottom: 30px;
}

.results-info h1 {
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.results-info p {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* Properties List */
.properties-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Loading State */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: var(--text-secondary);
}

.loading-state i {
    font-size: 3rem;
    color: var(--accent-violet);
    margin-bottom: 20px;
}

.loading-state p {
    font-size: 1.1rem;
}

/* ===== PROPERTY CARD (Full Width) ===== */
.property-card {
    display: flex;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
    min-height: 200px;
}

.property-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(122, 122, 255, 0.2);
    border-color: var(--accent-violet);
}

/* Card Image Section */
.property-card-image {
    width: 30%;
    max-width: 280px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.property-image-carousel {
    width: 100%;
    height: 100%;
    position: relative;
    background: #232B3E;
}

.property-image-carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.property-card:hover .property-image-carousel img {
    transform: scale(1.05);
}

.carousel-controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 2;
}

.carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dot.active {
    background: white;
    width: 18px;
    border-radius: 3px;
}

.property-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(39, 174, 96, 0.95);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
}

.property-badge i {
    font-size: 0.7rem;
}

/* Card Content Section */
.property-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
}

/* Header Row: Name + Rent */
.property-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.property-name {
    font-size: 1.25rem;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    flex: 1;
    padding-right: 1rem;
}

.property-rent {
    font-size: 1.3rem;
    color: #27AE60;
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}

.property-rent span {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Location */
.property-location {
    display: flex;
    align-items: flex-start;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.property-location i {
    color: var(--text-secondary);
    margin-right: 6px;
    font-size: 0.85rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Key Info Details (Icons with text) */
.property-details {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 0.75rem;
}

.property-detail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.property-detail i {
    color: var(--accent-violet);
    font-size: 0.9rem;
}

/* Amenities Row */
.property-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0.75rem;
}

.amenity-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.25rem 0.5rem;
    background: rgba(122, 122, 255, 0.1);
    border: 1px solid rgba(122, 122, 255, 0.2);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.amenity-tag i {
    color: var(--accent-violet);
    font-size: 14px;
}

/* CTA Buttons */
.property-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
    align-items: center;
}

.btn-view-details,
.btn-book-visit {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 38px;
}

.btn-view-details {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-view-details:hover {
    background: rgba(122, 122, 255, 0.1);
    border-color: var(--accent-violet);
    color: var(--text-primary);
}

.btn-book-visit {
    background: var(--accent-violet);
    color: white;
    padding: 10px 24px;
}

.btn-book-visit:hover {
    background: var(--accent-violet-hover);
    box-shadow: 0 4px 12px rgba(122, 122, 255, 0.3);
}

/* Favorite Button (Heart Icon) */
.favorite-btn {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
    transition: all 0.2s ease;
}

.favorite-btn:hover {
    color: #FF6B6B;
    transform: scale(1.1);
}

.favorite-btn.active {
    color: #FF6B6B;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 80px 20px;
}

.empty-state i {
    font-size: 4rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.empty-state h3 {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.empty-state p {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* ===== PAGINATION ===== */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 40px;
    padding: 30px 0;
}

.pagination-btn {
    padding: 10px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--accent-violet);
    border-color: var(--accent-violet);
    transform: translateY(-2px);
}

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

.page-numbers {
    display: flex;
    gap: 8px;
}

.page-number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-number:hover {
    background: var(--accent-violet);
    border-color: var(--accent-violet);
}

.page-number.active {
    background: var(--accent-violet);
    border-color: var(--accent-violet);
    font-weight: 600;
}

/* ===== RESPONSIVE DESIGN ===== */
/* Desktop (≥992px) - Image left 40% + Info right 60% */
@media (min-width: 992px) {
    .property-card-image {
        width: 38%;
    }
    .property-card-content {
        width: 62%;
    }
}

/* Tablet (≥768px, <992px) - Stack vertically */
@media (max-width: 991px) {
    .properties-main {
        width: 100%; /* Full width on mobile */
        margin-left: 0;
        padding: 20px;
        padding-top: 0; /* Remove top padding since mobile filter bar provides spacing */
    }
    
    .filters-sidebar {
        transform: translateX(-100%);
    }
    
    .filters-sidebar.active {
        transform: translateX(0);
    }
    
    .mobile-filter-toggle {
        display: flex;
        align-items: center;
    }
    
    .mobile-filter-bar {
        display: block;
    }
    
    .close-sidebar {
        display: block;
    }
    
    .property-card {
        height: auto;
        flex-direction: column;
        padding: 1rem;
    }
    
    .property-card-image {
        width: 100%;
        height: 220px;
        margin-right: 0;
        margin-bottom: 1rem;
    }
    
    .property-card-content {
        width: 100%;
    }
}

/* Mobile (≤767px) - Full width stack */
@media (max-width: 767px) {
    .properties-container {
        padding-top: 70px;
    }
    
    .filters-sidebar {
        width: 100%;
        top: 70px;
    }
    
    .results-info h1 {
        font-size: 1.5rem;
    }
    
    .property-card {
        padding: 0.8rem;
    }
    
    .property-card-image {
        height: 200px;
    }
    
    .property-name {
        font-size: 1.1rem;
    }
    
    .property-rent {
        font-size: 1.2rem;
    }
    
    .property-details {
        gap: 8px;
    }
    
    .property-amenities {
        gap: 6px;
    }
    
    .amenity-tag {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* Stack buttons vertically on mobile */
    .property-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .btn-view-details,
    .btn-book-visit {
        width: 100%;
    }
    
    .pagination-container {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .pagination-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
}

/* Extra small mobile (≤600px) */
@media (max-width: 600px) {
    .properties-main {
        width: 100%; /* Ensure full width on small screens */
        padding: 15px;
    }
    
    .property-card {
        padding: 0.6rem;
    }
    
    .property-card-image {
        height: 180px;
    }
    
    .property-card-content {
        padding: 0;
    }
    
    .property-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .property-rent {
        font-size: 1.1rem;
    }
    
    .property-details {
        flex-direction: column;
        gap: 6px;
    }
    
    .property-amenities {
        gap: 5px;
    }
    
    .amenity-tag {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
    }
}

/* Very small screens (≤480px) */
@media (max-width: 480px) {
    .property-name {
        font-size: 1rem;
    }
    
    .property-location {
        font-size: 0.85rem;
    }
    
    .property-detail {
        font-size: 0.85rem;
    }
}

/* Scrollbar Styling */
.filters-sidebar::-webkit-scrollbar {
    width: 6px;
}
.filters-sidebar::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
.filters-sidebar::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}
.filters-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--accent-violet);
}

/* ===== CAROUSEL & NEW CARD STYLES ===== */
/* Property Image Container */
.property-image {
    width: 40%;
    height: 250px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

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

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

/* Carousel Navigation Buttons */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    opacity: 0;
}

.property-image:hover .carousel-btn {
    opacity: 1;
}

.carousel-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-50%) scale(1.1);
}

.carousel-btn.prev {
    left: 10px;
}

.carousel-btn.next {
    right: 10px;
}

/* Carousel Dots */
.carousel-controls {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 5;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dot:hover {
    background: rgba(255, 255, 255, 0.9);
}

.carousel-dot.active {
    background: white;
    width: 24px;
    border-radius: 4px;
}

/* Badges on Image */
.rating-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: #FFD700;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.wishlist-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--accent-violet);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.wishlist-btn:hover {
    background: rgba(122, 122, 255, 0.3);
    color: white;
}

.wishlist-btn.active {
    background: var(--accent-violet);
    color: white;
    border-color: transparent;
}

/* Property Info Section */
.property-info {
    width: 60%;
    padding: 25px 30px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.property-title {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-weight: 600;
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px 16px;
    margin: 10px 0;
}

.info-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.info-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    font-weight: 500;
}

.info-value {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Description */
.description {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 8px 0;
}

.clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-clamp: 2;
}

/* Amenities */
.amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}

.amenity {
    background: #232B3E;
    color: white;
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.amenity i {
    color: var(--accent-violet);
}

/* Action Buttons */
.btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

.btn-primary {
    background: var(--accent-violet);
    color: white;
}

.btn-primary:hover {
    background: var(--accent-violet-hover);
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--accent-violet);
    color: var(--accent-violet);
}

.btn-outline:hover {
    background: var(--accent-violet);
    color: white;
}

/* Responsive for new elements */
@media (max-width: 1024px) {
    .property-image {
        width: 45%;
        height: 220px;
    }
    .property-info {
        width: 55%;
        padding: 20px;
    }
}

@media (max-width: 600px) {
    .property-image {
        width: 100%;
        height: 200px;
    }
    .property-info {
        width: 100%;
        padding: 16px;
    }
    .info-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px 12px;
    }
}

/* ===== Enhanced Property Card Styles for New Markup ===== */
/* Override legacy styles to work with new JS structure */
.property-card { 
    display: flex; 
    flex-direction: row; 
    height: 250px; 
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.property-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px var(--accent-violet-glow);
    border-color: var(--accent-violet);
}

/* Left image section with carousel */
.property-image { 
    width: 40%; 
    height: 250px; 
    position: relative; 
    overflow: hidden; 
    flex-shrink: 0;
}

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

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

/* Badges and overlays */
.property-badge { 
    position: absolute; 
    top: 15px; 
    left: 15px; 
    background: var(--accent-violet); 
    color: white; 
    padding: 6px 12px; 
    border-radius: 20px; 
    font-size: 0.85rem; 
    font-weight: 600;
    z-index: 5;
}

.rating-badge { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
    background: rgba(0,0,0,0.6); 
    color: #FFD166; 
    font-size: 0.8rem; 
    font-weight: 600; 
    padding: 6px 10px; 
    border-radius: 12px;
    z-index: 5;
}

.wishlist-btn { 
    position: absolute; 
    bottom: 15px; 
    right: 15px; 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    background: rgba(0,0,0,0.5); 
    border: 1px solid rgba(255,255,255,0.2); 
    color: #fff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.1rem; 
    cursor: pointer; 
    transition: all 0.3s ease;
    z-index: 5;
}

.wishlist-btn:hover { 
    background: rgba(122,122,255,0.8); 
    transform: scale(1.1);
}

.wishlist-btn.active { 
    background: var(--accent-violet); 
    color: #fff; 
    border-color: var(--accent-violet);
}

/* Carousel controls */
.carousel-btn { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    background: rgba(0,0,0,0.6); 
    color: #fff; 
    border: none; 
    width: 36px; 
    height: 36px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    z-index: 10;
    transition: all 0.2s ease;
    opacity: 0;
}

.property-image:hover .carousel-btn { 
    opacity: 1;
}

.carousel-btn:hover { 
    background: rgba(0,0,0,0.8); 
    transform: translateY(-50%) scale(1.1);
}

.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }

.carousel-controls { 
    position: absolute; 
    bottom: 10px; 
    left: 50%; 
    transform: translateX(-50%); 
    display: flex; 
    gap: 6px; 
    z-index: 5; 
}

.carousel-dot { 
    width: 8px; 
    height: 8px; 
    border-radius: 50%; 
    background: rgba(255,255,255,0.5); 
    cursor: pointer; 
    transition: all 0.3s ease;
}

.carousel-dot.active { 
    background: white; 
    width: 20px; 
    border-radius: 4px; 
}

.carousel-dot:hover {
    background: rgba(255,255,255,0.8);
}

/* Right info section */
.property-info { 
    width: 60%; 
    padding: 25px 30px; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden;
}

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

.property-title, .property-name { 
    font-size: 1.5rem; 
    color: var(--text-primary); 
    margin: 0; 
    font-weight: 600;
    flex: 1;
    padding-right: 1rem;
}

.property-rent { 
    font-size: 1.8rem; 
    font-weight: 700; 
    color: var(--accent-violet); 
    white-space: nowrap;
}

.property-rent span { 
    font-size: 0.9rem; 
    color: var(--text-secondary); 
    font-weight: 400;
}

.property-location { 
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.property-location i {
    color: var(--accent-violet);
    margin-right: 6px;
}

.divider { 
    height: 1px; 
    background: var(--border-color); 
    margin: 12px 0;
}

/* Info Grid */
.info-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); 
    gap: 8px 12px; 
    margin: 12px 0;
}

.info-item { 
    background: var(--bg-primary); 
    border: 1px solid var(--border-color); 
    border-radius: 8px; 
    padding: 8px 10px; 
    display: flex; 
    flex-direction: column; 
    gap: 4px;
}

.info-label { 
    font-size: 0.7rem; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    color: var(--text-secondary);
}

.info-value { 
    font-size: 0.9rem; 
    font-weight: 500; 
    color: var(--text-primary); 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

.description { 
    font-size: 0.85rem; 
    color: var(--text-secondary); 
    line-height: 1.4; 
    margin: 8px 0;
}

.clamp-2 { 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    line-clamp: 2;
    -webkit-box-orient: vertical; 
    overflow: hidden;
}

.amenities { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 6px; 
    margin: 8px 0;
}

.amenity { 
    background: var(--bg-primary); 
    border: 1px solid var(--border-color);
    color: var(--text-secondary); 
    font-size: 0.8rem; 
    padding: 4px 8px; 
    border-radius: 6px; 
    display: flex; 
    align-items: center; 
    gap: 4px;
}

.amenity i { 
    color: var(--accent-violet); 
    font-size: 0.7rem;
}

.property-actions { 
    display: flex; 
    gap: 12px; 
    margin-top: auto;
}

.btn, .btn-view-details, .btn-book-visit { 
    padding: 12px 24px; 
    border-radius: 8px; 
    font-size: 0.95rem; 
    font-weight: 600; 
    cursor: pointer; 
    border: none; 
    transition: all 0.3s ease;
}

.btn-primary, .btn-book-visit { 
    background: var(--accent-violet); 
    color: white;
}

.btn-primary:hover, .btn-book-visit:hover { 
    background: var(--accent-violet-hover);
    transform: translateY(-2px);
}

.btn-outline, .btn-view-details { 
    background: transparent; 
    border: 2px solid var(--accent-violet); 
    color: var(--accent-violet);
    flex: 1;
}

.btn-outline:hover, .btn-view-details:hover { 
    background: var(--accent-violet); 
    color: white;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .properties-main {
        width: 100%; /* Full width when sidebar is hidden */
        margin-left: 0;
        padding: 20px;
    }
    .filters-sidebar {
        transform: translateX(-100%);
    }
    .filters-sidebar.active {
        transform: translateX(0);
    }
    .mobile-filter-toggle {
        display: flex;
        align-items: center;
    }
    .close-sidebar {
        display: block;
    }
    .property-card { 
        flex-direction: row; 
        height: 220px;
    }
    .property-image { 
        width: 45%; 
        height: 220px;
    }
    .property-info { 
        width: 55%; 
        padding: 18px 20px;
    }
}

@media (max-width: 600px) {
    .property-card { 
        flex-direction: column; 
        height: auto;
    }
    .property-image { 
        width: 100%; 
        height: 200px;
    }
    .property-info { 
        width: 100%; 
        padding: 16px;
    }
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    .property-actions {
        flex-direction: column;
        gap: 8px;
    }
    .btn-view-details,
    .btn-book-visit {
        width: 100%;
    }
}

/* === Fix: Keep details on the right and visible for new JS markup === */
/* Map new class names from JS to the existing layout dimensions */
.property-card { display: flex; flex-direction: row; height: 250px; }
.property-image { width: 40%; height: 250px; position: relative; overflow: hidden; flex-shrink: 0; }
.property-image img { width: 100%; height: 100%; object-fit: cover; }
.property-info { width: 60%; padding: 25px 30px; display: flex; flex-direction: column; overflow: hidden; }

/* Title alias so either class looks correct */
.property-title, .property-name { font-size: 1.5rem; color: var(--text-primary); margin-bottom: 8px; font-weight: 600; }

/* Carousel buttons and controls - ensure they're visible and working */
.carousel-btn { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    background: rgba(0,0,0,0.6); 
    color: #fff; 
    border: none; 
    width: 36px; 
    height: 36px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    z-index: 10;
    transition: all 0.2s ease;
    opacity: 0.8;
}
.carousel-btn:hover { 
    background: rgba(0,0,0,0.8); 
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}
.carousel-btn.prev { left: 8px; }
.carousel-btn.next { right: 8px; }

.carousel-controls { 
    position: absolute; 
    bottom: 12px; 
    left: 50%; 
    transform: translateX(-50%); 
    display: flex; 
    gap: 6px; 
    z-index: 5; 
}
.carousel-dot { 
    width: 8px; 
    height: 8px; 
    border-radius: 50%; 
    background: rgba(255,255,255,0.6); 
    cursor: pointer; 
    transition: all 0.3s ease;
}
.carousel-dot.active { 
    background: #fff; 
    width: 20px; 
    border-radius: 4px; 
}
.carousel-dot:hover {
    background: rgba(255,255,255,0.9);
}

/* Prevent tablet rule from stacking the card; only stack on small phones */
@media (max-width: 1024px) {
  .property-card { flex-direction: row; height: 220px; }
  .property-image { width: 45%; height: 220px; }
  .property-info { width: 55%; padding: 18px 20px; }
}

@media (max-width: 600px) {
  .property-card { flex-direction: column; height: auto; }
  .property-image { width: 100%; height: 200px; }
  .property-info { width: 100%; padding: 16px; }
}/* === Info Grid & Description Styling === */
.info-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap:10px 16px; margin: 6px 0 10px; }
.info-item { background: var(--bg-primary); border:1px solid var(--border-color); border-radius:8px; padding:6px 8px; display:flex; flex-direction:column; gap:2px; }
.info-label { font-size: .65rem; text-transform: uppercase; letter-spacing:.5px; color: var(--text-secondary); }
.info-value { font-size: .85rem; font-weight:500; color: var(--text-primary); white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }
.description { font-size:.8rem; color: var(--text-secondary); line-height:1.3; margin:4px 0 8px; }
.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Ensure amenities wrap nicely below grid */
.amenities { margin-top:4px; }
/* === Compact horizontal card layout fix (details stay right of image) === */
/* Keep card row layout and make info column match image height */
.property-card { height: 220px; align-items: stretch; }

/* Use new universal classes emitted by JS */
.property-image { width: 40%; height: 220px; position: relative; overflow: hidden; flex-shrink: 0; }
.property-image img { width: 100%; height: 100%; object-fit: cover; }
.property-info { width: 60%; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 20px; overflow: hidden; }

/* Make the content compact */
.property-title, .property-name { font-size: 1.2rem; margin: 0 0 6px; }
.property-rent { font-size: 1.2rem; color: var(--accent-violet); }
.property-location { margin: 4px 0 8px; font-size: 0.9rem; }
.property-details { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; font-size: 0.9rem; }
.divider { height: 1px; background: var(--border-color); margin: 6px 0; }
.amenities { display: flex; flex-wrap: wrap; gap: 6px; }
.amenity { background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 4px 8px; border-radius: 6px; font-size: 0.8rem; }
.highlights { margin-top: 6px; font-size: 0.85rem; color: var(--text-secondary); }

/* Badges / wishlist minimal styles (for new markup) */
.rating-badge { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.55); color: #FFD166; padding: 4px 8px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; }
.wishlist-btn { position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: var(--accent-violet); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.wishlist-btn.active { background: var(--accent-violet); color: #fff; border-color: transparent; }

/* Carousel controls for multiple images */
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.4); color: #fff; border: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.carousel-btn.prev { left: 8px; }
.carousel-btn.next { right: 8px; }
.carousel-controls { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.55); }
.carousel-dot.active { background: #fff; width: 20px; border-radius: 4px; }

/* Override previous responsive rule that stacked content; keep side-by-side on tablets too */
@media (max-width: 1024px) {
    .property-card { flex-direction: row; height: 200px; }
    .property-image { width: 45%; height: 200px; }
    .property-info { width: 55%; padding: 12px 16px; }
}

/* Only stack on very small screens if needed */
@media (max-width: 600px) {
    .property-card { height: auto; flex-direction: column; }
    .property-image { width: 100%; height: 200px; }
    .property-info { width: 100%; padding: 12px 14px; }
}
/* ===== Universal Property Card - Enhanced Styles (appended to override) ===== */
/* Base card override for improved look */
.property-card {
        position: relative;
        border-radius: 1rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.35);
        transition: all .35s ease;
}
.property-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 12px rgba(122,122,255,.25);
}

/* Left image section (new class) */
.property-image {
        width: 38%;
        position: relative;
        overflow: hidden;
        min-height: 220px;
        flex-shrink: 0;
}
.property-image img { width:100%; height:100%; object-fit:cover; transition: transform .45s ease; }
.property-card:hover .property-image img { transform: scale(1.05); }

/* Badges and buttons on image */
.property-badge { position:absolute; top:1rem; left:1rem; background:var(--accent-violet); color:#fff; font-size:.7rem; font-weight:600; padding:.35rem .7rem; border-radius:.5rem; text-transform:uppercase; letter-spacing:.5px; }
.rating-badge { position:absolute; top:1rem; right:1rem; background:rgba(0,0,0,.55); color:#FFD166; font-size:.75rem; font-weight:600; padding:.35rem .6rem; border-radius:.5rem; }
.wishlist-btn { position:absolute; bottom:1rem; right:1rem; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:var(--accent-violet); display:flex; align-items:center; justify-content:center; font-size:1.1rem; cursor:pointer; transition:.3s; }
.wishlist-btn:hover { background:rgba(122,122,255,.25); color:#fff; }
.wishlist-btn.active { background:var(--accent-violet); color:#fff; border-color:transparent; }

/* Carousel controls (optional) */
.carousel-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.4); color:#fff; border:none; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; }
.carousel-btn:hover { background:rgba(0,0,0,.6); }
.carousel-btn.prev { left:.6rem; }
.carousel-btn.next { right:.6rem; }
.carousel-controls { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:2; }
.carousel-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; transition:.3s; }
.carousel-dot.active { background:#fff; width:22px; border-radius:4px; }

/* Right info section (new class) */
.property-info { flex:1; display:flex; flex-direction:column; justify-content:space-between; padding:1.4rem 1.6rem; }
.property-header { align-items:center; }
.property-title { font-size:1.2rem; font-weight:600; color:var(--text-primary); margin:0; }
.property-rent { font-size:1.1rem; font-weight:600; color:var(--accent-violet); white-space:nowrap; }
.property-rent span { font-size:.75rem; color:var(--text-secondary); font-weight:400; }
.property-location { font-size:.9rem; color:#B0B7C3; margin-top:.3rem; }
.divider { height:1px; background:#232B3E; margin:.8rem 0; }
.property-details { font-size:.9rem; color:#B0B7C3; line-height:1.5; }
.property-details span { color:var(--accent-violet); }
.amenities { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem; }
.amenity { background:#232B3E; color:#fff; font-size:.8rem; padding:.3rem .6rem; border-radius:.5rem; display:flex; align-items:center; gap:.3rem; }
.amenity i { color:var(--accent-violet); }
.highlights { margin-top:.8rem; font-size:.85rem; color:#B0B7C3; }
.highlights span { color:var(--accent-violet); margin:0 .2rem; }

/* Actions */
.property-actions { display:flex; gap:.8rem; margin-top:1rem; }
.btn { padding:.6rem 1.2rem; border-radius:.7rem; font-size:.9rem; font-weight:500; cursor:pointer; border:none; transition:.3s; }
.btn-primary { background:var(--accent-violet); color:#fff; }
.btn-primary:hover { box-shadow:0 0 8px rgba(122,122,255,.45); }
.btn-outline { background:transparent; border:1px solid var(--accent-violet); color:var(--accent-violet); }
.btn-outline:hover { background:rgba(122,122,255,.3); color:#fff; }

/* Responsive for universal classes */
@media (max-width: 991px) {
    .property-image { width:100%; height:220px; margin-bottom:1rem; }
    .property-info { width:100%; padding:0 0 1rem 0; }
}
@media (max-width: 767px) {
    .property-image { height:200px; }
}
@media (max-width: 600px) {
    .property-image { height:180px; }
}
/* ===== Universal Property Card - Enhanced Styles (appended to override) ===== */
/* Base card override for improved look */
.property-card {
        position: relative;
        border-radius: 1rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.35);
        transition: all .35s ease;
}
.property-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 12px rgba(122,122,255,.25);
}

/* Left image section (new class) */
.property-image {
        width: 38%;
        position: relative;
        overflow: hidden;
        min-height: 220px;
        flex-shrink: 0;
}
.property-image img { width:100%; height:100%; object-fit:cover; transition: transform .45s ease; }
.property-card:hover .property-image img { transform: scale(1.05); }

/* Badges and buttons on image */
.property-badge { position:absolute; top:1rem; left:1rem; background:var(--accent-violet); color:#fff; font-size:.7rem; font-weight:600; padding:.35rem .7rem; border-radius:.5rem; text-transform:uppercase; letter-spacing:.5px; }
.rating-badge { position:absolute; top:1rem; right:1rem; background:rgba(0,0,0,.55); color:#FFD166; font-size:.75rem; font-weight:600; padding:.35rem .6rem; border-radius:.5rem; }
.wishlist-btn { position:absolute; bottom:1rem; right:1rem; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:var(--accent-violet); display:flex; align-items:center; justify-content:center; font-size:1.1rem; cursor:pointer; transition:.3s; }
.wishlist-btn:hover { background:rgba(122,122,255,.25); color:#fff; }
.wishlist-btn.active { background:var(--accent-violet); color:#fff; border-color:transparent; }

/* Carousel controls (optional) */
.carousel-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.4); color:#fff; border:none; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; }
.carousel-btn:hover { background:rgba(0,0,0,.6); }
.carousel-btn.prev { left:.6rem; }
.carousel-btn.next { right:.6rem; }
.carousel-controls { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:2; }
.carousel-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; transition:.3s; }
.carousel-dot.active { background:#fff; width:22px; border-radius:4px; }

/* Right info section (new class) */
.property-info { flex:1; display:flex; flex-direction:column; justify-content:space-between; padding:1.4rem 1.6rem; }
.property-header { align-items:center; }
.property-title { font-size:1.2rem; font-weight:600; color:var(--text-primary); margin:0; }
.property-rent { font-size:1.1rem; font-weight:600; color:var(--accent-violet); white-space:nowrap; }
.property-rent span { font-size:.75rem; color:var(--text-secondary); font-weight:400; }
.property-location { font-size:.9rem; color:#B0B7C3; margin-top:.3rem; }
.divider { height:1px; background:#232B3E; margin:.8rem 0; }
.property-details { font-size:.9rem; color:#B0B7C3; line-height:1.5; }
.property-details span { color:var(--accent-violet); }
.amenities { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem; }
.amenity { background:#232B3E; color:#fff; font-size:.8rem; padding:.3rem .6rem; border-radius:.5rem; display:flex; align-items:center; gap:.3rem; }
.amenity i { color:var(--accent-violet); }
.highlights { margin-top:.8rem; font-size:.85rem; color:#B0B7C3; }
.highlights span { color:var(--accent-violet); margin:0 .2rem; }

/* Actions */
.property-actions { display:flex; gap:.8rem; margin-top:1rem; }
.btn { padding:.6rem 1.2rem; border-radius:.7rem; font-size:.9rem; font-weight:500; cursor:pointer; border:none; transition:.3s; }
.btn-primary { background:var(--accent-violet); color:#fff; }
.btn-primary:hover { box-shadow:0 0 8px rgba(122,122,255,.45); }
.btn-outline { background:transparent; border:1px solid var(--accent-violet); color:var(--accent-violet); }
.btn-outline:hover { background:rgba(122,122,255,.3); color:#fff; }

/* Responsive for universal classes */
@media (max-width: 991px) {
    .property-image { width:100%; height:220px; margin-bottom:1rem; }
    .property-info { width:100%; padding:0 0 1rem 0; }
}
@media (max-width: 767px) {
    .property-image { height:200px; }
}
@media (max-width: 600px) {
    .property-image { height:180px; }
}