@import url(../font/fonts-face.css);

:root {
    --bg-main: #fff;
    --bg-primary: #3aa6b9;
    --bg-primary-rgb: 58, 166, 185;
    --bg-light-primary: #c1ece4;
    --bg-hover: #365486;
    --bg-disabled: #e3e3e36a;
    --bg-gray: #dee2e6;
    --font-family: "IRANSans(FaNum)";
    --font-family-2: "Mikhak";
    --font-family-2-bold: "Mikhak-bold";
    --font-family-2-light: "Mikhak-light";
    --bs-primary: var(--bg-primary);
    --swiper-navigation-size: 28px;
    --swiper-theme-color: var(--bg-primary);
    --bg-main-light-rgba: rgba(58, 166, 185, 0.30);
    --bg-primary-60: rgba(58, 166, 185, 0.60);
    --bg-success:#20c200;
    --bg-light-success: #8eff8e;
    --bg-danger: #f52626;
    --bg-light-danger: #f04747;

    --bs-primary-rgb: var(--bg-primary-rgb);
    --bs-primary: var(--bg-primary) !important;
    --swiper-navigation-size: 16px;
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family), sans-serif !important;
}
header{
    z-index: 1000;
}
/* BG */
.bg-main {
    background-color: var(--bg-main) !important;
}

.bg-primary {
    background-color: var(--bg-primary) !important;
}

.bg-dark-primary {
    background-color: var(--bg-hover) !important;
}

.bg-light-primary {
    background-color: var(--bg-light-primary) !important;
}

.bg-cm-gray {
    background-color: var(--bg-disabled);
}

.bg-cm-success{
    background-color: var(--bg-success);
}
.bg-cm-light-success{
    background-color: var(--bg-light-success);
}

.bg-cm-danger{
    background-color: var(--bg-danger);
}
.bg-cm-light-danger{
    background-color: var(--bg-light-danger);
}

.bg-cm-gradient {
    background: #66bfbf;
    background: -webkit-linear-gradient(200deg, var(--bg-primary) 0%, var(--bg-light-primary) 100%);
    background: linear-gradient(200deg, var(--bg-primary) 0%, var(--bg-light-primary) 100%);
}

.bg-glass {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(3.1px);
    -webkit-backdrop-filter: blur(3.1px);
    /* border: 1px solid rgba(255, 255, 255, 0.23); */
    border: 0;

}

.fill-primary path {
    fill: var(--bg-primary);
}

.fill-cm-primary {
    transition: 0.3s;
    fill: var(--bg-primary);
}

.fill-use-primary use {
    fill: var(--bg-primary);
}

.fill-cm-main {
    fill: var(--bg-main);
}

/* text */
.text-main {
    color: var(--bg-main) !important;
}

.text-primary {
    color: var(--bg-primary) !important;
}

.text-light-primary {
    color: var(--bg-light-primary) !important;
}

.text-dark-primary {
    color: var(--bg-hover) !important;
}

/* width & height */
.w-fit-content {
    width: fit-content;
}
.max-w-480pc{
    max-width: 480px;
}
.w-320px {
    width: 320px;
}

.w-256px {
    width: 256px;
}

.w-128px {
    width: 128px;
}

.w-84px{
    width: 84px;
}

.w-64px {
    width: 64px;
}

.w-48px {
    width: 48px;
}

.w-32px {
    width: 32px;
}

.w-28px {
    width: 28px;
}

.h-256px {
    height: 256px;
}

.h-216px {
    height: 216px;
}

.h-132px {
    height: 132px;
}

.h-128px {
    height: 128px;
}

.h-64px {
    height: 64px;
}

.h-48px {
    height: 48px;
}

.h-32px {
    height: 32px;
}

.h-28px {
    height: 28px;
}


/* font size & font family */
.ff-1 {
    font-family: var(--font-family);
}

.ff-2 {
    font-family: var(--font-family-2);
}

.ff-3 {
    font-family: var(--font-family-2-bold);
}

.fs-5rem {
    font-size: 5rem;
}

.fs-14px {
    font-size: 14px;
}

.fs-12px {
    font-size: 12px;
}


/* margin & padding */
.pt-32px {
    padding-top: 32px;
}
.mt-64px{
    margin-top: 64px;
}
.mt-24px{
    margin-top: 24px;
}


/* positions */
.top-n64px {
    top: -64px;
}

.top-12px {
    top: 12px;
}

.top-n32px {
    top: -32px;
}

.right-8px {
    right: 8px;
}

.right-0px {
    right: 0px !important;
}

.left-0px {
    left: 0px !important;
}
.left-8px {
    left: 8px !important;
}

/* margin and padding */
.mt-64px {
    margin-top: 64px;
}
.mt-1-75rem{
    margin-top: 1.75rem;
}

.pt-64px {
    padding-top: 64px !important;
}

/* custom css */
.flex-ac {
    display: flex;
    justify-content: center;
    align-items: center;
}

.title-border {
    width: fit-content;
    border-bottom: 4px solid var(--bg-primary);
    border-radius: 8px;
}

