/* Styles personnalisés pour le formulaire de réservation style Booking.com */
/* Variables de couleurs */
:root {
  --booking-blue: #006ce4;
  --booking-light-blue: #e7f0ff;
  --booking-yellow: #feba02;
  --booking-green: #008009;
  --booking-light-green: #e7f4e9;
}
/* Style général */
body {
  background-color: #f5f5f5;
}
/* Couleurs personnalisées */
.bg-primary {
  background-color: var(--booking-blue) !important;
}
.text-primary {
  color: var(--booking-blue) !important;
}
.btn-primary {
  background-color: var(--booking-blue) !important;
  border-color: var(--booking-blue) !important;
}
.btn-outline-primary {
  color: var(--booking-blue) !important;
  border-color: var(--booking-blue) !important;
}
.btn-outline-primary:hover {
  background-color: var(--booking-light-blue) !important;
}
.text-success {
  color: var(--booking-green) !important;
}
/* Design des cartes */
.card {
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden;
}
.card-header {
  padding: 16px 20px;
  font-weight: 500;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.card-body {
  padding: 20px;
}
/* Formulaires */
.form-control, .form-select {
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #dadada;
}
.form-control:focus, .form-select:focus {
  border-color: var(--booking-blue);
  box-shadow: 0 0 0 3px rgba(0, 108, 228, 0.15);
}
.form-label {
  font-weight: 500;
  margin-bottom: 6px;
}
/* Style des boutons */
.btn {
  padding: 10px 16px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s ease;
}
.btn-primary {
  padding: 12px 20px;
}
.btn-primary:hover {
  background-color: #0059bd !important;
  border-color: #0059bd !important;
}
/* Intl Tel Input personnalisé */
.iti {
  width: 100%;
}
.iti__flag-container {
  padding: 0 12px;
}
.iti__selected-flag {
  padding: 0 12px 0 0;
}
/* Résumé de réservation */
#summaryCheckin, #summaryCheckout {
  padding: 6px 10px;
  font-weight: 500;
}
#summaryTotal {
  color: var(--booking-green) !important;
}
/* Info blocks */
.list-group-item {
  padding: 12px 0;
}
.alert-info {
  background-color: var(--booking-light-blue);
  border-color: #cee0ff;
  color: var(--booking-blue);
}
/* Modal */
.modal-header {
  padding: 15px 20px;
}
.modal-body {
  padding: 20px;
}
.modal-footer {
  padding: 15px 20px;
}
/* Responsive tweaks */
@media (max-width: 992px) {
  .order-lg-1 {
    order: 2;
  }
  
  .order-lg-2 {
    order: 1;
    margin-bottom: 20px;
  }
}
/* Animation des badges dans le résumé */
#summaryCheckin.bg-success, #summaryCheckout.bg-success {
  transition: all 0.3s ease;
}
/* Styling des erreurs */
.is-invalid {
  border-color: #dc3545 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}
.invalid-feedback {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #dc3545;
}
/* Style de la section Signup Prompt */
#signupPrompt .alert {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 20px;
}
#signupPrompt .btn-outline-primary {
  padding: 8px 16px;
  font-size: 0.9rem;
}
#signupPrompt .btn-link {
  color: var(--booking-blue);
  text-decoration: none;
  font-size: 0.9rem;
}
/* Style pour le consentement */
.form-check-input:checked {
  background-color: var(--booking-blue);
  border-color: var(--booking-blue);
}
.form-check-input:focus {
  border-color: var(--booking-blue);
  box-shadow: 0 0 0 0.2rem rgba(0, 108, 228, 0.25);
}
/* Style pour les suggestions */
.form-text {
  font-size: 0.8rem;
  color: #6c757d;
}
/* Badges et icônes */
.badge {
  font-weight: 500;
  padding: 6px 10px;
}
.bi {
  vertical-align: -0.125em;
}
/* Style pour la carte de résumé */
.border-bottom {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}
/* Styles pour dates sélectionnées */
.date-selected {
  background-color: var(--booking-green) !important;
  color: white !important;
  border-color: var(--booking-green) !important;
}
/* Animation de confirmation */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 128, 9, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(0, 128, 9, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 128, 9, 0); }
}
.pulse {
  animation: pulse 1.5s infinite;
}