#booking-form {
            scroll-margin-top: 80px;
        }
        .step input {
            display: block;
            margin: 7px 0;
        }
        .step .date-button {
            margin-right: 10px;
        }
        
        .step-title{
                font-size: 28px;
                color: #757575;
        }
        
         #slot-grid{
    overflow-x:auto;
      max-height: 50vh;
}
        
        
        #slot-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

#booking-form  hr {
     background-color: #ccc !important;
     margin: 20px 0px !important;
}


#date-picker, #tsb-service-select{
    border: 1px solid #10182899;
    border-radius: 8px;
    color: #101828;
}

button.iti__selected-country:hover {
   background-color:#50efc1 !important; 
   border-radius: 8px;
}

.iti--allow-dropdown {
    width:100%;
}

input[type="tel"]::placeholder{
    color: #9b9b9b !important; 
}

.tsb-input-group span{
    color: #ff6633;
}

.flatpickr-calendar.inline {
    margin: auto;
}

#user_notes{
    color: #101828 !important;
}

.paypal-button-container {
    margin: auto !important;
}


.error-msg {
  color: #DA0606;
  font-size: 12px;
  margin-top: 3px;
  display: none;
  background:#EBEEF2;
  padding: 6px 16px;
}

.error-msg::before {
  content: url(images/error.svg); /* you can replace this with an SVG background if you prefer */
  /*position: absolute;*/
  /*left: 0;*/
  /*top: 0;*/
  width:16px;
  height: 16px;
  margin-right:5px;
  /*font-size: 13px;*/
  /*line-height: 1.2;*/
  /*background: url(images/error.svg) no-repeat scroll 14px 10px;*/

}


.next-button:active, .next-button:focus{
    background-color:#50EFC1 !important;
}

#booking-form button:hover{
    background-color: #2d2d2d;
}


.slot-button{
    padding: 0px 20px;
                            border: 1px solid #ccc;
                            border-radius: 4px;
                            cursor: pointer;
                            background: #f8f8f8;
                             width: 100%;
                             color: #cb5938;
                             margin: 3px 0;
                             width: 80px;
    height: 50px;
    line-height: 50px;
    padding: 0;
                             
}
.slot-btn {
  /*padding: 10px 15px;*/
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
 
}
.slot-btn.available {
  background-color: #4CAF50;
  color: white;
}
.slot-btn.unavailable {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
}

@media screen and ( max-width: 600px){
    
    #slot-grid{
    overflow-x:auto;
      max-height: 50vh;
}

.slot-button{
    
        width: 80px;
    height: 50px;
    line-height: 45px;
    padding: 0;
}

  #slot-grid .slot-btn{
    /*font-size:14px;*/
  
}

}

.tsb-booking-form {
  width: 100%;
  margin: 40px auto;
  font-family: "Segoe UI", sans-serif;
  padding:0px;
}

.tsb-stepper {
  display: flex;
   display: none;
  justify-content: space-between;
  margin-bottom: 30px;
}

.tsb-step {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-bottom: 3px solid #ccc;
  position: relative;
  color: #666;
}

.tsb-step.active {
  border-color: #2c7be5;
  font-weight: bold;
  color: #2c7be5;
}

.tsb-card {
  /*background: #f4f4f4;*/
/*border-radius: 5px;*/
  /*padding: 30px;*/
  /*border: 2px solid #2d2d2d;*/
}

.tsb-input-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    background: #FBFBFB;
    padding: 100px;
    /*border:1px dashed #51EFC0;*/
    border-radius: 4px;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%2351EFC0FF' stroke-width='1' stroke-dasharray='7.7' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}
.tsb-input-group {
  margin-bottom: 20px;
  width: 100%;
}


/* Disable autofill styling globally */
/*input:-webkit-autofill,*/
/*input:-webkit-autofill:hover,*/
/*input:-webkit-autofill:focus,*/
/*input:-webkit-autofill:active,*/
/*select:-webkit-autofill,*/
/*select:-webkit-autofill:hover,*/
/*select:-webkit-autofill:focus,*/
/*select:-webkit-autofill:active {*/
/*    -webkit-box-shadow: 0 0 0 30px white inset !important;*/
/*    -webkit-text-fill-color: #333333 !important;*/
/*    transition: background-color 5000s ease-in-out 0s;*/
/*}*/

/* Prevent browser autocomplete from removing/changing icons */
/*.input-with-icon:-webkit-autofill,*/
/*.input-with-icon:-webkit-autofill:hover,*/
/*.input-with-icon:-webkit-autofill:focus,*/
/*.input-with-icon:-webkit-autofill:active {*/
/*    -webkit-box-shadow: 0 0 0 30px white inset !important;*/
/*    -webkit-text-fill-color: #333333 !important;*/
/*    transition: background-color 5000s ease-in-out 0s;*/
/*}*/


