:root{
    --color1:#03040A;
    --color2:#EEECED;
    --color3:#fff;
    --color4:#666666;
    --colorblack:black;
    --color5:#4A90E2;
    --color6:#F38BA0;
    --color7:#293955;
    --color8:#B69420;
    --color9:#EF394E;
    --color10:#293955;
}
input:focus{
    outline: none;
}

@font-face{
    font-family: f1;
    src: url(./Vazir.ttf);
}
@font-face{
    font-family: f2;
    src: url(./Sahel.ttf);
}
@font-face{
    font-family: f3;
    src: url(/_next/static/media/iranyekanwebthin.eot);
    src: url(/_next/static/media/iranyekanwebthin.eot) format("embedded-opentype"),url(/_next/static/media/iranyekanwebthin.woff) format("woff"),url(/_next/static/media/iranyekanwebthin.ttf) format("truetype")
}
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
html{
    width:100vw;
    height:100vh;
    background-color: var(--color1);
}
body{
    margin:auto;
    background-color:var(--color2);
    max-width:1024px;
    min-height:100vh;
    /*background-image: url(./../img/background.png);*/
    background-blend-mode: color-dodge;
    overflow-x:hidden;
}
main{
    display:flex;
    flex-direction: column;
    padding-top:10px;
    padding-bottom:64px;
    /*animation: ease 0.5s zoom;*/
}
hr{
    width:100%;
}
[f1]{font-family:"f1";}
[f2]{font-family:"f2";}

h6{
    width: 50%;
    max-width: 196px;
    background-color: white;
    margin: 0px;
    margin-top: 16px;
    margin-right: 2px;
    border-radius: 32px 0px 0px 0px;
    padding: 4px;
    font-size: 20px;
    text-align: center;
    font-family: 'f1';
}
h5{
    width:50%;
    background-color: white;
    margin:auto;
    margin-top:12px;
    border-radius:20px 20px 0px 0px;
    padding: 4px;
    font-size: 20px;
    text-align: center;
    font-family: 'f1';
}

textarea{
    width: 86%;
    margin-top: 18px;
    min-height: 64px;
    font-size: 16px;
    font-family: 'f2';
    border:1px solid #A6B0AE;
}textarea:focus{border:1px solid var(--color8);outline:none;}

