/* ==========================================================================
   ESTRIA — Prenota una call (booking a schermata singola: intro / calendario / slot)
   Colori locali dal Figma non presenti nei token:
   #404040 cella data, #737373 testo data inattiva
   ========================================================================== */

:root {
  --cell-bg: #404040;
  --cell-inactive-text: #737373;
}

body {
  background: var(--black);
}

/* Nel design della pagina Prenota Call la navbar non ha la CTA */
.navbar .navbar__cta {
  display: none;
}

/* Layout ------------------------------------------------------------------ */

.booking {
  background: var(--black);
  color: var(--grigio-3);
  padding-top: 190px;  /* 70 navbar + 120 */
  padding-bottom: 120px;
}

.booking__grid {
  display: grid;
  grid-template-columns: minmax(0, 464fr) minmax(0, 600fr) minmax(0, 328fr);
  gap: 30px;
  align-items: stretch;
}

/* Colonna sinistra: intro --------------------------------------------------- */

.booking__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

/* Debug 07/2026: il titolo scala con la colonna come il paragrafo
   sottostante (a 66px fissi sbordava alle larghezze intermedie).
   Regola base senza media query: il ramo mobile la sovrascrive più
   sotto (stessa specificità, vince per ordine). */
.booking__intro h1 {
  font-size: clamp(32px, 4.2vw, 66px);
  line-height: 1.1;
}

.booking__desc {
  display: flex;
  flex-direction: column;
  gap: 13px;
  color: var(--grigio-2);
}

.booking__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

/* i Tag-1 di questa pagina sono bianchi, non arancio */
.booking__tags .tag {
  color: var(--grigio-3);
}

.booking__connect {
  display: flex;
  align-items: center;
  gap: 30px;
}

.booking__social {
  display: flex;
  align-items: center;
  gap: 30px;
}

.booking__social a {
  display: flex;
  color: var(--grigio-3);
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .booking__social a:hover {
    color: var(--arancio-1);
  }
}

.booking__social a:active {
  color: var(--arancio-1);
}

/* gli SVG social sono neri: colorati via mask come le icone */
.icon--social-x {
  --icon: url("../../assets/logos/social-1.svg");
  -webkit-mask-image: url("../../assets/logos/social-1.svg");
  mask-image: url("../../assets/logos/social-1.svg");
}

.icon--social-in {
  --icon: url("../../assets/logos/social-2.svg");
  -webkit-mask-image: url("../../assets/logos/social-2.svg");
  mask-image: url("../../assets/logos/social-2.svg");
}

/* Colonna centrale: calendario ---------------------------------------------- */

.calendar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  background: var(--grigio-5);
  border-radius: 1px;
}

.calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
}

.calendar__nav {
  display: flex;
  gap: 8px;
}

.calendar__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--grigio-3);
  transition: color 0.2s ease;
}

.calendar__nav-btn .icon {
  width: 30px;
  height: 30px;
}

.calendar__nav-btn:disabled {
  color: var(--grigio-1);
  cursor: default;
}

@media (hover: hover) {
  .calendar__nav-btn:not(:disabled):hover {
    color: var(--arancio-1);
  }
}

.calendar__nav-btn:not(:disabled):active {
  color: var(--arancio-1);
}

.calendar__weekdays,
.calendar__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

/* Celle (componente Cell: Weekday / Date Default / Inactive / Active) */
.calendar__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0;
}

.calendar__weekday {
  color: var(--grigio-3);
}

.calendar__day {
  background: var(--cell-bg);
  color: var(--grigio-3);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.calendar__day:disabled {
  background: transparent; /* fill #333333 = sfondo del pannello */
  color: var(--cell-inactive-text);
  cursor: default;
}

@media (hover: hover) {
  .calendar__day:not(:disabled):not(.is-selected):hover {
    background: var(--grigio-1);
  }
}

.calendar__day:not(:disabled):not(.is-selected):active {
  background: var(--grigio-1);
}

.calendar__day.is-selected {
  background: var(--arancio-1);
  color: var(--black);
}

/* Colonna destra: slot orari + CTA ------------------------------------------ */

.booking__side {
  display: flex;
  flex-direction: column;
  gap: 30px;
  /* l'altezza della riga la detta il calendario: la colonna slot si adatta
     e la lista scorre dentro il pannello (nel design è tagliata) */
  height: 0;
  min-height: 100%;
}

.slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 15px;
  background: var(--grigio-5);
  border-radius: 1px;
  overflow: hidden;
}

