@font-face {font-family:'Nazanin';src:url('/font/Nazanin.ttf');}
@font-face {font-family:'Koodak';src:url('/font/Koodak.ttf');}
@font-face {font-family:'Poppins';src:url('/font/Poppins.ttf');}

:root {
    --bgClr: #fbfcff;
    --lineBlack1Clr:#333;
    --lineBlack1ClrOp1:#111111ad;

    --blackClrOp1 : #0000003b;
    --blackClrOp2 : #221f1f2d;
    --blackClrOp3 : #00000023;
    --blackClrOp4 : #00000015;
    --blackClrOp5 : #00000010;
    --blackClrOp6 : #00000007;
    --blackClrOp7 : #00000005;
    --txtPrimaryClr:#222;
    --txtSecendaryClr:#3f8ccf;
    --txtSecendaryDarkerClr:#3377b3;
    --txtSecendaryDarkerClr2:#225a8a;
    --txtSecendaryClrOp1:#368bd665;
    --txtSecendaryClrOp2:#368bd62d;
    --txtSecendaryClrOp3:#368bd618;
    --tomatoClr:#ff836d;
    --tomatoOp1Clr:rgba(255, 99, 71, 0.582);
    --tomatoOp2Clr:rgba(255, 99, 71, 0.329);
    --tomatoOp3Clr:rgba(255, 99, 71, 0.123);
    --tomatoOp4Clr:rgba(255, 99, 71, 0.09);
    --redClr :#ef4040;
    --greenClr:#49b849;
    --greenClrOp1:#179217ab;
    --txt3Clr:#333;
    --txt5Clr:#555;
    --txt7Clr:#777;
    --txt9Clr:#999;
    --txtAClr:#aaa;
    --lightGrey : rgb(243, 243, 243);
    --lightGrey2 : rgb(223, 223, 223);
    --greyClr1:#dfdfdf;
    --greyClr2:#f6f6f6;
    --textSize1:1.4em;
    --textSize11:1.2em;
    --textSize12:1.05em;
    --textSize2:.98em;
    --textSize22:.94em;
    --textSize3:.88em;
}

body,
html {
    margin: 0;
    padding: 0;
    background-color: var(--bgClr);
    scroll-behavior: smooth;
    min-width: 300px;
}
a{
    text-decoration: none !important;
}
img{
    margin: 0;
}
button{
    outline: none;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: unset;
}
*{
    padding: 0;
    margin: 0;
    -webkit-user-select: none;
    -ms-user-select: none; 
    user-select: none; 
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}
hr{
    height: 0px;
    border: .5px solid var(--blackClrOp4);
    outline: none;
    background-color: transparent;
    margin: 10px 0;
}
/* ---------------------- fonts */
.faFont{
    font-family: "Koodak",Arial, Helvetica, sans-serif !important;
    font-weight: 500 !important;
}
.enFont{
    font-family: "Poppins",Arial, Helvetica, sans-serif !important;
}
.titrFont{
    font-family: "Nazanin",Arial, Helvetica, sans-serif !important;
    font-weight: 900 !important;
}
.textSize1{
    font-size: var(--textSize1) !important;
}
.textSize11{
    font-size: var(--textSize11) !important;
}
.textSize12{
    font-size: var(--textSize12) !important;
}

