/**
 * GetYourGuide Style Gallery CSS with Swiper.js
 * Version: 5.0.0
 * Professional implementation with Swiper lightbox
 */

/* Main Gallery Wrapper */
.gyg-gallery-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

/* Gallery Container - ONLY place with border-radius */
.gyg-gallery-container {
    display: flex;
    gap: 3px;
    width: 100%;
    height: 500px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
}

/* Remove all border-radius from images */
.gyg-gallery-container img {
    border-radius: 0 !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: none;
    transform: none !important;
}

/* No hover effects on images */
.gyg-gallery-container img:hover {
    transform: none !important;
    filter: none !important;
}

/* Single Image Layout */
.gyg-single-image {
    width: 100%;
    height: 100%;
}

.gyg-single-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Main Image (Left 50%) */
.gyg-main-image {
    flex: 0 0 calc(50% - 1.5px);
    height: 100%;
    position: relative;
}

/* Thumbnails Grid (Right 50%) */
.gyg-thumbnails-grid {
    flex: 0 0 calc(50% - 1.5px);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 3px;
    height: 100%;
}

.gyg-thumbnails-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Last Thumbnail Container */
.gyg-last-thumb-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gyg-last-thumb-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gradient overlay for better button visibility */
.gyg-last-thumb-container::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 150px;
    height: 100px;
    background: linear-gradient(135deg, 
                transparent 0%, 
                rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Buttons Overlay Container */
.gyg-buttons-overlay {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 0px;
    z-index: 2;
}

/* Glassmorphism Effect for Both Buttons */
.gyg-glassmorphism {
    /* Glass effect */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* Shadow for depth */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
                0 1px 3px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    
    /* Basic button styles */
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    font-family: inherit;
}

/* Hover effect */
.gyg-glassmorphism:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15),
                0 2px 4px rgba(0, 0, 0, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Active/Click effect */
.gyg-glassmorphism:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
                inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Icons in buttons */
.gyg-glassmorphism svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Specific styles for video button */
.gyg-video-btn.gyg-glassmorphism {
    background: rgba(255, 0, 0, 0.2); /* Slight red tint for video */
    border-color: rgba(255, 100, 100, 0.3);
}

.gyg-video-btn.gyg-glassmorphism:hover {
    background: rgba(255, 0, 0, 0.3);
    border-color: rgba(255, 100, 100, 0.4);
}

/* Specific styles for more photos button */
.gyg-more-btn.gyg-glassmorphism {
    background: rgba(0, 0, 0, 0.3); /* Darker for contrast */
    border-color: rgba(255, 255, 255, 0.2);
}

.gyg-more-btn.gyg-glassmorphism:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(10px)) {
    .gyg-glassmorphism {
        background: rgba(0, 0, 0, 0.75) !important;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .gyg-video-btn.gyg-glassmorphism {
        background: rgba(139, 0, 0, 0.85) !important;
    }
    
    .gyg-more-btn.gyg-glassmorphism {
        background: rgba(0, 0, 0, 0.85) !important;
    }
}

/* Mobile buttons overlay - hidden by default on desktop */
.gyg-mobile-buttons-overlay {
    display: none;
}

/* Sale Badge Position */
.gyg-gallery-wrapper .badge-container,
.gyg-gallery-wrapper .badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
}

/* ===== SWIPER LIGHTBOX STYLES ===== */

/* Lightbox Modal */
.gyg-lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(21, 21, 21, 0.9);
    backdrop-filter: blur(13px);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Prevent body scroll when lightbox open */
body.lightbox-open,
body.video-open {
    overflow: hidden;
}

/* Universal close button style - Both buttons same design */
.gyg-lightbox-close,
.gyg-video-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.gyg-lightbox-close:hover,
.gyg-video-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
    border-color: rgba(255, 255, 255, 0.5);
}

/* SVG icon size - consistent for both */
.gyg-lightbox-close svg,
.gyg-video-close svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

/* Counter */
.gyg-lightbox-counter {
    position: absolute;
    top: 20px;
    left: 20px;
    color: white;
    font-size: 16px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 500;
}

/* Main Swiper Container */
.gyg-lightbox-main {
    flex: 1;
    width: 100%;
    padding: 60px 20px 20px;
    position: relative;
}

