/* Base du repeater */
.wb-input-repeater {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  /* padding: 15px !important; */
}

.wb-input-repeater-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Style des items */
.wb-repeater-item {
  background-color: var(--color-gray-15);
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.2s ease;
}

.wb-repeater-item:hover {
  box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* Header de l'item */
.wb-repeater-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-gray-25);
}

/* Contrôles de l'item */
.wb-repeater-controls {
  display: flex;
  gap: 8px;
}

.wb-repeater-control-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  opacity: 0.5;
  transition: all 0.2s ease;
}

.wb-repeater-control-button:hover {
  opacity: 1;
  background-color: var(--color-gray-25);
}

.wb-repeater-control-button.delete:hover {
  background-color: var(--color-error-light);
}

/* Style des SVG dans les contrôles */
.wb-repeater-controls svg,
.wb-input-repeater-delete svg,
.wb-input-repeater-accordion-expand svg {
  width: 14px;
  height: 14px;
  fill: var(--color-darkest);
}

/* Style du bouton d'ajout */
.wb-input-repeater-add-row svg {
  width: 12px;
  height: 12px;
}

/* Style de l'accordéon */
.wb-input-repeater-accordion-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 10px;
  color: var(--color-darkest);
  padding-left: 10px;
}

.wb-input-repeater-accordion-title-text {
  font-weight: 500;
  font-size: 14px;
}

.wb-input-repeater-accordion-expand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-gray-75);
  opacity: 0.5;
  transition: all 0.2s ease;
}

.wb-input-repeater-accordion-expand:hover {
  opacity: 1;
}
/* Style de la ligne du repeater */
.wb-input-repeater-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--color-lighter);
  border-radius: 8px;
  padding: 15px;
  width: 100%;
}

.wb-input-repeater-delete {
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.5;
  transition: all 0.2s ease;
  padding: 1px 10px;
}

.wb-input-repeater-delete:hover {
  opacity: 1;
  background-color: var(--color-error-light);
}

/* Style des contrôles d'ordre */
.wb-input-repeater-row-order {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wb-input-repeater-row-order button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  opacity: 0.5;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wb-input-repeater-row-order button:hover:not(:disabled) {
  opacity: 1;
  background-color: var(--color-gray-25);
}

.wb-input-repeater-row-order button:disabled {
  cursor: not-allowed;
  opacity: 0.2;
}

.wb-input-repeater-row-order svg {
  width: 14px;
  height: 14px;
}

.wb-input-repeater-fields {
  flex: 1;
}

.wb-input-repeater-row-up svg,
.wb-input-repeater-row-down svg {
  opacity: 0.5;
}

.wb-input-repeater-row-up:hover svg,
.wb-input-repeater-row-down:hover svg {
  opacity: 1;
  cursor: pointer;
}