.textSize2{
    font-size: var(--textSize2) !important;
}
.textSize21{
    font-size: .92em !important;
}
.textSize3{
    font-size: var(--textSize3) !important;
}
.textPrimaryClr{
    color: var(--txtPrimaryClr);
}
.textClrSecendary{
    color: var(--txtSecendaryClr);
}
.textClr3{
    color: var(--txt3Clr);
}
.textClr5{
    color: var(--txt5Clr);
}
.textClr7{
    color: var(--txt7Clr);
}
.textClr9{
    color: var(--txt9Clr);
}
.textClrA{
    color: var(--txtAClr);
}
.mar5{
    margin-top: 5px;
}
.mar10{
    margin-top: 10px;
}
.mar15{
    margin-top: 15px;
}
.mar20{
    margin-top: 20px;
}
.mar25{
    margin-top: 25px;
}
.rtl{
    direction: rtl;
}
.ltr{
    direction: ltr;
}
.copyableText {
    -webkit-user-select: text !important;
    -ms-user-select: text !important; 
    user-select: text !important;
}
.justifyText{
    text-align: justify !important;
}
/* ----------------------- flex */
.flex{
    display: -webkit-flex;
    display: flex;
}
.activeFlex{
    display: -webkit-flex !important;
    display: flex !important;
}
.flexCol{
    flex-direction: column;
}
.flexRowBetween{
    justify-content: space-between;
    align-items: center;
}
.flexCenter{
    align-items: center;
    justify-content: center;
}
.flexAlignCenter{
    align-items: center;
}
.gap10{
    gap: 10px;
}
.gap15{
    gap: 15px;
}
.gap20{
    gap: 20px;
}
.gap25{
    gap: 25px;
}
.gap7{
    gap: 7px;
}
.gap5{
    gap: 5px;
}
/* grid */
.grid{
    display: -ms-grid;
    display: -moz-grid;
    display: grid;
}
.activeGrid{
    display: -ms-grid !important;
    display: -moz-grid !important;
    display: grid !important;
}
/* hide */
.hideMenu{
    display: none;
}
.hide{
    display: none;
}
.disabled{
    pointer-events: none;
    opacity: .4;
}
/* ----------------------- styles */
.hideText{
    color: transparent;
    font-size: 0;
}
.btn{
    background-color: var(--lightGrey);
    width: 32px;
    height: 32px;
    border-radius: 7px;
    transition: background-color .6s;
}
.btn:hover{
    background-color: var(--lightGrey2);
}
.clickBtn{
    background-color: transparent;
    border-radius: 5px;
    transition: background-color .6s;
}
.clickBtn:hover{
    background-color: var(--blackClrOp4);
}
.centerBg{
    background-repeat: no-repeat;
    background-position: center;
}
.cancelMenuBtn{
    background-color: var(--redClr);
    color: var(--bgClr);
    padding: 3px 15px ;
    border-radius: 7px;
}
.confirmMenuBtn{
    background-color: var(--greenClr);
    color: var(--bgClr);
    padding: 3px 15px ;
    border-radius: 7px;
}
.customInput{
    background-color: var(--lightGrey);
    outline: none;
    border: none;
    border-radius: 7px;
    background-repeat: no-repeat;
    height: 37px;
}
.customTextArea{
    background-color: var(--lightGrey);
    outline: none;
    border: none;
    border-radius: 7px;
    background-repeat: no-repeat;
    height: 150px;
    resize: none;
    padding: 10px;
}
.customSubmit{
    height: 37px;
    background-color: var(--txtSecendaryClr);
    border-radius: 7px;
    cursor: pointer;
    transition: background-color .6s;
    color: var(--bgClr);
}
.customSubmit:hover{
    background-color: var(--txtSecendaryDarkerClr);
}
.imageFit{
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}
.loadingText{
    display: -webkit-flex;
    display: flex;
    align-items: center;
    gap: 15px;
    direction: rtl;
}
.loadingText::before{
    width: 20px;
    height: 20px;
    content: "";
    border-radius: 50%;
    border-top: 3px solid var(--txt7Clr);
    border-bottom: 3px solid var(--txt7Clr);
    border-left: 3px solid var(--blackClrOp1);
    border-right: 3px solid var(--blackClrOp1);
    animation: rotate 1s linear infinite ;
}
.container{
    width: 94%;
    max-width: 600px;
    margin: 0 auto;
}
.radiusLink{
    padding: 5px 33px 5px 12px;
    border-radius: 20px;
    background-color: transparent;
    border: 1px solid var(--blackClrOp2);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: right 9px center;
    white-space: nowrap;
    transition: background-color .6s;
}
.radiusLink:hover{
    background-color: var(--blackClrOp5);
}
/* scrollbar */
.hideScrollBar::-webkit-scrollbar{
    display: none;
}
.hideScrollBar{
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}
.customScrollBar::-webkit-scrollbar {
    width: 7px;
}
.customScrollBar::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

.customScrollBar::-webkit-scrollbar-thumb {
    background: #aaa; 
}

.customScrollBar::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

