@charset "UTF-8";
.hide {
  display: none;
  transition: none;
}

.flex {
  display: flex;
}
.flex.gap {
  gap: 10px;
}
.flex.rows, .flex.row {
  flex-direction: column;
}
.flex.cols, .flex.col, .flex.column, .flex.columns {
  flex-direction: row;
}
@media screen and (min-width: 300px) and (max-width: 640px) {
  .flex.mb-rows, .flex.mb-row {
    flex-direction: column;
  }
  .flex.mb-cols, .flex.mb-col, .flex.mb-column, .flex.mb-columns {
    flex-direction: row;
  }
}
@media screen and (min-width: 641px) and (max-width: 1000px) {
  .flex.tb-rows, .flex.tb-row {
    flex-direction: column;
  }
  .flex.tb-cols, .flex.tb-col, .flex.tb-column, .flex.tb-columns {
    flex-direction: row;
  }
}
@media screen and (min-width: 1001px) {
  .flex.ds-rows, .flex.ds-row {
    flex-direction: column;
  }
  .flex.ds-cols, .flex.ds-col, .flex.ds-column, .flex.ds-columns {
    flex-direction: row;
  }
}
.flex.inline {
  display: inline-flex;
}
.flex > *:is(.start, .mb-start, .tb-start, .ds-start) {
  justify-self: flex-start;
}
.flex > *:is(.center, .mb-center, .tb-center, .ds-center) {
  flex: 1;
}
.flex > *:is(.end, .mb-end, .tb-end, .ds-end) {
  justify-self: flex-start;
}
.flex.cc, .flex > .cc {
  justify-content: center;
  align-items: center;
}
.flex > *:is(.te, .mb-te, .tb-te, .ds-te) {
  text-align: end;
}
.flex > *:is(.tc, .mb-tc, .tb-tc, .ds-tc) {
  text-align: center;
}
.flex > *:is(.ts, .mb-ts, .tb-ts, .ds-ts) {
  text-align: start;
}

.of {
  overflow: auto;
}

.rel {
  position: relative;
}

