/**
 * CDesigner — Colorisation des images par défaut
 * Fichier : views/css/stylesheets/cd-img-colorize.css
 *
 * Ce fichier gère l'affichage du color picker sur chaque image
 * par défaut dans la galerie du configurateur front.
 */

/* -------------------------------------------------------
   Conteneur du <li> — position relative pour l'icône
------------------------------------------------------- */
#cp-sel-Photos ul li.cd-def-img-wrap {
    position: relative;
    overflow: visible !important; /* laisser déborder le picker */
}

/* -------------------------------------------------------
   Bouton color picker — pastille colorée en bas à droite
------------------------------------------------------- */
.cd-img-colorpicker-wrap {
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 20;
    pointer-events: all;
}

.cd-img-colorpicker-wrap label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    margin: 0;
    padding: 0;
}

.cd-img-colorpicker-wrap label:hover {
    transform: scale(1.18);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* L'icône ● qui sert d'indicateur visuel */
.cd-colorpicker-icon {
    font-size: 13px;
    line-height: 1;
    color: #333;
    pointer-events: none;
    user-select: none;
}

/* Champ color natif caché derrière le label */
.cd-img-color-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    border: none;
    padding: 0;
}

/* -------------------------------------------------------
   Indicateur visuel : quand une couleur est sélectionnée,
   la pastille prend la couleur choisie
------------------------------------------------------- */
.cd-def-img-wrap[data-cd-color] .cd-colorpicker-icon {
    color: attr(data-cd-color); /* fallback CSS pur (support limité) */
}

/* Mise à jour dynamique via JS inline style sur l'icône */
.cd-def-img-wrap .cd-colorpicker-icon {
    transition: color 0.2s ease;
}

/* -------------------------------------------------------
   Tooltip au survol de la pastille
------------------------------------------------------- */
.cd-img-colorpicker-wrap::before {
    content: attr(title);
    position: absolute;
    bottom: 28px;
    right: 0;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 10px;
    white-space: nowrap;
    padding: 3px 6px;
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.cd-img-colorpicker-wrap:hover::before {
    opacity: 1;
}

/* -------------------------------------------------------
   Assurer que le clic sur le color picker ne déclenche
   pas le clic "ajouter l'image" du parent
------------------------------------------------------- */
.cd-img-colorpicker-wrap,
.cd-img-colorpicker-wrap * {
    pointer-events: all !important;
}