@charset "UTF-8";
/* Please ❤ this if you like it! */
/* Follow Me https://codepen.io/designfenix */
/* @import url("https://fonts.googleapis.com/css?family=Poppins:wght@100,200;400;700");  */
@font-face{
	font-family:"iransans";
	src:url('css/font/IRANSansWeb.woff2');
}
@font-face{
	font-family:"iransansb";
	src:url('css/font/snw2bold.woff');
}
@font-face{
	font-family:"kofi";
	src:url('css/font/kofi.ttf');
}
@font-face{
	font-family:"homa";
	src:url('css/font/bhoma.ttf');
}
body {
  background: var(--clr);
	text-align: right;
font-family: "iransans";
direction: rtl;
}
.icon0{ max-width:16px;}
.icon1{ max-width:32px;}
.icon2{ max-width:64px;}
.icon3{ max-width:128px;}

.module {
  background: white;
  border-radius: 11px;
  padding: 5px 20px;
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.1);
  height: 550px;
  font-family: "iransans";
}
.module label{
	font-weight: bold;
    color: var(--c-grey-900);
}


.module .tabs {
  margin: 2px 0;
  position: relative;
}
@media (max-width: 768px) {
  .module .tabs {
    margin-bottom: 0;
  }
}
.module .tabs .slide-line {
     display: block;
    padding: 0;
    margin-top: 10px;
    background: none #efc352;
    position: absolute;
    height: 10px;
    border-radius: 5px;
    z-index: 0;
    left: 0px;
    width: 140px;
    top: 21px;
}
.module .tabs ul {
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
}
.module .tabs ul li {
  display: block;
  transition: ease all 0.3s;
  color: #aaa;
  cursor: pointer;
  font-size: 14px;
}
.module .tabs ul li.active {
  transform: scale(1.3);
  color: #212121;
  font-weight: bold;
}
.module .products-wrapper {
  width: calc(100% + 20px);
  margin-left: -20px;
  position: relative;
  height: 100%;
}
.module .products-wrapper .slider {
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  position: absolute;
  overflow: hidden;
  padding: 30px 0;
}
.module .products-wrapper .slidermenu {   /*add p*/
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  position: absolute;
  overflow: hidden;
  padding: 30px 0;
}
.module .products-wrapper .slider .slick-list {
  padding: 0 30% 0 0;
}
.module .products-wrapper .slidermenu .slick-list {  /*add p*/
  padding: 0 30% 0 0;
}
.module .products-wrapper .slider .card {
  z-index: 2;
  display: inline-block;
  background-color: #fafbfd;
  border-radius: 20px;
  border: none;
  transition: ease all 0.3s;
  margin: 0 15px;
  position: relative;
	box-shadow: 1px 1px 2px rgb(0 0 0 / 8%);
}
.module .products-wrapper .slidermenu .card { /*add p*/
  z-index: 2;
  display: inline-block;
  background-color: #d5d5d5;
  border-radius: 20px;
  border: none;
  transition: ease all 0.3s;
  margin: 0 15px;
  position: relative;
 box-shadow: 1px 1px 2px rgb(0 0 0 / 8%);
 padding: 8px 20px !important;

}
.module .products-wrapper .slider .card:focus {
  box-shadow: none;
  border: none;
  outline: none;
}
.module .products-wrapper .slider .card .calories {
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
  vertical-align: middle;
	direction: rtl;
}
.module .products-wrapper .slider .card .calories .icon {
  vertical-align: middle;
}
.module .products-wrapper .slider .card .calories .icon svg {
  width: 20px;
  height: 20px;
}
.module .products-wrapper .slider .card .calories .text {
  font-size: 12px;
  color: #aaa;
  line-height: 20px;
  vertical-align: middle;
}
.module .products-wrapper .slider .card .loved {
  position: absolute;
  left: 15px;
  top: 15px;
  cursor: pointer;
}
.module .products-wrapper .slider .card .loved svg {
  fill: #aaa;
}
.module .products-wrapper .slider .card .card-img-top {
  pointer-events: none;
  width: 150px;
  height: 150px;
  margin: 30px auto;
  margin-top: 60px;
  display: block;
  border-radius: 100%;
  overflow: hidden;
  border: 8px solid white;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1), 5px 3px 15px #f7e3ce;
}
.module .products-wrapper .slider .card .card-body {
  padding: 0 10px;
}
.module .products-wrapper .slider .card .card-body .card-title {
  color: #212121;
  font-weight: 200;
  font-size: 17px;
  margin: 0;
}
.module .products-wrapper .slider .card .card-body .card-text {
margin-top: 5px;
    color: var(--c-grey-900);
    font-size: 11px;
    font-weight: 200;
}
.module .products-wrapper .slider .card .card-body .card-price {
  margin-top: 5px;
  color: #212121;
  font-size: 23px;
  font-weight: 400;
  margin-top: 20px;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
.module .products-wrapper .slider .card .card-body .btn {
  float: right;
  padding: 0;
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 100%;
  box-shadow: 3px 5px 20px rgba(0, 0, 0, 0.1);
}

.dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}
.dribbble img {
  display: block;
  height: 28px;
}