.abs {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.fix {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.btn {
  display: inline-flex;
  flex-direction: row;
  padding: 5px 15px;
  gap: 5px;
  border: 0px;
  border-radius: 5px;
  line-height: 18px;
  opacity: 0.7;
  cursor: pointer;
  background-image: linear-gradient(45deg, rgba(100, 100, 100, 0.05), rgba(100, 100, 100, 0.2));
  color: #333;
  padding: 10px 15px;
}
.btn:disabled {
  opacity: 0.3;
}
.btn:not(:disabled):hover {
  opacity: 1;
}
.btn i {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}
.btn span {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: irs;
}
.btn.default {
  background-image: linear-gradient(45deg, #006cc5, #005397);
  color: #FFF;
}

.caption {
  position: relative;
  font-size: medium;
  font-weight: bold;
  padding: 10px 15px;
  display: block;
  overflow: hidden;
  text-align: start;
}
.caption::before {
  content: "";
  position: absolute;
  top: 5px;
  width: 6px;
  right: -3px;
  bottom: 5px;
  background-color: #006cc5;
  border-radius: 10px;
}

.bc {
  margin: 0px;
  padding: 0px;
  display: block;
  list-style: none;
  font-size: 0px;
}
.bc.vat {
  vertical-align: top;
}
.bc.padd-10 {
  margin: 10px 10px 0px 0px;
}
.bc.padd-10 > * {
  padding: 0px 0px 10px 10px;
}
.bc > * {
  display: inline-flex;
  flex-direction: column;
  font-size: small;
  vertical-align: top;
  margin: 0px;
  padding: 0px;
  clear: both;
}
@media screen and (min-width: 300px) and (max-width: 640px) {
  .bc .mb12 {
    width: 100%;
  }
  .bc .mb11 {
    width: 91.666666663%;
  }
  .bc .mb10 {
    width: 83.33333333%;
  }
  .bc .mb9 {
    width: 74.999999997%;
  }
  .bc .mb8 {
    width: 66.666666664%;
  }
  .bc .mb7 {
    width: 58.333333331%;
  }
  .bc .mb6 {
    width: 49.999999998%;
  }
  .bc .mb5 {
    width: 41.666666665%;
  }
  .bc .mb4 {
    width: 33.333333332%;
  }
  .bc .mb3 {
    width: 24.999999999%;
  }
  .bc .mb2 {
    width: 16.666666666%;
  }
  .bc .mb1 {
    width: 8.333333333%;
  }
}
@media screen and (min-width: 641px) and (max-width: 1000px) {
  .bc .tb12 {
    width: 100%;
  }
  .bc .tb11 {
    width: 91.666666663%;
  }
  .bc .tb10 {
    width: 83.33333333%;
  }
  .bc .tb9 {
    width: 74.999999997%;
  }
  .bc .tb8 {
    width: 66.666666664%;
  }
  .bc .tb7 {
    width: 58.333333331%;
  }
  .bc .tb6 {
    width: 49.999999998%;
  }
  .bc .tb5 {
    width: 41.666666665%;
  }
  .bc .tb4 {
    width: 33.333333332%;
  }
  .bc .tb3 {
    width: 24.999999999%;
  }
  .bc .tb2 {
    width: 16.666666666%;
  }
  .bc .tb1 {
    width: 8.333333333%;
  }
}
@media screen and (min-width: 1001px) {
  .bc .ds12 {
    width: 100%;
  }
  .bc .ds11 {
    width: 91.666666663%;
  }
  .bc .ds10 {
    width: 83.33333333%;
  }
  .bc .ds9 {
    width: 74.999999997%;
  }
  .bc .ds8 {
    width: 66.666666664%;
  }
  .bc .ds7 {
    width: 58.333333331%;
  }
  .bc .ds6 {
    width: 49.999999998%;
  }
  .bc .ds5 {
    width: 41.666666665%;
  }
  .bc .ds4 {
    width: 33.333333332%;
  }
  .bc .ds3 {
    width: 24.999999999%;
  }
  .bc .ds2 {
    width: 16.666666666%;
  }
  .bc .ds1 {
    width: 8.333333333%;
  }
}

.control:not(:last-of-type), .btns:not(:last-of-type) {
  margin-bottom: 10px;
}

.control {
  padding: 10px 0px;
}
.control .title {
  color: #666;
  padding: 5px 15px;
  border-inline-start: 1px solid red;
  margin-bottom: 5px;
}
.control input, .control textarea, .control select {
  resize: none;
  font-size: small;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 10px;
  border-radius: 5px;
  width: 100%;
  font-family: irs;
  text-align: center;
}
.control input:focus, .control textarea:focus, .control select:focus {
  border: 1px solid red;
}
.control input.just, .control textarea.just, .control select.just {
  text-align: justify;
}

.btns {
  text-align: end;
}

* {
  box-sizing: border-box;
}

:root {
  --bgcolor: #fff;
  --bordercolor: #0002;
  --fgcolor: #000;
  --unitname: "تومان";
  --imagerevert: 0%;
}

body {
  background-color: var(--bgcolor);
  color: var(--fgcolor);
  direction: rtl;
  font-size: small;
  font-family: irs;
}
body.white {
  --bgcolor: #FFF;
  --bordercolor: #0001;
  --fgcolor: #000;
  --imagerevert: 0%;
}
body.night {
  --bgcolor: #111117;
  --bordercolor: #FFF2;
  --fgcolor: #FFF;
  --imagerevert: 100%;
}
body > *:not(#app, .loading, .modal, .toast-container) {
  opacity: 0;
  font-size: 0;
  pointer-events: none;
}
body > .loading:not(.hide) {
  background-color: inherit;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  color: rgba(100, 100, 100, 0.6);
}

.toast-container {
  pointer-events: none;
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  z-index: 999999;
  text-align: center;
  padding: 25px;
}
.toast-container * {
  transition: all linear 0.3s;
}
.toast-container .toast {
  display: inline-flex;
  break-after: always;
  padding: 8px 15px;
  background-image: linear-gradient(0deg, var(--bgcolor), var(--bgcolor));
  color: var(--fgcolor);
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(100, 100, 100, 0.7);
}
.toast-container .toast:not(.act) {
  opacity: 0;
  transform: translateY(10px);
}
.toast-container .toast.act {
  opacity: 1;
}

.inline-container {
  width: 1200px;
  display: inline-block;
  text-align: start;
  position: relative;
}

#app {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
#app > canvas {
  display: block;
  position: fixed;
  z-index: -1;
  top: 0;
  pointer-events: none;
}
#app * {
  transition: all ease 0.3s;
}
#app *:not(input, select, textarea) {
  user-select: none;
}
#app:not(.act) > .masterpage > #navigator {
  opacity: 0;
  transform: translateY(-150px);
}
#app:not(.act) > .masterpage > #footer {
  opacity: 0;
  transform: translateY(150px);
}
#app > .masterpage {
  display: flex;
  flex-flow: column;
  position: absolute;
  inset: 0;
}
#app > .masterpage > .center {
  text-align: center;
  overflow: auto;
  flex: 1;
}
#app > .masterpage > .center > .inline {
  position: absolute;
  inset: 0;
}
#app > .masterpage #sides > * {
  position: fixed;
  z-index: 999999;
  box-shadow: 0px 0px 1000px rgba(0, 0, 0, 0.5);
}
#app > .masterpage #sides > *:not(.show) {
  right: -350px;
  width: 350px;
  opacity: 0;
}
#app > .masterpage #sides > *.show {
  right: 0px;
  width: 350px;
}
#app > .masterpage #sides #userpanel {
  background-color: var(--bgcolor);
  height: 100%;
  top: 0px;
}
#app > .masterpage #sides #userpanel .cnt {
  padding: 25px;
  gap: 25px;
}
#app > .masterpage #sides #userpanel .cnt .btns {
  text-align: end;
}
#app > .masterpage #sides #userpanel .cnt .user-section {
  gap: 10px;
}
#app > .masterpage #sides #userpanel .cnt .user-section .user-image .img {
  aspect-ratio: 1/1;
  width: 48px;
  background-color: #EEE;
  border-radius: 1000px;
}
#app > .masterpage #sides #userpanel .cnt .user-section .user-info {
  text-align: start;
}
#app > .masterpage #sides #userpanel .cnt .user-section .user-info b {
  font-size: medium;
}
#app > .masterpage #sides #userpanel .cnt .user-section .user-info strong {
  font-weight: normal;
}
#app > .masterpage #sides #userpanel .cnt .user-section .user-info * {
  display: block;
}
#app > .masterpage #sides #userpanel .cnt .user-menu .item {
  font-size: small;
  line-height: 20px;
  cursor: pointer;
  gap: 10px;
  padding: 10px;
}
#app > .masterpage #sides #userpanel .cnt .user-menu .item:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 5px;
}
#app > .masterpage #sides #userpanel .cnt .user-menu .item .start {
  width: 32px;
  text-align: center;
  line-height: inherit;
  vertical-align: middle;
  font-size: 16px;
}
#app > .masterpage #sides #userpanel .cnt .user-menu .item .center {
  text-align: start;
  justify-content: start;
  line-height: inherit;
  vertical-align: middle;
}
#app > .masterpage #navigator {
  z-index: 9999;
  background-image: linear-gradient(180deg, var(--bgcolor), transparent);
  padding: 25px;
}
#app > .masterpage #navigator.act {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
}
#app > .masterpage #navigator img {
  height: 24px;
  filter: invert(var(--imagerevert));
}
#app > .masterpage #navigator nav {
  margin-inline-start: 20px;
}
#app > .masterpage #navigator nav label {
  padding: 10px 15px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 10px;
}
@media screen and (max-width: 1000px) {
  #app > .masterpage #navigator nav label {
    display: none;
  }
}
#app > .masterpage #navigator nav label i {
  font-size: 16px;
}
#app > .masterpage #navigator *[data-badget] {
  position: relative;
}
#app > .masterpage #navigator *[data-badget]::before {
  content: attr(data-badget);
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: red;
  color: #FFF;
  border-radius: 100px;
  line-height: 16px;
  padding: 0px 8px;
  font-size: smaller;
  z-index: 1;
}
#app > .masterpage #footer {
  z-index: 9999;
  background-image: linear-gradient(0deg, var(--bgcolor), transparent);
  padding-top: 0px;
}
#app > .masterpage #footer.act {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
}
@media screen and (max-width: 1000px) {
  #app > .masterpage #footer {
    height: 0px;
    overflow: hidden;
    opacity: 0;
    padding: 0px;
  }
}
#app > .masterpage #footer label {
  padding: 10px 15px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex-direction: column;
}
#app > .masterpage #footer label i {
  font-size: 32px;
}
#app > .masterpage #footer label img {
  width: 32px;
  aspect-ratio: 1/1;
  border-radius: 39%;
}
#app > .masterpage #footer label > span {
  font-size: smaller;
}
#app > .masterpage #footer label.lg span {
  display: none;
}
#app > .masterpage:not(:has(.main)) #section-body {
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}
#app > .masterpage:not(:has(.main)) #footer {
  padding-bottom: 0px;
}
#app > .masterpage:not(:has(.main)) #footer label {
  gap: 0px;
  padding: 0px;
  align-items: center;
}
#app > .masterpage:not(:has(.main)) #footer i {
  font-size: 16px;
}
#app > .masterpage:not(:has(.main)) #footer span {
  transform: translateY(30px);
  opacity: 0;
}
#app > .masterpage #socials {
  padding-inline-end: 25px;
  justify-content: end;
  display: none;
}
@media screen and (max-width: 1000px) {
  #app > .masterpage #socials {
    width: 0px;
    overflow: hidden;
    opacity: 0;
    padding: 0px;
  }
}
#app > .masterpage #socials label {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 48px;
  aspect-ratio: 1/1;
}
#app > .masterpage #socials label i {
  font-size: 24px;
  opacity: 0.3;
}
#app > .masterpage #socials label:hover i {
  opacity: 1;
}
#app > .masterpage #section-body {
  position: relative;
  overflow-y: auto;
  flex: 1;
}
@media screen and (max-width: 1000px) {
  #app > .masterpage #section-body {
    margin: 0px;
  }
}
#app > .masterpage #section-body .categories {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: start;
  overflow: auto;
  padding: 25px;
}
@media screen and (min-width: 300px) and (max-width: 640px) {
  #app > .masterpage #section-body .categories {
    flex-direction: column;
  }
}
#app > .masterpage #section-body .categories .cat-item {
  border-radius: 10px;
  cursor: pointer;
  gap: 10px;
}
@media screen and (min-width: 300px) and (max-width: 640px) {
  #app > .masterpage #section-body .categories .cat-item {
    flex-flow: row;
    display: flex;
    padding: 10px;
    width: 100%;
  }
}
@media screen and (min-width: 641px) and (max-width: 1000px) {
  #app > .masterpage #section-body .categories .cat-item {
    flex-flow: column;
    display: flex;
    width: 50%;
    max-width: 300px;
    padding: 25px;
  }
}
@media screen and (min-width: 1001px) {
  #app > .masterpage #section-body .categories .cat-item {
    flex-flow: column;
    display: flex;
    width: 25%;
    max-width: 300px;
    padding: 25px;
  }
}
#app > .masterpage #section-body .categories .cat-item:hover .img {
  filter: grayscale(1);
  transform: scale(0.9);
}
#app > .masterpage #section-body .categories .cat-item .img {
  justify-self: flex-start;
  aspect-ratio: 1/1;
  width: 100%;
  display: flex;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 10px;
}
@media screen and (min-width: 300px) and (max-width: 640px) {
  #app > .masterpage #section-body .categories .cat-item .img {
    width: 48px;
  }
}
#app > .masterpage #section-body .categories .cat-item .title {
  font-size: medium;
  font-weight: bold;
  opacity: 0.8;
  display: flex;
  justify-content: start;
  justify-self: flex-start;
}
#app > .masterpage #section-body .categories .cat-item .desc {
  font-size: smaller;
  font-weight: normal;
  opacity: 0.6;
  display: flex;
  justify-content: start;
  flex: 1;
}
#app > .masterpage #section-body .categories .cat-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
#app > .masterpage #section-body .products > .flex {
  padding: 25px;
  gap: 25px;
}
#app > .masterpage #section-body .products .side {
  width: 300px;
  gap: 10px;
}
@media screen and (max-width: 1000px) {
  #app > .masterpage #section-body .products .side {
    display: none;
    width: 0px;
    overflow: hidden;
  }
}
#app > .masterpage #section-body .products .side > .center {
  border: 1px solid var(--bordercolor);
  border-radius: 10px;
  overflow: auto;
}
#app > .masterpage #section-body .products .side fieldset {
  padding: 0px;
  margin: 0px;
  border: 0px;
}
#app > .masterpage #section-body .products .side fieldset:has(input:checked) strong::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 100px;
  margin-top: 8px;
  background-color: red;
  line-height: 5px;
}
#app > .masterpage #section-body .products .side strong {
  gap: 10px;
  padding: 10px 15px;
  vertical-align: middle;
}
#app > .masterpage #section-body .products .side strong span {
  justify-content: start;
}
#app > .masterpage #section-body .products .side strong:not(.open) i {
  transform: rotate(90deg);
}
#app > .masterpage #section-body .products .side strong:not(.open) ~ div {
  display: none;
}
#app > .masterpage #section-body .products .side strong.open ~ div {
  max-height: 200px;
  overflow: auto;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}
