/* KelMultiConfig front.css v2 */

.kmc-widget {
  margin: 18px 0;
  padding: 18px;
  border: 2px solid #eee;
  border-radius: 12px;
  background: #fafafa;
}

.kmc-widget__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.kmc-widget__icon { font-size: 1.4rem; }

.kmc-widget__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: #222;
}

/* ---- Zones ---- */
.kmc-zones__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.kmc-zone-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 2px solid #ddd;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background .15s;
}

.kmc-zone-item:hover { border-color: #ED5190; }
.kmc-zone-item.kmc-checked { border-color: #ED5190; background: #fff0f6; }

.kmc-zone-item input { display: none; }

.kmc-zone-check {
  width: 20px; height: 20px;
  border: 2px solid #ccc;
  border-radius: 5px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}

.kmc-zone-item.kmc-checked .kmc-zone-check {
  background: #ED5190;
  border-color: #ED5190;
}
.kmc-zone-item.kmc-checked .kmc-zone-check::after {
  content: '✓';
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.kmc-zone-info { display: flex; flex-direction: column; gap: 2px; }
.kmc-zone-name { font-size: .92rem; font-weight: 600; }
.kmc-zone-price { font-size: .78rem; font-weight: 700; color: #ED5190; }
.kmc-included { color: #3a7d44; font-weight: 500; }

/* ---- Lot ---- */
.kmc-lot__slots {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}

.kmc-slot {
  flex: 1 1 200px;
  min-width: 190px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: border-color .2s;
}

.kmc-slot--done { border-color: #ED5190; }

.kmc-slot__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #f3f3f3;
  border-bottom: 1px solid #e8e8e8;
}

.kmc-slot__num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #ED5190;
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.kmc-slot__label { font-weight: 700; font-size: .92rem; }

.kmc-slot__body { padding: 14px; display: flex; flex-direction: column; gap: 14px; }

.kmc-field__label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #888;
  margin-bottom: 6px;
}

/* Taille pills */
.kmc-size-pills { display: flex; flex-wrap: wrap; gap: 6px; }

.kmc-pill input { display: none; }

.kmc-pill__text {
  display: block;
  padding: 5px 12px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s, background .15s;
  line-height: 1.2;
}

.kmc-pill__price {
  display: block;
  font-size: .7rem;
  color: #ED5190;
  font-weight: 700;
  text-align: center;
  margin-top: 2px;
}

.kmc-pill input:checked ~ .kmc-pill__text {
  border-color: #ED5190;
  background: #fff0f6;
  color: #ED5190;
}

.kmc-pill__text:hover { border-color: #ED5190; }

/* Couleur swatches */
.kmc-color-picks { display: flex; flex-wrap: wrap; gap: 8px; }

.kmc-color {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
  display: flex; align-items: center; justify-content: center;
}

.kmc-color input { display: none; }
.kmc-color:hover { transform: scale(1.12); }
.kmc-color.kmc-selected { border-color: #ED5190; transform: scale(1.12); }

/* Recap */
.kmc-summary {
  margin-top: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.kmc-summary__list {
  margin: 6px 0 0 16px;
  padding: 0;
  font-size: .9rem;
}

.kmc-summary__list li { margin-bottom: 3px; }
.kmc-summary__list em { color: #ED5190; font-style: normal; font-weight: 600; }

.kmc-summary__total {
  margin-top: 6px;
  font-weight: 700;
  color: #ED5190;
  font-size: .92rem;
}

/* Erreur */
.kmc-error {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff3f3;
  border: 1px solid #f5c6cb;
  color: #c00;
  font-size: .88rem;
}

@media (max-width: 576px) {
  .kmc-widget { padding: 12px; }
  .kmc-lot__slots { flex-direction: column; }
}

/* ---- Formats / Contenants ---- */
.kmc-format-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kmc-format-item input { display: none; }

.kmc-format-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 2px solid #ddd;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.kmc-format-box:hover { border-color: #ED5190; }

.kmc-format-item.kmc-format-selected .kmc-format-box {
  border-color: #ED5190;
  background: #fff0f6;
}

.kmc-format-icon { font-size: 1.2rem; flex-shrink: 0; }

.kmc-format-name {
  flex: 1;
  font-size: .9rem;
  font-weight: 600;
  color: #222;
}

.kmc-format-price {
  font-size: .9rem;
  font-weight: 700;
  color: #ED5190;
  white-space: nowrap;
}

/* Repositionnement - widget injecte dans le bloc prix */
#kmc-anchor { display: none; }

.kmc-widget {
  /* S assure que le widget est bien visible meme repositionne */
  position: relative;
  z-index: 1;
}

/* Masque proprement les elements PS caches par JS au cas ou le JS serait lent */
.kmc-variants-hidden {
  display: none !important;
}