.dev {
  position: fixed;
  top: 0;
  left: 0;
  padding: 1em;
  background-color: white;
}


/*start menu footer*/

.navigation {
position: fixed;
    height: 70px;
    background: var(--c-purple-300);
    display: flex;
    justify-content: center;
    align-items: center;
	z-index: 2;
    bottom: -1px;
    width: 100%;
	    border-radius: 3px;
}
.navigation ul {
  display: flex;
  width: 350px;
}
.navigation ul li {
  position: relative;
  list-style: none;
  width: 70px;
  height: 70px;
  z-index: 1;
}
.navigation ul li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  text-align: center;
  font-weight: 500;
}
.navigation ul li a .icon {
  position: relative;
  display: block;
  line-height: 75px;
  font-size: 1.5em;
  text-align: center;
  transition: 0.5s;
  color: var(--clr);
}
.navigation ul li.active a .icon {
  transform: translateY(-32px);
}
.navigation ul li a .text {
    position: absolute;
    color: hsl(0deg 0% 100%);
    font-weight: bold;
    font-size: 0.7em;
    transition: 0.5s;
    opacity: 0;
    transform: translateY(20px);
    text-shadow: 0 0 6px #7b7b7b;
}
.navigation ul li.active a .text {
  opacity: 1;
  transform: translateY(17px);
}
.indicator {
  position: absolute;
  top: -50%;
  width: 70px;
  height: 70px;
  background: var(--nar);
  border-radius: 50%;
  border: 6px solid #fff;
  transition: 0.5s;
	    box-shadow: -1px -5px 9px rgb(0 0 0 / 11%);
}
.indicator::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -22px;
  width: 20px;
  height: 20px;
  background: transparent;
  border-top-right-radius: 20px;
  box-shadow: 1px -10px 0 0 #fff;
}
.indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -22px;
  width: 20px;
  height: 20px;
  background: transparent;
  border-top-left-radius: 20px;
  box-shadow: -1px -10px 0 0 #fff;
}

/* Indicator Transitions */
.navigation ul li:nth-child(1).active ~ .indicator {
  transform: translateX(calc(70px * 0));
}
.navigation ul li:nth-child(2).active ~ .indicator {
  transform: translateX(calc(70px * 1));
}
.navigation ul li:nth-child(3).active ~ .indicator {
  transform: translateX(calc(70px * 2));
}
.navigation ul li:nth-child(4).active ~ .indicator {
  transform: translateX(calc(70px * 3));
}
.navigation ul li:nth-child(5).active ~ .indicator {
  transform: translateX(calc(70px * 4));
}
/*start login form*/

.wrapper {
  display: flex;
  align-items: center;
  flex-direction: column; 
  justify-content: center;
  width: 100%;
  min-height: 100%;
  
}

#formContent {
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  background: #fff;
  padding: 30px;
  width: 100%;
  position: relative;
  padding: 0px;
 
