.quantity-control-widget {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 10px; /* Espacement entre les éléments */
    padding: var(--widget-padding, 0px); /* Padding général */
    margin: var(--widget-margin, 0px); /* Marges générales */
    background-color: var(--widget-bg-color, transparent); /* Couleur de fond */
}

.add-icon-container,
.remove-icon-container {
    width: var(--icon-size, 24px);
    height: var(--icon-size, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.add-icon-container svg,
.remove-icon-container svg {
    width: 100%;
    height: 100%;
	fill: currentColor;
}

.btn-add,
.btn-remove {
    padding: var(--btn-padding, 8px 12px);
    margin: var(--btn-margin, 0);
    border-radius: 4px;
    font-size: var(--btn-font-size, 14px);
    font-weight: bold;
    cursor: pointer;
}

.quantity-display {
    font-weight: bold;
    text-align: center;
    color: inherit;
    min-width: 30px; /* Assure un espace pour le texte */
    font-size: 18px; /* Taille par défaut */
}

/* Bouton de texte "Add" */
.btn-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px; /* Espacement interne */
    font-size: 14px; /* Taille du texte */
    font-weight: bold; /* Poids du texte */
    color: #fff; /* Couleur du texte */
    background-color: #28a745; /* Couleur de fond */
    border: none; /* Pas de bordure */
    border-radius: 4px; /* Bords arrondis */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Animation de hover */
}

.btn-add:hover {
    background-color: #218838; /* Couleur au survol */
}

/* Bouton de texte "Remove" */
.btn-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px; /* Espacement interne */
    font-size: 14px; /* Taille du texte */
    font-weight: bold; /* Poids du texte */
    color: #fff; /* Couleur du texte */
    background-color: #dc3545; /* Couleur de fond */
    border: none; /* Pas de bordure */
    border-radius: 4px; /* Bords arrondis */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Animation de hover */
}

.btn-remove:hover {
    background-color: #c82333; /* Couleur au survol */
}