/*
 * Property Search V2 - Layout & UX Spec
 * Centered panel with left filters + right results
 * Brand Fonts: Playfair Display (headings) + Plus Jakarta Sans (body)
 */

/* Import Property Detail V2 CSS for modal content */
@import url('/static/rental_bot/css/property_detail_v2.css');

/* Typography Variables */
:root {
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --color-primary: #8B7FD9;
    --color-primary-hover: #7366C9;
    --color-accent: #4CAF50;
    --color-accent-hover: #45a049;
    --color-text: #222;
    --color-text-light: #717171;
    --color-text-medium: #666;
    --color-border: #ddd;
    --color-bg-light: #f7f7f7;
    --color-filter-bg: #1B7A8E; /* Teal/cyan background for filters */
    --color-panel-bg: #F8F9FE; /* Light purple/blue for main panel */
}

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

body {
    font-family: var(--font-body);
    color: var(--color-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* REMOVED: overflow-x: hidden - masks overflow issues instead of fixing them */
    /* FIX: Ensure child elements use width: 100% instead of 100vw to prevent overflow */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
}

/* Page Background */
.page-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%),
                url('/media/icons/Charm-of-Koh-Phangan.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: -1;
}

/* Main Active Panel - Full viewport height minus margins */
.main-panel {
    max-width: 1400px;
    margin: 32px auto 16px auto; /* 16px bottom margin for spacing before footer */
    background: var(--color-panel-bg); /* Light purple/blue background */
    backdrop-filter: blur(12px);
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 48px); /* Full height minus top/bottom margins */
}

/* Panel Header - FIXED */
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px; /* Reduced from 12px 24px for balanced spacing */
    border-bottom: 1px solid var(--color-border);
    background: white;
    flex-shrink: 0; /* Don't shrink when content overflows */
    position: relative; /* For burger menu dropdown positioning */
}

.logo-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.logo-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo {
    width: 40px; /* Reduced from 50px */
    height: 40px; /* Reduced from 50px */
    border-radius: 50%; /* CHANGED: Circle logo on both mobile and desktop */
    object-fit: cover;
}

.brand-name {
    font-size: 1.3rem; /* Reduced from 1.5rem */
    font-weight: 700;
    white-space: nowrap; /* Prevent text wrapping */
}

.logo-helprent {
    color: var(--color-primary);
}

.logo-phangan {
    color: #000000;
}

