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

.booking-form label{
    font-size: 1rem;
    font-family: sans serif;
}

.booking-form .booking-date input{
    display: block;
  width: 100%;
  padding: 10px 10px;
  font-size: 1rem;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 5px;
  background: white;
}

.booking-form .venue-shift{
    margin-top: 10px;
}


.booking-form .venue-shift select{
    display: block;
    width: 100%;
    padding: 10px 10px;
    font-size: 1rem;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 5px;
    background: white;
}

.booking-form .number-guests{
    margin-top: 10px;
}

.booking-form .number-guests input{
    display: block;
    width: 100%;
    padding: 10px 10px;
    font-size: 1rem;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 5px;
    background: white;
}

.booking-form .submit-btn{
    background: #da9327;
    color: white;
    border: none;
    outline: none;
    padding: 10px;
    font-size: 1.2rem;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.booking-form .venue-event-type{
    margin-top: 10px;
}

.booking-form .venue-event-type label{
    font-size: 1rem;
    font-family: sans serif;
}

.booking-form .venue-event-type select{
    display: block;
  width: 100%;
  padding: 10px 10px;
  font-size: 1rem;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 5px;
  background: white;
}



.hall_type, .package_type  {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(221px, 1fr));
    gap: 20px;
}

.hall_type .hall_type_input, .package_type .package_type_input{
    margin-right:10px;
}

.hall_form_section h1, .package_form_section h1{
    font-size: 1.3rem;
    margin-bottom:20px;
}


