/**
 * SHOP BJ - Pastilles de couleurs CSS
 * Styles pour les pastilles de couleurs dans la page produit et l'administration
 */

/* Conteneur de pastille de couleur */
.color-swatch {
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
    border: 1px solid #ddd;
}

/* Définition des couleurs spécifiques */
.color-swatch-noir { background-color: #000000; }
.color-swatch-blanc { background-color: #ffffff; }
.color-swatch-rouge { background-color: #ff0000; }
.color-swatch-bleu { background-color: #0000ff; }
.color-swatch-vert { background-color: #008000; }
.color-swatch-jaune { background-color: #ffff00; }
.color-swatch-orange { background-color: #ffa500; }
.color-swatch-violet { background-color: #800080; }
.color-swatch-rose { background-color: #ffc0cb; }
.color-swatch-marron { background-color: #8b4513; }
.color-swatch-chocolat { background-color: #d2691e; }
.color-swatch-or { background-color: #ffd700; }
.color-swatch-argent { background-color: #c0c0c0; }
.color-swatch-bronze { background-color: #cd7f32; }
.color-swatch-doré { background-color: #d4af37; }
.color-swatch-gris { background-color: #808080; }
.color-swatch-beige { background-color: #f5f5dc; }
.color-swatch-ivoire { background-color: #fffff0; }
.color-swatch-turquoise { background-color: #40e0d0; }
.color-swatch-bordeaux { background-color: #800020; }

/* Styles pour le formulaire d'administration des produits */
.admin-color-swatch {
    width: 18px;
    height: 18px;
    display: inline-block;
    border-radius: 3px;
    margin-right: 5px;
    vertical-align: middle;
    border: 1px solid #ddd;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Style spécifique pour le formulaire d'administration */
.colors-checkboxes .form-check-label {
    display: flex;
    align-items: center;
}

.colors-checkboxes .color-checkbox:checked + label .admin-color-swatch {
    border: 2px solid #333;
    box-shadow: 0 0 0 1px #fff, 0 0 0 2px #0d6efd;
}

/* Styles pour les pastilles de couleur dans les boutons */
.btn-color-swatch {
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

/* Ajustement pour les couleurs claires */
.color-swatch-blanc, .color-swatch-beige, .color-swatch-ivoire {
    border: 1px solid #ccc;
}

/* Style pour la pastille sélectionnée */
.color-option:checked + label .btn-color-swatch {
    border: 2px solid #000;
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px #007bff;
}