.logo-slogan {
    font-family: var(--font-body);
    font-size: 10px; /* Reduced from 11px */
    opacity: 0.7;
    font-weight: 500;
    color: var(--color-text-medium);
    margin-left: 52px; /* Align with brand name (logo width 40px + gap 12px) */
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.header-actions {
    display: flex;
    flex-direction: row; /* Ensure horizontal layout */
    gap: 12px;
    align-items: center;
}

.header-btn {
    background: white;
    border: 1px solid #e0e0e0;
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-btn:hover {
    background: #f5f5f5;
    border-color: var(--color-primary);
}

.header-btn i {
    font-size: 1rem;
}

.favorites-badge {
    background: var(--color-primary);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    margin-left: 4px;
}

.telegram-btn {
    background: #0088cc;
    color: white;
    padding: 8px 16px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.telegram-btn:hover {
    background: #006699;
}

.telegram-btn i {
    font-size: 1rem;
}

/* Navigation Tabs */
.nav-tabs {
    display: flex;
    gap: 8px;
    padding: 0 0 10px 0; /* Removed horizontal padding since it's inside burger menu */
    border-bottom: 1px solid #e0e0e0;
}

.nav-tab {
    background: transparent;
    border: none;
    padding: 8px 16px; /* Reduced from 10px 20px */
    font-size: 0.95rem; /* Reduced from 1rem */
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
}

.nav-tab:hover {
    color: var(--color-primary);
}

.nav-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* ========================================
   BURGER MENU STYLES
   ======================================== */

/* Burger Menu Toggle Button - Hidden on desktop, shown on mobile */
.burger-menu-toggle {
    display: none; /* Hidden by default on desktop */
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.burger-line {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-text);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Burger menu animation when open */
.burger-menu-toggle[aria-expanded="true"] .burger-line:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}

.burger-menu-toggle[aria-expanded="true"] .burger-line:nth-child(2) {
    opacity: 0;
}

.burger-menu-toggle[aria-expanded="true"] .burger-line:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}

/* Burger Menu Container */
.burger-menu-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Desktop: Show nav-tabs and header-actions inline */
@media (min-width: 1025px) {
    .burger-menu-container {
        flex-direction: row;
    }
    
    .burger-menu-container .nav-tabs {
        border-bottom: none;
        padding: 0;
    }
    
    .burger-menu-container .nav-tab {
        border-bottom: 3px solid transparent;
    }
    
    .burger-menu-container .nav-tab.active {
        border-bottom-color: var(--color-primary);
    }
}

/* Mobile: Show burger toggle, menu becomes dropdown */
@media (max-width: 1024px) {
    .panel-header {
        flex-wrap: nowrap; /* Prevent wrapping */
    }
    
    .logo-section {
        flex: 0 0 auto; /* Don't grow or shrink */
        order: 1; /* First item */
    }
    
    .burger-menu-toggle {
        display: flex; /* Show burger on mobile */
        flex: 0 0 auto; /* Don't grow or shrink */
        order: 2; /* Second item - right after logo */
    }
    
    .burger-menu-container {
        display: none; /* Hide by default - remove from flex flow */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        padding: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border-top: 1px solid var(--color-border);
        z-index: 1000;
    }
    
    .burger-menu-container.open {
        display: flex; /* Show when open */
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .burger-menu-container .nav-tabs {
        flex-direction: column;
        width: 100%;
        border-bottom: 1px solid var(--color-border);
        padding-bottom: 12px;
        margin-bottom: 12px;
    }
    
    .burger-menu-container .nav-tab {
        width: 100%;
        text-align: left;
        padding: 12px 16px;
        border-bottom: none;
        border-left: 3px solid transparent;
    }
    
    .burger-menu-container .nav-tab.active {
        border-bottom: none;
        border-left-color: var(--color-primary);
        background: rgba(139, 127, 217, 0.1);
    }
    
    .burger-menu-container .header-actions {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }
    
    .burger-menu-container .header-btn,
    .burger-menu-container .telegram-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Two Column Layout - SCROLLABLE */
.panel-content {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 16px; /* Reduced from 24px */
    padding: 16px; /* Reduced from 24px */
    overflow: hidden; /* Prevent panel-content from scrolling */
    flex: 1; /* Take remaining space */
}

/* LEFT COLUMN: Filters - FULL HEIGHT */
.filters-column {
    background: var(--color-filter-bg); /* Teal/cyan background */
    padding: 14px; /* Reduced from 20px */
    border-radius: 16px;
    overflow-y: auto; /* Scroll if filters overflow */
    height: 100%; /* Take full height of parent */
    display: flex;
    flex-direction: column;
}

.filters-title {
    font-size: 1.1rem; /* Reduced from 1.3rem */
    margin-bottom: 10px; /* Reduced from 16px */
    color: #2c3e50; /* Dark text for better contrast on light purple background */
}

/* Filter Groups */
.filter-group {
    margin-bottom: 10px; /* Reduced from 14px */
}

.filter-label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px; /* Reduced from 6px */
    color: #2c3e50; /* Dark text for better contrast on light purple background */
    font-size: 0.85rem; /* Reduced from 0.9rem */
}

/* Rental Type Toggle */
.rental-type-toggle {
    display: flex;
    gap: 8px;
}

.rental-type-btn {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid var(--color-border);
    background: white;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-family: var(--font-body);
}

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

.rental-type-btn:hover:not(.active) {
    border-color: var(--color-primary);
}

/* Date Inputs */
.date-inputs {
    display: flex;
    flex-direction: column;
    gap: 4px; /* Reduced from 6px */
}

.date-input-wrapper {
    margin-bottom: 6px; /* Reduced from 8px */
}

.date-sublabel {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #2c3e50; /* Dark text for better contrast on light purple background */
    margin-bottom: 4px;
}

.date-with-adjusters {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Date input with calendar icon */
.date-input-with-icon {
    position: relative;
    width: 100%;
}

.date-input {
    width: 100%;
    padding: 6px 32px 6px 8px; /* Add right padding for icon */
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.85rem; /* Reduced from 0.9rem */
    font-family: var(--font-body);
    transition: border-color 0.3s;
    cursor: pointer;
}

.date-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.calendar-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #666;
    pointer-events: none; /* Allow clicks to pass through to input */
}

/* Date Flexibility Buttons (± days) */
.date-flexibility-buttons {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.date-flexibility-btn {
    flex: 1;
    min-width: 45px;
    padding: 5px 8px;
    background: rgba(44, 62, 80, 0.1); /* Dark background for visibility */
    border: 1.5px solid rgba(44, 62, 80, 0.3);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #2c3e50; /* Dark text for better contrast on light purple background */
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-body);
    text-align: center;
}

.date-flexibility-btn:hover {
    background: rgba(44, 62, 80, 0.2);
    border-color: rgba(44, 62, 80, 0.5);
    transform: translateY(-1px);
}

.date-flexibility-btn.active {
    background: #2c3e50; /* Dark background when active */
    color: white; /* White text on dark background for active state */
    border-color: #2c3e50;
    font-weight: 600;
}

.date-flexibility-btn:first-child {
    flex: 1.5;
}

/* Quick Date Selection Buttons */
.quick-date-buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin-top: 0;
}

.quick-date-btn {
    padding: 6px 4px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-body);
    white-space: nowrap;
}

.quick-date-btn:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

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

/* Multi-select Dropdown */
.multi-select-dropdown {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.dropdown-toggle {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    background: white;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    font-family: var(--font-body);
    font-size: 0.9rem;
    transition: border-color 0.3s;
}

.dropdown-toggle:hover {
    border-color: var(--color-primary);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000; /* Must be MUCH higher than Find button (z-index: 10) */
    display: none;
}

.dropdown-menu.active {
    display: block;
}

/* Dropdown action buttons (Select All / Clear All) */
.dropdown-item-action {
    padding: 8px;
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--color-border);
}

.select-all-btn,
.clear-all-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.select-all-btn {
    background: var(--color-primary);
    color: white;
}

.select-all-btn:hover {
    background: #5a4fd6;
}

.clear-all-btn {
    background: #f5f5f5;
    color: #666;
}

.clear-all-btn:hover {
    background: #e5e5e5;
}

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

.dropdown-item {
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.dropdown-item input[type="checkbox"] {
    cursor: pointer;
}

/* Filter Select */
.filter-select {
    width: 100%;
    padding: 6px 10px; /* Reduced from 10px 12px */
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.85rem; /* Reduced from 0.95rem */
    font-family: var(--font-body);
    background: white;
    cursor: pointer;
    transition: border-color 0.3s;
}

.filter-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Guest Picker Button */
.guest-picker-btn {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    background: white;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body);
    transition: border-color 0.3s;
}

.guest-picker-btn:hover {
    border-color: var(--color-primary);
}

/* Budget Inputs */
.budget-inputs {
    display: flex;
    align-items: center;
    gap: 6px; /* Reduced from 8px */
    margin-bottom: 8px; /* Reduced from 12px */
}

.budget-input {
    width: 100px;
    padding: 6px 10px; /* Reduced from 10px 12px */
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.85rem; /* Reduced from 0.95rem */
    font-family: var(--font-body);
    transition: border-color 0.3s;
}

.budget-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.budget-separator {
    color: var(--color-text-light);
    font-weight: 500;
}

/* Budget Slider */
.budget-slider-container {
    position: relative;
    height: 40px;
    margin-bottom: 8px;
}

.budget-slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    transform: translateY(-50%);
}

