body {
  margin: 0;
  font-family: Didot, serif !important;
}

#calendar-wrapper {
  width: 70%;
  margin: 0 auto;
  overflow: hidden;
  transition: width 0.3s ease;
}

#calendar-container {
  display: flex;
  overflow-x: auto;
  padding: 10px;
  gap: 10px;
  scroll-snap-type: x mandatory;
}

.month {
  box-sizing: border-box;
  flex: 0 0 calc((100% - 10px) / 2);
  /* border: 1px solid #ccc; */
  border-radius: 5px;
  padding: 10px;
  min-width: 280px;
  scroll-snap-align: start;
  font-family: Didot, serif !important;
}

.month h3 {
  text-align: center;
  margin-top: 0;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  font-size: 18px;
  position: relative;
}

.days::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 22px; /* ancora più in alto, subito sotto i giorni della settimana */
  height: 1px;
  background: #000;
  z-index: -1;
  pointer-events: none;
}

.days > div:nth-child(-n+7) {
  border-bottom: none;
  padding-bottom: 2px;
}

.day {
  padding: 5px;
  border-radius: 2px;
  position: relative;
  font-size: 18px;
  font-family: Didot, serif !important;
}

/* Colori per le diverse disponibilità */
.available {
  background: repeating-linear-gradient(
    45deg,
    #6fdc6f 0px, /* verde intermedio */
    #6fdc6f 1px,
    transparent 1px,
    transparent 5px
  );
  opacity: 0.8;
}

.day.not-available {
  background: repeating-linear-gradient(
    45deg,
    #aaaaaa 0px,
    #aaaaaa 1px,
    transparent 1px,
    transparent 5px
  ) !important;
}

.day.reserved {
  background: repeating-linear-gradient(
    45deg,
    #ff9999 0px, /* rosso intermedio tra #ffb3b3 e #ff8080 */
    #ff9999 1px,
    transparent 1px,
    transparent 5px
  );
  opacity: 0.8;
}

/* Day cell styling for alignment */
.days div {
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Full height compatibility */
html, body {
  height: 100%;
  box-sizing: border-box;
}

/* Scrollbar cross-browser styling */
#calendar-container {
  scrollbar-width: thin;
  scrollbar-color: #888 #f0f0f0;
}

#calendar-container::-webkit-scrollbar {
  height: 8px;
}

#calendar-container::-webkit-scrollbar-track {
  background: #f0f0f0;
}

#calendar-container::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
  border: 2px solid #f0f0f0;
}

#calendar-container::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

@media (max-width: 600px) {
  .month {
    flex: 0 0 50%;
  }
}

#calendar-container {
  --months-visible: 2; /* default fallback */
}

.month {
  flex: 0 0 calc(100% / var(--months-visible));
}

.day.check-in {
  position: relative;
  background: #fff;
  z-index: 1;
}

.day.check-in::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, #ff9999 0px, #ff9999 1px, transparent 1px, transparent 5px);
  /* metà inferiore sotto la diagonale (da alto-sinistra a basso-destra) */
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 2;
  opacity: 0.8;
  pointer-events: none;
}

.day.check-in::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    #6fdc6f 0px, /* verde intermedio, come .available */
    #6fdc6f 1px,
    transparent 1px,
    transparent 5px
  );
  /* Triangolo verde parallelo alla diagonale ↘ */
  clip-path: polygon(0 0, 85% 0, 0 85%);
  z-index: 1;
  opacity: 0.8;
  pointer-events: none;
}

.day.check-in.reserved {
  background: repeating-linear-gradient(45deg, #ff9999 0px, #ff9999 1px, transparent 1px, transparent 5px);
}

.day.check-out {
  position: relative;
  background: #fff;
  z-index: 1;
}

.day.check-out::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, #ff9999 0px, #ff9999 1px, transparent 1px, transparent 5px);
  /* metà superiore sopra la diagonale (da alto-sinistra a basso-destra) */
  clip-path: polygon(0 0, 0 100%, 100% 0);
  z-index: 2;
  opacity: 0.8;
  pointer-events: none;
}

.day.check-out::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    #6fdc6f 0px, /* verde intermedio, come .available */
    #6fdc6f 1px,
    transparent 1px,
    transparent 5px
  );
  /* Triangolo verde parallelo alla diagonale ↘, ma in basso a destra */
  clip-path: polygon(100% 100%, 100% 15%, 15% 100%);
  z-index: 1;
  opacity: 0.8;
  pointer-events: none;
}

.day.check-out.reserved {
  background: repeating-linear-gradient(45deg, #ff9999 0px, #ff9999 1px, transparent 1px, transparent 5px);
}

.day.check-in .day-content,
.day.check-out .day-content {
  position: relative;
  z-index: 3;
  font-weight: normal;
}

.day.available.not-available {
  background: repeating-linear-gradient(
    45deg,
    #aaaaaa 0px,
    #aaaaaa 1px,
    transparent 1px,
    transparent 5px
  ) !important;
}

.day.check-in-check-out-diagonal {
  position: relative;
  background: repeating-linear-gradient(45deg, #ff9999 0px, #ff9999 1px, transparent 1px, transparent 5px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.day.check-in-check-out-diagonal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: white;
  /* Banda diagonale parallela alla diagonale ↘, spessore leggermente ridotto (~9%) */
  clip-path: polygon(
    0 91%, 0 100%, 9% 100%, 100% 9%, 100% 0, 91% 0
  );
  z-index: 1;
  pointer-events: none;
}

.day.check-in-check-out-diagonal .day-content {
  position: relative;
  z-index: 2;
}

/* Unico colore per i numeri dei giorni, sempre - deve essere l'ULTIMA regola di colorazione! */
.day, .day * {
  color: #000 !important;
  font-weight: bold !important;
}

.days::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px; /* ← riga in fondo */
  height: 1px;
  background: #000;
  z-index: -1;
  pointer-events: none;
}