.reservation-page { background: #fffbe0; color: #312e2e; }
.reservation { padding: 22px 3.4vw 36px; }
.reservation-title { margin: 0 0 42px; font-family: var(--font-melodrama); font-size: clamp(48px, 8.65vw, 227px); font-weight: 400; line-height: 1.14; text-align: left; text-transform: uppercase; letter-spacing: -.015em; }
.reservation-form { display: grid; grid-template-columns: 43% 51%; grid-template-areas: 'calendar details' 'options submit' 'newsletter privacy'; justify-content: space-between; gap: 26px 0; font-family: var(--font-inter); font-weight: 300; }
.reservation-calendar { grid-area: calendar; min-width: 0; padding: 0 0 0 10px; }
.calendar-heading { display: flex; align-items: center; justify-content: center; gap: 28px; margin-bottom: 22px; }
.calendar-heading h2 { position: relative; margin: 0; min-width: 190px; text-align: center; font: 400 clamp(18px, 1.53vw, 29px)/1.2 var(--font-bodoni-72); text-transform: uppercase; }
.calendar-heading button { width: 40px; height: 40px; border: 0; background: transparent; color: inherit; font-size: 29px; cursor: pointer; }
.calendar-heading button:disabled { opacity: .25; cursor: default; }
.calendar-days { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
.calendar-day { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; height: auto; aspect-ratio: .72; padding: 4px 2px; background: transparent; color: inherit; border: 1px solid #605c50; border-radius: 10px; font: 300 clamp(24px, 2.635vw, 28px)/1 var(--font-inter); cursor: pointer; }
.calendar-day:disabled { opacity: .32; cursor: not-allowed; }
.calendar-day:not(:disabled):hover { background: #f8e9bc; }
.calendar-day[aria-pressed='true'] { background: #f68100; color: #231e18; border-color: #231e18; }
.date-feedback { min-height: 18px; margin: 10px 0 0; font-size: 12px; visibility: hidden; }
.reservation-options { grid-area: options; display: grid; gap: 10px; align-content: start; }
.reservation-details { grid-area: details; display: grid; grid-template-rows: repeat(4, auto) 1fr; gap: 16px; padding-top: 14px; }
.reservation-control { display: block; min-width: 0; }
.reservation-control input, .reservation-control select, .reservation-control textarea { box-sizing: border-box; display: block; width: 100%; min-width: 0; min-height: 40px; padding: 6px 13px; border: 1px solid #605c50; border-radius: 8px; background: transparent; color: inherit; font: 300 clamp(16px, 1.445vw, 22px)/1.3 var(--font-inter); }
.reservation-control input::placeholder, .reservation-control textarea::placeholder { color: inherit; opacity: 1; }
.reservation-control select { appearance: none; padding-right: 42px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 18 12'%3E%3Cpath d='m2 3 7 7 7-7' fill='none' stroke='%23312e2e'/%3E%3C/svg%3E") no-repeat right 15px center; }
.reservation-control option { background: #fffbe0; }
.reservation-notes textarea { height: clamp(90px, 12.5vh, 125px); min-height: 90px; resize: none; }
.reservation-submit { grid-area: submit; align-self: start; }
.reservation-submit button { display: flex; justify-content: space-between; align-items: center; gap: 40px; width: min(100%, 272px); padding: 10px 15px; border: 1px solid #312e2e; border-radius: 10px; background: #312e2e; color: #faf8f0; cursor: pointer; font: 400 20.4px/1.2 var(--font-cabin-condensed); text-transform: uppercase; }
.reservation-submit button:hover { background: #4a443a; }
.reservation-submit button:disabled { opacity: .6; cursor: wait; }
.reservation-submit svg { width: 29px; height: 24px; }
#reservation-status { max-width: 490px; margin: 0 0 12px; font-size: 12px; line-height: 1.4; }
#reservation-status:empty { display: none; }
#reservation-status[data-state='error'] { color: #8b251b; }
#reservation-status[data-state='success'] { color: #28562d; font-style: italic; }
.reservation-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 15px; font-size: clamp(14px, 1.3175vw, 18px); line-height: 1.3; cursor: pointer; }
.reservation-check input { appearance: none; flex: 0 0 21px; height: 21px; margin: 2px 0 0; border: 1px solid #312e2e; border-radius: 5px; cursor: pointer; }
.reservation-check input:checked { appearance: auto; accent-color: #f68100; }
.reservation-newsletter { grid-area: newsletter; }
.reservation-privacy { grid-area: privacy; justify-self: end; justify-content: flex-end; text-align: right; max-width: 100%; }
.reservation-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.reservation :focus-visible { outline: 2px solid #b84e00; outline-offset: 4px; }
.reservation-skip { position: fixed; left: 12px; top: -100px; z-index: 10; padding: 12px; background: #fffbe0; color: inherit; }
.reservation-skip:focus { top: 12px; }
@media (max-width: 1000px) {
  .reservation-title { margin-bottom: 30px; }
  .calendar-days { gap: 8px; }
  .reservation-form { grid-template-columns: 45% 51%; }
  .calendar-day { min-height: 44px; }
}
@media (max-width: 700px) {
  .reservation { padding: 25px 20px 36px; }
  .reservation-title { font-size: clamp(45px, 11vw, 76px); line-height: 1.02; letter-spacing: -.04em; }
  .reservation-form { grid-template-columns: 1fr; grid-template-areas: 'calendar' 'options' 'details' 'newsletter' 'privacy' 'submit'; gap: 22px; }
  .reservation-calendar { padding: 0; }
  .calendar-days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
  .calendar-day { font-size: clamp(24px, 6vw, 28px); border-radius: 7px; }
  .reservation-details { padding: 0; gap: 12px; }
  .reservation-notes textarea { height: 110px; min-height: 110px; }
  .reservation-privacy { justify-self: end; }
  .reservation-check { margin: 0; justify-self: start; }
  .reservation-submit button { width: 100%; }
}

/* Desktop: la griglia distribuisce lo spazio disponibile, senza tagliare il modulo. */
@media (min-width: 701px) {
  .reservation {
    box-sizing: border-box;
    height: calc(100svh - var(--header-height));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(8px, 1.5vh, 18px);
    padding: 12px 3.4vw 18px;
  }
  .reservation-title { margin: 0; line-height: 1; letter-spacing: -.025em; white-space: nowrap; }
  .reservation-form { min-height: 0; grid-template-rows: minmax(0, 1fr) auto auto; gap: clamp(10px, 1.7vh, 18px) 0; }
  .reservation-calendar { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding-left: 0; }
  .calendar-heading { width: 100%; margin: 0 0 20px; gap: 14px; }
  .calendar-heading button { display: grid; place-items: center; height: 30px; padding: 0; line-height: 1; font-size: 25px; }
  .calendar-days { --day-gap: clamp(8px, 1.1vw, 18px); min-height: 0; width: 100%; height: 100%; max-height: calc(4 * min(5.2vw, 8.5vh) + 3 * var(--day-gap)); grid-template-rows: repeat(4, minmax(0, 1fr)); align-content: start; gap: var(--day-gap); }
  .calendar-day { min-height: 0; aspect-ratio: auto; padding: 3px 1px; border-radius: 8px; font-size: min(28px, 2.635vw, 4.7vh); }
  .date-feedback { margin-top: 6px; min-height: 14px; font-size: 10px; line-height: 1.3; }
  .reservation-details { min-height: 0; padding-top: 0; grid-template-rows: repeat(4, auto) auto; align-content: start; gap: clamp(7px, 1.3vh, 12px); }
  .reservation-notes { min-height: 0; }
  .reservation-notes textarea { height: clamp(80px, 12.5vh, 125px); min-height: 80px; }
  .reservation-options { gap: 8px; }
  .reservation-check { margin-top: 70px; }
}
@media (min-width: 701px) and (max-height: 750px) {
  .reservation { padding-top: 8px; padding-bottom: 10px; }
  .reservation-control input, .reservation-control select, .reservation-control textarea { min-height: 34px; padding-top: 4px; padding-bottom: 4px; }
  .calendar-heading { margin-bottom: 16px; }
  .reservation-check { font-size: min(1.3175vw, 17px); }
}

/* Calendario e controlli allineati alla griglia del modulo. */
.calendar-heading { justify-content: flex-start; }
.calendar-heading h2 {
  order: -1;
  min-width: 0;
  text-align: left;
  font: 400 22px/1.2 var(--font-bodoni-72);
}
.calendar-heading button:disabled { display: none; }
.calendar-day { width: 43px; height: 59px; aspect-ratio: auto; font: 300 22px/1 var(--font-inter); }
.reservation-check { align-items: center; gap: 12px; width: fit-content; }
.reservation-check input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; }
.reservation-privacy { text-align: left; }
.reservation-page .reservation-submit .site-button {
  width: fit-content;
  background: var(--black);
  border: 0;
  cursor: pointer;
}
@media (min-width: 701px) {
  .reservation { height: auto; min-height: calc(100svh - var(--header-height)); grid-template-rows: auto auto; align-content: start; gap: 28px; }
  .reservation-form { grid-template-columns: 44% 45.5%; grid-template-rows: auto auto auto; row-gap: 24px; 
  padding-top: 50px;}

  .reservation-calendar { grid-template-rows: 50px auto auto; }
  .calendar-heading { margin: 0; align-self: start; }
  .calendar-days {
    height: auto;
    max-height: none;
    grid-template-columns: repeat(12, 43px);
    grid-template-rows: repeat(4, 59px);
    justify-content: space-between;
    gap: 11px 0;
  }
  .reservation-details { padding-top: 50px; grid-template-rows: repeat(4, 40px) minmax(80px, 1fr); gap: 11px; }
  .reservation-notes textarea { height: 100%; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .calendar-days { grid-template-columns: repeat(6, 43px); grid-template-rows: none; grid-auto-rows: 59px; }
}
@media (max-width: 700px) {
  .calendar-days { grid-template-columns: repeat(7, minmax(0, 43px)); justify-content: space-between; gap: 8px 4px; }
  .calendar-day { width: 100%; }
}

/* Mese tra le frecce e invio allineato alla base dei selettori. */
.calendar-heading {
  justify-content: flex-start;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 30px;
}
.calendar-heading h2 { order: 0; }
.calendar-heading button,
.calendar-heading button:disabled {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 0;
}
@media (min-width: 701px) {
  .reservation-calendar { grid-template-rows: 76px auto auto; }
  .calendar-heading { margin-bottom: 30px; }
  .reservation-details { padding-top: 76px; }
  .reservation-submit { position: relative; align-self: end; }
}

/* Prenotazione mobile: margini fissi e calendario di undici colonne. */
@media (max-width: 440px) {
  .reservation {
    box-sizing: border-box;
    min-height: calc(100svh - var(--header-height));
    padding: clamp(12px, 2.2svh, 22px) 25px 16px;
  }
  .reservation-title {
    margin: 0 0 clamp(14px, 2.4svh, 24px);
    font-size: clamp(40px, 15vw, 66px);
    line-height: 1;
    letter-spacing: -.025em;
    white-space: nowrap;
  }
  .reservation-title__desktop { display: none; }
  .reservation-form {
    --reservation-mobile-gap: clamp(8px, 1.4svh, 12px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'calendar' 'options' 'details' 'submit' 'newsletter' 'privacy';
    gap: var(--reservation-mobile-gap);
  }
  .calendar-heading { margin-bottom: 12px; padding-bottom: 0; gap: 12px; }
  .calendar-heading h2 { font-size: clamp(14px, 4.090909vw, 16px); }
  .calendar-days {
    grid-template-columns: repeat(11, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: clamp(34px, 9.1vw, 40px);
    gap: 8px clamp(2px, 1vw, 4px);
  }
  .calendar-day {
    width: 100%; height: 100%; min-height: 0;
    padding: 0; border-radius: 5px;
    font-size: clamp(14px, 3.64vw, 16px);
  }
  .date-feedback { margin-top: 6px; min-height: 13px; font-size: 10px; line-height: 1.3; }
  .reservation-options, .reservation-details { gap: 8px; }
  .reservation-options, .reservation-details { margin-top: calc(30px - var(--reservation-mobile-gap)); }
  .reservation-details { grid-template-rows: repeat(4, 32px) 40px; padding: 0; }
  .reservation-control input,
  .reservation-control select,
  .reservation-control textarea {
    height: 32px; min-height: 32px; padding: 3px 9px;
    font-size: 16px; line-height: 1.3; border-radius: 6px;
  }
  .reservation-control select { padding-right: 32px; background-position: right 10px center; }
  .reservation-notes textarea { height: 40px; min-height: 40px; }
  .reservation-check {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: start;
    justify-self: start;
    width: 100%; margin: 0; padding: 0; gap: 8px;
    font-size: 14px; line-height: 1.25; text-align: left;
  }
  .reservation-check input { width: 14px; height: 14px; flex-basis: 14px; border-radius: 2px; }
  .reservation-newsletter { margin-top: 20px; }
  .reservation-privacy {
    justify-content: flex-start;
    justify-self: start;
    margin-top: calc(12px - var(--reservation-mobile-gap));
  }
  .reservation-check input { margin-top: 2px; }
  .reservation-submit { margin: calc(30px - var(--reservation-mobile-gap)) 0; }
}

/* Contenimento mobile: le distanze si riducono con l'altezza disponibile. */
@media (max-width: 440px) {
  .reservation-page { width: 100%; max-width: 100%; }
  .reservation-page .site-header { width: 100%; max-width: 100%; }
  .reservation-page .site-header > * { min-width: 0; }
  .reservation {
    width: 100%; max-width: 100%; min-width: 0;
    --reservation-section-space: clamp(10px, calc((100svh - 740px) * .14), 30px);
    padding-top: clamp(8px, 1.5svh, 14px);
    padding-bottom: 10px;
  }
  .reservation-form > * { min-width: 0; max-width: 100%; }
  .reservation-title { margin-bottom: clamp(8px, 1.5svh, 14px); }
  .reservation-options, .reservation-details {
    margin-top: max(0px, calc(var(--reservation-section-space) - var(--reservation-mobile-gap)));
  }
  .reservation-submit {
    margin: max(0px, calc(var(--reservation-section-space) - var(--reservation-mobile-gap))) 0;
  }
  .reservation-newsletter { margin-top: max(0px, calc(var(--reservation-consent-gap, 40px) - var(--reservation-mobile-gap))); }
}
@media (max-width: 440px) and (max-height: 740px) {
  .reservation-form { --reservation-mobile-gap: 6px; }
  .calendar-heading { margin-bottom: 6px; }
  .calendar-days { grid-auto-rows: 30px; row-gap: 4px; }
  .reservation-options, .reservation-details { gap: 5px; }
  .reservation-details { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 32px 32px 40px; }
  .reservation-notes { grid-column: 1 / -1; }
  .reservation-check { font-size: 12px; line-height: 1.2; }
  .reservation-privacy { margin-top: 0; }
}
@media (max-width: 440px) and (max-height: 620px) {
  .reservation { --reservation-section-space: 4px; padding-top: 4px; padding-bottom: 4px; }
  .reservation-title { font-size: 40px !important; margin-bottom: 4px; }
  .reservation-form { --reservation-mobile-gap: 4px; }
  .calendar-days { grid-auto-rows: 26px; }
  .calendar-heading { margin-bottom: 4px; }
  .reservation-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reservation-options > :last-child { grid-column: 1 / -1; }
  .reservation-options select { font-size: 14px; }
}

/* Adattamento misurato: nessun ingombro oltre l'area sotto la navbar. */
.reservation-fit { display: contents; }
@media (max-width: 440px) {
  .reservation {
    width: var(--reservation-available-width, 100%);
    height: var(--reservation-available-height, calc(100dvh - var(--header-height)));
    min-height: 0;
  }
  .reservation-fit { display: flow-root; }
  .reservation-fit .reservation-form { width: 100%; }
}

/* Frecce sottili proporzionate al titolo del mese. */
.calendar-heading button svg { display: block; width: 22px; height: 22px; }
@media (max-width: 440px) {
  .calendar-heading button svg {
    width: clamp(14px, 4.090909vw, 18px);
    height: clamp(14px, 4.090909vw, 18px);
  }
}