.budget-slider-range {
    position: absolute;
    height: 100%;
    background: var(--color-primary);
    border-radius: 3px;
}

.budget-slider {
    position: absolute;
    width: 100%;
    height: 40px;
    top: 0;
    left: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    margin: 0;
}

.budget-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 3;
}

.budget-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary);
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 3;
}

.budget-slider-min {
    z-index: 2;
}

.budget-slider-max {
    z-index: 1;
}

.budget-currency {
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--color-text-light);
}

/* Find Button */
.find-btn {
    width: 100%;
    padding: 10px 20px; /* Reduced from 14px 24px */
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem; /* Reduced from 1.1rem */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-family: var(--font-body);
    margin-top: 6px; /* Reduced from 8px */
}

.find-btn:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 56, 92, 0.3);
}

/* RIGHT COLUMN: Results - FIXED HEADER + SCROLLABLE CONTENT */
.results-column {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Reduced from 20px */
    overflow: hidden; /* Prevent column from scrolling */
    max-height: 100%; /* Constrain to parent height */
    min-width: 0; /* Allow grid to shrink properly */
}

/* Results Header - FIXED (Property Type Tabs + Sort on same row) */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px; /* Reduced from 16px to reduce height by ~40% */
    flex-shrink: 0; /* Don't shrink */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    padding: 4px 0; /* Minimal vertical padding */
}

.results-info {
    display: flex;
    align-items: center;
    gap: 8px; /* Reduced from 16px */
}

.results-info h3 {
    font-size: 1.1rem; /* Reduced from 1.3rem */
    color: var(--color-text);
    margin: 0;
}

/* Sort wrapper (right-aligned in results-header) */
.sort-wrapper {
    display: flex;
    align-items: center;
    gap: 6px; /* Reduced from 12px */
    flex-shrink: 0; /* Don't shrink sort dropdown */
}

/* Results count under Find button (Desktop only) */
.filters-results-count {
    padding: 10px 12px; /* Reduced to match sort-selector height */
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center; /* Align vertically with sort-selector */
}

.filters-results-count h3 {
    font-size: 0.75rem;
    color: var(--color-text);
    margin: 0;
    font-weight: 600;
    line-height: 1; /* Match sort-selector line-height */
}