#tsb-service-select {
padding-left: 50px;
    background-image: url(images/services.svg) !important;
    background: url(images/services.svg) no-repeat scroll 14px 14px !important;
    background-color: #fff !important;
}

#user_name {
padding-left: 50px;

  background-image: url(images/user.svg) !important;
    background: url(images/user.svg) no-repeat scroll 14px 10px !important;
    background-color: #fff !important;
    -webkit-appearance:none;
    appearance: none;
}

#user_email {
padding-left: 50px;
  background-image: url(images/envelope.svg) !important;
    background: url(images/envelope.svg) no-repeat scroll 14px 10px !important;
    background-color: #fff !important;
}



@media screen and ( max-width: 600px){
    
    .tsb-booking-form {
  max-width: 100%;
  margin: 40px auto 0px;
}

.tsb-card {
    border-radius: 0px;
    box-shadow:none;
}

.tsb-input-container{
    padding: 20px;
}
    
   .tsb-input-group {
  margin-bottom: 20px;
  width: 100%;
}

}


.tsb-input-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #09101D;
}

.tsb-input-group input, #user_notes {
  width: 100%;
  padding: 10px;
  /*border: 1px solid #ccc;*/
  /*border-radius: 6px;*/
  
  border: 1px solid #DFDFDF !important;
    border-radius: 8px !important;
    color: #101828 !important;
}

.tsb-buttons {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}

.step-1 .tsb-buttons{
        justify-content: center;
    width: 100%;
}

.tsb-btn {
  background: #51EFC0;
  color: #2D2D2D;
  padding: 10px 50px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.tsb-btn-secondary {
  background: #ccc;
  color: #333;
}

.tsb-slot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
  justify-content: space-evenly;
}





.step {
    transition: all 0.3s ease-in-out;
    opacity: 0;
    transform: translateY(10px);
    display: none;
}

.step.active {
    opacity: 1;
    transform: translateY(0);
    display: block;
}

.tsb-invalid {
    border-color: red !important;
    background-color: #ffeaea !important;
}




.step {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.step.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.step.hidden {
  display: none !important;
}

.tsb-stepper {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  margin-top: 20px;
  justify-content: center;
}

.tsb-step {
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 999px;
  background: #f3f3f3;
  font-size: 14px;
  cursor: default;
  transition: all 0.3s ease;
}

.tsb-step.active {
      border: 1px solid #FC683C;
  background: #FC683C;
  color: #fff;
  font-weight: bold;
}


@media (max-width: 600px) {
 

  .tsb-step {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    gap: 5px;
    justify-content: center;
     padding: 4px 7px;
  }

  /*.tsb-step::before {*/
  /*  content: '';*/
  /*  display: block;*/
  /*  width: 10px;*/
  /*  height: 10px;*/
  /*  background: #ccc;*/
  /*  border-radius: 50%;*/
  /*  margin-right: 0.5rem;*/
  /*}*/

  .tsb-step.active::before {
    background: #007bff;
  }
  
   .step-3 .tsb-card {
    padding: 30px 10px;
  }
}

@media (max-width: 400px) {
 
    .tsb-stepper {
        flex-direction: column;
        gap: 0px;
        padding: 0 50px;
    }

  
 .step-3 .tsb-card {
    padding: 30px 3px;
  }
  
}



/********************************************************/


/* Progress Line */
/*.tsb-stepper::before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  top: 15px;*/
/*  left: 15px;*/
/*  right: 15px;*/
/*  height: 4px;*/
/*  background: #eee;*/
/*  z-index: 0;*/
/*}*/
/*.tsb-stepper .tsb-step.active ~ .tsb-step::before {*/
/*  background: #28a745;*/
/*}*/
/*.tsb-step::before {*/
/*  content: "";*/
/*  flex: 1;*/
/*  height: 4px;*/
/*  background: #ccc;*/
/*  margin-top: 15px;*/
/*  position: absolute;*/
/*  left: 50%;*/
/*  right: 0;*/
/*  z-index: 1;*/
/*}*/



.tsb-confirmation-summary {
  padding: 20px;
  border-radius: 10px;
  background: #f9f9f9;
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
}

.tsb-summary-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.tsb-icon {
  margin-right: 8px;
  font-size: 1.2em;
  color: #555;
  width: 24px;
}

.confirmation-summary {
  padding: 1rem;
  background: #fff;
  border-radius: 10px;

border: 1px solid #1018281a;
border-radius: 12px;
margin-bottom: 20px;
}

.confirmation-summary h3 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  color: #2d3748;
}

.summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.summary-list li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.summary-list i {
  margin-right: 8px;
  /*color: #4a5568;*/
  color: #10182899;
}

.summary-list span {
  color: #10182899;
}

.summary-list .label {
  font-weight: 600;
  margin-right: 5px;
}


.tsb-payment-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.tsb-payment-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 500;
}
.tsb-payment-icon {
  width: 32px;
  height: auto;
}
.tsb-buttons {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}




