/* public/css/wp-appointment-public.css */







.wp-appointment-container {



}



.appointment-container-wrapper {



    display: flex;



    /* gap: 30px; */
    gap: 0;



    justify-content: space-between;

    flex-direction: column;

}







.wp-appointment-calendar {



    padding: 40px;



    background: #fff;



    border-radius: 5px;



    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */



    /* width: calc(68% - 30px); */



}



.wp-appointment-calendar .ui-datepicker {



    width: 100%;



    border: none;



}







.wp-appointment-calendar  .ui-datepicker-header {



   background: transparent;



   border: none;



   margin-bottom: 30px;



   width: 70%;
    width: max-content;



   margin: 0 auto;



   position: relative;



}



.wp-appointment-calendar  .ui-datepicker-header .ui-datepicker-title {



  font-size: 30px;



  line-height: 37px;



  font-weight: 700;

    width: 187px;

}



.wp-appointment-calendar .ui-datepicker-prev,



.wp-appointment-calendar .ui-datepicker-next {



    top: 50%;



    transform: translateY(-50%);

    border: none;





}

.wp-appointment-calendar .ui-datepicker-prev {

    left: 1px;

}

.wp-appointment-calendar .ui-datepicker-next {

    right: 1px;

}

.wp-appointment-calendar .ui-datepicker-next span,



.wp-appointment-calendar .ui-datepicker-prev span {



    background-image: none !important;



}



.wp-appointment-calendar .ui-datepicker-next-hover,

.wp-appointment-calendar .ui-datepicker-prev-hover {



   border: none ;



   background-color: transparent;



   cursor: pointer;

   color: transparent;



}







.wp-appointment-calendar .ui-datepicker-prev span.ui-icon ,



.wp-appointment-calendar .ui-datepicker-next span.ui-icon {



    display: block;



    width: 13px;



    height: 13px;



    border-top: 3px solid #000107;



    border-left: 3px solid #000107;



}



.wp-appointment-calendar .ui-datepicker-next span.ui-icon { 



    transform: rotate(135deg);



}



.wp-appointment-calendar .ui-datepicker-prev span.ui-icon {



    transform: rotate(-45deg);



}















.ui-datepicker th {



    padding: 10px 0;



    font-weight: 400;



    font-size: 25px;



    color: #000107;



    /* text-transform: uppercase; */



}







/* Calendar days */



.ui-datepicker td {



    padding: 2px !important;



    border: none !important;

    cursor: pointer;



}



.ui-datepicker table {



    border-collapse: separate !important;



    border-spacing: 15px 10px !important; /* Horizontal 15px, Vertical 10px spacing */



    width: calc(100% + 30px) !important; /* Compensate for the added spacing */



    margin-left: -15px !important; /* Align table with container */



}







/* Cell styling */



.ui-datepicker td {



    padding: 0 0 20px 0 !important;

    
    
    
}
@media (max-width: 467px) {
    .ui-datepicker td {
        padding: 0 0 40px 0 !important;
    }
}







.ui-datepicker td a, .ui-datepicker td span {



    text-align: center !important;



    padding: 8px !important;



    background: #fff !important;



    border: 1px solid #43454A !important;



    border-radius: 6px !important;



    color: #3C3D42 !important;



    font-size: 25px;



}







.ui-datepicker td .ui-state-active  {



    background: #BA8E5F !important;



    color: white !important;



    font-weight: 700 !important;

    border: 1px solid #BA8E5F !important;



}





/* Disabled and past days */


.ui-datepicker td.ui-state-disabled  {
    opacity: 1 !important;
}
.ui-datepicker td.ui-state-disabled span {



    background: #EDEBE8 !important;

    border: none !important;

    color: #fff !important;



}
.ui-datepicker td.ui-state-disabled.ui-datepicker-week-end span {


    background: transparent !important;

    border: none !important;

    color: #CFEAFE !important;


}
.ui-datepicker td.ui-state-disabled.ui-datepicker-other-month span {


    background: transparent !important;

    border: none !important;

    color: #F4EAE0 !important;


}