box-shadow: 0 5px 20px 0 rgba(150, 132, 254, 0.1), 0 15px 30px 0 rgba(150, 132, 254, 0.05);
	
  text-align: center;
}

.formFooter {
  background-color: var(--nar);
    padding: 10px;
    text-align: center;
    -webkit-border-radius: 10px 10px 0px 0px;
    border-radius: 10px 10px 0px 0px;
    color: white;
    text-shadow: 0 0 2px #656566;
    font-size: 1.2rem;
}



/* TABS */




/* FORM TYPOGRAPHY*/



input[type=tel] {
background-color: #f6f6f6; */
    color: #202025;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 5px;
    width: 85%;
    border: none;
    border: 1px solid var(--c-purple-300);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    font-family: monospace;
}

input[type=tel]:focus {
  background-color: #fff;
  /* border: 2px solid #cabff6;*/
}

input[type=tel]:placeholder {
  color: #fff;
}
.form-control:focus {
    box-shadow: none;
}


/* ANIMATIONS */

/* Simple CSS3 Fade-in-down Animation */
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn {
  opacity:0;
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fadeIn.first {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.fadeIn.second {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.fadeIn.third {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.fadeIn.fourth {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

/* Simple CSS3 Fade-in Animation */
.underlineHover:after {
  display: block;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 2px;
  background-color: #56baed;
  content: "";
  transition: width 0.2s;
}

.underlineHover:hover {
  color: #0d0d0d;
}

.underlineHover:hover:after{
  width: 100%;
}



/* OTHERS */

*:focus {
    outline: none;
} 

#icon {
  width:60%;
}
.footercover{
background-color: #ffffff;
    position: fixed;
    min-height: 80px;
    bottom: 0px;
    display: block;
    width: 100%;
    z-index: 2;
    border-radius: 7px;
	box-shadow: -1px -5px 9px rgb(0 0 0 / 11%);
}

.logo{
	width: 47px !important;
}
/*header*/
#app{
	padding-top: 80px;
}
.app-header {
	padding: 8px 10px 5px 10px;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    z-index: 2;
    background-color: white;
    width: 100%;
	box-shadow: 0px 4px 4px #00000026;
}

.app-header-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-grey-700);
  cursor: pointer;
  transition: 0.15s ease;
	background-color: #fff;
	 background-color: var(--c-grey-000);
  box-shadow: 0 5px 15px rgba(150, 132, 254, 0.15);
	
}

.app-header-btn--active, .app-header-btn:hover {
  background-color: var(--c-grey-000);
  box-shadow: 0 5px 15px rgba(150, 132, 254, 0.55);
}
.app-header-btn--notification {
  position: relative;
}
.app-header-btn--notification:after {
  content: "";
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--c-purple-500);
  top: 8px;
  right: 8px;
	animation: heartbeat 1s infinite;
}

/**/
.list_book li{
	background-color: var(--light);
	padding: 5px 10px;
	border-radius: 8px;
	margin-top: 5px;
	font-size: 0.8rem;
	color: #959596;
}
.list_book li>a{
   
    padding: 2px 10px;
    border-radius: 4px;
    color: #ff0000;
    position: relative;
    float: left;
    right: 10px;
}
.list_book span{
	font-weight: bold;
	color: #000;
}

.book_icon{
	width: 20px;
}
.book_current{
	color: var(--nar) !important;
    float: left;
    margin-top: -20px;

}

.trips_status{
    color: #ffffff;
    background-color: #ffaa57;
    padding: 5px 6px;
    border-radius: 6px;
    /* border: 1px solid #ffac79; */
    margin-bottom: 9px;
    font-weight: 700;
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
}