/************* Pop up******************/

.tsb-popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex; justify-content: center; align-items: center;
  z-index: 9999;
}

.tsb-popup-content {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.hidden {
  display: none;
}


/********************** loader**************/

.dual-ring{
    width: 50px;
    height: 50px;
}

.dual-ring:after {
    content: " ";
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border-width: 4px;
    border-style: solid;
    border-right-color: transparent;
    border-left-color: transparent;
    animation: ct_dual_ring 1.2s linear infinite;
    border-bottom-color: #50EFC1;
    border-top-color: #50EFC1;
}


/****************** Chatty ****************/


button.chaty-whatsapp-button-button , button[type=button].chaty-wp-emoji-input{
    display: flex;
    justify-content: center;
    align-items: center;
}


/************* Calender *******************/


/*.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active {*/
/*    background-color: #2D2D2D;*/
/*    border-color: none;*/
/*    color: #50efc1;*/
    
/*}*/

/* .fc .fc-button-primary:not(:disabled):hover {*/
/*    background-color: #2D2D2D;*/
/*    border-color: none;*/
/*    color: #50efc1;*/
    
/*}*/

/*.fc .fc-button-primary:not(:disabled), .fc .fc-button-primary:not(:disabled) {*/
/*    background-color: #50efc1;*/
/*    border-color: none;*/
/*    color: #2D2D2D;*/
    
/*}*/

/*.fc .fc-button-primary:disabled {*/
/*    background-color: #2D2D2D;*/
/*    border-color: none;*/
/*    color: var(--fc-button-text-color);*/
/*}*/

/*.fc-theme-standard td:hover{*/
/*    background:#50efc1;*/
/*}*/

/* Default slot size */
/*.fc-daygrid-day-frame {*/
/*  min-height: 80px;*/
/*}*/

/************************************/


/*@media (max-width: 600px) {*/

/*  .fc-daygrid-day-frame {*/
/*    height: 50px;*/
/*    font-size: 12px;*/
/*  }*/
  
/*    .fc .fc-daygrid-month-start {*/
/*        font-size: 0.75em;*/
/*        font-weight: 700;*/
/*    }*/

/*.fc {*/
/*    font-size: 0.75em;*/
/*}*/



/*.fc .fc-button-group > .fc-button {*/
/*    flex: 1 1 auto;*/
/*    position: relative;*/
/*    font-size: 12px;*/
/*}*/


/*.fc .fc-toolbar-title {*/
/*    font-size: 1em;*/
/*    margin: 0px 1px;*/
/*    text-align: right;*/
/*}*/

  
/*}*/


/* General font & colors */
/*.fc {*/
/*  font-family: 'Roboto', Arial, sans-serif;*/
/*  background: #fff;*/
/*  border-radius: 8px;*/
/*  box-shadow: 0 1px 4px rgba(0,0,0,0.08);*/
/*  overflow: hidden;*/
/*}*/

/* Toolbar like Google Calendar */
/*.fc .fc-toolbar {*/
/*  background: #fff;*/
  /*border-bottom: 1px solid #e0e0e0;*/
/*  padding: 10px;*/
/*}*/
/*.fc .fc-toolbar-title {*/
/*  font-size: 16px;*/
/*  font-weight: 500;*/
/*  color: #202124;*/
/*}*/
/*.fc .fc-button {*/
/*  background: transparent;*/
/*  border: none;*/
/*  color: #1a73e8;*/
/*  font-size: 14px;*/
/*  padding: 4px 8px;*/
/*  margin: 0 2px;*/
/*  border-radius: 4px;*/
/*  transition: background 0.2s;*/
/*}*/
/*.fc .fc-button:hover {*/
/*  background: rgba(26,115,232,0.08);*/
/*}*/
/*.fc .fc-button.fc-button-active {*/
/*  background: rgba(26,115,232,0.12);*/
/*  font-weight: 500;*/
/*}*/

/* Day grid cells */
/*.fc .fc-daygrid-day {*/
/*  border: 1px solid #f1f3f4;*/
/*}*/
/*.fc .fc-daygrid-day-frame {*/
/*  padding: 6px;*/
/*}*/
/*.fc .fc-daygrid-day-number {*/
/*  font-size: 13px;*/
/*  font-weight: 500;*/
/*  color: #3c4043;*/
/*}*/

/* Today highlight */
/*.fc .fc-day-today {*/
/*  background: #e8f0fe !important;*/
/*  border: 1px solid #d2e3fc !important;*/
/*}*/
/*.fc .fc-day-today .fc-daygrid-day-number {*/
/*  color: #1a73e8;*/
/*  font-weight: bold;*/
/*}*/

/* Hover effect */
/*.fc .fc-daygrid-day:hover {*/
/*  background: #f8f9fa;*/
/*  cursor: pointer;*/
/*}*/

/* Events (if any) */
/*.fc .fc-event {*/
/*  background: #1a73e8;*/
/*  border: none;*/
/*  border-radius: 4px;*/
/*  font-size: 12px;*/
/*  padding: 2px 4px;*/
/*}*/

/* Compact view for mobile */
/*@media (max-width: 600px) {*/
/*  .fc .fc-toolbar-title {*/
/*    font-size: 1em;*/
/*  }*/
/*  .fc .fc-button {*/
/*    font-size: 12px;*/
/*    padding: 2px 6px;*/
/*  }*/
/*  .fc .fc-daygrid-day-frame {*/
/*    min-height: 48px;*/
/*    font-size: 11px;*/
/*  }*/
/*}*/




/******** Calender 2 ******************/

.step-2{
         background-color: #FBFBFB;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%2351EFC0FF' stroke-width='1' stroke-dasharray='7.7' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}



 .booking-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 40px;
            /*box-shadow: 0 2px 8px rgba(0,0,0,0.1);*/
                /*background: #FBFBFB;*/
    /*border:1px dashed #51EFC0;*/
    border-radius: 4px;
        }
        
        
@media (max-width: 600px) {
    .booking-container {
        padding: 30px 15px;
        
    }
    
}

        .booking-grid {
            display: grid;
            grid-template-columns: 500px 1fr;
            gap: 40px;
            margin-bottom: 30px;
        }

        .calendar-section h2,
        .time-section h2 {
            font-size: 20px;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: 20px;
        }

        .time-section .subtitle {
            color: #FF960D;
            font-size: 16px;
            margin-bottom: 20px;
        }

        /* FullCalendar Custom Styles */
        
        .fc {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 20px;
            min-height: 450px;
        }
        
          

        .fc .fc-view-harness {
             min-height: 450px;
        }

        .fc .fc-toolbar {
            margin-bottom: 20px;
        }

        .fc .fc-toolbar-title {
            font-size: 20px;
            font-weight: 600;
            color: #1a1a1a;
        }

        .fc .fc-button {
            background: transparent;
            border: none;
            color: #6b7280;
            padding: 8px;
        }

        .fc .fc-button:hover {
            background: #f3f4f6;
        }

        .fc .fc-button:focus {
            box-shadow: none;
        }

        .fc .fc-col-header-cell {
            padding: 12px 0;
              font-weight: 600;
    font-size: 14px;
    color: #2d2d2d;
            border: none;
        }

        .fc .fc-daygrid-day {
            border: 1px solid #D5D4DF;
            cursor: pointer;
            transition: background 0.2s;
            aspect-ratio: 1;
        }

        .fc .fc-daygrid-day:hover {
            background: #51EFC0;
        }
        
        .fc .fc-daygrid-day:active,  .fc .fc-daygrid-day:focus { background: #51EFC0; }

        .fc .fc-daygrid-day-number {
            padding: 0;
            font-size: 14px;
            color: #333333;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .fc .fc-daygrid-day-top {
            flex-direction: row;
            justify-content: center;
            height: 100%;
        }

        .fc .fc-daygrid-day-frame {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            
        }

        /*.fc .fc-day-other .fc-daygrid-day-number {*/
        /*    color: #A8A8A8;*/

        /*}*/
        
        /*.fc .fc-day-other .fc-daygrid-day-frame  {*/
            

        /*}*/
        
        /*.fc-day.fc-day-other.fc-daygrid-day{*/
        /*     background: #F2F3F7;*/
        /*}*/

        .fc .fc-daygrid-day.fc-day-selected {
             background: #51EFC0;
        }

        .fc .fc-daygrid-day.fc-day-selected .fc-daygrid-day-number {
            color: #2d2d2d;
            font-weight: 600;
        }

        .fc-daygrid-body {
            height: auto !important;
        }

        .fc .fc-scrollgrid {
            border-collapse: separate;
        }

        /*.fc .fc-scrollgrid-section > * {*/
        /*    overflow: visible !important;*/
        /*}*/

        /*.fc .fc-scroller {*/
        /*    overflow: visible !important;*/
        /*}*/

        /*.fc .fc-daygrid-body-unbalanced {*/
        /*    overflow: visible !important;*/
        /*}*/

        /*.fc-media-screen .fc-scroller-liquid-absolute {*/
        /*    position: static !important;*/
        /*}*/

       .fc .fc-daygrid-day-frame {
            min-height: 60px;
            height: auto;
        }

        .fc .fc-daygrid-day-number {
            padding: 12px;
            font-size: 14px;
        }

        .fc .fc-daygrid-day-top {
            flex-direction: row;
        }
        
        
        
        /**** my custom style***/
        
        .fc-scroller-harness table{
            margin:0;
        }
        
        .fc-theme-standard td, .fc-theme-standard th {
            border: none;
        }
        
        .fc .fc-scrollgrid table {
            width:100% !important;
            border:none !important;
        }
        
        .fc-scrollgrid.fc-scrollgrid-liquid{
            border: none !important;
        }
             
           .fc .fc-button-group > .fc-button {
    box-shadow: none;
}

.fc button:hover {
    background:transparent !important;
    color: #51EFC0 !important;
}

 .fc .fc-button-primary:not(:disabled):active , .fc .fc-button-primary:disabled{
    background-color: transparent;
    color: #51EFC0;
    border:none;
 }

.fc .fc-daygrid-day.fc-day-today {
    background-color: rgb(255 147 8 / 25%);
}
        

        @media (max-width: 640px) {
            .fc .fc-daygrid-day-number {
                padding: 8px;
                font-size: 13px;
            }

            .fc .fc-daygrid-day-frame {
                min-height: 30px;
            }

            .fc .fc-col-header-cell {
                padding: 10px 0;
                font-size: 13px;
            }

            .fc .fc-toolbar-title {
                font-size: 18px;
            }

            .fc {
                min-height: 400px;
            }
        }

        /* Time Slots */
        .slots-container {
            min-height: 400px;
            display: flex;
            flex-direction: column;
        }

        .placeholder {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #9ca3af;
        }

        .placeholder-icon {
            width: 80px;
            height: 80px;
            margin-bottom: 16px;
        }

        .placeholder-text {
            font-size: 16px;
        }

        .slots-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }

        .slot-item {
            position: relative;
        }

        .slot-item input[type="radio"] {
            position: absolute;
            opacity: 0;
        }

        .slot-label {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 16px;
            border: 1px solid #E2E2E2;
            border-radius: 8px;
            cursor: pointer;
            font-size: 15px;
            color: #333333;
            background: white;
            transition: all 0.2s;
        }

        .slot-label::before {
            content: '';
            width: 16px;
            height: 16px;
            border: 2px solid #EBEBEB;
            border-radius: 50%;
            flex-shrink: 0;
            transition: all 0.2s;
        }

        .slot-item input[type="radio"]:checked + .slot-label {
            background: #51EFC0;
            border-color: #51EFC0;
            color: #2d2d2d;
        }

        .slot-item input[type="radio"]:checked + .slot-label::before {
            border-color: #FF960D;
            background: #FF960D;
            /*box-shadow: inset 0 0 0 3px #51EFC0;*/
        }

        .slot-label:hover {
            border-color: #51EFC0;
            background: #f0fdf4;
        }

        .slot-label.disabled {
            background: #f3f4f6;
            color: #d1d5db;
            cursor: not-allowed;
            border-color: #E2E2E2;
        }

        .slot-label.disabled::before {
            border-color: #EBEBEB;
            background: #f3f4f6;
        }

        .slot-item input[type="radio"]:disabled + .slot-label:hover {
            border-color: #E2E2E2;
            background: #f3f4f6;
        }

        /* Submit Button */
        .submit-container {
            display: flex;
            justify-content: center;
            margin-top: 30px;
          
        }

        .btn-submit {
            background: #51EFC0;
            border: none;
            padding: 10px 120px;
           border-radius: 4px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s;
            box-shadow:none;
            color:#2d2d2d;
        }

        .btn-submit:hover {
            background: #3dd9ad;
        
        }

        .btn-submit:disabled , .btn-submit:disabled:hover  {
            background: #E0E0E0;
            cursor: not-allowed;
            color:#979797;
          
        }

        @media (max-width: 1024px) {
            .booking-grid {
                grid-template-columns: 1fr;
            }

            .slots-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 640px) {
            .slots-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }



/*********** Select **********/



/*.select {*/
/*  display:flex;*/
/*  flex-direction: column;*/
/*  position:relative;*/
/*  width:250px;*/
/*  height:40px;*/
/*}*/

/*.select::after {*/
/*  content: "";*/
/*  width: 0.8em;*/
/*  height: 0.5em;*/
/*  background-color: green;*/
/*  clip-path: polygon(100% 0%, 0 0%, 50% 100%);*/
/*  display: flex;*/
/*}*/

/*.option {*/
/*  padding:0 30px 0 10px;*/
/*  min-height:40px;*/
/*  display:flex;*/
/*  align-items:center;*/
/*  background:#333;*/
/*  border-top:#222 solid 1px;*/
/*  position:absolute;*/
/*  top:0;*/
/*  width: 100%;*/
/*  pointer-events:none;*/
/*  order:2;*/
/*  z-index:1;*/
/*  transition:background .4s ease-in-out;*/
/*  box-sizing:border-box;*/
/*  overflow:hidden;*/
/*  white-space:nowrap;*/
  
/*}*/

/*.option:hover {*/
/*  background:#666;*/
/*}*/

/*.select:focus .option {*/
/*  position:relative;*/
/*  pointer-events:all;*/
/*}*/



/*input {*/
/*  opacity:0;*/
/*  position:absolute;*/
/*  left:-99999px;*/
/*}*/

/*input:checked + label {*/
/*  order: 1;*/
/*  z-index:2;*/
/*  background:#666;*/
/*  border-top:none;*/
/*  position:relative;*/
/*}*/

/*input:checked + label:after {*/
/*  content:'';*/
/*  width: 0; */
/*	height: 0; */
/*	border-left: 5px solid transparent;*/
/*	border-right: 5px solid transparent;*/
/*	border-top: 5px solid white;*/
/*  position:absolute;*/
/*  right:10px;*/
/*  top:calc(50% - 2.5px);*/
/*  pointer-events:none;*/
/*  z-index:3;*/
/*}*/

/*input:checked + label:before {*/
/*  position:absolute;*/
/*  right:0;*/
/*  height: 40px;*/
/*  width: 40px;*/
/*  content: '';*/
/*  background:#666;*/
/*}*/



.step-3 {
     background: #FBFBFB;
    padding: 40px;
    /*border:1px dashed #51EFC0;*/
    border-radius: 4px;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%2351EFC0FF' stroke-width='1' stroke-dasharray='7.7' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    
}

/*.confirm-container{*/
/*    display:flex;*/
/*    gap:24px;*/
/*    align-items: flex-start;*/
/*    flex-wrap: wrap;*/
/*    margin-bottom: 30px;*/
/*}*/


/*.content{*/
/*display:flex;*/
/*gap:24px;*/
/*flex-wrap:wrap;*/
/*}*/


/*.card{*/
/*background:var(--card-bg);*/
/*border:1px solid var(--border);*/
/*border-radius:8px;*/
/*flex:50%;*/
/*min-width:300px;*/
/*box-sizing:border-box;*/
/*padding: 20px;*/
/*}*/

/*#paid-booking-sectio{*/
/*    border:1px solid var(--border);*/
/*}*/


/*.details,.payments{*/
/*display:flex;*/
/*flex-direction:column;*/
/*padding:20px;*/
/*}*/


/*.row{*/
/*display:flex;*/
/*justify-content:space-between;*/
/*align-items:center;*/
/*border-top:1px solid #E2E2E2;*/
/*padding:14px 0;*/
/*}*/
/*.row:first-child{border-top:none;}*/


/*.label{font-size:15px;color:#444;}*/
/*.value{font-size:15px;color:var(--muted);}*/

/* Confirmation Container */
.confirmation-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
}