.wp-appointment-times {



    /* width: 32%; */



    padding: 40px;
    padding-top: 20px;



    background: #fff;



    border-radius: 5px;



    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */



}



.wp-appointment-times .title  {



   font-size: 30px;



   line-height: 37px;



   font-weight: 700;



   color: #000107;



   margin-bottom: 28px;



   text-align: center;

   font-family: "Urbanist", serif;





}



#available-times {



    display: flex;



    flex-wrap: wrap;



    gap: 20px;



}



.time-slot {



    display: block;



    width: calc( 50% - 10px);
    width: calc(25% - 15px);



    padding: 15px;



    border: 1px solid #CFEAFE;



    background: #fff;



    cursor: pointer;



    text-align: center;



    border-radius: 4px;



    font-size: 25px;



    line-height: 32px;
    color: #3A486E;
    border-radius: 100px;
    border: 1px solid #43454A;

}



.time-slot.booked {



    background-color: #D4D4D4 !important;



    border: 1px solid #D4D4D4 !important;



    color: #8F8F8F !important;



    cursor: not-allowed !important;



    opacity: 1;



}







/* .time-slot.booked:hover {



    background-color: #ffebee !important;



} */







.time-slot:hover {



    background: #BA8E5F;



    color: #fff;



    border-color: #BA8E5F;


    font-weight: 700;




}







.time-slot.selected {



    background: #BA8E5F;



    color: #fff;



    border-color: #BA8E5F;

    font-weight: 700;

}







.time-slot.disabled {



    background: #D4D4D4;



    cursor: not-allowed;



    opacity: 1;



}





#noteConfirm-modal,

#appointment-modal {



    position: fixed;



    top: 0;
    top: 50px;




    left: 0;



    width: 100%;



    height: 100%;



    background: rgba(0,0,0,0.5);



    display: flex;



    justify-content: center;



    align-items: center;



    z-index: 999999;



}







.modal-content {



    background: #fff;



    padding: 40px;



    border-radius: 5px;
    border-radius: 50px;



    max-width: 966px;



    width: 100%;



    /* max-height: calc(100vh - 100px);  */
    max-height: calc(100vh - 160px);



    overflow-y: auto;



    position: relative;



}
.modal-content::-webkit-scrollbar {
  display: none;
}



#noteConfirm-modal .note {

     margin-bottom: 30px;

     font-size: 25px;

     line-height: 37px;

}

#noteConfirm-modal .btn-wrapper {

   display: flex;

   justify-content: space-between;

}



#noteConfirm-modal .btn-wrapper .btn {

    border-radius: 4px;



 

  

    font-family: "Urbanist", serif;

  

    font-weight: 700;

  

    font-size: 18px;

  

    line-height: 22px;

  

    padding: 10px 46px;



    color: white;



}





#noteConfirm-modal .btn-wrapper .btn.continue {

    background-color: #E9B44C;

    border: 1px solid #E9B44C;

  

}



#noteConfirm-modal .btn-wrapper .btn.cancel {

    background-color: #B1B1B1;

    border: 1px solid #B1B1B1;

  

}





.wp-appointment-actions {

    text-align: center;

}







#confirm-appointment {



    padding: 10px 30px;

    font-size: 25px;

    line-height: 30px;

    font-family: "Urbanist", serif;

    margin-top: 45px;

    /* background-color: white;

    border: 1px solid white; */

    font-weight: 700;

    /* color: #19191E; */

    border-radius: 4px;

    transition: 0.3s all;

    border-radius: 100px;
    background: #BA8E5F;
    color: #fff;
    padding: 20px 30px !important;

}

#confirm-appointment:hover {

     background-color: #E9B44C ;

     border: 1px solid #E9B44C;

     color: white;

     transition: 0.3s all;



}





  



.modal-content  .ginput_container select, 



.modal-content .ginput_container input , 