#trip_list li{
background-color: #fff !important;
    border: 1px solid #c0c0c0;
}
.checkpay{
background-color: #f4f4f4;
    border-radius: 8px;
    padding: 2px 10px;
    border: 1px solid #dfdfdf;
}
.checkpay img{ max-width: 31px;}
.alert-trip_deny{
	font-size:0.9rem;
}
#profile input,label{
	font-size: 0.8rem;
}
#profile .follow{
	color: #ccc;
}
#profile .follow span{
	color: var(--c-grey-900);
}
#profile .module{
background: rgb(255,255,255);
    /* background: linear-gradient(346deg, rgba(255,255,255,1) 86%, rgb(150 132 254) 45%); */
}
.profile_view_boxspan{
	padding: 6px 4px;
    background-color: var(--light);
    display: block;
    border-radius: 5px;
}
.btn-xs{
    font-size: 0.7rem;
    padding: 3px 9px;
    margin-top: 1px;
}
.profile_view_boxspan span{
	font-size: 0.7rem;
	font-weight: 100;
}
.profile_avatar{
	 background-image: url(./img/man.avif);
    background-size: contain;
    width: 100%;
    min-height: 100px;
    background-repeat: no-repeat;
    background-position-x: 50%;
}
#profile .box1{ max-height: 20px;}
.box1{
    height: 50px;
    width: 100%;
    border-radius: 10px;
}
.box2{
    height: 50px;
    width: 150px;
    border-radius: 10px;
	display: inline-flex;
}
.circle{
    height: 80px;
    width: 80px;
    border-radius: 50%;
	
}

.saye{
    overflow: hidden;
    background: #D0D0D0;
}

.saye::before{
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    animation: loading 1s infinite;
    background: linear-gradient(to right, transparent,#D9D9D9,transparent);
}

@keyframes loading {
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(100%);
    }
}
/*opt form*/

.otp-verify-form .form-control {
-webkit-transition-duration: .5s;
    transition-duration: .5s;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50px;
    flex: 0 0 50px;
    max-width: 50px;
    width: 50px;
    padding: 12px;
    border: 0;
    text-align: center;
    font-size: 1.25rem;
    background-color: #cabff6;
    color: #fff;
}
.otp-verify-form .form-control:focus {
    background-color: #ebebeb;
    color: #020310;
}
/*hert*/
.heart {
    animation: heartbeat 1s infinite;
}
@keyframes heartbeat
{
  0%
  {
    transform: scale( .75 );
  }
  20%
  {
    transform: scale( 1 );
  }
  40%
  {
    transform: scale( .75 );
  }
  60%
  {
    transform: scale( 1 );
  }
  80%
  {
    transform: scale( .75 );
  }
  100%
  {
    transform: scale( .75 );
  }
}
.red{
color:red !important;
}
 .blink {
            animation: blinking 0.5s infinite;
        }
        
        @keyframes blinking {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.3;
            }
            100% {
                opacity: 1;
            }
        }


.nar{ 
	color: var(--nar);
}
.ban{
	color : var(--c-purple-500);
}
.btn-nar{
	background-color: var(--nar);
	color: #fff !important;
	border-width: 0px;
}
.btn-abi{
	background-color: var(--c-purple-300);
	color: #fff !important;
	border-width: 0px;
}
.rial{
	font-size:0.7em;
}

.catbtn{
	text-align: center;
    padding: 0px;
    margin: 10px 0px;
    font-size: 0.8em;
} 
.catbtn img{
min-width: 62px;
    max-height: 62px;
    min-height: 62px;
    background-color: var(--c-grey-000);
    border-radius: 8px;
    padding: 13px;
    box-shadow: 1px 1px 2px rgb(0 0 0 / 18%);
	cursor: pointer;
}
.catbtn span{cursor: pointer;}
.text-nar{
	color:var(--nar);
}

.probox{
	background-color: var(--c-grey-000);
    margin-top: 10px;
    border-radius: 8px;
    padding: 10px 0;
}
.probox div{
	padding: 0px;
}
.probox .badge_title{
	position: absolute;
    top: -10px;
    left: 0px;
    font-size: 0.8rem;
    border-radius: 8px 0;
	background-color: var(--c-purple-500);
}