.gyg-lightbox-main .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.gyg-lightbox-main img {
    max-width: 100%;
    max-height: calc(100vh - 240px);
    width: auto;
    height: auto;
    object-fit: contain;
    user-select: none;
    display: block;
    border-radius: 8px;
    box-shadow: 0px 1px 1px rgba(3, 7, 18, 0.10),
    1px 3px 3px rgba(3, 7, 18, 0.08),
    3px 6px 6px rgba(3, 7, 18, 0.06),
    5px 10px 10px rgba(3, 7, 18, 0.04),
    8px 16px 16px rgba(3, 7, 18, 0.02);

}

/* Image caption with Glassmorphism effect */
.gyg-caption {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    
    /* Glassmorphism effect */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* Shadow for depth */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
                0 4px 16px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    
    /* Text and layout */
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    max-width: 80%;
    text-align: center;
    
    /* Subtle animation */
    transition: all 0.3s ease;
    
    /* Ensure text readability */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Hover effect for caption */
.gyg-caption:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15),
                0 6px 20px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(10px)) {
    .gyg-caption {
        background: rgba(0, 0, 0, 0.85) !important;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
}

/* Navigation arrows */
.gyg-lightbox-main .swiper-button-prev,
.gyg-lightbox-main .swiper-button-next {
    color: white;
    background: rgba(0, 0, 0, 0.3);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.gyg-lightbox-main .swiper-button-prev:hover,
.gyg-lightbox-main .swiper-button-next:hover {
    background: rgba(0, 0, 0, 0.5);
}

.gyg-lightbox-main .swiper-button-prev:after,
.gyg-lightbox-main .swiper-button-next:after {
    font-size: 20px;
    font-weight: bold;
}

/* Thumbnails Swiper */
.gyg-lightbox-thumbs {
    height: 100px;
    padding: 0 20px 20px;
}

.gyg-lightbox-thumbs .swiper-slide {
    opacity: 0.4;
    transition: opacity 0.3s;
    cursor: pointer;
    height: 80px;
    width: auto !important;
}

.gyg-lightbox-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid white;
    border-radius: 10px;
    box-sizing: border-box;
}

.gyg-lightbox-thumbs img {
    border-radius: 8px;
    height: 100%;
    width: auto;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

/* Zoom container */
.swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Video Modal */
.gyg-video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
    transition: opacity 0.3s ease;
}

.gyg-video-container {
    width: 90%;
    max-width: 1200px;
    aspect-ratio: 16/9;
    position: relative;
}

.gyg-video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Video close button now uses shared styles above */

/* Scrollbar styles for JS-generated thumbnails */
#gyg-thumbnails::-webkit-scrollbar {
    height: 5px;
}

#gyg-thumbnails::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

#gyg-thumbnails::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

#gyg-thumbnails::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .gyg-gallery-container {
        height: 400px;
    }
    
    /* Fix for buttons on tablet */
    .gyg-last-thumb-container {
        position: relative;
    }
    
    .gyg-buttons-overlay {
        bottom: 6px;
        right: 6px;
        gap: 4px;
    }
    
    .gyg-glassmorphism {
        padding: 5px 10px;
        font-size: 12px;
    }
    
    .gyg-glassmorphism svg {
        width: 14px;
        height: 14px;
    }
    
    .gyg-lightbox-main {
        padding: 60px 15px 15px;
    }
    
    .gyg-lightbox-main img {
        max-height: calc(100vh - 220px);
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .gyg-lightbox-main {
        padding: 60px 10px 10px;
    }
    
    .gyg-lightbox-main .swiper-button-prev,
    .gyg-lightbox-main .swiper-button-next {
        width: 40px;
        height: 40px;
    }
    
    .gyg-lightbox-main .swiper-button-prev:after,
    .gyg-lightbox-main .swiper-button-next:after {
        font-size: 16px;
    }
    
    .gyg-lightbox-thumbs {
        height: 80px;
        padding: 0 10px 10px;
    }
    
    .gyg-lightbox-thumbs .swiper-slide {
        height: 60px;
    }
    
    .gyg-lightbox-counter {
        font-size: 14px;
        padding: 6px 12px;
    }
    
    .gyg-video-container {
        width: 95%;
    }
    
}