#app > .masterpage #section-body .products .side label {
  padding: 10px 15px;
  gap: 10px;
  line-height: 18px;
}
#app > .masterpage #section-body .products .side label i {
  font-size: 16px;
  line-height: inherit;
}
#app > .masterpage #section-body .products .side label .center {
  justify-content: start;
  text-align: start;
}
#app > .masterpage #section-body .products .side label .text {
  list-style: inherit;
  vertical-align: middle;
}
#app > .masterpage #section-body .products .side label .check input {
  display: none;
  line-height: 1px;
}
#app > .masterpage #section-body .products .side label .check input:checked ~ i {
  opacity: 1;
  color: rgb(0, 102, 255);
}
#app > .masterpage #section-body .products .side label .check input:not(:checked) ~ i {
  opacity: 0.1;
  scale: 0.6;
}
#app > .masterpage #section-body .products .side label .color {
  width: 18px;
  border-radius: 10px;
  aspect-ratio: 1/1;
  max-height: 18px;
}
#app > .masterpage #section-body .products .content {
  flex-wrap: wrap;
  text-align: start;
  overflow: auto;
}
#app > .masterpage #section-body .products .content .item {
  display: inline-block;
  padding: 25px;
  cursor: pointer;
  position: relative;
  vertical-align: top;
  width: 100%;
  max-width: 300px;
  min-width: 200px;
  text-align: start;
}
#app > .masterpage #section-body .products .content .item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
#app > .masterpage #section-body .products .content .item .name {
  display: block;
  height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app > .masterpage #section-body .products .content .item .colors {
  display: block;
  position: absolute;
  top: 25px;
  left: 25px;
}
#app > .masterpage #section-body .products .content .item .colors span {
  display: flex;
  aspect-ratio: 1;
  width: 16px;
  border-radius: 5px;
  margin-bottom: 5px;
}
#app > .masterpage #section-body .products .content .item .img .g {
  aspect-ratio: 1/1;
  display: flex;
  width: 90%;
  background-size: contain;
  background-position: center center;
  max-height: 150px;
  background-repeat: no-repeat;
}
#app > .masterpage #section-body .products .content .item .category {
  display: none;
}
#app > .masterpage #section-body .products .content .item .series {
  display: none;
}
#app > .masterpage #section-body .products .content .item .brand {
  display: none;
}
#app > .masterpage #section-body .products .content .item .pointer {
  direction: ltr;
  display: flex;
  gap: 10px;
  margin-bottom: 5px;
}
#app > .masterpage #section-body .products .content .item .pointer .like, #app > .masterpage #section-body .products .content .item .pointer .comment, #app > .masterpage #section-body .products .content .item .pointer .score {
  display: inline-block;
  font-size: small;
  direction: ltr;
  justify-self: flex-start;
  padding: 3px 8px;
  line-height: 14px;
  border-radius: 100px;
}
#app > .masterpage #section-body .products .content .item .pointer .like i, #app > .masterpage #section-body .products .content .item .pointer .comment i, #app > .masterpage #section-body .products .content .item .pointer .score i {
  font-size: 14px;
  line-height: inherit;
  vertical-align: middle;
}
#app > .masterpage #section-body .products .content .item .pointer .like {
  background-color: rgba(226, 155, 0, 0.1);
}
#app > .masterpage #section-body .products .content .item .pointer .like i {
  color: rgb(226, 155, 0);
}
#app > .masterpage #section-body .products .content .item .pointer .comment {
  background-color: rgba(202, 0, 0, 0.1);
}
#app > .masterpage #section-body .products .content .item .pointer .comment i {
  color: rgb(202, 0, 0);
}
#app > .masterpage #section-body .products .content .item .pointer .score {
  background-color: rgba(127, 196, 0, 0.1);
}
#app > .masterpage #section-body .products .content .item .pointer .score i {
  color: rgb(127, 196, 0);
}
#app > .masterpage #section-body .products .content .item .price {
  display: block;
  font-size: 16pt;
  direction: ltr;
  font-weight: bold;
}
#app > .masterpage #section-body .products .content .item .price[data-offer]::after {
  content: attr(data-offer) " %";
  float: right;
  background-image: linear-gradient(135deg, red, maroon);
  color: #FFF;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: small;
  font-weight: bold;
  line-height: 18px;
}
#app > .masterpage #section-body .products .content .item .oldprice {
  display: block;
  direction: ltr;
  text-decoration: line-through;
  opacity: 0.4;
}
#app > .masterpage #section-body .products .content .item .price, #app > .masterpage #section-body .products .content .item .oldprice {
  line-height: 18pt;
}
#app > .masterpage #section-body .products .content .item .inv {
  display: none;
}
#app > .masterpage #section-body .products .content .item .unit::before {
  content: "تومان";
  display: inline-block;
  font-size: 8pt;
  font-weight: normal;
  float: inline-start;
  margin-inline-end: 10px;
}
#app > .masterpage #section-body .products .pagination:has(label) {
  margin-top: 10px;
}
#app > .masterpage #section-body .products .pagination label {
  margin-inline-end: 5px;
}
#app > .masterpage #section-body .products .sort {
  height: 40px;
}
#app > .masterpage #section-body .products .sort:has(label) {
  margin-bottom: 10px;
}
#app > .masterpage #section-body .products .sort > .flex label {
  padding: 0px 15px;
  gap: 5px;
  border-radius: 10px;
}
#app > .masterpage #section-body .products .sort > .flex label:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
#app > .masterpage #section-body .products .sort > .flex label.act {
  background-color: rgba(0, 0, 0, 0.1);
}
#app > .masterpage #section-body .product {
  padding: 25px;
}
#app > .masterpage #section-body .product > .flex > * {
  padding: 25px;
}
#app > .masterpage #section-body .product > .flex > *:not(:last-of-type) {
  border-inline-end: 1px dotted rgba(0, 0, 0, 0);
}
#app > .masterpage #section-body .product > .flex > *.content {
  border: 1px solid var(--bordercolor);
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.02);
}
#app > .masterpage #section-body .product .info {
  display: flex;
  flex-direction: column;
  justify-self: start;
  text-align: start;
}
#app > .masterpage #section-body .product .info .group-info {
  justify-self: flex-start;
  margin-bottom: 25px;
}
#app > .masterpage #section-body .product .info .group-info label:not(:first-of-type)::before {
  content: "/";
  margin-inline: 10px;
  opacity: 0.3;
}
#app > .masterpage #section-body .product .info .group-info label span::before {
  content: ":";
  margin-inline-end: 5px;
}
#app > .masterpage #section-body .product .info .image {
  margin-top: 10px;
  justify-self: flex-start;
}
@media screen and (min-width: 300px) and (max-width: 640px) {
  #app > .masterpage #section-body .product .info .image {
    width: 100%;
  }
}
@media screen and (min-width: 641px) and (max-width: 1000px) {
  #app > .masterpage #section-body .product .info .image {
    width: 300px;
  }
}
@media screen and (min-width: 1001px) {
  #app > .masterpage #section-body .product .info .image {
    width: 400px;
  }
}
#app > .masterpage #section-body .product .info .image .preview {
  aspect-ratio: 1/1;
  width: 100%;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  max-height: 300px;
}
#app > .masterpage #section-body .product .info .image .group-images {
  text-align: start;
  overflow: auto;
  margin-top: 25px;
}
#app > .masterpage #section-body .product .info .image .group-images label {
  display: inline-flex;
  aspect-ratio: 1/1;
  border: 1px solid var(--bordercolor);
}
@media screen and (max-width: 1000px) {
  #app > .masterpage #section-body .product .info .image .group-images label {
    width: 48px;
  }
}
@media screen and (min-width: 1001px) {
  #app > .masterpage #section-body .product .info .image .group-images label {
    width: 64px;
  }
}
#app > .masterpage #section-body .product .info .seprate {
  flex: 1;
}
#app > .masterpage #section-body .product .selections {
  text-align: start;
}
#app > .masterpage #section-body .product .selections .price {
  justify-self: flex-end;
}
#app > .masterpage #section-body .product .selections .colors label {
  display: inline-block;
  width: 38px;
  aspect-ratio: 1/1;
  border-radius: 10px;
  border: 5px solid var(--bgcolor);
  margin-inline-end: 5px;
}
#app > .masterpage #section-body .product .selections .colors label.act {
  border-color: #333;
}
#app > .masterpage #section-body .product .selections .option select {
  background-color: transparent;
  text-align: start;
  width: auto;
  min-width: 150px;
  border-color: #333;
  font-weight: bold;
  font-size: medium;
}
#app > .masterpage #section-body .product .selections .option select option {
  font-family: irs;
  font-weight: normal;
}
#app > .masterpage #section-body .product .selections .options {
  display: flex;
  width: 100%;
  flex-flow: wrap;
}
#app > .masterpage #section-body .product .selections .options > .caption {
  width: 99%;
}
#app > .masterpage #section-body .product .selections .options .item {
  display: inline-flex;
  width: 25%;
}
@media screen and (min-width: 300px) and (max-width: 640px) {
  #app > .masterpage #section-body .product .selections .options .item {
    width: 50%;
  }
  #app > .masterpage #section-body .product .selections .options .item:nth-of-type(n + 4) {
    display: none;
  }
}
#app > .masterpage #section-body .product .selections .options .item .i {
  padding: 8px 15px;
  gap: 2px;
  margin: 5px;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.01);
  border: 1px solid var(--bordercolor);
  border-radius: 10px;
}
#app > .masterpage #section-body .product .selections .options .item .i .t {
  opacity: 0.4;
  font-size: small;
  white-space: nowrap;
  width: inherit;
  text-overflow: ellipsis;
  overflow: hidden;
}
#app > .masterpage #section-body .product .selections .options .item .i .v {
  font-weight: bolder;
  font-size: small;
  white-space: nowrap;
  width: inherit;
  text-overflow: ellipsis;
  overflow: hidden;
  opacity: 0.8;
}
#app > .masterpage #section-body .product .selections .options .link {
  display: flex;
  width: 99%;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin-block-start: 25px;
  gap: 25px;
}
#app > .masterpage #section-body .product .selections .options .link span {
  display: flex;
  background-color: rgba(0, 0, 0, 0.01);
  border: 1px solid var(--bordercolor);
  padding: 5px 25px;
  border-radius: 100px;
  cursor: pointer;
}
#app > .masterpage #section-body .product .selections .options .link span:hover {
  background-color: #111;
  color: var(--bgcolor);
}
#app > .masterpage #section-body .product .selections .options .link b {
  flex: 1;
  background-color: rgba(0, 0, 0, 0.1);
  font-size: small;
  height: 1px;
}
@media screen and (min-width: 1001px) {
  #app > .masterpage #section-body .product .content {
    max-width: 400px;
  }
  #app > .masterpage #section-body .product .content > *:not(:last-of-type) {
    border-bottom: 1px solid var(--bordercolor);
  }
}
#app > .masterpage #section-body .product .content .pointer {
  padding-block: 25px;
  display: flex;
  flex-flow: column;
  gap: 10px;
  margin-bottom: 5px;
  flex: 1;
}
#app > .masterpage #section-body .product .content .pointer .item {
  text-align: start;
}
#app > .masterpage #section-body .product .content .pointer .item * {
  display: inline-block;
}
#app > .masterpage #section-body .product .content .pointer .like, #app > .masterpage #section-body .product .content .pointer .comment, #app > .masterpage #section-body .product .content .pointer .score {
  font-size: small;
  direction: ltr;
  justify-self: flex-start;
  padding: 5px 8px;
  line-height: 14px;
  border-radius: 100px;
  margin-inline-end: 10px;
}
#app > .masterpage #section-body .product .content .pointer .like i, #app > .masterpage #section-body .product .content .pointer .comment i, #app > .masterpage #section-body .product .content .pointer .score i {
  font-size: 16px;
  line-height: inherit;
  vertical-align: middle;
  width: 20px;
  display: inline-block;
}
#app > .masterpage #section-body .product .content .pointer .like {
  background-color: rgba(226, 155, 0, 0.1);
}
#app > .masterpage #section-body .product .content .pointer .like i {
  color: rgb(226, 155, 0);
}
#app > .masterpage #section-body .product .content .pointer .comment {
  background-color: rgba(202, 0, 0, 0.1);
}
#app > .masterpage #section-body .product .content .pointer .comment i {
  color: rgb(202, 0, 0);
}
#app > .masterpage #section-body .product .content .pointer .score {
  background-color: rgba(127, 196, 0, 0.1);
}
#app > .masterpage #section-body .product .content .pointer .score i {
  color: rgb(127, 196, 0);
}
@media screen and (min-width: 1001px) {
  #app > .masterpage #section-body .product .content .commands {
    border-bottom: 1px solid var(--bordercolor);
  }
}
#app > .masterpage #section-body .product .content .commands button {
  background-color: transparent;
  border: 0px;
  opacity: 0.7;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: inherit;
}
@media screen and (max-width: 1000px) {
  #app > .masterpage #section-body .product .content .commands button {
    height: 48px;
    width: 48px;
  }
}
@media screen and (min-width: 1001px) {
  #app > .masterpage #section-body .product .content .commands button {
    height: 64px;
  }
}
#app > .masterpage #section-body .product .content .commands button i {
  font-size: 20px;
}
#app > .masterpage #section-body .product .content .commands button:hover {
  opacity: 1;
}
#app > .masterpage #section-body .product .content .inventory {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 25px;
}
@media screen and (min-width: 300px) and (max-width: 640px) {
  #app > .masterpage #section-body .product .content .inventory {
    position: sticky;
    bottom: 0px;
  }
}
#app > .masterpage #section-body .product .content .inventory .inv {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 10px;
}
#app > .masterpage #section-body .product .content .inventory .inv * {
  display: flex;
  align-items: center;
}
#app > .masterpage #section-body .product .content .inventory .inv .user {
  flex: 1;
}
#app > .masterpage #section-body .product .content .inventory .inv .command {
  justify-self: flex-end;
}
#app > .masterpage #section-body .product .content .inventory .inv .price {
  justify-self: flex-end;
  font-weight: bold;
  font-size: medium;
}
#app > .masterpage #section-body .product .content .inventory .inv .price:after {
  content: var(--unitname);
  font-size: x-small;
  color: red;
  margin-inline-start: 10px;
  font-weight: normal;
}
#app > .masterpage #section-body .product .content .inventory .inv .price[data-offer]::before {
  content: attr(data-offer) " %";
  float: right;
  background-image: linear-gradient(135deg, red, maroon);
  color: #FFF;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: small;
  font-weight: bold;
  line-height: 18px;
  margin-inline-end: 10px;
}
#app > .masterpage #section-body .product .content .inventory .msg {
  font-size: large;
  padding: 5px;
  font-weight: bold;
  opacity: 0.7;
  text-align: center;
}
#app > .masterpage #section-body .product .suggestion {
  white-space: nowrap;
  overflow: auto;
  text-align: start;
}
#app > .masterpage #section-body .product .suggestion:has(.item) {
  margin-block: 25px;
  border-top: 1px solid var(--bordercolor);
  padding-top: 25px;
}
#app > .masterpage #section-body .product .suggestion .item {
  display: inline-block;
  padding: 25px;
  cursor: pointer;
  position: relative;
  vertical-align: top;
  width: 100%;
  max-width: 300px;
  min-width: 200px;
  text-align: start;
}
#app > .masterpage #section-body .product .suggestion .item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
#app > .masterpage #section-body .product .suggestion .item .name {
  display: block;
  height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app > .masterpage #section-body .product .suggestion .item .colors {
  display: block;
  position: absolute;
  top: 25px;
  left: 25px;
}
#app > .masterpage #section-body .product .suggestion .item .colors span {
  display: flex;
  aspect-ratio: 1;
  width: 16px;
  border-radius: 5px;
  margin-bottom: 5px;
}
#app > .masterpage #section-body .product .suggestion .item .img .g {
  aspect-ratio: 1/1;
  display: flex;
  width: 90%;
  background-size: contain;
  background-position: center center;
  max-height: 150px;
  background-repeat: no-repeat;
}
#app > .masterpage #section-body .product .suggestion .item .category {
  display: none;
}
#app > .masterpage #section-body .product .suggestion .item .series {
  display: none;
}
#app > .masterpage #section-body .product .suggestion .item .brand {
  display: none;
}
#app > .masterpage #section-body .product .suggestion .item .pointer {
  direction: ltr;
  display: flex;
  gap: 10px;
  margin-bottom: 5px;
}
#app > .masterpage #section-body .product .suggestion .item .pointer .like, #app > .masterpage #section-body .product .suggestion .item .pointer .comment, #app > .masterpage #section-body .product .suggestion .item .pointer .score {
  display: inline-block;
  font-size: small;
  direction: ltr;
  justify-self: flex-start;
  padding: 3px 8px;
  line-height: 14px;
  border-radius: 100px;
}
#app > .masterpage #section-body .product .suggestion .item .pointer .like i, #app > .masterpage #section-body .product .suggestion .item .pointer .comment i, #app > .masterpage #section-body .product .suggestion .item .pointer .score i {
  font-size: 14px;
  line-height: inherit;
  vertical-align: middle;
}
#app > .masterpage #section-body .product .suggestion .item .pointer .like {
  background-color: rgba(226, 155, 0, 0.1);
}
#app > .masterpage #section-body .product .suggestion .item .pointer .like i {
  color: rgb(226, 155, 0);
}
#app > .masterpage #section-body .product .suggestion .item .pointer .comment {
  background-color: rgba(202, 0, 0, 0.1);
}
#app > .masterpage #section-body .product .suggestion .item .pointer .comment i {
  color: rgb(202, 0, 0);
}
#app > .masterpage #section-body .product .suggestion .item .pointer .score {
  background-color: rgba(127, 196, 0, 0.1);
}
#app > .masterpage #section-body .product .suggestion .item .pointer .score i {
  color: rgb(127, 196, 0);
}
#app > .masterpage #section-body .product .suggestion .item .price {
  display: block;
  font-size: 16pt;
  direction: ltr;
  font-weight: bold;
}
#app > .masterpage #section-body .product .suggestion .item .price[data-offer]::after {
  content: attr(data-offer) " %";
  float: right;
  background-image: linear-gradient(135deg, red, maroon);
  color: #FFF;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: small;
  font-weight: bold;
  line-height: 18px;
}
#app > .masterpage #section-body .product .suggestion .item .oldprice {
  display: block;
  direction: ltr;
  text-decoration: line-through;
  opacity: 0.4;
}
#app > .masterpage #section-body .product .suggestion .item .price, #app > .masterpage #section-body .product .suggestion .item .oldprice {
  line-height: 18pt;
}
#app > .masterpage #section-body .product .suggestion .item .inv {
  display: none;
}
#app > .masterpage #section-body .product .suggestion .item .unit::before {
  content: "تومان";
  display: inline-block;
  font-size: 8pt;
  font-weight: normal;
  float: inline-start;
  margin-inline-end: 10px;
}
#app > .masterpage #section-body .product .flowpage .menu {
  display: flex;
  border-bottom: 1px solid var(--bordercolor);
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  background-color: var(--bgcolor);
}
#app > .masterpage #section-body .product .flowpage .menu label {
  justify-self: flex-start;
  padding: 10px 15px;
  display: flex;
  justify-content: center;
  justify-items: center;
  margin-bottom: -2px;
  border-bottom: 3px solid transparent;
  opacity: 0.7;
  cursor: pointer;
}
#app > .masterpage #section-body .product .flowpage .menu label.act {
  border-bottom-color: steelblue;
  font-weight: bold;
}
#app > .masterpage #section-body .product .flowpage > *:not(.menu):not(.act) {
  display: none;
}
#app > .masterpage #section-body .product .flowpage > *:not(.menu).act {
  display: block;
  width: 100%;
}
#app > .masterpage #section-body .product .flowpage > *:not(.menu) > i {
  font-size: 32px;
  margin: 50px;
  opacity: 0.1;
}
#app > .masterpage #section-body .product .flowpage .details .options {
  display: table;
  width: 100%;
}
#app > .masterpage #section-body .product .flowpage .details .options .item {
  display: table-row-group;
}
#app > .masterpage #section-body .product .flowpage .details .options .item .t, #app > .masterpage #section-body .product .flowpage .details .options .item .v {
  border-bottom: 1px solid var(--bordercolor);
}
#app > .masterpage #section-body .product .flowpage .details .options .item .i {
  display: table-row;
}
#app > .masterpage #section-body .product .flowpage .details .options .item .i * {
  text-align: start;
  padding: 10px;
}
#app > .masterpage #section-body .product .flowpage .details .options .item .i .t {
  display: table-cell;
  white-space: nowrap;
  width: 10px;
  padding-inline-end: 50px;
  color: rgba(0, 0, 0, 0.5);
}
#app > .masterpage #section-body .product .flowpage .details .options .item .i .v {
  display: table-cell;
  white-space: nowrap;
  font-weight: bold;
}
#app > .masterpage #section-body .product .flowpage .details .options .item:nth-of-type(2n) .t, #app > .masterpage #section-body .product .flowpage .details .options .item:nth-of-type(2n) .v {
  background-color: rgba(0, 0, 0, 0.01);
}
#app > .masterpage #section-body .product .flowpage .information .cnt {
  text-align: justify;
  padding: 25px;
  font-size: small;
  line-height: 20pt;
}
#app > .masterpage #section-body .index * {
  transition: none;
}
#app > .masterpage #section-body .index > .cnt {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#app > .masterpage #section-body .main {
  font-size: 0px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-direction: column;
  flex-basis: content;
}
#app > .masterpage #section-body .main .banner {
  aspect-ratio: 100/70;
  background-color: #EEE;
  width: 100%;
  max-height: 800px;
}
#app > .masterpage #section-body .main .footer {
  padding: 50px 0px;
  background-color: #2d3d5a;
  color: #FFF;
  font-size: small;
}
#app > .masterpage #section-body .main .footer .links {
  font-size: small;
  padding-bottom: 50px;
  margin-bottom: 50px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#app > .masterpage #section-body .main .footer .links fieldset {
  border: 0px;
}
#app > .masterpage #section-body .main .footer .links fieldset legend {
  font-weight: bold;
  font-size: medium;
}
#app > .masterpage #section-body .main .footer .links fieldset a {
  display: block;
  padding: 5px;
  text-decoration: none;
  color: inherit;
}
#app > .masterpage #section-body .main .footer .socials {
  font-size: small;
}
#app > .masterpage #section-body .main .footer .socials .container {
  gap: 10px;
}
#app > .masterpage #section-body .main .footer .socials a {
  text-decoration: none;
  color: #000;
  display: inline-block;
}
#app > .masterpage #section-body .main .footer .socials a:hover {
  transform: scale(0.9);
}
#app > .masterpage #section-body .main .footer .socials a i {
  font-size: 24px;
  display: flex;
  aspect-ratio: 1/1;
  width: 48px;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
}
#app > .masterpage #section-body .main .serieses {
  font-size: small;
}
#app > .masterpage #section-body .main .serieses .series {
  padding: 50px 0px;
}
#app > .masterpage #section-body .main .serieses .series:nth-of-type(1) {
  background-color: #ffebeb;
}
#app > .masterpage #section-body .main .serieses .series:nth-of-type(2) {
  background-color: #edffeb;
}
#app > .masterpage #section-body .main .serieses .series:nth-of-type(3) {
  background-color: #ebf9ff;
}
#app > .masterpage #section-body .main .serieses .series:nth-of-type(4) {
  background-color: #ffebfc;
}
#app > .masterpage #section-body .main .serieses .series:nth-of-type(2n) {
  direction: ltr;
}
#app > .masterpage #section-body .main .serieses .series .products {
  overflow: hidden;
}
#app > .masterpage #section-body .main .serieses .series .products .container {
  font-size: 0px;
  display: flex;
  flex-flow: row;
  flex-wrap: nowrap;
  gap: 25px;
}
#app > .masterpage #section-body .main .serieses .series .products .container .item {
  background-color: #FFF;
  padding: 50px;
  border-radius: 15px;
  width: 330px;
  font-size: small;
  text-align: start;
}
#app > .masterpage #section-body .main .serieses .series .products .container .item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .name {
  display: block;
  height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .colors {
  display: block;
  position: absolute;
  top: 25px;
  left: 25px;
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .colors span {
  display: flex;
  aspect-ratio: 1;
  width: 16px;
  border-radius: 5px;
  margin-bottom: 5px;
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .img .g {
  aspect-ratio: 1/1;
  display: flex;
  width: 90%;
  background-size: contain;
  background-position: center center;
  max-height: 150px;
  background-repeat: no-repeat;
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .category {
  display: none;
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .series {
  display: none;
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .brand {
  display: none;
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .pointer {
  direction: ltr;
  display: flex;
  gap: 10px;
  margin-bottom: 5px;
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .pointer .like, #app > .masterpage #section-body .main .serieses .series .products .container .item .pointer .comment, #app > .masterpage #section-body .main .serieses .series .products .container .item .pointer .score {
  display: inline-block;
  font-size: small;
  direction: ltr;
  justify-self: flex-start;
  padding: 3px 8px;
  line-height: 14px;
  border-radius: 100px;
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .pointer .like i, #app > .masterpage #section-body .main .serieses .series .products .container .item .pointer .comment i, #app > .masterpage #section-body .main .serieses .series .products .container .item .pointer .score i {
  font-size: 14px;
  line-height: inherit;
  vertical-align: middle;
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .pointer .like {
  background-color: rgba(226, 155, 0, 0.1);
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .pointer .like i {
  color: rgb(226, 155, 0);
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .pointer .comment {
  background-color: rgba(202, 0, 0, 0.1);
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .pointer .comment i {
  color: rgb(202, 0, 0);
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .pointer .score {
  background-color: rgba(127, 196, 0, 0.1);
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .pointer .score i {
  color: rgb(127, 196, 0);
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .price {
  display: block;
  font-size: 16pt;
  direction: ltr;
  font-weight: bold;
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .price[data-offer]::after {
  content: attr(data-offer) " %";
  float: right;
  background-image: linear-gradient(135deg, red, maroon);
  color: #FFF;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: small;
  font-weight: bold;
  line-height: 18px;
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .oldprice {
  display: block;
  direction: ltr;
  text-decoration: line-through;
  opacity: 0.4;
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .price, #app > .masterpage #section-body .main .serieses .series .products .container .item .oldprice {
  line-height: 18pt;
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .inv {
  display: none;
}
#app > .masterpage #section-body .main .serieses .series .products .container .item .unit::before {
  content: "تومان";
  display: inline-block;
  font-size: 8pt;
  font-weight: normal;
  float: inline-start;
  margin-inline-end: 10px;
}
#app > .masterpage #section-body .main .serieses .series .overview {
  width: 25%;
}
#app > .masterpage #section-body .main .news {
  background-color: #fffae5;
  padding: 50px 0px;
  font-size: small;
  width: 100%;
}
#app > .masterpage #section-body .main .news > .inline-container > .flex {
  gap: 25px;
}
#app > .masterpage #section-body .main .news > .inline-container > .flex > * {
  flex: 1;
}
#app > .masterpage #section-body .main .news > .inline-container > .flex .item {
  background-color: #FFF;
  padding: 50px;
  border-radius: 15px;
  width: 330px;
  font-size: small;
  display: flex;
  flex-flow: column;
  gap: 25px;
}
#app > .masterpage #section-body .main .news > .inline-container > .flex .item .title {
  font-weight: bold;
  font-size: medium;
}
#app > .masterpage #section-body .main .news > .inline-container > .flex .item a {
  display: inline-flex;
  gap: 10px;
  padding: 10px 15px;
  background-color: steelblue;
  color: #FFF;
  border-radius: 5px;
  text-decoration: none;
}
#app > .masterpage #section-body .main .news > .inline-container > .flex .item a i {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}
#app > .masterpage #section-body .main .newsletter {
  font-size: small;
  background-color: #EEE;
  padding: 50px 0px;
}
#app > .masterpage #section-body .main .newsletter > .inline-container {
  text-align: center !important;
}
#app > .masterpage #section-body .main .newsletter > .inline-container .header span {
  display: block;
  text-align: start;
}
#app > .masterpage #section-body .main .newsletter > .inline-container .header span:nth-of-type(1) {
  font-size: large;
  font-weight: bold;
}
#app > .masterpage #section-body .main .newsletter > .inline-container .header span:nth-of-type(2) {
  opacity: 0.7;
}
#app > .masterpage #section-body .main .newsletter > .inline-container .header .start:has(i) {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline-end: 10px;
}
#app > .masterpage #section-body .main .newsletter > .inline-container .header .start:has(i) i {
  font-size: 32px;
}
#app > .masterpage #section-body .main .newsletter > .inline-container > .flex {
  display: inline-flex !important;
  gap: 25px;
}
#app > .masterpage #section-body .main .newsletter > .inline-container > .flex .flex {
  gap: 10px;
}
#app > .masterpage #section-body .main .newsletter > .inline-container > .flex input {
  border: 0px;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  width: 350px;
}
#app > .masterpage #section-body .main .newsletter > .inline-container > .flex button {
  display: flex;
  flex-flow: row;
  gap: 10px;
  padding: 10px;
  border: 0px;
  background-color: steelblue;
  border-radius: 5px;
  color: #FFF;
}
#app > .masterpage #section-body .main .newsletter > .inline-container > .flex i {
  flex: 1;
  justify-self: flex-start;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}
