/*------------*/
/*    core      */
/*------------*/

@font-face {
    src: url("/asset/fonts/YekanBakhFaNum-Regular.ttf");
    font-family: Yekan;
}

/*@font-face {*/
/*    src: url("/asset/fonts/Pinar-Regular.ttf");*/
/*    font-family: Pinar;*/
/*}*/

:root {
    /*--clrone: #BE3144;*/
    --clrone : rgb(255 0 76);
    --clrtwo: #22092C;
    --clrThree: rgb(255 255 255);
    --clrfour: #ffffff;
    --clrfive: hsl(2deg 50.42% 53.33%);
    --clrsix: #36e7a1;
    --clrseven: rgba(220, 219, 219, 0.66);
    --clreight: rgba(33, 154, 106, 0.69);


}






/* Define the scrollbar for all elements */
::-webkit-scrollbar {
    width: 0.1rem; /* Width of the scrollbar track */
    height: 0.3rem; /* Height of the scrollbar thumb */
}

/* Define the scrollbar track */
::-webkit-scrollbar-track {
    background-color: rgba(245, 245, 245, 0); /* Background color of the scrollbar track */
    border-radius: 0.3rem; /* Border radius of the scrollbar track */
}

/* Define the scrollbar thumb */
::-webkit-scrollbar-thumb {
    background-color: var(--clrone); /* Background color of the scrollbar thumb */
    border-radius: 0.3rem; /* Border radius of the scrollbar thumb */
}

body * {
    font-family: Yekan,Roboto,Calibri;


}
body {
    color: black;
    background-color: var(--clrseven);
}



/*.pinar {*/
/*    font-family: Pinar;*/
/*}*/

.yekan {
    font-family: Yekan;
}


.blank {
    height: 5rem;
}


/*------------*/
/*    typography      */
/*------------*/

.clronetext {
    color: var(--clrone);
}

.clronebg {
    background-color: var(--clrone);
    color: var(--clrfour);
}


.linethroughRed{
    text-decoration: line-through var(--clrone);
    text-decoration-thickness: 0.06rem;


}

/*------------*/
/*    background colors      */
/*------------*/


.bgclrone {
    background-color: var(--clrone) !important;
}

.textclrone {
    color: var(--clrone);
}

.bgclrtwo {
    background-color: var(--clrtwo);
}

.bgclrthree {
    background-color: var(--clrThree);
}

.bgclrfour {
    background-color: var(--clrfour);
}

.bgclrfive {
    background-color: var(--clrfive);
}

.bgclrsix {
    background-color: var(--clrsix);
}

.textclrsix {
    color: var(--clrsix);
}


/*------------*/
/*    font sizes      */
/*------------*/

.fs1 {
    font-size: 0.6rem;
}

.fs2 {
    font-size: 0.9rem;
}

.fs3 {
    font-size: 1rem;
}

.fs4 {
    font-size: 1.2rem;
}


/*------------*/
/*    misc      */
/*------------*/

.input::placeholder {
    font-family: Yekan;
    font-size: 0.9rem;
}



.h100 {
    height: 100%;
    flex: 1;

}
.w42 {
    width: 42%;
}

.w66 {
    width: 66%;
}

.w90 {
    width: 90% !important;
}

.w100 {
    width: 100% !important;
}


.dvhcontainer {

    min-height: 100dvh;
    max-width: 430px;
    margin: auto;
    background-color: var(--clrThree);


}

.dvhcontainer--66 {
    min-height: 66dvh;
}

.dvhcontainer--88 {
    min-height: 88dvh;
}


.dvhcontainer--72-scroll {
    height: 70dvh;
    overflow-y: scroll;
}





/*------------*/
/*    pages      */
/*------------*/


/*------------*/
/*    login      */
/*------------*/


.login-container {
    height: 100dvh;
    max-width: 430px;
    margin: auto;
    background-color: var(--clrThree);
    background-image: url("/asset/images/RED.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}


/*------------*/
/*    homepage      */
/*------------*/


.slider-container {
    height: 13rem;
    img {
        height: 100%;
        width: 100%;

    }
    .swiper-scrollbar-drag {

        background: var(--clrone);
    }
}

.special-offers {
    min-height: 13rem;
    .columns {
        /*border-top: 2px solid var(--clrsix);*/

        height: 100%;
    }

}



















/*------------*/
/*    products  */
/*------------*/

.productThumbcard {

    background-color: var(--clrfour);


    .off {
        top:10%;
        left: 3%;
       background-color: var(--clrone);
        color: var(--clrfour);
        display: flex;
        align-items: center;
        justify-content: space-between;

    }

    img {
        /*border: 1px solid var(--clreight);*/
        background-color: var(--clrfour);
        height: 9rem;

    }


}


.ATC-buttons {

    width: 2rem;
    height: 2rem;
    transition: width 0.5s ease-in-out;


    button {

        display: flex;
        justify-content: center;
        align-items: center;
    }


    .hidden-content {
        button {


            display: flex;
            justify-content: center;
            align-items: center;
        }


        display: none;
        height: 100%;


    }
}


.productDialog {

}


.ATC-buttons--show {


    width: 100%;
    transition: width 0.6s ease-in-out;

    .hidden {
        display: none;
        opacity: 0;

    }

    .hidden-content {


        display: flex;
        justify-content: space-around;
        align-items: center;


        width: 100%;
    }

}


/*------------*/
/*    shadows  */
/*------------*/

.shadowone {
    box-shadow: 0 4px 8px rgb(0, 0, 0);
}
.shadowtwo {
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
}

/*------------*/
/*    topnav and botnav and sidebar  */
/*------------*/



.logo {
    max-width: 4.2rem;


}

.logo2 {
    max-width: 7rem;
}

.topnav {
    z-index: 3000;
    position: fixed !important;
    display: flex;
    align-items: center;
    top: 0;
    width: 100%;
    max-width: 430px;
    background: var(--clrfour);

    height: 4rem;


}

.topnav-icons {
    width: 1.1rem;
}

.botnav {
    height: 5rem;
    position: fixed !important;
    max-width: 430px;


    bottom: 1%;
    width: 100%;

    /*background-color: var(--clrtwo);*/
    display: flex;
    align-items: flex-end;

}

.botnavButton {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;


    img {
        width: 2rem;
    }

    p {
        text-align: center;
        font-size: 0.7rem;
        font-weight: bold;
        color: var(--clrfour);


        margin-top: 0.1rem;
    }

}

.botnavcontrols {

    height: 3rem;
    margin-bottom: 0.5rem;

    display: flex;
    justify-content: space-evenly;
    align-items: center;
}



.sidebar-header {
    font-weight: bold;

    img {
        width: 1rem;
        transform: translateY(-0.5rem) translateX(-0.4rem);
    }
}

.sidebar-box {
    width: 100%;
    display: flex;
    flex-direction: column;
}


/*------------*/
/*    borders and border rads  */
/*------------*/

.borderradone {
    border-radius: 1rem !important;
}
.borderradtwo {
    border-radius: 0.6rem !important;
}


/*------------*/
/*    animations  */
/*------------*/

@keyframes rotateAndPop {
    0% {
        transform: rotate(0deg) scale(1);
    }
    80% {
        transform: rotate(360deg) scale(1); /* Complete the rotation */
    }
    90% {
        transform: scale(1.2); /* Start the pop */
    }
    100% {
        transform: scale(1); /* Return to normal size */
    }
}

.loaderanimation {

    max-width: 6rem;
    max-height: 6rem;
    animation: rotateAndPop 2s ease-in-out infinite;
}