/* ========== Produit (Create / Update) — mini-CSS ========== */
:root{
  --p-accent: #0d6efd;        /* Bootstrap primary */
  --p-soft:   #f8f9fb;
  --p-soft-2: #f6f7fb;
  --p-border: #e8eaf0;
  --p-shadow: 0 6px 18px rgba(21,27,38,.06);
}

/* ---------- Cards ---------- */
#product-form .card,
#product-update-form .card{
  border: 1px solid var(--p-border);
  border-radius: 1rem;
  box-shadow: var(--p-shadow);
}

#product-form .card-header,
#product-update-form .card-header{
  border-bottom: 1px solid var(--p-border);
  background: linear-gradient(180deg, #fff, var(--p-soft));
  font-weight: 600;
  letter-spacing: .2px;
}

/* ---------- Titles ---------- */
#product-form .title,
#product-update-form .title {
  font-weight: 700;
  letter-spacing: .2px;
}

/* ---------- Form controls ---------- */
#product-form .form-control,
#product-update-form .form-control{
  border-radius: .65rem;
  transition: box-shadow .2s, border-color .2s;
}

#product-form .form-control:focus,
#product-update-form .form-control:focus{
  border-color: rgba(13,110,253,.35);
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.15);
}

#product-form .form-check-input,
#product-update-form .form-check-input{
  cursor: pointer;
}

/* ---------- CKEditor area (meilleure hauteur) ---------- */
.ck-editor__editable_inline{
  min-height: 220px;
  border-radius: .65rem !important;
}

/* ---------- Variations & Specs blocks ---------- */
.var-form-row,
.var-edit-row,
.spec-form-row,
.spec-edit-row{
  background: #fff;
  border: 1px dashed var(--p-border);
  border-radius: .9rem;
}

.var-form-row:hover,
.var-edit-row:hover,
.spec-form-row:hover,
.spec-edit-row:hover{
  background: var(--p-soft-2);
  border-color: rgba(13,110,253,.25);
}

/* Colonne "Supprimer" compacte */
.var-form-row .form-label,
.var-edit-row .form-label,
.spec-form-row .form-label,
.spec-edit-row .form-label{
  font-size: .85rem;
  color: #6c757d;
}

/* Boutons add */
#add-variation-btn,
#add-spec-btn{
  border-radius: 999px;
  padding: .35rem .8rem;
}

/* ---------- Image lists (create + update) ---------- */
#image-preview-list,
#image-list{
  gap: .5rem .75rem;
}

#image-preview-list li,
#image-list li{
  background: #fff;
  border: 1px solid var(--p-border);
  border-radius: .75rem !important;
  box-shadow: var(--p-shadow);
}

#image-list li .handle{
  font-size: 18px;
  color: #93a1b0;
}

#image-list li[draggable="true"]:active,
#image-preview-list li:active{
  opacity: .85;
  transform: scale(.995);
}

/* Mini vignettes (create) */
#image-preview-list li{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Help texts + errors */
.form-text{
  font-size: .85rem;
  color: #6b7280;
}

.invalid-feedback,
.text-danger{
  font-size: .875rem;
}

/* ---------- Buttons polish ---------- */
.btn{
  border-radius: .65rem;
}

.btn-primary{
  box-shadow: 0 6px 16px rgba(13,110,253,.18);
}

.btn-light{
  border: 1px solid var(--p-border);
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 576px){
  .var-form-row .row > [class*="col-"],
  .var-edit-row .row > [class*="col-"],
  .spec-form-row .row > [class*="col-"],
  .spec-edit-row .row > [class*="col-"]{
    margin-bottom: .5rem;
  }
}

/* ---------- Dark mode (optionnel, auto) ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --p-soft:   #0f1217;
    --p-soft-2: #0b0e13;
    --p-border: #1f2630;
    --p-shadow: 0 6px 18px rgba(0,0,0,.35);
  }
  #product-form .card,
  #product-update-form .card{
    background:#0b0e13;
    color:#e3e7ee;
  }
  #product-form .card-header,
  #product-update-form .card-header{
    background: #0f1217;
  }
  #image-preview-list li,
  #image-list li{
    background:#0f1217;
  }
  .form-text{ color:#a7b0bf; }
}

/* ============================================= */
/* == STYLES POUR L'AFFICHAGE DES ÉTOILES (RATING) == */
/* ============================================= */

/*
 * Cible toutes les icônes d'étoiles dans les conteneurs de notation
 * sur la page de détail, la page catalogue, etc.
 * et leur donne une couleur dorée par défaut.
 */
.product-rating .star-rating .fas,
.commenter-rating .fas,
.product-rating-category .rating-icon .fas {
    color: #ffb400; /* Jaune doré standard pour les avis */
}

/*
 * Cible spécifiquement les icônes d'étoiles VIDES (classe .far)
 * et leur donne une couleur grise pour montrer qu'elles ne sont pas remplies.
 * L'important est que cette règle soit plus spécifique ou vienne après
 * la règle générale pour l'emporter.
 */
.product-rating .star-rating .far,
.commenter-rating .far,
.product-rating-category .rating-icon .far {
    color: #d1d1d1; /* Un gris clair neutre */
}

/*
 * Gère le cas de la demi-étoile (fas fa-star-half-alt).
 * FontAwesome utilise un pseudo-élément ::before pour dessiner l'icône.
 * Par défaut, l'icône entière prendra la couleur dorée de la première règle.
 * Ce CSS n'est donc pas strictement nécessaire si la première règle fonctionne,
 * mais il est bon de le garder pour être explicite.
 */
.product-rating .star-rating .fa-star-half-alt,
.commenter-rating .fa-star-half-alt,
.product-rating-category .rating-icon .fa-star-half-alt {
    color: #ffb400;
}

/* ============================================= */
/* == NOUVEAU STYLE POUR LE FORMULAIRE D'AVIS == */
/* ============================================= */

.review-form-rating {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px; /* Espace sous les étoiles */
}

.review-form-rating label.form-label { /* Cible le texte "Votre note" */
    margin-bottom: 0;
    font-weight: 500;
}

.rating-stars {
    display: inline-flex;
    /* Aligne les étoiles de droite à gauche pour la magie du survol */
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.rating-stars input[type="radio"] {
    display: none; /* Cache les boutons radio natifs */
}

.rating-stars label {
    font-size: 24px; /* Taille des étoiles */
    color: #e0e0e0; /* Couleur des étoiles inactives (gris clair) */
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 0 3px;
}

/* Quand on survole une étoile (label), elle et toutes les précédentes (~) se colorent */
.rating-stars:hover label,
.rating-stars label:hover ~ label {
    color: #ffb400; /* Jaune doré au survol */
}

/* Maintient la couleur des étoiles sélectionnées (radio coché) */
.rating-stars input[type="radio"]:checked ~ label {
    color: #ffb400;
}