.reservation-final {
  margin: 10px auto;
  overflow: hidden;
  border: 2px solid #009999;
  border-radius: 5px;
  max-width: 800px;
  font-family: "Montserrat", sans-serif;
}

.reservation-final-title {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  color: #009999;
}

.reservation-final-period {
  background-color: #ffffff;
  padding: 5px;
  text-align: center;
  color: #009999;
  font-size: 20px;
}

.reservation-final-total {
  background-color: #009999;
  color: #ffffff;
  padding: 5px;
  text-align: center;
}

.gras {
  font-weight: bold;
}

.reservationfinal {
  background-color: #009999;
  color: #ffffff;
  padding: 5px;
  text-align: center;
}

#vider-panier {
    background-color: #009999;
    border: none;
    border-radius: 5px;
    color: white; /* Couleur du texte du bouton */
    padding: 10px 20px; /* Espace intérieur autour du texte du bouton */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: 'Montserrat', sans-serif; /* Utilise la police Montserrat si elle est disponible, sinon utilise une police sans-serif par défaut */
    font-size: 16px;
    margin: 10px auto; /* Centrer le bouton */
    cursor: pointer; /* Change le curseur en pointeur lorsque vous survolez le bouton */
}

#vider-panier:hover {
    background-color: #007777; /* Changer la couleur de fond du bouton au survol */
}

.button-container {
    display: flex;
    justify-content: center;
    padding-top: 20px; /* ajoute un espace entre les réservations et le bouton, vous pouvez ajuster cette valeur selon vos besoins */
}

.panier-vide {
    background-color: #009999;
    border-radius: 5px;
    color: white; /* Couleur du texte du message */
    padding: 10px 20px; /* Espace intérieur autour du texte du message */
    text-align: center;
    font-family: 'Montserrat', sans-serif; /* Utilise la police Montserrat si elle est disponible, sinon utilise une police sans-serif par défaut */
    font-size: 16px;
    font-weight: bold; /* Mettre le texte en gras */
    margin: 10px auto; /* Centrer le message */
    max-width: 800px; /* Largeur maximale de 800px */
}

.total-final {
    text-align: center;
    font-family: 'Montserrat', sans-serif; 
    font-size: 20px; 
    font-weight: bold; 
    margin-top: 20px; 
}

.styled-menage {
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 20px; /* Ajustez cette valeur selon vos besoins */
    text-align: center;
    color: #009999;
    margin-top: 20px; /* Ajustez cette valeur selon vos besoins */
    margin-bottom: 20px; /* Ajustez cette valeur selon vos besoins */
}

.taxe-sejour-btn {
  display: block;
  margin: 20px auto;
  background-color: #009999;
  font-family: 'Montserrat', sans-serif;
  border-radius: 4px;
  color: white;
  font-size: 18px;
  border: none;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3); /* Ajouter l'ombre portée */
}

.taxe-sejour-btn:hover {
  background-color: #007777;
}


.reservation-final-adultes,
.reservation-final-enfants {
  margin-bottom: 10px; /* Ajoutez la marge en bas souhaitée */
  text-align: center; /* Centre le texte */
}

.adulte-icon {
  color: #009999;
}

.reservation-final-nuits-center {
  text-align: center;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
}

#payer {
    background-color: #009999;
    border: none;
    border-radius: 5px;
    color: white; /* Couleur du texte du bouton */
    padding: 10px 20px; /* Espace intérieur autour du texte du bouton */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: 'Montserrat', sans-serif; /* Utilise la police Montserrat si elle est disponible, sinon utilise une police sans-serif par défaut */
    font-size: 16px;
    margin: 10px auto; /* Centrer le bouton */
    cursor: pointer; /* Change le curseur en pointeur lorsque vous survolez le bouton */
	transition: background-color 0.3s ease;
}

#payer:hover {
    background-color: #007777; /* Change la couleur de fond en turquoise foncé lors du survol */
}

#payer:disabled {
    background-color: #FF7F50; /* Change la couleur de fond en corail lorsque le bouton est désactivé */
    cursor: not-allowed; /* Change le curseur en not-allowed lorsque le bouton est désactivé */
}