.slots__header {
  min-height: 20px;
  color: var(--grigio-3);
}

.slots__date-short {
  display: none;
}

.slots__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 15px 0;
  overflow-y: auto;
  scrollbar-width: none; /* nel design la lista è tagliata, senza scrollbar */
}

.slots__list::-webkit-scrollbar {
  display: none;
}

.slots__empty {
  color: var(--cell-inactive-text);
}

/* Cell-2: bottone orario */
.slots__slot {
  flex: none;
  min-height: 40px;
  padding: 0 15px;
  background: var(--cell-bg);
  color: var(--grigio-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
  .slots__slot:not(.is-selected):hover {
    background: var(--grigio-1);
  }
}

.slots__slot:not(.is-selected):active {
  background: var(--grigio-1);
}

.slots__slot.is-selected {
  background: var(--arancio-1);
  color: var(--black);
}

.booking__cta {
  width: 100%;
}

/* stato inattivo: regola generale .btn--orange:disabled (components.css),
   aspetto M-2-Inactive da Figma (Debug 07/2026-2) */

.booking__cta-label--mobile {
  display: none;
}

/* Mobile --------------------------------------------------------------------- */

@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {
  .booking {
    padding-top: 130px;  /* 70 navbar + 60 */
    padding-bottom: 240px;
  }

  .booking__grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .booking__intro {
    margin-bottom: 60px; /* 60 + gap 30 = 90 fra "Connettiti" e calendario */
  }

  /* ripristina il t-2 mobile sopra il clamp desktop (stessa specificità) */
  .booking__intro h1 {
    font-size: 40px;
    line-height: 44px;
  }

  .booking__side {
    height: auto;
    min-height: 0;
  }

  /* pannello slot ad altezza fissa con scroll interno, come da design */
  .slots {
    flex: none;
    height: 489px;
  }

  .slots__date-long { display: none; }
  .slots__date-short { display: inline; }

  /* la CTA di conferma su mobile è una L-1 */
  .booking__cta {
    min-height: 60px;
    padding: 20px 30px;
  }

  .booking__cta-label--desktop { display: none; }
  .booking__cta-label--mobile { display: inline; }
}

/* Prenotazione: form dati cliente (step 2) e conferma (step 3) --------------
   Nessun design Figma dedicato: riprende il pannello scuro degli slot. */

.booking__side .is-hidden { display: none !important; }
.booking-form[hidden], .booking-success[hidden] { display: none !important; }

.booking-form,
.booking-success {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px 15px;
  background: var(--grigio-5);
  border-radius: 1px;
  overflow-y: auto;
  scrollbar-width: none;
}

.booking-form::-webkit-scrollbar,
.booking-success::-webkit-scrollbar { display: none; }

.booking-form__recap { color: var(--grigio-2); }

.booking-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--grigio-2);
}

.booking-form__field input,
.booking-form__field textarea {
  border: 1px solid var(--grigio-1);
  border-radius: 1px;
  background: transparent;
  color: var(--white);
  padding: 10px 12px;
  resize: vertical;
}

.booking-form__field input:focus,
.booking-form__field textarea:focus {
  outline: none;
  border-color: var(--arancio-1);
}

/* honeypot anti-spam: invisibile agli umani, non usare display:none
   (alcuni bot lo saltano) */
.booking-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* riserva l'altezza del widget Turnstile per evitare salti di layout */
.booking-form__captcha { min-height: 65px; }

.booking-form__error {
  color: var(--white);
  border-left: 3px solid var(--arancio-1);
  padding-left: 10px;
}

.booking-form__privacy { color: var(--grigio-2); }

.booking-form__privacy a {
  color: var(--white);
  text-decoration: underline;
}

.booking-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.booking-form__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
  padding: 8px 0;
}

.booking-form__back .icon {
  width: 14px;
  height: 14px;
}

.booking-success h2 { color: var(--white); }
.booking-success p { color: var(--grigio-2); }