section{
    width: 100%;
    overflow: hidden;
    background-color: var(--color3);
    box-shadow: 0px 0px 20px -15px;
    margin-bottom:32px;
    /*transition: 1s linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%);*/
}
.final-cart p{
    padding-right:18px;
    font-family:f1;
}
.cart-form{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cart-form textarea{border-radius:12px 12px 0px 0px;padding:4px 8px;}
.cart-form [input]{
    border-radius:8px;
}
.cart-form [input] input{text-align:right;}
.cart-form [btn]{border:none;cursor: pointer;}

section p{
    margin-left:8px;
    margin-right:8px;
}

iframe[msg]{
    width: 100%;
    height: calc(100vh - 190px);
    border: none;
}
[umsg],[amsg]{
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    margin-bottom:12px;
    font-family: f2;
}
[amsg]{
    background-color: #6BD967;
    border-radius: 0px 12px 16px 24px;
    margin-right: 7%;
    box-shadow: 6px 4px 10px gray;
}
[umsg]{
    background-color: #9bc5ed;
    border-radius: 12px 0px 24px 16px;
    box-shadow: -6px 4px 10px gray;
}

[umsg] p,[umsg] strong,[amsg] p,[amsg] strong{width: 100%;}
[umsg] strong,[amsg] strong{text-align: left;}

.fade-section{
    opacity: 0;
    transform: translateY(20px); /* کمی پایین‌تر برای افکت بهتر */
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.fade-section.visible {
    opacity: 1;
    transform: translateY(0);
}
.float{
    width: 100%;
    max-width: 1024px;
    height: calc(100vh - 1px);
    position: fixed;
}

header{
    width:100%;
    height:64px;
    background-color:var(--color3);
    box-shadow:0 0 10px -2px var(--color4);
    display: flex;
    align-items: center;
}
.h1{font-size:28px;}
.h1,.h2{margin-right:24px;font-family:f2;display: flex;align-items: center;justify-content: space-between;}
.h2{margin-right:64px;width:100%;}
[onclick]:hover,a:hover{color:var(--color5)!important;}
[mobile]{display:none;}
[devnav]{
    position: fixed;
    bottom: 80px;
    font-family: 'f1';
    font-weight: bolder;
}
[devnav] a{
    display: flex;
    text-decoration: none;
    color: #ffffff;
    width: 48px;
    height: 48px;
    font-size: 26px;
    border-radius: 50%;
    background-color: orange;
    justify-content: center;
    font-weight: bolder;
    margin-right: 12px;
    box-shadow: 0 0 10px -3px black;
    align-items: center;
    margin:0 8px;
    transition: 1s ease;
}
[devnav] a:hover{
    color:black!important;
}
[devnav] div:nth-child(odd){
     margin-right:24px;
}

[devnav] div{
    margin:8px;
    height:48px;
    display: flex;
    align-items: center;
}
[fa] p{
    font-family:f1;
}
[btn]{
    display: flex;
    text-decoration: none;
    color: black;
    width: 100%;
    background-color: orange;
    align-items: center;
    justify-content: center;
    height: 48px;
    font-family: 'f2';
    font-weight: bolder;
}
[btn]:hover{
    color:white!important;
}

.menu{z-index:999;font-weight: 900;width: 100%;display: flex;justify-content: flex-start;}
.menu a{text-decoration:none;padding-right:12px;color:var(--colorblack);margin-left: 20px;}
.menu a[select]{color: var(--color7);}
.vash,.vash2{
    border:2px solid var(--color3);
    background-color: var(--color5);
    color: var(--color3);
    margin-left: 8px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 24px;
    display: flex;
    justify-content: center;
    box-shadow: 0 0 10px -5px var(--colorblack);
    align-items: center;
    text-decoration:none;
}
.vash2{width:80px;border-radius: 20px;}
.vash2 p{
    margin-left:8px;
width:22px;height:22px;
font-family:f1;font-size:12px;
color:var(--colorblack);
border:1px solid var(--color3);
background-color: var(--color6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.vash:hover,.vash2:hover{
     color:black !important;
}

[flex]{
    display:flex;
}

.h1 img{
    width:58px;
}
.searchbar{
    position: absolute;
    max-width: 480px;
    width:80%;
    height: 0px;
    top: 64px;
    left: calc(50% - 360px);
    background-color: white;
    border-radius: 0px 0px 16px 16px;
    box-shadow: 0 8px 7px -5px var(--color4);
    display:flex;
    overflow:hidden;
    transition: 1s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%);
}
.searchbar input{
    width:100%;border-radius:0px;border:none;font-size:20px;
}
.searchbar button,.searchbar [btn]{
    width:64px;border:none;border-radius:0px;background-color:var(--color5);
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    margin: 0;
    color: black;
}
.searchbar button:hover,.searchbar [btn]:hover{
    color:white!important;
}

.searchbar button{
    border-left:none;
    border-right:none;
}
.newsbar{
    background-color: var(--color10);
    color:white;
    width:100%;
    height:32px;
    font-size:24px;
}

#mfakmb{
    display: flex;
    width: 90%;
    right:5%;
    max-width:1024px;
    background-color: white;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    position: fixed;
    z-index: 999;
    box-shadow: 0px 0px 10px -5px;
    font-family: 'f1';
}
#mfakmb i{
    width: 5%;
    font-size: 200%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#mfakmb [title]{
    background-color: #afb9d5;
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: black;
    background-color: lightgray;
    align-items: center;
    font-weight: bolder;
    padding: 8px;
}
#mfakmb [message]{
padding: 16px;
}
form[normal]{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    max-width:480px;
    background-color: var(--color3);
    margin: auto;
    box-shadow: 0px 0px 10px -1px var(--color5);
    border-radius: 12% 5px;
    min-height: 128px;
}
form[addcart]{
    display: flex;
    flex-direction: column;
    align-items: center;
}
form[addcart] input[type=submit]:hover{
    color:white;
}
form[addcart] [input]{
    width:70%;
    border-radius:0px;
}
form[addcart] [input] p{width:20%;font-family:'f1';margin-left:12px;margin-right:12px;}
form[addcart] [input] input{width:50%;font-family:'f1';}
form[addcart] [input] i{width:10%;}
form[addcart] input[type=submit]{
    display: flex;
    color: black;
    width: 100%;
    background-color: orange;
    align-items: center;
    justify-content: center;
    height: 48px;
    font-family: f2;
    font-weight: bolder;
    text-decoration: none;
    border-radius:0px;
    font-size:16px;
    transition: none;
}

[input]{
    width: 90%;
    height:32px;
    display: flex;
    align-items: center;
    border: 1px solid;
    margin-top: 12px;
    border-radius: 50px 0px 50px 50px;
    overflow: hidden;
}
[input] i{
    font-size: 24px;
    background-color: var(--color5);
    color: white;
    padding: 8px;
}

[input] input{
    width: 100%;
    border: none;
    height: 100%;
    font-size: 18px;
    padding-right:12px;
    font-family:f1;
    text-align:center;
}
[input] input::placeholder{
    text-align: right;
}