.confirmation-section {

  /*padding: 30px;*/
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 25px;
}

/* Appointment Details */
.confirmation-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
    background: #fff;
  border: 1px solid #E2E2E2;
  border-radius: 8px;
}

.confirmation-section{
   display: flex;
   flex-direction: column;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
  height: 70px;
}

.detail-row:last-child {
  border-bottom: none;
  /*padding-bottom: 0;*/
}

.detail-label {
  font-size: 15px;
  font-weight: 500;
  color: #333333;
}

.detail-value {
  font-size: 15px;
  color: #6b7280;
  text-align: right;
}

/* Payment Options */

#paid-booking-section{
    
    background: #fff;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #E2E2E2;
    border-radius: 8px;
    flex: 1;
    
}
.payment-options {
  display: flex;
    flex-direction: column;
    gap: 20px;
    /*background: #fff;*/
}

.payment-option {
     border-bottom: 1px solid #E2E2E2;
    /*border-radius: 4px;*/
    cursor: pointer;
    transition: all 0.2s;
    display: flex
;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    padding-bottom: 20px;
    /* border-top: 1px solid #f0f0f0; */
    height: 70px;
}

.payment-option:hover {
  /*border-color: #51EFC0;*/
  /*background: #f0fdf4;*/
}

.payment-option input[type="radio"] {
  width: 20px;
  height: 20px;
  margin-right: 15px;
  cursor: pointer;
  accent-color: #51EFC0;
}

