/*
 * Copyright (c) 2024 torplus.co.il
 * All rights reserved.
 *
 * This stylesheet and any associated documentation are the property of torplus.co.il.
 * Unauthorized copying, distribution, or modification of this code, via any medium,
 * is strictly prohibited without prior written permission from torplus.co.il.
 *
 * For licensing inquiries, please contact: support@torplus.co.il
 */

 @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

 :root {
     --theme: #343434;
 }
 
 * {
     box-sizing: border-box;
 }
 
 body {
     margin: 0;
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
     direction: rtl;
 }
 
 input {
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
 }
 
 .app-container {
     width: 100%;
     height: auto;
     background-color: #fff;
     overflow-y: auto;
 }
 
 main {
     padding: 1rem;
     margin-top: 70px;
     overflow-y: auto;
     overflow-x: hidden;
 }
 
 header {
     display: flex;
     background: white;
     width: 100%;
     height: 70px;
     text-align: center;
     position: fixed;
     z-index: 100;
 }
 
 header .name img {
     width: 100px;
     opacity: 0.8;
     margin-bottom: 8px;
 }
 
 header .menu,
 header .notifications,
 footer .button {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 100%;
     font-size: 16px;
     color: #343434;
 }
 
 header .menu {
     width: 160px;
 }
 
 header .notifications {
     width: 160px;
     position: relative;
 }
 
 header div.name {
     font-size: 20px;
     font-weight: 700;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 footer {
     position: fixed;
     bottom: 14px;
     background: rgb(255 255 255 / 50%);
     width: calc(100% - 2rem);
     box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .1);
     display: flex;
     height: 70px;
     border-radius: 30px;
     margin: 0px 1rem;
     z-index: 100;
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     border: 1px #dfdfdf solid;
 }
 
 footer .button {
     width: 20%;
     font-size: 13px;
 }
 
 .customers .btn {
     width: 50px;
     height: 50px;
     border-radius: 100%;
     margin: 0 auto;
     background: #343434;
     color: white;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .customers {
     width: 20%;
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .customers .btn img {
     padding: 10px;
 }
 
 .container p {
     margin-top: 0;
     padding: 0 16px;
     font-size: 16px;
 }
 
 .form-group {
     position: relative;
     margin-bottom: 16px;
     text-align: right;
     gap: 8px;
 }
 
 .form-group input,
 .form-group textarea {
     width: 100%;
     padding: 12px 16px;
     box-sizing: border-box;
     border: 1.5px solid #dadada;
     font-size: 16px;
     transition: border-color 0.3s, box-shadow 0.3s;
     outline: none;
     background-color: #fff;
     /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
     text-align: right;
     color: #333;
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
     outline: none;
     border-radius: 10px;
 }
 
 .form-group input::placeholder,
 .form-group textarea::placeholder {
     color: #4a4a4a;
 }
 
 .form-group input:focus,
 .form-group textarea:focus {
     border-color: #343434;
 }
 
 
 .form-group label {
     position: absolute;
     top: 50%;
     right: 13px;
     transform: translateY(-50%);
     background: #fff;
     padding: 0 4px;
     color: #4a4a4a;
     font-size: 18px;
     transition: top 0.3s, font-size 0.3s, color 0.3s, right 0.3s;
     pointer-events: none;
     font-size: 16px;
 }
 
 .form-group input:focus+label,
 .form-group input:not(:placeholder-shown)+label,
 .form-group textarea:focus+label,
 .form-group textarea:not(:placeholder-shown)+label {
     top: 0px;
     right: 12px;
     font-size: 16px;
     color: #343434;
 }
 
 .form-group input:not(:focus):not(:placeholder-shown)+label,
 .form-group textarea:not(:focus):not(:placeholder-shown)+label {
     color: #4a4a4a;
 }
 
 .form-group input::placeholder,
 .form-group textarea::placeholder {
     color: #a2a2a2;
 }
 
 button.btn {
     display: inline-block;
     padding: 12px 24px;
     font-size: 19px;
     color: #fff;
     border: none;
     border-radius: 12px;
     cursor: pointer;
     transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
     text-align: center;
     text-decoration: none;
     width: 100%;
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
     font-weight: 600;
     position: relative;
     overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
     box-shadow: 0px 4px 8px rgb(0 0 0 / 10%);
 }
 
 button.btn-primary .text {
     display: flex;
     transition: transform 0.3s, opacity 0.3s;
 }
 
 button.btn-primary.loading .text {
     transform: translateX(-100%);
     opacity: 0;
 }
 
 button.btn-primary.loading:disabled {
     cursor: not-allowed;
 }
 
 button.btn-primary::after {
     content: "";
     display: inline-block;
     width: 18px;
     height: 18px;
     border: 3px solid #fff;
     border-top: 3px solid transparent;
     border-radius: 50%;
     animation: spin 0.6s linear infinite;
     position: absolute;
     right: -30px;
     transform: translateY(-50%);
     transition: right 0.3s;
 }
 
 button.btn-primary.loading::after {
     right: calc(50% - 9px);
 }
 
 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }
 
     100% {
         transform: rotate(360deg);
     }
 }
 
 button.btn-primary:hover {
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
     transform: translateY(-2px);
 }
 
 .buttons-sticky .btn-primary:hover {
     box-shadow: none;
     transform: none;
 }
 
 button.btn-primary:active {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     transform: translateY(0);
 }
 
 .box-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 16px;
 }
 
 .box {
     background-color: #fff;
     padding: 1px;
     width: calc(55% - 32px);
     border-radius: 20px;
     padding-top: 36px;
     position: relative;
     background: white !important;
     margin-bottom: 22px;
     border: 2px #dadada dashed;
 }
 
 .box h2 {
     color: #4285f4;
     margin-bottom: 16px;
     font-size: 20px;
     margin: 0;
 }
 
 .box p {
     line-height: 15px;
     padding-top: 12px;
     color: black;
     font-size: 15px;
     margin-bottom: 9px;
 }
 
 .auth.modal {
     background: white;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: 101;
     height: -webkit-fill-available;
     overflow-x: hidden;
     overflow-y: auto;
 }
 
 .container {
     width: 100%;
     text-align: center;
     padding: 20px;
     box-sizing: border-box;
     background: white;
 }
 
 .auth.modal .header {
     background: white;
     width: 100%;
     text-align: center;
     z-index: 99;
     position: relative;
     height: 70px;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .auth.modal .header img {
     right: 20px;
     width: 110px;
     opacity: 0.8;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
 }
 
 .auth.modal .welcome {
     font-weight: 700;
     font-size: 24px;
     margin-top: 10px;
     margin-bottom: 6px;
 }
 
 .create-new-account {
     font-weight: 600;
     font-size: 20px;
     margin-bottom: 4px;
 }
 
 div.why-choose-us {
     font-weight: 600;
     font-size: 22px;
     padding-top: 2rem;
     padding-bottom: 0;
 }
 
 .box-container .box img {
     padding: 8px;
     border-radius: 100%;
     position: absolute;
     top: -25px;
     left: 50%;
     transform: translateX(-50%);
     background: white !important;
     width: 56px;
 }
 
 .box-container .box.yellow img {
     border: 1px rgb(255 205 105 / 36%)solid;
     box-shadow: 0 0 0 4px rgb(255 205 105 / 36%);
 }
 
 .box-container .box.green img {
     border: 1px rgb(105 255 205 / 36%) solid;
     box-shadow: 0 0 0 4px rgb(105 255 205 / 36%);
     background: white;
 }
 
 .box-container .box.cyan img {
     box-shadow: 0 0 0 4px rgb(28 200 235 / 36%);
     border: 1px rgb(28 200 235 / 36%) solid;
 }
 
 .box-container .box.red img {
     box-shadow: 0 0 0 4px rgb(235 28 28 / 36%);
     border: 1px rgb(235 28 28 / 36%) solid;
     background: white;
 }
 
 .form-box {
     box-shadow: 0 4px 34px 0 #0000001a;
     border-radius: 20px;
     padding: 18px;
     margin-top: 1rem;
 }
 
 
 .notification {
     background-color: #ffffff9e;
     color: #000;
     padding: 16px;
     margin-bottom: 10px;
     border-radius: 8px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     display: flex;
     justify-content: space-between;
     align-items: center;
     animation: slideIn 0.3s forwards;
     position: fixed;
     right: 20px;
     z-index: 1000;
     width: 300px;
     top: 20px;
     overflow: hidden;
     font-size: 16px;
     line-height: 18px;
     z-index: 9999;
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
 }
 
 @keyframes slideIn {
     from {
         opacity: 0;
         transform: translateX(100%);
     }
 
     to {
         opacity: 1;
         transform: translateX(0);
     }
 }
 
 @keyframes slideOut {
     from {
         opacity: 1;
         transform: translateX(0);
     }
 
     to {
         opacity: 0;
         transform: translateX(100%);
     }
 }
 
 .notification .progress {
     position: absolute;
     bottom: 0;
     left: 0;
     height: 4px;
     width: 100%;
     animation: progressBar 5s linear forwards;
 }
 
 @keyframes progressBar {
     from {
         width: 100%;
     }
 
     to {
         width: 0;
     }
 }
 
 .notification.success .progress {
     background-color: #4caf50;
 }
 
 .notification.error .progress {
     background-color: #f44336;
 }
 
 .notification.info .progress {
     background-color: #2196f3;
 }
 
 .notification.warning .progress {
     background-color: #ff9800;
 }
 
 .close-btn {
     background: none;
     border: none;
     color: #000;
     font-size: 18px;
     cursor: pointer;
     top: 0;
 }
 
 .d-none {
     display: none !important;
 }
 
 .services-container {
     display: flex;
     gap: 20px;
     margin-bottom: 28px;
     align-items: center;
     justify-content: center;
 }
 
 .service-box {
     width: 50%;
     border-radius: 22px;
     background: #ffffff;
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
     text-align: center;
     padding: 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .service-box.active {
     background: white;
     color: white;
     /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1); */
     border: 1.5px #343434 solid;
 }
 
 .icon img {
     width: 50px;
     height: auto;
 }
 
 .services-container .btn {
     background: white;
     color: white;
     border: none;
     border-radius: 12px;
     padding: 5px 21px;
     margin-top: 10px;
     cursor: pointer;
     box-shadow: 0 0;
     font-size: 16px;
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
     border: 1px #343434 solid;
     color: #343434;
 }
 
 .service-box.active .title {
     color: #343434;
     font-weight: 700;
 }
 
 .service-box .title {
     margin-top: 4px;
     color: black;
     font-size: 18px;
     margin-bottom: 4px;
 }
 
 .services-container .service-box.active .btn {
     background: #343434;
     border: 0px;
     color: white;
 }
 
 label.custom {
     top: 0 !important;
     right: 12px;
     font-size: 16px;
     border-radius: 8px;
     padding: 0px 5px;
 }
 
 .text-right {
     text-align: right;
 }
 
 .form-group select {
     width: 100%;
     padding: 12px 16px;
     box-sizing: border-box;
     border: 1.5px solid #dadada;
     border-radius: 8px;
     font-size: 16px;
     transition: border-color 0.3s, box-shadow 0.3s;
     outline: none;
     background-color: #fff;
     /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
     text-align: right;
     color: #333;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     cursor: pointer;
     height: 46px;
 }
 
 .form-group select:focus,
 .form-group select:hover {
     border-color: #343434;
 }
 
 
 .form-group select:focus+label,
 .form-group select:not(:placeholder-shown)+label {
     color: #4a4a4a;
 }
 
 label.select-label {
     top: 0;
 }
 
 .buttons-sticky .btn-primray {
     border-radius: 0px !important;
 }
 
 .buttons-sticky .btn-primary {
     border-radius: 0px;
 }
 
 .w-100 {
     width: 100% !important;
 }
 
 .mb-0 {
     margin-bottom: 0;
 }
 
 .mr-10 {
     margin-right: 10px;
 }
 
 .input-alert {
     text-align: right;
     line-height: 15px;
     font-size: 14px;
     margin-top: 10px;
     margin-right: 6px;
     margin-bottom: 13px;
 }
 
 .buttons-sticky {
     position: fixed;
     bottom: 0;
     width: auto;
     background: black;
     width: 100%;
     right: 0;
     z-index: 999;
 }
 
 .serviceOption {
     font-weight: 700;
     font-size: 20px;
     margin-bottom: 1rem;
     text-align: center;
 }
 
 .service-added {
     text-align: right;
     padding: 8px 10px;
     border-right: 3px #343434 solid;
     border-radius: 9px;
     /* box-shadow: 18px 0 25px -5px rgba(0, 0, 0, .1), -10px 0 10px -6px rgba(0, 0, 0, .1); */
     display: flex;
     gap: 8px;
     align-items: center;
     font-weight: 600;
     position: relative;
     margin-bottom: 12px;
     justify-content: space-between;
 }
 
 .service-added div {
     border-radius: 8px;
     padding: 0px 8px;
     font-size: 14px;
     font-weight: 400;
     z-index: 9;
 }
 
 .service-added .trash {
     background: #f44242;
     border: 0px !important;
     color: white;
     height: 22px;
     font-size: 16px;
     display: flex;
 }
 
 img.question {
     float: left;
     width: 20px;
     position: relative;
     top: 4px;
 }
 
 .modal.question {
     background: #00000096;
     position: fixed;
     width: 100%;
     height: 100%;
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     z-index: 1000;
     display: block;
     box-sizing: border-box;
     padding: 0px 22px;
     overflow: hidden;
     top: 0;
 }
 
 .modal.question .form-box {
     line-height: 20px;
     padding-bottom: 4rem;
     position: absolute;
     overflow: auto;
     transform: translate(-50%, -50%);
     top: 50%;
     left: 50%;
     width: 88%;
     background: white;
 }
 
 .modal.question button.btn {
     position: absolute;
     left: 0;
     bottom: 0;
     width: 50%;
     border-radius: 0;
 }
 
 .modal.question .title {
     font-weight: 700;
     font-size: 22px;
     margin-bottom: 1rem;
 }
 
 .participants button {
     border-radius: 50%;
     border: 0px;
     position: absolute;
     width: 25px;
     height: 25px;
     transform: translateY(-50%);
     top: 50%;
     font-size: 14px;
     z-index: 9;
     color: black !important;
     padding: 0;
 }
 
 .participants button.min {
     left: 10px;
 }
 
 .participants button.max {
     right: 10px;
 }
 
 .participants input {
     text-align: center;
 }
 
 .d-flex {
     display: flex !important;
 }
 
 .login-btn {
     padding: 4px 13px;
     border: 1.5px #fff solid;
     border-radius: 9px;
     margin-right: 8px;
     margin-top: -2px;
     background: #343434;
     color: white;
     font-weight: 500;
     box-shadow: 0px 0px 0 2px #dadada;
 }
 
 .auth.modal .header .loginBox {
     position: absolute;
     left: 18px;
     font-size: 16px;
     display: flex;
 }
 
 .auth-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     position: relative;
     top: calc(50% - 35px);
     translate: 0 -50%;
 }
 
 .signin,
 .signup {
     background: white;
 }
 
 .code-inputs input {
     font-size: 20px;
     text-align: center;
     width: 100%;
     border: 0px;
     border-bottom: 1px #adadad solid;
     direction: ltr;
     background: #fafafa;
     padding: 12px 0;
 }
 
 .code-inputs {
     display: flex;
     justify-content: center;
     direction: ltr;
 }
 
 .sendCode-wrapper div {
     display: flex;
 }
 
 .sendCode-wrapper {
     justify-content: center;
     display: flex;
     margin-top: 14px;
 }
 
 .mr-5 {
     margin-right: 5px;
 }
 
 .spinner {
     border: 8px solid rgba(0, 0, 0, 0.1);
     /* Light grey */
     border-top: 8px solid #4285f4;
     /* Blue */
     border-radius: 50%;
     width: 20px;
     height: 20px;
     animation: spin 2s linear infinite;
 }
 
 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }
 
     100% {
         transform: rotate(360deg);
     }
 }
 
 .loading.auth-wrapper {
     position: absolute;
 }
 
 
 .workDay {
     display: flex;
     align-items: center;
     font-size: 16px;
     justify-content: space-between;
 }
 
 .modal .workDay {
     margin-bottom: 4px;
 }
 
 .workDay .day {
     text-align: right;
     font-weight: 600;
     font-size: 18px;
     padding: 0px 12px;
 }
 
 
 .switch input {
     opacity: 0;
     width: 0;
     height: 0;
 }
 
 .sliderCheckbox {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #ccc;
     transition: .4s;
     border-radius: 34px;
 }
 
 .sliderCheckbox:before {
     position: absolute;
     content: "";
     height: 24px;
     width: 24px;
     left: 4px;
     bottom: 4px;
     background-color: white;
     transition: .4s;
     border-radius: 50%;
 }
 
 input:checked+.sliderCheckbox {
     background-color: #343434;
 }
 
 input:checked+.sliderCheckbox:before {
     transform: translateX(26px);
 }
 
 .workDay .dropdown-arrow {
     width: 22px;
     height: 22px;
     background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"%3E%3Cpath fill="%23000" d="M6.293 8.293a1 1 0 0 1 1.414 0L10 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414z"%3E%3C/path%3E%3C/svg%3E');
     background-repeat: no-repeat;
     background-position: center;
     margin-left: 4px;
     transition: transform 0.3s ease;
 }
 
 .workDay .left {
     display: flex;
     align-items: center;
 }
 
 .workDay .dropdown-arrow.active {
     transform: rotate(180deg);
 }
 
 .workDay-wrapper {
     border-radius: 12px;
     border: 1px #ccc solid;
     padding: 8px;
     margin-bottom: 10px;
 }
 
 .workDay-wrapper .hours.d-none+.workDay {
     margin-bottom: 0 !important;
 }
 
 .hours {
     display: flex;
     flex-direction: column;
     align-items: center;
     font-size: 14px;
     width: 100%;
     padding-top: 8px;
     position: relative;
     border-bottom: 1px #ccc solid;
     padding-bottom: 12px;
 }
 
 .hours:last-child {
     border-bottom: 0;
 }
 
 input[type="time"] {
     margin: 0 5px;
     padding: 5px 10px;
     border: 1px solid #4a4a4a;
     border-radius: 8px;
     background-color: #ffffff;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     display: flex;
     align-items: center;
     font-size: 17px;
     justify-content: center;
     color: black;
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
     -webkit-appearance: none;
     -moz-appearance: none;
     text-align: center;
     width: 68px;
     height: 36px;
 }
 
 .switch {
     position: relative;
     height: 32px;
     display: flex;
     width: 58px;
 }
 
 .workDay-wrapper:last-child {
     margin-bottom: 0;
 }
 
 .hours .hour {
     padding-bottom: 5px;
     font-weight: 500;
     font-size: 18px;
     padding-top: 8px;
     font-weight: 600;
 }
 
 .time-selection {
     display: flex;
     align-items: center;
     margin-bottom: 10px;
 }
 
 input[type="time"]:focus {
     border-color: #aaa;
     outline: none;
 }
 
 .hours label {
     margin: 0 5px;
     font-size: 17px;
 }
 
 .buttons button {
     background: #343434;
     padding: 4px 16px;
     color: white;
     border-radius: 8px;
     border: 1px #343434 solid;
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
     font-size: 16px;
     width: 40%;
     margin: 0 5px;
     height: 34px;
 }
 
 .hours .buttons {
     width: 100%;
     margin-top: 13px;
     display: flex;
     justify-content: center;
 }
 
 button.cancel {
     background: white;
     border: 1px #18232a solid;
     color: #18232a;
 }
 
 .my-services {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 10px;
 }
 
 .my-services .service-item {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
 }
 
 
 .my-services .custom-checkbox {
     display: flex;
     align-items: center;
     margin-right: 10px;
     margin-bottom: 6px;
 }
 
 .my-services label {
     display: flex;
     align-items: center;
     white-space: nowrap;
     justify-content: flex-start;
 }
 
 .my-services input[type="checkbox"] {
     opacity: 0;
     position: absolute;
     cursor: pointer;
 }
 
 .my-services .checkmark {
     position: relative;
     height: 26px;
     width: 26px;
     background-color: #eee;
     border-radius: 50%;
     margin-right: 5px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-left: 6px;
 }
 
 .my-services label:hover input~.checkmark {
     background-color: #ccc;
 }
 
 .my-services input:checked~.checkmark {
     background-color: #343434 !important;
 }
 
 .my-services .checkmark:after {
     content: "\2713";
     display: none;
     color: white;
 }
 
 .my-services input:checked~.checkmark:after {
     display: block;
 }
 
 input[type="time"]::-webkit-calendar-picker-indicator {
     display: none;
 }
 
 .loadingReq {
     position: relative;
 }
 
 .loadingReq::after {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     width: 50px;
     height: 50px;
     background-image: url('../img/icon.svg') !important;
     border-radius: 50%;
     transform: translate(-50%, -50%);
     animation: spinReq 1s linear infinite;
     z-index: 14 !important
 }
 
 @keyframes spinReq {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }
 
     100% {
         transform: translate(-50%, -50%) rotate(360deg);
     }
 }
 
 .loadingReq::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #aeaeae4f;
     z-index: 13;
     border-radius: 20px;
     -webkit-touch-callout: none;
     -webkit-backdrop-filter: blur(4px);
     backdrop-filter: blur(4px);
     animation: blurIn .25s;
 }
 
 .hours .edit i,
 .hours .delete i {
     font-size: 22px;
     position: absolute;
     left: 35px;
     top: 16px;
 }
 
 .hours .delete i {
     left: 8px;
 }
 
 .my-services.non-edit {
     gap: 0;
 }
 
 .my-services.non-edit label {
     margin: 0;
 }
 
 .my-services.non-edit label:after {
     content: ', ';
     margin-left: 7px;
 }
 
 .my-services.non-edit label:last-child::after {
     content: '';
 }
 
 button.addNewTime {
     background: #343434;
     padding: 4px 16px;
     color: white;
     border-radius: 10px;
     border: 1px #18232a solid;
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
     font-size: 16px;
     margin-top: 10px;
     height: 38px;
 }
 
 button.btn-primary {
     background-color: #343434;
 }
 
 button.btn.btn-danger {
     background-color: #ff6464;
 }
 
 .modal.question .btn.btn-danger {
     left: auto;
     right: 0;
 }
 
 .hours.addNewTimeLine {
     padding-bottom: 0px;
     padding-top: 0px
 }
 
 .profile.design {
     height: 264px;
 }
 
 .profile .banner {
     width: 100%;
     height: 200px;
     background: #ffffff;
     border-radius: 14px;
     box-shadow: inset 0 4px 34px 0 #0000001a;
     position: relative;
 }
 
 .profile .banner img.add {
     width: 40px;
     position: absolute;
     left: 10px;
     top: 10px;
     background: hsl(0deg 0% 100% / 90.2%);
     border-radius: 8px;
     padding: 6px;
     z-index: 12;
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
 }
 
 .profile .banner::after {
     content: "";
     display: block;
     width: 75px;
     height: 75px;
     background-image: url('../img/image-gallery.svg');
     background-size: cover;
     background-position: center;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 3;
 }
 
 .profile>.photo {
     width: 110px;
     height: 110px;
     background: white;
     left: 50%;
     bottom: 12px;
     position: absolute;
     transform: translateX(-50%);
     border-radius: 100px;
     border: 3px solid #ffffff;
     box-shadow: inset 0 4px 34px 0 #0000001a;
     z-index: 13;
 }
 
 .profile.main .photo.loadingReq::before {
     width: 110px !important;
     height: 110px !important;
 }
 
 .profile>.photo:not(.loadingReq)::before {
     content: "\f234";
     font-family: "Font Awesome 5 Pro";
     font-weight: 400;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: #343434;
     font-size: 26px;
     z-index: 7;
 }
 
 .profile {
     position: relative;
 }
 
 
 .profile>.photo img {
     bottom: 50%;
     top: 50%;
     transform: translate(50%, -50%);
     width: 41px;
     position: absolute;
     right: 50%;
     z-index: 11;
     background: white;
 }
 
 
 .colors {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     margin-bottom: 1rem;
 }
 
 .colors div {
     width: 35px;
     height: 35px;
     border-radius: 50px;
     transition: background-color 0.3s;
 }
 
 .blue {
     background-color: rgb(137 194 217 / 30%);
 }
 
 .blue:hover,
 .blue.active {
     background-color: #89c2d9;
 }
 
 .pink {
     background-color: rgb(248 188 212 / 30%);
 }
 
 .pink:hover,
 .pink.active {
     background-color: #f8bcd4;
 }
 
 .black {
     background-color: rgb(176 176 176 / 30%);
 }
 
 .black:hover,
 .black.active {
     background-color: #131313;
 }
 
 .green {
     background-color: rgb(164 215 162 / 30%);
 }
 
 .green:hover,
 .green.active {
     background-color: #a4d7a2;
 }
 
 .red {
     background-color: rgb(229 151 151 / 30%);
 }
 
 .red:hover,
 .red.active {
     background-color: #ff6d6d;
 }
 
 .orange {
     background-color: rgb(255 210 165 / 30%);
 }
 
 .orange:hover,
 .orange.active {
     background-color: #ffd2a5;
 }
 
 .purple {
     background-color: rgb(197 163 255 / 30%);
 }
 
 .purple:hover,
 .purple.active {
     background-color: #c5a3ff;
 }
 
 .brown {
     background-color: rgb(208 166 165 / 30%);
 }
 
 .brown:hover,
 .brown.active {
     background-color: #ba706e;
 }
 
 .widget-wrapper {
     padding: 0px 6px;
     padding-top: 1.5rem;
 }
 
 button.btn.btn-upload {
     background: transparent;
     border: 1px #000000 solid;
     color: #000000;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 button.btn.btn-upload img {
     width: 24px;
     margin-left: 7px;
 }
 
 .maxletters {
     font-size: 15px;
     display: flex;
     justify-content: space-between;
 }
 
 .alert {
     text-align: right;
     flex: 1;
 }
 
 .maxl {
     text-align: left;
     flex: 1;
 }
 
 .mt-10 {
     margin-top: 10px;
 }
 
 .photos img {
     border-radius: 8px;
     object-fit: cover;
     width: 80px;
     height: 80px;
     margin: 0px 4px;
 }
 
 .photos .photo {
     position: relative;
 }
 
 .photos {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     gap: 4px;
     margin-bottom: 2rem;
 }
 
 .photos .photo .close {
     width: 22px;
     height: 22px;
     background: #ff2626;
     position: absolute;
     color: white;
     left: -3px;
     border-radius: 100px;
     top: -6px;
     border: 2px #fff solid;
     font-size: 16px;
     z-index: 98;
     text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .widget-wrapper:last-child {
     padding-bottom: 0;
 }
 
 .photo.loadingReq::before {
     border-radius: 100px;
 }
 
 
 .photo.loadingReq.gallery::before {
     border-radius: 8px !important;
     width: 80px;
     height: 80px;
     left: 4px;
 }
 
 .photo.loadingReq.gallery::after {
     width: 20px;
     height: 20px;
 }
 
 .link {
     background: white;
     color: #000000;
     padding: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     border-bottom: 2px #343434 solid;
 }
 
 .copy {
     position: absolute;
     left: 16px;
     font-size: 20px;
 }
 
 .step5 p {
     font-size: 16px;
 }
 
 .social-buttons {
     display: flex;
     justify-content: space-around;
     align-items: center;
     width: 100%;
     gap: 8px;
 }
 
 .social-buttons .button {
     background: white;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 120px;
     height: 40px;
     border-radius: 12px;
     cursor: pointer;
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
     border: 2px solid;
     width: 100%;
     border-color: black;
     color: black;
     font-size: 16px;
     font-weight: 600;
 }
 
 .social-buttons .facebook {
     color: #1876d2;
     border-color: #1876d2;
 }
 
 .social-buttons .instagram {
     border-color: #c42a6b;
     color: #c42a6b;
 }
 
 .social-buttons .whatsapp {
     border-color: #4caf50;
     color: #4caf50;
 }
 
 .social-buttons .icon {
     width: 20px;
     height: 20px;
     margin-left: 6px;
 }
 
 main .statics .static {
     text-align: center;
     background: white;
     border-radius: 10px;
     width: 100%;
     padding: 8px 8px;
     box-shadow: 0 4px 20px 0 rgb(0 0 0 / 0%);
     font-size: 15px;
     position: relative;
     height: 70px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }
 
 main .statics {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 10px;
     flex-direction: wrap;
 }
 
 main .statics .static div {
     font-weight: 700;
     font-size: 18px;
     color: #343434;
 }
 
 main .quickNavigation,
 main .myQueues {
     background: white;
 
     margin-top: 1rem;
     padding: 8px 0px;
     border-radius: 12px;
     padding-bottom: 0;
 }
 
 main .title {
     font-weight: 700;
     font-size: 20px;
     margin-bottom: 6px;
 }
 
 main .widgets,
 .openModal .widgets,
 .cm-modal .widgets {
     display: flex;
     text-align: center;
     white-space: nowrap;
     padding-bottom: 10px;
     flex-wrap: wrap;
     gap: 14px;
     align-items: center;
     justify-content: center;
 }
 
 main .widgets .widget img {
     width: 24px;
     margin-bottom: 2px;
 }
 
 main .widgets .widget,
 .openModal .widgets .widget,
 .cm-modal .widget {
     border-radius: 20px;
     padding: 8px;
     font-size: 18px;
     height: 110px;
     width: 47%;
     background: #ffffff;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     font-weight: 600;
     position: relative;
     overflow: hidden;
     color: #343434 !important;
 }
 
 .queues {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     flex-direction: row;
     padding-bottom: 15px;
 }
 
 .queues .queue {
     display: flex;
     padding: 8px 12px;
     background: transparent;
     align-items: center;
     position: relative;
     border-radius: 11px;
 }
 
 .queues .queue .hour {
     margin-left: 14px;
 }
 
 .queues .queue .service {
     font-weight: 500;
     font-size: 16px;
 }
 
 
 .queues .queue img {
     width: 24px;
     position: absolute;
     left: 16px;
     transition: transform 0.3s ease;
 }
 
 .queues .details {
     padding-left: 37px;
     font-size: 14px;
 }
 
 .queues .queue span {
     border: 1px #79bc77 solid;
     border-radius: 8px;
     padding: 0px 8px;
     left: 48px;
     position: absolute;
     background: #f3fff2;
     color: #578a55;
 }
 
 main .queues .options .option img {
     padding-left: 10px;
     width: 22px;
     margin-left: 10px;
     border-left: 1px #eaeaea solid;
 }
 
 .queues .options .option {
     display: flex;
     align-items: center;
     padding: 2px 6px;
     font-size: 15px;
     background: white;
     border-radius: 10px;
     margin-top: 6px;
 }
 
 .queues .options {
     background: transparent;
     margin: 0 10px;
     border-radius: 8px;
     padding: 10px 0px;
     padding-right: 0;
     padding-top: 0;
 }
 
 main .queues .options .option:last-child {
     border-bottom: 0px;
 }
 
 .queues .queue img.active {
     transform: rotate(180deg);
 }
 
 main .queues .queue .hour div {
     line-height: 16px;
     font-size: 14px;
 }
 
 main .queues .options .option.red img {
     border-left: 1px #ff3737 solid;
 }
 
 .queues .queueData {
     width: 100%;
     border-radius: 4px;
     border-right: 2px #4285f4 solid;
     margin-top: 8px;
     border-right: 5px solid #2196F3;
     background: #2196F322;
     margin-right: 8px;
 }
 
 .queueData .options .option i {
     padding: 6px;
     border-radius: 5px;
     margin-left: 8px;
     font-size: 18px;
 }
 
 main .queues .queueData .messages .client,
 main .queues .queueData .messages .admin {
     display: flex;
     align-items: center;
     margin-top: 6px;
 }
 
 .queues .notify {
     font-size: 14px;
     padding-right: 2px;
     width: 12%;
     line-height: 15px;
     margin-left: 8px;
     padding-left: 2px;
 }
 
 main .queues .queueData .messages .client:first-child {
     margin-top: 0px;
 }
 
 .queues .admin .notify {
     border-left: 2px #7bfbf2d6 solid;
 }
 
 .queues .queueData .messages .message {
     border-radius: 8px;
     padding: 2px 8px;
     font-size: 14px;
     margin-left: 10px;
 }
 
 .queues .queueData .messages .admin .message {
     background: #9bfffe82;
 }
 
 .queues .queueData .messages .client .message {
     background: #fff42b73;
 }
 
 .queues .client .notify {
     border-left: 2px #fff62b solid;
 }
 
 .queues .queueData .messages {
     margin-bottom: 8px;
     text-align: center;
 }
 
 .queues .queueData .messages:empty {
     margin-bottom: 0;
 }
 
 .no-queues {
     width: 100%;
     text-align: center;
     font-size: 18px;
     background: #dadada5c;
     padding: 12px;
     margin: 0 14px;
     border-radius: 8px;
     font-weight: 500;
     font-weight: 600;
     color: #363636;
 }
 
 main.loadingReq::before {
     border-radius: 0px;
 }
 
 main .setting b {
     font-size: 19px;
     display: flex;
     align-items: center;
     background: white;
     border-radius: 12px;
 }
 
 main .setting p {
     font-size: 14px;
     margin: 0px 4px;
     margin-top: 4px;
     margin-bottom: 12px;
 }
 
 main .queuesSettings .setting .form-group {
     margin-top: 16px;
     margin: 0px 4px;
 }
 
 main .queuesSettings .setting {
     margin-top: 2rem;
 }
 
 main .queuesSettings .setting:first-child {
     margin-top: 0;
 }
 
 .setting .setting-active {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     flex-wrap: wrap;
     margin-top: 11px;
 }
 
 .setting .setting-active div {
     border-radius: 13px;
     background: white;
     padding: 8px;
     /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
     border: 1px #cecece solid;
     min-width: 94px;
     text-align: center;
     font-size: 16px;
     color: #5e5e5e;
 }
 
 .setting .setting-active div.active {
     border: 1.5px #343434 solid;
     color: #343434;
     font-weight: 600;
 }
 
 .queuesSettings .setting .form-box.notify .workDay-wrapper {
     border-radius: 12px;
 }
 
 .queuesSettings .setting .form-box.notify .workDay-wrapper .workDay .day {
     font-weight: 500;
 }
 
 .queuesSettings {
     padding-bottom: 5rem;
     padding-top: 3rem;
 }
 
 span.red.span {
     padding: 0px 8px;
     border-radius: 8px;
     background: #ff7b7b;
     color: white;
     font-size: 16px;
     margin-right: 8px;
 }
 
 .block-customers .workDay-wrapper {
     border-radius: 12px;
     border: 2px #ff8585 dashed;
     padding: 12px 8px;
 }
 
 .page-header {
     right: 0;
     width: 100%;
     height: 50px;
     box-shadow: 0 -10px 34px 0 #0000001a;
     display: flex;
     justify-content: center;
     align-items: center;
     font-weight: 700;
     font-size: 20px;
     margin-bottom: 1rem;
     position: fixed;
     top: 70px;
     border-radius: 0px 0px 24px 24px;
     background: rgb(0 0 0 / 75%);
     color: white;
     z-index: 98;
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
 }
 
 .page-header img {
     width: 32px;
     position: absolute;
     right: 14px;
     background: white;
     border-radius: 24px;
     /* border: 3px #95959552 solid; */
 }
 
 .workDay-wrapper.loadingReq::before {
     border-radius: 6px;
 }
 
 main .service-added {
     padding: 16px 10px;
     border-right: 0;
     border-radius: 18px;
     overflow: hidden;
     background: #d8d8d82e;
     border: 4px #fff solid;
     box-shadow: 0px 0px 0 3px #5757571a;
     margin-bottom: 16px;
 }
 
 main .service-added .name div {
     padding: 0;
     line-height: 20px;
 }
 
 main .service-added .name div:first-child {
     font-size: 18px;
     font-weight: 700;
 }
 
 .service-added .name div:last-child {
     font-size: 15px;
     margin-right: 4px;
 }
 
 main .service-added div {
     font-size: 16px;
 }
 
 main .service-added i {
     font-size: 22px;
     color: #343434;
 }
 
 .services-statics {
     display: flex;
     align-items: center;
     justify-content: end;
     margin-bottom: 1rem;
 }
 
 .services-statics button {
     width: 144px;
     padding: 6px;
     border-radius: 20px;
     font-size: 16px;
     height: 40px;
 }
 
 .services-statics div {
     font-size: 18px;
     font-weight: 700;
 }
 
 main .service-added .icons {
     display: flex;
     gap: 10px;
 }
 
 .queuesSettings.profile p {
     margin-top: 0;
 }
 
 .service-added.worker .name img {
     width: 48px;
     height: 48px;
     margin-left: 14px;
     border-radius: 48px;
     border: 2px #ededed solid;
     object-fit: cover;
 }
 
 .service-added.worker .name {
     font-size: 18px;
     font-weight: 600;
     color: #343434;
     align-items: center;
     display: flex;
 }
 
 main .service-added.worker img {
     width: 22px;
 }
 
 .service-added.worker .name div:last-child {
     font-size: 18px;
     font-weight: 600;
 }
 
 .notes {
     display: flex;
     flex-wrap: wrap;
     gap: 12px 0;
     padding-bottom: 1rem;
 }
 
 .notes>.note {
     width: 100%;
     background: #ffffff;
     /* border-radius: 17px; */
     padding: 8px 14px;
     min-height: 60px;
     position: relative;
     border-radius: 16px;
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
 }
 
 .notes>.note.error {
     border-right: 4px #eb6565 solid;
 }
 
 .notes>.note>.title {
     font-weight: 700;
     font-size: 17px;
     margin-bottom: 6px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     color: black;
 }
 
 .notes>.note>.message {
     line-height: 22px;
     font-size: 14px;
 }
 
 .notes>.note>.title>.date {
     font-size: 14.5px;
     font-weight: 400;
     color: #343434 !important;
 }
 
 .notes>.note.success {
     border-right: 4px #6daf6a solid;
 }
 
 .notes>.note.error>.title {
     color: #eb6565;
 }
 
 .notes>.note.success>.title {
     color: #6daf6a;
 }
 
 .notes>.note.info>.title {
     color: #6d93fe;
 }
 
 .notes>.note.info {
     border-right: 4px #6d93ff solid;
 }
 
 .notifications>span {
     background: #ff3737;
     border-radius: 100%;
     position: absolute;
     right: 24px;
     color: white;
     font-size: 12px;
     width: 18px;
     height: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     top: 6px;
 }
 
 .spinnerDiv {
     display: flex;
     justify-content: center;
 }
 
 footer .button>img {
     margin-bottom: 4px;
 }
 
 .queueData>.options>.option.loadingReq::before {
     border-radius: 0;
 }
 
 .queueData>.options>.option.loadingReq::after {
     width: 15px;
     height: 15px
 }
 
 .profileName {
     text-align: center;
     margin-top: 14px;
     font-size: 22px;
     min-width: auto;
 }
 
 .profileName>.name {
     margin-bottom: 5px;
     font-weight: 500;
     display: flex;
     justify-content: center;
     align-items: center;
     color: #343434;
     height: 38px;
     width: auto;
     padding: 0px 12px;
     box-shadow: 0px 0px 0 2px #3434341a;
     border-radius: 8px;
     font-size: 20px;
     border: 1px #d3d3d3 solid;
 }
 
 .profile>.edit {
     font-size: 18px;
     margin-top: 8px;
     color: #343434;
     text-align: center;
 }
 
 .d-center {
     justify-content: center;
 }
 
 .profileName>.name>i {
     margin-left: 8px;
     font-size: 22px;
 }
 
 main .fast-actions {
     margin-top: 2rem;
 }
 
 .fast-actions .action {
     padding: 12px 8px;
     font-weight: 500;
     font-size: 18px;
     display: flex;
     justify-content: space-between;
     color: #343434;
     border-bottom: 1px #dfdfdf solid;
     align-items: center;
 }
 
 .profile.main {
     display: flex;
     justify-content: center;
     gap: 20px;
 }
 
 .profile.main>.photo,
 .profile.main>.photo>img {
     position: static;
     transform: none;
     border-radius: 100%;
     display: grid;
     justify-content: center;
     align-items: center;
 }
 
 .profile.main .photo.loadingReq::before {
     width: 100px;
     height: 100px;
     left: 50%;
     transform: translateX(-50%);
 }
 
 main .widgets .widget i,
 .openModal .widgets .widget i {
     font-size: 38px;
     border-radius: 8px;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 10px;
     z-index: 9;
 }
 
 .widget::before,
 div.icon::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url(../img/gradients/widget1.webp);
     background-size: cover;
     background-position: center;
     opacity: 0.8;
     filter: blur(28px);
     -webkit-filter: blur(28px);
     -moz-filter: blur(28px);
     -ms-filter: blur(28px);
 }
 
 main .widgets .widget div,
 .openModal .widgets .widget div {
     z-index: 1;
 }
 
 main .widgets .widget.pink::before {
     background-image: url(../img/gradients/widget2.jpg);
 }
 
 .widget.purple::before {
     background-image: url(../img/gradients/widget3.png);
 }
 
 .widget.more::before {
     background-image: url(../img/gradients/widget4.webp);
 }
 
 
 .statics .static i {
     font-size: 20px;
     position: absolute;
 }
 
 div.icon::before {
     filter: blur(5px);
     opacity: 0.4;
     background-image: url(../img/gradients/statics.webp);
 }
 
 div.icon {
     overflow: hidden;
     border-radius: 16px;
     width: 38px;
     position: relative;
     height: 38px;
     display: flex;
     justify-content: center;
     align-items: center;
     color: #343434 !important;
 }
 
 .statics .static>.p-ab {
     position: absolute;
     right: 0;
     top: -8px;
 }
 
 .setting .icon {
     margin-left: 10px;
 }
 
 .icon>i {
     z-index: 9;
 }
 
 header i {
     font-size: 26px;
 }
 
 .social-buttons .button>i {
     font-size: 20px;
     margin-left: 4px;
 }
 
 footer i {
     font-size: 24px;
     margin-bottom: 4px;
 }
 
 .form-group>i {
     position: absolute;
     right: 12px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 22px;
 }
 
 .form-group label.icon {
     margin-right: 25px;
 }
 
 .form-group input.icon {
     padding-right: 42px;
 }
 
 .form-group textarea {
     border: 2px #dadada solid;
     border-radius: 8px;
 }
 
 .blur-button::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url(../img/gradients/widget1.webp);
     background-position: center;
     background-size: cover;
     filter: blur(4px);
     opacity: 0.7;
 }
 
 .blur-button span {
     position: relative;
     z-index: 1;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 button.btn.blur-button {
     color: #343434;
     box-shadow: 0 0;
 }
 
 button i {
     margin-left: 8px;
     font-size: 24px;
 }
 
 .openModal .widgets .widget::before {
     background-image: url(../img/gradients/settings.jpg) !important;
 }
 
 .openModal {
     padding: 1rem;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     overflow-y: auto;
     overflow-x: hidden;
     background: rgba(133, 133, 133, 0.49);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     z-index: 99;
     -webkit-overflow-scrolling: touch;
     padding-top: 90px;
     padding-bottom: 90px;
 }
 
 body.modal-open {
     overflow: hidden;
     height: 100vh;
 }
 
 
 .openModal .widgets .widget>i {
     border-radius: 50px;
     width: 40px;
     height: 40px;
     background: #343434d1;
     font-size: 20px;
     margin-bottom: 8px;
     border: 2px #ffffff solid;
     box-shadow: 0px 0px 0px 3px #343434;
     color: white;
 }
 
 .openModal .widget {
     font-size: 17px !important;
 }
 
 .service-box .icon {
     width: 50px;
     height: 50px;
     font-size: 22px;
 }
 
 .loginBox .text {
     display: flex;
     align-items: center;
 }
 
 
 .tab-container {
     position: relative;
     display: flex;
     background-color: #eeeeee;
     max-width: 400px;
     border-radius: 10px;
     padding: 4px;
 }
 
 .tab {
     flex: 1;
     text-align: center;
     padding: 6px 8px;
     cursor: pointer;
     background-color: transparent;
     border: none;
     outline: none;
     transition: background-color 0.3s;
     font-size: 15px;
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
     position: relative;
     z-index: 1;
     box-sizing: border-box;
     align-items: center;
     justify-content: center;
     display: flex;
     color: #343434;
 }
 
 
 .tab-highlight {
     position: absolute;
     top: 4px;
     width: 50%;
     height: calc(100% - 8px);
     background-color: white;
     transition: left 0.3s ease-out;
     border-radius: 6px;
 }
 
 .tab-container .tab i {
     font-size: 15px;
 }
 
 .total-sms {
     display: flex;
     justify-content: space-between;
     font-size: 18px;
     font-weight: 500;
     margin-bottom: 8px;
 }
 
 .total-sms div {
     font-weight: 400;
 }
 
 .campigan-title {
     font-size: 19px;
     margin-top: 22px;
     margin-bottom: 10px;
     font-weight: 500;
 }
 
 .campigans>.campigan>.name {
     font-size: 18px;
     font-weight: 600;
     padding-right: 32px;
 }
 
 .campigans>.campigan {
     background: #eee;
     border-radius: 10px;
     padding: 10px 20px;
     display: flex;
     justify-content: space-between;
     position: relative;
     margin-bottom: 1rem;
     background: #d8d8d82e;
     border: 2px #fff solid;
     box-shadow: 0px 0px 0 1px #5757571a;
     text-align: center;
 }
 
 .campigans>.campigan:last-child {
     margin-bottom: 0;
 }
 
 .campigans>.campigan>.name>.clients {
     font-size: 16px;
     margin-right: 4px;
     font-weight: 400;
     text-align: right;
 }
 
 .campigans .campigan>.cost {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     font-size: 17px;
 }
 
 .campigans .campigan i {
     position: absolute;
     font-size: 22px;
     bottom: 50%;
     transform: translateY(50%);
     right: 16px;
 }
 
 .total-sms-costs {
     display: flex;
     justify-content: space-between;
     margin-bottom: 5px;
     padding: 0px 10px;
 }
 
 .sms-sending-numbers {
     padding-right: 12px;
     background: #eeeeee;
     border-radius: 8px;
     padding: 10px 20px;
     margin-bottom: 16px;
 }
 
 .addNewWorker p {
     margin: 0;
 }
 
 .fast-actions .action>div:first-child i {
     border-radius: 8px;
     margin-left: 12px;
     width: 30px;
     height: 30px;
     text-align: center;
     display: inline-flex;
     justify-content: center;
     align-items: center;
 }
 
 .fast-actions .action:last-child {
     border-bottom: 0;
 }
 
 .calendar {
     margin: -1rem;
 }
 
 .modal .updates .to {
     background: rgba(253, 170, 109, 0.133);
     padding: 4px;
     border-radius: 6px;
     font-weight: 500;
 }
 
 .modal .updates {
     display: flex;
     justify-content: center;
     margin-top: 1rem;
     font-size: 18px;
     flex-direction: column;
     align-items: center;
     gap: 2px;
 }
 
 .modal .updates .update {
     display: flex;
     width: 80%;
     justify-content: space-evenly;
     align-items: center;
 }
 
 .openModal.new-appointment {
     background: white;
 }
 
 .openModal h3 {
     margin: 0;
 }
 
 .openModal .form-group>i {
     font-size: 22px !important;
 }
 
 .openModal .dates {
     display: flex;
     gap: 8px;
 }
 
 .calendarModal .close-button i {
     font-size: 22px;
     position: absolute;
     right: 10px;
     top: 10px;
 }
 
 .calendarModal {
     position: absolute;
     z-index: 999999;
     background: white;
     height: auto;
     border-radius: 24px;
     box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .1);
     border: 1px #dfdfdf solid;
     padding: 0.5rem;
     right: 1rem;
     left: 1rem;
 }
 
 .openModal.new-appointment input.disabled {
     border-color: #ffafaf;
     box-shadow: 0 0 0px 2px rgba(255, 77, 77, 0.3);
 }
 
 .new-appointment .queuesSettings {
     padding-bottom: 1rem;
 }
 
 .service-added.worker {
     padding: 8px;
 }
 
 .name .letter {
     width: 48px;
     height: 48px;
     background: #f0f0f0;
     border-radius: 48px;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-left: 14px;
     font-size: 24px;
     border: 2px #ededed solid;
 }
 
 .fast-actions .action.delete {
     font-weight: 400;
     font-size: 16px;
     text-decoration: underline;
     display: flex;
     justify-content: end;
 }
 
 /* Customers panel design */
 .customer-card {
     background: #ffffff;
     border-radius: 16px;
     padding: 12px 16px;
     border: 1px solid #f0f0f0;
     transition: all 0.2s ease;
     margin-bottom: 10px;
 }
 
 .customer-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
 .customer-name-wrapper {
     display: flex;
     align-items: center;
     gap: 12px;
 }
 
 .customer-avatar {
     width: 50px;
     height: 50px;
     background: #f5f5f5;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #666;
     font-weight: 500;
     font-size: 18px;
 }
 
 .customer-name {
     font-weight: 600;
     font-size: 18px;
     color: #1a1a1a;
 }
 
 .customer-status {
     font-size: 13px;
     padding: 6px 12px;
     border-radius: 8px;
     font-weight: 500;
 }
 
 
 .customer-data .phone {
     font-size: 16px;
 }
 
 .search-box {
     background: #f5f5f5;
     border-radius: 12px;
     padding: 4px;
     transition: all 0.2s ease;
     margin-bottom: 0.6rem;
 }
 
 .search-input {
     width: 100%;
     padding: 10px 14px;
     border: none;
     border-radius: 8px;
     font-size: 15px;
     background: transparent;
     color: #333;
     transition: border 0.3s ease;
     border: 2px solid transparent;
 }
 
 .search-input:focus,
 .search-input:hover {
     border: 2px solid #FFF;
     outline: none;
 }
 
 .my-customers {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 18px;
     margin-top: 1rem;
     color: #343434;
 }
 
 .add-customer-btn {
     background: #f5f5f5;
     border: none;
     padding: 12px 20px;
     border-radius: 12px;
     font-size: 16px;
     display: flex;
     align-items: center;
     transition: all 0.2s ease;
     cursor: pointer;
     max-width: fit-content;
     font-weight: 600;
     color: #343434;
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
     align-items: center;
     justify-content: center;
     border: 2px #fff solid;
     box-shadow: 0px 0px 0px 2px #f5f5f58a;
 }
 
 .clients-content {
     height: calc((var(--vh, 1vh) * 100) - 380px - 0.6rem);
     overflow-y: auto;
 }
 
 /* Open client status */
 .cm-modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.3);
     backdrop-filter: blur(8px);
     display: flex;
     align-items: center;
     justify-content: center;
     /* מרכוז אופקי */
     z-index: 1000;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
     padding: 1rem;
     overflow-y: auto;
 }
 
 .cm-modal-overlay.cm-show {
     opacity: 1;
     pointer-events: auto;
 }
 
 
 .cm-modal {
     background: white;
     width: 100%;
     /* מחשב את הרוחב עם המרווחים */
     max-width: 480px;
     border-radius: 16px;
     padding: 1.5rem;
     position: relative;
     transform: translateY(20px);
     opacity: 0;
     transition: all 0.3s ease;
     margin: auto;
     /* מרכוז אוטומטי */
 }
 
 
 .cm-modal-overlay.cm-show .cm-modal {
     transform: translateY(0);
     opacity: 1;
 }
 
 .cm-header {
     margin-bottom: 1.5rem;
 }
 
 .cm-title {
     font-size: 1.5rem;
     font-weight: 600;
     color: #2d2d2d;
     margin: 0;
 }
 
 .cm-info-box {
     background: #f8f8f8;
     border-radius: 12px;
     padding: 10px;
     margin-bottom: 1rem;
     border: 3px #fff solid;
     box-shadow: 0px 0px 0 1px #5757571a;
 }
 
 .cm-info-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.25rem;
 }
 
 .cm-field {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
 
 .cm-field-content {
     flex: 1;
 }
 
 .cm-label {
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 0.25rem;
 }
 
 .cm-value {
     font-size: 16px;
     color: #2d2d2d;
     font-weight: 400;
     margin-right: 4px;
 }
 
 .cm-name-wrapper {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     width: 100%;
 }
 
 .cm-edit-icon {
     color: #666;
     cursor: pointer;
     font-size: 0.9rem;
     opacity: 0.7;
     transition: opacity 0.2s;
     padding: 4px;
 }
 
 .cm-edit-icon:hover {
     opacity: 1;
 }
 
 .cm-name-input {
     font-size: 16px;
     padding: 0;
     border: 0;
     width: 80%;
     padding-right: 4px;
     background: #f8f8f8;
 }
 
 .cm-name-input:focus {
     outline: none;
     border-color: #2d2d2d;
 }
 
 .cm-status-wrapper {
     position: relative;
     margin-right: auto;
     display: inline-block;
 }
 
 .cm-status {
     display: inline-flex;
     align-items: center;
     padding: 0.4rem 0.75rem;
     border-radius: 6px;
     font-size: 0.85rem;
     font-weight: 500;
     cursor: pointer;
     user-select: none;
 }
 
 .cm-status.active,
 .customer-status.active {
     background: #e8f5e9;
     color: #1b5e20;
 }
 
 .cm-status.pending,
 .customer-status {
     background: #fff7ed;
     color: #9a3412;
 }
 
 .cm-status.blocked,
 .customer-status.blocked {
     background: #fef2f2;
     color: #dc2626;
 }
 
 .cm-status-menu-overlay {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 501;
 }
 
 .cm-status-menu {
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
     margin-top: 5px;
     background: white;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     min-width: 150px;
     border: 1px solid #e5e5e5;
     z-index: 502;
 }
 
 .cm-status-option {
     padding: 0.75rem 1rem;
     cursor: pointer;
     transition: background 0.2s;
     text-align: center;
     white-space: nowrap;
 }
 
 .cm-status-option:hover {
     background: #f5f5f5;
 }
 
 .cm-stats {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1rem;
     margin-bottom: 1rem;
 }
 
 .cm-stat {
     background: #d8d8d82e;
     border-radius: 12px;
     padding: 0.8rem;
     text-align: center;
     border: 3px #fff solid;
     box-shadow: 0px 0px 0 1px #5757571a;
 }
 
 .cm-stat-value {
     font-size: 1.5rem;
     font-weight: 600;
     color: #2d2d2d;
     margin-bottom: 0.25rem;
     z-index: 1;
 }
 
 .cm-stat-label {
     font-size: 16px;
     color: #2d2d2d;
     z-index: 1;
 }
 
 .cm-actions {
     display: flex;
     gap: 8px;
     margin-bottom: 0;
     margin-top: 1rem;
 }
 
 .cm-action-button {
     flex: 1;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     padding: 0.75rem;
     border-radius: 8px;
     font-size: 0.9rem;
     font-weight: 500;
     cursor: pointer;
     border: none;
     background: #f0f0f0;
     color: #2d2d2d;
     text-decoration: none;
     transition: all 0.2s;
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
 }
 
 .cm-action-button:hover {
     background: #e5e5e5;
 }
 
 .cm-appointments {
     background: #f8f8f8;
     border-radius: 12px;
     padding: 10px;
     border: 3px #fff solid;
     box-shadow: 0px 0px 0 1px #5757571a;
 }
 
 .cm-appointment {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 8px;
     padding-right: 2px;
     border-bottom: 1px solid #f9f9f9;
 }
 
 .cm-appointment:first-child {
     padding-top: 0;
 }
 
 .cm-appointment:last-child {
     padding-bottom: 0;
     border-bottom: none;
 }
 
 .cm-appointment-status {
     padding: 0.3rem 0.6rem;
     border-radius: 6px;
     font-size: 0.85rem;
     font-weight: 500;
 }
 
 .cm-appointment-status.arrived {
     background: #e8f5e9;
     color: #1b5e20;
 }
 
 .cm-appointment-status.not-arrived {
     background: #ffebee;
     color: #c62828;
 }
 
 .cm-delete-button {
     width: 100%;
     padding: 12px 24px;
     margin-top: 8px;
     border: none;
     border-radius: 8px;
     background: #fef2f2;
     color: #dd6767;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     /* gap: 0.5rem; */
     transition: all 0.2s;
     font-weight: 700;
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
     font-size: 16px;
 }
 
 .cm-delete-button:hover {
     background: #fee2e2;
     transform: translateY(-1px);
 }
 
 .cm-info-grid {
     grid-template-columns: 1fr;
     gap: 1rem;
 }
 
 .cm-close {
     position: absolute;
     top: 24px;
     left: 1.25rem;
     width: 32px;
     height: 32px;
     border-radius: 32px;
     border: none;
     color: #333333;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 34px;
     background: transparent;
 }
 
 .cm-close:hover {
     background: #eeeeee;
     transform: rotate(90deg);
 }
 
 @media screen and (max-width: 375px) {
     .cm-modal-overlay {
         padding: 0;
     }
 
     .cm-modal {
         border-radius: 0px;
     }
 }
 
 .cm-actions button.btn.btn-primary {
     font-size: 16px;
     font-weight: 600;
     box-shadow: 0 0;
     border-radius: 8px;
 }
 
 .cm-actions button.btn.btn-primary i {
     font-size: 18px;
 }
 
 .cm-delete-button i {
     font-size: 18px;
 }
 
 .noNotifications {
     text-align: center;
     font-size: 28px;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .workers-scroll-wrapper {
     width: 100%;
     overflow-x: auto;
     scrollbar-width: none;
     display: flex;
     justify-content: center;
 }
 
 .workers-buttons-container {
     display: flex;
     gap: 0.5rem;
     padding: 0.5rem;
     white-space: nowrap;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
     width: 100%;
     flex-wrap: nowrap;
 }
 
 .workers-scroll-wrapper::-webkit-scrollbar,
 .workers-buttons-container::-webkit-scrollbar {
     display: none;
 }
 
 .workers-buttons-container button {
     flex: 0 0 auto;
 }
 
 
 .card {
     margin-top: 20px;
 }
 
 .current-package {
     padding-top: 0;
 }
 
 .package-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 1.4rem;
 }
 
 .package-title {
     color: #343434;
     font-size: 22px;
     font-weight: 600;
     margin: 0;
 }
 
 .package-price {
     color: #343434;
     font-size: 20px;
     font-weight: 500;
     margin: 0;
 }
 
 .upgrade-btn {
     background: #343434;
     color: white;
     border: none;
     padding: 8px 12px;
     border-radius: 12px;
     font-weight: 500;
     cursor: pointer;
     transition: background-color 0.2s;
     display: flex;
     justify-content: center;
     align-items: center;
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
     font-size: 14px;
 }
 
 .stats-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
 }
 
 .stat-box {
     padding: 12px;
     border-radius: 12px;
     background: #d8d8d82e;
     border: 2px #fff solid;
     box-shadow: 0px 0px 0 1px #5757571a;
     display: flex;
     justify-content: center;
     align-items: center;
     margin-bottom: 12px;
     flex-direction: column;
 }
 
 .stat-label {
     font-size: 16px;
     margin: 0;
     margin-bottom: 4px;
     text-align: center;
 }
 
 .stat-value {
     font-size: 20px;
     font-weight: 500;
     margin: 0;
     color: #343434;
 }
 
 /* כרטיס אמצעי תשלום */
 .card-header {
     display: flex;
     align-items: center;
     gap: 8px;
 }
 
 .card-header i {
     color: #343434;
     font-size: 20px;
 }
 
 .card-header h2 {
     font-size: 1.25rem;
     font-weight: bold;
     color: #343434;
 }
 
 .card-body {
     padding-top: 4px;
 }
 
 .payment-method {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 16px;
     background: #d8d8d82e;
     border-radius: 12px;
     border: 2px #fff solid;
     box-shadow: 0px 0px 0 1px #5757571a;
     position: relative;
     margin-bottom: 12px;
 }
 
 .payment-method:last-child {
     margin-bottom: 0px;
 }
 
 .card-info {
     display: flex;
     align-items: center;
     gap: 12px;
 }
 
 .card-logo {
     width: 48px;
     height: 32px;
     background: linear-gradient(to right, #2563eb, #1d4ed8);
     border-radius: 6px;
 }
 
 .card-details {
     font-size: 0.875rem;
 }
 
 .delete-btn {
     color: #343434;
     background: none;
     border: none;
     font-size: 16px;
     font-weight: 500;
     cursor: pointer;
 }
 
 /* היסטוריית חיובים */
 .invoice-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 12px 16px;
     background: #d8d8d82e;
     border-radius: 12px;
     border: 2px #fff solid;
     margin-bottom: 12px;
     box-shadow: 0px 0px 0 1px #5757571a;
 }
 
 .invoice-details p:first-child {
     font-weight: 500;
     margin-bottom: 4px;
 }
 
 .invoice-details p:last-child {
     color: #64748b;
     font-size: 0.875rem;
 }
 
 .invoice-actions {
     display: flex;
     align-items: center;
     gap: 16px;
 }
 
 .download-btn {
     color: #343434;
     background: none;
     border: none;
     cursor: pointer;
 }
 
 .package-option {
     padding: 16px;
     border: 1px solid #e2e8f0;
     border-radius: 12px;
     margin-bottom: 16px;
     cursor: pointer;
     transition: all 0.2s;
 }
 
 .package-option-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 12px;
 }
 
 .feature-list {
     list-style: none;
 }
 
 .feature-list li {
     display: flex;
     align-items: center;
     gap: 8px;
     color: #64748b;
     font-size: 0.875rem;
     margin-bottom: 8px;
 }
 
 .feature-list li::before {
     content: "";
     width: 4px;
     height: 4px;
     background: #2563eb;
     border-radius: 50%;
 }
 
 .upgrade-btn i {
     font-size: 16px;
 }
 
 .package-month {
     font-size: 16px;
     font-weight: 500;
 }
 
 .package-data {
     display: flex;
     align-items: baseline;
     /* gap: 6px; */
 }
 
 .card-details p,
 .invoice-item p {
     margin: 0;
 }
 
 .card:first-child {
     margin-top: 0;
 }
 
 .trial-banner {
     border-radius: 24px;
     padding: 20px 28px;
     display: flex;
     align-items: center;
     gap: 20px;
     position: relative;
     isolation: isolate;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
 .trial-banner .icon-container {
     position: relative;
     width: 48px;
     height: 48px;
     flex-shrink: 0;
 }
 
 .trial-banner .icon-wrapper {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, #feb26e 0%, #8B5CF6 100%);
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1.1rem;
     transform: rotate(-5deg);
     transition: transform 0.3s ease;
 }
 
 .trial-banner .icon-wrapper::after {
     content: '';
     position: absolute;
     inset: -4px;
     background: linear-gradient(135deg, rgb(254 172 108 / 0%) 0%, rgb(218 112 213 / 0%) 100%);
     border-radius: inherit;
     opacity: 0.3;
     z-index: -1;
     filter: blur(8px);
 }
 
 .trial-banner:hover .icon-wrapper {
     transform: rotate(0deg) scale(1.05);
 }
 
 .trial-banner .content {
     flex-grow: 1;
 }
 
 .trial-banner .title {
     color: #1E293B;
     font-size: 20px;
     font-weight: 600;
     margin: 0 0 6px 0;
     line-height: 1.3;
     letter-spacing: -0.01em;
     text-align: center;
 }
 
 .trial-banner .subtitle {
     color: #343434;
     font-size: 14px;
     text-align: center;
     margin: 0;
 }
 
 .animated-border {
     background: white;
     border-radius: 16px;
     position: relative;
     isolation: isolate;
 }
 
 .animated-border::before {
     content: '';
     position: absolute;
     inset: -2px;
     padding: 2px;
     background: linear-gradient(115deg, #feac6c 0%, #da70d5 25%, #8b5cf6 50%, #da70d5 75%, #feac6c 100%);
     border-radius: 18px;
     -webkit-mask:
         linear-gradient(#fff 0 0) content-box,
         linear-gradient(#fff 0 0);
     mask:
         linear-gradient(#fff 0 0) content-box,
         linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
     background-size: 200% 100%;
     animation: moveGradient 6s linear infinite alternate;
 }
 
 .animated-border::after {
     content: '';
     position: absolute;
     inset: -3px;
     background: linear-gradient(115deg, rgb(254 172 108) 0%, rgb(218 112 213 / 70%) 25%, rgb(139 92 246 / 80%) 50%, rgb(218 112 213) 75%, rgb(254 172 108 / 80%) 100%);
     border-radius: 19px;
     background-size: 200% 100%;
     filter: blur(10px);
     opacity: 0.15;
     z-index: -1;
     animation: moveGradient 6s linear infinite alternate;
 }
 
 @keyframes moveGradient {
     0% {
         background-position: 0% 50%;
     }
 
     50% {
         background-position: 100% 50%;
     }
 
     100% {
         background-position: 0% 50%;
     }
 }
 
 .credit-card-modal {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.2);
     backdrop-filter: blur(8px);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
     overflow-y: auto;
     min-height: 100%;
     min-height: -webkit-fill-available;
 }
 
 .credit-card-modal .modal-content {
     background: linear-gradient(145deg, #ffffff, #f8fafc);
     border-radius: 24px;
     padding: 2rem;
     width: 90%;
     max-width: 440px;
     position: relative;
     box-shadow:
         0 10px 30px rgba(0, 0, 0, 0.1),
         0 1px 8px rgba(0, 0, 0, 0.05);
     animation: creditCardModalSlideUp 0.3s ease forwards;
     margin: auto;
     max-height: calc(100vh - 2rem);
     overflow-y: auto;
 }
 
 
 .credit-card-modal .modal-title {
     color: #343434;
     font-size: 1.5rem;
     text-align: center;
     font-weight: 600;
     margin: 0;
     margin-bottom: 1.2rem;
 }
 
 .credit-card-modal .credit-card-form {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
 }
 
 .credit-card-modal .form-field {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
 }
 
 .credit-card-modal .form-field label {
     color: #4b5563;
     font-size: 0.9rem;
     font-weight: 500;
     margin-right: 0.5rem;
 }
 
 .credit-card-modal .input-wrapper {
     position: relative;
     display: flex;
     align-items: center;
     background: #ffffff;
     border: 1px solid #e5e7eb;
     border-radius: 12px;
     transition: all 0.2s ease;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .credit-card-modal .input-wrapper:focus-within {
     border-color: #343434;
     box-shadow:
         0 0 0 1px rgba(52, 52, 52, 0.1),
         0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .credit-card-modal .input-wrapper i {
     color: #343434;
     margin: 0 1rem;
     font-size: 1.1rem;
     transition: all 0.3s ease;
     min-width: 20px;
 }
 
 .credit-card-modal .input-wrapper input {
     width: 100%;
     padding: 0.8rem;
     border: none;
     background: transparent;
     font-size: 1rem;
     color: #1f2937;
 }
 
 .credit-card-modal .input-wrapper input::placeholder {
     color: #9ca3af;
 }
 
 .credit-card-modal .input-wrapper input:focus {
     outline: none;
 }
 
 .credit-card-modal .additional-details {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
 }
 
 .credit-card-modal .checkbox-wrapper {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0 0.5rem;
     border-radius: 8px;
     transition: background-color 0.2s ease;
 }
 
 .credit-card-modal .checkbox-wrapper input[type="checkbox"] {
     appearance: none;
     -webkit-appearance: none;
     width: 1.25rem;
     height: 1.25rem;
     border: 2px solid #343434;
     border-radius: 4px;
     margin: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.2s ease;
 }
 
 .credit-card-modal .checkbox-wrapper input[type="checkbox"]:checked {
     background-color: #343434;
     border-color: #343434;
 }
 
 .credit-card-modal .checkbox-wrapper input[type="checkbox"]:checked::after {
     content: '✓';
     color: white;
     font-size: 0.8rem;
 }
 
 .credit-card-modal .checkbox-wrapper label {
     color: #4b5563;
     font-size: 0.9rem;
     cursor: pointer;
 }
 
 .credit-card-modal .submit-button {
     background: #343434;
     color: white;
     border: none;
     padding: 1rem;
     border-radius: 12px;
     font-size: 18px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 4px 12px rgba(52, 52, 52, 0.15);
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
 }
 
 .credit-card-modal .submit-button:hover {
     transform: translateY(-1px);
     box-shadow: 0 6px 16px rgba(52, 52, 52, 0.2);
 }
 
 .credit-card-modal .security-message {
     display: flex;
     gap: 12px;
     padding: 12px;
     border-radius: 8px;
     background-color: #f8fafc;
     border: 1px solid #e2e8f0;
     justify-content: center;
     align-items: center;
 }
 
 .credit-card-modal .security-message i {
     color: #0f766e;
     font-size: 24px;
 }
 
 .credit-card-modal .security-message p {
     margin: 0;
     font-size: 0.875rem;
     line-height: 1.5;
     color: #475569;
 }
 
 .credit-card-modal .close-button {
     position: absolute;
     left: 1rem;
     top: 1rem;
     background: rgba(255, 255, 255, 0.9);
     border: 1px solid #e5e7eb;
     color: #4b5563;
     width: 32px;
     height: 32px;
     border-radius: 8px;
     transition: all 0.2s ease;
     padding: 0;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .credit-card-modal .close-button i {
     margin-left: 0;
     font-size: 22px;
 }
 
 input#card-number {
     direction: ltr;
 }
 
 @keyframes modalFadeIn {
     from {
         opacity: 0;
         background: rgba(0, 0, 0, 0);
         backdrop-filter: blur(0);
     }
 
     to {
         opacity: 1;
         background: rgba(0, 0, 0, 0.2);
         backdrop-filter: blur(8px);
     }
 }
 
 @keyframes modalFadeOut {
     from {
         opacity: 1;
         background: rgba(0, 0, 0, 0.2);
         backdrop-filter: blur(8px);
     }
 
     to {
         opacity: 0;
         background: rgba(0, 0, 0, 0);
         backdrop-filter: blur(0);
     }
 }
 
 @keyframes contentSlideIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
 
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes contentSlideOut {
     from {
         opacity: 1;
         transform: translateY(0);
     }
 
     to {
         opacity: 0;
         transform: translateY(20px);
     }
 }
 
 .credit-card-modal {
     animation: modalFadeIn 0.3s ease forwards;
 }
 
 .credit-card-modal.closing {
     animation: modalFadeOut 0.3s ease forwards;
     pointer-events: none;
 }
 
 .credit-card-modal .modal-content {
     animation: contentSlideIn 0.3s ease forwards;
 }
 
 .credit-card-modal.closing .modal-content {
     animation: contentSlideOut 0.3s ease forwards;
 }
 
 .credit-card-notice {
     background-color: rgba(255, 237, 213, 0.6);
     border: 1px solid rgba(234, 179, 8, 0.2);
     border-radius: 12px;
     padding: 0.75rem 1rem;
     margin-bottom: 0;
     display: flex;
     align-items: center;
     gap: 0.75rem;
 }
 
 .credit-card-notice i {
     color: #b45309;
     font-size: 1.25rem;
     flex-shrink: 0;
 }
 
 .credit-card-notice p {
     margin: 0;
     font-size: 0.875rem;
     line-height: 1.5;
     color: #78350f;
 }
 
 .payment-method span.badge {
     position: absolute;
     left: 0;
     background: #5686f7;
     border-radius: 12px 0px 12px 0px;
     padding: 2px 8px;
     font-weight: 500;
     color: white;
     font-size: 14px;
     top: 0;
     z-index: 9;
 }
 
 
 .plans-modal-overlay {
     position: fixed;
     inset: 0;
     background: rgb(3 3 3 / 70%);
     backdrop-filter: blur(8px);
     z-index: 1000;
     opacity: 0;
     visibility: hidden;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .plans-modal {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     background: linear-gradient(145deg, #ffffff, #f8fafc);
     border-radius: 32px 32px 0 0;
     transform: translateY(100%);
     transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 1001;
     padding: 22px 0;
     max-height: 90vh;
     overflow-y: auto;
 }
 
 .plans-modal-overlay.active {
     opacity: 1;
     visibility: visible;
 }
 
 .plans-modal.active {
     transform: translateY(0);
 }
 
 .plans-modal-header {
     padding: 0;
     text-align: center;
     position: relative;
     padding-bottom: 16px;
 }
 
 .plans-modal-title {
     font-size: 23px;
     font-weight: 700;
     margin-bottom: 4px;
     color: #343434;
     padding: 0px 48px;
 }
 
 .plans-modal-subtitle {
     color: #6B7280;
     font-size: 16px;
     font-weight: 500;
     padding: 0 20px;
 }
 
 .plans-cards-wrapper {
     position: relative;
     overflow: hidden;
     padding: 0 32px;
 }
 
 .plans-cards-container {
     display: flex;
     scroll-snap-type: x mandatory;
     overflow-x: auto;
     gap: 24px;
     padding: 12px 0;
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
     -ms-overflow-style: none;
 }
 
 .plans-cards-container::-webkit-scrollbar {
     display: none;
 }
 
 .plans-pricing-card {
     flex: 0 0 calc(100% - 60px);
     max-width: 420px;
     scroll-snap-align: center;
     padding: 36px 28px 20px;
     background: #ffffff;
     border-radius: 24px;
     position: relative;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     border: 2px #e0e0e0 solid;
 }
 
 .plans-card-badge {
     position: absolute;
     top: 0;
     left: 0px;
     padding: 8px 20px;
     border-radius: 21px 0px 24px 0px;
     color: white;
     font-weight: 600;
     font-size: 16px;
 }
 
 .badge-popular {
     background: linear-gradient(135deg, #3B82F6, #2563EB);
 }
 
 .badge-free {
     background: linear-gradient(135deg, #10B981, #059669);
 }
 
 .plans-card-title {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 4px;
     text-align: center;
     color: #1F2937;
 }
 
 .plans-card-price {
     font-size: 32px;
     font-weight: 700;
     text-align: center;
     margin-bottom: 16px;
     color: #111827;
     display: flex;
     align-items: baseline;
     justify-content: center;
     gap: 4px;
 }
 
 .plans-card-price-currency {
     font-size: 18px;
     font-weight: 600;
     color: #101827;
 }
 
 .plans-feature-list {
     list-style: none;
     margin: 0;
     padding: 0;
     margin-bottom: 4.6rem;
 }
 
 .plans-feature-item {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 9px;
     color: #4B5563;
     font-size: 16px;
     font-weight: 400;
 }
 
 .plans-feature-icon {
     width: 26px;
     height: 26px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     font-size: 12px;
     transition: transform 0.3s ease;
 }
 
 .plans-icon-check {
     background: #DCFCE7;
     color: #059669;
 }
 
 .plans-icon-cross {
     background: #FEE2E2;
     color: #DC2626;
 }
 
 .plans-modal-close {
     height: 30px;
     width: 30px;
     max-height: 30px;
     max-width: 30px;
     color: #4b5563;
     display: flex;
     justify-content: center;
     align-items: center;
     position: absolute;
     left: 14px;
     top: -8px;
     font-size: 22px;
     border: 1px #d9d9d9 solid;
     border: 1px solid #e5e7eb;
     border-radius: 8px;
     background: white;
 }
 
 .plans-modal-close i {
     margin-left: 0;
 }
 
 .badge-free-border {
     border-color: #0ca170;
 }
 
 .badge-popular-border {
     border-color: #2a6aee;
 }
 
 .badge-popular-border .plans-icon-check {
     background: #dcedfc;
     color: #053396;
 }
 
 .card-button {
     display: block;
     width: auto;
     padding: 14px 24px;
     border: none;
     border-radius: 12px;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     overflow: hidden;
     background: linear-gradient(135deg, #252525, #313131);
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
     color: white;
     position: absolute;
     bottom: 0;
     right: 0;
     left: 0;
     margin: 12px 16px;
 }
 
 .badge-popular-border .card-button {
     background: linear-gradient(135deg, #3B82F6, #1D4ED8);
     color: white;
 }
 
 .badge-free-border .card-button {
     background: linear-gradient(135deg, #10B981, #059669);
     color: white;
 }
 
 /* Base Alert Styles */
 .alerts {
     display: flex;
     border-radius: 12px;
     overflow: hidden;
 }
 
 .alerts i {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 30%;
     font-size: 28px;
 }
 
 .alerts .wave {
     transform: rotate(180deg);
     height: auto;
     width: 20px;
     min-height: 0;
     margin-bottom: -2%;
     animation: waveAnimation 3s ease-in-out infinite;
 }
 
 @keyframes waveAnimation {
     0% {
         transform: rotate(180deg) translateY(0);
     }
 
     50% {
         transform: rotate(180deg) translateY(10px);
     }
 
     100% {
         transform: rotate(180deg) translateY(0);
     }
 }
 
 .alerts .content {
     margin: 12px;
     margin-right: 0;
     overflow: hidden;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .alerts .message {
     color: #71717a;
     margin: 0 12px;
     font-size: 15px;
     margin-left: 0;
 }
 
 .alerts svg.wave {
     display: block;
 }
 
 .alerts .title {
     margin: 0 12px;
 }
 
 
 /* Alert Types */
 .alerts.success .wave path {
     fill: #66cdaa;
     stroke: #66cdaa;
 }
 
 .alerts.success .title,
 .alerts.success .icon {
     color: #66cdaa;
 }
 
 .alerts.success .icon {
     stroke: #66cdaa;
 }
 
 .alerts.success i,
 .alerts.success .message {
     color: #428971;
 }
 
 .alerts.success {
     background: linear-gradient(145deg, rgb(103 205 170 / 10%), rgb(0 255 167 / 10%));
 }
 
 .alerts.danger .wave path {
     fill: #ff6b6b;
     stroke: #ff6b6b;
 }
 
 .alerts.danger .title {
     color: #ff6b6b;
 }
 
 .alerts.danger .icon {
     stroke: #ff6b6b;
 }
 
 .alerts.danger i,
 .alerts.danger .message {
     color: #a54848;
 }
 
 .alerts.danger {
     background: linear-gradient(145deg, rgb(255 107 107 / 10%), rgb(255 0 0 / 10%));
 }
 
 .alerts.warning .wave path {
     fill: #ffd93d;
     stroke: #ffd93d;
 }
 
 .alerts.warning .title {
     color: #ffd93d;
 }
 
 .alerts.warning .icon {
     stroke: #ffd93d;
 }
 
 .alerts.warning i,
 .alerts.warning .message {
     color: #7a6408;
 }
 
 .alerts.warning {
     background: linear-gradient(145deg, rgb(255 217 61 / 10%), rgb(255 205 0 / 10%));
 }
 
 .alerts.info .wave path {
     fill: #4dabf7;
     stroke: #4dabf7;
 }
 
 .alerts.info .title {
     color: #4dabf7;
 }
 
 .alerts.info i,
 .alerts.info .message {
     color: #306896;
 }
 
 .alerts.info {
     background: linear-gradient(145deg, rgb(77 171 247 / 10%), rgb(0 141 255 / 10%));
 }
 
 .cancel-plan {
     font-size: 14px;
     position: absolute;
     bottom: 52px;
     width: 100%;
     text-align: center;
     right: 0;
     padding: 0px 10px;
 }
 
 .slider-container {
     position: relative;
     display: flex;
     align-items: center;
     width: 100%;
 }
 
 .notifications-slider {
     flex: 1;
     display: flex;
     overflow-x: scroll;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
     -ms-overflow-style: none;
     gap: 1rem;
     width: 100%;
 }
 
 .alert-container {
     min-width: 100%;
     flex: 0 0 100%;
     scroll-snap-align: start;
     scroll-snap-stop: always;
 }
 
 .notifications-wrapper .nav-button {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 34px;
     height: 34px;
     border: none;
     border-radius: 50%;
     background: #ffffff8c;
     box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 10;
     backdrop-filter: blur(8px);
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease, visibility 0.3s ease;
     -webkit-backdrop-filter: blur(16px);
 }
 
 .notifications-wrapper .nav-button.show {
     opacity: 1;
     visibility: visible;
 }
 
 .notifications-wrapper .nav-button i {
     font-size: 16px;
     color: #666;
     margin-left: 0;
 }
 
 .notifications-wrapper .nav-button.prev {
     right: -20px;
     margin-right: 8px;
 }
 
 .notifications-wrapper .nav-button.next {
     left: -20px;
     margin-left: 8px;
 }
 
 .number-loading {
     background: linear-gradient(90deg,
             rgba(240, 240, 240, 0.6) 0%,
             rgba(250, 250, 250, 0.8) 50%,
             rgba(240, 240, 240, 0.6) 100%);
     background-size: 200% 100%;
     animation: numberLoading 2s ease-in-out infinite;
     width: 35px;
     height: 26px;
     border-radius: 6px;
     display: inline-block;
     position: relative;
     overflow: hidden;
 }
 
 .number-loading::before {
     content: '';
     position: absolute;
     top: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg,
             transparent,
             rgba(255, 255, 255, 0.15),
             transparent);
     animation: shine 2s ease-in-out infinite;
     transform: skewX(-15deg);
 }
 
 @keyframes numberLoading {
     0% {
         background-position: 200% 0;
     }
 
     100% {
         background-position: -200% 0;
     }
 }
 
 @keyframes shine {
     0% {
         transform: translateX(-100%) skewX(-15deg);
     }
 
     50% {
         transform: translateX(100%) skewX(-15deg);
     }
 
     100% {
         transform: translateX(100%) skewX(-15deg);
     }
 }
 
 .widget-not-defined {
     text-align: center;
     background: #f8f8f8;
     border-radius: 10px;
     padding: 17px;
     box-shadow: 0px 0px 0 1px #5757571a;
     border: 2px #fff solid;
 }
 
 .plans-cards-wrapper .sms-package-card {
     background: white;
     border-radius: 14px;
     padding: 16px;
     margin-bottom: 18px;
     border: 1px solid #e5e7eb;
     position: relative;
 }
 
 .plans-cards-wrapper .sms-package-card .package-content {
     display: flex;
     flex-direction: column;
 }
 
 .plans-cards-wrapper .sms-package-card .package-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
 .plans-cards-wrapper .sms-package-card .package-amount {
     font-size: 20px;
     font-weight: 600;
     color: #111827;
 }
 
 .plans-cards-wrapper .sms-package-card .package-price {
     font-size: 20px;
     font-weight: 700;
     color: #111827;
 }
 
 .plans-cards-wrapper .sms-package-card .package-details {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 13px;
 }
 
 .plans-cards-wrapper .sms-package-card .price-per-sms {
     color: #6b7280;
     font-size: 15px;
 }
 
 .plans-cards-wrapper .sms-package-card .package-saving {
     color: #059669;
     font-weight: 500;
     font-size: 16px;
 }
 
 .plans-cards-wrapper .sms-package-card.popular {
     border: 2px solid #2563eb;
 }
 
 .plans-cards-wrapper .sms-package-card .popular-tag {
     position: absolute;
     top: -10px;
     right: 12px;
     background: #2563eb;
     color: white;
     font-size: 12px;
     font-weight: 500;
     padding: 3px 10px;
     border-radius: 12px;
 }
 
 .plans-cards-wrapper.sms {
     padding: 0 20px;
 }
 
 .signin .loginBox {
     display: flex;
     justify-content: center;
     margin-top: 1rem;
 }
 
 .signin .login-btn {
     background: transparent;
     color: #5581f6;
     font-weight: 600;
     box-shadow: 0 0;
     margin: 0;
     padding-right: 7px;
     text-decoration: underline;
     border: 0;
 }
 
 .choice-modal {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 1000;
     display: flex;
     justify-content: center;
     align-items: center;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     overflow: hidden;
     padding: 16px;
 }
 
 .choice-modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(8px);
 }
 
 .choice-modal-container {
     position: relative;
     width: 100%;
     max-width: 400px;
     background: linear-gradient(145deg, #ffffff, #f8fafc);
     border-radius: 24px;
     padding: 32px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.05);
     animation: choiceModalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
     z-index: 1;
 }
 
 .choice-modal-title {
     font-size: 22px;
     font-weight: 600;
     color: #000;
     margin: 0 0 24px 0;
     letter-spacing: -0.02em;
     text-align: right;
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
 }
 
 .choice-options-container {
     display: grid;
     gap: 16px;
     grid-template-columns: 1fr;
 }
 
 .choice-option {
     display: flex;
     align-items: center;
     gap: 11px;
     padding: 14px 18px;
     border-radius: 16px;
     border: 1px solid rgba(0, 0, 0, 0.06);
     cursor: pointer;
     transition: all 0.2s ease;
 }
 
 .choice-option:hover {
     background: #fff;
     transform: translateY(-2px);
 }
 
 .choice-option-icon {
     font-size: 24px;
     width: 48px;
     height: 48px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(0, 0, 0, 0.04);
     border-radius: 12px;
 }
 
 .choice-option-text {
     font-size: 18px;
     font-weight: 400;
     color: #000;
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
 }
 
 @keyframes choiceModalSlideUp {
     from {
         transform: translateY(30px);
         opacity: 0;
     }
 
     to {
         transform: translateY(0);
         opacity: 1;
     }
 }
 
 .new-question .btn-icon {
     width: 32px;
     height: 32px;
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     border: none;
     background: #f8f9fa;
     border-radius: 8px;
     cursor: pointer;
     color: #343434;
     transition: all 0.2s ease;
 }
 
 .new-question .btn-icon:active {
     transform: scale(0.95);
 }
 
 .new-question .btn-icon i {
     font-size: 16px;
     margin-left: 0;
 }
 
 .new-question .type-option {
     border: 1px solid rgba(0, 0, 0, 0.1) !important;
     transition: all 0.2s ease;
     padding: 12px 0px;
     cursor: pointer;
     text-align: center;
     border-radius: 16px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }
 
 .new-question .type-option.selected {
     background: #f8f9fa !important;
     box-shadow: 0px 0px 0px 1px #bdbdbd;
     border: 4px #fff solid !important;
 }
 
 .new-question .type-option i {
     color: #343434;
 }
 
 .new-question .options-list .form-group {
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 8px;
     padding: 8px 12px;
     background: white;
     transition: all 0.2s ease;
 }
 
 .new-question .options-list .form-group:hover {
     border-color: #343434;
 }
 
 .new-question .options-list .form-group input {
     border: none;
     padding: 0;
     height: 32px;
     font-size: 16px;
 }
 
 .new-question .options-list .form-group input:focus {
     outline: none;
 }
 
 .form-group.checkbox input[type="checkbox"] {
     -webkit-appearance: none;
     appearance: none;
     width: 24px;
     height: 24px;
     border: 2px solid #e2e8f0;
     border-radius: 6px;
     cursor: pointer;
     position: relative;
     background: white;
     transition: all 0.2s ease;
     padding: 0;
     margin: 0;
 }
 
 .form-group.checkbox input[type="checkbox"]:checked {
     background: #343434;
     border-color: #343434;
 }
 
 .form-group.checkbox input[type="checkbox"]:checked::after {
     content: '';
     position: absolute;
     left: 6px;
     top: 3px;
     width: 5px;
     height: 10px;
     border: solid white;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }
 
 .form-group.checkbox input[type="checkbox"]:hover {
     border-color: #343434;
 }
 
 .form-group.checkbox .custom {
     font-size: 16px;
     color: #343434;
     user-select: none;
 }
 
 .form-group.checkbox {
     display: flex;
     align-items: center;
     padding: 10px;
     background: #f8f9fa;
     border-radius: 16px;
     margin-bottom: 22px;
 }
 
 .new-question textarea {
     padding-right: 42px;
 }
 
 .no-questions {
     padding: 24px;
     text-align: center;
     color: rgb(52 52 52);
     background: rgb(248, 249, 250);
     border-radius: 8px;
     box-shadow: 0px 0px 0px 2px #f8f9fa;
     border: 2px #fff solid;
 }
 
 .grecaptcha-badge {
     display: none !important
 }
 
 .security-modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1100;
     opacity: 0;
     transition: all 0.3s ease-in-out;
     backdrop-filter: blur(0px);
     pointer-events: none;
 }
 
 .security-modal-overlay.show {
     opacity: 1;
     background: rgba(0, 0, 0, 0.6);
     backdrop-filter: blur(8px);
     pointer-events: all;
 }
 
 .security-modal-content {
     background: white;
     border-radius: 20px;
     padding: 25px;
     width: 90%;
     max-width: 450px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     transform: scale(0.95) translateY(20px);
     opacity: 0;
     transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
     position: relative;
 }
 
 .security-modal-content.show {
     transform: scale(1) translateY(0);
     opacity: 1;
 }
 
 .security-modal-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
     padding-bottom: 15px;
     border-bottom: 1px solid #f0f0f0;
 }
 
 .security-modal-header h3 {
     margin: 0;
     color: #333;
     font-size: 1.5rem;
     font-weight: 600;
 }
 
 .security-modal-body {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0;
     padding: 0;
 }
 
 .security-icon-container {
     background: rgba(59, 130, 246, 0.1);
     width: 80px;
     height: 80px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 16px;
 }
 
 .security-icon-container i {
     font-size: 2.5rem;
     color: #3b82f6;
 }
 
 .security-message {
     text-align: center;
     font-size: 1.1rem;
     color: #555;
     margin: 0;
     margin-bottom: 18px;
 }
 
 .security-captcha-container {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: all 0.3s;
 }
 
 .security-modal-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 15px;
     border-top: 1px solid #f0f0f0;
 }
 
 .security-status-message {
     font-size: 0.9rem;
     color: #666;
 }
 
 .security-modal-close {
     background: none;
     border: none;
     font-size: 1.5rem;
     cursor: pointer;
     color: #333333;
     padding: 5px;
     transition: color 0.2s;
     position: absolute;
     top: 18px;
     left: 10px;
 }
 
 .security-modal-close:hover {
     color: #3b82f6;
 }
 
 .security-modal-content.success .security-icon-container {
     background: rgba(34, 197, 94, 0.1);
 }
 
 .security-modal-content.success .security-icon-container i {
     color: #22c55e;
 }
 
 .security-modal-content.error .security-icon-container {
     background: rgba(239, 68, 68, 0.1);
 }
 
 .security-modal-content.error .security-icon-container i {
     color: #ef4444;
 }
 
 
 .whatsapp-modal {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.7);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 1000;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
 }
 
 .whatsapp-modal.active {
     opacity: 1;
     visibility: visible;
 }
 
 .whatsapp-modal .modal-container {
     width: 90%;
     transform: translateY(20px) scale(0.96);
     transition: all 0.4s ease;
 }
 
 .whatsapp-modal.active .modal-container {
     transform: translateY(0) scale(1);
 }
 
 .whatsapp-modal .modal-content {
     position: relative;
     width: 100%;
     padding: 30px 28px;
     border-radius: 20px;
     background: white;
     box-shadow:
         0 20px 40px rgba(0, 0, 0, 0.1),
         0 0 0 1px rgba(255, 255, 255, 0.1),
         inset 0 0 0 1px rgba(255, 255, 255, 0.2);
     color: #333;
     text-align: right;
     overflow: hidden;
     transition: all 0.3s ease;
 }
 
 .whatsapp-modal .modal-content::before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     width: 90px;
     height: 90px;
     background: linear-gradient(135deg, #25D366 0%, transparent 75%);
     border-radius: 0 20px 0 100%;
     opacity: 0.8;
     z-index: 0;
 }
 
 .whatsapp-modal .modal-content::after {
     content: '';
     position: absolute;
     top: -100%;
     left: -100%;
     width: 300%;
     height: 300%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
     z-index: -1;
 }
 
 .whatsapp-modal .close-button {
     position: absolute;
     top: 16px;
     left: 16px;
     background: rgba(255, 255, 255, 0.15);
     border: none;
     font-size: 16px;
     color: #888;
     cursor: pointer;
     z-index: 10;
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     transition: all 0.2s ease;
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 }
 
 .whatsapp-modal .close-button:hover {
     background-color: rgba(255, 255, 255, 0.25);
     color: #555;
     transform: rotate(90deg);
 }
 
 .whatsapp-modal .new-badge {
     position: absolute;
     top: 18px;
     right: 13px;
     background: linear-gradient(135deg, #25D366, #128C7E);
     color: white;
     font-size: 14px;
     font-weight: 600;
     padding: 6px 14px 6px 16px;
     border-radius: 30px;
     box-shadow:
         0 4px 12px rgba(37, 211, 102, 0.3),
         0 0 0 2px rgba(255, 255, 255, 0.15);
     animation: float 3s ease-in-out infinite;
     z-index: 5;
     letter-spacing: 0.5px;
 }
 
 .whatsapp-modal .title-container {
     position: relative;
     margin-top: 15px;
     margin-bottom: 20px;
     padding-right: 5px;
     z-index: 5;
     text-align: center;
 }
 
 .whatsapp-modal .title {
     font-size: 24px;
     font-weight: 700;
     color: #333;
     letter-spacing: -0.5px;
     margin-bottom: 6px;
     position: relative;
     display: inline-block;
 }
 
 .whatsapp-modal .title::after {
     content: '';
     position: absolute;
     bottom: -6px;
     right: 50%;
     transform: translateX(50%);
     width: 40px;
     height: 3px;
     background: linear-gradient(to right, #25D366, #128C7E);
     border-radius: 2px;
 }
 
 .whatsapp-modal .subtitle {
     font-size: 15px;
     font-weight: 500;
     color: #128C7E;
     margin-top: 10px;
 }
 
 .whatsapp-modal .content {
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 28px;
     color: #555;
     position: relative;
     z-index: 5;
 }
 
 .whatsapp-modal .buttons-container {
     display: flex;
     flex-direction: column;
     gap: 16px;
     margin-top: 24px;
     position: relative;
     z-index: 5;
 }
 
 .whatsapp-modal .primary-button {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 16px;
     background: linear-gradient(135deg, #25D366, #128C7E);
     color: white;
     font-size: 17px;
     font-weight: 600;
     border-radius: 12px;
     border: none;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 6px 18px rgba(37, 211, 102, 0.25);
     position: relative;
     overflow: hidden;
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
 }
 
 .whatsapp-modal .primary-button::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: all 0.3s ease;
 }
 
 .whatsapp-modal .primary-button:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 25px rgba(37, 211, 102, 0.35);
 }
 
 .whatsapp-modal .primary-button:hover::before {
     left: 100%;
     transition: 0.7s;
 }
 
 .whatsapp-modal .primary-button svg {
     margin-left: 10px;
     width: 22px;
     height: 22px;
     filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
 }
 
 .whatsapp-modal .dismiss-button {
     background: transparent;
     color: #888;
     font-size: 16px;
     font-weight: 500;
     border: none;
     cursor: pointer;
     transition: all 0.2s ease;
     text-align: center;
     border-radius: 8px;
     position: relative;
     overflow: hidden;
 }
 
 @keyframes float {
     0% {
         transform: translateY(0);
     }
 
     50% {
         transform: translateY(-4px);
     }
 
     100% {
         transform: translateY(0);
     }
 }
 
 @keyframes particleFloat {
     0% {
         transform: translateY(80px) translateX(0) rotate(0deg);
         opacity: 0;
     }
 
     10% {
         opacity: 0.3;
     }
 
     90% {
         opacity: 0.2;
     }
 
     100% {
         transform: translateY(0) translateX(20px) rotate(360deg);
         opacity: 0;
     }
 }
 
 @keyframes pulse {
     0% {
         box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
     }
 
     70% {
         box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
     }
 
     100% {
         box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
     }
 }
 
 .whatsapp-modal .primary-button::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 12px;
     animation: pulse 2s infinite;
     z-index: -1;
 }
 
 .whatsapp-page {
     display: flex;
     flex-direction: column;
     max-width: 430px;
     margin: 0 auto;
     overflow: hidden;
     position: relative;
     min-height: 100vh;
     --primary: #25D366;
     --primary-dark: #128C7E;
     --primary-light: #DCF8C6;
     --accent: #34B7F1;
     --dark: #343434;
     --light: #f5f5f5;
     --white: #ffffff;
     --card-radius: 24px;
     --btn-radius: 16px;
     --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     margin: -1rem;
 }
 
 /* --- HERO SECTION --- */
 .wp-hero {
     position: relative;
     padding: 30px 20px 94px;
     background: #15997a;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     z-index: 0;
     text-align: center;
     border-radius: 25px;
     margin: 10px;
 }
 
 /* 3D Grid Layout - Modern Design Element */
 .wp-hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background:
         linear-gradient(rgba(7, 94, 84, 0.8) 1px, transparent 1px),
         linear-gradient(90deg, rgba(7, 94, 84, 0.8) 1px, transparent 1px);
     background-size: 20px 20px;
     transform: perspective(500px) rotateX(60deg) translateY(-100px) scale(2.5);
     z-index: -1;
     opacity: 0.2;
 }
 
 /* Animated Gradient Overlay */
 .wp-hero::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgb(0 0 0 / 40%) 0%, rgba(37, 211, 102, 0.5) 50%, rgba(7, 94, 84, 0.6) 100%);
     z-index: -2;
     animation: gradientMove 10s ease infinite alternate;
 }
 
 @keyframes gradientMove {
     0% {
         background-position: 0% 0%;
     }
 
     100% {
         background-position: 100% 100%;
     }
 }
 
 
 
 .wp-hero-title {
     font-size: 28px;
     font-weight: 800;
     margin-bottom: 0;
     color: white;
     text-shadow: 0 2px 5px rgb(0 0 0 / 10%);
     line-height: 1.3;
 }
 
 .wp-hero-subtitle {
     font-size: 16px;
     color: rgba(255, 255, 255, 0.9);
     max-width: 320px;
 }
 
 /* Modern Badge Design */
 .wp-badge {
     display: inline-block;
     padding: 8px 16px;
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     border-radius: 30px;
     color: white;
     font-weight: 700;
     font-size: 14px;
     /* margin-bottom: 20px; */
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 /* --- MAIN CONTENT AREA --- */
 .wp-main {
     margin-top: -80px;
     padding: 0 16px;
     position: relative;
     z-index: 1;
 }
 
 /* Modern Card Design - Glassmorphism */
 .wp-card {
     background: rgb(255 255 255 / 70%);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-radius: var(--card-radius);
     overflow: hidden;
     /* margin-bottom: 24px; */
     border: 1px solid rgba(255, 255, 255, 0.7);
 }
 
 .wp-card-header {
     display: flex;
     justify-content: center;
     align-items: center;
     padding-top: 28px;
 }
 
 /* Modern Asymmetric Icon Design */
 .wp-card-icon {
     width: 48px;
     height: 48px;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: linear-gradient(135deg, var(--primary), var(--primary-dark));
     color: white;
     font-size: 22px;
     position: relative;
     overflow: hidden;
 }
 
 .wp-card-title {
     font-size: 26px;
     font-weight: 700;
     color: var(--dark);
     margin: 0;
     margin-bottom: 18px;
 }
 
 .wp-card-body {}
 
 /* --- STEPS COMPONENT --- */
 .wp-steps {
     display: flex;
     flex-direction: column;
     gap: 30px;
 }
 
 .wp-step {
     position: relative;
     display: flex;
     gap: 20px;
 }
 
 .wp-step:not(:last-child)::after {
     content: '';
     position: absolute;
     top: 60px;
     right: 24px;
     bottom: -30px;
     width: 2px;
     background: linear-gradient(to bottom, var(--primary), transparent);
     z-index: 1;
 }
 
 /* Modern Asymmetric Number Design */
 .wp-step-number {
     width: 48px;
     height: 48px;
     background: linear-gradient(135deg, #43c795, #128c54);
     border-radius: 16px;
     color: white;
     font-weight: 700;
     font-size: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 5px 15px rgba(37, 211, 102, 0.2);
     position: relative;
     transform: rotate(-5deg);
     flex-shrink: 0;
 }
 
 .wp-step-content {
     flex: 1;
 }
 
 .wp-step-title {
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 0;
     color: var(--dark);
     margin-top: 0;
 }
 
 .wp-step-text {
     font-size: 15px;
     color: #555;
     margin: 8px 2px;
 }
 
 /* --- FEATURES COMPONENT --- */
 .wp-features {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
     padding-bottom: 16px;
 }
 
 /* Modern Feature Card with Border Accent */
 .wp-feature {
     padding: 14px;
     border-radius: 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     position: relative;
     overflow: hidden;
     background: linear-gradient(to bottom, #f9f9f9, #ffffff);
     box-shadow: 0px 0px 0px 2px #f4f4f4;
     border: 3px #fff solid;
 }
 
 /* Subtle Background Pattern */
 .wp-feature::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-size: 20px 20px;
     opacity: 0.2;
     z-index: 0;
 }
 
 .wp-feature-icon {
     width: 55px;
     height: 55px;
     margin-bottom: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     color: #43c794;
     position: relative;
     z-index: 1;
     background: #24d36621;
     border-radius: 100%;
 }
 
 .wp-feature-title {
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 8px;
     color: var(--dark);
     position: relative;
     z-index: 1;
     margin: 0;
 }
 
 .wp-feature-desc {
     font-size: 14px;
     color: #666;
     position: relative;
     z-index: 1;
     margin: 7px 0px;
 }
 
 /* --- CHAT DEMO COMPONENT --- */
 .wp-chat-demo {
     background: #ececec;
     border-radius: 20px;
     overflow: hidden;
     margin-bottom: 16px;
 }
 
 .wp-chat-header {
     background: #239468;
     padding: 16px;
     display: flex;
     align-items: center;
     gap: 12px;
     color: white;
 }
 
 .wp-chat-avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.2);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
 }
 
 .wp-chat-info h3 {
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 2px;
     margin: 0;
 }
 
 .wp-chat-info p {
     font-size: 13px;
     opacity: 0.8;
     display: flex;
     align-items: center;
     gap: 4px;
     margin: 0;
 }
 
 .wp-chat-status {
     width: 8px;
     height: 8px;
     background: var(--primary);
     border-radius: 50%;
     display: inline-block;
 }
 
 .wp-chat-messages {
     padding: 16px;
     display: flex;
     flex-direction: column;
     gap: 12px;
 }
 
 /* Modern Message Bubbles with Asymmetric Design */
 .wp-message {
     max-width: 80%;
     padding: 12px 16px;
     border-radius: 18px;
     position: relative;
     font-size: 14px;
     line-height: 1.5;
     animation: fadeIn 0.3s ease forwards;
     opacity: 0;
 }
 
 .wp-message.bot {
     align-self: flex-start;
     background: white;
     border-top-right-radius: 4px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
     animation-delay: 0.5s;
 }
 
 .wp-message.user {
     align-self: flex-end;
     background: var(--primary-light);
     border-top-left-radius: 4px;
     animation-delay: 1.5s;
 }
 
 .wp-message.bot:nth-of-type(3) {
     animation-delay: 2.5s;
 }
 
 .wp-message.user:nth-of-type(4) {
     animation-delay: 3.5s;
 }
 
 .wp-message.bot:nth-of-type(5) {
     animation-delay: 4.5s;
 }
 
 .wp-message-time {
     font-size: 11px;
     color: #999;
     text-align: left;
     margin-top: 4px;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }
 
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 /* --- TESTIMONIALS COMPONENT --- */
 .wp-testimonials {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }
 
 /* Modern Testimonial Card with Quote Design */
 .wp-testimonial {
     background: #ffffff;
     border-radius: 20px;
     padding: 24px;
     position: relative;
     border: 2px #f0f0f0 solid;
 }
 
 .wp-testimonial-text {
     font-size: 15px;
     line-height: 1.6;
     color: #555;
     margin-bottom: 16px;
     font-style: italic;
     margin-top: 0;
 }
 
 .wp-testimonial-author {
     display: flex;
     align-items: center;
     gap: 12px;
 }
 
 .wp-author-avatar {
     width: 40px;
     height: 40px;
     border-radius: 10px;
     background: #f0f0f0;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #999;
 }
 
 .wp-author-info h4 {
     font-size: 15px;
     font-weight: 600;
     color: var(--dark);
     margin: 0;
 }
 
 .wp-author-info p {
     font-size: 13px;
     color: #777;
     margin: 0;
 }
 
 /* --- CTA SECTION --- */
 .wp-cta {
     background: white;
     border-radius: 20px;
     padding: 32px 24px;
     text-align: center;
     position: relative;
     overflow: hidden;
     margin-top: 2rem;
     margin-bottom: 7rem;
 }
 
 .wp-cta::before {
     content: '';
     position: absolute;
     top: -100px;
     right: -100px;
     width: 200px;
     height: 200px;
     background: rgba(37, 211, 102, 0.1);
     border-radius: 45% 55% 70% 30% / 30% 40% 60% 70%;
     z-index: 0;
 }
 
 .wp-cta::after {
     content: '';
     position: absolute;
     bottom: -80px;
     left: -80px;
     width: 160px;
     height: 160px;
     background: rgba(52, 183, 241, 0.1);
     border-radius: 65% 35% 50% 50% / 40% 60% 40% 60%;
     z-index: 0;
 }
 
 .wp-cta-content {
     position: relative;
     z-index: 1;
 }
 
 .wp-cta-title {
     font-size: 24px;
     font-weight: 800;
     margin-bottom: 16px;
     color: var(--dark);
     margin-top: 0;
 }
 
 .wp-cta-text {
     font-size: 16px;
     color: #555;
     margin-bottom: 24px;
     max-width: 300px;
     margin-left: auto;
     margin-right: auto;
 }
 
 .wp-cta-button {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: linear-gradient(135deg, var(--primary), var(--primary-dark));
     color: white;
     font-weight: 700;
     padding: 14px 28px;
     border-radius: var(--btn-radius);
     border: none;
     font-size: 18px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
     transition: all 0.3s ease;
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
 }
 
 .wp-cta-button::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
     z-index: 1;
 }
 
 .wp-float-button {
     position: fixed;
     bottom: 20px;
     left: 20px;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--primary), var(--primary-dark));
     color: white;
     font-size: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
     z-index: 100;
     opacity: 0;
     transform: scale(0);
     transition: all 0.3s ease;
     cursor: pointer;
 }
 
 .wp-float-button.visible {
     opacity: 1;
     transform: scale(1);
 }
 
 /* Pulse animation */
 .wp-float-button::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background: var(--primary);
     z-index: -1;
     animation: pulse-animation 2s infinite;
 }
 
 @keyframes pulse-animation {
     0% {
         box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
     }
 
     70% {
         box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
     }
 
     100% {
         box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
     }
 }
 
 .wp-card-features {
     padding: 20px;
     padding-top: 0;
 }
 
 .wp-card-header.wp-works {
     padding-top: 16px;
 }
 
 .ultra-banner {
     position: relative;
     display: flex;
     align-items: center;
     padding: 12px 14px;
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 12px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
     overflow: hidden;
     border: 1px solid rgba(255, 255, 255, 0.7);
     margin-bottom: 1rem;
     margin: 0px 4px 1rem;
 }
 
 .ultra-banner::before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     height: 100%;
     width: 3px;
     background: linear-gradient(to bottom, #25D366, #128C7E);
     border-radius: 3px;
 }
 
 .ultra-banner::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at bottom right, rgba(37, 211, 102, 0.08), transparent 70%);
     z-index: 0;
 }
 
 .ultra-icon {
     position: relative;
     z-index: 1;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 8px;
     margin-left: 12px;
     background: linear-gradient(120deg, #25D366, #075E54);
     color: white;
     flex-shrink: 0;
 }
 
 .ultra-icon i {
     font-size: 24px;
 }
 
 .ultra-content {
     position: relative;
     z-index: 1;
     flex: 1;
 }
 
 .ultra-title {
     font-size: 18px;
     font-weight: 700;
     color: #222;
     margin-bottom: 3px;
     display: flex;
     align-items: center;
     gap: 8px;
     letter-spacing: -0.2px;
 }
 
 .ultra-badge {
     font-size: 14px;
     font-weight: 500;
     background: linear-gradient(120deg, #25D366, #128C7E);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     padding: 2px 0;
 }
 
 .ultra-text {
     font-size: 14px;
     color: #666;
     font-weight: 400;
     margin-bottom: 0;
     line-height: 1.3;
     max-width: 220px;
     margin-top: 0;
 }
 
 .ultra-action {
     position: relative;
     z-index: 1;
     background: none;
     border: none;
     padding: 0;
     color: #128C7E;
     font-weight: 500;
     font-size: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     transition: all 0.2s ease;
     cursor: pointer;
     margin-right: auto;
 }
 
 .ultra-action:hover {
     background: rgba(37, 211, 102, 0.08);
 }
 
 .cp_widgets_master {
     display: flex;
     gap: 12px;
 }
 
 .cp_widgets_item {
     flex: 1;
     background-color: white;
     border-radius: 22px;
     padding: 10px 20px;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     align-items: center;
     border: 1.5px solid #dadada;
 }
 
 .cp_widgets_item.active {
     border-color: #343434;
 }
 
 .cp_widgets_icon_wrapper {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     background-color: #eeeeee94;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 8px;
 }
 
 .cp_widgets_icon {
     font-size: 18px;
     color: #343434;
 }
 
 .cp_widgets_title {
     font-size: 18px;
     font-weight: bold;
     margin-bottom: 5px;
     text-align: center;
 }
 
 .cp_widgets_description {
     font-size: 14px;
     color: #666;
     text-align: center;
 }
 
 .cp_checkbox_container {
     display: flex;
     align-items: center;
     cursor: pointer;
     user-select: none;
     margin-bottom: 1rem;
     padding: 5px;
 }
 
 .cp_checkbox_wrapper {
     position: relative;
     width: 22px;
     height: 22px;
     margin-left: 5px;
     flex-shrink: 0;
 }
 
 .cp_checkbox {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
 }
 
 .cp_checkbox_mark {
     position: absolute;
     top: 0;
     left: 0;
     height: 22px;
     width: 22px;
     background-color: white;
     border-radius: 6px;
     border: 1.5px solid #dadada;
     transition: all 0.2s ease;
 }
 
 .cp_checkbox:checked~.cp_checkbox_mark {
     background-color: #343434;
     border-color: #343434;
 }
 
 .cp_checkbox_mark:after {
     content: "";
     position: absolute;
     display: none;
     left: 6px;
     top: 2px;
     width: 5px;
     height: 10px;
     border: solid white;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }
 
 .cp_checkbox:checked~.cp_checkbox_mark:after {
     display: block;
 }
 
 .cp_checkbox_label {
     font-size: 16px;
     color: #333;
     font-weight: 450;
 }
 
 .cp_customers_container {
     margin: 20px 0;
     max-width: 100%;
 }
 
 .cp_customers_table {
     border: 1px solid #f0f0f0;
     border-radius: 10px;
     overflow: hidden;
     width: 100%;
     background: white;
 }
 
 .cp_customers_table_header {
     background-color: transparent;
     padding: 16px 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
 
 .cp_customers_header_title {
     font-size: 16px;
     font-weight: 600;
     color: #333;
 }
 
 .cp_customers_search {
     position: relative;
     flex: 1;
     max-width: 300px;
     margin-right: 15px;
 }
 
 .cp_customers_search input {
     width: 100%;
     padding: 10px 40px 10px 12px;
     border: 1.5px solid #dadada;
     border-radius: 18px;
     font-size: 14px;
     outline: none;
     transition: border-color 0.2s;
     background-color: white;
 }
 
 .cp_customers_search input:focus {
     border-color: #343434;
 }
 
 .cp_customers_search_icon {
     position: absolute;
     right: 12px;
     top: 50%;
     transform: translateY(-50%);
     color: #666;
 }
 
 .cp_customers_list {
     max-height: 350px;
     overflow-y: auto;
     background: linear-gradient(145deg, #ffffff, #f8fafc);
 }
 
 .cp_customers_item {
     display: flex;
     align-items: center;
     padding: 12px 14px;
     border-bottom: 1px solid #eee;
     transition: all 0.2s;
 }
 
 .cp_customers_item:last-child {
     border-bottom: none;
 }
 
 .cp_customers_checkbox {
     margin-left: 15px;
     width: 20px;
     height: 20px;
     position: relative;
     cursor: pointer;
     pointer-events: none;
 }
 
 .cp_customers_checkbox input {
     opacity: 0;
     width: 0;
     height: 0;
     position: absolute;
 }
 
 .cp_customers_checkmark {
     position: absolute;
     top: 0;
     left: 0;
     width: 20px;
     height: 20px;
     border-radius: 6px;
     border: 1.5px solid #dadada;
     transition: all 0.2s;
     background-color: white;
 }
 
 .cp_customers_checkbox input:checked~.cp_customers_checkmark {
     background-color: #343434;
     border-color: #343434;
 }
 
 .cp_customers_checkmark:after {
     content: "";
     position: absolute;
     display: none;
     left: 5px;
     top: 1px;
     width: 5px;
     height: 10px;
     border: solid white;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }
 
 .cp_customers_checkbox input:checked~.cp_customers_checkmark:after {
     display: block;
 }
 
 .cp_customers_details {
     flex: 1;
 }
 
 .cp_customers_name {
     font-size: 16px;
     font-weight: 500;
     margin-bottom: 4px;
     color: #333;
 }
 
 .cp_customers_phone {
     color: #666;
     font-size: 14px;
     display: flex;
     align-items: center;
     margin-bottom: 2px;
 }
 
 .cp_customers_phone i {
     font-size: 12px;
     margin-left: 5px;
 }
 
 .cp_customers_date {
     color: #343434;
     font-size: 14px;
     padding: 0px 12px;
     border-radius: 100px;
     white-space: nowrap;
     display: flex;
     align-items: center;
     gap: 5px;
     margin-right: auto;
 }
 
 .cp_customers_date i {
     font-size: 12px;
     color: #666;
 }
 
 .cp_customers_footer {
     background-color: transparent;
     padding: 12px 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
 .cp_customers_counter {
     font-size: 16px;
     color: #343434;
 }
 
 .cp_customers_actions {
     display: flex;
     gap: 10px;
 }
 
 .cp_customers_action {
     background: none;
     border: none;
     color: #343434;
     font-size: 16px;
     cursor: pointer;
     border-radius: 16px;
     transition: all 0.2s;
     font-weight: 500;
 }
 
 .cp_widgets_icon_wrapper.purple {
     background: rgb(211 105 212 / 15%);
 }
 
 .cp_widgets_icon_wrapper.purple i {
     color: rgb(211 105 212);
 }
 
 .cp_widgets_icon_wrapper.blue {
     background: rgb(86 130 246 / 15%);
 }
 
 .cp_widgets_icon_wrapper.blue i {
     color: rgb(86 130 246);
 }
 
 .badge {
     padding: 2px 8px;
     border-radius: 5px;
     font-size: 16px;
 }
 
 .badge.warning {
     background: rgb(255 171 54 / 10%);
     color: rgb(189 126 38);
 }
 
 .badge.success {
     background: rgb(101 255 54 / 10%);
     color: rgb(34 168 58);
 }
 
 /* Tutorials */
 .tutorial-progress-circle {
     position: fixed;
     bottom: 50%;
     left: 50%;
     transform: translate(-50%, 50%);
     width: 70px !important;
     height: 70px !important;
     border-radius: 50%;
     background-color: rgb(255 255 255 / 70%);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.05);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 999;
     cursor: pointer;
     transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
     animation: appear 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
     backdrop-filter: blur(6px);
 }
 
 @keyframes appear {
     0% {
         transform: translate(-50%, 50%) scale(0.5);
         opacity: 0;
     }
 
     100% {
         transform: translate(-50%, 50%) scale(1);
         opacity: 1;
     }
 }
 
 .tutorial-progress-circle.moved {
     left: 16px;
     bottom: 100px;
     transform: none;
     width: 70px !important;
     height: 70px !important;
     opacity: 1;
     animation: pulse 2s infinite;
 }
 
 .tutorial-progress-circle .progress-ring-container {
     position: absolute;
     width: 100%;
     height: 100%;
 }
 
 .tutorial-progress-ring-bg {
     fill: none;
     stroke: #f0f0f0;
     stroke-width: 8;
 }
 
 .tutorial-progress-ring {
     fill: none;
     stroke: #4A90E2;
     stroke-width: 8;
     transition: stroke-dashoffset 0.8s ease;
     transform: rotate(-90deg);
     transform-origin: center;
     stroke-linecap: round;
 }
 
 .tutorial-progress-text {
     font-size: 18px;
     font-weight: bold;
     color: rgb(75 144 226);
     z-index: 2;
     transition: opacity 0.4s ease;
 }
 
 .tutorial-icon {
     position: absolute;
     font-size: 24px;
     color: rgb(75 144 226);
     opacity: 0;
     transition: opacity 0.4s ease;
 }
 
 .tutorial-progress-circle.moved .tutorial-icon {
     opacity: 1;
 }
 
 .tutorial-progress-circle.moved .tutorial-progress-text {
     opacity: 0;
 }
 
 /* אנימציית פולס כשמסיימים את המדריך */
 @keyframes pulse {
     0% {
         box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.4);
     }
 
     70% {
         box-shadow: 0 0 0 15px rgba(74, 144, 226, 0);
     }
 
     100% {
         box-shadow: 0 0 0 0 rgba(74, 144, 226, 0);
     }
 }
 
 .tutorial-progress-circle.completed {
     box-shadow: 0 8px 15px rgba(74, 144, 226, 0.25);
 }
 
 @keyframes spin3D {
     0% {
         transform: perspective(800px) rotateY(0);
     }
 
     50% {
         transform: perspective(800px) rotateY(180deg);
     }
 
     100% {
         transform: perspective(800px) rotateY(360deg);
     }
 }
 
 .tutorial-progress-circle.spin-3d {
     transform-style: preserve-3d;
     backface-visibility: visible;
     animation: spin3D 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
     animation-delay: 0.1s;
 }
 
 /* מוודאים שהאנימציה לא תשנה את המיקום כשהעיגול בפינה */
 .tutorial-progress-circle.moved.spin-3d {
     animation: spin3D 1s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
     transform-origin: center center;
     left: 16px;
     bottom: 100px;
 }
 
 .tutorials-list-content {
     background-color: white;
     border-radius: 20px;
     padding: 25px;
     overflow-y: auto;
     position: relative;
     padding-top: 0;
     padding-bottom: 0;
 }
 
 
 .tutorials-list-content h3 {
     margin-top: 0;
     margin-bottom: 15px;
     color: #333;
     text-align: center;
     font-size: 22px;
     font-weight: 600;
 }
 
 .help-message {
     text-align: center;
     padding-bottom: 20px;
     color: #555;
     font-size: 15px;
     line-height: 1.5;
 }
 
 .tutorials-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .tutorials-list li {
     display: flex;
     align-items: center;
     padding: 16px 18px;
     border-radius: 16px;
     margin-bottom: 12px;
     background-color: #f9f9f9;
     transition: all 0.2s ease;
     cursor: pointer;
     box-shadow: 0 0px 0px 2px rgb(229 229 229);
     border: 4px #fff solid;
 }
 
 .tutorials-list li.completed {
     box-shadow: 0 0px 0px 2px rgb(75 144 226);
     background-color: #f0f8ff;
 }
 
 .tutorials-list li i {
     margin-left: 15px;
     font-size: 20px;
     color: #aaa;
 }
 
 .tutorials-list li.completed i {
     color: #4A90E2;
 }
 
 .tutorials-list li span {
     font-size: 16px;
     font-weight: 500;
 }
 
 .separator {
     display: flex;
     align-items: center;
     text-align: center;
     margin: 20px 0;
     color: #888;
     font-size: 14px;
 }
 
 .separator::before,
 .separator::after {
     content: '';
     flex: 1;
     border-bottom: 1px solid #eee;
 }
 
 .separator::before {
     margin-left: 10px;
 }
 
 .separator::after {
     margin-right: 10px;
 }
 
 .schedule-call {
     background: #343434;
     color: white;
     border: none;
     border-radius: 12px;
     padding: 14px 20px;
     font-size: 17px;
     font-weight: 500;
     width: 100%;
     margin-top: 10px;
     cursor: pointer;
     transition: all 0.2s ease;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 15px rgba(74, 144, 226, 0.2);
     font-family: "Rubik", sans-serif;
     letter-spacing: -0.5px;
 }
 
 .schedule-call i {
     margin-left: 10px;
     font-size: 20px;
 }
 
 .tutorials-list-close {
     position: absolute;
     top: 0;
     left: 15px;
     background: rgba(0, 0, 0, 0.05);
     border: none;
     font-size: 20px;
     cursor: pointer;
     color: #666;
     transition: all 0.2s ease;
     width: 28px;
     height: 28px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .tutorials-list-close:hover {
     background: rgba(0, 0, 0, 0.1);
     color: #333;
 }
 
 button.tutorials-list-close i {
     margin-left: 0;
 }
 
 .tutorials-list-close i {
     font-size: 18px;
 }
 
 /* End Tutorials */