.probox{
    font-size: 0.8em;
} 
.probox .pro_img{
	padding: 5px;
    margin: 0px 8px 0px 0;
    border-radius: 12%;
    min-width: 80%;
}
.probox .siza_ha{
    margin-right: 0.1rem;
    padding: 4px 13px;
    color: #6f7274;
    background-color: var(--c-purple-100);
}
.probox .siza_ha span{
    color: var(--nar);
	    margin-right: 8px;
}
.have_in_cart{
	margin-right: 0px;
}
.probox .ico_sizeha{
	width:20px;
}
.pro_img{
	width: 70px;
	height: auto;
}
.probox h1{
	font-size: 0.9em;
    font-weight: 900;
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
    color: var(--c-grey-900);
}
.probox h2{
	    font-size: 0.8em;
    color: var(--c-grey-700);
	padding: 0 0px 0px 12px;
}
.probox .normal_price{
	color: var(--nar);
}
.probox .price_box{
	font-family : homa;
}
.ccbox{ text-align : end;}
.ccbox .addcart{
margin-left: 4px;
}

.cart_cc{
   font-family: homa;
    position: absolute;
    background-color: var(--nar);
    color: var(--c-grey-000);
    border-radius: 50%;
    min-width: 22px;
}
.cartprice{
font-size: 0.7rem;
    color: var(--c-grey-700);
    font-family: b yekan;
}
.rowcart{
    margin-top: 5px;
    background-color: #fff;
    padding: 5px 0px;
    border-radius: 8px;
	border: 1px solid #ccc;
}
.rowcart .text0{
	color: var(--c-grey-900);
	font-weight: 900;
}
.img_cart{
	max-height:30px;
	max-width: 30px;
}
.text_describ_cart{
	font-size:0.6rem;
	
}
.empty_cart{
	width:100%;
	height: auto;
	margin-top:100px;
	max-width: 400px;
}
.totalp{ 
	text-align: left;
    font-family: homa;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--c-grey-700);
	 
}

.div-short{
	   max-width: 50px;
   margin: 22px 0px 0px 0px;
    padding: 9px 15px 0px 0px;
}
.div-short-nil{
    padding: 0px 0px;
	margin: 22px 0px 0px 0px;
}
.div-short-nil2{
    
    margin: 22px 0px 0px 0px;
}
.div-short-nil span{
	font-size: 0.9rem;
	display: block;
	font-family: homa;
	margin-top: -3px;
	    color: #646464;
}
.emtiaz{
	color:#ccc;
	text-align: left;
}
.div-shortb{
	background-color: var(--c-grey-500);
    border-radius: 3px;
    direction: rtl;
    padding: 3px 5px;
    font-size: 0.9rem;
    font-family: homa;
    color: var(--nar);
}
.carttitle{
	font-size: 0.8rem;
    color: var(--c-grey-900);
}
.btncart_top{
 text-align: center;
    padding: 5px 11px;
    border-radius: 13px;
}

