.order-step-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
  padding-top: 15px;
}

.order-step-prev,
.order-step-next {
  border: none;
  padding: 8px 16px;
  border-radius: 3px;
  cursor: pointer;
}

.order-step-prev[disabled],
.order-step-next[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.wooco_component {
  display: none;
}
.wooco_component.is-active {
  display: block;
}

/*
Menu fixe
*/

.order-step-floating {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  transition: all 0.3s ease;
}

.order-step-inner {
  display: flex;
  align-items: center;
  background: #ffffff;
  padding: 0.8em 1.4em;
  border-radius: 95px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);
  gap: 18px;
  opacity: 0.95;
  transition: all 0.5s ease;
}

/* Hover effet "lodge-style" */
.order-step-floating:hover .order-step-inner {
  opacity: 1;
  transform: translateY(-6px);
}

/* Boutons ronds */
.order-step-prev,
.order-step-next {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: none;
  background: var(--secondary-color, #073f4f);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: all 0, 5 ease;
}

/* Hover sur les flèches */
.order-step-prev:hover,
.order-step-next:hover {
  background: var(--secondary-color-hover, #0b4f61);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
  transform: scale(1.07);
}

/* Désactivé */
.order-step-prev[disabled] {
  opacity: 0.45 !important;
  cursor: not-allowed;
  box-shadow: none !important;
}

.order-step-count {
  font-size: 17px;
  font-weight: 600;
  color: var(--main-color, #103745);
}

/* Cacher la barre par défaut*/
.order-step-controls:not(.order-step-floating) {
  display: none !important;
}

.order-step-summary {
  flex: 1;
  text-align: center;
  font-weight: 600;
  color: #103745;
  display: flex;
  justify-content: center;
  gap: 15px;
}

.order-step-summary .wooco_total,
.order-step-summary .wooco_count {
  font-size: 15px;
}

/* Empêche la version flottante d'être en plein écran */
.order-step-controls.order-step-floating {
  all: unset; /* On retire tous les styles hérités */
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}

/* Conteneur des boutons edit */
.order-step-edit-buttons {
  display: flex;
  align-items: center;
  gap: 12px; /* même spacing que tes flèches */
  margin-left: 10px;
}

.btn-edit-preorder {
  height: 55px !important;
}

.order-step-edit-buttons button {
  margin-bottom: 0 !important;
}

/* inline au lieu de vertical 
.order-edit-btns-inline {
  display: flex;
  gap: 12px;
}*/

/*.order-edit-btns-inline button {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: var(--secondary-color, #073f4f);
  border: none;
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}*/

/* Hover identique */
.order-edit-btns-inline button:hover {
  background: var(--secondary-color-hover, #0b4f61);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
  transform: scale(1.07);
}

/* Si tu veux un bouton gris pour "Enregistrer" */
.order-edit-btns-inline .btn-save {
  background: #dfe8eb;
  color: #073f4f;
}

.order-edit-btns-inline .btn-save:hover {
  background: #cfd7da;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  transform: scale(1.07);
}

/*.order-step-edit-buttons button {
  margin-left: 10px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}*/

.order-step-edit-buttons #btn-save {
  background: #dfe8eb;
  color: #073f4f;
}

.order-step-edit-buttons #btn-buy {
  background: var(--secondary-color, #073f4f);
  color: #fff;
}

/*.order-edit-btns-inline button,
.order-step-prev,
.order-step-next {
  width: 55px;
  height: 55px;
  border-radius: 50%;
}*/