.payment-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.payment-icon {
  width: 32px;
  height: 32px;
}

.payment-text {
  font-size: 15px;
  font-weight: 500;
  color: #333333;
}

/* Service Price */
.service-price {
    display: flex
;
    justify-content: space-between;
    align-items: center;
    padding: 20px 16px;
    margin-top: 20px;
}

.service-price-name {
  font-size: 15px;
  font-weight: 500;
  color: #333333;
}

.service-price-amount {
  font-size: 20px;
  font-weight: 400;
  color: #333333;
}

/* Free Booking */
.free-booking-content {
  padding: 30px 0;
  text-align: center;
}

.free-booking-text {
  font-size: 15px;
  color: #6b7280;
}

/* Confirmation Actions */
.confirmation-actions {
  display: flex;
  justify-content: flex-start;
  gap: 15px;
  margin-top: 30px;
}

.tsb-btn {
  padding: 10px 50px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.tsb-btn-confirm {
  background: #51EFC0;
  color: white;
}

.tsb-btn-confirm:hover {
  background: #3dd9ad;
}

.tsb-btn-secondary {
  background: #f3f4f6;
  color: #333333;
  border: 1px solid #E2E2E2;
}

.tsb-btn-secondary:hover {
  background: #e5e7eb;
}

/* Success Modal */
.success-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.success-modal-content {
  background: white;
  border-radius: 16px;
  padding: 50px 60px;
  text-align: center;
  max-width: 500px;
  animation: slideUp 0.3s ease;
  position: relative;
      display: flex
;
    flex-direction: column;
    align-items: center;
}

.success-modal-content:before {
    content: "";
    width: 80%;
    height: 30px;
    bottom: -12px;
    position: absolute;
    left: 9%;
    background: #51EFC0;
    z-index: -1;
    border-radius: 8px;
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.success-icon {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.success-label {
  font-size: 16px;
  color: #6b7280;
  margin-bottom: 10px;
  width:150px;
}

.success-title {
  font-size: 28px;
  font-weight: 700;
  color: #333333;
  margin-bottom: 30px;
}

.success-close {
  background: #51EFC0;
  color: white;
  border: none;
  padding: 14px 50px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.success-close:hover {
  background: #3dd9ad;
}

/* Responsive */
@media (max-width: 768px) {
  .confirmation-container {
    grid-template-columns: 1fr;
  }

  .confirmation-actions {
    flex-direction: column-reverse;
  }

  .tsb-btn {
    width: 100%;
  }

  .success-modal-content {
    margin: 20px;
    padding: 40px 30px;
  }
}







/***************************** Select and fields ***************/


/* Custom Select Styling with Background Image */
/*select.service-select {*/
/*    width: 100%;*/
/*    padding: 16px 45px 16px 50px;*/
/*    font-size: 15px;*/
/*    color: #333333;*/
/*    background-image: url(images/service-icon.svg);*/
/*    background: url(images/service-icon.svg) no-repeat scroll 14px center;*/
/*    background-color: #fff !important;*/
/*    border: 1px solid #E2E2E2;*/
/*    border-radius: 8px;*/
/*    cursor: pointer;*/
/*    -webkit-appearance: none;*/
/*    -moz-appearance: none;*/
/*    appearance: none;*/
/*    transition: all 0.2s;*/
/*    font-family: inherit;*/
/*}*/

/* Custom dropdown arrow */
/*select.service-select {*/
/*    background-image: url(images/service-icon.svg), url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236b7280' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");*/
/*    background-position: 14px center, calc(100% - 20px) center;*/
/*    background-repeat: no-repeat, no-repeat;*/
/*    background-size: 24px 24px, 12px 8px;*/
/*}*/

/*select.service-select:hover {*/
/*    border-color: #51EFC0;*/
/*}*/

/*select.service-select:focus {*/
/*    outline: none;*/
/*    border-color: #51EFC0;*/
/*    box-shadow: 0 0 0 3px rgba(81, 239, 192, 0.1);*/
/*}*/

/* For browsers that support backdrop-filter (optional enhancement) */
/*select.service-select option {*/
/*    padding: 10px;*/
/*    background-color: white;*/
/*    color: #333333;*/
/*}*/

/* Name Input */
/*#user_name {*/
/*    width: 100%;*/
/*    padding: 16px 20px 16px 50px;*/
/*    font-size: 15px;*/
/*    color: #333333;*/
/*    background-image: url(images/user.svg) !important;*/
/*    background: url(images/user.svg) no-repeat scroll 14px center !important;*/
/*    background-color: #fff !important;*/
/*    border: 1px solid #E2E2E2;*/
/*    border-radius: 8px;*/
/*    -webkit-appearance: none;*/
/*    appearance: none;*/
/*    transition: all 0.2s;*/
/*}*/

/*#user_name:hover {*/
/*    border-color: #51EFC0;*/
/*}*/

/*#user_name:focus {*/
/*    outline: none;*/
/*    border-color: #51EFC0;*/
/*    box-shadow: 0 0 0 3px rgba(81, 239, 192, 0.1);*/
/*}*/

/* Email Input */
/*#user_email {*/
/*    width: 100%;*/
/*    padding: 16px 20px 16px 50px;*/
/*    font-size: 15px;*/
/*    color: #333333;*/
/*    background-image: url(images/email.svg) !important;*/
/*    background: url(images/email.svg) no-repeat scroll 14px center !important;*/
/*    background-color: #fff !important;*/
/*    border: 1px solid #E2E2E2;*/
/*    border-radius: 8px;*/
/*    -webkit-appearance: none;*/
/*    appearance: none;*/
/*    transition: all 0.2s;*/
/*}*/

/*#user_email:hover {*/
/*    border-color: #51EFC0;*/
/*}*/

/*#user_email:focus {*/
/*    outline: none;*/
/*    border-color: #51EFC0;*/
/*    box-shadow: 0 0 0 3px rgba(81, 239, 192, 0.1);*/
/*}*/

/* Phone Input */
/*#user_phone {*/
/*    width: 100%;*/
/*    padding: 16px 20px 16px 50px;*/
/*    font-size: 15px;*/
/*    color: #333333;*/
/*    background-image: url(images/phone.svg) !important;*/
/*    background: url(images/phone.svg) no-repeat scroll 14px center !important;*/
/*    background-color: #fff !important;*/
/*    border: 1px solid #E2E2E2;*/
/*    border-radius: 8px;*/
/*    -webkit-appearance: none;*/
/*    appearance: none;*/
/*    transition: all 0.2s;*/
/*}*/

/*#user_phone:hover {*/
/*    border-color: #51EFC0;*/
/*}*/

/*#user_phone:focus {*/
/*    outline: none;*/
/*    border-color: #51EFC0;*/
/*    box-shadow: 0 0 0 3px rgba(81, 239, 192, 0.1);*/
/*}*/

/* Fix autocomplete removing background icons */
/*#user_name:-webkit-autofill,*/
/*#user_email:-webkit-autofill,*/
/*#user_phone:-webkit-autofill,*/
/*#user_name:-webkit-autofill:hover,*/
/*#user_email:-webkit-autofill:hover,*/
/*#user_phone:-webkit-autofill:hover,*/
/*#user_name:-webkit-autofill:focus,*/
/*#user_email:-webkit-autofill:focus,*/
/*#user_phone:-webkit-autofill:focus {*/
/*    -webkit-box-shadow: none !important;*/
    /*-webkit-text-fill-color: #333333 !important;*/
    /*background-color: #fff !important;*/
/*    transition: background-color 5000s ease-in-out 0s;*/
/*    background: url(images/envelope.svg) no-repeat scroll 14px 10px !important;*/
/*}*/

/* Keep background images on autofill */
/*#user_name:-webkit-autofill {*/
/*    background-image: url(images/user.svg) !important;*/
/*    background-repeat: no-repeat !important;*/
/*    background-position: 14px center !important;*/
/*    background-size: 24px 24px !important;*/
/*}*/

/*#user_email:-webkit-autofill {*/
/*    background-image: url(images/email.svg) !important;*/
/*    background-repeat: no-repeat !important;*/
/*    background-position: 14px center !important;*/
/*    background-size: 24px 24px !important;*/
/*}*/

/*#user_phone:-webkit-autofill {*/
/*    background-image: url(images/phone.svg) !important;*/
/*    background-repeat: no-repeat !important;*/
/*    background-position: 14px center !important;*/
/*    background-size: 24px 24px !important;*/
/*}*/

/* Prevent autocomplete from removing select background */
/*select:-webkit-autofill,*/
/*select:-webkit-autofill:hover,*/
/*select:-webkit-autofill:focus {*/
/*    -webkit-box-shadow: 0 0 0 30px white inset !important;*/
/*    -webkit-text-fill-color: #333333 !important;*/
/*    background-color: #fff !important;*/
/*}*/

/*select.service-select:-webkit-autofill {*/
/*    background-image: url(images/service-icon.svg), url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236b7280' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;*/
/*    background-position: 14px center, calc(100% - 20px) center !important;*/
/*    background-repeat: no-repeat, no-repeat !important;*/
/*    background-size: 24px 24px, 12px 8px !important;*/
/*}*/

/* Label styling */
/*.form-label {*/
/*    display: block;*/
/*    font-size: 15px;*/
/*    font-weight: 500;*/
/*    color: #333333;*/
/*    margin-bottom: 10px;*/
/*}*/

/*.form-label .required {*/
/*    color: #ef4444;*/
/*    margin-left: 2px;*/
/*}*/

/* Form group spacing */
/*.form-group {*/
/*    margin-bottom: 25px;*/
/*}*/


/*input:-webkit-autofill,*/
/*input:-webkit-autofill:focus {*/
/*    transition: background-color 600000s 0s, color 600000s 0s;*/
/*}*/
/*input[data-autocompleted] {*/
/*    background-color: transparent !important;*/
/*    background: url(images/envelope.svg) no-repeat scroll 14px 10px !important;*/

/*}*/

/*input:is(:-webkit-autofill, :autofill) {*/
/*  border: 3px solid darkorange;*/
/*  background: url(images/envelope.svg) no-repeat scroll 14px 10px !important;*/
/*}*/


select {
  margin: 50px;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(https://stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}


/* CAUTION: Internet Explorer hackery ahead */


select::-ms-expand {
    display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}




/* Remove autofill background color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #333333 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Keep background images when autofilled */
#user_name:-webkit-autofill {
    background-image: url(images/user.svg) !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
}

#user_email:-webkit-autofill {
    background-image: url(images/email.svg) !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
}

#user_phone:-webkit-autofill {
    background-image: url(images/phone.svg) !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
}