/* Conteneur principal */
.soutien-container {
    width: 100%;
    overflow: hidden;
    height: auto;
}

.soutien-header {
    background-color: #2C6961;
    padding: 20px;
    text-align: center;
    color: white;
}

.soutien-header h2 {
    font-size: 24px;
    color: #ffff;
}

.soutien-header p {
    font-size: 16px;
}

.soutien-body {
    background-color: #F9FAFA;
    padding: 20px;
    text-align: center;
    width: 100%;
    border-radius: none !important;
    box-shadow: none !important;
}

.soutien-body input {
    width: 100%;
    padding: 10px;
    font-size: 18px;
    border: 1px solid #000;
    border-radius: 5px;
    margin-bottom: 20px;
}

/* Correction pour l'input type number */
input[type="number"] {
    border-radius: 5px !important;
    -moz-appearance: textfield;
}

/* Suppression des flèches pour input number sur Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.soutien-body button {
    width: 100%;
    background-color: #FFA473;
    color: white;
    font-size: 18px;
    border: none;
    padding: 12px 20px;
    border-radius: 30px;
    cursor: pointer;
    width: 80%;
    margin-bottom: 20px;
}

.soutien-body button:hover {
    background-color: #E5673B;
}

.soutien-footer{
    display: flex;
    align-items: center !important;
    gap: 6px;
    margin-top: 15px; 
}

.soutien-footer img {
    width: 15px;
    height: 15px;
}
.soutien-footer {
     font-size: 13.5px;
 }

#overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    animation: fadeIn 1s forwards;
}

#popup-confirmation {
    background: none !important;
    padding: 30px;
    border-radius: 10px;

    max-width: 500px;
    width: 90%;
    animation: popupScale 0.5s ease forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

@keyframes popupScale {
    0% { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Conteneur global pour la navigation et les montants */
.amounts-navigation-container {
    /* position: relative;
    width: 100%;
    margin: 25px 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;*/
    overflow: visible;
}

/* Conteneur pour le slider et les boutons de navigation */
.amounts-slider-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    max-width: 400px;
}

/* Style des boutons de navigation */
.slider-nav {
    background-color: #FFA473;
    border: none;
    border-radius: 30px;
    color: white;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    z-index: 10;
    padding: 0;
    margin: 0 15px;
    flex-shrink: 0;
}

.slider-nav:hover {
    background-color: #E5673B;
}

/* Slider des montants prédéfinis */
.amounts-navigation-container {
  width: 100%;
  max-width: 900px; /* ou la largeur que tu souhaites */
  margin: 0 auto;   /* centre horizontalement si max-width est défini */
  padding: 20px 0;
  overflow: visible;
}

.predefined-amounts-container::-webkit-scrollbar {
    display: none;
}

/* Style des boutons de prix prédéfinis */
.predefined-amounts-container {
  overflow: visible;
  white-space: normal;
  max-width: none;
}

.predefined-amounts {
  display: flex;
  flex-wrap: wrap;       /* plusieurs lignes si besoin */
  justify-content: center;
  gap: 16px;             /* espacement entre chaque bouton */
}

.predefined-amount:hover {
    opacity: 0.9;
}