.modal-content .ginput_container textarea {



        border-radius: 0 !important;
        border: none !important;
        border-radius: 35px !important;
        border: 1px solid #43454A !important;






        font-size: 18px !important;



        line-height: 23px !important;



        background-color: #F3F3F3 !important;
        background-color: #FFF !important;




        -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;



        -webkit-tap-highlight-color: transparent !important;



        -webkit-user-select: none !important;



        -khtml-user-select: none !important;



        -moz-user-select: none !important;



        -ms-user-select: none !important;



        user-select: none !important;



}







.modal-content  .gfield {



    position: relative;



    



 }
 .modal-content  .gfield#field_3_1{
    border-bottom: 1px solid #3C3D42;
    padding-bottom: 20px;
 }



 .modal-content .gfield_label {



    /* position: absolute !important; */



    top: 15px !important;



    left: 18px !important;



    font-weight: 700 !important;



    font-size: 25px !important;



    line-height: normal !important;



    color: #3A486E !important;



}



.modal-content  .app-date .gfield_label,



.modal-content  .gfield_required  .gfield_required_text {



    display: none !important;



}







    



.modal-content  .gfield_required::before {



       content: '*';



       color: red;



}



.modal-content .app-infomation {



    



}



.modal-content  .app-date input {



   border: none !important;



   padding: 0;

   padding-left:  0 !important;



   background-color: transparent !important;



   font-size: 35px !important; 



   line-height: 42px !important;



   font-weight: 700 !important;



   font-family: "Urbanist", serif !important;



   color: #3A486E !important;



   pointer-events: none !important;



   box-shadow: none !important;

    font-style: italic !important;

}



.modal-content .you-are-booking {



  font-size: 23px;



  line-height: 29px;



  color: #000000;



}



/* width */



#appointment-modal ::-webkit-scrollbar {



    width: 8px;



  }



  



  /* Track */



  #appointment-modal ::-webkit-scrollbar-track {



    background: #f1f1f1;



    border-radius: 6px;



  }



  



  /* Handle */



  #appointment-modal ::-webkit-scrollbar-thumb {



    background: #888;



    border-radius: 6px;







  }



  



  /* Handle on hover */



  #appointment-modal ::-webkit-scrollbar-thumb:hover {



    background: #555;



  }



.modal-content .app-infomation  {



  font-size: 25px;



  line-height: 32px;



  font-weight: 500;



}



.modal-content .gform_fields {



    column-gap: 10px !important;



    row-gap: 30px !important;



}



.modal-content .gform_validation_errors {



    display: none !important;



}



.modal-content .ginput_container select ,
.modal-content .ginput_container input {



    height: 53px !important;
    line-height: 53px !important;



}

.modal-content .ginput_container input::placeholder,
.modal-content .ginput_container textarea::placeholder {
    color: #B3B3B3 !important;
    font-weight: 400;
}







#appointment-modal .modal-content form .gform-footer  {



     position: relative;

    justify-content: center;

}







/* #appointment-modal .modal-content .btn-cancel , */



#appointment-modal .modal-content form .gform-footer  .gform_button {



  border-radius: 4px;



  background-color: #E9B44C;

  
  border: 1px solid #E9B44C;
  
  
  
  color: white;
  
  border-radius: 100px;
  background: #BA8E5F;
  border: 1px solid #BA8E5F;


  font-family: "Urbanist", serif;



  font-weight: 700;



  font-size: 18px;



  line-height: 22px;



  padding: 10px 46px;

    width: 246px;

}







#appointment-modal .modal-content .btn-cancel {

    position: absolute;
    right: 40px;
    top: 40px;
    cursor: pointer;
    background: none !important;
    border: none !important;
    padding: 0 !important;



}
@media (max-width: 767px) {
    #appointment-modal .modal-content .btn-cancel {
        right: 20px;
        top: 20px;
    }
    #appointment-modal .modal-content .btn-cancel>svg {
        height: 12px;
        width: 12px;
    }
        
}