.map-link {
    background: none;
    border: none;
    color: var(--color-primary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    font-family: var(--font-body);
}

.on-map-btn {
    padding: 10px 20px;
    background: white;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-family: var(--font-body);
}

.on-map-btn:hover {
    background: var(--color-primary);
    color: white;
}

/* Sort Selector (Order By Dropdown) */
.sort-selector {
    padding: 10px 16px;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-body);
    min-width: 180px;
}

.sort-selector:hover {
    border-color: var(--color-primary);
}

.sort-selector:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 92, 231, 0.1);
}

/* Property Type Tabs - FIXED (now inside results-header) */
.property-type-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    /* flex: 1 removed - allow sort to stay right */
    align-items: center;
}

/* Search View - FLEXIBLE CONTAINER */
#searchView {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Reduced from 20px */
    overflow: hidden; /* Prevent searchView from scrolling */
    flex: 1; /* Take remaining space */
}

/* Scrollable Content Wrapper - ONLY THIS SCROLLS */
.scrollable-content {
    overflow-y: auto; /* Enable scrolling */
    flex: 1; /* Take remaining space after header and tabs */
    padding-right: 8px; /* Space for scrollbar */
    padding-bottom: 12px; /* Reduced from implicit padding */
    max-height: calc(100vh - 250px); /* Fixed max height for independent scrolling */
}

.tab-btn {
    padding: 6px 14px; /* Reduced from 10px 20px */
    background: white;
    border: 2px solid var(--color-border);
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-family: var(--font-body);
    font-size: 0.9rem; /* Added to reduce size */
    color: var(--color-text);
}

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

.tab-btn:hover:not(.active) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Property Grid - Grid Layout for Property Cards */
/* Desktop: 3 cards per row for 2 rows visible (6 cards total) */
.property-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
    min-width: 400px; /* Prevent squeeze when empty */
    min-height: 200px; /* Prevent layout collapse during loading */
    transition: opacity 0.2s ease;
}

/* Tablet: 2 cards per row */
@media (max-width: 1200px) {
    .property-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Loading & Empty States */
.loading-state,
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-text-light);
    width: 100%;
    min-width: 400px; /* Match property-grid min-width */
}

.loading-state i,
.empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state h3 {
    margin-bottom: 8px;
    color: var(--color-text);
}

/* Property Card - Fully Clickable */
.property-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.property-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.property-card:active {
    transform: translateY(-2px);
}

/* Image Carousel */
.property-card-image-carousel {
    position: relative;
    height: 180px; /* Reduced from 220px to fit everything at 100% zoom */
    overflow: hidden;
    background: #f0f0f0;
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    pointer-events: none;
}

.carousel-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.carousel-btn:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
    left: 12px;
}

.carousel-next {
    right: 12px;
}

.carousel-btn i {
    color: #333;
    font-size: 0.9rem;
}

.carousel-counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 10;
}

/* Video Badge (top-left corner) */
.video-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.9rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px;
}

.video-badge i {
    font-size: 0.85rem;
}

/* Carousel Dots Navigation */
.carousel-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}

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

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

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

/* Legacy support */
.property-card-image {
    position: relative;
    height: 280px;
    overflow: hidden;
}

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

.property-card-icons {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    z-index: 15;
}

.card-icon-btn {
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}

.card-icon-btn:hover {
    transform: scale(1.1);
}

.card-icon-btn i {
    color: var(--color-primary);
    font-size: 1rem;
}

.card-icon-btn.favorited i {
    font-weight: 900;
    color: #FF385C;
}

.property-card-content {
    padding: 12px; /* Reduced from 16px */
    flex: 1;
    display: flex;
    flex-direction: column;
}

.property-card-title {
    font-size: 1rem; /* Reduced from 1.1rem */
    font-weight: 600;
    margin-bottom: 6px; /* Reduced from 10px */
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: 2.6rem; /* Ensures consistent height for 2 lines */
}

.property-card-meta {
    display: flex;
    gap: 10px; /* Reduced from 12px */
    margin-bottom: 4px; /* Reduced from 6px */
    color: var(--color-text-light);
    font-size: 0.8rem; /* Reduced from 0.85rem */
    flex-wrap: wrap;
}

.property-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.property-meta-item i {
    font-size: 0.8rem;
}

.property-card-id {
    font-size: 0.7rem; /* Reduced from 0.75rem */
    color: var(--color-text-light);
    margin-bottom: 4px; /* Reduced from 8px */
    font-family: monospace;
}

.property-card-specs {
    display: flex;
    gap: 10px; /* Reduced from 12px */
    margin-bottom: 6px; /* Reduced from 8px */
    color: var(--color-text-light);
    font-size: 0.85rem; /* Reduced from 0.9rem */
}

