#bookingModal .modal-dialog { max-width: 840px; }

#bookingModal .modal-content{
  border: 0;
  border-radius: 18px;
  overflow: hidden;

  background: #fff;
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
}

#bookingModal .modal-header{
  background: linear-gradient(135deg, #0197B2 0%, #017f96 100%);
  color: #fff;
  border: 0;
  padding: 18px 22px 20px;
  position: relative;
}
#bookingModal .modal-title{
  font-weight: 700;
  letter-spacing: .3px;
}
#bookingModal .modal-header::after{
  content: "";
  position: absolute;
  left: 22px; right: 22px; bottom: 8px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,0));
}
#bookingModal .btn-close{ filter: invert(1) brightness(200%); opacity: .9; }


#bookingModal .modal-body{ padding: 18px 20px 4px; }


#bookingModal .form-label{
  color: #0b2a2f; margin-bottom: 8px; font-weight: 700;
}

#bookingModal .form-control,
#bookingModal .form-select{
  border-radius: 12px;
  border: 1px solid #e5eef3;
  background: #fff;
  box-shadow: 0 1px 0 rgba(1,151,178,.04) inset;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
#bookingModal .form-control::placeholder{ color: #9aa9b5; }
#bookingModal .form-control:focus,
#bookingModal .form-select:focus{
  border-color: #0197B2;
  box-shadow: 0 0 0 .25rem rgba(1,151,178,.16);
}


#bookingModal .text-danger{ color: #FF5A5F !important; }

#bookingModal .service-checkbox{
  position: absolute; left: -9999px; 
}
#bookingModal .form-check{ margin: 0; } 
#bookingModal .form-check-label{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #f1f7fa;
  color: #0b2a2f;
  border: 1px solid #e0edf3;
  font-weight: 600; line-height: 1;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
#bookingModal .form-check-label:hover{
  background: #e8f3f7; border-color: #d5e8ef;
}
#bookingModal .service-checkbox:checked + .form-check-label{
  background: #0197B2; color: #fff; border-color: #0197B2;
  box-shadow: 0 6px 16px rgba(1,151,178,.25);
}


#bookingModal input[type="radio"]{ position: absolute; left: -9999px; }
#bookingModal input[type="radio"] + label.form-check-label{
  padding: 10px 16px; border-radius: 999px;
}
#bookingModal input[type="radio"]:checked + label.form-check-label{
  background: #FFC600; color: #0b2a2f; border-color: #FFC600;
  box-shadow: 0 6px 16px rgba(255,198,0,.28);
}

#bookingModal #has-elevator.form-check-input{
  width: 1.05rem; height: 1.05rem; border-color: #b9c7d3; accent-color: #0197B2;
}
#bookingModal label[for="has-elevator"]{ margin-left: 6px; }

#bookingModal .modal-footer{
  border-top: 0; padding: 8px 20px 20px;
  display: grid; grid-auto-flow: column; gap: 10px; justify-content: end;
}
#bookingModal .btn.btn-secondary{
  background: #e9f3f8; border: 1px solid #e9f3f8; color: #0b2a2f;
  border-radius: 10px; font-weight: 700; padding: 10px 18px;
}
#bookingModal .btn.btn-secondary:hover{ background: #dcecf2; }

#bookingModal .btn.btn-primary{
  background: #FFC600; border: 1px solid #FFC600; color: #0b2a2f;
  border-radius: 10px; font-weight: 800; padding: 10px 22px;
  box-shadow: 0 8px 18px rgba(255,198,0,.28);
}
#bookingModal .btn.btn-primary:hover{ background: #eab607; border-color: #eab607; }


#bookingModal .alert{ border: 0; border-radius: 12px; }


#bookingModal #loading{ font-weight: 700; color: #0197B2 !important; }


#bookingModal .d-flex.flex-wrap.gap-3{ row-gap: 10px; }
#bookingModal .row.g-3{ row-gap: 14px; }


@media (max-width: 992px){
  #bookingModal .modal-dialog{ margin: .75rem; }
  #bookingModal .modal-content{ border-radius: 16px; }
  #bookingModal .modal-header{ padding: 16px 18px; }
  #bookingModal .modal-body{ padding: 16px 18px 6px; }
  #bookingModal .modal-footer{
    grid-auto-flow: row; justify-content: stretch;
  }
  #bookingModal .modal-footer .btn{ width: 100%; }
  #bookingModal .form-control, #bookingModal .form-select{ min-height: 44px; }

  #bookingModal .d-flex.flex-wrap.gap-3{ gap: 10px 10px; }
}


@media (max-width: 576px){
  #bookingModal .modal-title{ font-size: 1.05rem; }
}








#bookingModal .d-flex.flex-wrap.gap-3{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}


#bookingModal .d-flex.flex-wrap.gap-3 .form-check{ width: 100%; }
#bookingModal .d-flex.flex-wrap.gap-3 .form-check-label{
  width: 100%;
  justify-content: center;
  text-align: center;
}

#bookingModal .form-control,
#bookingModal .form-select{
  min-height: 46px;         
  line-height: 1.2;
}
#bookingModal .row.g-3{ row-gap: 16px; }  

#bookingModal .col-md-6.form-check{
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
}
#bookingModal #has-elevator.form-check-input{
  margin: 0;            
}

#bookingModal label[for="has-elevator"]{
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: #f1f7fa;
  color: #0b2a2f;
  border: 1px solid #e0edf3;
  font-weight: 600;
  line-height: 1;
}

#bookingModal .form-label + .d-flex.gap-4{
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.mxs-slice__media{
  border: 2px solid #0197B2;     
  border-radius: 22px;
}