#appointment-modal .modal-content.confirmation{
    max-width: 571px;
}
#appointment-modal .modal-content h2.confirmation-title{
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #000000;

    color: #19396A;
    text-align: center;
    font-family: "Urbanist";
    font-size: 35px;
    font-style: normal;
    font-weight: 700;
    line-height: 42px; 
    margin-bottom: 20px;
}
#appointment-modal .modal-content .confirmation-message{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#appointment-modal .modal-content .btn-close-confirmation.button-primary{
    width: 246px;
    border-radius: 100px;
    background: #BA8E5F;
    margin-top: 30px;
}







@media (max-width: 1200px) { 



    .has-global-padding {



        padding-right: 40px !important;



        padding-left: 40px !important;



    }



}



@media (max-width: 992px) { 



    .modal-content {



        max-width: 100%;



        width: calc(100% - 60px);

        

        padding: 20px;





    }



    .has-global-padding {



        padding-right: 15px !important;



        padding-left: 15px !important;



    }



    .wp-appointment-container {



        padding: 0;



    }



    .appointment-container-wrapper {



        flex-direction: column;



        padding: 0;



    }



    .wp-appointment-calendar {



        width: auto;



        padding: 20px;



    }



    .ui-datepicker th {



        padding: 10px 0;



        font-weight: 400;



        font-size: 16px;



        color: #000107;



        /* text-transform: uppercase; */



    }



    



    .ui-datepicker table {



        border-collapse: separate !important;



        border-spacing: 5px 5px !important; /* Horizontal 15px, Vertical 10px spacing */



        /* width: calc(100% + 10px) !important;  */



        margin-left: -15px !important; /* Align table with container */



    }







    .wp-appointment-calendar  .ui-datepicker-header .ui-datepicker-title {



        font-size: 18px;



        line-height: 25px;

        width: auto;

    }



    .ui-datepicker td a, .ui-datepicker td span  {



        font-size: 16px;



    }



    .wp-appointment-calendar .ui-datepicker-header  {



        width: 100%;



        margin-bottom: 30px;



    }



    .wp-appointment-times {



        width: auto;



        padding: 40px 15px;



    }



    .time-slot  {



        font-size: 20px;



        line-height: 27px;

        width: calc(50% - 10px);

    }



    /*  .modal-content*/



    



}



@media (max-width: 768px) { 



  

   

    #noteConfirm-modal .note {

        font-size: 20px;

        line-height: 32px;

    }

    #noteConfirm-modal .btn-wrapper .btn  {

        padding: 10px 20px;

    }



    .modal-content .you-are-booking {



        font-size: 18px;



        line-height: 24px;



    }



 



     .modal-content .app-infomation {



        font-size: 18px ;



        line-height: 25px;



     }



     .modal-content .gfield_label {



       font-size: 16px !important;



       line-height: 21px !important;



     }



     .modal-content .gform_fields {



        column-gap: 10px !important;



        row-gap: 20px !important;



    }



    .modal-content  .ginput_container select, 



    .modal-content .ginput_container input {



            font-size: 16px !important;

            

    }



    #confirm-appointment {

       font-size: 20px;

       line-height: 25px;

   }

    



}



@media (max-width: 575.98px) { 



    .modal-content {



        width: calc(100% - 30px);



    }



    .modal-content  .app-date input {



        height: fit-content !important;



        font-size: 20px !important;



        line-height: 25px !important;



     }



    #appointment-modal .modal-content .btn-cancel ,



    #appointment-modal .modal-content form .gform-footer  .gform_button {



        font-size: 14px;



        line-height: 18px;



        padding: 10px 25px;



    }



    .wp-appointment-calendar .ui-datepicker-prev span.ui-icon ,



    .wp-appointment-calendar .ui-datepicker-next span.ui-icon {



        width: 10px;



        height: 10px;



    }



}
#appointment-modal .gform_confirmation_message {
    font-size: 25px;
    text-align: center;
}

@media (max-width: 575.98px) {
    #appointment-modal .gform_confirmation_message {
        font-size: 18px;
    }
}