/* Mobile Landscape and Tablet */
@media (min-width: 576px) and (max-width: 767px) {
    .gyg-gallery-container {
        flex-direction: column;
        height: auto;
        gap: 2px;
    }
    
    /* Main image with 16:9 aspect ratio */
    .gyg-main-image {
        width: 100%;
        aspect-ratio: 16/9;
        height: auto;
        position: relative; /* For buttons positioning */
    }
    
    .gyg-main-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .gyg-thumbnails-grid {
        width: 100%;
        height: 120px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
        gap: 2px;
    }
    
    /* Ensure last thumb container works in grid */
    .gyg-last-thumb-container {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    /* Hide desktop buttons on this breakpoint too */
    .gyg-thumbnails-grid .gyg-buttons-overlay {
        display: none !important;
    }
    
    /* Show mobile buttons on main image */
    .gyg-mobile-buttons-overlay {
        display: flex;
        position: absolute;
        bottom: 8px;
        right: 8px;
        flex-direction: column;
        gap: 4px;
        z-index: 2;
    }
    
    /* Add gradient for button visibility */
    .gyg-main-image::before {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 150px;
        height: 100px;
        background: linear-gradient(135deg, 
                    transparent 0%, 
                    rgba(0, 0, 0, 0.3) 100%);
        pointer-events: none;
        z-index: 1;
    }
    
    .gyg-mobile-buttons-overlay .gyg-glassmorphism {
        padding: 5px 10px;
        font-size: 12px;
    }
    
    .gyg-mobile-buttons-overlay .gyg-glassmorphism svg {
        width: 13px;
        height: 13px;
    }
}

/* Mobile Portrait with 16:9 aspect ratio */
@media (max-width: 575px) {
    .gyg-gallery-container {
        height: auto;
        gap: 2px;
        flex-direction: column;
    }
    
    /* Main image with 16:9 aspect ratio on mobile */
    .gyg-main-image {
        width: 100%;
        aspect-ratio: 16/9;
        height: auto;
        overflow: hidden;
        position: relative; /* For buttons positioning */
    }
    
    .gyg-main-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .gyg-thumbnails-grid {
        width: 100%;
        height: 80px;
        overflow-x: auto;
        display: flex;
        gap: 2px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    
    .gyg-thumbnails-grid img,
    .gyg-thumbnails-grid .gyg-last-thumb,
    .gyg-thumbnails-grid .gyg-thumb-with-video,
    .gyg-thumbnails-grid .gyg-last-thumb-container {
        flex: 0 0 80px;
        height: 80px;
        scroll-snap-align: start;
        position: relative;
    }
    
    /* Fix container for mobile flex layout */
    .gyg-last-thumb-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Hide desktop buttons on mobile */
    .gyg-thumbnails-grid .gyg-buttons-overlay {
        display: none !important;
    }
    
    /* Show mobile buttons overlay on main image */
    .gyg-mobile-buttons-overlay {
        display: flex;
        position: absolute;
        bottom: 8px;
        right: 8px;
        flex-direction: column;
        gap: 4px;
        z-index: 2;
    }
    
    /* Add gradient to main image for better button visibility */
    .gyg-main-image::before {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 150px;
        height: 100px;
        background: linear-gradient(135deg, 
                    transparent 0%, 
                    rgba(0, 0, 0, 0.4) 100%);
        pointer-events: none;
        z-index: 1;
    }
    
    /* Mobile button styles */
    .gyg-mobile-buttons-overlay .gyg-glassmorphism {
        padding: 5px 10px;
        font-size: 11px;
        border-radius: 4px;
    }
    
    .gyg-mobile-buttons-overlay .gyg-glassmorphism svg {
        width: 12px;
        height: 12px;
    }
    
    /* Lightbox mobile adjustments */
    .gyg-lightbox-main img {
        max-height: calc(100vh - 200px);
    }
}

/* Hide scrollbar on mobile */
@media (max-width: 575px) {
    .gyg-thumbnails-grid::-webkit-scrollbar {
        display: none;
    }
    
    .gyg-thumbnails-grid {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

/* Loading State */
.gyg-gallery-container.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Accessibility */
.gyg-gallery-container img:focus,
.gyg-more-btn:focus,
.gyg-video-btn:focus,
.gyg-lightbox-close:focus,
.gyg-video-close:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .gyg-thumbnails-grid,
    .gyg-more-btn,
    .gyg-video-btn,
    .gyg-lightbox-modal,
    .gyg-video-modal {
        display: none !important;
    }
    
    .gyg-main-image {
        flex: 0 0 100%;
    }
    
    .gyg-gallery-container {
        border-radius: 0;
    }
}