.cart_footer{
	background-color: #fff;
	border-radius: 8px;
	padding-bottom: 10px;
}
.cart_footer .forpay{
	    color: var(--nar);
}
.cart_footer div{
	margin-top: 10px;
}
.cart_footer b{
	font-family: homa;
}
.cart_footer .col-8{
	text-align: left;
    border-bottom: 1px dotted var(--c-grey-500);
}
.cart_footer .badge-warning{
	    color: #fff;
    background-color: var(--c-purple-300);
    font-family: cursive;
    /* margin-bottom: 6px; */
    position: absolute;
    margin: -1px -70px 0px 0px;
}
.adress{
background-color: var(--c-grey-000);
    padding: 9px 4px;
    border-radius: 6px;
    box-shadow: 1px 1px 2px rgb(0 0 0 / 18%);
    text-align: right;
}
.adress .btn-gery{
margin-top: 5px;
    border-radius: 5px;
    font-size: 0.7rem;
    background-color: #adadb3;
    color: #fff;
}
.adress .btn-gery-select{
margin-top: 5px;
    border-radius: 5px;
    font-size: 0.7rem;
    background-color: var(--nar);
    color: #fff;
}
.adress b{
	font-weight: bold;
	font-size: 0.8rem;
}
.adres_desc{
	    font-size: 0.75rem;
    color: var(--c-grey-900);
    display: block;
}
.adres_tell{
	 font-size: 0.75rem;
    color: var(--c-grey-900);
	font-family: homa;
}
.plus_address{
background-color: white;
    color: var(--nar);
    font-size: 1rem;
}
.adress input{
	font-size: 0.8rem;
}
.setdef{
	position: absolute;
	 color: var(--nar);
}
.setdefrow{
	border-radius: 8px;
    padding: 1px 1px;
	    border: 1px solid transparent;
    animation: gradientBorder 5s linear infinite;
	 background: linear-gradient(to right, #ffffff, #fff) content-box, conic-gradient(from var(--angle), 
		 var(--nar) 0deg, var(--c-grey-000) 53.3deg, var(--nar) 90.46deg, var(--nar) 126.24deg, var(--c-grey-000) 178.82deg, var(--nar) 360deg) border-box;

}
.disabled_row{
    background-color: #d8d8d8;
    border-radius: 4px;
	border: 2px solid #babdc9;
}
.logo_pos{
	max-width: 100px;
}
.popupbox .img{
	max-width: 90%;
	height: 50px;
	    margin-right: 10px;
	margin-top: 5px;
}
.popupbox div{
	text-align : right !important;
}
.popupname{
	text-align: right;
}
.popupbox .normal_price{
	color: var(--nar);
    font-family: 'iransans';
    font-size: 0.6em;
    font-weight: bold;
}
.popupbox .normal_price span{
   color: var(--nar);
    font-family: 'iransans';
    font-size: 2.2em;
}
.popupbox .main_price{
	color: #bebebe;
    font-size: 0.70em;
    font-weight: bold;
    text-decoration: line-through;
}
.popupbox .row1{

    border-radius: 8px;
    padding: 1px 1px;
    margin-top: 4px;
}
.row1 div{
	padding: 0px;margin-top: 5px;
}
.plus img{
	width: 13px;
}
.mins img{
	width: 12px;
}


.text-nar{
	color:var(--nar);
}
.hed{
background-color: var(--c-grey-000);
    padding: 9px 4px;
    border-radius: 6px;
    display: block;
    box-shadow: 1px 1px 2px rgb(0 0 0 / 18%);
    text-align: center;
}

.btn_menu_fast_css{
	text-align: center;
	font-size: 0.7rem;
	padding: 6px 1px;
	margin:0 2px !important;
	border-radius: 8px !important;
}

.bg_animation{
	animation: change-color-anim 3s linear infinite;
}
@keyframes change-color-anim {
	0%,100%{
		background-color: var(--nar);
	}
	50%{
		background-color: #fff;
	}
}

/*check box start*/
.auios-label {
  display: inline-block;
}

.auios-toggle {
 width: 3.4285714286rem;
    height: 1.5rem;
    border-radius: 2rem;
    -webkit-appearance: initial;
    position: relative;
    background-color: #fff;
    box-shadow: inset 0 0 0 0 #efeff4;
    line-height: 2.375rem;
    vertical-align: middle;
    border: 0.1rem solid #efeff4;
    transition: box-shadow 0.28s ease-in-out, border-color 0.28s ease-in-out;
}
.auios-toggle:before {
  content: "";
  position: absolute;
  right: 59%;
  left: 0;
  top: 0;
  bottom: 0;
  border: 0.025rem solid rgba(0, 0, 0, 0.12);
  box-shadow: 0px 0.375rem 0.625rem 0px rgba(0, 0, 0, 0.15);
  background-color: #fff;
  display: block;
  border-radius: 1rem;
  background-clip: padding-box;
  z-index: 2;
  transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
}
.auios-toggle:active {
  box-shadow: inset 0 0 0 1rem #efeff4;
}
.auios-toggle:active:before {
  right: 35%;
}
.auios-toggle:active:checked:before {
  left: 35%;
}
.auios-toggle:focus {
  outline: none !important;
}
.auios-toggle:checked {
box-shadow: inset 0 0 0 1rem var(--nar);
    border-color: #ffffff;
}
.auios-toggle:checked:before {
  left: 59%;
  right: 0;
}
/*check box end*/

