/* =============================================================================
   GS Booking – Calendrier mensuel interactif
   Couleurs calquées sur la charte Fondation Groupe SAMSE
   ============================================================================= */

:root {
  --gs-bk-color-available:    #008000;
  --gs-bk-color-full:         #E33039;
  --gs-bk-color-today-bg:     rgba(253, 179, 93, 0.18);
  --gs-bk-color-today-border: #FDB35D;
  --gs-bk-color-hover:        rgba(252, 77, 86, 0.08);
  --gs-bk-color-past:         #c8c8c8;
  --gs-bk-color-border:       #e8ddd9;
  --gs-bk-color-header-bg:    #F8F4F2;
  --gs-bk-font-size-day:      1.5rem;
  --gs-bk-cell-size:          4.2rem;
  --gs-bk-radius:             0.9rem;
  --gs-bk-modal-z:            1050;
}

/* ---------------------------------------------------------------------------
   Card wrapper – overrides c-card-push-img pour le calendrier
   --------------------------------------------------------------------------- */

.gs-booking-calendar-wrapper {
  position: relative;
  font-family: inherit;
  cursor: default;
}

.gs-bk-card-img {
  max-height: none !important;
}

/* c-card-push-img et p-wide--y dans le wrapper calendrier :
   neutraliser max-height, overflow, et le padding excessif (jusqu'à 13rem) */
/* Neutralise max-height sur TOUT .c-card-push-img qui contient le calendrier,
   y compris le wrapper extérieur ajouté par le template de paragraph */
.c-card-push-img:has(#gs-booking-calendar),
.c-card-push-img:has(.gs-booking-calendar-wrapper) {
  max-height: none !important;
  overflow: visible !important;
}

.gs-booking-calendar-wrapper .c-card-push-img {
  max-height: none !important;
  overflow: visible !important;
  border-radius: 0;
  background: var(--gs-bk-color-header-bg);
}

.gs-booking-calendar-wrapper .p-wide--y {
  padding: 2.5rem 0 !important;
}

/* ---------------------------------------------------------------------------
   Calendrier
   --------------------------------------------------------------------------- */

#gs-booking-calendar {
  width: 55%;
  margin: 0 auto;
  border: 1px solid var(--gs-bk-color-border);
  border-radius: var(--gs-bk-radius);
  background: #fff;
  overflow: hidden;
}

/* Header mois */
.gs-bk-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  background: var(--gs-bk-color-header-bg);
  border-bottom: 1px solid var(--gs-bk-color-border);
}

.gs-bk-cal-title {
  margin: 0;
  font-weight: 700;
  text-align: center;
  flex: 1;
  text-transform: capitalize;
  color: #7E0527;
  font-size: 1.8rem;
}

/* Boutons prev / next */
.gs-bk-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  font-size: 2.2rem;
  line-height: 1;
  color: #7E0527;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.gs-bk-cal-nav:hover:not(:disabled) {
  background: var(--gs-bk-color-hover);
  border-color: var(--gs-bk-color-available);
}

.gs-bk-cal-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Grille 7 colonnes */
.gs-bk-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 1.25rem 1.5rem 1rem;
}

/* En-têtes jours de semaine */
.gs-bk-cal-weekday {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7E0527;
  padding: 0.5rem 0 0.75rem;
}

/* Cellule de jour */
.gs-bk-cal-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--gs-bk-cell-size);
  border-radius: 0.4rem;
  user-select: none;
}

.gs-bk-cal-day-num {
  line-height: 1;
  font-size: var(--gs-bk-font-size-day);
}

/* Cellules passées / vides */
.gs-bk-cal-cell.is-past .gs-bk-cal-day-num,
.gs-bk-cal-empty {
  color: var(--gs-bk-color-past);
}

/* Aujourd'hui */
.gs-bk-cal-cell.is-today {
  background: var(--gs-bk-color-today-bg);
  outline: 2px solid var(--gs-bk-color-today-border);
  outline-offset: -2px;
}

/* Jour avec créneau disponible */
.gs-bk-cal-cell.has-available {
  cursor: pointer;
  font-weight: 700;
  color: #7E0527;
}

.gs-bk-cal-cell.has-available:hover,
.gs-bk-cal-cell.has-available:focus {
  background: var(--gs-bk-color-hover);
  outline: 2px solid var(--gs-bk-color-available);
  outline-offset: -2px;
}

.gs-bk-cal-cell.has-available:focus {
  outline-style: solid;
}

/* Jour complet */
.gs-bk-cal-cell.is-full .gs-bk-cal-day-num{
  opacity: 0.55;
}

/* Points de disponibilité */
.gs-bk-cal-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 3px;
  background: var(--gs-bk-color-available);
}

