/* Stickers Letters Designer — Webcria */

/* === Titre + description === */
.sl-product-header {
  padding: 32px 0 20px;
  border-bottom: 1px solid #eee;
  margin-bottom: 24px;
}
.sl-product-name {
  font-size: 2em;
  font-weight: 700;
  color: #222;
  margin: 0 0 10px 0;
  line-height: 1.2;
}
.sl-product-desc {
  font-size: 1em;
  color: #555;
  line-height: 1.6;
}

/* === Configurateur === */
.sl-designer {
  font-family: Arial, sans-serif;
  padding: 0 0 40px;
}
.sl-section { margin-bottom: 20px; }
.sl-label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  color: #333;
  font-size: 1.1em;
  text-align: left;
}

/* Police + upload côte à côte */
.sl-row { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
.sl-col { flex: 1 1 240px; }

/* === Canvas === */
.sl-preview-section { margin-bottom: 12px; }
.sl-preview-toolbar {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 8px;
}
.sl-preview-label { font-size: .85em; color: #666; font-weight: 600; }
.sl-preview-toolbar input[type="color"] {
  width: 36px; height: 30px; padding: 2px;
  border: 1px solid #ccc; border-radius: 4px; cursor: pointer;
}
.sl-select-sm {
  padding: 4px 8px; border: 1px solid #ccc;
  border-radius: 4px; font-size: .85em;
}
.sl-canvas {
  display: block; width: 100%;
  border: 1px solid #ddd; border-radius: 6px; background: #fff;
}

/* === Inputs === */
.sl-input, .sl-select {
  width: 100%; max-width: 420px;
  padding: 8px 12px; border: 1px solid #ccc;
  border-radius: 4px; font-size: 1em;
}

/* === Lignes multi-texte === */
.sl-line-row {
  margin-bottom: 10px !important;
  border: 1px solid #eee !important;
  border-radius: 6px !important;
  padding: 6px 8px !important;
  background: #fafafa !important;
}
.sl-line-row-top {
  display: flex !important; align-items: center !important;
  gap: 8px !important; margin-bottom: 6px !important;
}
.sl-line-row-bottom {
  display: flex !important; align-items: center !important;
  gap: 10px !important; flex-wrap: nowrap !important;
}
.sl-line-row-bottom .sl-btn-upload-font {
  margin-left: auto !important;
}
.sl-line-row .sl-line-input {
  flex: 1 1 200px !important; min-width: 0 !important; margin-bottom: 0 !important;
  max-width: none !important;
}
.sl-line-row .sl-line-font {
  flex: 1 1 160px !important; min-width: 120px !important;
  padding: 6px 8px !important; border: 1px solid #ccc !important;
  border-radius: 4px !important; font-size: .88em !important;
}
.sl-btn-upload-font {
  flex-shrink: 0 !important; white-space: nowrap !important;
  padding: 6px 10px !important; font-size: .82em !important;
}
/* === Sens miroir === */
.sl-mirror-row {
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
}
.sl-mirror-opt {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: .95em; color: #333;
}
.sl-mirror-opt input[type="radio"] { cursor: pointer; }

/* === Interligne === */
.sl-spacing-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sl-spacing-slider {
  flex: 1 1 200px; max-width: 320px;
  accent-color: #333; cursor: pointer;
}
.sl-spacing-val {
  font-size: .9em; color: #555; min-width: 52px;
}
.sl-spacing-hint {
  font-size: 1em; font-weight: 700; color: #888; line-height: 1;
}

.sl-line-h-wrap {
  display: flex !important; align-items: center !important;
  gap: 4px !important; flex-shrink: 0 !important;
}
.sl-line-h-lbl { font-size: .82em !important; color: #666 !important; white-space: nowrap !important; }
.sl-line-h { width: 90px !important; }
.sl-line-h-unit { font-size: .8em !important; color: #888 !important; }
.sl-line-w-val  { font-size: .88em !important; color: #444 !important; font-weight: 600 !important; min-width: 36px !important; display: inline-block !important; }
.sl-btn-line {
  flex-shrink: 0 !important;
  width: 30px !important; height: 30px !important; padding: 0 !important;
  border-radius: 50% !important; border: 1px solid #ccc !important;
  font-size: 1.2em !important; line-height: 1 !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background .15s, border-color .15s;
}
.sl-btn-add-line    { background: #e8f4e8 !important; border-color: #7ac !important; color: #2a7a2a !important; }
.sl-btn-add-line:hover { background: #d0ecd0 !important; }
.sl-btn-remove-line { background: #fdecea !important; border-color: #e99 !important; color: #c00 !important; }
.sl-btn-remove-line:hover { background: #fad7d4 !important; }

/* === Swatches === */
.sl-color-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.sl-swatch-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.sl-swatch {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid #ccc;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  display: block;
}
.sl-swatch:hover { transform: scale(1.1); }
.sl-swatch-active .sl-swatch {
  border-color: #333 !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.18);
  transform: scale(1.12);
}
.sl-swatch-label { font-size: .75em; color: #555; text-align: center; max-width: 60px; word-break: break-word; }

/* === Dimensions === */
.sl-dim-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sl-dim-lbl  { font-size: .9em; color: #555; }
.sl-unit-lbl { font-size: .85em; color: #888; }
.sl-dim-input { width: 80px; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px; text-align: center; font-size: 1em; }

.sl-lock-btn {
  background: #f4f4f4; border: 1px solid #ccc; border-radius: 4px;
  padding: 4px 7px; cursor: pointer; color: #888; line-height: 1;
  transition: background .15s, color .15s;
}
.sl-lock-btn.sl-locked { background: #e8f4e8; color: #2a7a2a; border-color: #7ac; }
.sl-lock-btn:hover { background: #e0e0e0; }

/* === Boutons === */
.sl-btn-secondary {
  padding: 6px 14px; border: 1px solid #ccc; border-radius: 4px;
  background: #f8f8f8; cursor: pointer; font-size: .9em; transition: background .15s;
}
.sl-btn-secondary:hover { background: #ebebeb; }
.sl-unit-toggle { font-size: .82em; }

/* === Prix === */
.sl-price { font-size: 1.5em; font-weight: 700; color: #c00; margin-left: 6px; }
.sl-surcharge-info { font-size: .82em; color: #888; margin-left: 8px; }

/* === Panier === */
.sl-btn-cart { margin-top: 6px; padding: 12px 30px; font-size: 1em; }

/* W auto (cadenas verrouillé) : visuel grisé mais pas disabled */
.sl-dim-auto {
  opacity: 0.45;
  background: #f0f0f0;
}

/* Affichage lecture seule sans input */
.sl-dim-display {
  font-size: 1em; font-weight: 700; color: #333;
  min-width: 40px; display: inline-block;
}

/* === Hint cadenas === */
.sl-dims-section { margin-top: 4px; }
.sl-lock-hint {
  margin: 6px 0 0 0;
  font-size: .8em;
  color: #888;
  font-style: italic;
}

/* === Image produit === */
.sl-product-img-section { margin-top: 28px; }
.sl-product-img { max-width: 480px; width: 100%; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.10); }

/* ===================================================
   RESPONSIVE MOBILE
   =================================================== */
@media (max-width: 600px) {

  /* Ligne : row-bottom passe en 2 rangées :
     rangée 1 → dimensions (h-wrap)
     rangée 2 → police + import */
  .sl-line-row-bottom {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .sl-line-h-wrap {
    width: 100% !important;
    flex-wrap: wrap !important;
    flex-shrink: 0 !important;
  }
  .sl-line-h-wrap + .sl-line-font,
  .sl-line-row-bottom .sl-line-font {
    flex: 1 1 140px !important;
    min-width: 0 !important;
  }
  .sl-btn-upload-font {
    margin-left: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Dimensions globales en colonne */
  .sl-dim-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  /* Inputs pleine largeur */
  .sl-input, .sl-select {
    max-width: 100% !important;
  }

  /* Canvas */
  .sl-canvas { border-radius: 4px; }

  /* Prix */
  .sl-price { font-size: 1.3em; }

  /* Bouton panier pleine largeur */
  .sl-btn-cart { width: 100%; padding: 14px 16px; font-size: 1em; }

  /* Swatches plus petits */
  .sl-swatch { width: 34px; height: 34px; }
  .sl-swatch-label { font-size: .7em; max-width: 50px; }

  /* Interligne */
  .sl-spacing-slider { max-width: 100%; }
}