.property-card-description {
    color: var(--color-text-light);
    font-size: 0.8rem; /* Reduced from 0.85rem */
    margin-bottom: 6px; /* Reduced from 10px */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.property-card-amenities {
    display: flex;
    gap: 4px; /* Reduced from 6px */
    margin-bottom: 8px; /* Reduced from 12px */
    flex-wrap: wrap;
}

.amenity-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--color-bg-light);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--color-text);
}

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

.property-card-price {
    font-size: 1.05rem; /* Reduced from 1.15rem */
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px; /* Reduced from 12px */
}

.property-card-price span {
    font-size: 0.8rem; /* Reduced from 0.85rem */
    font-weight: 400;
    color: var(--color-text-light);
}

/* REMOVED (2026-02-16): Dual pricing comparison box (gold "Save money" box) per user directive */
/* User requested: "Remove gold section" showing nightly vs monthly comparison */

/* Single Pricing Display (Default) */
.single-pricing {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.single-pricing .price-amount {
    font-weight: 700;
}

.single-pricing .price-period {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-text-light);
}

.property-card-buttons {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: 6px; /* Reduced from 10px */
}

.card-btn {
    width: 100%; /* Full width for stacked buttons */
    padding: 8px 12px; /* Reduced from 12px 16px */
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-family: var(--font-body);
    font-size: 0.85rem; /* Reduced from 0.95rem */
    text-decoration: none;
    text-align: center;
    border: none;
}

.card-btn-primary {
    background: var(--color-accent);
    color: white;
    border: none;
}

.card-btn-primary:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.card-btn-secondary {
    background: white;
    color: var(--color-text);
    border: 2px solid var(--color-border);
}

.card-btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 127, 217, 0.2);
}

/* ========================================
   RESERVATION MODAL
   ======================================== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    padding: 32px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #717171;
    z-index: 20;
    transition: color 0.2s;
}

.modal-close:hover {
    color: #222;
}

.modal-title {
    font-size: 1.5rem;
    margin-bottom: 8px;
    color: #222;
}

/* Form Styles */
.luxury-form-group {
    position: relative;
    margin-bottom: 24px;
}

.luxury-form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.luxury-form-input:focus {
    outline: none;
    border-color: #8774e1;
}

.luxury-form-label {
    position: absolute;
    top: -8px;
    left: 12px;
    background: white;
    padding: 0 4px;
    font-size: 0.85rem;
    color: #717171;
}

.luxury-form-textarea {
    resize: vertical;
    min-height: 80px;
}

.form-group {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #222;
}

.luxury-submit-btn {
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #8774e1 0%, #6b5dd3 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.luxury-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(135, 116, 225, 0.3);
}

/* ========================================
   FAVORITES MODAL (Full-screen overlay)
   ======================================== */
.favorites-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.favorites-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.favorites-modal-content {
    position: relative;
    z-index: 2;
    background: white;
    border-radius: 16px;
    max-width: 1200px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.favorites-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f0f0f0;
}

.favorites-modal-header h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    color: #1A1A1A;
}

.favorites-close-btn {
    background: none;
    border: none;
    font-size: 32px;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.favorites-close-btn:hover {
    background: #f0f0f0;
    color: #333;
}

.favorites-modal-body {
    min-height: 200px;
}

/* ========================================
   PROPERTY DETAIL MODAL
   ======================================== */
.property-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
}

.property-detail-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 2001;
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
}

.property-detail-modal-container {
    position: relative;
    z-index: 2002;
    width: 100%;
    max-width: 900px;
}

#propertyDetailContent {
    width: 100%;
    max-width: 900px;
    position: relative;
}

/* Guest Picker Popover */
.guest-picker-popover {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.popover-content {
    background: white;
    border-radius: 16px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    position: relative;
}

.popover-close-x {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    color: #717171;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    padding: 0;
    line-height: 1;
}

.popover-close-x:hover {
    background: #f0f0f0;
    color: #222;
}

.popover-content h4 {
    margin-bottom: 20px;
    color: var(--color-text);
    padding-right: 40px; /* Make room for close button */
}

.guest-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
}

.guest-row:last-of-type {
    border-bottom: none;
}

.guest-label strong {
    display: block;
    color: var(--color-text);
    font-weight: 600;
}

.guest-sublabel {
    font-size: 0.85rem;
    color: var(--color-text-light);
}

.stepper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stepper-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: white;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    color: var(--color-text);
}

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

.stepper-value {
    min-width: 24px;
    text-align: center;
    font-weight: 600;
}

.pets-toggles {
    display: flex;
    gap: 8px;
}

