/* Slideshow Mobile Responsiveness */

/* Base slideshow styling */
#slideshow-modal {
    /* Ensure slideshow adapts to viewport height on mobile */
    height: 100vh !important;
    height: 100dvh !important;
    /* Dynamic viewport height for mobile browsers */
    cursor: none;
    /* Hide cursor when controls are hidden */
}

/* Show cursor when controls are visible */
#slideshow-modal:hover {
    cursor: default;
}

/* Auto-hide controls styling */
.slideshow-controls {
    transition: opacity 0.3s ease !important;
}

.slideshow-controls.slideshow-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Override any inline styles when hidden */
#slideshow-modal .slideshow-controls.slideshow-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Specific targeting for auto-hide */
#slideshow-header.slideshow-hidden,
#slideshow-bottom-controls.slideshow-hidden,
.slideshow-controls.slideshow-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Ensure visible state is maintained */
#slideshow-header:not(.slideshow-hidden),
#slideshow-bottom-controls:not(.slideshow-hidden),
.slideshow-controls:not(.slideshow-hidden) {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Image fitting improvements */
#slideshow-image {
    transition: opacity 0.3s ease-in-out !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Fullscreen button styling */
#slideshow-fullscreen-btn {
    transition: background-color 0.2s ease !important;
}

#slideshow-fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {

    /* Adjust slideshow header on mobile */
    #slideshow-modal div[style*="padding: 1rem"] {
        padding: 0.75rem !important;
    }

    #slideshow-modal h3 {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
    }

    #slideshow-modal p {
        font-size: 0.8rem !important;
    }

    /* Reduce navigation button size on mobile */
    #slideshow-prev-btn,
    #slideshow-next-btn {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.5rem !important;
        padding: 0.75rem !important;
    }

    /* Position navigation buttons closer to edges */
    #slideshow-modal div[style*="left: 2rem"] {
        left: 1rem !important;
    }

    #slideshow-modal div[style*="right: 2rem"] {
        right: 1rem !important;
    }

    /* Adjust slideshow controls on mobile */
    #slideshow-modal div[style*="padding: 2rem"] {
        padding: 1rem !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    /* Stack play/pause and interval controls vertically */
    #slideshow-play-pause-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
    }

    /* Interval selector styling on mobile */
    #slideshow-modal div[style*="display: flex; align-items: center; gap: 0.5rem; color: white;"] {
        width: 100% !important;
        justify-content: center !important;
    }

    #slideshow-interval {
        flex: 1 !important;
        max-width: 150px !important;
        padding: 0.75rem !important;
        text-align: center !important;
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {

    /* Extra small screens - further optimize slideshow */
    #slideshow-modal div[style*="padding: 1rem"],
    #slideshow-modal div[style*="padding: 0.75rem"] {
        padding: 0.5rem !important;
    }

    /* Smaller navigation buttons */
    #slideshow-prev-btn,
    #slideshow-next-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.2rem !important;
        padding: 0.5rem !important;
    }

    /* Position buttons even closer on small screens */
    #slideshow-modal div[style*="left: 1rem"] {
        left: 0.5rem !important;
    }

    #slideshow-modal div[style*="right: 1rem"] {
        right: 0.5rem !important;
    }

    /* Reduce header font sizes */
    #slideshow-modal h3 {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }

    #slideshow-modal p {
        font-size: 0.75rem !important;
    }

    /* Optimize controls for small screens */
    #slideshow-modal div[style*="padding: 1rem"] {
        padding: 0.75rem !important;
    }

    #slideshow-play-pause-btn {
        padding: 0.875rem 1.25rem !important;
        font-size: 0.9rem !important;
    }

    #slideshow-interval {
        padding: 0.625rem !important;
        font-size: 0.9rem !important;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {

    /* Optimize for landscape mode */
    #slideshow-modal div[style*="padding: 2rem"],
    #slideshow-modal div[style*="padding: 1rem"] {
        padding: 0.5rem !important;
    }

    /* Keep controls horizontal in landscape */
    #slideshow-modal div[style*="padding: 2rem"] {
        flex-direction: row !important;
        justify-content: center !important;
        gap: 1rem !important;
    }

    #slideshow-play-pause-btn {
        width: auto !important;
        min-width: 120px !important;
    }

    /* Smaller header in landscape */
    #slideshow-modal h3 {
        font-size: 1rem !important;
    }

    #slideshow-modal p {
        font-size: 0.75rem !important;
    }
}

/* Ensure proper touch targets on touch devices */
@media (hover: none) and (pointer: coarse) {

    #slideshow-play-pause-btn,
    #slideshow-prev-btn,
    #slideshow-next-btn,
    #slideshow-close-btn,
    #slideshow-fullscreen-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        touch-action: manipulation;
    }

    #slideshow-interval {
        min-height: 44px !important;
        touch-action: manipulation;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    #slideshow-modal {
        background: #000 !important;
    }

    #slideshow-prev-btn,
    #slideshow-next-btn,
    #slideshow-play-pause-btn,
    #slideshow-close-btn,
    #slideshow-fullscreen-btn {
        background: rgba(255, 255, 255, 0.9) !important;
        color: #000 !important;
        border: 2px solid #fff !important;
    }

    #slideshow-interval {
        background: rgba(255, 255, 255, 0.9) !important;
        color: #000 !important;
        border: 2px solid #fff !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    #slideshow-modal img {
        transition: none !important;
    }

    #slideshow-prev-btn,
    #slideshow-next-btn,
    #slideshow-play-pause-btn,
    #slideshow-close-btn,
    #slideshow-fullscreen-btn {
        transition: none !important;
    }
}

/* Focus styles for keyboard navigation */
#slideshow-prev-btn:focus,
#slideshow-next-btn:focus,
#slideshow-play-pause-btn:focus,
#slideshow-close-btn:focus,
#slideshow-fullscreen-btn:focus,
#slideshow-interval:focus {
    outline: 3px solid #007acc !important;
    outline-offset: 2px !important;
}

/* Image loading states */
#slideshow-image {
    transition: opacity 0.3s ease-in-out;
}

#slideshow-image:not([src]),
#slideshow-image[src=""] {
    opacity: 0;
}

/* Smooth transitions for controls */
#slideshow-prev-btn,
#slideshow-next-btn {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

#slideshow-prev-btn:hover,
#slideshow-next-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.05);
}

#slideshow-prev-btn:active,
#slideshow-next-btn:active {
    transform: scale(0.95);
}

/* Play/pause button animation */
#slideshow-play-pause-btn {
    transition: background-color 0.2s ease;
}

#slideshow-play-pause-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}