/* ==========================================================================
   CALENDARIO CAMERA - STILE MINIMALE E PROFESSIONALE
   ========================================================================== */

/* Contenitore Principale */
.sg-room-calendar {
  width: 100%;
  overflow: visible !important;
}

/* Struttura Esterna del Calendario */
.sg-room-calendar .datepick {
  width: 100% !important;
  max-width: 100% !important;
  border: 1px solid #111111 !important; /* Bordo sottile scuro esterno */
  font-family: 'Futura', 'Helvetica Neue', Arial, sans-serif;
  background: #ffffff !important;
}

/* Layout Mesi Affiancati */
.sg-room-calendar .datepick-month-row {
  display: flex !important;
  width: 100% !important;
}

/* Singolo Mese (Split 50%) */
.sg-room-calendar .datepick-month {
  width: 50% !important;
  flex: 1 1 50% !important;
  border: 0 !important;
}

/* Divisione verticale tra i due mesi (come da seconda foto) */
.sg-room-calendar .datepick-month:first-child {
  border-right: 1px solid #111111 !important;
}

/* Tabelle Interne */
.sg-room-calendar .datepick table {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

/* Intestazione Mese (GIUGNO / LUGLIO) */
.sg-room-calendar .datepick-month-header,
.sg-room-calendar .datepick-month-header a,
.sg-room-calendar .datepick-month-header span {
  color: #111111 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important; /* Tutto maiuscolo */
  letter-spacing: 1px !important;
  padding: 15px 10px !important;
  border-bottom: 1px solid #111111 !important;
}

/* Giorni della Settimana (L M M G V S D) */
.sg-room-calendar .datepick th {
  color: #111111 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 10px 0 !important;
}

/* Celle dei Giorni (Numeri + Prezzi) */
.sg-room-calendar .datepick td {
  width: auto !important;
  height: 55px !important; /* Spazio verticale per far respirare i testi */
  padding: 6px 3px !important;
  text-align: center;
  vertical-align: middle !important;
  background: #ffffff !important;
}
.mphb-calendar .datepick-month table {
  height: auto !important;
}

/* Struttura Testi Interni */
.sg-room-calendar .datepick td span,
.sg-room-calendar .datepick td a {
  font-size: 14px !important; /* Numero del giorno leggermente più grande */
  font-weight: 500 !important;
  line-height: 1.2 !important;
  margin-bottom: 3px !important;
  max-width: 100% !important;
}

/* Prezzo dentro le celle del calendario */
.sg-room-calendar .mphb-price {
  display: block !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #111111 !important;
  white-space: nowrap !important; /* Blocca il testo su una sola riga (es. € 380) */
  margin-top: 4px !important;
}


/* ==========================================================================
   STATI DEI GIORNI (Colori basati sulla seconda foto)
   ========================================================================== */

/* 1. GIORNI DISPONIBILI (Testo Verde, Sfondo Bianco) */
.sg-room-calendar .mphb-available-date,
.sg-room-calendar .datepick td.mphb-available-date,
.sg-room-calendar .datepick td.mphb-available-date a,
.sg-room-calendar .datepick td.mphb-available-date span {
  color: #111111; /* Verde sobrio ed elegante */
}

/* 2. GIORNI NON DISPONIBILI / PASSATI (Sfondo Grigio Chiaro, Testo Nero) */
.sg-room-calendar .mphb-unavailable-date,
.sg-room-calendar .datepick td.mphb-unavailable-date {
  background: #f0f0f0 !important; /* Grigio pulito neutro */
}
.sg-room-calendar .datepick td.mphb-unavailable-date a,
.sg-room-calendar .datepick td.mphb-unavailable-date span {
  background: transparent !important;
  color: #111111 !important;
}

/* 3. GIORNI PRENOTATI / BLOCCATI (Opzionale: Testo Rosso su Sfondo Grigio) */
/* Nota: se vuoi l'effetto "rosso" della seconda immagine per specifici giorni non disponibili */
.sg-room-calendar .datepick td.mphb-unavailable-date span[style*="color"], 
.sg-room-calendar .datepick td.mphb-unavailable-date.special-block span {
  color: #d32f2f !important; /* Rosso elegante */
}

/* 4. GIORNI VUOTI / FUORI MESE */
.sg-room-calendar .datepick-other-month,
.sg-room-calendar .datepick-disabled {
  background: #ffffff !important;
  color: transparent !important; /* Nasconde i numeri fuori mese per massima pulizia */
}
.sg-room-calendar .datepick-other-month * {
  display: none !important;
}

/* ==========================================================================
   INTERAZIONE: SELEZIONE CHECK-IN / CHECK-OUT (Stile Oro/Bronzo)
   ========================================================================== */

/* Giorno cliccato (Check-in / Check-out) */
.datepick-selected,
.datepick-selected a,
.datepick-selected span,
.datepick td:has(.datepick-selected) {
  background: #9b8150 !important; /* Il tuo oro corporate */
  color: #ffffff !important;
}
.datepick-selected .mphb-price {
  color: #ffffff !important;
}

/* Giorni intermedi (Range tra check-in e check-out) */
.datepick-highlight,
.datepick-highlight a,
.datepick-highlight span,
.datepick td:has(.datepick-highlight) {
  background: #e9dfce !important; /* Oro chiarissimo di transizione */
  color: #111111 !important;
}

/* ==========================================================================
   RESPONSIVE (Mobile)
   ========================================================================== */
@media (max-width: 768px) {
  .sg-room-calendar {
    width: 100%;
    margin: 45px auto 15px;
    overflow: visible !important;
  }

  .sg-room-calendar .datepick {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Un solo mese per riga */
  .sg-room-calendar .datepick-month-row {
    display: block !important;
    width: 100% !important;
  }

  .sg-room-calendar .datepick-month {
    width: 100% !important;
    float: none !important;
    flex: none !important;
    margin: 0 0 24px !important;
    border: 0 !important;
  }

  .sg-room-calendar .datepick-month table,
  .sg-room-calendar .datepick table {
    width: 100% !important;
    table-layout: fixed !important;
  }

  .sg-room-calendar .datepick th,
  .sg-room-calendar .datepick td {
    width: calc(100% / 7) !important;
    height: 46px !important;
    padding: 2px !important;
    box-sizing: border-box;
    overflow: hidden;
  }

  .sg-room-calendar .mphb-date-cell {
    display: flex !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 3px 1px !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 10px !important;
  }

  .sg-room-calendar .mphb-date-cell__price {
    display: block !important;
    width: 100%;
    margin-top: 2px;
    white-space: nowrap;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .sg-room-calendar .mphb-date-cell__price .mphb-price,
  .sg-room-calendar .mphb-date-cell__price .mphb-currency {
    font-size: 9px !important;
    line-height: 1 !important;
  }
}