.pet-toggle {
    padding: 8px 12px;
    border: 2px solid var(--color-border);
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.pet-toggle.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.pet-toggle:hover:not(.active) {
    border-color: var(--color-primary);
}

.popover-close-btn {
    width: 100%;
    padding: 12px 24px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
    font-family: var(--font-body);
    transition: background 0.3s;
}

.popover-close-btn:hover {
    background: var(--color-primary-hover);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .panel-content {
        grid-template-columns: 300px 1fr;
    }
}

@media (max-width: 992px) {
    .panel-content {
        grid-template-columns: 1fr;
    }

    .filters-column {
        position: static;
    }

    .property-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .main-panel {
        margin: 4px; /* Reduced from 8px for maximum screen space */
        border-radius: 12px;
        /* FIX: iOS Safari vw bug - use width: 100% instead of 100vw to avoid horizontal overflow */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box; /* Ensure padding/border included in width */
    }

    /* MOBILE HEADER OPTIMIZATION - Compact single-row layout */
    .panel-header {
        flex-direction: row; /* Changed from column - keep logo and actions in one row */
        flex-wrap: nowrap; /* Prevent wrapping */
        gap: 8px; /* Reduced from 16px */
        align-items: center;
        padding: 6px 12px; /* Reduced from 8px 16px - more compact */
        min-height: auto; /* Remove fixed height */
    }

    /* Logo section - more compact */
    .logo-section {
        flex: 0 0 auto; /* Don't grow or shrink */
        order: 1; /* First item */
        gap: 2px; /* Reduced from 4px */
    }
    
    .burger-menu-toggle {
        display: flex; /* Show burger on mobile */
        flex: 0 0 auto; /* Don't grow or shrink */
        order: 2; /* Second item - right after logo */
    }

    .logo-main {
        gap: 8px; /* Reduced spacing between logo and text */
    }

    .logo {
        width: 32px; /* Reduced from 40px */
        height: 32px;
        border-radius: 50%; /* Circle logo on mobile */
    }

    .brand-name {
        font-size: 1rem; /* Reduced from 1.2rem */
    }

    .logo-slogan {
        font-size: 0.65rem; /* Smaller on mobile */
        margin-left: 0;
        letter-spacing: 0.05em;
    }

    /* MOBILE HEADER ACTIONS - Hide direct children, only show inside burger menu */
    .panel-header > .burger-menu-container > .header-actions {
        display: none !important; /* Hide header actions on mobile - they appear in burger menu instead */
    }

    /* Header actions inside burger menu dropdown should be visible when menu is open */
    .burger-menu-container.open .header-actions {
        display: flex !important; /* Show inside burger menu */
        flex-direction: column !important;
        width: 100%;
        gap: 8px;
    }

    /* Buttons inside burger menu on mobile - full width with text */
    .burger-menu-container .header-btn,
    .burger-menu-container .telegram-btn {
        display: flex !important;
        width: 100%;
        padding: 12px 16px;
        font-size: 1rem; /* Show text */
        justify-content: center;
        gap: 8px;
    }

    .burger-menu-container .header-btn i,
    .burger-menu-container .telegram-btn i {
        font-size: 1rem;
    }

    /* Favorites badge inside burger menu */
    .burger-menu-container .favorites-badge {
        position: static;
        margin-left: 8px;
        width: auto;
        height: auto;
        font-size: 0.85rem;
    }

    /* MOBILE FILTERS SECTION - Ultra compact to save screen space */
    .filters-column {
        padding: 8px 10px;
        max-height: none;
        overflow-y: visible;
        width: 100%; /* Ensure full width */
        box-sizing: border-box; /* Include padding in width */
    }

    .filters-title {
        font-size: 0.9rem;
        margin-bottom: 4px;
    }

    .filter-group {
        margin-bottom: 4px;
        width: 100%; /* Ensure full width */
        box-sizing: border-box; /* Include padding in width */
    }

    .filter-label {
        font-size: 0.75rem;
        margin-bottom: 2px;
    }

    .filter-select {
        padding: 4px 8px;
        font-size: 0.8rem;
        width: 100%; /* Full width on mobile */
        box-sizing: border-box;
    }

    .guest-picker-btn {
        padding: 4px 8px;
        font-size: 0.8rem;
        width: 100%; /* Full width on mobile */
        box-sizing: border-box;
    }

    /* Date inputs - full width on mobile */
    .date-input {
        width: 100% !important;
        box-sizing: border-box;
    }

    .date-input-wrapper {
        width: 100%;
        box-sizing: border-box;
    }

    /* Quick date buttons - compact on mobile */
    .quick-date-buttons {
        gap: 3px;
        width: 100%;
        box-sizing: border-box;
    }

    .quick-date-btn {
        padding: 4px 6px;
        font-size: 0.7rem;
        flex: 1; /* Equal width buttons */
    }

    /* Date flexibility buttons - compact on mobile */
    .date-flexibility-buttons {
        gap: 3px;
        width: 100%;
        box-sizing: border-box;
    }

    .date-flexibility-btn {
        padding: 4px 6px;
        font-size: 0.7rem;
        flex: 1; /* Equal width buttons */
    }

    /* Budget inputs - smaller */
    .budget-input {
        padding: 4px 8px;
        font-size: 0.8rem;
        width: 100%;
        box-sizing: border-box;
    }

    /* Find button - compact but tappable */
    .find-btn {
        margin-top: 6px;
        padding: 8px 12px;
        font-size: 0.85rem;
        width: 100%;
        position: static; /* Remove sticky positioning on mobile to fix z-index stacking */
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }

    /* Panel content - adjust layout for mobile */
    .panel-content {
        flex-direction: column; /* Stack filters above results */
        gap: 0; /* Remove gap */
    }

    /* MOBILE RESULTS SECTION - Compact and efficient */
    .results-column {
        min-height: auto; /* Remove fixed height */
        margin-top: 8px; /* Tight spacing from filters */
    }

    .scrollable-content {
        max-height: none; /* Remove max-height to allow natural scrolling */
        min-height: calc(100vh - 200px); /* Show at least 3 cards */
        padding-right: 4px; /* Reduced scrollbar space */
        padding-bottom: 20px; /* Add space before footer */
    }

    .property-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 12px; /* Comfortable spacing between cards */
        padding: 0 12px; /* Add horizontal padding/margins */
        min-width: auto; /* Remove min-width constraint */
    }

    .property-card {
        max-width: 100%; /* Ensure cards don't overflow */
        margin: 0 auto 12px; /* Center cards with bottom margin */
    }

    .property-card-image {
        height: 200px; /* Compact image height */
    }

    .property-card-content {
        padding: 8px; /* Reduced from default */
    }

    .property-card-title {
        font-size: 0.9rem; /* Smaller title */
        margin-bottom: 4px; /* Tight spacing */
    }

    .property-card-location {
        font-size: 0.75rem; /* Smaller location text */
        margin-bottom: 4px; /* Tight spacing */
    }

    .property-card-price {
        font-size: 0.95rem; /* Smaller price */
        margin-bottom: 6px; /* Tight spacing */
    }

    .property-card-details {
        font-size: 0.75rem; /* Smaller details */
        gap: 6px; /* Tight spacing */
    }

    .property-type-tabs {
        gap: 4px;
        flex: none; /* Don't flex on mobile */
    }

    .tab-btn {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 8px; /* Compact spacing below header */
    }

    .sort-wrapper {
        width: 100%; /* Full width on mobile */
    }

    .sort-selector {
        width: 100%; /* Full width on mobile */
    }

    /* Hide desktop results count on mobile */
    .filters-results-count {
        display: none;
    }

    .results-info h3 {
        font-size: 0.9rem; /* Smaller results title */
    }

    /* Navigation tabs - compact on mobile */
    .nav-tabs {
        padding: 6px 8px; /* Compact padding */
        gap: 4px; /* Tight gap */
    }

    .nav-tab {
        padding: 6px 10px; /* Compact tab buttons */
        font-size: 0.8rem; /* Smaller text */
    }

    /* MOBILE: Full-screen detail modal - no padding/margins */
    .property-detail-modal-overlay {
        padding: 0 !important;
        align-items: stretch;
    }

    .property-detail-modal-container {
        max-width: 100%;
    }

    #propertyDetailContent {
        max-width: 100%;
    }

    /* MOBILE: Detail modal content - full width, no border radius */
    .detail-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
        min-height: 100vh;
    }

    /* MOBILE: Bigger CTA buttons for better touch targets */
    .detail-modal-content .btn-secondary,
    .detail-modal-content .btn-tertiary {
        height: 56px !important;
        min-height: 56px !important;
        font-size: 16px !important;
        padding: 16px 20px !important;
    }

    .detail-modal-content .btn-reserve-big {
        height: 60px !important;
        min-height: 60px !important;
        font-size: 18px !important;
        padding: 16px 20px !important;
    }

    /* MOBILE: Favorites modal - full screen */
    .favorites-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        padding: 16px !important;
    }

    .favorites-modal-header h2 {
        font-size: 22px !important;
    }

    .favorites-close-btn {
        font-size: 28px !important;
    }
}

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