.comment p::after {
    content: "\201C";
    display: inline;
    color: #999;
}

.comment p::before {
    content: "\201D";
    display: inline;
    color: #999;
}

.shadow-cm {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

.plan-card {
    padding: 64px 12px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.plan-card.active {
    border: 2px solid var(--bg-primary);
}

.plan-card .discount-ribbon {
    width: 110px;
    height: 110px;
    overflow: hidden;
    position: absolute;
    top: -10px;
    left: -10px;
}

.plan-card .discount-ribbon::before,
.plan-card .discount-ribbon::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid var(--bg-hover);
    border-top-color: transparent;
    border-left-color: transparent;
}

.plan-card .discount-ribbon span {
    position: absolute;
    display: block;
    width: 176px;
    padding: 15px 0;
    background-color: var(--bg-primary);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    color: #fff;
    font: 700 18px/1 'Lato', sans-serif;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    text-transform: uppercase;
    text-align: center;
    right: -18px;
    top: 14px;
    transform: rotate(-45deg);
}

.plan-card .discount-ribbon::before {
    top: 0;
    right: 0;
}

.plan-card .discount-ribbon::after {
    bottom: 0;
    left: 0;
}


.border-radius-cm {
    border-radius: 35% 65% 25% 59% / 38% 25% 25% 21%;
}


.no-resize {
    resize: none !important;
}

.box-social {
    border-radius: 8px;
    transition: 0.3s;
    padding: 8px;
}

.box-social:hover {
    background-color: var(--bg-primary);
}

.box-social:hover .fill-cm-primary {
    fill: var(--bg-main);
}

/* custom bootstrap */
.form-select{
    height: 41px;
}
.form-select:focus{
    box-shadow: 0 0 0 .25rem var(--bg-main-light-rgba);
    border-color: var(--bg-primary);
}

.navbar {
    --bs-navbar-disabled-color: var(--bg-disabled);
    --bs-navbar-active-color: var(--bg-hover);
    --bs-navbar-hover-color: var(--bg-hover);
    --bs-navbar-color: var(--bg-main);
    --bs-navbar-brand-hover-color: var(--bg-hover);
    --bs-navbar-brand-color: var(--bg-main);
}

.btn-outline-main {
    color: var(--bg-main);
    border: 1px solid var(--bg-main);
    background-color: transparent;
}

.btn-outline-main:hover {
    color: var(--bg-primary);
    background-color: var(--bg-main);
}

.btn-outline-main-dark {
    color: var(--bg-main);
    border: 1px solid var(--bg-main);
    background-color: transparent;
}

.btn-outline-main-dark:hover {
    color: var(--bg-main);
    border: 1px solid var(--bg-hover);
    background-color: var(--bg-hover);
}

.btn-outline-cm-primary {
    color: var(--bg-primary);
    border: 1px solid var(--bg-primary);
    background-color: transparent;
}

.btn-outline-cm-primary:hover {
    color: var(--bg-main);
    border: 1px solid var(--bg-primary);
    background-color: var(--bg-primary);
}

.dropdown-item{
    color: var(--bg-primary);
}

.dropdown-item:hover{
    background-color: var(--bg-primary);
    color: var(--bg-main) !important;
}

.border-cm-primary {
    border-color: var(--bg-primary) !important;
}

.swiper-main-color {
    --swiper-theme-color: var(--bg-hover);
    --swiper-navigation-size: 16px;
}

.form-control:focus {
    box-shadow: 0 0 0 .25rem var(--bg-main-light-rgba);
    border-color: var(--bg-primary);
}
.faq-box{
    position: relative;
    padding-right: 2px;
}
.faq-box::before{
    content: "";
    display: block;
    width: 5px;
    height: 100%;
    position: absolute;
    background-color: var(--bg-primary);
    right: -12px;
    border-radius: 8px;
}

.accordion{

    --bs-accordion-active-color: var(--bg-primary) !important;
    --bs-accordion-btn-focus-border-color: var(--bg-light-primary) !important;
    --bs-accordion-active-bg: var(--bg-light-primary);
    --bs-accordion-btn-focus-box-shadow: none:
}
.accordion .accordion-button.collapsed .accordion-icon{
    color: var(--bg-primary);
}
.accordion .accordion-button .accordion-icon{
    color: var(--bg-primary);
    width: 18px;
    text-align: center;
}
label,input[type=radio]{
    cursor: pointer;
}

.form-check-input:checked{
    background-color: var(--bg-primary);
    border-color: var(--bg-primary);
}

/* ---------- login ---------- */
.login{
    width: 100%;
    height: 100vh;
    background-color: #fff;
    /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg fill-opacity='0.23'%3E%3Cpath fill='%23E0115F' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23787ed9' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%237f85e5' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23878df2' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%238E94FF' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%239ca1ff' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23aaadff' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23b7baff' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23c5c7ff' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23D2D4FF' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E"); */
    background-attachment: fixed;
    /* background-size: cover; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-box{
    background: var(--bg-primary-60);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    width: 300px;
    height: 500px;
}
.login-box .form-control {
    background-color: transparent;
    border: none;
    border-bottom: 3px solid var(--bg-main);
    border-radius: 0 !important;
    font-family: var(--font-family-2);
    color:var(--bg-main);
    transition: 0.3s;
}
.login-box .form-control::placeholder{
    color: var(--bg-main);
}
.login-box .form-control:focus{
    box-shadow: none !important;
    border: 0 !important;
    border-bottom: 3px solid var(--bg-hover) !important;
    transform: scale(1.05);
    outline: none !important;
}
.login .login-btn{
    background-color: var(--bg-main);
    color: var(--bg-primary);
    transition: 0.3s;
}
.login-box .login-btn:hover,.login-box .login-btn:active,.login-box .login-btn:focus{
    background-color: transparent;
    color: var(--bg-main);
    border: 1px solid var(--bg-main);
}
.login-box .register-btn:hover{
    color: var(--bg-disabled) !important;
}
.login-box .register-btn{
    font-size: 14px;
}
/* otp */
.opt-box{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.opt-box .otp-form-control{
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    border: 2px solid #fff;
    background-color: transparent;
    text-align: center;
    transition: all 0.3s;
    color: #fff;
}
.opt-box .otp-form-control:focus{
    outline: 0;
    transform: scale(1.2);
}
.opt-box ~ .otp-timer{
    cursor: pointer;
}
.opt-box ~ .otp-timer.disabled{
    color: #e1e1e1 !important;
    cursor: not-allowed;
}

.custom-radio-booking{
    width: 24px;
    height: 24px;
}

label:has(.custom-radio-booking:checked){
    border-color: var(--bg-primary) !important;
}

.days-list{
    padding: 16px 0px;
    display: flex;
    justify-content: start;
    margin: 0 auto;
    overflow-x: auto;
    flex-wrap: nowrap;
    max-width: 100%;
    scrollbar-width: thin;
}

.day-item{
    width: 68px;
    height: 68px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bg-gray);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: .2s;
    flex-shrink: 0;
    margin: 0 0 0 8px;
    position: relative;
}
@keyframes chose {
    0%   {scale: .5;}
    50% {scale: 1.2;}
    100% {scale: 1;}
}
@keyframes cant-chose {
    0%   {transform: translate(5px);border-color: var(--bg-not-accept);}
    25% {transform: translate(-5px);border-color: var(--bg-not-accept);}
    50%   {transform: translate(5px);border-color: var(--bg-not-accept);}
    75% {transform: translate(-5px);border-color: var(--bg-not-accept);}
    100% {transform: translate(0px);border-color: var(--bg-not-accept);}
}
.day-item.active{
    background-color: var(--bg-primary);
    color: #fff;
    animation: chose .5s;
    border: 1px solid var(--bg-primary);
}
.day-item.disabled{
    color: red;
}

.radio-day-item{
    opacity: 0;
    position: absolute;
    z-index: -1;
}

.day-item:has(.radio-day-item:checked){
    background-color: var(--bg-primary);
    color: #fff;
    animation: chose .5s;
    border: 1px solid var(--bg-primary);
}

label.time-item:has(.radio-time:checked){
    background-color: var(--bg-primary);
    color: #fff;
    animation: chose .5s;
    border: 1px solid var(--bg-primary);
}

.table-group-divider{
    border-top: transparent !important;
}

.loading{
    position: fixed;
    inset: 0 0 0 0;
    background-color: var(--bg-disabled);
    z-index: 10000;
}


/* dashboard */
.max-h-100vh{
    max-height: 100vh;
}
.sidebar{
    width: 280px;
    box-shadow: 10px 0px 10px black;
    height: calc(100vh - 74px);
}
.main{
    width: calc(100% - 280px);
    margin-right: auto;
    background-color: var(--bg-disabled) ;
    padding: 32px 0;
    overflow-y: auto;
    display: flex;
    height: calc(100vh - 74px);
}
.sidebar-content{
    width: 100%;
    height: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
}
.sidebar-link{
    color: rgb(60, 60, 60);
    padding: 8px;
    width: 100%;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.3s;
    margin-bottom: 4px;
}
.sidebar-link.active,.sidebar-link:hover{
    background: var(--bg-disabled);
}
.form-control::placeholder{
    color: var(--bg-gray);
    font-size: 14px;
}

.modal-login .opt-box .otp-form-control{
    border-color: var(--bg-primary);
    color: black;
    margin: 0 4px;
    border-radius: 12px;
    width: 56px ;
    height: 56px;
}
.modal-login .opt-box{
    justify-content: center;
}
.modal-login .otp-timer.disabled{
    color: #ccc !important;
}

.long-arrow-box.left::before{
    content: ' ';
    display: block;
    border: 1px solid var(--bg-primary);
    width: 100%;
    height: 1px;
}
.long-arrow-box.right::after{
    content: ' ';
    display: block;
    border: 1px solid var(--bg-primary);
    width: 100%;
    height: 1px;
}