/**
 * Reviews Image Modal Slider CSS
 * Slider container, slides, images, thumbnails, reviewer info
 * 
 * Split from image-modal.css
 */

/* Container principal pentru slider-ul modal */
.modal-image-container {
    flex: 1;
    position: relative;
    min-height: 400px;
    height: 66vh;
    overflow: hidden;
    /* Optimizări pentru touch și drag similar cu galeria produsului */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
    contain: layout size style;
}

/* Wrapper pentru slide-uri similar cu galeria produsului */
.modal-slider-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    /* Optimizări pentru drag smooth */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Slide individual în modal */
.modal-slide {
    min-width: 100%;
    width: 100%;
    height: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.modal-slide img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Optimizări pentru drag pe mobile */
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-select: none;
    display: block;
    box-sizing: border-box;
    object-position: center;
}

/* Container pentru galeria de thumbnails */
.modal-thumbnails {
    display: flex;
    padding: 10px 15px;
    background: white;
    border-bottom: 1px solid #e0e0e0;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    flex: 0 0 auto;
    align-items: center;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
}

.modal-thumbnails::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.modal-thumbnail-item {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.modal-thumbnail-item.active {
    border-color: #590202;
}

.modal-thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-info {
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    background: #f9f9f9;
}

.modal-reviewer-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.modal-author {
    font-weight: 600;
    color: #333;
}

.modal-rating {
    display: flex;
    gap: 3px;
}

.modal-title {
    font-size: 1rem;
    color: #590202;
    font-weight: 500;
}

/* =====================================================================
   RESPONSIVE - Image Modal Slider
   ===================================================================== */

@media (min-width: 768px) {
    /* Thumbnail-uri vizibile pe desktop */
    .modal-thumbnails {
        display: flex;
        height: 80px;
        flex: 0 0 80px;
        overflow-x: auto;
        overflow-y: hidden;
        cursor: grab;
    }
    
    .modal-thumbnails:active {
        cursor: grabbing;
    }
    
    /* Info vizibil pe desktop */
    .modal-info {
        display: block;
        flex: 0 0 auto;
    }
    
    /* Ajustare înălțime container imagine pentru a face loc thumbnail-urilor și info-ului */
    .modal-image-container {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }
}

@media (max-width: 768px) {
    .modal-image-container {
        /* Înălțime deterministă pentru calcul corect al % în flex pe iOS */
        flex: 1 1 auto;
        height: 66vh;
        height: 66dvh;
        min-height: 200px;
        max-height: 66vh;
        overflow: hidden;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: pan-y;
        contain: layout size style;
    }
    
    /* Aliniază vertical slide-ul în container dacă este mai mic decât containerul */
    .modal-slider-wrapper {
        align-items: center;
        /* Forțează potrivirea exactă pe container pentru iOS */
        position: absolute;
        top: 25px;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        min-height: 0;
    }

    .modal-slide {
        width: 100%;
        height: 100%;
        min-height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex-shrink: 0;
        overflow: hidden;
    }
    
    .modal-slide img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        object-position: center;
        display: block;
        margin: 0 auto;
        /* Forțează centrarea pe iOS Safari */
        position: relative;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    
    .modal-thumbnails {
        display: flex;
        padding: 10px 15px;
        background: white;
        border-bottom: 1px solid #e0e0e0;
        overflow-x: auto;
        overflow-y: hidden; /* IMPORTANT: Previne scroll-ul vertical */
        gap: 10px;
        height: 80px; /* Înălțime fixă - folosită în calcul pentru imagine */
        flex: 0 0 80px; /* Dimensiune fixă exactă */
        align-items: center;
        scroll-behavior: smooth;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
        -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
        /* Previne mișcarea verticală pe touch */
        touch-action: pan-x pinch-zoom;
        /* Fixează poziția verticală */
        position: relative;
        flex-shrink: 0;
    }
    
    /* Ascunde scrollbar-ul pe WebKit (Safari, Chrome) */
    .modal-thumbnails::-webkit-scrollbar {
        display: none;
        height: 0;
        width: 0;
    }
    
    /* Fixează thumbnails-urile individuale */
    .modal-thumbnails .modal-thumbnail {
        flex-shrink: 0;
        height: 60px;
        width: 60px;
        /* Previne mișcarea verticală */
        touch-action: none;
        position: relative;
    }
    
    .modal-info {
        padding: 15px;
        background: white;
        border-top: 1px solid #e0e0e0;
        flex: 0 0 auto; /* Se adaptează la conținut */
        min-height: 80px; /* Minim pentru a fi vizibil */
        max-height: 120px; /* Maxim pentru a nu ocupa prea mult */
        overflow-y: auto; /* Scroll dacă conținutul e prea mare */
    }
    
    /* Corectare pentru Safari iOS */
    @supports (-webkit-touch-callout: none) {
        .modal-image-container {
            height: 66vh; /* fallback iOS mai vechi */
            height: 66dvh; /* iOS modern */
            max-height: 66dvh;
        }
    }
}

/* Corectii specifice pentru iOS/iPhone */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        .modal-image-container {
            /* iOS: Folosește flex în loc de calcule complexe */
            -webkit-box-flex: 1;
            -webkit-flex: 1 1 auto;
            flex: 1 1 auto;
            min-height: 250px;
            /* Folosește unități dinamice pentru viewport pe iOS moderne */
            max-height: calc(-webkit-fill-available - 200px);
            max-height: calc(100dvh - 200px);
            overflow: hidden;
        }
        
        .modal-thumbnails {
            /* Asigură că thumbnails-urile sunt fixe pe iOS */
            -webkit-box-flex: 0;
            -webkit-flex: 0 0 80px;
            flex: 0 0 80px;
        }
        
        .modal-info {
            /* Asigură că info-ul este vizibil pe iOS */
            -webkit-box-flex: 0;
            -webkit-flex: 0 0 auto;
            flex: 0 0 auto;
            min-height: 80px;
        }
    }
}