@import url('styles.css');

#booking-widget.mobile-layout {
  min-height: 100vh;
  padding: 1.25rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.booking-panel {
  width: min(520px, 100%);
  padding: 28px 22px 36px;
}

.stepper {
  flex-direction: column;
  gap: 10px;
}

.stepper-step {
  flex-direction: row;
}

.booking-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step-panel {
  display: none;
}

#availability[data-step='1'] .step-calendar {
  display: flex;
}

#availability[data-step='2'] .step-slots {
  display: flex;
}

#availability[data-step='2'] .step-calendar,
#availability[data-step='3'] .step-calendar {
  display: none;
}

#availability[data-step='1'] .step-slots,
#availability[data-step='3'] .step-slots {
  display: none;
}

#availability[data-step='3'] .booking-grid {
  display: none;
}