.offText{
    background-color: var(--redClr);
    border-radius: 30px;
    padding: 0 25px 0 10px;
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-image: url("/src/percent.svg");
    width: fit-content;
    color: var(--bgClr);
}
.notExistText{
    position: relative;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: auto;
}
.notExistText span{
    height: 1.5px;
    position: absolute;
    left: 5%;
    width: 90%;
    background-color: var(--redClr);
    z-index: 5;
}
.offerContainer .notExistText p{
    background-color: var(--bgClr);
}
.notExistText p{
    z-index: 10;
    background-color: var(--greyClr2);
    width: fit-content;
    padding: 0 10px;
}
.seeLink{
    background-color: var(--txtSecendaryClr);
    color: var(--bgClr);
    border-radius: 7px;
    height: 32px;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    transition: background-color .6s;
}
.seeLink:hover{
    background-color: var(--txtSecendaryDarkerClr);
}
.fullLink{
    cursor: default !important;
}
.seeAll{
    background-position: left 5px center;
    background-repeat: no-repeat;
    background-image: url("/src/leftArrow.svg");
    background-size: 16px;
    padding-left: 25px;
}
.horizontalList{
    overflow-x: auto;
    direction: rtl;
    margin-top: 20px;
    flex-wrap: nowrap;
}
.loadingItem{
    min-width: 180px;
    width: 180px;
    height: 230px;
    background-color: var(--blackClrOp4);
    border-radius: 7px;
}
.loadingDiv{
    position: relative;
}
.loadingDiv::after{
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 100%;
    background-color: var(--bgClr);
    opacity: .6;
    content: "";
    animation: loading .9s linear infinite reverse;
}
.productList{
    display: none;
}
.productItemDiv{
    flex-direction: column;
    padding: 10px;
    min-width: 180px;
    width: 180px;
    background-color: var(--greyClr2);
    border-radius: 7px;
}
.productItemImage{
    border-radius: 7px;
    border: 1px solid var(--blackClrOp4);
    aspect-ratio: 1/1;
}
.productPriceDiv{
    flex-direction: column;
    position: relative;
    height: 40px;
    justify-content: center;
    margin-top: 5px;
}
.productItemOffPrice,.productItemPrice{
    text-align: left;
}
.productItemPrice{
    text-decoration: line-through;
    text-decoration-color: var(--tomatoOp1Clr);
    padding-left: 33px;
}
.productItemOffText{
    position: absolute;
    right: 0;
    top: 0;
}
/* modal */
.modalContainer{
    position: fixed;
    z-index: 990;
    width: 100%;
    left: 0;
    top: 70px;
    display: none;
}
.modalDiv{
    width: 94%;
    max-width: 600px;
    background-color: var(--bgClr);
    border: 1px solid var(--blackClrOp2);
    padding: 10px;
    border-radius: 7px;
    box-shadow: 0 0 15px var(--blackClrOp1);
    animation: showModal 4s 0s ;
}
.modalMsg{
    padding-right: 30px;
    background-image: url("/src/alertMessage.svg");
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: right 5px top 5px;
}
/* paginationList */
.paginationList{
    gap: 5px;
    width: fit-content;
    margin: 30px auto 0;
}
.pageBtn{
    width: 35px;
    height: 35px;
    background-color: var(--blackClrOp7);
    border-radius: 50%;
    transition: background-color .6s;
    border: 1px solid var(--blackClrOp4);
}
.pageBtn:hover{
    background-color: var(--blackClrOp3);
}
.goBack{
    background-image: url("/src/leftArrow.svg");
    background-size: 19px;
    background-repeat: no-repeat;
    background-position: center;
}
.goNext{
    background-image: url("/src/rightArrow.svg");
    background-size: 19px;
    background-repeat: no-repeat;
    background-position: center;
}
.currentPage{
    background-color: var(--txtSecendaryDarkerClr) !important;
    color: var(--bgClr) !important;
    border: none !important;
}
.noBtn{
    background-color: var(--blackClrOp7) !important;
}
/* resultListContainer */
.noResultDiv{
    max-width: 450px;
    margin: 10px auto 80px;
    align-items: center;
}
.noResultImg{
    height: 300px;
    width: 300px;
    aspect-ratio: 1/1;
}
.noResultText{
    margin-top: -20px;
}
.backToMain{
    width: fit-content;
    padding: 7px 75px 7px 50px;
    margin-top: 20px;
    background-color: var(--blackClrOp4);
    border-radius: 7px;
    background-image: url("/src/link.svg");
    background-position: right 45px center;
    background-repeat: no-repeat;
    background-size: 20px;
    transition: border .6s;
    border: 1px dashed var(--blackClrOp2);
}
.backToMain:hover{
    border: 1px dashed #222;
}
.backBtn{
    padding: 5px 18px 5px 35px;
    background-position: left 5px center;
    background-repeat: no-repeat;
    background-size: 16px;
    background-image: url("/src/back.svg");
    width: fit-content;
    border-radius: 7px;
    background-color: var(--blackClrOp5);
    transition: background-color .6s;
    align-self: flex-end;
}
.backBtn:hover{
    background-color: var(--blackClrOp4);
}
.printBtn{
    background-image: url("/src/printer.svg");
    background-position: center;
    background-size: 17px;
    background-repeat: no-repeat;
}
/* chatBoxContainer */
.chatBoxContainer{
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: var(--bgClr);
    grid-template-rows: 50px 1fr 100px;
    grid-area: 5px;
    z-index: 986;
    top: 0;
    left: 0;
    padding: 0 10px;
    display: none;
    gap: 10px;
}
.chatBoxHeaderDiv{
    border-bottom: 1px solid var(--blackClrOp4);
}
.closeChatBox{
    background-image: url("/src/close.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
}
.chatBoxTitle{
    padding-right: 35px;
    background-image: url("/src/user.svg");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 18px;
}
.chatList{
    overflow: auto;
    gap: 15px;
    padding:20px 0 20px 10px;
}
.loadMore{
    border-radius: 5px;
    padding: 0 35px 0 10px;
    min-height: 35px;
    width: fit-content;
    background-color: var(--txtSecendaryClrOp3);
    background-image: url("/src/add.svg");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 18px;
    align-self: center;
    transition: background-color .6s;
}
.loadMore.loading{
    color: transparent;
    background-image: none;
    position: relative;
    direction: ltr;
}
.loading:after{
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border-top: 2px solid var(--blackClrOp1);
    border-bottom: 2px solid var(--blackClrOp1);
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    animation: rotate .6s linear infinite;
    position: absolute;
    left: calc( 50% - 10px );
    top: 8px;
}
.loadMore:hover{
    background-color: var(--txtSecendaryClrOp2);
}
.chatItem{
    width: 65%;
    padding: 15px 15px 5px 15px;
    border-radius: 10px;
}
.yourChat{
    align-self: flex-end;
    background-color: var(--txtSecendaryClrOp3);
    border-radius: 12px 12px 12px 0;
}
.myChat{
    background-color: var(--blackClrOp5);
    border-radius: 12px 12px 0 12px;
}
.timeItem{
    direction: ltr;
    border-top: 1px solid var(--blackClrOp4);
    padding-top: 10px;
    margin-top: 10px;
}
.chatInpuDiv{
    margin-bottom: 10px;
    position: relative;
}
.chatInput{
    background-color: transparent;
    background-color: var(--blackClrOp5);
    border: 1px solid var(--blackClrOp2);
    border-radius: 7px;
    height: 100%;
    padding: 15px 15px 15px 50px;
}
.chatSendBtn{
    position: absolute;
    left: 10px;
    top: 50%;
    background-image: url("/src/send.svg");
    background-repeat: no-repeat;
    background-position: left 45% top 53% ;
    background-size: 17px;
    width: 35px;
    height: 35px;
    transform: translateY(-50%);
    transition: background-color .6s;
    background-color: transparent;
    border-radius: 50%;
}
.chatSendBtn:hover{
    background-color: var(--blackClrOp4);
}
.sending{
    pointer-events: none;
    background-image: none;
    background-color: var(--blackClrOp5);
}
.sending:after{
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border-top: 2px solid var(--blackClrOp1);
    border-bottom: 2px solid var(--blackClrOp1);
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    animation: rotate .6s linear infinite;
    position: absolute;
    left: 8px;
    top: 8px;
}
@keyframes showModal {
    0%{
        opacity: 0;
        transform: translateY(80px);
    }
    20%{
        opacity: 1;
        transform: translateY(0);
    }
    90%{
        opacity: 1;
        transform: translateY(0);
    }
    100%{
        opacity: 0;
        transform: translateY(80px);
    }
}
@media screen and (min-width:769px) {
    
    .container{
        max-width: 900px;
    }
    .seeLink{
        height: 35px;
    }
    .chatBoxContainer{
        position: fixed;
        left: 15px;
        top: unset;
        bottom: 15px;
        max-width: 430px;
        max-height: 94vh;
        border-radius: 7px;
        box-shadow: 0 0 15px var(--blackClrOp1);
    }
}
@media screen and (min-width:968px) {

    .container{
        max-width: 1200px;
    }
}
/* animations */
@keyframes loading{
    from{
        -o-transform:  translateX(0);
        -ms-transform:  translateX(0);
        -webkit-transform:  translateX(0);
        transform:  translateX(0);
    }
    to{
        -o-transform:  translateX(-1500px);
        -ms-transform:  translateX(-1500px);
        -webkit-transform:  translateX(-1500px);
        transform:  translateX(-1500px);
    }
}
@keyframes rotate{
    from{
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to{
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes toTop{
    from{
        -o-transform: translateY(100px);
        -ms-transform: translateY(100px);
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
    to{
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes fadein{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}