:root {
    --primary-color: #0d6efd; /* Example Primary Blue */
    --success-color: #198754; /* Example Success Green */
    --danger-color: #dc3545; /* Example Danger Red */
    --whatsapp-color: #25D366;
    --gray-text: #6c757d;
    --dark-text: #212529;
}
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f8f9fa;
    color: var(--dark-text);
    display: flex; /* For sticky footer */
    flex-direction: column; /* For sticky footer */
    min-height: 100vh; /* For sticky footer */
}
main {
     flex-grow: 1; /* Allow main content to grow for sticky footer */
}
.swiper-container-hero {
    width: 100%;
    height: 70vh; /* Taller height for images */
    max-height: 80vh; /* Higher max height for fullscreen effect */
    background-color: #e9ecef; /* Placeholder background */
    margin-top: 0;
    position: relative;
    z-index: 1;
}
@media (min-width: 768px) {
    .swiper-container-hero {
        height: 75vh;
        max-height: 800px;
        border-radius: 0.5rem;
        overflow: hidden;
        margin-top: 0.5rem;
    }
}
.swiper-slide img, .swiper-slide picture img {
    display: block; width: 100%; height: 100%; object-fit: cover;
}
.swiper-button-next, .swiper-button-prev {
    color: white; background-color: rgba(0, 0, 0, 0.4); border-radius: 50%;
    width: 44px; height: 44px; transition: background-color 0.3s ease;
    --swiper-navigation-size: 22px;
}
.swiper-button-next:hover, .swiper-button-prev:hover { background-color: rgba(0, 0, 0, 0.6); }
.swiper-pagination-bullet-active { background: #ffffff; opacity: 1; }
.swiper-pagination-bullet { background: #ffffff; opacity: 0.7; }
.swiper-pagination { padding-top: 30px; }
.caption { 
    bottom: 35px !important; 
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
}
.feature-icon { color: var(--primary-color); flex-shrink: 0; width: 1.25rem; text-align: center; }
.section-padding { padding-top: 1.5rem; padding-bottom: 1.5rem; }
@media (min-width: 1024px) { .section-padding { padding-top: 2rem; padding-bottom: 2rem; } }
.agent-card { background-color: #ffffff; border-radius: 0.5rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07); border: 1px solid #dee2e6; }
.agent-photo { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid #e9ecef; }
.sticky-contact-mobile { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-color: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    padding: 0.85rem 1.25rem; 
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.08); 
    z-index: 100; 
    display: flex; 
    gap: 1rem; 
    border-top: 1px solid rgba(235, 235, 235, 0.8);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    /* Ensure it's visible by default on mobile */
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    will-change: transform, opacity;
}

/* Remove partial state - no longer needed */
.sticky-contact-mobile button, 
.sticky-contact-mobile a { 
    flex: 1; 
    padding: 0.9rem 0.75rem; 
    font-size: 0.875rem; 
    font-weight: 600; 
    border-radius: 0.5rem; 
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transform: translateY(0);
}

.sticky-contact-mobile a:active {
    transform: translateY(2px);
}

.sticky-contact-mobile .btn-call { 
    background-color: #2563eb;
    background-image: linear-gradient(135deg, #3b82f6, #1d4ed8);
}
.sticky-contact-mobile .btn-call:hover { 
    background-color: #1d4ed8;
    background-image: linear-gradient(135deg, #2563eb, #1e40af);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.sticky-contact-mobile .btn-whatsapp { 
    background-color: #10b981;
    background-image: linear-gradient(135deg, #34d399, #059669);
}
.sticky-contact-mobile .btn-whatsapp:hover { 
    background-color: #059669;
    background-image: linear-gradient(135deg, #10b981, #047857);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.sticky-contact-mobile .btn-email { 
    background-color: #4b5563;
    background-image: linear-gradient(135deg, #6b7280, #374151);
}
.sticky-contact-mobile .btn-email:hover { 
    background-color: #374151;
    background-image: linear-gradient(135deg, #4b5563, #1f2937);
    box-shadow: 0 4px 12px rgba(75, 85, 99, 0.2);
}
/* Mobile optimizations */
@media (max-width: 640px) {
    .breadcrumb {
        font-size: 0.7rem;
    }
    .breadcrumb .fas {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }
    /* We don't need extra padding since the bar appears on scroll */
    footer {
        margin-bottom: 10px;
    }
}

/* Adjustments for desktop/mobile responsiveness */
@media (min-width: 1024px) {
    /* Hide mobile contact bar on desktop */
    .sticky-contact-mobile {
        display: none !important;
    }
    
    /* Ensure desktop contact sidebar is visible */
    #contact-desktop {
        display: block !important;
    }
}

/* Desktop contact buttons styling */
.desktop-buttons a.bg-\[var\(--primary-color\)\] {
    background-color: #0d6efd; /* Explicit setting for desktop view */
}

.desktop-buttons a.bg-\[var\(--whatsapp-color\)\] {
    background-color: #25D366; /* Explicit setting for desktop view */
}

.desktop-buttons a.bg-gray-600 {
    background-color: #4b5563; /* Explicit setting for desktop view */
}

/* Make desktop sidebar properly responsive */
@media (max-width: 1023px) {
    /* Show the agent info part on mobile, but modified */
    .agent-card {
        padding: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* We're now showing desktop contact buttons on mobile too but styling them differently */
    .agent-card .desktop-buttons {
        margin-top: 1rem;
        display: block !important;
    }
    
    /* Reduce spacing */
    .agent-card .space-y-4 {
        margin-top: 0 !important;
    }
}
.action-button { transition: all 0.2s ease; }
.action-button:hover { transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.breadcrumb a { color: var(--primary-color); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { color: var(--gray-text); }
.prose a { color: var(--primary-color); }
.prose a:hover { text-decoration: underline; }

/* Improved responsive typography for property descriptions */
.prose {
    font-size: 0.95rem;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .prose {
        font-size: 1rem;
        line-height: 1.7;
    }
}

@media (min-width: 1024px) {
    .prose {
        font-size: 1.05rem;
        line-height: 1.75;
        max-width: 100%; /* Override max-width for better utilization of space */
    }
}

/* Add detailed features styling */
#property-features {
    scroll-margin-top: 80px; /* For anchor links */
}

/* Responsive tables for property features */
.feature-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.feature-table th, .feature-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.feature-table th {
    background-color: #f3f4f6;
    font-weight: 500;
    font-size: 0.875rem;
}

.feature-table td {
    border-top: 1px solid #e5e7eb;
}

/* Features list style */
.features-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.features-list li i {
    color: var(--success-color);
    margin-right: 0.5rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* Mobile-specific styles */
@media (max-width: 640px) {
    .feature-section {
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .feature-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .feature-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (min-width: 1280px) {
    .prose {
        font-size: 1.1rem;
        line-height: 1.8;
    }
}
#map { height: 300px; width: 100%; border-radius: 0.5rem; background-color: #e9ecef; position: relative; }
@media (min-width: 768px) { #map { height: 400px; } }
#map .map-loading-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-color: rgba(233, 236, 239, 0.8); z-index: 1; transition: opacity 0.3s ease-out; }
#map .map-loading-overlay.hidden { opacity: 0; pointer-events: none; }
.mapboxgl-popup-content { font-family: 'Poppins', sans-serif; padding: 10px 15px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.mapboxgl-popup-close-button { font-size: 1.2rem; padding: 2px 5px; }
.custom-marker { cursor: pointer; }
.landmark-marker { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex="0"]:focus-visible {
    outline: 3px solid var(--primary-color); outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25); border-radius: 2px;
}
.swiper-button-next:focus-visible, .swiper-button-prev:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); background-color: rgba(0, 0, 0, 0.7);
}

/* ========================================
   RELATED PROPERTIES SECTION (SEO-Optimized)
   ======================================== */

#related-properties {
    scroll-margin-top: 80px; /* For anchor links */
    contain: layout style; /* Performance optimization */
}

/* Related property cards */
.related-property-card {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, box-shadow;
    height: 100%; /* Ensure consistent card heights in grid */
}

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

/* Image hover effect */
.related-property-card .group:hover img {
    transform: scale(1.05);
}

/* Line clamp for title overflow */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.5em; /* Reserve space for 2 lines */
}

/* Responsive grid adjustments */
@media (max-width: 640px) {
    #related-properties {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Single column on mobile */
    #related-properties .grid {
        gap: 1rem;
    }

    /* Make cards more compact on mobile */
    .related-property-card .p-3 {
        padding: 0.75rem;
    }
}

@media (min-width: 641px) and (max-width: 1023px) {
    /* 2 columns on tablet */
    #related-properties .grid {
        gap: 1.25rem;
    }
}

@media (min-width: 1024px) {
    /* 3 columns on desktop */
    #related-properties .grid {
        gap: 1.5rem;
    }
}

@media (min-width: 1280px) {
    /* 4 columns on large desktop */
    #related-properties .grid {
        gap: 1.5rem;
    }
}

/* Badge animations */
.related-property-card span[class*="absolute"] {
    transition: transform 0.2s ease;
}

.related-property-card:hover span[class*="absolute"] {
    transform: scale(1.05);
}

/* CTA button hover state */
.related-property-card a[class*="bg-blue-600"]:hover {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
}

.related-property-card a[class*="bg-blue-600"]:active {
    transform: translateY(0);
}

/* Ensure consistent aspect ratio for images */
.related-property-card [style*="aspect-ratio"] {
    background-color: #e5e7eb; /* Fallback while loading */
}

/* Icon spacing in stats */
.related-property-card .flex.items-center i {
    flex-shrink: 0;
}

/* Smooth loading transition for images */
.related-property-card img {
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.related-property-card img[loading="lazy"] {
    opacity: 1;
}

/* Price emphasis */
.related-property-card .text-green-600 {
    color: var(--success-color);
    font-weight: 700;
}

/* Footer link styling */
#related-properties a[href="/search"] {
    transition: all 0.2s ease;
}

#related-properties a[href="/search"]:hover {
    transform: translateX(4px);
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .related-property-card,
    .related-property-card img,
    .related-property-card a,
    .related-property-card span {
        transition: none;
    }

    .related-property-card:hover {
        transform: none;
    }

    .related-property-card .group:hover img {
        transform: none;
    }
}

/* Performance optimization: contain paint for each card */
.related-property-card {
    contain: layout paint;
}

/* Focus states for accessibility */
.related-property-card a:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 0.375rem;
}

/* Loading skeleton (optional future enhancement) */
.related-property-card.loading {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}