.hall_form_section  input[type="submit"] , .package_form_section input[type="submit"]{
    background: #da9327;
    color: white;
    border: none;
    outline: none;
    padding: 10px;
    font-size: 1.2rem;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.food-category-wrapper{
    border: 1px solid #da9327;
    padding: 10px;
  border-radius: 5px;
    
}

.food-items-wrapper{
    display: flex;
  flex-direction: column;
  align-items: flex-start;
}



.checkbox, .checkbox_food{
    position: relative;
    width: 70px;
    height: 36px;
    border-radius: 25px;
    background:linear-gradient(0deg, #d8d8d8, #cccccc);
    border-top: 0.02em solid #ececec;
    border-bottom: 0.02em solid #ececec;
    
}

.checkbox .inner, .checkbox_food .inner{
    position: absolute;
   top:7px;
   bottom:7px;
   right:7px;
   left: 7px;
   background:linear-gradient(0deg, #a5a5a5, #717171);
   border-radius: 20px;
   box-shadow:inset 0 0 15px rgba(0,0,0,0.5)
    
}

.checkbox .inner .toggle, .checkbox .inner .toggle_food_menu{
    position: absolute;
    top:-3px;
    
    left: 0px;
    width: 25px;
    height: 25px;
  border-radius: 50%;
  background:linear-gradient(0deg, #ccc, #e4e4e4);
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  box-sizing: border-box;
  border-top: 0.04em solid #ececec;
  border-bottom: 0.02em solid #ececec;
  transition: 0.5s;
  cursor: pointer;
    
}

.checkbox .inner .toggle:before, .checkbox .inner .toggle_food_menu:before{

    position: absolute;
    content:'OFF';
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    background:linear-gradient(0deg,#e4e4e4, #ccc );
border-radius: 50%;
text-align: center;
font-size: 7px;
line-height: 18px;
color: #a9a9a9;

}

.checkbox .inner.active .toggle:before, .checkbox .inner.active .toggle_food_menu:before{

    position: absolute;
    content:'ON';
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    background:linear-gradient(0deg,#e4e4e4, #ccc );
border-radius: 50%;
text-align: center;
font-size: 7px;
line-height: 18px;
color: #da9327;

}


.checkbox .inner.active .toggle, .checkbox .inner.active .toggle_food_menu{

    left: 32px;

}

.checkbox .inner.active {

    background:linear-gradient(0deg, #ffac2f, #ffb03a);

}

.food-items-wrapper input[type="checkbox"] {
    width: 20px; /* Size of the checkbox */
    height: 20px;
    appearance: none; /* Remove default appearance */
    border: 2px solid #ccc; /* Border color */
    border-radius: 4px; /* Rounded corners */
    outline: none; /* Remove outline on focus */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s, border-color 0.3s; /* Smooth transitions */
  }

  /* Checkbox when checked */
  .food-items-wrapper  input[type="checkbox"]:checked {
    background-color: #ffae32; /* Background color when checked */
    border-color: #da9327; /* Border color when checked */
    color: white; /* Checkmark color */
  }

  /* Checkmark styling */
  .food-items-wrapper input[type="checkbox"]:checked::after {
    content: "✔"; /* Checkmark symbol */
    position: absolute;
    left: 4px; /* Positioning the checkmark */
    top: 0;
    font-size: 16px;
    color: white; /* Checkmark color */
  }

  /* Optional: Add a hover effect */
  .food-items-wrapper input[type="checkbox"]:hover {
    border-color: #da9327; /* Change border color on hover */
  }

  /* Optional: Add a focus effect */
  .food-items-wrapper input[type="checkbox"]:focus {
    border-color: #da9327; /* Change border color on focus */
  }

  .food-items-wrapper label{
    color: #333333;
  }

  .food-items-wrapper span.extra-indicator{
    font-weight: bold;
  background: #da9327;
  color: white;
  padding: 0 8px;
  border-radius: 10px;
  margin-left: 10px;
  box-shadow: inset 5px 5px 5px rgba(0,0,0,0.1);
  font-size: 13px;
  border-bottom: 2px solid #b7720a;
  }


  .spaninactive{
    display: none;
  }

  .spanactive{
    display: block;
  }

  .total-cost-buttons{
    text-align: center;
    font-size:  1rem;
  }

.total-cost-booking{
  display: inline-block;
  padding: 20px 30px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 2px;
  border-radius: 40px;
  cursor: pointer;
  color: #da9327;
  font-size:  1rem;
  box-shadow:inset -2px -2px 8px #fff,inset -2px -2px 12px #ffffff79, inset 2px 2px 4px #ffffff11,inset 2px 2px 8px rgba(0,0,0,0.15);
}

/* .total-cost-booking:hover{
  box-shadow: -2px -2px 8px #fff, -2px -2px 12px #ffffff79, inset 2px 2px 4px #ffffff11, 2px 2px 8px rgba(0,0,0,0.15);

} */

.custom-menu-ques{
  margin-left:10px;
}

.custom-menu-ques button{
  display: inline-block;
  padding: 20px 30px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 2px;
  border-radius: 40px;
  cursor: pointer;
  color: #da9327;
  box-shadow: -2px -2px 8px #fff, -2px -2px 12px #ffffff79, inset 2px 2px 4px #ffffff11, 2px 2px 8px rgba(0,0,0,0.15);
  background: none;
  outline: none;
  border: none;
  font-size: 1rem;
  line-height: 35px;
}

.custom-menu-ques button:hover{
  box-shadow: inset -2px -2px 8px #fff,inset -2px -2px 12px #ffffff79, inset 2px 2px 4px #ffffff11,inset 2px 2px 8px rgba(0,0,0,0.15);

}


.booking-menu-form-wrapper{
  display: none;
}

.user_form input, 
.user_form select {
  border: 1px solid #da9327!important; /* Border color */
  border-radius: 4px; /* Optional: Rounded corners */
  padding: 8px; /* Optional: Add some padding */
  font-size: 16px; /* Optional: Adjust font size */
  outline: none; /* Remove default outline */
}

/* Focus styling for the input field */
.user_form  input:focus , .user_form select:focus{
  border-color: #da9327; /* Border color when focused */
  outline: none; /* Remove default outline */
  box-shadow: 0 0 5px rgba(218, 147, 39, 0.5); /* Optional: Add a subtle shadow */
}


input[type="date"]::-webkit-calendar-picker-indicator {
  background: transparent;
  bottom: 0;
  color: transparent;
  cursor: pointer;
  height: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}

@media screen and (max-width:768px) {

  .halls-submit-section, .packages-submit-section{
    text-align: center;
  }

  .halls-submit-section input,.packages-submit-section input{
   width:100%;
  }
  
  
}



.micro-category-section{
  margin-top: 10px;
}