[type=submit]{
    width: 50%;
    margin-top: 24px;
    margin-bottom: 0px;
    height: 48px;
    font-size: 24px;
    border-radius: 32px 32px 0px 0px;
    font-family: f2;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color5);
    border: none;
    color: var(--color3);
    box-shadow: 0px 0px 10px -5px var(--color5);
    transition: 1s ease;
    cursor: pointer;
}
[type=submit]:hover{
    background-color: var(--color7);
    color:var(--color3)
}
#cart{
    width:0px;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    transition: 1s ease-in;
    max-width:480px;
}
.cart{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cart [order]{
    width:96%;
    height: 96px;
    display: flex;
    align-items: center;
    border:1px solid black;
    box-shadow:0px 0px 10px -5px #525657;
    border-radius:12px;
    overflow:hidden;
    margin-top:10px;
    background-color:var(--color2);
    color:var(--color1);
}
[order] [info]{
    width:100%;
}
[order] [mgr]{
    width: 48px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 24px;
}
[order] [mgr] a{
    text-decoration: none;
    width:32px;
    background-color:var(--color4);
    border-radius: 12px;
    border:2px solid white;
    box-shadow:0 0 10px -4px #9A989A;
    color:var(--color2);
    text-align:center;
    margin:6px;
    padding:4px;
}
[order] [info] p{
    margin:0px;
    margin-top:6px;
    margin-bottom:6px;
    display:flex;
    font-family:f2;
    font-size:16px;
}

.cart [order] img{
    min-width:96px;
    min-height:96px;
    max-width:96px;
    max-height:96px;
    margin-left:10px;
    border-left:2px solid black;
}
.orders,.cart{
    display: flex;
    padding-top:16px;
    padding-bottom:16px;
    overflow:auto;
}
.orders .order{
    background-color:white;
    margin:8px;
    max-width:188px;
    max-height:288px;
    box-shadow:0 0 10px 0px #808080;
    padding:2px;
    border-radius: 0px 0px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}
.orders .order hr{width:96%;}

.orders .order img{
    display:block;
    width: 188px;
    height: 188px;
    max-height:256px;
}
.orders .order p{
    color:var(--colorblack);
    padding:0px;
    margin:4px;
    font-family:"f2";
    text-overflow: ellipsis;
    width:100%;
    text-align:center;
}
.orders .order p[price]{
    text-align:left;
    width:98%;
    margin-left:12px;
}
.support-form{
    display: flex;
    position: fixed;
    bottom: 58px;
    width: 100%;
    flex-direction: row-reverse;
    height: 64px;
}
.support-form [cbtn]{
    width: 10%;
    border-radius: 0px;
    min-height: 100%;
    margin: 0px;
    font-size:32px;
    font-weight:900;
    background-color: var(--color5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.support-form [cbtn]:hover{color:white!important;}
#msgs{
    margin-bottom:128px;
}
.category{
    display: flex;
    width: 98%;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: auto;
}
.category a{
    width: 100%;
    height: 54px;
    text-decoration: none;
    color: var(--color7);
    border: 1px solid black;
    padding: 12px;
    border-radius: 12px 6px 6px 12px;
    margin: 6px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    box-shadow:0px 0px 15px -8px;
}
.category a img{
    width: 52px;
    height: 52px;
    padding: 2px;
    border-right: 1px solid var(--color7);
}
.category a strong{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    font-family: 'f1';
    font-size: 20px;
    font-weight:100;
}

.support-form textarea{
    width: 90%;
    min-height: 100%;
    margin: 0;
}

@media only screen and (min-width: 1024px) {
     #mfakmb{
         right: 320px;
         max-width:800px;
     }
     .support-form{
        max-width: 1024px;
        bottom: 0px;
     }

}
@media only screen and (max-width: 800px) {
    ::-webkit-scrollbar {width: 0px;}
    main{
        padding-top:64px;
    }
    .orders .order{
        max-width:148px;
        max-height:238px;
    }
    .orders .order img{
        width:148px;
        height:148px;
        max-height:208px;
    }
    header{height:48px;position:fixed;z-index: 999;}
    .h1 img{width:38px;}
    [mobile]{display:block;}
    [desk]{display:none;}
    .h2{justify-content: flex-end;}
    .menubtn{margin-left: 8px;font-size: 32px;width: 48px;height: 48px;display: flex !important;align-items: center;justify-content: center;}
    .vash{height:32px;width:32px;font-size:20px;}
    .vash2{height:32px;}
    .menu{
        position: fixed;
        bottom: 0px;
        width: 100%;
        height: 56px;
        background-color: var(--color3);
        display: flex;
        align-items: center;
        justify-content: space-around;
        box-shadow:0 0 10px -2px var(--color4);
    }
    .menu a{display: flex;flex-direction: column;align-items: center;width:100%;}
    .menu a[select]{color: var(--color8);}
    .menu a p{font-size:12px;margin:0px;margin-bottom:4px;}
    .menu a i{font-size:24px;margin:0px;}
    .searchbar{top:48px;left:10%;}
    
}
@keyframes zoom{
    0%{
        transform: scale(0.5);
    }
    50%{
        transform: scale(1.2);
    }
    100{
        transform: scale(1);
    }
}