/* Custom CSS to make gallery scrollable on mobile without click */
@media (max-width: 768px) {
    /* Hide the click trigger on mobile */
    .property-banner-trigger {
        display: none !important;
    }
    
    /* Target the tab-pane container for gallery */
    .tab-pane#pills-gallery {
        position: relative;
        overflow: hidden;
    }
    
    /* Make the mobile gallery container scrollable */
    .mobile-gallery-scroll {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        height: 60vh !important;
        min-height: 300px !important;
        width: 100% !important;
        position: relative !important;
        white-space: nowrap !important;
    }
    
    /* Make sure the container can scroll */
    .mobile-gallery-scroll {
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Style individual gallery images */
    .mobile-gallery-scroll img {
        flex: 0 0 100vw !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
        object-fit: cover !important;
        height: 100% !important;
        width: 100vw !important;
        display: block !important;
    }
    
    /* Hide the original gallery structure on mobile */
    .gallery-hidden {
        display: none !important;
    }
    
    /* Hide the original featured image on mobile when we have mobile gallery */
    .tab-pane#pills-gallery .property-featured-image {
        display: none !important;
    }
    
    /* Hide the old gallery structure completely on mobile */
    .tab-pane#pills-gallery [itemscope] {
        display: none !important;
    }
    
    /* Hide the old gallery trigger on mobile */
    .tab-pane#pills-gallery .property-banner-trigger {
        display: none !important;
    }
    
    /* Hide the old featured image that appears below everything */
    .tab-pane#pills-gallery img.property-featured-image {
        display: none !important;
    }
    
    /* Hide any remaining old gallery elements */
    .tab-pane#pills-gallery .gallery-hidden {
        display: none !important;
    }
    
    /* Ensure the mobile gallery container is properly positioned */
    .mobile-gallery-scroll {
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Override any conflicting styles */
    .mobile-gallery-scroll * {
        box-sizing: border-box !important;
    }
    
    /* Style the mobile popup gallery button - small and inconspicuous */
    .mobile-gallery-popup-btn {
        padding: 5px;
        background: transparent;
        margin: 5px;
        text-align: center;
    }
    
    .mobile-gallery-popup-btn .btn {
        width: auto;
        padding: 4px 8px;
        font-size: 11px;
        font-weight: 400;
        border-radius: 3px;
        border: 1px solid #ccc;
        background: rgba(255, 255, 255, 0.8);
        color: #666;
        transition: all 0.2s ease;
        display: inline-block;
    }
    
    .mobile-gallery-popup-btn .btn:hover {
        background: rgba(240, 240, 240, 0.9);
        color: #333;
        border-color: #999;
    }
    
    .mobile-gallery-popup-btn .btn:active {
        background: rgba(220, 220, 220, 0.9);
    }
    
    .mobile-gallery-popup-btn .btn i {
        font-size: 10px;
        margin-right: 3px;
    }
    
    /* Add scroll indicators */
    .mobile-gallery-scroll::-webkit-scrollbar {
        height: 4px;
    }
    
    .mobile-gallery-scroll::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.1);
    }
    
    .mobile-gallery-scroll::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.3);
        border-radius: 2px;
    }
    
    /* Add visual indicators for scrolling */
    .mobile-gallery-scroll::after {
        content: "Swipe →";
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.7);
        color: white;
        padding: 5px 10px;
        border-radius: 15px;
        font-size: 12px;
        z-index: 10;
        pointer-events: none;
    }
}