@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Sora:wght@100..800&display=swap');
:root {
    --white: #fff;
    --black: #000;
    --closed:#666666;
    --select-color:#363636;
}

.blue-text{color: #020C87;}
.gray-text{color: gray;}
.upload-text{color: #848484;}
.select-color{color:var( --select-color) ;}
.black{color: var(--black)}
.closed-text{color: var(--closed);}

h3{font-size: 34px; font-weight: 600;}
h4{font-size: 20px; font-weight: 600;}
.fs-14{font-size: 14px;}
.fs-16{font-size: 16px;}
.fs-18{font-size: 18px;}
.fs-34{font-size: 34px;}
.fw-600{font-weight: 600;}
.fw-500{font-weight: 500;}
.sora{font-family: Sora;}

.max-100 { max-height: 100vh; overflow: hidden; }
a{text-decoration: none;}

body.page-loading{overflow: hidden;}
/* Scrollbar */
::-webkit-scrollbar {  width: 10px;  background-color: transparent;  scroll-behavior: smooth;}
::-webkit-scrollbar-track {  background-color: #e4000000;  }
::-webkit-scrollbar-thumb {  background-color: #020c87;  border-radius: 20px;  }
::-webkit-scrollbar-thumb:hover {  background-color: #020c87;  }

/* body{overflow: hidden;} */

.professional-acc-form #acc-form, .register-form { position: relative; margin-top: 10px; }
.professional-acc-form #acc-form fieldset { padding-bottom: 20px; position: relative }
.professional-acc-form .form-card { text-align: left }
.professional-acc-form #acc-form fieldset:not(:first-of-type), .register-form fieldset:not(:first-of-type) { display: none }

.customer-registration #acc-form input[type="password"], body .professional-acc-form #acc-form .form-select,    .professional-acc-form #acc-form input[type="text"], #acc-form input[type="email"], #acc-form input[type=tel], #acc-form input[type="number"], #acc-form input[type="date"], #acc-form input[type="url"], #acc-form textarea { padding: 14px 12px 14px 16px; border-radius: 10px; border: 1px solid #DCDDE8 ;
    /* background: #FFF;  */
    margin-top: 2px; width: 100%; font-size: 14px; outline: unset; }
.professional-acc-form input[type="text"], #acc-form input[type="email"], #acc-form input[type=tel], #acc-form input[type="number"], #acc-form input[type="date"], #acc-form input[type="url"], #acc-form textarea {margin-bottom: 4px;}

.field-spacing{margin-bottom: 2em;}
.field-spacing-cust {margin-bottom: 1em;}

#acc-form input[type=tel]  {padding: 14px 21px 15px 50px;}
.iti--allow-dropdown{ width: 100%;}
/* .iti--allow-dropdown{ width: 100%; margin-bottom: 30px; } */
/* .phone-call .iti:has(#phone-error) .iti__selected-flag {  height: 50px;} */
/* .customer-registration .iti__selected-flag { padding-top: 15px; height:auto !important;} */
.iti--separate-dial-code .iti__selected-flag {  background-color: transparent !important;}
.iti__selected-flag:focus-visible { outline: unset;}

.professional-acc-form #progressbar li {border-bottom: 8px solid; border-radius: 10px;}
.professional-acc-form .card { z-index: 0; border: none; position: relative; }
.professional-acc-form #progressbar { margin-bottom: 30px; overflow: hidden; color: lightgrey; gap: 10px; display: flex; }
.professional-acc-form #progressbar .active { color: #020C87; }
.professional-acc-form #progressbar li { list-style-type: none; font-size: 15px; width: 20%; float: left; position: relative; font-weight: 400; }
.professional-acc-form .fit-image { width: 100%; object-fit: cover; }
.professional-acc-form label{ font-size: 14px; font-weight: 500; color: #000; margin-bottom: 10px;}

.professional-acc-form h2{color: #000; font-family: Sora; font-size: 34px; font-style: normal; font-weight: 600;}
.professional-acc-form    p{font-size: 14px; font-style: normal; font-weight: 400;}
.professional-acc-form .certi-upload-text{color: var(--black); font-size: 14px; font-weight: 500;}
.professional-acc-form ol, ul { padding-left: 0; }
.professional-acc-form .next, .professional-acc-form .submit {padding: 10px 42px; border-radius: 10px; background: #020C87; color: #FFF; font-size: 16px; border: none;}

.professional-acc-form i.previous.action-button-previous, .first-stepper-form i.previous.action-button-previous { cursor: pointer; border-radius: 50%; background: #F1F1F1; height: 45px; display: flex; width: 45px; text-align: center; justify-content: center; align-items: center; }
.professional-acc-form .google_btn, .outlook_btn{border-radius: 10px;     color: black; font-size: 14px;  font-weight: 600; border: 1px solid rgba(220, 221, 232, 0.87); padding: 10px 30px; background: #F9F9F9;}
.professional-acc-form .next, .first-stepper-form .next{cursor: pointer;}
.professional-acc-form .google_btn, .outlook_btn{border-radius: 10px; border: 1px solid rgba(220, 221, 232, 0.87); padding: 10px 30px; background: #F9F9F9;}
.professional-acc-form .next, .first-stepper-form .next{cursor: pointer;}

.professional-acc-form .blue-border-btn  , .professional-acc-form  .action-button{text-align: center;font-weight: 600;}
/* .sub_category label.custom-checkbox { padding: 8px;} */
.blue-border-btn{padding: 10px 42px; border: 2px solid #020C87; border-radius: 10px; background: var(--white-smoke); color: #020C87; font-size: 16px;}
.error-message {display: none;  color: red; font-weight: 700; font-size: 13px; margin-top: 5px;}
.checkbox-box.error {border-color: red !important;  background-color: #ffe6e6;}
.services-section .custom-checkbox input[type="checkbox"]:checked + .checkbox-box::after { content: "";  position: absolute;   top: 10px; right: 10px;  background-image: url('../images/Checkbox-form.svg'); background-repeat: no-repeat;  background-size: contain; height: 20px; width: 20px;}

.service_category.hidden-by-search {
    display: none !important;
}

/* Custom Radio btns - Step 2 */
.services-section .custom-radio { position: relative; display: inline-block; width: 100%; }
.services-section .custom-radio input[type="radio"] { display: none; }
.services-section .radio-box {display: flex; flex-direction: column; align-items: flex-start; justify-content: center; position: relative; transition: border-color 0.3s, box-shadow 0.3s; }
.services-section .custom-radio input[type="radio"]:checked + .radio-box { border-color: #0033cc; }
.services-section .custom-radio input[type="radio"]:checked + .radio-box::after {content: ""; position: absolute; top: 10px; right: 10px; background-image: url(./Checkbox-form.svg); background-repeat: no-repeat; height: 20px; width: 20px; }
.services-section .label-text {margin-top: 10px;  font-weight: 500;}

/* Checkbox - step 2 */
.custom-checkbox-group { display: flex; flex-wrap: wrap; gap: 12px; background-color: #f9f9f9; padding: 16px; border-radius: 12px; }
.custom-checkbox { position: relative; }
.custom-checkbox input[type="checkbox"] { display: none; }
.checkbox-label { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #ccc; border-radius: 20px; padding: 8px 16px; font-size: 14px; background-color: #F9F9F9; cursor: pointer; transition: all 0.3s; font-weight: 400; font-family: sora;}
.checkbox-label::before { content: ""; width: 18px; height: 18px; border: 2px solid #ccc; border-radius: 5px; display: inline-block; transition: all 0.3s; background-color: white; }
.custom-checkbox input[type="checkbox"]:checked + .checkbox-label { border-color: #1c2c8f; color: #1c2c8f; font-weight: 500; background-color: linear-gradient(0deg, rgba(2, 12, 135, 0.04) 0%, rgba(2, 12, 135, 0.04) 100%), linear-gradient(0deg, #FFF 0%, #FFF 100%), #F9F9F9;; }
input[type="checkbox"]:checked + .checkbox-label::before { background-image: url("../images/Checkbox-form.svg"); background-repeat: no-repeat; background-position: center; border: unset; }
.services-section .custom-radio input[type="radio"]:checked + .custom-radio { border-color: #1c2c8f; color: #1c2c8f; font-weight: 500; }

/* second checkboxes */
.services-section.custom-radio-group2{display: flex; flex-wrap: wrap; width: 100%; gap: 17px;}
.services-section .custom-radio {position: relative; display: inline-block;}
.services {height: 605px; overflow-y: auto; padding-right: 20px;}
.services::-webkit-scrollbar { width: 50px !important; }

body .gray-card{border-radius: 10px;  border: 1px solid #DCDDE8; background: #FFF; padding: 25px;}
.time-picker-calendar label.days{  display: flex;  height: 44px; gap: 10px; align-items: center;}

.time-picker-calendar2 label.days {
    display: flex;
    height: 44px;
    gap: 10px;
    align-items: center;
}

input::placeholder, #country option:first-child, .input-placeholder{ color: #b3b3b3;  font-weight: 400;}
.input-placeholder{color: #000 !important;} 

.custom-radio input[type="checkbox"] { display: none; }
.services-section .custom-radio  input[type="checkbox"]:checked + .checkbox-label::before { background-image: url("../images/Checkbox-form.svg"); background-repeat: no-repeat; background-position: center; border: unset; }

/*Image Input holder*/
.image-input-empty  {background-image: url('../images/image_input_holder.png');}
[data-bs-theme="dark"] .image-input-placeholder {background-image: url('../images/image_input_holder.png');}
.image_label { display: flex; justify-content: space-between; width: 51%; align-items: center; margin-bottom: 3em; gap: 40px; }
/* .create_profile .image-input [data-kt-image-input-action=cancel], .image-input [data-kt-image-input-action=remove] { position: absolute;  z-index: 1; left: 19em; top: 12em; border: 1px solid green; background: #F0F9F4; color: black; width: 123px; padding: 7px; display: flex; justify-content: center; } */
.image-input.image-input-outline .image-input-wrapper {  border-radius: 50%; margin: -3px;}
.image-input [data-kt-image-input-action=change] { left: 19em; top: 5em; width: 243px; z-index: 1; }
.image-input-wrapper { background-image: url('../images/image_input_holder.png'); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 50%; width: 125px; height: 125px; }

#toggle-password i, #toggle-password-otp i , #toggle-password-confirm i { cursor: pointer;}
button.delete-block { border: 1px solid #FFF; background: #b42e2ef2; color: #FFF; border-radius: 20px; padding: 10px 15px; }
.first-stepper-form .step-1 img.next.action-button {   width: 25px;  height: 25px;}
button.delete-block2 { border: 1px solid #FFF; background: #b42e2ef2; color: #FFF; border-radius: 5px; padding: 5px 15px; }

/* .iti__flag-container { margin-left: 18px; } */

/*Dropzone*/
.upload-box { padding: 30px; background: var(--white-smoke); cursor: pointer; border-radius: 4px; border: 1px dashed gray; background: #FFF; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px;}
.upload-box { border: 2px dashed #ccc; border-radius: 10px; padding: 5rem 1rem; text-align: center; cursor: pointer; background-color: #f9f9f9; transition: background 0.3s ease; position: relative; }
.upload-box:hover { background-color: #eee; }
.upload-box img { width: 60px; height: 40px; }

/* Preview container for certificates (images) */
.add-file { display: block; font-size: 18px; margin-top: 10px; color: #555; }
.preview-container { display: flex; flex-wrap: wrap; margin-top: 15px; gap: 15px; height: 10px; }
.preview-box { width: 160px; height: 95px; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; position: relative; background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); top: -22.3em; left: 39%; }
.preview-box img { width: 100%; height: 100%; object-fit: contain; }

/* Preview for file uploads (PDFs, ZIPs, DOCs) */
.preview-box-file { display: flex; align-items: center; gap: 12px; border: 1px solid #ddd; padding: 12px; border-radius: 10px; background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.05); position: relative; width: 100%; max-width: 300px; }

/* Remove button for both */
.remove-image, .remove-file { position: absolute; top: 5px; right: 8px; background: red; color: white; border: none; border-radius: 50%; width: 22px; height: 22px; font-size: 14px; line-height: 20px; cursor: pointer; text-align: center; padding: 0; display: flex; align-items: center; justify-content: center; }
.upload-cert-btn{ padding: 7px 20px; border-radius: 20px; background: #020C87; color: #FFF;}
.cert-excep { display: flex; width: 200px; align-items: center; gap: 8px; margin-bottom: 1em; }
.addMoreBtn { border-radius: 10px; border: 1px dashed #020C87; background: #FFF; padding: 15px; margin-block: 2em; width: 100%;}

/*Timezone*/
.start-time .flatpickr-input, .end-time .flatpickr-input, .start-time1 .flatpickr-input, .end-time1 .flatpickr-input { border-radius: 10px; border: 1px solid #DCDDE8; background: #FFF; padding: 19px !important; width: 120px !important; }
.start-time { display: none ; }

/*Second stepper form*/
.login-side-image img{width: 100%; height: 100vh;object-fit: cover;}
.first-stepper-form  .login-side-image img {  width: 100%; height: 100%; position: absolute; top: 0; left: 0;  object-fit: cover;}

.blue-btn, .resend-otp-btn {border-radius: 10px; background: #020C87; padding: 14px 50px; text-align: center; color: #FFF; border: 1px solid #FFF; width: 100%;}
.register-form input[type="email"]{border-radius: 10px; outline: none; border: 1px solid rgba(220, 221, 232, 0.87); background: #FFF; padding: 14px 12px 14px 16px; outline: unset;}
input:focus{border-color: unset !important; box-shadow: none !important;}

.site_logo { display: flex; flex-direction: column; align-items: center; }
.site_logo ul { display: flex ; gap: 30px; margin-top: 2em; }
.site_logo ul li{font-size: 14px; color: #020C87;}
.site_logo ul li a{font-family:sora; font-size: 14px; color: #020C87;}
.site_logo ul li:first-child::marker {
  content: none;
}



.services-section .custom-radio input[type="radio"]:checked + .radio-box::after, .services-section .custom-radio input[type="checkbox"]:checked + .radio-box::after { content: ""; position: absolute; top: 10px; right: 10px; background-image: url(../images/Checkbox-form.svg); background-repeat: no-repeat; height: 20px; width: 20px; }
#toggle-password-otp i { padding-bottom: 6em; }

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* input[type=checkbox] { accent-color: #020C87;} */

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #DCDDE8;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    vertical-align: middle;
}

input[type="checkbox"]:checked {
    background-color: #020C87;
    border-color: #020C87;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath stroke='white' stroke-width='2' d='M13.485 1.781a.75.75 0 0 1 1.06 1.06L6.56 10.828a.75.75 0 0 1-1.06 0L1.454 6.782a.75.75 0 1 1 1.06-1.06l3.514 3.513L13.485 1.78z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
    border-radius: 4px;
}


.circle-crop  { border-radius: 50% !important;}
.single-explore-item { background: #fff; border: 1px solid #edeff1; border-radius: 3px; margin-bottom: 25px; -webkit-transition: .3s linear; -moz-transition: .3s linear; -ms-transition: .3s linear; -o-transition: .3s linear; transition: .3s linear; }
.single-explore-img-info { position: absolute; bottom: -20px; left: 0; width: 100%; opacity: 0; visibility: hidden; -webkit-transition: .3s linear; -moz-transition: .3s linear; -ms-transition: .3s linear; -o-transition: .3s linear; transition: .3s linear; }
.single-explore-item:hover .single-explore-img-info{ opacity:1; visibility:visible; bottom:0px }
.single-explore-img-info button{ position: absolute; bottom: 15px; left: 15px; height: 21px; line-height: 21px; background: #ff545a; border-radius: 3px; color: #fcfcfc; text-transform: capitalize; text-align: center; font-size: 12px; }

/* .HolidayModal.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 1;} */

.modal-backdrop {
    opacity: 0.5 !important;
  z-index: 1040 !important;
}
.modal {
  z-index: 1050 !important;
}



/* .HolidayModal .modal-content { background: #fff; padding: 20px; border-radius: 10px; width: 300px; } */
/* .HolidayModal .modal-content input { width: 100%; margin: 10px 0; padding: 8px; } */
.HolidayModal .modal-content .close { float: right; font-size: 18px; cursor: pointer; }

button.add-custom-holiday-btn { border-radius: 8px; width: fit-content; border: 1px solid #F0F0F0; padding: 8px 14px; color: #020C87; font-size: 16px; font-weight: 600; background: #FFF; }

.exception-textarea { display: none;}
.exception-checkbox:has(input:checked) .exception-textarea { display: block;}

.services-section.custom-radio-group input[type="radio"]:checked + .radio-box { border: 2px solid #020C87; border-radius: 6px; border-radius: 10px; background: #FFF; padding: 25px; }
.services-section.custom-radio-group span.radio-box { border-radius: 10px; border: 1px solid #DCDDE8; background: #FFF; padding: 25px; }

img.service-icon{width: 50px; height: 50px; border-radius: 5px; object-fit: cover;}

/* Checbox */
.custom-checkbox { display: inline-block; cursor: pointer; } .custom-checkbox input { display: none; }
.checkbox-box { display: flex; flex-direction: column; align-items: flex-start; border: 1px solid #ddd; border-radius: 10px; padding: 20px; width: 180px; height: 140px; position: relative; transition: all 0.3s ease; background-color: white; }
.label-text { font-size: 16px; font-weight: 500; color: #000; text-align: center; }

/* .custom-checkbox  input[type="checkbox"]:checked + .checkbox-box{ border: px solid #020C87;} */
input[type="checkbox"]:checked + .checkbox-box { border: 2px solid #020C87;}

/* Eye icon positioning fix - no longer needed since we removed is-invalid class */

.time-picker-calendar2{display: flex; justify-content: space-between; align-items: center;}
.time-picker-calendar2 .checked-time { display: none;}
.time-picker-calendar2:has(input:checked) .closed-time { display: none;}
.time-picker-calendar2:has(input:checked) .checked-time, .time-picker-calendar2 .closed-time {  display: flex; align-items: center; justify-content: end; gap: 10px;}

body .stepper-navigation { position: fixed; z-index: 99; width: 90%; padding-top: 1.5em; height: 100px; background: #FCFCFC; }

/* .professional-acc-form .image-input [data-kt-image-input-action=remove] { position: absolute; top: 8em; left: 8em; } */
.professional-acc-form .image-input i { font-size: 18px; color: mediumvioletred; }

/* .cropper-image .image-input:not(.image-input-empty) .btn-icon {
    position: absolute;
    top: -18px;
    LEFT: -2EM;
    display: inline-flex;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    padding: 4px;
    cursor: pointer;
    height: 20px;
    width: 20px;
} */





.first-stepper-form .step-1 input[type="radio"].card-radio { display: none; }
.first-stepper-form .step-1  input[type="radio"].card-radio { display: none; }
.first-stepper-form .step-1 input[type="radio"].card-radio:checked + .gray-card { border: 2px solid #020C87; }
input[readonly] {
    background-color: #f9f9f9 !important;
}


.image-wrapper.error { border: 2px solid red; border-radius: 50%; padding: 5px; }

.parent_services .service_category .radio-box { cursor: pointer; }
.parent_services .service_category.active .radio-box { border: 2px solid #020C87; }
.parent_services .sub_categories .sub_category { display: none; }
.parent_services .sub_categories .sub_category.show { margin: 20px; }
.parent_services .sub_categories:has(.sub_category.show) { padding-bottom: 30px; }

.professional-acc-form label.error {  color: red; font-size: 13px;}
/* .customer-registration:has(.error) .iti__flag-container { top: -24px;} */

.my-swal-container {    z-index: 10000;}
.my-swal-popup {  border-radius: 16px !important;   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;}
.my-swal-title { font-weight: 600 !important; color: #374151 !important;}
.my-swal-confirm-btn {  border-radius: 8px !important; font-weight: 500 !important;  padding: 12px 24px !important; font-size: 16px !important;  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;  transition: all 0.2s ease !important;}

.my-swal-confirm-btn:hover {  transform: translateY(-1px) !important;  box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.15) !important;}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm { background-color: #020C87;}

/* Input wrapper frst step: */
.pro-account-image-holder  .image-input .image-input-wrapper { width: 125px; height: 125px; border-radius: 50% !important; }
.image-input:not(.image-input-empty) {  background-image: none !important; width: 125px;  height: 125px;}
.pro-stepper-header {  background: #fcfcfc;}
i.pass-icon {  position: absolute;  top: 44px;  right: 26px;}

.customer-registration #acc-form input[type="text"]{    margin-bottom: 0; }

/* customer-registration */

.select2-dropdown {
    background-color: #fff;
    border: none;
    border: 0;
    box-shadow: var(--bs-dropdown-box-shadow);
    border-radius: .475rem;
    padding: 1rem 0;
    background-color: var(--bs-dropdown-bg);
}

    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #020C87;
    color: #fff;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    background-color: transparent;
    border: none;
    border-bottom-left-radius: 4px;
    color: #999999eb;
    cursor: pointer;
    font-size: 1em;
    font-weight: 700;
    padding: 0 4px;
    position: absolute;
    left: unset;
    top: 0;
    RIGHT: 0;
}


/* Add Font Awesome caret */



.select-arrow::after {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free";
    content: "\f078"; /* fa-chevron-down */
    font-weight: 900;
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    color: #7e8299;
    font-size: 0.75rem;
    pointer-events: none;
}

.select2-container--bootstrap-5.select2-container--open .select2-selection--multiple::after {
    content: "\f077"; /* fa-chevron-up */
}



input:focus { border: 1px solid #dcdde8 !important;  outline: unset;}
.after-crop-img img,  .dz-img {    max-width: 100%;  height: auto; display: block;  }
#cropmodal .modal-dialog { max-width: 1000px; }
#cropmodal .modal-body {  max-height: calc(100vh - 220px); overflow: auto;}
#cropmodal .img-container { max-height: calc(100vh - 260px); overflow: auto;}
#cropmodal .img-container img {  max-width: 100%;   height: auto; display: block;}

.iti:has(#professional-phone-error) .iti__flag-container {  top: -26px; }
.custom_loc {  margin-bottom: 2em;}

/* Select2 */
body .service_preferances textarea.select2-search__field {  width: 100% !important;  height: 100% !important;  margin-bottom: unset !important; }
/* .select2-container .select2-selection--multiple .select2-selection__rendered { display: flex; flex-wrap: wrap; border-radius: 10px; gap: 17px; border: 1px solid #DCDDE8; background: #FFF; padding: 11px; }  */
.select2-selection--multiple .select2-selection__rendered:empty {  display: none;}
.service_preferances .select2-container li.select2-selection__choice {  border: 1px solid #DCDDE8;  background: #FFF;  padding: 11px !important;  border-radius: 10px;}
.service_preferances .select2-container .select2-selection--multiple .select2-selection__rendered { display: flex; flex-wrap: wrap; border-radius: 10px; gap: 17px; border: unset; background: unset; padding: unset; }
.service_preferances ul{display: flex; flex-wrap: wrap; gap: 17px;}

button.select2-selection__choice__remove { border: 1px solid #DCDDE8; border-radius: 2px;}
.customer-loc-map #map-placeholder {   margin-top: 2em;}
.custom-radio .card{cursor: pointer;}
.service_preferances textarea {display: none;}
.select2-container .select2-selection--multiple .select2-selection__rendered{    margin-bottom: unset;}
.service_preferances .select2-container .select2-selection--multiple{ display: flex; flex-wrap: wrap; border-radius: 10px; gap: 17px; border: 1px solid #DCDDE8; background: #FFF; padding: 11px !important; min-height: 50px; }
.first-stepper-form .gray-card {cursor: pointer;}

button.remove-banner-btn i {  color: #FFF;}
button.remove-banner-btn { border: 1px solid red;  border-radius: 4px;  background: red;}

.gray-card.time-days
 {
    height: 300px;
    overflow-y: scroll;
}
/* Default center position (when error is hidden) */
/* body:not(:has(.error-message:is(:not([hidden]):not([style*="display:none"])))) .translate-middle {
  transform: translate(-50%, -50%) !important;
} */

/* When error-message is visible (display:block or not hidden) */
/* body:has(.error-message:is(:not([hidden]):not([style*="display:none"]))) .translate-middle {
  transform: translate(-20%, -85%) !important;
} */
.register-eyeicon #toggle-password {
   right: 12px;
    bottom: calc(100% - 62px);
}
 #toggle-password-otp {
    right: 12px;
    bottom: calc(100% - 136px);
}


.cancel-btn { padding: 10px 16px; background: transparent; color: black;  font-size: 13px; font-weight: 500; cursor: pointer;border-radius: 8px; border: 2px solid #e5e5e5;}
.save-btn{padding: 10px 16px; color: #FFF; font-size: 13px; font-style: normal; font-weight: 500; border-radius: 8px; background: #020C87;border: 1px solid transparent;}

/* Cropper Modal */

/* === Upload Image Area === */
.cropper-image .image-input {
    position: relative;
    width: 135px;
    height: 135px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background-color: #fafafa;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.2s;
    margin-bottom: 10px;
}

.cropper-image .image-input:hover {
    border-color: #0014C8;
}


        .image-input:hover {
            border-color: #0014C8;
        }

.cropper-image .image-input-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    display: none;
}

.cropper-image .image-input:not(.image-input-empty) .image-input-wrapper {
    display: block;
}

.cropper-image .image-label {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #0014C8;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    z-index: 10;
}

/* Keep label visible even when image is uploaded */
.cropper-image .image-input:not(.image-input-empty) .image-label {
    display: flex;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 10px;
    backdrop-filter: blur(5px);
}

.cropper-image .btn-icon {
    display: none;
}

/* .image-input:not(.image-input-empty) .btn-icon {
    position: absolute;
    top: 8em;
    left: 16ex;
    display: inline-flex;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    padding: 4px;
    cursor: pointer;
    height: 20px;
    width: 20px;
} */
.image-input:not(.image-input-empty) .btn-icon {
    position: absolute;
    top: 1em;
    left: 14ex;
    display: inline-flex;
    background: #fff;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    height: 40px;
    width: 40px;
}

/* === Cropper Modal === */
.cropper-image #cropperModal {
    display: none;
    position: fixed;
    z-index: 1060;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.65);
    justify-content: center;
    align-items: center;
}

.cropper-image #cropperModal.show {
    display: flex;
}

.cropper-image .cropper-modal-dialog {
    background: #fff;
    border-radius: 12px;
    max-width: 500px;
    width: 80%;
    overflow: hidden;
    display: flex
;
    flex-direction: column;
}
.cropper-image .cropper-modal-header,
.cropper-image .cropper-modal-footer {
    padding: 16px 24px;
    border: none;
    display: flex;
    justify-content: end;
    gap: 10px;
}

.cropper-image .cropper-modal-header {
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cropper-image .cropper-modal-body {
        flex: 1;
    padding: 20px;
    text-align: center;
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: 360px;
    overflow: hidden;
}

.cropper-image .cropper-container-wrapper {
    width: 100%;
    max-width: 100%;
    height: 350px;
    overflow: hidden;
    border-radius: 10px;
    background: #f8f9fa;
}

.cropper-image .zoom-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.zoom-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zoom-btn:hover {
    background: rgba(255, 255, 255, 1);
}

.zoom-btn svg {
    width: 16px;
    height: 16px;
}


.error-input {
    border-color: #dc3545 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25) !important;
}

.image-input.error-input {
    border-color: #dc3545 !important;
}

.image-input.error-input .image-input-wrapper {
    border-color: #dc3545 !important;
}

/* Map and Location Styles */
#pac-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 10px;
}

#pac-input:focus {
    outline: none;
    border-color: #020C87;
    box-shadow: 0 0 0 2px rgba(2, 12, 135, 0.1);
}

#map {
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

#map-placeholder {
    border: 1px solid #e1e5e9;
    border-radius: 8px;
}

/* Phone Input Styles */
.iti {
    width: 100%;
}

.iti__country-list {
    z-index: 9999;
}

.iti__selected-flag {
    padding: 12px 16px;
}

.iti input[type="tel"] {
    padding: 12px 16px;
    padding-left: 60px;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    font-size: 14px;
    width: 100%;
}

.iti input[type="tel"]:focus {
    outline: none;
    border-color: #020C87;
    box-shadow: 0 0 0 2px rgba(2, 12, 135, 0.1);
}

.iti input[type="tel"].error-input {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25) !important;
}




img.register-logo{height: 70px; width: 100px;}

.cropper-btn-close i.fas.fa-times {
    color: #808080;
    font-size: 16px;
}

button.cropper-btn-close {
    border: unset;
    background: unset;
    margin-right: -12px;
}
/* register-points */
.stepper-form-width {
    width: 75%;
    margin: auto;
    margin-top: 4rem;
}
.login-form{
       width: 75%;
    margin: auto;
    margin-top: 7rem;
}

body .field-spacing .input-field-padding{padding-left: 100px;
}

.time-input {
    padding: 9px 36px 9px 14px;
    font-size: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    min-width: 120px;
    outline: none;
    transition: all 0.2s;
    color: #333;
}

.time-input:hover {
    border-color: #b0b0b0;
}

.time-input:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.dropdown-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #666;
    font-size: 10px;
}

.separator {
    color: #666;
    font-size: 14px;
    font-weight: 300;
}

.time-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: white;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    min-width: 130px;
}

.time-dropdown.active {
    display: block;
}

.time-option {
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.time-option:hover {
    background: #f5f5f5;
}

.time-option.selected {
    background: #e6f7ff;
    color: #1890ff;
}

    .hidden {
        display: none !important;
    }

    .schedule { background: #fff; }


    .time-range select { min-width: 100px; }
    .time-group { gap: .5rem; }


/* Select wrapper to position the arrow */
.select-wrapper {
  position: relative;
  display: inline-block;
}

/* Style for the select dropdown */
.select-wrapper select {
  /* appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none; */
  padding-right: 30px; /* Make space for the arrow */
  font-size: 16px;
  width: 120px; /* Adjust width as needed */
}

/* Position the arrow icon for each dropdown */
.select-arrow {
  font-size: 16px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* Allow clicking through the arrow */
}

/* Adjust the position for the start-time arrows */
.start-time-arrow {
  right: 10px;
}

/* Adjust the position for the end-time arrows */
.end-time-arrow {
  right: 10px;
}

.day-row {
    height: 50px;
}


@media(min-width:1500px){
  .services { height: auto; overflow-y: unset; padding-right: unset; }
}


/* reset-password */
.reset-pass .card-header {border: 0;}
.reset-pass .card-body {padding-top: 0;}
.reset-pass .card {background-color: transparent;box-shadow: none;border: 0;}
/*placeholder */
.customer-registration #acc-form input::placeholder,
.professional-acc-form #acc-form input::placeholder,
#acc-form textarea::placeholder {
    color: #b3b3b3;
    font-size: 14px;
    font-weight: 400;
}
#phone {
  padding-left: 100px !important;
}
.iti--separate-dial-code .iti__selected-flag, .customer-registration .iti__selected-flag  {
    background-color: rgba(0, 0, 0, 0.05);
    border-right: 2px solid #E5E7EB !important;
    width: 83px;
    height: 30px;
    margin-top: 10px;
}

/* Normal state */


/* Error state — same style but slightly lower + red border */
.phone-call .iti--separate-dial-code:has(input.error) .iti__selected-flag {
    background-color: rgba(0, 0, 0, 0.05);
    border-right: 2px solid #E5E7EB !important;
    width: 83px;
    height: 40px;
    margin-top: 5px;
}

/* checked */
body .upload-gallery .upload-box {border: 2px dashed #ccc;border-radius: 10px;padding: 5rem 2rem;text-align: center;cursor: pointer;background-color: #f9f9f9;transition: background 0.3s ease;position: relative;}



.professional-acc-form #acc-form .form-select {appearance: none;-webkit-appearance: none;-moz-appearance: none;background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat: no-repeat;background-position: right 12px center;background-size: 16px;padding-right: 40px;}
.professional-acc-form #acc-form .form-select.time-select{width:85px; color: var(--black);}
.professional-acc-form #acc-form .form-select {background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");}
.service_category.active{position: relative;}
.service_category.active::after{content:'\f00c'; position: absolute;top: 8px;right:12px;width:16px;height: 16px; background: #020C87;border-radius: 4px; font-family: 'Font Awesome 6 Free'; color: #fff; font-weight: 900;font-size: 11px;text-align:center;align-content:center;}
.service_category.selected .radio-box{border: 2px solid #020C87}


/* modal button */
button.swal2-confirm.swal2-styled,
button.swal2-confirm.swal2-styled:hover,
button.swal2-confirm.swal2-styled:focus,
button.swal2-confirm.swal2-styled:active {
  background-color: #020C87 !important;
  box-shadow: none !important; 
}
.text-red{color: red;}



        /* WebsiteLoader */
#secLoader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; display: flex; justify-content: center; align-items: center; z-index: 100000; transition: opacity 0.3s ease-out; }
#secLoader .clean-loader {text-align: center;}
#secLoader .loader-logo { width: 300px; height: 100px; animation: logoFloat 2s ease-in-out infinite; position: relative; overflow: hidden; background: #ffffff; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
#secLoader .loader-logo img { width: 100%; height: 100%; object-fit: contain; z-index: 2; position: relative; filter: brightness(1.1) contrast(1.1); }
#secLoader .loader-logo::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%); animation: shimmerEffect 2.5s infinite; z-index: 3; border-radius: 12px; }
#secLoader .loading-dots { display: flex; justify-content: center; gap: 15px; }
#secLoader .dot { width: 12px; height: 12px; background:rgba(2, 13, 135, 0.85); border-radius: 50%; animation: dotPulse 1.5s infinite; }
#secLoader .dot:nth-child(1) {animation-delay: 0s; }
#secLoader .dot:nth-child(2) {animation-delay: 0.3s;}
#secLoader .dot:nth-child(3) { animation-delay: 0.6s;}

@keyframes logoFloat { 0%, 100% {transform: translateY(0px);}50% {transform: translateY(-10px);}}
@keyframes dotPulse { 0%, 100% {transform: scale(1);opacity: 0.4; }50% {transform: scale(1.2); opacity: 1;}}
@keyframes shimmerEffect { 0% {left: -100%; }100% {left: 100%; }}

/* Responsive Design */
 @media (max-width: 768px) {
#secLoader .loader-logo {width: 250px;height: 80px; padding: 15px; }
#secLoader .dot {width: 10px;height: 10px;}}

body.loader-active {overflow: hidden !important;height: 100vh !important;}
body.loader-active *::-webkit-scrollbar {display: none !important;}
body.loader-active * {scrollbar-width: none !important;-ms-overflow-style: none !important;}
.website-field {position:relative;}
.website-field span{position: absolute;top:2px;left:0px;height:50.6px;border: none;background: transparent;border-right:1px solid #dcdde8;color: #000;}
.professional-acc-form #acc-form .website-field input{padding-left: 105px;}
body:has(input[value="processing..." i]) .action-button-previous {pointer-events: none !important;opacity:.5;}
body:has(#step-5[style="position: relative; opacity: 1; display: block;"]) .action-button-previous {pointer-events: all !important;opacity: 1 !important;}
.availability-card label{margin: 5px 0px;font-weight: 600;}
.availability-card p{margin:0px;}
body:is(.swal2-height-auto) .height-full {min-height: 100vh;}

@media(max-width: 1440px){
.stepper-form-width {
    width: 75%;
    margin: auto;
    margin-top: 2rem;
}
.login-form{
       width: 75%;
    margin: auto;
    margin-top: 7rem;
}
}
@media(max-width:991px){
    .form-height{height: 100vh;}
}