#mrc-container #calendar {
  max-width: 100%;
  margin: 5px auto;
}

#mrc-container .fc-day-disabled {
  background-color: #fff !important;
  pointer-events: none !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

#mrc-container .fc-daygrid-day {
  cursor: pointer;
}

/* Style pour centrer le texte de dispo */
#mrc-container .fc-daygrid-day-frame {
  position: relative;
  height: 100%;
  display: block;
  padding-top: 20px;
}

#mrc-container .fc-daygrid-day-number {
  position: absolute !important;
  top: 2px;
  left: 4px;
  z-index: 10;
  font-weight: normal;
  color: #000;
}

#mrc-container .fc-daygrid-day-events {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

#mrc-container .fc-daygrid-event-harness {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: block !important;
}


#mrc-container a.fc-dispo-label {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  background-color: transparent !important;
  border: none !important;
  color: #808080 !important;
  font-weight: bold;
  font-size: 1em;
  line-height: 1.3;
  text-decoration: none;
}

#mrc-container .fc-dispo-label > div {
  width: 100%;
}

.fc-event-today {
  background-color: #0be7be !important;
  color: #fff !important;
}

@media (max-width: 768px) {
    #mrc-container .fc-daygrid-day {
    height: 70px !important;
    }


  #mrc-container a.fc-dispo-label {
    margin-top: 20px;
    font-size: 0.8em;
  }
}

/* Change la couleur du texte suggéré en gris pour tous les types d'inputs */
#mrc-container ::placeholder {
  color: #a9a9a9 !important; /* Gris clair */
  opacity: 1; /* Nécessaire pour Firefox */
}

/* Version spécifique pour les navigateurs plus anciens si besoin */
#mrc-container input::-webkit-input-placeholder,
#mrc-container textarea::-webkit-input-placeholder {
  color: #a9a9a9;
}

/* Styles pour la modale */
#mrc-container #reservationModal {
  display:none; /* Par défaut, la modale est cachée */
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  z-index:9999; /* Assurez-vous que c'est au-dessus de tout */
  align-items:center;
  justify-content:center;
  padding:20px; /* Padding autour de la modale elle-même */
  box-sizing: border-box; /* Assure que le padding ne déborde pas */
  overflow-y: auto; /* Permet le défilement de la modale si elle est trop grande */
}

#mrc-container #modalContent {
  background:#fff;
  padding:20px 20px;
  border-radius:12px;
  max-width:500px;
  width:100%;
  box-sizing:border-box;
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  animation: modalFadeIn 0.3s ease forwards;
  /* Nouvelles règles pour la responsivité du contenu de la modale */
  max-height: calc(100vh - 40px); /* 100% de la hauteur du viewport moins le padding de la modale */
  overflow-y: auto; /* Permet le défilement du contenu de la modale */
  -webkit-overflow-scrolling: touch; /* Améliore le défilement sur iOS */
}

/* En-tête de la modale */
#mrc-container .modal-header {
  background-color: rgb(23, 91, 160);
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}

#mrc-container .modal-footer {
  margin-top: 20px;
  display: flex; /* Active Flexbox sur le conteneur */
  justify-content: center; /* Centre les éléments horizontalement */
  align-items: center; /* Centre les éléments verticalement (si nécessaire) */
}

#mrc-container .fc .fc-button {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: normal;

  /* Styles que vous voulez modifier */
  background-color: #556b2f; /* Exemple: Vert forêt */
  color: #fff; /* Exemple: Texte blanc */
  border-radius: 20px; /* Exemple: Boutons plus arrondis */
  font-size: 14px; /* Exemple: Taille de police plus petite */
}

#mrc-container .modal-header h2 {
  margin-top: 0;
  margin-bottom: 5px;
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
}

#mrc-container .modal-header p {
  margin: 0;
  font-size: 1rem;
  color: #fff;
  line-height: 1.2; /* Adjusted line-height */
}

/* Formulaire */
#mrc-container #reservationForm {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#mrc-container .form-row {
  display: flex;
  gap: 10px;
}

#mrc-container .form-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px; /* Adjusted gap to bring label closer to input */
  min-width: 0;
}

#mrc-container .form-column label {
  font-weight: 600;
  color: #555;
}

#mrc-container input,
#mrc-container select,
#mrc-container textarea {
  padding: 8px 12px; /* Réduit un peu le padding vertical */
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem; /* Réduit de 1.5rem à 1rem pour un look plus standard */
  line-height: 1.2; /* Force l'alignement vertical au centre */
  width: 100%;
  box-sizing: border-box;
  color: #000; /* Texte saisi reste noir */
  font-family: inherit;
  z-index: 10000;
}

#mrc-container #reservationForm button[type="submit"] {
  background: #4caf50;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.2s ease;
}

