:root{
    --maincolor : #f6e7d2;
    --maincolor50 : #f6e7d280;
    --maincolor80: #f6e7d2CC;
}
@font-face {
    font-family: "ShabnamNUM";
    src: url("https://fereshtehgalleria.ir/public/src/fonts/shabnam/Shabnam-Medium-FD.woff2") format("woff2"),
         url("https://fereshtehgalleria.ir/public/src/fonts/shabnam/Shabnam-Medium-FD.woff") format("woff");
}
/* Regular */
@font-face {
    font-family: "Shabnam";
    src: url("https://fereshtehgalleria.ir/public/src/fonts/shabnam/Shabnam.woff2") format("woff2"),
         url("https://fereshtehgalleria.ir/public/src/fonts/shabnam/Shabnam.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

/* Bold */
@font-face {
    font-family: "Shabnam";
    src: url("https://fereshtehgalleria.ir/public/src/fonts/shabnam/Shabnam-Bold.woff2") format("woff2"),
         url("https://fereshtehgalleria.ir/public/src/fonts/shabnam/Shabnam-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

/* Light */
@font-face {
    font-family: "Shabnam";
    src: url("https://fereshtehgalleria.ir/public/src/fonts/shabnam/Shabnam-Light.woff2") format("woff2"),
         url("https://fereshtehgalleria.ir/public/src/fonts/shabnam/Shabnam-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
}

/* Medium */
@font-face {
    font-family: "Shabnam";
    src: url("https://fereshtehgalleria.ir/public/src/fonts/shabnam/Shabnam-Medium.woff2") format("woff2"),
         url("https://fereshtehgalleria.ir/public/src/fonts/shabnam/Shabnam-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}

/* Thin */
@font-face {
    font-family: "Shabnam";
    src: url("https://fereshtehgalleria.ir/public/src/fonts/shabnam/Shabnam-Thin.woff2") format("woff2"),
         url("https://fereshtehgalleria.ir/public/src/fonts/shabnam/Shabnam-Thin.woff") format("woff");
    font-weight: 100;
    font-style: normal;
}

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: "Shabnam",sans-serif;
    font-weight: 500;
}

body{
    position: relative;
}

html{
    scroll-behavior: smooth;
}

.outofstockcoverproduct{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff72;
    font-size: 17px;
    top: 0px;
    left: 0px;
}
.outofstockcoverproduct span{
    background-color: white;
    padding: 5px;
    border-radius: 10px;
}

.headerDIV{
    padding-top: 0px;
}
.headerTOP{
    background-color: var(--maincolor);
    text-align: center;
    font-size: 16px;
    padding-bottom: 8px;
    font-weight: 700;
}
.headerTOP img{
    height: 40px;
    margin-top: 10px;
}
.HeaderMAIN{
    background-color: var(--maincolor);
    height: 20px;
    position: relative;
}
.HeaderMAIN-content{
    position: absolute;
    top: 0px;
    left: 10px;
    width: calc(100% - 20px);
    background-color: white;
    border : 1px solid #d9d9d9;
    border-radius: 5px;
    height: 55px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding-left: 12px;
    padding-right: 12px;
    max-width: 900px;
}

.HeaderMAIN-content .H-login-signup{
    height: 28px;
    cursor: pointer;
}
.HeaderMAIN-content span{
    font-size: 12px;
    font-weight: 300;
    margin-left: 12px;
    font-style: none;
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.HeaderMAIN-content .H-search{
    margin-left: auto;
    margin-right: 20px;
    height: 24px;
    cursor: pointer;
}


.HeaderMAIN-content .H-hammenu{
    margin-right: 12px;
    height: 24px;
    cursor: pointer;
}

main{
    margin-top: 45px;
}
@media (min-width: 900px){
    main{
        margin-top: 65px;
    }
}

.footerDIV{
    padding-bottom: 20px;
    background-color: var(--maincolor);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}
.footerAddressCont , .footerInstaCont , .footerWhatsappCont{
    display: flex;
    align-items: center;
    direction: rtl;
    gap: 15px;
    justify-content: center;
    width: 100%;
}
.footerInstaCont , .footerWhatsappCont{
    flex-direction: row-reverse;
}
.footerAddressCont img , .footerInstaCont img , .footerWhatsappCont img{
    width: 20px;
}
.footerAddressCont span{
    font-size: 15px;
    font-weight: 100;
}
.footerInstaCont a , .footerWhatsappCont a{
    font-size: 15px;
    font-weight: 100;
    text-decoration: none;
    color: black;
    direction: ltr;
}

.enamad_footer img{
    width: 100px;
}
.footer_createdby{
    height: 30px;
    background-color: var(--maincolor);
    display: flex;
    justify-content: center;
    align-items: center;
    direction: rtl;
    margin-top: 2px;
}
.footer_createdby span{
    font-size: 13px;
    color: black;
}
.footer_createdby span a{
    text-decoration: underline;
    color: blue;

}


.bannerSliderContainer{
    position: relative;
    height: 400px;
    border: 2px solid #eeeeee;
    max-width: 900px;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
}
@media (min-width: 900px) {
  .HeaderMAIN-content {
    left: 50%;
    transform: translateX(-50%);
    height: 70px;
  }
  .HeaderMAIN-content span{
    font-size: 15px;
  }
  .headerTOP img{
    height: 45px;
  }
  .HeaderMAIN-content .H-hammenu ,.HeaderMAIN-content .H-search ,.HeaderMAIN-content .H-login-signup{
    height: 30px;
  }
}
@media (min-width: 900px) {
  .bannerSliderContainer {
    margin: auto;
  }
}


.home-imageSlider{
    width: 100%;
    display: none;
    aspect-ratio: 1400 / 700;
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
}
@keyframes hideImageSlider {
    0%{opacity: 1;display: block;}
    100%{opacity: 0;display: none;}
}
@keyframes showImageSlider {
    0%{opacity: 0;display: none;}
    100%{opacity: 1;display: block;}
}

.CategoriesShowerContainer{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-left: 10px;
    margin-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.starredCATsingle{
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    position: relative;

}
@media (min-width: 900px) {
    .CategoriesShowerContainer{
        max-width: 900px;
        margin: auto;
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 370px){
    .CategoriesShowerContainer{
        grid-template-columns: repeat(2, 1fr);
    }
}


.starredCATsingle a{
    text-decoration: none;
}
.starCatIMG{
    width: 100%;
    aspect-ratio: 300 / 400;
    border-radius: 12px 12px 0px 0px;
    margin: 0px;
    transition: 0.2s all;
}

.starredTITLE{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--maincolor);
    margin: 0px;
    border-radius: 0px 0px 12px 12px;
    height: 35px;
}

.starredTITLE img{
    width: 18px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 25px;
    transition: 0.2s all;
}

.starredTITLE img:first-child{
    right: 25px;
    left: unset;
}
.starredTITLE span{
    color: black;
    font-size: 15px;
    font-weight: 700;
    transition: 0.2s all;
}
.starredCATsingle:hover .starredTITLE span{
    font-size: 17px;
}

.starredCATsingle:hover .starCatIMG{
    scale : 1.1
}

.starredCATsingle:hover .starredTITLE .hscs2img{
    right: 35px;
    width: 21px;
}

.starredCATsingle:hover .starredTITLE .hscs1img{
    left: 35px;
    width: 21px;
}

.FeaturedProductsContainer{
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 15px;
    border-top: 2px solid var(--maincolor);
}

.FeaturedProductsContainer h2{
    margin-top: 5px;
    text-align: center;
    direction: rtl;
    font-size: 22px;
}

.swiperFeatured{
    width: 100%;
    height: fit-content;
    border-radius: 10px;
    padding:5px;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    overflow: visible;
    margin-top: 10px;
}

.swiperFeatured .swiper-slide{
    border-radius: 10px;
}
.swipercontainer{
    position: relative;
    height: 0px;
    max-width: 900px;
    margin: auto;
}
.swiperFP-next , .swiperFP-prev{
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    z-index: 2;
    right : -5px;
}
.swiperFP-next img , .swiperFP-prev img{
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: var(--maincolor50);
    border-radius: 50%;
}
.swiperFP-prev {
    right: unset;
    left: -5px;
}

.swiperFeatured .swiper-slide a{
    display: block;
    text-decoration: none;
    color: black;
    padding: 5px;
    position: relative;
    box-shadow: 0 0 10px gray;
    border-radius: 10px;
}

.boxshadowsliderhfp{
    padding: 10px;
}

.swiperFeatured .swiper-slide img{
    aspect-ratio: 1/1;
    border-radius: 10px;
    width: 100%;
    
}

.swiperFeatured .swiper-slide .HFPSW-name{
font-size: 15px;
font-weight: 500;
display: -webkit-box;
-webkit-line-clamp: 2;        /* 👈 limit to 2 lines */
-webkit-box-orient: vertical; /* 👈 define vertical box orientation */
line-clamp: 2;
overflow: hidden;             /* 👈 hide overflowed text */
text-overflow: ellipsis;      /* 👈 show "..." */
text-align: center;
margin-top: 8px;
width: 100%;
direction: rtl;               /* keep your RTL direction */
height: 40px;
}
.swiperFeatured .swiper-slide .HFPSW-price{
    position: relative;
    margin-top: 12px;
    height: 41px;
}
.swiperFeatured .swiper-slide .HFPSW-price span ,.NPHPF-PRICE span {
    display: block;
    text-align: center;
    direction: rtl;
    font-family: "ShabnamNUM",sans-serif;
}

.swiperFeatured .swiper-slide .HFPSW-price .noDis , .NPHPF-PRICE .noDis{
    color:#666666;
    opacity: 0.6;
    font-size: 11px;
    text-decoration: line-through;
    margin-top: 5px;
}


.swiperFeatured .swiper-slide .HFPSW-price .dis , .NPHPF-PRICE .dis{
    font-size: 12px;
    color: black;
    position: absolute;
    left: 2px;
    bottom: 2px;
    background-color: var(--maincolor50);
    vertical-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-feature-settings: "lnum";
    font-family: arial;
    padding: 3px;
    border-radius: 50%;
}

.swiperFeatured .swiper-slide .HFPSW-price .final , .NPHPF-PRICE .final{
    direction: rtl;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    display: block;
    color:#666666;
}

.swiperFeatured .swiper-slide .HFPSW-price .noDisfinal , .NPHPF-PRICE .noDisfinal{
    direction: rtl;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    display: block;
    color:#666666;
}

.NewerProductsContainer{
    margin-left: 15px;  
    margin-right: 15px;
    border-top:2px solid var(--maincolor);
    padding-bottom: 15px;
    margin-top: 20px;
}

.NewerProductsPRCont{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 15px;
    max-width: 900px;
    margin: auto;
    margin-top: 15px;
}

@media (max-width:390px){
    .NewerProductsPRCont{
        grid-template-columns: repeat(2,1fr);
    }
}

.NewerProductsContainer h2{
    margin-top: 5px;
    text-align: center;
    direction: rtl;
    font-size: 22px;
}

.NewerProductsContainer .newPRseeAll{
    display: inline-block;
    text-align: center;
    margin: auto;
    padding: 6px 12px;
    background-color: var(--maincolor);
    color: black;
    text-decoration: none;
    font-size: 16px;
    border-radius: 20px;
    transition: 0.25s all;
    margin-top: 15px;
}

.NewerProductsContainer .newPRseeAll:hover{
    padding: 6px 15px;
    box-shadow: 0 0 5px var(--maincolor);
}

.NP-DIVACENTER{
    display: flex;
    align-items: center;
    justify-content: center;
}

.newPR-productContainer{
    width: 100%;
}

.newPR-productContainer a{
  display: block;
  text-decoration: none;
  color: black;
  padding: 5px;
  position: relative;
  box-shadow: 0 0 10px gray;
  border-radius: 10px;
}

.newPR-productContainer img{
  aspect-ratio: 1/1;
  border-radius: 10px;
  width: 100%;
}

.newPR-nameText{
  font-size: 15px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  margin-top: 8px;
  width: 100%;
  direction: rtl;
  height: 40px;
}
.NPHPF-PRICE{
  position: relative;
  margin-top: 12px;
  height: 41px;
}

.FreqAskedQ-cont{
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 25px;
    border-top: 2px solid var(--maincolor);

}
.FreqAskedQ-cont h2{
    text-align: center;
    direction: rtl;
    font-size: 22px;
    margin-top: 5px;
}

.HPQA-container{
    margin-top: 15px;
    padding: 5px;
}

.HPQA-single{
    height: fit-content;
    width: 100%;
    box-shadow: 0 0 10px #eee;
    border-radius: 10px;
    border: 1px solid silver;
    margin-top: 10px;
}

.HPQA-Q-cont{
    height: 70px;
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:end;
    padding-right: 15px;
    padding-left: 15px;
    cursor: pointer;
}
.HPQA-Q-cont span{
    display: block;
    text-align: right;
    direction: rtl;
    font-weight: 500;
    user-select: none;
}

.HPQA-single img{
    width: 15px;
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
}
.HPQA-A-expand{
    height: 0px;
    display: none;
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:end;
    padding-right: 15px;
    padding-left: 15px;
    cursor: pointer;
    border-top: 0px solid silver;
}
.HPQA-A-expand span{
    display: block;
    text-align: right;
    direction: rtl;
    margin-top: 5px;
    font-weight: 300;
}

.WHITESPACE{
    height: 50px;
}

.hamMenuSide{
    width: 0px;
    height: 100%;
    display: none;
    position:fixed;
    right: 0px;
    top: 0px;
    padding-top: 50px;
    z-index: 101;
    background-color: white;
    overflow: hidden;
}

@keyframes openHamMenu {
    0%{width: 0px;}
    100%{width: 300px;}
}
@keyframes closeHamMenu {
    0%{width: 300px;}
    100%{width: 0px}
}

.hamMenuSide .closeBtnHammenu{
    position: absolute;
    top: 15px;
    left: 15px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.hamMenuSide h3{
    text-align: center;
    direction: rtl;
    font-size: 21px;
    margin-bottom: 15px;
}

.hamMenuCatsContainer{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex-direction: column;
}
.ItemHamCat{
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    height: 25px;
    position: relative;
    display: flex;
    gap: 25px;
    transition: 0.2s all;
}
.ItemHamCat:hover{
    gap: 12px;
}
.ItemHamCat img{
    width: 20px;
}
.hamMenuCatsContainer a{
    color: black;
    font-size: 17px;
    display: block;
    text-align: right;
    direction: rtl;
    text-decoration: none;
}
.hammenuBlackScreen{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: black;
    opacity: 0.4;
    display: none;
}

.searchBarHeader{
    width: 0px;
    background-color: white;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    border-radius: 5px;
    z-index: 2;
    overflow: hidden;
}

@keyframes openSearchBar {
    0%{width: 0px}
    100%{width: 100%}
}
@keyframes closeSearchBar {
    0%{width: 100%}
    100%{width: 0px}
}

.searchBarHeader input{ 
  font-size: 0.9rem;
  background-color: transparent;
  width: 100%;
  height: 100%;
  padding-inline: 0.5em;
  padding-block: 0.7em;
  padding-right: 45px;
  padding-left: 45px;
  border: none;
  direction: rtl;
  text-align: right;
}

.searchBarHeader input:focus{
    border: none;
    border-bottom: 3px solid var(--maincolor);
    outline: none;
}
.searchBarHeader img{
    width: 24px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 0;
    display: block;

}
@keyframes searchBarHeaderShow {
    0%{opacity: 0;}
    50%{opacity: 0;}
    100%{opacity: 1;}
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-3px); }
  40%, 80% { transform: translateX(3px); }
}

.loadingPage{
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #ffffff88;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.loadingPage-b{
    position: fixed;
}

/* From Uiverse.io by barisdogansutcu */ 
.loadingPage svg {
 width: 3.25em;
 transform-origin: center;
 animation: rotate4 2s linear infinite;
}

.loadingPage circle {
 fill: none;
 stroke: #000000;
 stroke-width: 2;
 stroke-dasharray: 1, 200;
 stroke-dashoffset: 0;
 stroke-linecap: round;
 animation: dash4 1.5s ease-in-out infinite;
}

@keyframes rotate4 {
 100% {
  transform: rotate(360deg);
 }
}

@keyframes dash4 {
 0% {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
 }

 50% {
  stroke-dasharray: 90, 200;
  stroke-dashoffset: -35px;
 }

 100% {
  stroke-dashoffset: -125px;
 }
}








.catPageTitle{
    text-align: center;
    margin-top: 50px;
    font-size: 18px;
}
.catPageTitle span{
    display: inline-block;
    padding: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    position: relative;
}

.catPageTitle span::before,
.catPageTitle span::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border: 3px solid var(--maincolor);
}

.catPageTitle span::before {
  border-top: none;
  border-right: none;
  border-bottom-left-radius: 20px;
  bottom: -5px;
  left: -5px;
}

.catPageTitle span::after {
  border-bottom: none;
  border-left: none;
  border-top-right-radius: 20px;
  top: -5px;
  right: -5px;
}



.CategoryPage_ProductsContainer{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    gap: 20px;
    margin: auto;
    margin-top: 30px;
    padding-left: 10px;
    padding-right: 10px;
    max-width: 900px;
    direction: rtl;
}

@media (min-width : 900px){
    .CategoryPage_ProductsContainer{
        grid-template-columns: repeat(4,1fr);
    }
}
@media (max-width : 430px){
    .CategoryPage_ProductsContainer{
        grid-template-columns: repeat(2,1fr);
    }
}

.catPage-productContainer{
    width: 100%;
}

.catPage-productContainer a{
  display: block;
  text-decoration: none;
  color: black;
  padding: 5px;
  position: relative;
  box-shadow: 0 0 10px gray;
  border-radius: 10px;
}

.catPage-productContainer img{
  aspect-ratio: 1/1;
  border-radius: 10px;
  width: 100%;
  transition: 0.3s opacity;
}

.catPage-productContainer:hover img , .catPage-productContainer:active img{
    opacity: 0.85;
}

.catPage-nameText{
  font-size: 15px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  margin-top: 8px;
  width: 100%;
  direction: rtl;
  height: 40px;
}
.catPagePRD-PRICE{
  position: relative;
  margin-top: 12px;
  height: 41px;
}

.catPagePRD-PRICE span {
    display: block;
    text-align: center;
    direction: rtl;
    font-family: "ShabnamNUM",sans-serif;
}
.catPagePRD-PRICE .noDis{
    color:#666666;
    opacity: 0.6;
    font-size: 11px;
    text-decoration: line-through;
    margin-top: 5px;
}
.catPagePRD-PRICE .dis{
    font-size: 12px;
    color: black;
    position: absolute;
    left: 2px;
    bottom: 2px;
    background-color: var(--maincolor50);
    vertical-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-feature-settings: "lnum";
    font-family: arial;
    padding: 3px;
    border-radius: 50%;
}
.catPagePRD-PRICE .final{
    direction: rtl;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    display: block;
    color:#666666;
}
.catPagePRD-PRICE .noDisfinal{
    direction: rtl;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    display: block;
    color:#666666;
}

.catpropagesDots{
    margin-top: 30px;
    text-align: center;
    direction: rtl;
}

.catpropagesDots .border{
    height: 2.5px;
    width: 100px;
    background-color: var(--maincolor);
    margin: auto;
}

.catprodcontainerpages{
    display: flex;
    align-items: center;
    justify-content: center;
}
.catprodcontainerpages span{
    margin-left: 20px;
    margin-right: 20px;
    font-size: 16px;
    margin-bottom: -4px;
}

.catprodcontainerpages img{
    width: 30px;
    cursor: pointer;
}

.catprodcontainerpages .disabledCatPro{
    cursor: default;
    opacity: 0.5;
}
.PopupAppend{
    position: fixed;
    bottom : 20px;
    width: 250px;
    right:-300px;
    height: 125px;
    background-color: var(--maincolor);
    box-shadow: 0 0 5px black;
    border: 1px solid white;
    border-radius: 15px;
    padding: 20px;
    direction: rtl;
    text-align: right;
    z-index: 102;
}
.PopupAppend  span{
    text-align: right;
    direction: rtl;
}
@keyframes comeINpopupAppend {
    100%{right:10px}
}
@keyframes goOUTpopupAppend {
    0%{right:10px;}
    100%{right:-300px;}
}
.hamMenuCatsContainer .border{
    width: 70%;
    height: 1px;
    background-color: var(--maincolor);
    margin: auto;
}

.parentCatName{
    display: block;
    margin-top: 15px;
    text-align: right;
    opacity: 0.8;
    color:#222;
    font-size: 13px;
    margin-right: 20px;
    font-weight: 300;
}

.ImagesContainerPRp{
    margin: auto;
    margin-top: 10px;
    width: calc(100% - 40px);
}
.MainImageContainer{
    width: 100%;
    height: fit-content;
}
.MainImageContainer img{
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 10px;
}

.prnamePRp{
    text-align: center;
    font-size: 19px;
    display: block;
    margin-top: 10px;
    font-weight: 500;
}

.SecImageContainer{
    width: calc(100%-40px);
    margin-top: 0px;
    display: flex;
    gap: 15px;
    height: 122px;
    overflow-y: scroll;
    padding-bottom: 12px;
    flex-direction: row-reverse;

}
.SecImageContainer img{
    width: 110px;
    aspect-ratio: 1/1;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s all;
}

.SecImageContainer img:hover{
  filter: brightness(1.3);
  opacity: 0.7;
}

.pricePRp{
    text-align: center;
    position: relative;
    margin: auto;
    display: block;
    direction: rtl;
    width: fit-content;
    margin-top: 10px;
}

.pricePRp .PRp_noDisfinal{
    font-size: 17px;
    margin-left: 5px;
    font-family: "ShabnamNUM";
}

.pricePRp .PRp_final{
    font-size: 17px;
    margin-left: 5px;
    font-family: "ShabnamNUM";
}

.pricePRp .PRp_dis{
    position: absolute;
    bottom: 5px;
    right: -30px;
    border-radius: 50%;
    padding-left: 3px;
    padding-right: 3px;
    background-color: var(--maincolor50);
    font-family: sans-serif;
    font-size: 12px;
}

.pricePRp .PRp_noDis{
    font-size: 14px;
    margin-left: 5px;
    font-family: "ShabnamNUM";
    text-decoration: line-through;
    opacity: 0.7;
    color: #666;
}
.borderPr{
  width: calc(100% - 40px);
  height: 1px;
  background-color: var(--maincolor);
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.descPRp{
    width: calc(100% - 40px);
    margin: auto;
    direction: rtl;
    text-align: right;
}

.prpSwiperRel{
    border: none;
    margin-top: 15px;
}




.prpSwiperRel h3{
    text-align: center;
    margin-top: 50px;
    font-size: 18px;
}
.prpSwiperRel h3 span{
    display: inline-block;
    padding: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    position: relative;
}

.prpSwiperRel h3 span::before,
.prpSwiperRel h3 span::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border: 3px solid var(--maincolor);
}

.prpSwiperRel h3 span::before {
  border-top: none;
  border-right: none;
  border-bottom-left-radius: 20px;
  bottom: -5px;
  left: -5px;
}

.prpSwiperRel h3 span::after {
  border-bottom: none;
  border-left: none;
  border-top-right-radius: 20px;
  top: -5px;
  right: -5px;
}

.addToCartBtnPRp{
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 70px;
    margin: 0px;
    background-color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:  0 0 10px rgb(117, 117, 117);
    flex-direction: row-reverse;
    z-index: 99;
}

.addToCartBtnPRp button{
    background-color: var(--maincolor);
    border-radius: 5px;
    color: black;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: 14px;
    margin-right: 30px;
    margin-left: auto;
    transition: 0.3s all;
    cursor: pointer;
}

.addToCartBtnPRp button:hover{
    background-color: var(--maincolor80);
    opacity: 0.8;
}

.addToCartBtnPRp button:active{
    background-color: var(--maincolor50);
    opacity: 0.4;
}

.addToCartBtnPRp .pratc{
    margin-left: 30px;
    font-size: 14px;
    color: black;
    direction: rtl;
    margin-right: auto;
    font-family: "ShabnamNUM";
}

.cartbtnContainer{
    position: relative;
    display: flex;
    align-items: center;
}
.cartCounterHeader{
    position: absolute;
    top:-6px;
    right: -7px;
    font-size: 11px;
    font-family: sans-serif;
    width: 13px;
    height: 13px;
    background-color: var(--maincolor);
    color: black;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
}

.commentsPartPrp{
    margin: 20px;
    text-align: right;
    direction: rtl;
}
.commentsPartPrp h4{
    font-size: 18px;
}


.CommentContainerItem{
    margin-right: -5px;
    border-right: 5px solid var(--maincolor);
    padding-right: 10px;
    position: relative;
    margin-top: 40px;
}
.replyPRp{
    margin-right: 32px;
    margin-top: 20px;
    position: relative;
    border-right: 3px solid var(--maincolor50);
    padding-right: 10px;
}

.adminCom , .adminrep{
    color : #cdae8a;
}
.datetimeCom , .datetimerep{
    position: absolute;
    left: 0px;
    direction: rtl;
    left: 5px;
    font-size: 13px;
    opacity: 0.8;
    color: #939393;
}
.repHeaderPrp p{
    text-align: right;
    direction: rtl;
    color: #7e7e7e;
    opacity: 0.9;
    font-size: 13px;
    cursor: pointer;
    margin-top: 3px;
}

.repContentPrp{
    margin-top: 10px;
    font-size: 14px;
    position: relative;
}
.repContentPrp img{
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    cursor: pointer;
    position: absolute;
    z-index: 10;
}

.commentsPartPrp button{
    display: block;
    margin-top: 20px;
    margin: auto;
    margin-top: 30px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
    color: black;
    background-color: var(--maincolor);
    cursor: pointer;
    font-size: 17px;outline: none;
    border-radius: 15px;
}

.repContentPrp p{
    padding-left: 30px;
}

.replycommentContainer{
    margin-top: 15px;
}
.createCommentContainer{
    position: relative;
    padding: 15px;
}

.commentsPartPrp .createCommentContainer button{
    position: relative;
    display: block;
    margin-top: 10px;
    margin: auto;
    padding-left: 13px;
    padding-right: 27px;
    padding-top: 6px;
    padding-bottom: 6px;
    color: black;
    background-color: var(--maincolor);
    cursor: pointer;
    font-size: 16px;outline: none;
    border-radius: 15px;
}
.commentsPartPrp .createCommentContainer button:disabled{
    cursor: default;
    opacity: 0.7;
}
.commentsPartPrp .createCommentContainer button img{
    position: absolute;
    right: 10px;
    width: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.createCommentContainer textarea{
    display: block;
    margin-top: 0px;
    resize: none;
    font-family: "Shabnam";
    font-weight: 500;
    direction: rtl;
    text-align: right;
    font-size: 15px;
    width: 250px;
    height: 100px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px solid #d9bc9a;
    border-radius: 6px;
    padding:2px;
    transition: 0.2s all;
}

.createCommentContainer textarea:focus{
    outline: none;
    border-radius: 12px;
    padding:4px;
}

.createCommentContainer input{
    display: block;
    margin-top: 0px;
    resize: none;
    font-family: "Shabnam";
    font-weight: 500;
    direction: rtl;
    text-align: right;
    font-size: 15px;
    width: 250px;
    height: 30px;
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid #d9bc9a;
    border-radius: 6px;
    padding:2px;
}
.createCommentContainer input:focus{
    outline: none;
    outline: 1px solid #d9bc9a ;
}


.CartPageContainer{
    margin: 0px 10px;
    width: calc(100% - 20px);
    padding-top: 10px;
    max-width: 900px;
}
@media (min-width:900px){
    .CartPageContainer{
        margin: auto;
    }
}

.CartPageContainer h2{
    text-align: center;
    font-size: 19px;
}

.nocontentcart{
    font-size: 17px;
    text-align: center;
    display: block;
}
.CartContainer{
    margin-top: 30px;
    border-radius: 5px;
    padding: 5px;

}
.nocontentcartA{
    margin: auto;
    margin-top: 10px;
    color: #0693e3;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
}

.CartItem{
    min-height: 120px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}
.CartItem *{
    direction: rtl;
}
.cartitemImage{
    display: flex;
    align-items: center;
    justify-content: center;
}
.cartitemImage img{
    width: 80px;
    cursor: pointer;
    border-radius: 10px;
}
.cartCounterContainer img{
    width: 13px;
    cursor: pointer;
}
.FirstPartCartContainer{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 80px;
    margin-right: 15px;
    margin-left: 15px;
}
.secondPartCartContainer{
    margin-left: 10px;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100px;
}
.cartitemPrice span , .cartitemTOTALprice{
    font-family: "ShabnamNUM";
}
.cartCounterContainer{
    align-self: center;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.cartCounterContainer span{
    font-size: 13px;
    padding-left: 4px;
    padding-right: 4px;
    border-right: 1px solid #bbb;
    border-left: 1px solid #bbb;
}
.cartitemTOTALprice{
    font-size: 15px;
    text-align: center;
}
.cartitemPrice span{
    font-size: 12px;
    opacity: 0.7;
    color:#111;
}
.cartitemName span{
    font-size: 14px;
}
.finalSum{
    font-family: "ShabnamNUM";
    display: block;
    text-align: center;
    margin-top: 10px;
}
.CreateOrderBtn{
    display: block;
    margin-top: 20px;
    margin: auto;
    margin-top: 30px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
    color: black;
    background-color: var(--maincolor);
    cursor: pointer;
    font-size: 17px;outline: none;
    border-radius: 15px;
}
.blur-box {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, 0.1); 
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plslogintocoment{
    font-size: 14px;
    direction: rtl;
}
.plslogintocoment a{
    color: #0693e3;
    text-decoration: underline;
    cursor: pointer;
}

.AccountPagePart{
    width: calc(100% - 20px);
    margin: 10px;
    text-align: center;
    max-width: 900px;
}
@media (min-width : 900px){
    .AccountPagePart{
        margin-left:auto;
        margin-right:auto;
    }
}
.AccountPagePart h2{
    direction: rtl;
    text-align: center;
    font-size: 19px;
}
.AccountPagePart .logOut{
    color: #0693e3;
    width: 150px;
    font-size: 15px;
    margin-top: 10px;
    text-decoration: underline;
    cursor: pointer;
}
.optionsForAccPage{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    margin-top: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    position: relative;
}
.optionsForAccPage .accpage-optionitems{
    width: 25%;
    border-left: 1px solid rgba(128, 128, 128, 0.279);
    font-size: 16px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
    user-select: none;
    transition: 0.2s all;
}
.optionsForAccPage .accpage-optionitems:hover{
    background-color: #eee;
}
.optionsForAccPage .accpage-optionitems:last-child{
    border: none;
}
.optionsForAccPage .activeIndicator{
    width: 25%;
    height: 3px;
    background-color: var(--maincolor);
    border-radius: 0.5px;
    position: absolute;
    right: 0px;
}
.optionsForAccPage .activeIndBot{
    bottom:-5px;
}
.optionsForAccPage .activeIndTop{
    top:-5px;
}
.optionsForAccPage .activeOPT{
    font-weight: 900;
    background-color: #f8f8f8;
}

.AccountPageContainer{
    margin-top: 15px;
    border: 1px solid var(--maincolor);
    border-radius: 5px;
    padding: 5px;
    box-shadow:  0 0 5px var(--maincolor);
}
.popupLogout{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 250px;
    height: 300px;
    background-color: white;
    box-shadow: 0 0 10px gray;
    border-radius: 5px;
    padding: 20px;
    z-index: 101;
}
.closeLogoutPopup{
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: #00000045;
}
.popupLogout span{
    text-align: center;
    font-size: 16px;
    text-align: center;
    direction: rtl;
    display: block;
}
.popupLogout p{
    font-size: 13px;
    margin-top: 20px;
    text-align: right;
    direction: rtl;
}

.popupLogout button{
    display: block;
    margin: auto;
    margin-top: 10px;
    font-size: 14px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    outline: none;
    border: 1px solid black;
    background-color: var(--maincolor);
    border-radius: 4px;
    cursor: pointer;
}
.popupLogout .confirmBTN{
    background-color: rgb(144, 255, 144);
    color:black;
    display: inline-block;
    margin-right: 5px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 9px;
    border: 1px solid lime;
}
.popupLogout .rejectBTN{
    background-color: rgb(255, 116, 116);
    color:black;
    display: inline-block;
    margin-left: 5px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 9px;
    border: 1px solid red;
}
.accountSettingContainer{
    direction: rtl;
    text-align: right;
}
.accountSettingContainer h3{
    font-size: 18px;
    font-weight: 700;
    margin-top: 10px;
}

.accountSettingContainer .changePassBtnACCpage{
    font-size: 18px;
    font-weight: 500;
    display: block;
    text-align: center;
    cursor: pointer;
    width: 150px;
    height: 30px;
    margin: auto;
    margin-top: 10px;
    border: 2px solid black;
    border-radius: 10px;
    position: relative;
}
.accountSettingContainer .changePassBtnACCpage img{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    width: 20px;
}
b{
    font-weight: 900;
}



.ASC-phoneCont{
    margin-top: 20px;
}
.ASC-phoneCont p{
    font-size: 15px;
    font-weight: 300;
}
.ASC-phoneCont p span{
    font-weight: 500;
}

.ASC-nameCont{
    margin-top: 15px;
}

.ASC-nameCont p{
    font-size: 15px;
    font-weight: 300;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.ASC-nameCont p span{
    font-weight: 500;
    max-width: 225px;
    overflow-y: scroll;
    white-space: nowrap;
}

.ASC-nameCont p img{
    width: 15px;
    cursor: pointer;
}

.ASC-nameCont p input{
    height: 25px;
    width: 200px;
    border: 1px solid black;
    padding-right: 4px;
    padding-left: 4px;
    border-radius: 3px;
}
.ASC-nameCont p input:focus-visible{
    outline: 3px solid var(--maincolor);
}
.ASC-nameCont p button{
    font-size: 15px;
    padding: 3px 12px;
    border-radius: 5px;
    border: 1px solid black;
    margin-top: -5px;
    cursor: pointer;
}
.ASC-nameCont p button:disabled{
    opacity: 0.5;
    cursor: default;
}
.ASC-nameCont p .CNBACGH{
    background-color: rgb(116, 255, 116);
    color: black;
    margin-right: 37px;
}
.ASC-nameCont p .CNBACAN{
    background-color: rgb(255, 81, 81);
    color: black;
}

.ASC-birthCont{
    margin-top: 15px;
}
.ASC-birthCont p{
    font-size: 15px;
    font-weight: 300;
    display: flex;
    gap: 10px;
}
.ASC-birthCont p span{
    font-weight: 500;
}
.ASC-birthCont .supriseAccBD{
    font-weight: 300;
    display: block;
    width: 100%;
    text-align: right;
    font-size: 12px;
    opacity: 0.8;
    margin-top: 8px;
}


.ASC-joindate{
    margin-top: 15px;
}
.ASC-joindate p{
    font-size: 15px;
    font-weight: 300;
    display: flex;
    gap: 10px;
}
.ASC-joindate p span{
    font-weight: 500;
}
.ASC-joindate .accsince{
    font-weight: 300;
    display: block;
    width: 100%;
    text-align: right;
    font-size: 12px;
    opacity: 0.8;
    margin-top: 8px;
}

.ASC-changepass{
    direction: rtl;
    height: 0px;
    display: none;
    overflow-y: hidden;
    border-top: 1px solid var(--maincolor);
    margin-top: 10px;
    padding-top: 5px;
}
.inputContainerASCCP{
    width: 200px;
    height: 30px;
    position: relative;
    margin: auto;
    margin-top: 15px;

}
.inputContainerASCCP input{
    text-align: right;
    direction: rtl;
    font-size: 16px;
    outline: none;
    border: none;
    height: 30px;
    width: 200px;
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 10px;
    border: 1px solid black;
}
.inputContainerASCCP input:disabled{
    opacity: 0.5;
}
.inputContainerASCCP img{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5px;
    width: 20px;
    cursor: pointer;
    display: none;
}
.ASC-changepass button{
    display: block;
    text-align: center;
    margin: auto;
    margin-top: auto;
    padding: 6px 12px;
    background-color: var(--maincolor);
    color: black;
    text-decoration: none;
    font-size: 16px;
    border-radius: 20px;
    margin-top: 15px;
    cursor: pointer;
}
.ASC-changepass button:disabled{
    opacity: 0.5;
    padding: 12px 24px;
    cursor: default;
}

.ASC-changepass #changepassfinal:disabled{
    opacity: 0.5;   
    cursor: default;
    padding: 6px 12px;
}
.ASCCPcode{
    appearance: textfield;
    -moz-appearance: textfield;
    direction: ltr;
    font-size: 16px;
    outline: none;
    border: none;
    height: 30px;
    width: 100px;
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 10px;
    border: 1px solid black;
    text-align: center;
    margin: auto;
    display: block;
    margin-top: 15px;
}

.addressListAccPageContainer h3{
    font-size: 18px;
    font-weight: 700;
    margin-top: 10px;
}
.addAddressACC{
    position: relative;
    display: block;
    margin-top: 10px;
    margin: auto;
    padding-left: 27px;
    padding-right: 13px;
    padding-top: 6px;
    padding-bottom: 6px;
    color: black;
    background-color: var(--maincolor);
    cursor: pointer;
    font-size: 16px;
    outline: none;
    border-radius: 15px;
    margin-top: 10px;
}
.addAddressACC img{
    position: absolute;
    left: 10px;
    width: 15px;
    top: 50%;
    transform: translateY(-50%);
}
.addressItemContainer{
    border-bottom: 1px solid var(--maincolor);
    padding: 10px;
    position: relative;
    border: 1px solid var(--maincolor);
    margin-top: 20px;
    box-shadow: 0 0 5px #ccc;
    border-radius: 10px;
}
.addressItemContainer h4{
    display: block;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    margin-top: 5px;
}
.addressItemContainer div{
    margin-top: 10px;
    font-size: 15px;
    display: flex;
    flex-wrap: nowrap;
}
.addressItemContainer div span{
    width: 50%;
    direction: rtl;
}
.addressItemContainer p{
    text-align: right;
    direction: rtl;
    font-size: 14px;
    margin-top: 15px;
}
.addressItemContainer img{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    width: 20px;
    cursor: pointer;
}

.newAddressAdder{
    position: relative;
    padding: 5px;
    margin-top: 5px;
}
.newAddressAdder .gobackNAAACC{
    cursor: pointer;
    font-size: 11px;
    top: 5px;
    left: 5px;
    text-decoration: underline;
    position: absolute;
}
.newAddressAdder h3{
    font-size: 17px;
}
.inputContainerNAAACC{
    width: fit-content;
    height: 50px;
}
.inputContainerNAAACC span{
    display: block;
    text-align: right;
    direction: rtl;
    font-size: 12px;
}
.inputContainerNAAACC input{
    display: block;
    margin-top: 0px;
    resize: none;
    font-family: "Shabnam";
    font-weight: 500;
    direction: rtl;
    text-align: right;
    font-size: 14px;
    width: 250px;
    height: 30px;
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid #d9bc9a;
    border-radius: 6px;
    padding: 2px;
}
.inputContainerNAAACC input:focus{
    outline: none;
    outline: 1px solid #d9bc9a ;
}
.NAAACCname{
    margin: auto;
    margin-top: 15px;
}
.NAAACCpn , .NAAACCpc{
    width: 150px;
}
.NAAACCpn input , .NAAACCpc input{
    width: 100%;
    direction: ltr;
    text-align: left;
    appearance: textfield;
    -moz-appearance: textfield;
}
.TxtareaContainerNAAACC{
    width: 90%;
    margin: auto;
    height: 70px;
    margin-left: auto;
    margin-top: 10px;
    text-align: center;

}
.TxtareaContainerNAAACC span{
    display: block;
    text-align: center;
    direction: rtl;
    font-size: 12px;
}
.TxtareaContainerNAAACC textarea{
    display: block;
    margin-top: 0px;
    resize: none;
    font-family: "Shabnam";
    font-weight: 500;
    direction: rtl;
    text-align: right;
    font-size: 14px;
    width: 100%;
    height: 50px;
    overflow-y: hidden;
    overflow-x: scroll;
    border: 1px solid #d9bc9a;
    border-radius: 6px;
    padding: 2px;
}
.TxtareaContainerNAAACC textarea:focus{
    outline: none;
    border-radius: 12px;
    padding:4px;
}
.newAddressAdder button{
    position: relative;
    display: block;
    margin-top: 10px;
    margin: auto;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 6px;
    padding-bottom: 6px;
    color: black;
    background-color: var(--maincolor);
    cursor: pointer;
    font-size: 16px;
    outline: none;
    border-radius: 15px;
    margin-top: 15px;
}
.radioInputChooseMethodOrderContainer{
    direction: rtl;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 10px;
}
.radioInputChooseMethodOrderContainer div{
    border-radius: 50%;
    width: 15px;
    height: 15px;
    border: 3px solid gray;
    cursor: pointer;
    transition: 0.2s all;
}

.radioInputChooseMethodOrderContainer div:hover{
    background-color: var(--maincolor);
}

.radioInputChooseMethodOrderContainer .active{
    background-color: cyan;
}
.radioInputChooseMethodOrderContainer .active:hover{
    background-color: cyan;
}

.cartPageAddressItem{
    text-align:center;
    cursor: pointer;
    transition: 0.3s all;
}
.cartPageAddressItem:hover{
    box-shadow: 0 0 15px var(--maincolor);
}

.cartPageAddressItemActive{
    outline: 2px solid var(--maincolor);
    box-shadow: 0 0 18px var(--maincolor);
    background-color: #fefefe;
}
.ifAddressContainer{
    margin-top: 15px;
}
.ifAddressContainer h5{
    font-size: 17px;
    text-align: center;
}

.AddressesContainerCreateOrder .cartPageAddressItem:first-child{
    margin-top: 10px;
}
.ifAddressContainer a{
    text-decoration: none;
    color: #0693e3;
    display: inline-block;
    font-size: 12px;
    cursor: pointer;
    margin-top: 5px;
}
.ifAddressContainer{
    text-align: center;
}
#shippriceOrder{
    text-align: center;
    margin-top: 10px;
    font-size: 15px;
}

.PayBtnContainerPhone{
    display: flex;
    position: fixed;
    height: 120px;
    width: 100%;
    bottom: 0px;
    left: 0px;
    padding: 5px;
    background-color: white;
    z-index: 99;
    box-shadow: 0 0 10px rgb(117, 117, 117);
    flex-direction: row-reverse;
    font-family: 'ShabnamNUM',sans-serif;
}
.PayBtnContainerPhone * , .PayBtnContainerPhone2 *{
    font-family: 'ShabnamNUM',sans-serif;
}
.PayBtnContainerPhone2{
    display: none;
    padding: 5px;
    background-color: white;
    flex-direction: row-reverse;
    font-family: 'ShabnamNUM',sans-serif;
    max-width: 900px;
    height: 100px;
}
@media (min-width:900px){
    .PayBtnContainerPhone2{
        display: flex;
    }
    .PayBtnContainerPhone{
        display: none;
    }
}
.topayAmountPayO{
    width: 50%;
    direction: rtl;
    text-align: right;
    color: #7e7e7e;
    font-size: 13px;
    position: relative;
    padding:5px;
}
.topayBtnPayO{
    width: 50%;
    display: flex;
    align-items: center;
}
.topayAmountPayO span{
    display: block;
    color: black;
    font-size: 15.5px;
}
.topayAmountPayO .DCpayO{
    margin-top: auto;
    position: absolute;
    right: 0px;
    bottom: 0px;
    color: #0693e3;
    text-decoration: underline;
    cursor: pointer;
}

.topayBtnPayO button{
background-color: var(--maincolor);
  border-radius: 5px;
  color: black;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 10px;
  padding-top: 10px;
  font-size: 14px;
  transition: 0.3s all;
  cursor: pointer;
  margin-left: 20px;
}

.payrequestPageContainer h2{
    text-align: center;
    margin-top: 15px;
    font-size: 19px;
    font-family: 700;
}

.popupDiscountCode{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 300px;
    height: 150px;
    background-color: white;
    direction: rtl;
    text-align: center;
    z-index: 102;
    padding: 15px;
    border-radius: 10px;
}
.popupDiscountCode img{
    position: absolute;
    top: 10px;
    left: 5px;
    width: 25px;
    cursor: pointer;
}
.popupDiscountCode h2{
    font-size: 16px;
}
.popupDiscountCode input{
    width: 150px;
    height: 25px;
    font-size: 15px;
    border-radius: 2px;
    border: 1px solid #7e7e7e;
    border-radius: 3px;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 10px;
    display: inline-block;
    direction: ltr;
}
.popupDiscountCode span{
    font-size: 13px;
    color: red;
    text-align: center;
    direction: rtl;
    display: block;
    margin-top: 4px;
    height: 36px;
}

.popupDiscountCode input:focus-visible{
    outline: 3px solid var(--maincolor);
}
.popupDiscountCode button{
    display: inline-block;
    font-size: 15px;
    padding: 4px 10px;
    background-color: var(--maincolor);
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
}
.topayAmountPayO .nodiscount{
    opacity: 0.7;
    color: #666666;
    text-decoration: line-through;
    font-size: 13px;
}
.topayAmountPayO .nodiscount span{
    display: inline-block;
    margin-right: 10px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #b6b6b6ab;
    border-radius: 50%;
    font-size: 14px;
}

.changeAddressOrderPayO{
    text-align: center;
    margin-top: 10px;
    border-top: 2px solid var(--maincolor);
}
.changeAddressOrderPayO p{
    width: 85%;
    margin: auto;
    margin-top: 10px;
    font-size: 15px;
}
.changeAddressOrderPayO p span{
    color: black;
    text-decoration: none;
    font-size: 15px;
    cursor: default;
    display: inline;
    margin-top: 0px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.581);
    position: relative;
    line-height: 50px;
}
.changeAddressOrderPayO p span span{
    color: rgba(68, 68, 68, 0.5);
    text-decoration: none;
    font-size: 11px;
    cursor: default;
    position: absolute;
    top:calc(100% - 15px);
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    border-bottom: none;
    width: 100%;
    font-weight: 300;
}
.changeAddressOrderPayO span{
    color: #0693e3;
    text-decoration: underline;
    font-size: 13px;
    cursor: pointer;
    display: inline-block;
    margin-top: 15px;
}
.productsListContainerPayO{
    margin-top: 15px;
}
@media (min-width:900px){
    .OrderDataPayReqCont{
        margin-left: auto;
        margin-right: auto;
        max-width: 900px;
    }
}
.productsListContainerPayO h3{
    font-size: 17px;
    text-align: center;
    direction: rtl;
}


.productIteminPayO{
  min-height: 120px;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  width: calc(100% - 40px);
  margin: auto;
}
.productIteminPayO *{
    direction: rtl;
    font-family: "ShabnamNUM",sans-serif;
}
.PIPOimg{
    display: flex;
    align-items: center;
}
.PIPOimg img{
    height: 90px;
    border-radius: 15px;
}
.PIPOfp{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 80px;
    margin-right: 15px;
    margin-left: 15px;
}
.PIPOfp .PIPOfpname{
    font-size: 14px;
}

.PIPOfp .PIPOfpunitprice{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
}

.PIPOfp .PIPOfpunitprice .AfterDis{
    font-size: 12px;
    opacity: 0.7;
    color: #111;
    width: 100%;
}
.PIPOfp .PIPOfpunitprice .NoDis{
    font-size: 10px;
    opacity: 0.5;
    color: #343434;
    text-decoration: line-through;
    width: 100%;
}
.PIPOfp .PIPOfpunitprice .disA{
    font-size: 12px;
    opacity: 0.7;
    color: #111;
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 10px;
    background-color: var(--maincolor50);
    display: flex;
    align-items: center;
    justify-content: center;
}

.PIPOsp{
  margin-left: 10px;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 80px;
}
.PIPOsp .PIPOspcount{
    font-size: 13px;
    text-wrap: nowrap;
}
.PIPOsp .PIPOspfullprice{
    text-align: center;
    font-size: 15px;
}

.expencesListPayO *{
    direction: rtl;
    font-family: "ShabnamNUM",sans-serif;
}
.expencesListPayO{
    text-align: center;
}
.expencesListPayO span{
    display: block;
}
.expencesListPayO .totalproductsPricePayO{
    font-size: 14px;
}
.expencesListPayO .shippricePayO{
    font-size: 12px;
    margin-top: 5px;
}
.expencesListPayO .totalorderpricePayO{
    font-size: 16px;
    margin-top: 10px;
}

.payverinfocontainer{
    margin-top: 15px;
    text-align: center;
}
.payverinfocontainer h3{
    font-size: 16px;
    direction: rtl;
}
.payverinfocontainer .success{
    color: rgb(0, 158, 0);
}
.payverinfocontainer .error{
    color:red;
}
.payverinfocontainer span{
    display: block;
    font-size: 15px;
    margin-top: 8px;
    direction: rtl;
}
.payverinfocontainer p{
    max-width: 90%;
    font-size: 14px;
    direction: rtl;
    text-align: center;
    margin: auto;
    margin-top: 10px;
}
.payverinfocontainer a{
    color: #0693e3;
    font-size: 14px;
}
.payverinfocontainer div{
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: 13px;
    direction: rtl;
}

.ordersListACC{
    margin-top: 10px;
}


.orderItemACC{
    width: 99%;
    margin: auto;
    margin-top: 10px;
    height: 120px;
    display: flex;
    position: relative;
    box-shadow: 0 0 7px #ccc;
    border: 1px solid var(--maincolor);
    border-radius: 10px;
    padding: 15px;
    flex-direction: row-reverse;
}
.orderItemACC *{
    font-family: "ShabnamNUM",sans-serif;
    direction: rtl;
}
.orderItemACC img{
    position: absolute;
    left: 5px;
    width: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.orderItemACC div{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items:start;
}
.orderItemACC .tpart{
    margin-right: auto;
    align-items: end;
}
.orderItemACC .spart{
    justify-content: center;
}
.orderdateTimeACC{
    font-size: 12px;
    color: #666666;
    opacity: 0.7;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}
.orderIDACC{
    font-size: 14px;
}
.orderTOTALACC{
    font-size: 13px;
}
.orderSTATUSACC{
    font-size: 14px;
}
.orderItemACC button{
    font-size: 12px;
    padding: 4px 8px;
    background-color: var(--maincolor);
    border-radius: 8px;
    cursor: pointer;
}



.addresscontainerORDER{
    text-align: center;
    margin-top: 10px;
    border-top: 2px solid var(--maincolor);
    direction: rtl;
}
.addresscontainerORDER p{
    width: 85%;
    margin: auto;
    margin-top: 10px;
    font-size: 15px;
}
.addresscontainerORDER p span{
    color: black;
    text-decoration: none;
    font-size: 15px;
    cursor: default;
    display: inline;
    margin-top: 0px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.581);
    position: relative;
    line-height: 50px;
}
.addresscontainerORDER p span span{
    color: rgba(68, 68, 68, 0.5);
    text-decoration: none;
    font-size: 11px;
    cursor: default;
    position: absolute;
    top:calc(100% - 15px);
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    border-bottom: none;
    width: 100%;
    font-weight: 300;
}
.addresscontainerORDER span{
    color: #0693e3;
    text-decoration: underline;
    font-size: 13px;
    cursor: pointer;
    display: inline-block;
    margin-top: 15px;
}

.changeAddressOrder{
    width: 95%;
    margin: auto;
    margin-top: 10px;
}
.OrderPageContainer h5{
    text-align: center;
    font-size: 15px;
    margin-top: 10px;
}
.changeAddressBtnOrder{
    position: relative;
    display: block;
    margin-top: 10px;
    margin: auto;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 6px;
    padding-bottom: 6px;
    color: black;
    background-color: var(--maincolor);
    cursor: pointer;
    font-size: 16px;
    outline: none;
    border-radius: 15px;
    margin-top: 10px;
}
.changeAddressBtnOrder:disabled{
    cursor: default;
    opacity: 0.5;
}
.OrderPageContainer{
    width: 98%;
    margin: auto;
    margin-top: 15px;
    max-width: 900px;
}

.OrderPageContainer h2{
    text-align: center;
    font-size: 19px;
    direction: rtl;
}
.OrderPageContainer h4{
    font-size: 17px;
    text-align: center;
    margin-top: 10px;
    direction: rtl;
}
.payOrder{
    position: relative;
    display: block;
    margin: auto;    
    margin-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: black;
    background-color: var(--maincolor);
    cursor: pointer;
    font-size: 14px;
    outline: none;
    border-radius: 15px;
}
.orderpagedates{
    margin-top: 10px;
    direction: rtl;
}
.orderpagedates span{
    display: block;
    text-align: center;
    font-size: 12px;
    color: #939393;
    opacity: 0.7;
    margin-top: 4px;
    direction: rtl;
}

.orderPTN{
    display: block;
    direction: rtl;
    margin-top: 7px;
    text-align: center;
    font-size: 16px;
    text-decoration: underline;
}
.orderREFID{
    display: block;
    direction: rtl;
    margin-top: 7px;
    text-align: center;
    font-size: 12px;
}
.orderRC{
    display: block;
    direction: rtl;
    margin-top: 7px;
    text-align: center;
    font-size: 12px;
}
.orderPRICELIST span{
    display: block;
    text-align: center;
    margin-top: 5px;
    font-size: 15px;
    font-family: "ShabnamNUM",sans-serif;
}
.orderPRICELIST .totalproductspriceORDER{
    font-size: 14px;
    margin-top: 8px;
    font-weight: 300;
}

.orderPRICELIST .shippingpriceORDER{
    margin-top: 6px;
    font-size: 13px;
    font-weight: 300;
}
.orderPRICELIST .totalorderpriceORDER{
    margin-top: 7px;
    font-size: 16px;
    font-family: 500;
}

.orderPRICELIST .discountSubtractedORDER{
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.6;
    font-weight: 300;
}
.orderPRICELIST .paidamountORDER{
    font-weight: 700;
    margin-top: 10px;
    font-size: 17px;
}

.commentsListACC{
    width: 97%;
    margin: auto;
    margin-top: 15px;
}
.commentContainerAccountPage{
    box-shadow:0 0 8px #666666;
    border: 1px solid var(--maincolor);
    border-radius: 15px;
    padding: 10px;
    min-height: 120px;
    width: 100%;
    margin-top: 10px;
    position: relative;
}
.accprodcom{
    display: block;
    font-size: 16px;
    text-wrap: nowrap;
    line-clamp: 1;
    overflow: hidden;             /* 👈 hide overflowed text */
    text-overflow: ellipsis;      /* 👈 show "..." */
    direction: rtl;
}
.accprodcom a{
    color: #0693e3;
}
.accstatcom{
    font-size: 14px;
    display: block;
    margin-top: 4px;
}
.accstatcom span{
    font-size: 15px;
}
.accrejcom{
    font-size: 13px;
    display: block;
    margin-top: 4px;
}
.accdatecom{
    font-size: 11px;
    color: #666666;
    opacity: 0.7;
    margin-top: 4px;
}

.acccontentcom{
    font-size: 13px;
    font-weight: 500;
    margin-top: 12px;
    direction: rtl;
}

.accrepcom{
    font-size: 10px;
    margin-top: 15px;
}

.commentContainerAccountPage img{
    width: 20px;
    cursor: pointer;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}

.adminSwitch{
    position: absolute;
    top: 10px;
    right: 10px;
}
.popupdelcomment{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 250px;
    min-height: 100px;
    background-color: white;
    box-shadow: 0 0 10px gray;
    border-radius: 5px;
    padding: 20px;
    z-index: 101;
}
.closedelcommentPopup{
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: #00000045;
}

.popupdelcomment span{
    text-align: center;
    font-size: 16px;
    text-align: center;
    direction: rtl;
    display: block;
}

.popupdelcomment button{
    display: block;
    margin: auto;
    margin-top: 10px;
    font-size: 14px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    outline: none;
    border: 1px solid black;
    background-color: var(--maincolor);
    border-radius: 4px;
    cursor: pointer;
}
.popupdelcomment .confirmBTN{
    background-color: rgb(144, 255, 144);
    color:black;
    display: inline-block;
    margin-right: 5px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 9px;
    border: 1px solid lime;
}
.popupdelcomment .rejectBTN{
    background-color: rgb(255, 116, 116);
    color:black;
    display: inline-block;
    margin-left: 5px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 9px;
    border: 1px solid red;
}
.hiddenidforadmin{
    display: none;
}

.buttonresponsiceproductpage{
    display: none;
}

@media (min-width : 650px){
    .flexresponsiveproductpage{
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        max-width: 900px;
        margin:auto;
    }
    .ImagesContainerPRp{
        width: 400px;
        margin-left: auto;
        margin-right: 15px;
    }
    .pricePRp{
        margin-left: auto;
        margin-right: auto;
        margin: auto;
    }
    .descPRp{
        margin-left: auto;
        margin-right: auto;
        max-width: 900px;
    }
    .borderPr{
        margin-left: auto;
        margin-right: auto;
        max-width: 900px;
    }
    .commentsPartPrp{
        margin-left: auto;
        margin-right: auto;
        max-width: 900px;
    }
.buttonresponsiceproductpage{
    background-color: var(--maincolor);
    border-radius: 5px;
    color: black;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 10px;
    padding-top: 10px;
    font-size: 14px;
    margin-right: 30px;
    margin-left: auto;
    transition: 0.3s all;
    cursor: pointer;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -80px;
    width: 180px;
    height: 50px;
}

.buttonresponsiceproductpage:hover{
    background-color: var(--maincolor80);
    opacity: 0.8;
}

.buttonresponsiceproductpage:active{
    background-color: var(--maincolor50);
    opacity: 0.4;
}
.addToCartBtnPRp{
    display: none;
}

}