/* ===============================
TABLETS
=============================== */

@media (max-width:1024px){

.container{
grid-template-columns:1fr;
gap:20px;
padding:20px;
}

.calendarPanel {
    overflow-x:auto;
}
.slotsPanel,
.packagePanel,
.formPanel{
width:100%;
}

}

/* ===============================
MOBILE
=============================== */

@media (max-width:768px){

.bookingSteps{
flex-wrap:wrap;
gap:8px;
}

.step{
font-size:12px;
padding:6px;
}

.container{
grid-template-columns:1fr;
padding:15px;
}

button{
min-height:44px;
}

/* Calendar */

.day{
padding:14px;
font-size:15px;
}

/* Slots */

.slotRow{
flex-wrap:wrap;
}

.slot{
flex:1 1 45%;
}

/* Package carousel */

.subPackagesCarousel .packageCard{
width:130px;
}

/* Form */

.formWrapper{
padding:20px;
}

.formGroup input,
.formGroup textarea{
font-size:16px;
padding: 7px;
}

#bookSessionBtn{
font-size:16px;
padding:15px;
}

#calendarGrid{
gap:4px;
}

.summaryBox{
flex-direction:column;
align-items:flex-start;
gap:4px;
}

}

/* ===============================
SMALL MOBILE
=============================== */

@media (max-width:480px){

.slotsPanel{
    width: 90%;
}
.packagePanel{
    width: 92%;
}
.formPanel{
    width: 90%;
}
.calendarHeader h2{
font-size:18px;
}

.weekDays{
font-size:10px;
}

.day{
padding:12px;
font-size:14px;
}
#subPackages.carousel .packageCard {
  flex: 0 0 auto;
  width: 120px;
  min-width: 120px;
  scroll-snap-align: start;
}
#subPackages.carousel {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: flex-start;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 0 8px;
  box-sizing: border-box;
}

/* slots */
.slot{
flex:1 1 100%;
}
.formGroup inputs{
    padding: 7px;
}
/* package */

.subPackagesCarousel .packageCard{
width:110px;
}

/* modal */

.modalContent{
margin:20% auto;
width:95%;
}
}