#app > .masterpage #section-body .main .newsletter > .inline-container > .flex i span {
  flex: 1;
  white-space: nowrap;
}
#app > .masterpage #section-body .world {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
#app > .masterpage #section-body .world .globe {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  pointer-events: none;
}
#app > .masterpage #section-body .world .globe.act {
  left: -50%;
}
#app > .masterpage #section-body .world .world-mnu {
  display: flex;
  flex-flow: column;
}
#app > .masterpage #section-body .world .world-mnu > .geo {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
}
#app > .masterpage #section-body .world .world-mnu > .geo:not(.act) {
  flex: 1;
  justify-content: center;
  align-items: center;
}
#app > .masterpage #section-body .world .world-mnu > .geo:not(.act) .geo-series {
  flex: 0;
}
#app > .masterpage #section-body .world .world-mnu > .geo.act {
  justify-content: flex-start;
  gap: 25px;
}
#app > .masterpage #section-body .world .world-mnu > .geo.act .puzzle-slice svg {
  transform: scale(0.6);
  margin-bottom: -25px;
}
#app > .masterpage #section-body .world .world-mnu > .geo.act .geo-mnu {
  gap: 0px;
}
#app > .masterpage #section-body .world .world-mnu > .geo.act .geo-series {
  flex: 1;
}
#app > .masterpage #section-body .world .world-mnu > .geo .geo-mnu {
  display: flex;
  flex-flow: row;
  gap: 100px;
}
#app > .masterpage #section-body .world .world-mnu > .geo .geo-mnu .puzzle-slice {
  display: flex;
  position: relative;
  flex-flow: column;
  cursor: pointer;
}
#app > .masterpage #section-body .world .world-mnu > .geo .geo-mnu .puzzle-slice * {
  pointer-events: none;
}
#app > .masterpage #section-body .world .world-mnu > .geo .geo-mnu .puzzle-slice svg {
  --fill: var(--filled);
  -webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.1));
}
#app > .masterpage #section-body .world .world-mnu > .geo .geo-mnu .puzzle-slice label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: small;
  color: var(--fgcolor);
  gap: 10px;
}
#app > .masterpage #section-body .world .world-mnu > .geo .geo-mnu .puzzle-slice label i {
  flex: 1;
  display: flex;
  font-size: 24px;
  align-items: flex-end;
}
#app > .masterpage #section-body .world .world-mnu > .geo .geo-mnu .puzzle-slice label span {
  flex: 1;
  display: flex;
  align-items: flex-start;
  font-size: small;
}
#app > .masterpage #section-body .world .world-mnu > .geo .geo-mnu .puzzle-slice.menu {
  cursor: pointer;
}
#app > .masterpage #section-body .world .world-mnu > .geo .geo-series {
  padding-inline: 25px;
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  text-align: start;
  overflow: auto;
  flex-flow: row;
  align-items: start;
}
#app > .masterpage #section-body .world .world-mnu > .geo .geo-series label {
  display: inline-flex;
  width: 250px;
  aspect-ratio: 10/7;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  justify-self: flex-start;
}
#app > .masterpage #section-body .pages {
  text-align: start;
}