.property-card-icons {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    z-index: 15;
}

.card-icon-btn {
    width: 36px;
    height: 36px;
    background: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}

.card-icon-btn:hover {
    transform: scale(1.1);
}

.card-icon-btn i {
    color: var(--color-primary);
    font-size: 1rem;
}

.card-icon-btn.favorited i {
    font-weight: 900;
}

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

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

.pagination-btn {
    min-width: 40px;
    height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    background: white;
    color: var(--color-text);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

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

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

.pagination-btn.active:hover {
    background: var(--color-primary-hover);
}

.pagination-ellipsis {
    padding: 0 8px;
    color: var(--color-text-light);
    font-size: 1.2rem;
}

/* Responsive Pagination */
@media (max-width: 768px) {
    .pagination-btn {
        min-width: 36px;
        height: 36px;
        padding: 6px 12px;
        font-size: 0.9rem;
    }

    .pagination {
        gap: 6px;
    }
}

/* Duplicate section removed - using styles from lines 700-787 */

/* Site Footer - MINIMALIST DESIGN (Clean, visible, single-line) */
.site-footer-minimalist {
    background: #ffffff; /* Clean white background */
    border-top: 2px solid #e0e0e0; /* Slightly thicker border for definition */
    padding: 0; /* No padding - handled by inner div */
    min-height: auto; /* Auto height - just enough for content */
    display: block !important;
    width: 100% !important;
    grid-column: 1 / -1 !important;
}

/* Mobile Footer - Stack vertically */
@media (max-width: 768px) {
    .site-footer-minimalist > div {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
        padding: 12px 16px !important;
    }

    .site-footer-minimalist a,
    .site-footer-minimalist p {
        font-size: 0.8rem !important; /* Readable size on mobile */
    }
}

/* ========================================
   FLOATING SCROLL-TO-TOP BUTTON (Mobile Only)
   ======================================== */

/* Scroll-to-Top Button - Mirrors chatbox widget design but on LEFT side */
.scroll-to-top-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Match brand gradient */
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 9998; /* Just below chatbox widget (9999) */
    opacity: 0;
    transform: scale(0.8);
}

