/* Layout do agendamento e estados do formulário. */ .booking-page{
  min-height: 100vh;
}
.booking-header{
  gap: 20px;
}
.booking-back{
  font-size: 14px;
  color: var(--clay-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.booking-main{
  width: 100%;
  max-width: var(--wrap);
  margin: auto;
  padding: 36px var(--gutter) var(--section-space);
}
.booking-intro{
  padding-bottom: 32px;
}
.booking-intro > .eyebrow{
  margin-bottom: 14px;
}
.booking-intro h1{
  max-width: 900px;
  margin: 0;
  font: 400 clamp(36px,4.8vw,58px)/1.1 var(--serif);
  letter-spacing: -.03em;
}
.booking-intro-copy{
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
  gap: 32px;
  margin-top: 20px;
}
.booking-intro-copy > p{
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}
.booking-note{
  color: var(--clay-dark);
  font: italic 19px/1.5 var(--serif);
}
.booking-card{
  width: 100%;
  padding: clamp(20px,3vw,36px);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fbf8f5;
}
.booking-progress{
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
}
.booking-progress li{
  padding-bottom: 14px;
  border-bottom: 2px solid var(--line);
}
.booking-progress [aria-current=step]{
  border-color: var(--clay-dark);
  color: var(--clay-dark);
  font-weight: 700;
}
.booking-message{
  margin: 0 0 20px;
  padding: 16px;
  border-left: 3px solid var(--clay-dark);
  background: #f4e6de;
  color: #6f3c2b;
  font-size: 15px;
}
.booking-recovery{
  display: flex;
  align-items: center;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
#booking-submit-status{
  padding: 14px 16px;
  background: #f1e8e1;
  color: var(--clay-dark);
}
#booking-wizard{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: 32px;
  align-items: start;
}
#booking-wizard[inert]{
  opacity: .65;
}
.booking-section{
  min-width: 0;
}
.booking-section-title{
  display: flex;
  gap: 12px;
  margin-bottom: 22px;
}
.booking-section-title > span{
  padding-top: 5px;
  color: var(--clay-dark);
  font-size: 12px;
}
.booking-section h2,.booking-success h2{
  margin: 0 0 6px;
  font: 400 28px/1.2 var(--serif);
}
.booking-section-title p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.calendar-panel{
  width: 100%;
  max-width: 560px;
}
.calendar-heading{
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) 44px;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  text-align: center;
}
.calendar-heading h3{
  margin: 0;
  font: 400 24px/1.2 var(--serif);
  text-transform: capitalize;
}
.calendar-heading button{
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--clay-dark);
  font-size: 26px;
  cursor: pointer;
}
.calendar-heading button:disabled{
  opacity: .4;
  cursor: default;
}
.calendar-weekdays,.calendar-days{
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  gap: 6px;
  text-align: center;
}
.calendar-weekdays{
  padding-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.calendar-day{
  min-width: 0;
  min-height: 48px;
  padding: 8px 2px;
  border: 1px solid #cbbbaf;
  border-radius: 3px;
  background: #fffdfa;
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  transition: background .15s,border-color .15s;
}
.calendar-day:disabled{
  background: #f2eeeb;
  border-color: #e9e0d9;
  color: #9b8b81;
  cursor: default;
}
.calendar-day.is-outside-month{
  background: transparent;
  border-color: transparent;
  color: #aa9c92;
}
.calendar-day.is-today:not(.is-selected){
  border-color: var(--clay-dark);
  color: var(--clay-dark);
  font-weight: 700;
}
.calendar-day.is-selected{
  border-color: var(--clay-dark);
  background: var(--clay-dark);
  color: #fff;
}
.calendar-panel > p{
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
}
#calendar-status,#availability-status{
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
}
#calendar-status:empty{
  display: none;
}
.available-slots{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}
.slot-button{
  min-height: 48px;
  padding: 10px;
  border: 1px solid #cbbbaf;
  border-radius: 3px;
  background: #fffdfa;
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  transition: background .15s,border-color .15s;
}
.slot-button[aria-pressed=true]{
  background: var(--clay-dark);
  border-color: var(--clay-dark);
  color: #fff;
}
.form-grid{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
}
.form-grid label{
  display: grid;
  align-content: start;
  gap: 8px;
  color: #59483f;
  font-size: 14px;
}
.form-grid input,.form-grid textarea{
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid #bba99c;
  border-radius: 3px;
  background: #fffdfa;
  color: var(--ink);
  font: 16px/1.5 var(--sans);
}
.form-grid input{
  min-height: 48px;
}
.form-grid textarea{
  resize: vertical;
  min-height: 104px;
}
.form-grid input::placeholder{
  color: var(--muted);
  opacity: 1;
}
.form-grid [aria-invalid=true]{
  border: 2px solid #98482f;
}
.field-error{
  color: #853e28;
  font-size: 13px;
}
.field-wide{
  grid-column: 1/-1;
}
.booking-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--clay-dark);
  border-radius: 3px;
  background: var(--clay-dark);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font: 600 14px/1.4 var(--sans);
  cursor: pointer;
  transition: background .2s,color .2s;
}
.booking-button:disabled{
  opacity: .5;
  cursor: not-allowed;
}
.booking-button.secondary{
  background: transparent;
  color: var(--clay-dark);
}
#review-section{
  grid-column: 1/-1;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.booking-summary{
  margin-bottom: 24px;
  padding: 24px;
  background: #f1e8e1;
}
.booking-summary dl{
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  font-size: 15px;
}
.booking-summary dl > div{
  display: grid;
  grid-template-columns: minmax(90px,.3fr) minmax(0,1fr);
  gap: 8px 20px;
}
.booking-summary dt{
  color: var(--muted);
}
.booking-summary dd{
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.review-actions{
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.booking-success{
  text-align: center;
  padding: 24px 0;
}
.booking-success h2{
  font-size: clamp(30px,4vw,40px);
}
.success-mark{
  display: block;
  margin: 0 auto 8px;
  color: #526c46;
  font-size: 36px;
}
.booking-success > .eyebrow{
  color: #4d643f;
}
.success-summary{
  display: grid;
  gap: 8px;
  max-width: 440px;
  margin: 24px auto;
  padding: 24px;
  background: #f1e8e1;
  font-size: 16px;
  overflow-wrap: anywhere;
}
.success-summary strong{
  font-size: 24px;
  color: var(--clay-dark);
}
.booking-footer{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: var(--wrap);
  margin: auto;
  padding: 24px var(--gutter);
  color: var(--muted);
  font-size: 12px;
}
.student-modal{
  width: min(600px,calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbf8f5;
  color: var(--ink);
  box-shadow: 0 24px 70px #1f16123d;
}
.student-modal::backdrop{
  background: #221a1699;
  backdrop-filter: blur(3px);
}
body:has(.student-modal[open]){
  overflow: hidden;
}
.student-modal-card{
  padding: 32px;
}
.student-modal-heading{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.student-modal-heading .eyebrow{
  margin-bottom: 10px;
}
.student-modal-heading h2{
  margin: 0 0 10px;
  font: 400 clamp(28px,4vw,34px)/1.15 var(--serif);
}
.student-modal-heading p:last-child{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  text-transform: capitalize;
}
.modal-close{
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--clay-dark);
  font-size: 26px;
  cursor: pointer;
}
.modal-availability-status{
  margin: 24px 0 12px;
  color: var(--clay-dark);
  font-size: 14px;
}
#student-form-help{
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 13px;
}
.student-form .booking-button{
  margin-top: 4px;
}
@media (hover: hover){
  .calendar-day:not(:disabled):not(.is-selected):hover,.slot-button:not([aria-pressed=true]):hover{
    border-color: var(--clay);
    background: #f4e6dc;
  }
  .calendar-heading button:not(:disabled):hover,.modal-close:hover,.booking-button.secondary:hover{
    background: #f1e8e1;
  }
  .booking-button:not(.secondary):not(:disabled):hover{
    background: #663925;
  }
}
@media (max-width: 800px){
  .booking-main{
    padding-top: 28px;
  }
  .booking-intro-copy{
    grid-template-columns: minmax(0,1fr);
    gap: 12px;
  }
  #booking-wizard{
    grid-template-columns: minmax(0,1fr);
    gap: 32px;
  }
  .calendar-panel{
    max-width: none;
  }
  .calendar-day{
    min-height: 52px;
  }
  .available-slots{
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
}
@media (max-width: 560px){
  .booking-main{
    padding: 22px 16px 56px;
  }
  .booking-card{
    padding: 22px 16px;
  }
  .booking-intro h1{
    font-size: clamp(36px,8.5vw,46px);
  }
  .booking-progress{
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px 20px;
  }
  .booking-progress li{
    padding-bottom: 8px;
  }
  .booking-section h2{
    font-size: 26px;
  }
  .calendar-heading{
    gap: 8px;
  }
  .calendar-heading h3{
    font-size: 22px;
  }
  .calendar-weekdays,.calendar-days{
    gap: 4px;
  }
  .calendar-weekdays{
    font-size: 11px;
  }
  .calendar-day{
    min-height: 44px;
    font-size: 15px;
  }
  .available-slots{
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
  }
  .student-modal{
    width: calc(100% - 24px);
    max-height: calc(100dvh - 24px);
  }
  .student-modal-card{
    padding: 24px 20px;
  }
  .student-form{
    grid-template-columns: minmax(0,1fr);
  }
  .review-actions{
    flex-direction: column-reverse;
  }
  .review-actions .booking-button{
    width: 100%;
  }
  .booking-summary{
    padding: 20px;
  }
  .booking-summary dl > div{
    grid-template-columns: minmax(0,1fr);
    gap: 2px;
  }
}