.modal {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal:not(#map), .modal *:not(#map) {
  transition: all ease 0.3s;
}
.modal > .border {
  background-color: var(--bgcolor);
  min-width: 250px;
  min-height: 100px;
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--bordercolor);
  border-radius: 10px;
  overflow: hidden;
}
@media screen and (max-width: 1000px) {
  .modal > .border {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }
}
.modal > .border > .hdr {
  gap: 10px;
  padding: 0px 12.5px;
  border-bottom: 1px solid var(--bordercolor);
  background-color: rgba(0, 0, 0, 0.01);
}
.modal > .border > .hdr > * {
  vertical-align: middle;
  line-height: 50px;
  display: flex;
  align-items: center;
}
.modal > .border > .hdr i {
  font-size: 16px;
}
.modal > .border > .hdr i.start {
  display: none;
}
.modal > .border > .hdr > .center {
  color: #666;
  font-weight: bold;
}
.modal > .border > .hdr .fa-times {
  cursor: pointer;
  width: 25px;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
}
.modal > .border > .hdr .fa-times:hover {
  background-color: rgba(100, 100, 100, 0.1);
  color: var(--fgcolor);
}
.modal > .border > .cnt {
  position: relative;
}
.modal > .border > .cnt > .center {
  padding: 25px;
}
@media screen and (max-width: 1000px) {
  .modal > .border > .cnt > .center {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 1000px) {
  .modal > .border > .cnt > .center > .inline > * {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }
}
.modal > .border > .cnt > .center > .inline > .signup {
  width: 350px;
}
.modal > .border > .cnt > .center > .inline > .signin {
  width: 350px;
}
.modal > .border > .cnt > .center > .inline > .cart {
  vertical-align: top;
  position: relative;
  gap: 25px;
}
@media screen and (min-width: 1001px) {
  .modal > .border > .cnt > .center > .inline > .cart {
    width: 80svw;
    height: 70svh;
  }
}
.modal > .border > .cnt > .center > .inline > .cart > *:empty {
  display: none;
}
.modal > .border > .cnt > .center > .inline > .cart .items {
  display: flex;
  flex-flow: column;
  gap: 10px;
}
.modal > .border > .cnt > .center > .inline > .cart .items .item {
  width: 100%;
  gap: 10px;
  border: 1px solid var(--bordercolor);
  border-radius: 10px;
}
.modal > .border > .cnt > .center > .inline > .cart .items .item > .flex {
  gap: 10px;
  padding: 5px;
}
.modal > .border > .cnt > .center > .inline > .cart .items .item > .flex:last-of-type {
  border-top: 1px solid var(--bordercolor);
}
.modal > .border > .cnt > .center > .inline > .cart .items .item .img {
  overflow: hidden;
  padding: 10px;
}
.modal > .border > .cnt > .center > .inline > .cart .items .item .img > div {
  width: 64px;
  aspect-ratio: 1;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.modal > .border > .cnt > .center > .inline > .cart .items .item .controls {
  justify-content: end;
}
.modal > .border > .cnt > .center > .inline > .cart .items .item .controls > * {
  line-height: 25px;
  vertical-align: middle;
  padding: 5px 10px;
}
.modal > .border > .cnt > .center > .inline > .cart .items .item .prices .price {
  font-size: large;
  font-weight: bold;
  color: red;
}
.modal > .border > .cnt > .center > .inline > .cart .items .item .prices .price:after {
  content: var(--unitname);
  border-radius: 5px;
  background-image: linear-gradient(135deg, #111, #888);
  color: #FFF;
  padding: 2px 5px;
  font-weight: normal;
  font-size: 8.25pt;
  line-height: 10px;
  margin-inline-start: 10px;
}
.modal > .border > .cnt > .center > .inline > .cart .items .item .index {
  width: 32px;
  text-align: center;
  display: none;
}
.modal > .border > .cnt > .center > .inline > .cart .items .item .sum {
  display: none;
}
.modal > .border > .cnt > .center > .inline > .cart .cmd {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  font-size: 16px;
}
.modal > .border > .cnt > .center > .inline > .cart .cmd:hover {
  background-color: rgba(100, 100, 100, 0.1);
  color: var(--fgcolor);
}
.modal > .border > .cnt > .center > .inline > .cart .sum {
  font-size: medium;
  font-weight: bold;
}
.modal > .border > .cnt > .center > .inline > .receivement {
  vertical-align: top;
  position: relative;
}
@media screen and (min-width: 1001px) {
  .modal > .border > .cnt > .center > .inline > .receivement {
    width: 80svw;
    height: 70svh;
  }
}
.modal > .border > .cnt > .center > .inline > .receivement .item {
  width: 100%;
  gap: 10px;
}
.modal > .border > .cnt > .center > .inline > .receivement .item > * {
  line-height: 20px;
  vertical-align: middle;
  padding: 5px 10px;
  display: flex;
  line-height: 16px;
  align-items: center;
}
.modal > .border > .cnt > .center > .inline > .receivement .item .index {
  width: 32px;
  justify-content: center;
}
.modal > .border > .cnt > .center > .inline > .receivement .cmd {
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  font-size: 16px;
}
.modal > .border > .cnt > .center > .inline > .receivement .cmd, .modal > .border > .cnt > .center > .inline > .receivement .cmd > * {
  cursor: pointer;
}
.modal > .border > .cnt > .center > .inline > .receivement .cmd input {
  display: none;
}
.modal > .border > .cnt > .center > .inline > .receivement .cmd input:checked ~ i {
  opacity: 1;
  color: steelblue;
}
.modal > .border > .cnt > .center > .inline > .receivement .cmd input:not(:checked) ~ i {
  opacity: 0.3;
  transform: scale(0.7);
}
.modal > .border > .cnt > .center > .inline > .receivement .cmd:hover {
  background-color: rgba(100, 100, 100, 0.1);
  color: var(--fgcolor);
}
.modal > .border > .cnt > .center > .inline > .address {
  width: 650px;
  height: 400px;
  vertical-align: top;
  position: relative;
}
@media screen and (min-width: 1001px) {
  .modal > .border > .cnt > .center > .inline > .address {
    width: 80svw;
    height: 70svh;
  }
}
.modal > .border > .cnt > .center > .inline > .address .item {
  width: 100%;
  gap: 10px;
}
.modal > .border > .cnt > .center > .inline > .address .item > * {
  line-height: 20px;
  vertical-align: middle;
  padding: 5px 10px;
  display: flex;
  line-height: 16px;
  align-items: center;
}
.modal > .border > .cnt > .center > .inline > .address .item .index {
  width: 32px;
  justify-content: center;
}
.modal > .border > .cnt > .center > .inline > .address .cmd {
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  font-size: 16px;
}
.modal > .border > .cnt > .center > .inline > .address .cmd, .modal > .border > .cnt > .center > .inline > .address .cmd > * {
  cursor: pointer;
}
.modal > .border > .cnt > .center > .inline > .address .cmd input {
  display: none;
}
.modal > .border > .cnt > .center > .inline > .address .cmd input:checked ~ i {
  opacity: 1;
  color: steelblue;
}
.modal > .border > .cnt > .center > .inline > .address .cmd input:not(:checked) ~ i {
  opacity: 0.3;
  transform: scale(0.7);
}
.modal > .border > .cnt > .center > .inline > .address .cmd:hover {
  background-color: rgba(100, 100, 100, 0.1);
  color: var(--fgcolor);
}
.modal > .border > .cnt > .center > .inline > .changeaddress {
  gap: 25px;
}
.modal > .border > .cnt > .center > .inline > .changeaddress .mapper {
  width: 350px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 1/1;
}
.modal > .border > .cnt > .center > .inline > .changeaddress .forms {
  width: 350px;
  padding: 5px;
  padding-inline-end: 25px;
}
.modal > .border > .cnt > .center > .inline > .changeaddress .forms .control {
  padding: 5px;
  margin: 0px;
}
.modal > .border > .cnt > .center > .inline > .orders {
  vertical-align: top;
}
@media screen and (max-width: 1000px) {
  .modal > .border > .cnt > .center > .inline > .orders {
    padding: 25px;
  }
  .modal > .border > .cnt > .center > .inline > .orders .ttl {
    display: none;
  }
}
@media screen and (min-width: 1001px) {
  .modal > .border > .cnt > .center > .inline > .orders {
    width: 800px;
    height: 500px;
    position: relative;
  }
}
.modal > .border > .cnt > .center > .inline > .orders .order-item {
  border: 1px solid var(--bordercolor);
  border-radius: 5px;
  padding: 10px;
  clear: both;
  overflow: hidden;
}
.modal > .border > .cnt > .center > .inline > .orders .order-item:not(:last-of-type) {
  margin-bottom: 3px;
}
.modal > .border > .cnt > .center > .inline > .orders .order-item .ttl {
  width: 32px;
  position: relative;
}
.modal > .border > .cnt > .center > .inline > .orders .order-item .ttl:before {
  content: "سفــــارش";
  font-weight: bolder;
  color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: -10px;
  right: -10px;
  width: 100%;
  bottom: -10px;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  background-color: rgba(0, 0, 0, 0.02);
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px dashed rgba(0, 0, 0, 0.2);
}
.modal > .border > .cnt > .center > .inline > .orders .order-item .id {
  font-size: x-large;
  font-weight: bold;
  float: inline-start;
  margin-inline-end: 10px;
}
.modal > .border > .cnt > .center > .inline > .orders .order-item .date {
  opacity: 0.7;
  margin-top: 10px;
}
.modal > .border > .cnt > .center > .inline > .orders .order-item .address {
  clear: both;
  display: block;
  margin-bottom: 10px;
}
.modal > .border > .cnt > .center > .inline > .orders .order-item .address:before {
  content: "ارسال شده به : ";
}
.modal > .border > .cnt > .center > .inline > .orders .order-item .price {
  font-size: large;
  font-weight: bold;
  padding: 5px;
}
.modal > .border > .cnt > .center > .inline > .orders .order-item .price, .modal > .border > .cnt > .center > .inline > .orders .order-item .price * {
  line-height: 32px;
}
.modal > .border > .cnt > .center > .inline > .orders .order-item .price:after {
  content: var(--unitname);
  font-size: xx-small;
  margin-inline-start: 5px;
  font-weight: normal;
  display: inline-block;
  transform: rotate(-45deg) translateY(-5px);
  color: red;
}
.modal > .border > .cnt > .center > .inline > .orders .order-item .club, .modal > .border > .cnt > .center > .inline > .orders .order-item .state {
  display: inline-flex;
  flex-flow: row;
  position: relative;
  padding: 3px 15px;
  line-height: 20px;
}
.modal > .border > .cnt > .center > .inline > .orders .order-item .state:before {
  content: "";
  opacity: 0.1;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  background-color: var(--bg);
}
.modal > .border > .cnt > .center > .inline > .orders .order-item .state span {
  text-align: center;
  display: block;
}
.modal > .border > .cnt > .center > .inline > .orders .order-item .club {
  gap: 5px;
  color: darkgoldenrod;
}
.modal > .border > .cnt > .center > .inline > .orders .order-item .club i {
  font-size: 14px;
  vertical-align: top;
}
.modal > .border > .cnt > .center > .inline > .orders .order-item .club:before {
  content: "";
  opacity: 0.1;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  background-color: darkgoldenrod;
}
.modal > .border > .cnt > .center > .inline > .orders .order-item .price {
  clear: both;
}
.modal > .border > .cnt > .center > .inline > .orders .order-item .commands {
  text-align: end;
  margin-top: 10px;
}
.modal > .border > .cnt > .center > .inline > .orders .item {
  width: 100%;
  gap: 10px;
}
.modal > .border > .cnt > .center > .inline > .orders .item > * {
  line-height: 20px;
  vertical-align: middle;
  padding: 5px 10px;
  display: flex;
  line-height: 16px;
  align-items: center;
}
.modal > .border > .cnt > .center > .inline > .orders .item .index {
  width: 32px;
  justify-content: center;
}
.modal > .border > .cnt > .center > .inline > .payment {
  width: 600px;
  height: 400px;
  vertical-align: top;
  position: relative;
}
.modal > .border > .cnt > .center > .inline > .payment > .gap {
  gap: 25px;
}
.modal > .border > .cnt > .center > .inline > .payment input[type=radio] {
  display: none;
}
.modal > .border > .cnt > .center > .inline > .payment input[type=radio] ~ label {
  display: flex;
  gap: 10px;
  padding: 10px;
  cursor: pointer;
}
.modal > .border > .cnt > .center > .inline > .payment input[type=radio] ~ label i {
  justify-self: flex-start;
  font-size: 16px;
  vertical-align: middle;
  align-items: center;
  display: flex;
}
.modal > .border > .cnt > .center > .inline > .payment input[type=radio] ~ label span {
  flex: 1;
  font-weight: bold;
}
.modal > .border > .cnt > .center > .inline > .payment input[type=radio]:not(:checked) ~ label > i {
  opacity: 0.1;
}
.modal > .border > .cnt > .center > .inline > .payment input[type=radio]:not(:checked) ~ div.content {
  display: none;
}
.modal > .border > .cnt > .center > .inline > .payment input[type=radio]:checked ~ label > i {
  opacity: 1;
  color: steelblue;
}
.modal > .border > .cnt > .center > .inline > .payment input[type=radio]:checked ~ div.content {
  display: block;
}
.modal > .border > .cnt > .center > .inline > .payment .radios label {
  display: inline-flex;
  flex-direction: column;
  width: 128px;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
  gap: 10px;
  cursor: pointer;
}
.modal > .border > .cnt > .center > .inline > .payment .radios label i {
  font-size: 24px;
  opacity: 0.3;
}
.modal > .border > .cnt > .center > .inline > .payment .radios label b {
  font-size: small;
}
.modal > .border > .cnt > .center > .inline > .payment .radios label span {
  font-size: smaller;
  display: none;
}
.modal > .border > .cnt > .center > .inline > .payment .radios label:has(input:checked) {
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--bordercolor);
}
.modal > .border > .cnt > .center > .inline > .payment .radios label:has(input:checked) i {
  opacity: 1;
  color: steelblue;
}
.modal > .border > .cnt > .center > .inline > .payment .radios label:has(input:not(:checked)) {
  border: 1px solid rgba(0, 0, 0, 0);
}
.modal > .border > .cnt > .center > .inline > .order {
  width: 900px;
  height: 600px;
  vertical-align: top;
  position: relative;
  gap: 25px;
}
.modal > .border > .cnt > .center > .inline > .order .header label {
  position: relative;
  padding: 3px 5px;
  display: inline-flex;
  flex-flow: row;
  gap: 5px;
  margin-block: -3px;
}
.modal > .border > .cnt > .center > .inline > .order .header label i {
  align-items: center;
  display: flex;
  color: var(--color);
}
.modal > .border > .cnt > .center > .inline > .order .header label i, .modal > .border > .cnt > .center > .inline > .order .header label span {
  z-index: 1;
}
.modal > .border > .cnt > .center > .inline > .order .header label:before {
  background-color: var(--color);
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.3;
  border-radius: 5px;
  z-index: 0;
}
.modal > .border > .cnt > .center > .inline > .order .table {
  display: table;
  width: 100%;
}
.modal > .border > .cnt > .center > .inline > .order .table > .tr {
  display: table-row;
}
.modal > .border > .cnt > .center > .inline > .order .table > .tr:not(:last-of-type) > * {
  border-bottom: 1px solid var(--bordercolor);
}
.modal > .border > .cnt > .center > .inline > .order .table > .tr > .td, .modal > .border > .cnt > .center > .inline > .order .table > .tr > .th {
  display: table-cell;
  padding: 10px 15px;
  border-width: 3px;
}
.modal > .border > .cnt > .center > .inline > .order .table > .tr > .td.th, .modal > .border > .cnt > .center > .inline > .order .table > .tr > .th.th {
  font-weight: bold;
}
.modal > .border > .cnt > .center > .inline > .order .table > .tr > .td.nw, .modal > .border > .cnt > .center > .inline > .order .table > .tr > .th.nw {
  width: 10px;
  white-space: nowrap;
}
.modal > .border > .cnt > .center > .inline > .order .table > .tr > .td.sum, .modal > .border > .cnt > .center > .inline > .order .table > .tr > .th.sum {
  width: 150px;
}
.modal > .border > .cnt > .center > .inline > .order .unit {
  font-weight: bold;
  font-size: medium;
  text-align: end;
}
.modal > .border > .cnt > .center > .inline > .order .unit::after {
  content: "تومان";
  font-size: smaller;
  display: inline-block;
  margin-inline-start: 5px;
  color: red;
}
.modal > .border > .cnt > .center > .inline > .order .extras {
  padding: 10px 15px;
}
.modal > .border > .cnt > .center > .inline > .order .extras .end {
  width: 150px;
}
.modal > .border > .cnt > .center > .inline > .order .payments,
.modal > .border > .cnt > .center > .inline > .order .receivement,
.modal > .border > .cnt > .center > .inline > .order .buyer {
  padding: 10px 15px;
  border: 1px solid var(--bordercolor);
  background-color: rgba(0, 0, 0, 0.01);
  border-radius: 5px;
}
.modal > .border > .cnt > .center > .inline > .order .payments:not(:last-of-type),
.modal > .border > .cnt > .center > .inline > .order .receivement:not(:last-of-type),
.modal > .border > .cnt > .center > .inline > .order .buyer:not(:last-of-type) {
  margin-bottom: 25px;
}
.modal > .border > .cnt > .center > .inline > .order .payments .item,
.modal > .border > .cnt > .center > .inline > .order .receivement .item,
.modal > .border > .cnt > .center > .inline > .order .buyer .item {
  display: flex;
  flex-flow: row;
  gap: 10px;
  line-height: 25px;
}
.modal > .border > .cnt > .center > .inline > .order .payments .item strong,
.modal > .border > .cnt > .center > .inline > .order .receivement .item strong,
.modal > .border > .cnt > .center > .inline > .order .buyer .item strong {
  justify-self: flex-start;
  color: blueviolet;
}
.modal > .border > .cnt > .center > .inline > .order .payments .item strong:after,
.modal > .border > .cnt > .center > .inline > .order .receivement .item strong:after,
.modal > .border > .cnt > .center > .inline > .order .buyer .item strong:after {
  content: " : ";
}
.modal > .border > .cnt > .center > .inline > .order .payments .item span,
.modal > .border > .cnt > .center > .inline > .order .receivement .item span,
.modal > .border > .cnt > .center > .inline > .order .buyer .item span {
  flex: 1;
}
.modal > .border > .cnt > .center > .inline > .order .buyer {
  background-image: linear-gradient(45deg, rgba(0, 153, 255, 0.1), rgba(150, 150, 150, 0.01), rgba(150, 150, 150, 0.01));
  position: relative;
  overflow: hidden;
}
.modal > .border > .cnt > .center > .inline > .order .buyer:before {
  content: "";
  position: absolute;
  bottom: 12.5px;
  left: 12.5px;
  width: 50%;
  height: 100%;
  background-image: url("/images/order/location.png");
  background-repeat: no-repeat;
  background-position: left bottom;
  pointer-events: none;
  opacity: 0.1;
}
.modal > .border > .cnt > .center > .inline > .order .buyer:after {
  content: "کدتحویل : " attr(data-verifycode);
  position: absolute;
  top: 25px;
  left: 25px;
  width: 50%;
  height: 100%;
  pointer-events: none;
  font-size: medium;
  font-weight: bold;
  text-align: end;
}
.modal > .border > .cnt > .center > .inline > .order .receivement {
  background-image: linear-gradient(45deg, rgba(140, 0, 255, 0.1), rgba(150, 150, 150, 0.01), rgba(150, 150, 150, 0.01));
  position: relative;
  overflow: hidden;
}
.modal > .border > .cnt > .center > .inline > .order .receivement:before {
  content: "";
  position: absolute;
  bottom: 12.5px;
  left: 12.5px;
  width: 50%;
  height: 100%;
  background-image: url("/images/order/delivery.png");
  background-repeat: no-repeat;
  background-position: left bottom;
  pointer-events: none;
  opacity: 0.1;
}
.modal > .border > .cnt > .center > .inline > .order .payments .pay {
  gap: 10px;
}
.modal > .border > .cnt > .center > .inline > .order .payments .end {
  width: 150px;
}
.modal > .border > .cnt > .center > .inline > .order .payments .status {
  border-radius: 100px;
  font-size: smaller;
  padding: 2px 10px;
}
.modal > .border > .cnt > .center > .inline > .order .payments .status.success {
  color: yellowgreen;
  background-color: rgba(136, 255, 0, 0.137254902);
}
.modal > .border > .cnt > .center > .inline > .order .payments .status.fail {
  color: maroon;
  background-color: rgba(255, 0, 0, 0.1254901961);
}
.modal > .border > .cnt > .center > .inline > .order .payments .status.send {
  color: goldenrod;
  background-color: rgba(218, 165, 32, 0.1);
}
.modal > .border > .cnt > .center > .inline > .order .payments .status.pend {
  color: blue;
  background-color: rgba(0, 60, 255, 0.1254901961);
}
.modal > .border > .cnt > .center > .inline > .share {
  width: 400px;
}
.modal > .border > .cnt > .center > .inline > .share input {
  font-family: "Courier New", Courier, monospace;
  text-align: start;
  direction: ltr;
}
.modal > .border > .cnt > .center > .inline > .share .links {
  display: flex;
  flex-direction: row;
  gap: 5px;
}
.modal > .border > .cnt > .center > .inline > .share .links a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px 0px;
  color: inherit;
  border-radius: 5px;
  aspect-ratio: 1/1;
  opacity: 0.4;
}
.modal > .border > .cnt > .center > .inline > .share .links a i {
  font-size: 32px;
}
.modal > .border > .cnt > .center > .inline > .share .links a span {
  font-size: 9px;
  display: none;
}
.modal > .border > .cnt > .center > .inline > .share .links a:hover {
  opacity: 1;
  color: var(--bgcolor);
  background-image: var(--bg-clr);
}
.modal > .border > .cnt > .center > .inline > .compare {
  width: 80svw;
  height: 70svh;
  position: relative;
}
.modal > .border > .cnt > .center > .inline > .compare.msg {
  width: 450px;
  height: 200px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.modal > .border > .cnt > .center > .inline > .compare table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--bordercolor);
}
.modal > .border > .cnt > .center > .inline > .compare table tr > * {
  border-bottom: 1px solid var(--bordercolor);
}
.modal > .border > .cnt > .center > .inline > .compare table td, .modal > .border > .cnt > .center > .inline > .compare table th {
  text-align: start;
  padding: 5px 15px;
  vertical-align: top;
}
.modal > .border > .cnt > .center > .inline > .compare table td .img, .modal > .border > .cnt > .center > .inline > .compare table th .img {
  display: inline-flex;
  height: 150px;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  margin: 25px 0px;
}
.modal > .border > .cnt > .center > .inline > .compare table td span {
  display: inline-block;
  margin: 0px 3px;
  font-size: medium;
}
.modal > .border > .cnt > .center > .inline > .compare table td i {
  font-size: 16px;
  line-height: 28px;
  vertical-align: middle;
  margin-inline-end: 10px;
  cursor: pointer;
  opacity: 0.7;
  width: 28px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
}
.modal > .border > .cnt > .center > .inline > .compare table td i:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.1);
}
.modal > .border > .cnt > .center > .inline > .compare table th {
  text-align: end;
  border-inline-end: 1px dashed var(--bordercolor);
  color: purple;
  font-size: medium;
}
.modal > .border > .cnt > .center > .inline > .compare table td:not(:last-of-type) {
  border-inline-end: 1px dashed var(--bordercolor);
}
.modal > .border > .cnt > .center > .inline > .compare table tbody > tr:hover > * {
  background-color: rgba(100, 100, 100, 0.05);
}
.modal > .border > .cnt > .center > .inline > .compare table thead > tr:last-of-type {
  border-bottom: 3px solid var(--bordercolor);
}
@keyframes progress {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@media screen and (min-width: 300px) and (max-width: 640px) {
  .modal > .border > .cnt > .center > .inline > .message i {
    font-size: 24px;
  }
}
@media screen and (min-width: 641px) {
  .modal > .border > .cnt > .center > .inline > .message {
    width: 300px;
    height: 150px;
  }
  .modal > .border > .cnt > .center > .inline > .message i {
    font-size: 48px;
    margin-bottom: 12.5px;
  }
}
.modal > .border > .cnt > .center > .inline > .message span {
  font-size: small;
}
.modal > .border > .cnt > .center > .inline > .message.success, .modal > .border > .cnt > .center > .inline > .message.ok, .modal > .border > .cnt > .center > .inline > .message.accept {
  --tcolor: green;
}
.modal > .border > .cnt > .center > .inline > .message.error, .modal > .border > .cnt > .center > .inline > .message.err, .modal > .border > .cnt > .center > .inline > .message.fail {
  --tcolor: red;
}
.modal > .border > .cnt > .center > .inline > .message.info {
  --tcolor: steelblue;
}
.modal > .border > .cnt > .center > .inline > .message.system {
  --tcolor: orange;
}
.modal > .border > .cnt > .center > .inline > .message i {
  color: var(--tcolor);
}
.modal > .border > .cnt > .center > .inline > .message .progress {
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 2;
}
.modal > .border > .cnt > .center > .inline > .message .progress * {
  transition: all ease 0.3s;
}
.modal > .border > .cnt > .center > .inline > .message .progress .bar {
  background-color: var(--tcolor);
  height: 2px;
  width: 1%;
  animation: progress linear;
  animation-duration: var(--tm);
}

.common.order-road-map {
  width: 100%;
}
.common.order-road-map .container {
  display: flex;
  flex-flow: row;
  flex-basis: content;
  flex-wrap: nowrap;
}
.common.order-road-map .container > .item {
  flex: 1;
  display: flex;
  justify-self: flex-start;
  justify-content: center;
  flex-flow: column;
  align-items: center;
  white-space: nowrap;
  position: relative;
}
.common.order-road-map .container > .item.past {
  --color:green;
  --fcolor: #FFF;
}
.common.order-road-map .container > .item.present {
  --color:steelblue;
  --fcolor: #FFF;
}
.common.order-road-map .container > .item.present .index {
  transform: scale(1.2);
}
.common.order-road-map .container > .item.future {
  --color:#333;
  --fcolor: #FFF;
  opacity: 0.3;
}
.common.order-road-map .container > .item.future .index {
  transform: scale(0.8);
}
.common.order-road-map .container > .item .index {
  border-radius: 10px;
  color: var(--fcolor);
  background-color: var(--color);
  aspect-ratio: 1/1;
  width: 32px;
  align-items: center;
  justify-content: center;
  display: flex;
  z-index: 1;
  box-shadow: 0px 0px 0px 5px var(--bgcolor);
}
.common.order-road-map .container > .item .title {
  margin-top: 10px;
  font-size: smaller;
}
.common.order-road-map .container > .item:before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0px;
  width: 100%;
  border-top: 3px solid var(--color);
  z-index: 0;
}
.common.order-road-map .container > .seprate {
  display: flex;
  flex: 0;
}/*# sourceMappingURL=site.css.map */