/**
 * Woo Image Viewer – Lightbox Frontend CSS
 *
 * Design moderne, responsive et accessible.
 * Toutes les couleurs dynamiques sont appliquées via JS (inline styles).
 *
 * @package WooImageViewer
 * @author  ICT
 * @version 1.0.0
 */

/* ==========================================================================
   Variables CSS
   ========================================================================== */

:root {
    --wiv-z-index:          100000;
    --wiv-transition-dur:   0.3s;
    --wiv-transition-ease:  cubic-bezier(0.4, 0, 0.2, 1);
    --wiv-border-radius:    12px;
    --wiv-btn-size:         48px;
    --wiv-btn-size-mobile:  40px;
    --wiv-shadow:           0 25px 60px rgba(0, 0, 0, 0.5);
    --wiv-max-img-width:    90vw;
    --wiv-max-img-height:   85vh;
}

/* ==========================================================================
   Verrouillage du scroll body
   ========================================================================== */

body.wiv-body-lock {
    overflow: hidden;
}

/* ==========================================================================
   Lightbox – Conteneur racine
   ========================================================================== */

#wiv-lightbox {
    position:        fixed;
    inset:           0;                      /* top/right/bottom/left: 0 */
    z-index:         var(--wiv-z-index);
    display:         flex;
    align-items:     center;
    justify-content: center;
    pointer-events:  none;

    /* État caché par défaut */
    opacity:    0;
    visibility: hidden;
}

/* État ouvert */
#wiv-lightbox.wiv-is-open {
    pointer-events: auto;
    opacity:        1;
    visibility:     visible;
    transition:
        opacity    var(--wiv-transition-dur) var(--wiv-transition-ease),
        visibility var(--wiv-transition-dur) var(--wiv-transition-ease);
}

/* Animation de fermeture */
#wiv-lightbox.wiv-is-closing {
    opacity:    0;
    visibility: hidden;
    transition:
        opacity    var(--wiv-transition-dur) var(--wiv-transition-ease),
        visibility var(--wiv-transition-dur) var(--wiv-transition-ease);
}

/* ==========================================================================
   Overlay (fond sombre)
   ========================================================================== */

#wiv-overlay {
    position: absolute;
    inset:    0;
    /* La couleur de fond est appliquée dynamiquement par JS */
    cursor: zoom-out;
    transition: background-color var(--wiv-transition-dur) var(--wiv-transition-ease);
}

/* ==========================================================================
   Conteneur principal (par-dessus l'overlay)
   ========================================================================== */

#wiv-container {
    position:        relative;
    z-index:         1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    max-width:       var(--wiv-max-img-width);
    max-height:      var(--wiv-max-img-height);

    /* Animation d'entrée : scale depuis 0.92 → 1 */
    transform:  scale(0.92);
    transition: transform var(--wiv-transition-dur) var(--wiv-transition-ease);
}

#wiv-lightbox.wiv-is-open #wiv-container {
    transform: scale(1);
}

#wiv-lightbox.wiv-is-closing #wiv-container {
    transform: scale(0.92);
}

/* ==========================================================================
   Zone image
   ========================================================================== */

#wiv-image-wrapper {
    position:       relative;
    display:        flex;
    align-items:    center;
    justify-content:center;
    border-radius:  var(--wiv-border-radius);
    overflow:       hidden;
    box-shadow:     var(--wiv-shadow);
    background:     #111;          /* Fond pendant le chargement */
    min-width:      60px;
    min-height:     60px;
}

/* Indicateur de chargement (spinner CSS) */
#wiv-container.wiv-loading #wiv-image-wrapper::after {
    content:       '';
    position:      absolute;
    width:         36px;
    height:        36px;
    border:        3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation:     wiv-spin 0.75s linear infinite;
}

@keyframes wiv-spin {
    to { transform: rotate(360deg); }
}

/* Image principale */
#wiv-image {
    display:    block;
    max-width:  var(--wiv-max-img-width);
    max-height: var(--wiv-max-img-height);
    width:      auto;
    height:     auto;
    object-fit: contain;
    border-radius: var(--wiv-border-radius);

    /* Fondu à l'apparition */
    opacity:    0;
    transition: opacity 0.25s ease;
}