/* Show button when scrolled */
.scroll-to-top-btn.show {
    display: flex;
    opacity: 1;
    transform: scale(1);
}

/* Hover effect */
.scroll-to-top-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Icon styling */
.scroll-to-top-btn i {
    font-size: 24px;
    color: white;
}

/* Desktop: Hide button (mobile only) */
@media (min-width: 769px) {
    .scroll-to-top-btn {
        display: none !important;
    }
}

/* Confirmation Modal (Success/Error Messages) */
.confirmation-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirmation-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.confirmation-modal-content {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 40px 32px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: confirmationSlideIn 0.3s ease-out;
}

@keyframes confirmationSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.confirmation-icon {
    font-size: 64px;
    margin-bottom: 20px;
    color: #10b981;
}

.confirmation-modal-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #1A1A1A;
}

.confirmation-modal-content p {
    font-size: 1rem;
    color: #717171;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.confirmation-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.confirmation-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.confirmation-btn:active {
    transform: translateY(0);
}

/* ========================================
   LUXURY SETTINGS MODAL
   ======================================== */
.luxury-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.luxury-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.luxury-modal-content {
    position: relative;
    background: var(--bg-white);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-2xl);
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.luxury-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid var(--border-hairline);
}

.luxury-modal-header h3 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin: 0;
}

.luxury-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: var(--transition-smooth);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.luxury-modal-close:hover {
    background: var(--bg-alabaster);
    color: var(--text-primary);
}

.luxury-modal-body {
    padding: 32px;
}

.settings-section {
    margin-bottom: 32px;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section h4 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-section h4 i {
    color: var(--accent-gold);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.setting-option {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: #333; /* Dark text for readability */
}

.setting-option:hover {
    border-color: #C5B358; /* Gold */
    background: #f9f9f7; /* Light alabaster */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #222; /* Dark text on hover */
}

.setting-option.active {
    border-color: #C5B358; /* Gold */
    background: #C5B358; /* Gold background */
    color: white; /* White text on gold background */
}

.setting-option span:first-child {
    font-size: 1.5rem;
}

.settings-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Toast Notifications */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10000;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s ease;
    max-width: 350px;
}

.toast-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-notification.toast-error {
    border-left: 4px solid #e74c3c;
}

.toast-notification.toast-success {
    border-left: 4px solid #27ae60;
}

.toast-notification.toast-info {
    border-left: 4px solid #3498db;
}

.toast-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.toast-message {
    font-size: 0.9rem;
    color: #2c3e50;
    line-height: 1.4;
}

/* Flatpickr Close Button - BOTTOM RIGHT */
.flatpickr-close-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: none;
    background: #f0f0f0;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    color: #666;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.flatpickr-close-btn:hover {
    background: #e0e0e0;
    color: #333;
    transform: scale(1.1);
}

.flatpickr-close-btn:active {
    transform: scale(0.95);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .settings-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .luxury-modal-content {
        max-width: 95%;
    }

    .luxury-modal-header {
        padding: 20px;
    }

    .luxury-modal-body {
        padding: 20px;
    }
}