/* --- WRAPPER PRINCIPAL --- */
.beds24-wrapper {
  background: #fef1f5;
  padding: 20px;
  max-width: 500px;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  box-sizing: border-box;
}

/* Assure un empilement vertical si le formulaire direct est ciblable */
.beds24-wrapper form,
.beds24-wrapper .beds24-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* --- LIGNES / ROWS GÉNÉRIQUES --- */
.form-row {
  /* Neutralise floats ou display inline hérités */
  float: none !important;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

/* Labels généraux */
.form-row label {
  margin-bottom: 6px;
  font-weight: 500;
  line-height: 1.2;
}

/* --- SECTION DATES SPÉCIFIQUE --- */
.form-row.date {
  /* Spécificité suffisante et reset de propriétés potentiellement héritées */
  flex: 0 0 auto !important;
  width: 100% !important;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: 1rem;
  order: 50;             /* (optionnel) si d'autres rows réordonnent */
  float: none !important;
  clear: both;
}

/* Conteneur des deux inputs de date côte à côte */
.form-row.date .dates-fields {
  display: flex;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

/* Inputs de date : prennent chacun 50% (moins le gap) */
.form-row.date .dates-fields input {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #eee;
  background: #fff;
  font-size: 1rem;
  box-sizing: border-box;
}

/* --- INPUTS GÉNÉRAUX (hors dates) --- */
/* Spécifie qu'on n'affecte PAS ceux qu'on a déjà stylés dans .dates-fields */
.form-row > input[type="text"]:not(.flatpickr-input),
.form-row > input[type="number"],
.form-row > input[type="email"],
.form-row > input[type="tel"],
.form-row > input[type="date"],
.form-row > select,
.form-row > textarea {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #eee;
  background: #fff;
  font-size: 1rem;
  box-sizing: border-box;
}

/* Ancienne règle potentiellement problématique remplacée.
   Si tu veux vraiment deux inputs sur une même ligne dans une autre row,
   crée une classe spécifique plutôt que .form-row input global. */

/* --- SELECT --- */
.form-row select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  background: #fff;
  box-sizing: border-box;
}

/* --- RESULTATS / MESSAGES --- */
.result-box {
  margin-top: 20px;
  padding: 10px;
  background: #fff5f5;
  border: 1px solid #eee;
  border-radius: 6px;
  font-weight: 600;
  color: #cc0033;
}

/* --- BOUTON SUBMIT --- */
.submit-button {
  margin-top: 15px;
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  background: #ccc;
  color: #fff;
  cursor: not-allowed;
  font-weight: bold;
  transition: background-color .3s;
}
.submit-button:enabled {
  background: #e74c4c;
  cursor: pointer;
}
.submit-button:enabled:hover {
  background: #d53c3c;
}

/* --- EXTRAS LIST --- */
.extras-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  padding: 0;
}
.extras-list label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #eee;
  transition: border-color .2s, background-color .2s;
  box-sizing: border-box;
}
.extras-list label:hover {
  border-color: #e7c2c9;
  background: #fff9fa;
}
.extras-list label span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}
.extras-list input[type="checkbox"] {
  margin-right: 8px;
  accent-color: #e74c4c;
}
.extra-price {
  font-weight: 600;
  color: #7a2f3e;
  margin-left: 10px;
  min-width: 70px;
  text-align: right;
}

/* --- TOTAL --- */
.total-box {
  margin-top: 18px;
  padding: 12px;
  background: #fff5f5;
  border: 1px solid #eee;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: bold;
  color: #7a2f3e;
  text-align: right;
  box-sizing: border-box;
}

/* --- RECAP --- */
.recap-box {
  margin-top: 22px;
  background: #fff;
  border-radius: 8px;
  padding: 18px 18px 10px 18px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  font-size: 1.1rem;
  box-sizing: border-box;
}
.recap-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dotted #eee;
}
.recap-title {
  font-size: 1.2rem;
  font-weight: bold;
  border-bottom: none;
  margin-bottom: 8px;
}
.recap-total {
  font-weight: bold;
  font-size: 1.15rem;
  border-bottom: none;
  margin-top: 8px;
}

/* --- RESPONSIVE : empile les deux dates sous mobile étroit --- */
@media (max-width: 420px) {
  .form-row.date .dates-fields {
    flex-direction: column;
    gap: 8px;
  }
  .form-row.date .dates-fields input {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* Style du conteneur principal */
.beds24-wrapper {
  background: #fef1f5;
  padding: 20px;
  max-width: 500px;
  border-radius: 10px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  overflow: hidden;
}

/* Personnalisation de l'iframe */
#beds24-iframe {
  border-radius: 8px;
  margin-top: -10px; /* Compensation de l'espace interne */
}

/* Corrections de style pour le contenu de l'iframe */
.beds24-wrapper iframe .b24-widget-header {
  display: none !important;
}

.beds24-wrapper iframe .b24-form-control {
  background: #fff !important;
  border: 1px solid #eee !important;
  border-radius: 6px !important;
}

.beds24-wrapper iframe .b24-btn-primary {
  background: #e74c4c !important;
  border: none !important;
  border-radius: 6px !important;
}

/* Ajoutez ces styles à votre fichier CSS existant */

/* Cacher la carte */
#beds24-iframe #b24-map-container {
    display: none !important;
}

/* Section extras */
.extras-container {
    margin-top: 25px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.extras-container h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #7a2f3e;
    font-size: 1.2rem;
}

/* Bouton personnalisé */
#custom-book-button {
    margin-top: 20px;
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    background: #e74c4c;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}

#custom-book-button:hover {
    background: #d43c3c;
}

/* Style des extras */
.extras-list label {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}

.extras-list label:last-child {
    border-bottom: none;
}