/* 
 * EHR Room Gallery Styles v1.0.2
 * Fixed: Grid Layout Visibility, Lightbox Close Button
 */

/* --- Gallery Grid Layouts --- */
/* --- Structural Wrappers --- */
.ehr-gallery-wrapper-main {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
}

.ehr-desktop-view {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Gallery Grid Layouts --- */
.ehr-gallery-grid-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    /* Safety height to prevent collapse if Elementor setting fails */
    min-height: 400px;
}

/* Force Grid Display */
.ehr-gallery-grid {
    display: grid;
    height: 100%;
    width: 100%;
}

/* Transitions for Grid Items */
.ehr-grid-item {
    position: relative;
    cursor: pointer;
    transition: filter 0.3s ease, transform 0.3s ease;

    /* Ensure visibility */
    display: block;
    width: 100%;
    height: 100%;
    opacity: 1;
    background-color: #f0f0f0;
    /* Fallback color */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.ehr-grid-item:hover {
    filter: brightness(0.9);
}

/* Standard Grid Fallback */
.ehr-gallery-standard-grid {
    width: 100%;
}

.ehr-standard-grid-item {
    width: 100%;
    margin-bottom: 0;
}

/* --- Floating Buttons (Show All / Play) --- */
.ehr-gallery-overlays {
    pointer-events: none;
    /* Let clicks pass through to grid */
}

.ehr-gallery-overlays .btn {
    pointer-events: auto;
    /* Re-enable pointer events for buttons */
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    transition: all 0.2s ease-in-out;
    text-decoration: none !important;
    /* Reset Elementor overrides if needed, but let user customize if they want */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0 !important;
    /* Prevent skewing on mobile */
    min-width: 50px;
    /* Ensure strictly enforced minimum size */
    min-height: 50px;
    aspect-ratio: 1 / 1;
    /* Force square aspect ratio */
}

/* Specific overrides for the "Show All" button which is pill-shaped */
.ehr-gallery-overlays .btn.ehr-open-gallery-btn {
    width: auto !important;
    aspect-ratio: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    border-radius: 50px !important;
}

.ehr-gallery-overlays .btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}


/* --- Lightbox Modal --- */
.ehr-lightbox-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.98) !important;
    z-index: 2147483647 !important;
    /* Max Z-Index */

    /* Flex Center */
    display: flex !important;
    align-items: center;
    justify-content: center;

    /* Animation State */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ehr-lightbox-modal.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Close Button */
.ehr-close-lightbox {
    position: absolute !important;
    top: 30px !important;
    right: 30px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    color: #fff !important;
    /* Size */
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 2147483648 !important;
    /* Above Modal */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: background 0.2s ease !important;
    padding: 0 !important;
}

.ehr-close-lightbox:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

.ehr-close-lightbox svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
}

/* Swiper Container */
.ehr-swiper-container {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Swiper Wrapper */
.ehr-swiper-container .swiper-wrapper {
    align-items: center !important;
    /* Ensure vertical centering */
    height: 100% !important;
}

/* Swiper Slides */
.ehr-swiper-container .swiper-slide {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0.4;
    transition: opacity 0.3s ease;
    background: transparent !important;
}

.ehr-swiper-container .swiper-slide-active {
    opacity: 1 !important;
}

.ehr-swiper-container .swiper-slide img {
    display: block !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5) !important;
    border-radius: 4px !important;
    user-select: none;
    margin: auto !important;
}

/* Navigation Buttons */
.ehr-swiper-container .swiper-button-prev,
.ehr-swiper-container .swiper-button-next {
    color: #fff !important;
    opacity: 0.7;
    transition: opacity 0.2s;
    width: 60px !important;
    height: 60px !important;
}

.ehr-swiper-container .swiper-button-prev:after,
.ehr-swiper-container .swiper-button-next:after {
    font-size: 30px !important;
    font-weight: bold;
}

.ehr-swiper-container .swiper-button-prev:hover,
.ehr-swiper-container .swiper-button-next:hover {
    opacity: 1;
}

/* Pagination */
.ehr-swiper-container .swiper-pagination {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 16px !important;
    bottom: 30px !important;
    font-weight: 500;
    letter-spacing: 1px;
}

.ehr-swiper-container .swiper-pagination-current {
    color: #fff !important;
    font-weight: 700;
}

/* --- Mobile Slider (Inline) --- */
.ehr-mobile-view {
    display: none;
    width: 100%;
    margin-bottom: 20px;
}

.ehr-mobile-gallery-swiper {
    width: 100%;
    position: relative;
    padding-bottom: 30px;
    /* Default logic, overridden by below mode */
}

/* Dots Overlay Mode: Sit on top of image at bottom */
.ehr-dots-overlay .swiper-pagination {
    bottom: 10px !important;
    position: absolute !important;
    z-index: 10;
}

/* Dots Below Mode: Sit outside */
.ehr-dots-below .swiper-pagination {
    position: relative !important;
    bottom: auto !important;
    margin-top: 10px !important;
}

.ehr-dots-below {
    padding-bottom: 0 !important;
}

/* Mobile Arrows */
.ehr-mobile-arrow {
    width: 40px !important;
    height: 40px !important;
    margin-top: 0 !important;
    /* Reset margin */
    z-index: 20 !important;
    /* Higher than dots */
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity 0.3s ease;
}

.swiper-button-disabled.ehr-mobile-arrow {
    opacity: 0.3 !important;
    pointer-events: none !important;
}

.swiper-button-next.ehr-mobile-arrow {
    right: 10px !important;
    left: auto !important;
}

.swiper-button-prev.ehr-mobile-arrow {
    left: 10px !important;
    right: auto !important;
}

.ehr-mobile-arrow:after {
    font-size: 20px !important;
    /* Default size, overridden by controls */
    font-weight: bold;
}

/* --- Responsive Behavior --- */
@media (max-width: 767px) {

    /* Show Mobile View, Hide Desktop */
    .ehr-desktop-view {
        display: none !important;
    }

    .ehr-mobile-view {
        display: block !important;
    }

    /* Mobile Hidden Buttons */
    .ehr-gallery-overlays.ehr-hide-on-mobile {
        display: none !important;
    }

    /* Adjust Floating Buttons if visible */
    .ehr-gallery-overlays {
        bottom: 10px !important;
        right: 10px !important;
    }

    .ehr-gallery-overlays .btn {
        height: 40px !important;
        padding: 0 16px !important;
    }

    .ehr-gallery-overlays .btn img,
    .ehr-gallery-overlays .btn i {
        width: 16px !important;
        font-size: 16px !important;
    }

    /* Mobile Slider Images */
    .ehr-mobile-slide-img {
        height: auto !important;
        aspect-ratio: 4/3;
        width: 100% !important;
    }
}

/* --- Amenities Widget Layouts --- */
.ehr-layout-grid .ehr-amenities-list {
    display: grid;
    width: 100%;
}

.ehr-layout-flex .ehr-amenities-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}