#mrc-container #reservationForm button:hover {
  filter: brightness(0.9);
}

@keyframes modalFadeIn {
  from {opacity: 0; transform: translateY(-20px);}
  to {opacity: 1; transform: translateY(0);}
}

@media (max-width: 600px) {
  #mrc-container #reservationForm > div[style*="display:flex"] {
    flex-direction: column !important;
  }
}

/* Styles spécifiques au calendrier FullCalendar */
#mrc-container #calendar > .fc-view-harness.fc-view-harness-active {
  background-color: #fff;
  color:#000;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Style des boutons de navigation (prev, next, today) */
#mrc-container .fc .fc-button {
  background-color: #4bc4ad;
  border: none;
  color: #000;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 6px;
}

#mrc-container .fc .fc-button:hover,
#mrc-container .fc .fc-button:focus {
  background-color: #4bc4ad;
  color: #000;
}

/* Titre du mois/année */
#mrc-container .fc-toolbar-title {
  color: #4bc4ad;
  font-size: 1.5em;
  font-weight: bold;
}

@media (max-width: 600px) {
  #mrc-container input,
  #mrc-container select,
  #mrc-container textarea {
    font-size: 1.2rem; /* Adjust as needed */
  }
}

#mrc-container #reservationModal select {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  color: #000;
  
  /* Supprime toutes les flèches par défaut (le chevron noir) */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Ajoute une seule flèche personnalisée (propre et grise) */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9a9a9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  
  padding-right: 40px; /* Évite que le texte chevauche la flèche */
  cursor: pointer;
}

/* Correction spécifique pour IE/Edge au cas où */
#mrc-container #reservationModal select::-ms-expand {
  display: none;
}

.faux-select-label {
display: none;
}

.faux-select {
    margin-left: 0px !important;
}

/* Styles for the form actions (buttons) */
#mrc-container .form-actions {
  display: flex; /* Makes buttons appear side-by-side */
  justify-content: flex-end; /* Aligns buttons to the right */
  gap: 10px; /* Space between buttons */
  margin-top: 10px;
}

#mrc-container #reservationForm button[type="submit"] {
  background: #69bfac;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.2s ease;
}

#mrc-container #reservationForm button[type="submit"]:hover {
  filter: brightness(0.9);
}

/* Style for the Cancel button */
#mrc-container #cancelReservation {
  background: #e2bbb8; /* Red color */
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.2s ease;
}

#mrc-container #cancelReservation:hover {
  filter: brightness(0.9);
}

.selected-date-text {
  color: #4bc4ad;
}

@media (max-width: 600px) {
  #mrc-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
  }

  #calendar {
    flex-grow: 1;
    height: 100%;
    width: 100% !important;
    max-width: 100% !important;
  }

  .fc {
    width: 100% !important;
    height: 100% !important;
  }

  .fc-view-harness {
    flex: 1 1 auto;
    height: 100% !important;
    min-height: 100% !important;
  }

  .fc-scrollgrid,
  .fc-daygrid-body,
  .fc-daygrid-body table {
    width: 100% !important;
    table-layout: fixed !important;
  }

  .fc-daygrid-day-frame {
    height: auto !important;
  }

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* Styles pour la modale de confirmation */
#mrc-container #confirmationModal {
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  z-index:10000;
  align-items:center;
  justify-content:center;
  padding:20px;
  box-sizing: border-box;
  overflow-y: auto;
}

#mrc-container #confirmationContent {
  background:#fff;
  color:#878787;
  padding:30px 25px;
  border-radius:12px;
  max-width:500px;
  width:100%;
  box-sizing:border-box;
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  animation: modalFadeIn 0.3s ease forwards;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

/* --- NETTOYAGE FINAL DES BALISES WP --- */

/* Supprime l'espace des balises <br> inutiles injectées par WP */
#mrc-container .mrc-form br {
    display: none !important;
}

/* Supprime les paragraphes vides qui créent des sauts de ligne */
#mrc-container p:empty {
    display: none !important;
    margin: 0 !important;
}

/* Force les labels à coller à l'input */
#mrc-container .form-column label {
    margin-bottom: 2px !important;
    display: block;
}

/* Ajustement spécifique pour le conteneur du formulaire */
#mrc-container .form-row {
    margin-bottom: 10px; /* Espace entre les lignes du formulaire */
}

/* On cible la table de FullCalendar avec le maximum de précision */
#mrc-container .fc-scrollgrid,
#mrc-container table,
#mrc-container .fc-scrollgrid-adjusted {
    margin-bottom: 0 !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
}

/* On annule aussi les marges sur les conteneurs de table internes de FullCalendar */
#mrc-container .fc-view-harness table {
    margin: 0 !important;
}