#wiv-image.wiv-image--loaded {
    opacity: 1;
}

/* ==========================================================================
   Boutons communs (Fermer, Prev, Next)
   ========================================================================== */

#wiv-lightbox button {
    position:        absolute;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           var(--wiv-btn-size);
    height:          var(--wiv-btn-size);
    padding:         0;
    border:          2px solid rgba(255, 255, 255, 0.25);
    border-radius:   50%;
    background:      rgba(0, 0, 0, 0.4);
    /* La couleur est appliquée dynamiquement par JS */
    cursor:          pointer;
    outline:         none;
    transition:
        background  0.2s ease,
        border-color 0.2s ease,
        transform   0.15s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#wiv-lightbox button:hover,
#wiv-lightbox button:focus-visible {
    background:    rgba(0, 0, 0, 0.65);
    border-color:  rgba(255, 255, 255, 0.5);
    transform:     scale(1.1);
    outline:       2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

#wiv-lightbox button:active {
    transform: scale(0.96);
}

#wiv-lightbox button svg {
    width:          22px;
    height:         22px;
    flex-shrink:    0;
    pointer-events: none;
}

/* ==========================================================================
   Bouton Fermer (coin supérieur droit)
   ========================================================================== */

#wiv-close {
    top:   -20px;
    right: -20px;
    z-index: 2;
}

/* ==========================================================================
   Boutons de navigation (précédent / suivant)
   ========================================================================== */

#wiv-prev,
#wiv-next {
    top:       50%;
    transform: translateY(-50%);
    z-index:   2;
}

#wiv-prev {
    left: -28px;
}

#wiv-next {
    right: -28px;
}

#wiv-prev:hover,
#wiv-prev:focus-visible {
    transform: translateY(-50%) scale(1.1);
}

#wiv-next:hover,
#wiv-next:focus-visible {
    transform: translateY(-50%) scale(1.1);
}

/* ==========================================================================
   Compteur (ex : 2 / 5)
   ========================================================================== */

#wiv-counter {
    position:    absolute;
    bottom:      -36px;
    left:        50%;
    transform:   translateX(-50%);
    font-size:   13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
    /* La couleur est appliquée dynamiquement par JS */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Curseur "zoom in" sur les images de la galerie
   ========================================================================== */

.woocommerce-product-gallery__image a,
.woocommerce-product-gallery__image img {
    cursor: zoom-in;
}

/* ==========================================================================
   Responsive – Tablettes et mobiles
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --wiv-max-img-width:  95vw;
        --wiv-max-img-height: 80vh;
        --wiv-btn-size:       var(--wiv-btn-size-mobile);
    }

    #wiv-close {
        top:   -16px;
        right: -12px;
    }

    #wiv-prev {
        left: -14px;
    }

    #wiv-next {
        right: -14px;
    }

    #wiv-counter {
        bottom:    -30px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    :root {
        --wiv-max-img-width:  98vw;
        --wiv-max-img-height: 75vh;
    }

    /* Sur très petit écran, mettre les boutons nav en bas */
    #wiv-prev,
    #wiv-next {
        top:       auto;
        bottom:    -56px;
        transform: none;
    }

    #wiv-prev {
        left:  20%;
    }

    #wiv-next {
        right: 20%;
        left:  auto;
    }

    #wiv-prev:hover,
    #wiv-prev:focus-visible,
    #wiv-next:hover,
    #wiv-next:focus-visible {
        transform: scale(1.1);
    }

    #wiv-counter {
        bottom: -90px;
    }
}

/* ==========================================================================
   Reduced motion – Respecter les préférences d'accessibilité
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    #wiv-lightbox,
    #wiv-lightbox.wiv-is-open,
    #wiv-lightbox.wiv-is-closing,
    #wiv-container,
    #wiv-image,
    #wiv-lightbox button {
        transition: none !important;
        animation:  none !important;
    }
}