.off_red_line{
	color: #cfcfcf;
	font-family: b yekan ;
	font-size: 0.8rem;
}
.byekan{ 
	font-family: b yekan;
}
.strikethrough {
  position: relative;
}
.strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: inherit;
  top:9px;
  -webkit-transform:rotate(-1deg);
  -moz-transform:rotate(-1deg);
  -ms-transform:rotate(-1deg);
  -o-transform:rotate(-1deg);
  transform:rotate(-1deg);
  color: #ccc;
}

.btn-light {
	background-color: var(--c-grey-500) !important;
	font-weight: bold;
}
.order_date{ 
	font-size:0.8rem;
	text-align: right;
	color: var(--c-grey-700);
}
.spent_fa{
	color:var(--c-purple-500);
	font-size: 0.7rem;
}
.status_fa{
	color:var(--c-purple-500);
	font-size: 0.7rem;
}
.row_item{

    background-color: #fff;
    padding: 5px 0px;
    border-bottom-color: #000;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
}
.head_title{
	font-weight:bold;
	text-align: center;
}
.text00{ font-size:0.6rem; font-weight: bold;}
.text0{ font-size:0.7rem; font-weight: bold;}
.text0{ font-size:0.8rem; font-weight: bold;}
.homa{font-family: homa;}


div:where(.swal2-container) h2:where(.swal2-title) {
	font-size: 1em !important;
}
	
/*======start spine=====*/


.boxspine {

    padding: 1px 1px;
    /* border-radius: 2px; */
    border: 1px solidt ransparent;
    animation: gradientBorder 20s linear infinite;
    background: linear-gradient(to right, #fafafa, #ffffff) content-box, conic-gradient(from var(--angle), #e4e4e4 0deg, #000000 53.3deg, #c7c7c7 90.46deg, #c1c1c1 126.24deg, #dddddd 178.82deg, #c8c8c8 360deg) border-box;
}

@keyframes gradientBorder {
	from {
		--angle: 0turn;
	}
	to {
		--angle: 1turn;
	}
}

@property --angle {
	syntax: "<angle>";
	inherits: true;
	initial-value: 0turn;
}
.heartbeat {
  animation: heartbeat 5.5s infinite; /* Apply the animation */
}

@keyframes heartbeat {
  0% {
    transform: scale(0.9); /* Initial state */
  }
  25% {
    transform: scale(1); /* Expand slightly */
  }
  50% {
    transform: scale(0.9); /* Return to original size */
  }
  75% {
    transform: scale(1); /* Contract slightly */
  }
  100% {
    transform: scale(0.9); /* Return to original size */
  }
}

@keyframes irregular-float {
 0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
}

.irregular-float {
  animation: irregular-float 5s ease-in-out infinite;
}
.irregular-float2 {
  animation: irregular-float 4s ease-in-out infinite;
}

/*=========end spine */
#connection-status {
          position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    padding: 7px;
    text-align: center;
    font-weight: bold;
    z-index: 9999;
    display: none;
    transition: all 0.3s ease;
        }
        
        .offline {
            background-color: #fa0d0d;
            color: white;
        }
        
        .online {
            background-color: #51cf66;
            color: white;
        }
/*====xAlert================*/
.alert{
background: #ffffff;
    padding: 11px 29px;
    min-width: 95%;
    position: fixed;
    right: 0;
    top: 26px;
    border-radius: 7px;
    border-right: 10px solid var(--nar);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 1100;
	
}
.alert.showAlert{
  opacity: 1;
  pointer-events: auto;
}
.alert.show{
  animation: show_slide 1s ease forwards;
}
@keyframes show_slide {
  0%{
    transform: translateX(100%);
  }
  40%{
    transform: translateX(-10%);
  }
  80%{
    transform: translateX(0%);
  }
  100%{
    transform: translateX(-10px);
  }
}
.alert.hide{
  animation: hide_slide 1s ease forwards;
}
@keyframes hide_slide {
  0%{
    transform: translateX(-10px);
  }
  40%{
    transform: translateX(0%);
  }
  80%{
    transform: translateX(-10%);
  }
  100%{
    transform: translateX(100%);
  }
}
.alert .fa-exclamation-circle{
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #ce8500;
  font-size: 30px;
}
.alert .msg{
padding: 0 20px;
    font-size: 14px;
    color: var(--nar);
    font-weight: bold;
}
.alert .close-btn{
position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 4px;
    cursor: pointer;
}
.alert .close-btn img{
	max-width: 30px;
}

