/* Safari-specific fixes using JavaScript detection */

/* ==========================================
   Video Container Aspect Ratio Fix
   ========================================== */
.safari:not(.chrome):not(.mobile-device) #video-container {
    /* Ensure aspect-ratio from game.css is respected (desktop Safari only) */
    height: auto !important;
    max-height: calc(100vh - 200px);
}

/* iOS Safari viewport units (desktop only) */
.safari.ios:not(.chrome):not(.mobile-device) #video-container {
    max-height: calc(100svh - 200px);
}

/* ==========================================
   Image Grid Layout Fix
   ========================================== */
/* Core fix: Use padding-bottom technique for stable aspect ratio in Safari */
.safari #image-grid {
    display: grid;
    grid-template-columns: calc(50% - 3px) calc(50% - 3px);
    gap: 6px;
    padding: 0;
}

.safari .image-item {
    position: relative !important;
    width: 100% !important;
    padding-bottom: 62.5% !important; /* 16:10 aspect ratio */
    height: 0 !important;
    overflow: hidden !important;
}

.safari .image-item img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Overlay and button positioning for padding-bottom technique */
.safari .image-item .image-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
}

.safari .image-item .remove-btn {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    z-index: 10 !important;
}

/* Disable transform on hover to prevent layout issues */
.safari .image-item:hover {
    transform: none !important;
    border-color: rgba(74, 105, 189, 0.6);
}

/* ==========================================
   Panel Expansion Layout Fix
   ========================================== */
/* Force recalculation when panel expands */
.safari #image-selector-panel:not(.collapsed) #image-grid {
    animation: safariGridFix 0.01s;
}

@keyframes safariGridFix {
    from { opacity: 0.999; }
    to { opacity: 1; }
}

/* Safari scrollbar styling */
.safari #image-grid-container::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}

/* ==========================================
   Spinner Animation Fix for Safari
   ========================================== */
/* Fix for all spinner elements in Safari */
.safari .spinner,
.safari .spinner-small,
.safari .loading-spinner,
.safari .image-loading-spinner,
.safari .video-player-spinner {
    -webkit-animation: spin 1s linear infinite !important;
    animation: spin 1s linear infinite !important;
}

/* Add webkit keyframes for Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}