* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-font: "Noto Sans", sans-serif;
  --secondary-font: "M PLUS 1p", sans-serif;
}

:root {
  --primary: #f08a00;
  --primary-dark: #d96c00;
  --primary-light: #ffb547;
  --black: #111111;
  --white: #ffffff;
  --text: #222222;
}

body {
  font-family: var(--primary-font);
  background-color: var(--white);
}

.scroll-top-btn {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;

  background: var(--primary);
  color: var(--white);
  font-size: 20px;
  font-weight: 700;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);

  transition: all 0.3s ease;
}

.scroll-top-btn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top-btn:hover {
  transform: translateY(-4px);
}



/* booking modal  */



.booking-modal{

    position:fixed;
    inset:0;

    z-index:99999;

    display:flex;
    align-items:center;
    justify-content:center;

    visibility:hidden;
    opacity:0;

    transition:.35s;
}

.booking-modal.active{

    visibility:visible;
    opacity:1;

}

.booking-modal-overlay{

    position:absolute;
    inset:0;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(6px);

}

.booking-modal-box{

    position:relative;

    width:min(92%,620px);

    background:var(--white);

    border-radius:22px;

    padding:40px;

    z-index:2;

    transform:translateY(40px) scale(.94);

    transition:.35s;

    box-shadow:0 30px 80px rgba(0,0,0,.25);

}

.booking-modal.active .booking-modal-box{

    transform:none;

}

.booking-modal-close{

    position:absolute;

    right:20px;
    top:20px;

    width:42px;
    height:42px;

    border:none;

    border-radius:50%;

    background:#f5f5f5;

    cursor:pointer;

    font-size:28px;

    transition:.3s;

}

.booking-modal-close:hover{

    background:var(--primary);

    color:#fff;

}

.booking-modal h2{

    margin:0;

    font-size:34px;

    color:var(--black);

    font-family:var(--secondary-font);

}

.booking-modal>div>p{

    margin:10px 0 30px;

    color:#777;

}

.booking-form{

    display:grid;

    gap:12px;

}

.booking-field{

    display:flex;

    flex-direction:column;

}

.booking-field label{

    margin-bottom:8px;

    font-weight:600;

    color:var(--text);

}

.booking-field input,
.booking-field select{

	height: 40px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0 16px;
    outline: none;
    font-size: 15px;
    transition: .3s;
    width: 100%;
	max-width: 100%;

}

.booking-field input[type="date"] {
    box-sizing: border-box;

    -webkit-appearance: none;
    appearance: none;
}

.booking-field input:focus,
.booking-field select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(240,138,0,.15);

}

.booking-submit{

    height:56px;

    border:none;

    border-radius:14px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.booking-submit:hover{

    background:var(--primary-dark);

}



#bookingMessagePopUp{
    min-height: 20px;
    margin-top: 1px;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
}

@media(max-width:768px){

.booking-modal-box{

padding:25px;

}

.booking-modal h2{

font-size:28px;

}

}