/* =========================================================
   Un bout de Cuir – Options Personnalisation
   DA : artisanal luxe, minimaliste, palette neutre chaude
   ========================================================= */

/* ── Force le bloc en colonne pleine largeur ── */

/* Produits simples */
form.cart {
  display: flex !important;
  flex-direction: column !important;
}

form.cart .wcopts-personnalisation {
  order: 1;
}
form.cart .quantity {
  order: 2;
}
form.cart .single_add_to_cart_button,
form.cart [type="submit"] {
  order: 3;
}

/* Produits variables : .wcopts-personnalisation est déplacé par JS
   AVANT .woocommerce-variation-add-to-cart → layout natif quantity+bouton intact */

/* ── Wrapper principal ── */
.wcopts-personnalisation {
  width: 100%;
  flex: 0 0 100%;
  margin: 0 0 28px;
  padding: 0;
  border: none;
  background: transparent;
}

/* ── Titre de section ── */
.wcopts-title {
  margin: 0 0 20px;
  font-size: 0.72em;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1c1c1c;
  border-bottom: 1px solid #e2d9cc;
  padding-bottom: 10px;
}

/* ── Champ générique ── */
.wcopts-field {
  margin-bottom: 24px;
}

/* ── Labels ── */
.wcopts-label {
  display: block;
  font-size: 0.68em;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b5f52;
  margin-bottom: 12px;
}

.wcopts-label .required {
  color: #b5866b;
  margin-left: 3px;
}

/* ══════════════════════════════════════════
   SWATCHES COULEUR
   ══════════════════════════════════════════ */

.wcopts-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
}

.wcopts-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.wcopts-swatch input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Anneau extérieur brun cuir */
.wcopts-swatch__ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #c8a882; /* brun cuir par défaut */
  padding: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition:
    background-color 0.18s,
    transform 0.18s,
    box-shadow 0.18s;
}

/* Cercle intérieur avec la vraie couleur */
.wcopts-swatch__dot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #c8bfb5;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.18s;
}

/* Survol */
.wcopts-swatch:hover .wcopts-swatch__ring {
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Sélectionné : anneau devient noir */
.wcopts-swatch input[type="radio"]:checked ~ .wcopts-swatch__ring {
  background-color: #1c1c1c;
  transform: scale(1.12);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* Swatch "Autre" – dégradé arc-en-ciel */
.wcopts-swatch__dot--picker {
  background: conic-gradient(
    hsl(0, 80%, 55%),
    hsl(45, 80%, 55%),
    hsl(90, 70%, 45%),
    hsl(180, 70%, 45%),
    hsl(240, 70%, 60%),
    hsl(300, 70%, 55%),
    hsl(360, 80%, 55%)
  );
}

.wcopts-swatch--custom .wcopts-swatch__ring--custom {
  background-color: #c8a882;
}

.wcopts-swatch input[type="radio"]:checked ~ .wcopts-swatch__ring--custom {
  background-color: #1c1c1c;
}

.wcopts-swatch__label {
  font-size: 0.62em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b5f52;
  text-align: center;
  max-width: 52px;
  line-height: 1.3;
}

.wcopts-selected-color {
  margin: 10px 0 0;
  font-size: 0.7em;
  letter-spacing: 0.08em;
  color: #1c1c1c;
  min-height: 16px;
}

/* ── Color picker personnalisé ── */
.wcopts-custom-color-wrap {
  margin-top: 14px;
  padding: 14px 16px;
  background: #faf8f5;
  border: 1px solid #e2d9cc;
  border-radius: 2px;
}

.wcopts-color-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

#wcopts-color-picker {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

#wcopts-color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
  border-radius: 50%;
}

#wcopts-color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

#wcopts-color-picker::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

.wcopts-color-hex-display {
  font-size: 0.78em;
  letter-spacing: 0.1em;
  font-family: monospace;
  color: #1c1c1c;
  background: #f0ebe4;
  padding: 4px 10px;
  border-radius: 2px;
  border: 1px solid #e2d9cc;
  text-transform: uppercase;
}

/* ── Ligne upload dans le tableau des variations ── */
tr.wcopts-upload-row {
  display: none; /* caché par défaut, JS gère via slideDown */
}

td.wcopts-upload-td {
  padding: 12px 0 4px !important;
  border: none !important;
}

td.wcopts-upload-td .wcopts-field--upload {
  margin-bottom: 0;
}

/* ══════════════════════════════════════════
   ZONE UPLOAD
   ══════════════════════════════════════════ */

.wcopts-dropzone {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 18px;
  border: 1px dashed #c8bfb5;
  border-radius: 2px;
  background: #faf8f5;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.wcopts-dropzone.is-dragover {
  border-color: #b5866b;
  background: #f5ede6;
}

.wcopts-dropzone__icon {
  font-size: 1.2em;
  opacity: 0.55;
}

.wcopts-dropzone__text {
  font-size: 0.76em;
  letter-spacing: 0.04em;
  color: #8c7d70;
  flex: 1;
}

.wcopts-btn-browse {
  display: inline-block;
  padding: 7px 16px;
  background: transparent;
  color: #1c1c1c !important;
  border: 1px solid #1c1c1c;
  border-radius: 1px;
  font-size: 0.68em;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.18s,
    color 0.18s;
  text-decoration: none;
}

.wcopts-btn-browse:hover {
  background: #1c1c1c;
  color: #fff !important;
}

.wcopts-upload-info {
  margin: 6px 0 0;
  font-size: 0.66em;
  letter-spacing: 0.05em;
  color: #aaa09a;
}

/* Aperçu fichier sélectionné */
.wcopts-upload-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 14px;
  background: #f0ebe4;
  border-radius: 1px;
  border-left: 2px solid #b5866b;
}

.wcopts-upload-filename {
  flex: 1;
  font-size: 0.74em;
  letter-spacing: 0.04em;
  color: #1c1c1c;
  word-break: break-all;
}

.wcopts-remove-file {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85em;
  color: #8c7d70;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s;
}

.wcopts-remove-file:hover {
  color: #1c1c1c;
}

/* Barre de progression */
.wcopts-upload-progress {
  margin-top: 8px;
  height: 2px;
  background: #e2d9cc;
  border-radius: 1px;
  overflow: hidden;
}

.wcopts-upload-bar {
  height: 100%;
  width: 0%;
  background: #b5866b;
  border-radius: 1px;
  transition: width 0.2s;
}

/* Erreur */
.wcopts-error {
  color: #a05030;
  font-size: 0.7em;
  letter-spacing: 0.04em;
  margin-top: 6px;
}

/* Responsive */
@media (max-width: 480px) {
  .wcopts-swatch__dot {
    width: 28px;
    height: 28px;
  }

  .wcopts-dropzone {
    flex-direction: column;
    align-items: flex-start;
  }
}