/* Additional styles for apartment page */
        .hero-carousel {
            position: relative;
            height: 100vh; /* Default height for desktop */
            overflow: hidden;
        }
        
        .hero-slide {
            position: absolute; /* Stack slides */
            top: 0;
            left: 0;
            width: 100%; /* Ensure full width */
            height: 100vh; /* Default height for desktop */
            background-size: cover;
            background-position: center;
            opacity: 0; /* Hide slides by default */
            transition: opacity 0.7s ease-in-out; /* Add fade transition */
        }
        
        .hero-slide.active {
            opacity: 1; /* Show active slide */
        }
        
        .hero-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.4), transparent);
            padding: 2rem;
            color: white;
        }
        
        .hero-overlay h1 {
            color: white;
            font-size: 3rem;
            margin-bottom: 0.5rem;
        }
        
        .hero-overlay .price {
            font-size: 1.2rem;
            font-weight: 500;
            margin-top: 15px;
        }
        
        .cta-button {
            /* Remove positioning from default rules */
            z-index: 10;
            display: block; /* Make container display block */
        }
        
        .cta-button .btn-primary {
             /* Hide mobile button by default */
            display: none;
        }
        
        .metrics-scroller {
            display: flex;
            overflow-x: auto;
            padding: 1rem 0;
            margin: 2rem 0;
            scrollbar-width: none;
        }
        
        .metrics-scroller::-webkit-scrollbar {
            display: none;
        }
        
        .metric-card {
            flex: 0 0 auto;
            width: 150px;
            margin-right: 1rem;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            padding: 1.5rem 1rem;
            text-align: center;
            position: relative;
        }
        
        .metric-card i {
            font-size: 2rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }
        
        .badge {
            position: absolute;
            top: -10px;
            right: -10px;
            background: var(--secondary-color);
            color: white;
            font-size: 0.7rem;
            padding: 0.3rem 0.6rem;
            border-radius: 20px;
            font-weight: 600;
        }
        
        /* Accordion Enhancements */
        .accordion {
            margin: 3rem 0; /* Increase top/bottom margin */
            border: none; /* Remove main accordion border if any */
        }
        
        .accordion-item {
            border: none; /* Remove individual item borders */
            border-radius: 8px; /* Slightly larger radius */
            margin-bottom: 1rem;
            overflow: hidden; /* Keep this */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Use shadow for separation */
            transition: box-shadow 0.3s ease;
        }
        
        .accordion-item:last-child {
            margin-bottom: 0;
        }
                
        .accordion-header {
            background: var(--light-color); /* Lighter background */
            padding: 1rem 1.5rem; /* Increase padding slightly */
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border-color); /* Add a subtle line when closed */
            transition: background-color 0.3s ease, border-color 0.3s ease;
        }

        /* Remove border when item is open */
        .accordion-item.active .accordion-header {
             border-bottom-color: transparent;
        }
        
        .accordion-header:hover {
            background-color: #f8f8f8; /* Subtle hover */
        }
        
        .accordion-header h3 {
            margin: 0;
            font-size: 1.1rem; /* Slightly smaller, adjust as needed */
            font-weight: 500; /* Medium weight */
            color: var(--dark-color);
            font-family: var(--body-font); /* Change font to Poppins */
        }
        
        /* Style the down arrow icon */
        .accordion-header i {
            font-size: 0.9rem;
            color: var(--primary-color);
            transition: transform 0.3s ease; /* Add transition for rotation */
        }
        
        /* Rotate icon when active */
        .accordion-item.active .accordion-header i {
            transform: rotate(180deg);
        }
        
        .accordion-content {
            padding: 0 1.5rem; /* Match header horizontal padding, but vertical padding applied when active */
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother transition, include padding */
            background-color: var(--light-color); /* Ensure background matches */
            border-top: none; /* Ensure no top border */
        }
        
        .accordion-content.active {
            padding: 1.5rem; /* Apply padding when active */
            max-height: 1000px; /* Keep large max-height */
             border-top: 1px solid var(--border-color); /* Add separator line when open */
        }
        
        /* Optional: Style content lists/paragraphs */
        .accordion-content ul {
            list-style-type: none;
            padding-left: 5px; /* Adjust list padding */
            margin-bottom: 0;
        }
        .accordion-content ul li {
             padding: 0.4rem 0;
             border-bottom: none; /* Remove internal borders if they exist */
             font-size: 0.95rem;
        }
        .accordion-content ul li:last-child {
            border-bottom: none;
        }
        .accordion-content p {
            margin-bottom: 1rem;
            font-size: 0.95rem;
            line-height: 1.6;
        }
        .accordion-content p:last-child {
            margin-bottom: 0;
        }
        
        .gallery-masonry {
            column-count: 2;
            column-gap: 1rem;
            margin: 2rem 0;
        }
        
        .gallery-item {
            break-inside: avoid;
            margin-bottom: 1rem;
            position: relative;
            overflow: hidden;
            border-radius: 5px;
        }
        
        .gallery-item img {
            width: 100%;
            display: block;
            transition: transform 0.3s ease;
        }
        
        .gallery-item:hover img {
            transform: scale(1.05);
        }
        
        .amenities-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin: 2rem 0;
        }
        
        .amenity-card {
            display: flex;
            align-items: center;
            background: #f9f9f9;
            padding: 1rem;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .amenity-card i {
            font-size: 1.5rem;
            color: var(--primary-color);
            margin-right: 1rem;
        }
        
        .calendar-widget {
            margin: 2rem 0;
        }

        .booking-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1000;
            display: none;
        }
        
        .booking-bar.active {
            display: flex;
        }
        
        .map-section {
            margin: 2rem 0;
        }
        
        .map-container {
            height: 300px;
            background: #f9f9f9;
            border-radius: 5px;
            margin-bottom: 1rem;
            position: relative;
            overflow: hidden;
        }
        
        .poi-scroller {
            display: flex;
            overflow-x: auto;
            padding: 1rem 0;
            scrollbar-width: none;
        }
        
        .poi-scroller::-webkit-scrollbar {
            display: none;
        }
        
        .poi-card {
            flex: 0 0 auto;
            width: 200px;
            margin-right: 1rem;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            padding: 1rem;
        }
        
        .poi-card h4 {
            margin: 0.5rem 0;
            font-size: 1rem;
        }
        
        .poi-card p {
            margin: 0;
            color: var(--text-color);
            font-size: 0.9rem;
        }
        
        .back-to-top-fab {
            position: fixed;
            bottom: 80px;
            right: 20px;
            width: 50px;
            height: 50px;
            background: var(--primary-color);
            color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .back-to-top-fab.active {
            opacity: 1;
            visibility: visible;
        }

        /* Hero Availability Checker - Hidden by default */
        .hero-availability-checker {
            display: none;
        }

        @media (max-width: 768px) {
            .hero-carousel {
                height: 75vh; /* Height for mobile */
            }

            .hero-slide {
                height: 75vh; /* Height for mobile */
            }
            
            .hero-overlay h1 {
                font-size: 2rem;
            }
            
            /* Add more bottom padding to overlay on mobile for the button */
            .hero-overlay {
                padding-bottom: 2.5rem; 
            }

            .amenities-grid {
                grid-template-columns: 1fr;
            }
            
            .compact-footer {
                flex-wrap: wrap;
            }
            
            .compact-footer a {
                width: 33.33%;
                margin-bottom: 1rem;
            }

            .booking-section {
                padding-top: 40px; /* Override default section padding */
                padding-bottom: 40px; /* Override default section padding */
            }

            /* Adjust layout for smaller screens */
            .booking-container {
                flex-direction: column;
            }

            .booking-form,
            .booking-info {
                width: 100%;
                margin-bottom: 30px; /* Add spacing between form and info on mobile */
            }

            .booking-info {
                display: none; /* Hide booking info section on mobile */
            }

            .form-row-dates {
                flex-direction: column;
            }

            /* Show ONLY the .btn-primary inside .cta-button on mobile */
             .cta-button {
                 /* Styles for mobile positioning */
                 position: absolute;
                 bottom: 2rem; /* Align with overlay padding */
                 right: 2rem;  /* Align right, match overlay padding */
                 /* Remove left/transform from previous centering */
             }
            .cta-button .btn-primary {
                display: inline-block; /* Show mobile button */
                /* Make button smaller */
                padding: 0.6rem 1.2rem; /* Adjust padding */
                font-size: 0.9rem;    /* Adjust font size */
            }
             .hero-availability-checker {
                 display: none !important; /* Explicitly hide checker on mobile */
             }
        }

        /* Show Hero Availability Checker only on Desktop */
        @media (min-width: 769px) {
            /* Style changes for desktop */
            .metrics-scroller {
                 justify-content: center; /* Center the cards */
                 overflow-x: hidden; /* Prevent horizontal scroll on desktop */
             }
            
             /* Re-introduce margin if needed for spacing when centered */
              .metric-card {
                  margin-left: 0.5rem;
                  margin-right: 0.5rem;
              }

            .cta-button { 
                /* Adjust desktop positioning/layout - relative to hero overlay? */
                /* Example: Position it below the title/price */
                 position: static; /* Reset absolute positioning */
                 transform: none; /* Reset transform */
                 margin-top: 20px; /* Add some space */
                 text-align: center; /* Center the checker */
                 /* display: block; already set */
            }
             .cta-button .btn-primary {
                 /* Keep mobile button hidden on desktop */
                 display: none !important;
             }
            .hero-availability-checker {
                /* Remove the display: flex !important to hide it on desktop */
                /* display: flex !important; */ /* Show checker, !important to override default */
                align-items: center;
                gap: 0.5rem;
                background: rgba(255, 255, 255, 0.95);
                padding: 0.75rem 1rem;
                border-radius: 8px;
                box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            }
            .hero-availability-checker input {
                 padding: 0.6rem;
                 border: 1px solid #ddd;
                 border-radius: 5px;
                 font-size: 0.9rem;
                 width: 120px; /* Adjust as needed */
            }
             .hero-availability-checker button {
                 padding: 0.6rem 1rem;
                 font-size: 0.9rem;
                 white-space: nowrap;
             }
        }

/* Mobile-specific styles for gallery CTA */
@media (max-width: 767px) {
    #load-more-images {
        margin-bottom: 30px; /* Add space above the button on mobile */
    }
}