.alert .close-btn .fas{
  color: #ce8500;
  font-size: 22px;
  line-height: 40px;
}


.swipe-feedback {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.swipe-feedback.active {
    opacity: 1;
}

.btn-light2{
	  background-color: #fafafa;
    /* color: #0029ff; */
    border: solid 1px #cfcfcf;
    border-radius: 3px;
}

.slider_offha{
	overflow: hidden;
    margin-top: 2rem;
    padding-top: 1rem;
}
.slide_offha{
z-index: 2;
    display: inline-block;
    background-color: #fafbfd;
    border-radius: 9px;
    border: none;
    transition: ease all 0.3s;
    margin: 20px 10px;
    position: relative;
    box-shadow: 1px 1px 2px rgb(0 0 0 / 8%);
    padding: 10px;
    text-align: center;
}
.slide_offha .image{
max-height: 76px;
    width: auto;
    position: relative;
    top: 11px;
    right: 11px;
    mix-blend-mode: multiply;
}
.slide_offha .span_image{
min-width: 100px;
    min-height: 101px;
    display: inline-grid;
    border-radius: 50%;
    background-image: repeating-linear-gradient(39deg, #ffffff, #dfdfdf 120px);
    background-repeat: no-repeat;
    position: relative;
    left: 17px;
    top: -7px;
    box-shadow: -3px 9px 7px 0px rgb(72 61 61 / 50%);
    border: 1px solid #ffffff;
}
.slide_offha .span_main{
background-image: linear-gradient(91deg, #0000001a, transparent);
    border-radius: 0 30px;
    display: block;
    position: relative;
    top: -20px;
    left: 17px;
}
.slide_offha .title{
	font-size: 0.8rem;
    font-weight: bold;
    color: #ff3700;
    text-shadow: -4px 4px 3px #b9b9b9;
}

.offha_head{ 
    background-color: #e4e4e4;
    min-height: 41px;
    border-radius: 8px;
    border: 2px solid #ffffff;
    box-shadow: -3px 10px 5px 0px rgb(0 0 0 / 16%);
}
.offha_logo{ 
    background-image: url(img/offha.png);
    min-height: 200px;
    background-repeat: no-repeat;
    background-position-x: center;
    position: relative;
    top: -92px;
}
.number_off{
   color: #ffffff;
    font-size: 1rem;
    font-weight: bold;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: #ffb400;
    border-radius: 20px;
    padding: 5px 9px;
    text-shadow: -1px 1px 2px rgb(0 0 0 / 38%);
}
.number_off::after{
	content: '%';
    font-size: 1rem;
    color: #ff0000;
    padding-left: 5px;
    text-shadow: none;
}

.banner1{
	
    border-radius: 10px;
    margin-top: 39px;

}
.banner1 img{
	    max-width: 100%;
}

.btn_view_order{
	font-size: 0.6rem;
	color:#000;
	float: left;
	    border-bottom: 1px solid var(--nar);
}

.success_buy{
font-weight: bold;
    font-size: 20px;
    position: relative;
    transform: rotate(339deg);
    display: inline-block;
    color: #ffffff !important;
    background-color: #46c42d;
    border-radius: 8px;
    padding: 0px 6px;
    right: 0px;
    box-shadow: -3px 4px 3px 1px rgb(0 0 0 / 19%);
}
.bonus_c{
	font-weight: bold;
    font-size: 20px;
    position: relative;
    transform: rotate(339deg);
    display: inline-block;
    color: #ffffff !important;
    background-color: #887eff;
    border-radius: 8px;
    padding: 0px 6px;
    right: 0px;
    box-shadow: -3px 4px 3px 1px rgb(0 0 0 / 19%);
}

.adres_id{
	display:none;
}

* {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}