.gs-bk-cal-cell.is-full .gs-bk-cal-dot,
.gs-bk-dot-full {
  background: var(--gs-bk-color-full);
}

/* Légende */
.gs-bk-cal-legend {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  padding: 1rem 1.5rem 1.25rem;
  border-top: 1px solid var(--gs-bk-color-border);
  background: var(--gs-bk-color-header-bg);
  color: #6b5c58;
  font-size: 1.8rem;
}

.gs-bk-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.gs-bk-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.gs-bk-legend-dot.dot-avail { background: var(--gs-bk-color-available); }
.gs-bk-legend-dot.dot-full  { background: var(--gs-bk-color-full); }

/* ---------------------------------------------------------------------------
   Modal / Popin
   --------------------------------------------------------------------------- */

.gs-bk-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--gs-bk-modal-z);
}

.gs-bk-modal-dialog {
  position: fixed;
  z-index: calc(var(--gs-bk-modal-z) + 1);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 460px);
  max-height: 85vh;
  background: #fff;
  border-radius: var(--gs-bk-radius);
  box-shadow: 0 8px 32px rgba(126, 5, 39, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#gs-booking-modal[hidden] {
  display: none;
}

body.gs-bk-modal-open {
  overflow: hidden;
}

/* Header de la popin */
.gs-bk-modal-header {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--gs-bk-color-border);
  background: var(--gs-bk-color-header-bg);
  position: relative;
}

.gs-bk-modal-title {
  margin: 0 2rem 0 0;
  font-weight: 700;
  color: #7E0527;
}

.gs-bk-modal-date {
  margin: 0.25rem 0 0;
  color: #6b5c58;
  text-transform: capitalize;
}

.gs-bk-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--gs-bk-color-border);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  color: #7E0527;
  transition: background 0.15s;
}

.gs-bk-modal-close:hover {
  background: var(--gs-bk-color-hover);
}

/* Corps : liste de créneaux */
.gs-bk-modal-body {
  overflow-y: auto;
  padding: 1.25rem 1.5rem 1.5rem;
}

.gs-bk-modal-slots {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Ligne de créneau */
.gs-bk-slot-item {
  display: flex;
  align-items: center;
}

.gs-bk-slot-item.is-full {
  opacity: 0.5;
  pointer-events: none;
}

.gs-bk-slot-item.is-full .gs-bk-slot-time {
  color: #888;
}

.gs-bk-slot-item.is-full .gs-bk-slot-full {
  margin-left: auto;
  color: var(--gs-bk-color-full);
  font-style: italic;
}

/* Bouton créneau disponible – style fondation */
.gs-bk-slot-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--gs-bk-color-border);
  border-radius: 9rem;
  cursor: pointer;
  transition: background 0.2s ease-in-out, border-color 0.2s, color 0.2s;
  font-family: inherit;
  font-size: 1.4rem;
  color: #7E0527;
  text-align: left;
}

.gs-bk-slot-btn:hover {
  background: linear-gradient(to right, #FA3A50 0%, #FDB35D 100%);
  border-color: transparent;
  color: #fff;
}

.gs-bk-slot-btn:hover .gs-bk-slot-cta {
  color: #fff;
}

.gs-bk-slot-btn:active {
  background: linear-gradient(133.21deg, #E33039 0%, #E39336 100%);
}

.gs-bk-slot-time {
  font-weight: 700;
}

.gs-bk-slot-cta {
  color: var(--gs-bk-color-available);
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

/* Tablette : le calendrier monte à 80 % */
@media (max-width: 900px) {
  #gs-booking-calendar {
    width: 80%;
  }
}

/* Mobile */
@media (max-width: 600px) {
  :root {
    --gs-bk-cell-size:     3.6rem;   /* cellules plus hautes */
    --gs-bk-font-size-day: 1.15rem;  /* n° de jour lisibles */
  }

  /* Espace autour du calendrier via le wrapper, pas en supprimant la bordure */
  .gs-booking-calendar-wrapper .p-wide--y {
    padding: 1.25rem 1rem !important;
  }

  /* Calendrier pleine largeur du wrapper avec son espace latéral */
  #gs-booking-calendar {
    width: 100%;
  }

  /* Davantage d'espace vertical autour des noms de jours */
  .gs-bk-cal-weekday {
    padding: 0.6rem 0 0.9rem;
    font-size: 1rem;
  }

  .gs-bk-cal-grid {
    padding: 0.75rem 0.75rem 0.5rem;
    gap: 3px;
  }

  /* Légende : passe sur deux lignes si nécessaire */
  .gs-bk-cal-legend {
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    padding: 0.85rem 1rem 1rem;
  }

  /* Popin en slide-up depuis le bas */
  .gs-bk-modal-dialog {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-height: 75vh;
    border-radius: var(--gs-bk-radius) var(--gs-bk-radius) 0 0;
  }
}