/* body */
/* IranSans */

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 100;
  src:
    url("fonts/woff/IRANSansXFaNum-Thin.woff") format("woff"),
    url("fonts/woff2/IRANSansXFaNum-Thin.woff2") format("woff2");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 200;
  src:
    url("fonts/woff/IRANSansXFaNum-UltraLight.woff") format("woff"),
    url("fonts/woff2/IRANSansXFaNum-UltraLight.woff2") format("woff2");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 300;
  src:
    url("fonts/woff/IRANSansXFaNum-Light.woff") format("woff"),
    url("fonts/woff2/IRANSansXFaNum-Light.woff2") format("woff2");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 500;
  src:
    url("fonts/woff/IRANSansXFaNum-Medium.woff") format("woff"),
    url("fonts/woff2/IRANSansXFaNum-Medium.woff2") format("woff2");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 600;
  src:
    url("fonts/woff/IRANSansXFaNum-DemiBold.woff") format("woff"),
    url("fonts/woff2/IRANSansXFaNum-DemiBold.woff2") format("woff2");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 800;
  src:
    url("fonts/woff/IRANSansXFaNum-ExtraBold.woff") format("woff"),
    url("fonts/woff2/IRANSansXFaNum-ExtraBold.woff2") format("woff2");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 900;
  src:
    url("fonts/woff/IRANSansXFaNum-Black.woff") format("woff"),
    url("fonts/woff2/IRANSansXFaNum-Black.woff2") format("woff2");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 950;
  src:
    url("fonts/woff/IRANSansXFaNum-ExtraBlack.woff") format("woff"),
    url("fonts/woff2/IRANSansXFaNum-ExtraBlack.woff2") format("woff2");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: 1000;
  src:
    url("fonts/woff/IRANSansXFaNum-Heavy.woff") format("woff"),
    url("fonts/woff2/IRANSansXFaNum-Heavy.woff2") format("woff2");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: bold;
  src:
    url("fonts/woff/IRANSansXFaNum-Bold.woff") format("woff"),
    url("fonts/woff2/IRANSansXFaNum-Bold.woff2") format("woff2");
}

@font-face {
  font-family: IRANSansX;
  font-style: normal;
  font-weight: normal;
  src:
    url("fonts/woff/IRANSansXFaNum-Regular.woff") format("woff"),
    url("fonts/woff2/IRANSansXFaNum-Regular.woff2") format("woff2");
}

/* End */

.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

textarea::-webkit-input-placeholder {
  color: #ccc !important;
}

textarea:-moz-placeholder {
  /* Firefox 18- */
  color: #ccc !important;
}

textarea::-moz-placeholder {
  /* Firefox 19+ */
  color: #ccc !important;
}

textarea:-ms-input-placeholder {
  color: #ccc !important;
}

textarea::placeholder {
  color: #ccc !important;
}

textarea {
  resize: vertical;
}

input::-webkit-input-placeholder {
  color: #ccc !important;
}

input:-moz-placeholder {
  /* Firefox 18- */
  color: #ccc !important;
}

input::-moz-placeholder {
  /* Firefox 19+ */
  color: #ccc !important;
}

input:-ms-input-placeholder {
  color: #ccc !important;
}

input::placeholder {
  color: #ccc !important;
}

* {
  outline: none !important;
}

* {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

*,
input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 0px;
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background-color: #eee;
}

#scrollToTop {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  bottom: 80px;
  right: calc((100vw - min(var(--widthdashboard), 450px)) / 2);
  z-index: 9999;
  border: none;
  outline: none;
  background-color: #fff;
  color: #999;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  font-size: 18px;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

#scrollToTop.visible {
  opacity: 1;
  visibility: visible;
}

#scrollToTop i {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

#overlay {
  z-index: 1001;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  background: #00000020;
  backdrop-filter: blur(2px);
}

#overlay.without-back {
  background: #00000000;
  backdrop-filter: none;
}

#overlay.without-back .spinner-box {
  display: none;
}

#overlay .spinner-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #00000050;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

::-moz-selection {
  /* Code for Firefox */
  color: white;
  background: var(--basecolor);
}

::selection {
  color: white;
  background: var(--basecolor);
}

a:not([href]) {
  transition: 0.3s;
}

a:not([href]):hover {
  color: var(--button-active-hover);
}

body {
  font-family: IRANSansX !important;
  font-weight: 300;
  -webkit-appearance: none;
  background-color: #f9f9f9;
  overflow: auto !important;
  font-size: 15px;
}

html,
body {
  touch-action: manipulation;
  overscroll-behavior: auto;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.no-scroll {
  overflow: hidden;
  height: 100%;
}

a {
  cursor: pointer !important;
  text-decoration: none !important;
  color: #444;
}

:root {
  --basecolor: #1acd96;
  --basecolorshadow: #1acd9642;
  --basecolorshadowback: #1acd9611;
  --button-active-hover: #17a97c;
  --button-active: var(--basecolor);
  --button-deactive: #cacaca;
  --button-deactive-hover: #a8a8a8;
  --button-red: #ef394e;
  --button-red-hover: #c71d31;
  --button-white: #fafafa;
  --background-button: #f5f5f5;
  --buttonlinecolor: #1842f8;
  --buttonlinecolorhover: #1331b5;
  --buttonlinecolorback: #1842f815;
  /* نوار پیشرفت: زمینه طوسی تا مسیر نوار دیده شود، پر شدن با رنگ اصلی فروشگاه */
  --progress-track: #e4e4e4;
  --progress-fill: var(--basecolor);
}

.containery {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

/* loading */

.spinner {
  margin: auto;
}

.spinner-white {
  border-color: #fff !important;
  border-bottom-color: transparent !important;
}

.spinner-gray {
  border-color: #888 !important;
  border-bottom-color: transparent !important;
}

.spinner-red {
  border-color: var(--button-red) !important;
  border-bottom-color: transparent !important;
}

.spinner-green {
  border-color: var(--basecolor) !important;
  border-bottom-color: transparent !important;
}

.spinner-blue {
  border-color: #11a0ef !important;
  border-bottom-color: transparent !important;
}

.spinner-yellow {
  border-color: #ffba00 !important;
  border-bottom-color: transparent !important;
}

.spinner-purple {
  border-color: #9911ef !important;
  border-bottom-color: transparent !important;
}

.spinner {
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-bottom-color: transparent !important;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

.spinner.small {
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
}

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

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}

@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.bottom-height {
  height: 67px;
}

.bottom-height.short {
  height: 67px;
}

.bottom-height.product-bottom {
  height: 67px;
}

.bottom-height.product-bottom.closeshop {
  height: 108px !important;
}

.product .bottom-height.product-bottom,
.cartlist .bottom-height.product-bottom {
  height: 55px;
}

.top-height {
  height: 63px;
}

.bottom-padding {
  padding-bottom: 16px;
}

/* getmobile */

.box {
  overflow: auto;
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin-top: -37px;
}

.margin-1 {
  margin-right: 16px;
}

.box .margin-row,
.margin-row {
  margin-bottom: 16px;
}

.box a {
  width: var(--wc);
  height: var(--wc);
  color: var(--basecolor);
  border-radius: calc(var(--wc) / 2);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
  cursor: pointer;
  font-size: 30px;
  font-weight: 500;
  background-color: var(--background-button);
}

.box a:hover {
  background-color: var(--basecolor);
  color: white;
}

.top-title {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  -webkit-box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  width: 100%;
  padding: 16px 12px;
  border-bottom: 1px #f1f1f1 solid;
  z-index: 9;
  display: flex;
  justify-content: center;
  z-index: 999;
  height: 63px;
}

.bottom-header .footer-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bottom-header .footer-icon .footer-title {
  font-size: 11px;
  text-align: center;
  margin-top: 4px;
  font-weight: 400;
}

.bottom-header {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  -webkit-box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  width: 100%;
  padding: 16px 8px 10px 8px;
  border-bottom: 1px #f1f1f1 solid;
  display: flex;
  justify-content: space-evenly;
  z-index: 999;
  direction: rtl;
  height: 67px;
}

.top-title .title,
.addresstext {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.top-title .farsi {
  width: var(--widthdashboard);
  max-width: 450px;
  text-align: right;
}

.button {
  cursor: pointer;
}

.button-bottom {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 12px;
  -webkit-box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  width: 100%;
  justify-content: center;
  display: flex;
  z-index: 1000;
}

.button-bottom.product-button {
  -webkit-box-shadow: none;
  box-shadow: none;
  border-top: 1px #e5e5e5 solid;
  z-index: 999;
}

.button-bottom .button-row {
  width: calc(var(--widthdashboard));
  max-width: 450px;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.button-bottom .button-row a {
  color: #fff;
  border-radius: 8px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: 0.3s;
  text-align: center;
  direction: rtl;
}

.button-bottom .button-row .c100 {
  width: 100%;
  margin: 0px;
  /*background-color: var(--button-white);
    border: 1px solid var(--basecolor);
    color: var(--basecolor);*/
  background-color: #f0f0f0;
  border: 0;
  color: #555;
}

.button-bottom.one .button-row .c100 {
  width: 100%;
  margin: 0px;
  background-color: var(--button-active);
  border: 1px solid var(--button-active);
  color: #fff;
}

.button-bottom.one .button-row .c100:hover {
  background-color: var(--button-active-hover);
  border-color: var(--button-active-hover);
  color: #fff;
}

.button-bottom .button-row .c100:hover {
  /*border: 1px solid var(--button-active-hover);
    color: var(--button-active-hover);*/
  background-color: #e5e5e5;
}

.button-bottom .button-row .c50right {
  width: 50%;
  /*margin: 0px 0px 0px 6px;*/
}

.button-bottom .button-row .c50left {
  width: 50%;
  /*margin: 0px 6px 0px 0px;
    background-color: var(--button-white);
    border: 1px solid var(--basecolor);
    color: var(--basecolor);*/
  background-color: #f0f0f0;
  border: 0;
  color: #666;
}

.button-bottom .button-row .c50left:hover {
  /*border: 1px solid var(--button-active-hover);
    color: var(--button-active-hover);*/
  background-color: #e5e5e5;
}

.button-bottom .active {
  background-color: var(--button-active) !important;
  border: 1px solid var(--button-active) !important;
  color: #fff;
  transition: 0.3s;
}

.button-bottom .deactive,
.button-bottom.one .deactive {
  background-color: var(--button-deactive) !important;
  border: 1px solid var(--button-deactive) !important;
  color: #fff;
  transition: 0.3s;
}

.button-bottom .deactive:hover,
.button-bottom.one .deactive:hover {
  background-color: var(--button-deactive-hover) !important;
  border-color: var(--button-deactive-hover) !important;
}

.button-bottom .active:hover {
  background-color: var(--button-active-hover) !important;
  border-color: var(--button-active-hover) !important;
}

.redbutton {
  color: white !important;
  background-color: var(--button-red) !important;
  border-color: var(--button-red) !important;
}

.redbutton:hover {
  background-color: var(--button-red-hover) !important;
  border-color: var(--button-red-hover) !important;
}

.credit-label {
  direction: rtl;
  font-size: 13px;
  margin-bottom: 10px;
  width: 100%;
  text-align: center;
  font-weight: 400;
}

.credit-label.over {
  position: absolute;
  left: 6px;
  width: auto;
  top: 16px;
  /*background-color: #eee;*/
  color: #555;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 16px;
  /*border: 1px solid #ddd;*/
}

.send-credit .credit-label.over {
  top: 46px;
}

.credit-text {
  direction: rtl;
  font-size: 16px;
  color: #444;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

.top-label {
  direction: rtl;
  font-size: 14px;
  color: #888;
  margin-bottom: 8px;
  width: 100%;
  text-align: center;
}

.top-company {
  background: #f0f0f0;
  padding: 5px 10px;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-topright: 0;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  position: fixed;
  top: 0;
}

.top-label-title {
  direction: rtl;
  font-size: 15px;
  color: #888;
  text-align: center;
  padding: 12px;
  width: 100%;
  line-height: 30px;
  background: #fff;
  margin: 16px 0px 0px;
  border-radius: 8px;
}

.top-label-company {
  direction: rtl;
  font-size: 14px;
  color: #888;
  width: inherit;
  text-align: center;
  margin: 0;
}

.top-text {
  direction: rtl;
  color: #666;
  font-weight: 300;
  font-size: 32px;
  margin-bottom: 20px;
  white-space: nowrap;
}

.top-text .text-label,
.label.main .text-label {
  font-size: 13px;
  font-weight: 300;
  margin-right: 4px;
}

.top-text.wrap {
  white-space: normal;
  text-align: center;
}

.toman {
  margin-bottom: 0px;
}

.toman-label {
  font-weight: 300;
  font-size: 15px;
  margin-top: -5px;
  color: #999;
}

.palceholderclass {
  color: #ddd;
}

.invisible {
  visibility: hidden;
}

.state {
  border-radius: 65px;
  width: 130px;
  height: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  border: 4px solid var(--basecolor);
}

.success {
  border-color: var(--basecolor);
  color: var(--basecolor);
}

.error {
  border-color: var(--button-red);
  color: var(--button-red);
}

/* get gender and bd*/
.bdbox {
  overflow: auto;
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin-top: -37px;
}

.genderbox {
  border-radius: 20px;
  position: relative;
  background-color: var(--background-button);
}

.genderbox .activecolor {
  color: #fff !important;
}

.genderbox .activebox {
  position: absolute;
  width: 75px;
  height: 40px;
  background-color: var(--basecolor);
  margin-top: 0px;
  border-radius: 20px;
}

.genderbox a {
  width: 75px;
  height: 40px;
  color: var(--basecolor);
  align-items: center !important;
  justify-content: center !important;
  display: flex;
  position: relative;
  transition: 0.3s;
  font-weight: 300;
}

.customercredit.genderbox a,
.customercredit.genderbox .activebox {
  width: 96px;
}

.hide {
  display: none !important;
}

.marginday-1 {
  margin-right: 5px;
}

.daybox .margin-row {
  margin-bottom: 5px;
}

.monthbox .margin-row {
  margin-bottom: 5px;
}

.daybox a {
  width: var(--wday);
  height: var(--wday);
  color: var(--basecolor);
  border-radius: calc(var(--wday) / 2);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
  cursor: pointer;
  font-size: 15px;
  font-weight: 300;
  background-color: var(--background-button);
}

.monthbox a {
  width: var(--wmonth);
  height: var(--hmonth);
  color: var(--basecolor);
  border-radius: calc(var(--wmonth) / 3);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
  cursor: pointer;
  font-size: 15px;
  font-weight: 300;
  padding-bottom: 4px;
  background-color: var(--background-button);
}

.daybox a:hover,
.dayactive,
.monthbox a:hover,
.monthactive {
  background-color: var(--basecolor) !important;
  color: white !important;
  transition: 0.3s;
}

.monthactive .monthtitle,
.monthbox a:hover .monthtitle,
.monthbox a .monthtitle:hover {
  color: white !important;
  transition: 0.3s;
}

.monthtitle {
  font-size: 8px;
  color: #aaa;
  margin-bottom: 4px;
  margin-top: 8px;
  transition: 0.3s;
}

/*cat*/

.categorybottom {
  padding-bottom: 74px;
  padding-top: 16px;
}

.catbox {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

.categorylist {
  flex-grow: 1;
}

.categorycontainer {
  height: calc(var(--vh, 1vh) * 100);
}

.cutomercategory-row {
  width: calc(var(--widthbutton)) !important;
  display: flex;
  flex-direction: row;
  direction: rtl;
  margin: 0px auto;
  padding: 4px 0px 4px 0px;
}

.cutomercategory-column.column1 {
  margin-left: 8px;
}

.cutomercategory-column.active {
  border: 1px solid var(--basecolor) !important;
  box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
  color: var(--basecolor) !important;
}

.cutomercategory-row .cutomercategory-column {
  display: flex;
  direction: rtl;
  align-items: center;
  justify-content: center !important;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: white;
  padding: 20px 10px;
  transition: 0.3s;
  width: calc(var(--widthbutton) / 2 - 4px) !important;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}

.cutomercategory a:hover {
  color: white;
  background-color: var(--button-active-hover) !important;
}

.cutomercategory a {
  font-size: 22px;
  color: white;
  background-color: var(--basecolor) !important;
  height: 45px;
  border-radius: 25px;
  width: 45px;
  display: flex;
  margin-right: 8px;
  margin-top: 5px;
  transition: 0.3s;
}

.cutomercategory a span {
  margin: auto;
  line-height: 0;
}

.cutomercategory {
  display: flex;
  direction: rtl;
}

.cutomername,
.cutomercategory {
  padding: 0;
  margin-bottom: 8px;
  position: relative;
}

.cutomername .toman-label {
  position: absolute;
  top: 17px;
  left: 12px;
  margin: 0;
}

.cutomercategory input {
  width: calc(var(--widthbutton) - 45px - 8px) !important;
}

/*name*/

.cutomername input,
.cutomercategory input {
  border-radius: 23px;
  position: relative;
  background-color: white;
  height: 45px;
  padding: 0 10px;
  text-align: center;
  width: var(--widthbutton);
  margin: 5px auto;
  border: 2px solid var(--basecolor);
}

.namelabel {
  color: var(--basecolor);
  font-weight: 400;
  font-size: 18px;
  direction: rtl;
  margin: 5px 0px 12px 0px !important;
}

.cutomerlabel {
  text-align: center;
  margin-bottom: 74px;
}

.cutomerlabel label {
  margin-bottom: 0px;
}

.credit-value .namelabel {
  background: #1acd9618;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 12px !important;
}

.cutomerlabel .checkout-btn {
  background: #ff4c5f18;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--button-red);
  color: var(--button-red);
  margin-bottom: 12px;
  display: inline-block;
  transition: all 0.3s;
  font-weight: 400;
}

.cutomerlabel .checkout-btn:hover {
  background: #ff4c5f25;
  color: var(--button-red);
}

.credit-value span {
  font-size: 30px;
  margin-left: 8px;
  color: var(--basecolor);
}

.credit-value {
  display: flex;
  align-items: center;
  justify-content: center;
}

.divider {
  margin: 0px auto 16px auto;
  height: 3px;
  width: calc(var(--widthdashboard) / 3);
  max-width: 150px;
  background-color: #eee;
  border-radius: 10px;
}

.divider.w100 {
  height: 1px;
  width: calc(var(--widthdashboard));
}

.setting .divider {
  margin: 16px auto 0px auto;
}

.namebox {
  overflow: auto;
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

/*done*/

.donebox {
  width: var(--widthbutton);
  overflow: auto;
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

.donebox.margin {
  margin-top: -37px;
}

/* all page */

.credit,
.sendsms,
.setting,
.dashboard,
.customerdashboard,
.login,
.maincontent,
.document,
.ticket,
.product,
.productsetting,
.shop,
.cartlist,
.shopinfo {
  /*height: 100vh;
    height: calc(var(--vh, 1vh) * 100);*/
  width: var(--widthdashboard);
  max-width: 450px;
  margin: 0 auto;
}

.testpage {
  width: 100vw;
  width: calc(var(--vw, 1vw) * 100);
  padding: 0px 16px;
}

.testpage .login-row {
  padding: 0px 16px;
}

.testpage .list {
  padding-top: 24px;
}

.testpage .row {
  display: flex;
  width: 100%;
  flex-flow: row;
}

.testpage .button {
  background-color: #1acd96;
  border-radius: 10px;
  box-shadow:
    0 2px 5px rgb(255 255 255 / 25%),
    0 5px 15px rgb(26 205 150 / 35%) !important;
  color: #fff;
  fill: #fff;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  position: relative;
  top: 0px;
  transition: all 0.3s;
}

.testpage .button:hover {
  box-shadow:
    0 2px 5px rgb(255 255 255 / 30%),
    0 7px 30px rgb(23 169 124 / 45%) !important;
  top: -3px;
  color: #fff;
  fill: #fff;
}

.boxdesign-background {
  background-color: white;
  border-radius: 10px;
  width: 100%;
}

.boxdesign {
  -webkit-border-radius: 8px;
  border-radius: 8px !important;
  /*border: 1px solid var(--basecolor);
    border-bottom-width: 5px;*/
  background: white;
  padding: 12px;
  /*-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .05);
    box-shadow: 0 0 15px rgba(0, 0, 0, .05);
    border: 1px #f0f0f0 solid;*/
  transition: 0.3s;
  direction: rtl;
}

/*dashboard*/

.dashboard-button {
  height: 42px;
  width: 100%;
  color: #555 !important;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: start;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: 0.3s;
  /*border: 1px solid var(--basecolor);*/
  direction: rtl;
  padding-right: 6px;
  position: relative;
  background-color: #fafafa;
  border: 1px solid #f0f0f0 !important;
}

.dashboard-button:hover {
  background-color: #f0f0f0;
}

.dashboard-button:not(.no-after)::after,
.addressbutton:not(.no-after)::after {
  font-family: uicons-regular-rounded !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  content: "\e091";
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 15px;
}

.dashboard-button i,
.addressbutton i {
  font-size: 16px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff88;
  border-radius: 8px;
  margin-left: 8px;
}

.dashboard-button .badgebtn {
  background-color: var(--button-red) !important;
  padding-top: 2px;
  border-radius: 50%;
  margin-right: 6px;
  color: white;
  font-size: 12px;
  width: 18px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.customer-dashboard {
  direction: rtl;
}

.customer-dashboard-box .icon {
  width: 50px;
  height: 50px;
  color: #1acd96 !important;
  background-color: #e2f9f2 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  position: absolute;
  top: -16px;
  font-size: 20px;
  border: 1px solid #1acd96;
}

.customer-dashboard-box .icon.red,
.find-dashboard-box .icon.red {
  background-color: #ffe9eb !important;
  color: #ff4c5f !important;
  border-color: #ff4c5f !important;
}

.customer-dashboard-box .icon.blue,
.find-dashboard-box .icon.blue {
  background-color: #e1f3fd !important;
  color: #11a0ef !important;
  border-color: #11a0ef !important;
}

.customer-dashboard-box .icon.gray,
.find-dashboard-box .icon.gray {
  background-color: #f0f0f0 !important;
  color: #888888 !important;
  border-color: #888888 !important;
}

.customer-dashboard-box .icon.yellow,
.find-dashboard-box .icon.yellow {
  background-color: #fff6df !important;
  color: #ffba00 !important;
  border-color: #ffba00 !important;
}

.customer-dashboard-box .top-text {
  margin-bottom: 0px;
  font-size: 20px !important;
  font-weight: 400;
  margin-top: 5px;
  width: 100%;
  text-align: center;
}

.find-dashboard-box .top-text {
  margin-bottom: 0px;
  font-size: 20px !important;
  font-weight: 400;
  white-space: normal;
  text-align: right;
  line-height: 35px;
  width: 100%;
}

.find-dashboard-box .top-label {
  margin-top: 8px !important;
  font-weight: 300;
  white-space: normal;
  line-height: 30px;
  font-size: 15px;
  color: #666;
  text-align: right;
}

.find-dashboard-box .icon {
  width: 100%;
  color: #1acd96 !important;
  background-color: #e2f9f2 !important;
  display: flex;
  align-items: center;
  justify-content: right;
  border-radius: 15px;
  font-size: 17px;
  padding: 8px 8px 8px 12px;
  margin-top: 8px !important;
}

.find-dashboard-box .icon .img {
  height: 36px;
  background-color: #ffffff88;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.find-dashboard-box .icon .img i {
  height: 17px;
}

.find-dashboard-box .icon .button {
  font-size: 16px;
  margin-right: 8px;
  font-weight: 400;
  text-align: right;
}

.customer-dashboard-box {
  margin-top: 32px;
  width: calc(var(--widthdashboard) / 2 - 8px);
  max-width: calc(225px - 8px);
  position: relative;
  padding-top: 50px;
  cursor: pointer;
}

.find-dashboard-box {
  width: calc(var(--widthdashboard) / 2 - 8px);
  max-width: calc(225px - 8px);
  position: relative;
  cursor: pointer;
  border-radius: 20px;
  padding: 15px;
}

.customer-dashboard-box:nth-child(1),
.find-dashboard-box:nth-child(1) {
  margin-left: 8px;
}

.customer-dashboard-box:nth-child(2),
.find-dashboard-box:nth-child(2) {
  margin-right: 8px;
}

.dashboard-box {
  margin-top: 16px;
}

.dashboard-box .top-text {
  margin-bottom: 16px;
}

.dashboard-button.white.color {
  color: #aaa !important;
  background-color: var(--button-white) !important;
  border-color: #aaaaaa50 !important;
}

.dashboard-button.white.color:hover {
  border-color: #555 !important;
  color: #555 !important;
}

.dashboard-button.red.outline {
  color: #ff4c5f !important;
}

.dashboard-button.red.color {
  color: #ff4c5f !important;
  /*background-color: #ff4c5f20 !important;*/
  border-color: #ff4c5f50 !important;
}

.dashboard-button.red.color:hover {
  /*background-color: #ff4c5f30 !important;*/
}

.dashboard-button.red.color.outline {
  color: #ff4c5f !important;
  background-color: #ff4c5f20 !important;
  border-color: #ff4c5f50 !important;
}

.dashboard-button.red.color.outline:hover {
  background-color: #ff4c5f30 !important;
}

.dashboard-button.green.color {
  color: var(--basecolor) !important;
  /*background-color: #1acd9620 !important;*/
  border-color: var(--basecolorshadow) !important;
}

.dashboard-button.green.color:hover {
  /*background-color: var(--basecolorshadow) !important;*/
}

.dashboard-button.green.color.outline {
  color: var(--basecolor) !important;
  background-color: #1acd9620 !important;
  border-color: #1acd9650 !important;
}

.dashboard-button.green.color.outline:hover {
  background-color: var(--basecolorshadow) !important;
}

.dashboard-button.gray.color {
  color: #888 !important;
  /*background-color: #88888820 !important;*/
  border-color: #888 !important;
}

.dashboard-button.gray.color:hover {
  /*background-color: #88888830 !important;*/
}

.dashboard-button.blue.color {
  color: #11a0ef !important;
  /*background-color: #11a0ef20 !important;*/
  border-color: #11a0ef50 !important;
}

.dashboard-button.blue.color:hover {
  /*background-color: #11a0ef30 !important;*/
}

.dashboard-button.blue.color.outline {
  color: #11a0ef !important;
  background-color: #11a0ef20 !important;
  border-color: #11a0ef50 !important;
}

.dashboard-button.blue.color.outline:hover {
  background-color: #11a0ef30 !important;
}

.dashboard-button.yellow.color {
  color: #f07722 !important;
  /*background-color: #f0772220 !important;*/
  border-color: #f0772250 !important;
}

.dashboard-button.yellow.color:hover {
  /*background-color: #f0772230 !important;*/
}

.dashboard-button.yellow.color.outline {
  color: #f07722 !important;
  background-color: #f0772220 !important;
  border-color: #f0772250 !important;
}

.dashboard-button.yellow.color.outline:hover {
  background-color: #f0772230 !important;
}

.dashboard-button.purple.color {
  color: #9911ef !important;
  /*background-color: #9911ef20 !important;*/
  border-color: #9911ef !important;
}

.dashboard-button.purple.color:hover {
  /*background-color: #9911ef30 !important;*/
}

.dashboard-button.purple.outline.color {
  color: #9911ef !important;
  background-color: #9911ef20 !important;
  border-color: #9911ef !important;
}

.dashboard-button.purple.color.outline:hover {
  background-color: #9911ef30 !important;
}

.dashboard-button.pink.color {
  color: #ff6fb5 !important;
  /*background-color: #ff6fb520 !important;*/
  border-color: #ff6fb5 !important;
}

.dashboard-button.pink.color:hover {
  /*background-color: #ff6fb530 !important;*/
}

.dashboard-button.pink.color.outline {
  color: #ff6fb5 !important;
  background-color: #ff6fb520 !important;
  border-color: #ff6fb5 !important;
}

.dashboard-button.pink.color.outline:hover {
  background-color: #ff6fb530 !important;
}

.dashboard-button.top {
  margin-top: 10px;
}

.dashboard .top-text,
.customerdashboard .top-text {
  font-weight: 400;
  color: #444;
  font-size: 15px;
  text-wrap: auto;
  text-wrap-mode: wrap;
  text-wrap-style: auto;
  text-align: center;
  display: flex;
  justify-content: center;
  justify-content: center;
  align-items: center;
}

.copy-box i {
  display: flex;
  font-size: 15px;
  width: 32px;
  height: 32px;
  background: #eee;
  padding: 8px;
  border-radius: 8px;
  margin-left: 8px;
  justify-content: center;
  align-items: center;
}

.copy-box {
  cursor: pointer;
}

#snowfall {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.snowflake {
  position: absolute;
  top: -20px; /* شروع حرکت از بالای صفحه */
  width: 16px;
  height: 16px;
  background-size: cover;
  opacity: 1;
  pointer-events: none;
  animation: fall linear infinite;
}

.snowflake.PARTY {
  background-image: url("/styles/images/shop/confetti_4.png");
}

.snowflake.SNOW {
  background-image: url("/styles/images/shop/snowflake.png");
}

@keyframes fall {
  to {
    transform: translateY(100vh); /* حرکت به پایین صفحه */
  }
}

/* انیمیشن محو شدن */
@keyframes fadeOut {
  from {
    opacity: 0.8; /* حالت اولیه */
  }
  to {
    opacity: 0; /* محو شدن */
  }
}

@keyframes fadeOutp {
  from {
    opacity: 1; /* حالت اولیه */
  }
  to {
    opacity: 0; /* محو شدن */
  }
}

.apikey {
  border: 1px solid #999;
  border-radius: 8px;
  padding: 8px 12px;
  background: #fafafa;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

.apikey i {
  margin-left: 5px;
  height: 14px !important;
  width: 14px !important;
}

.expiremessage {
  margin-bottom: 16px;
  direction: rtl;
  text-align: justify;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
}

.expiremessage.ok {
  border: 1px solid var(--basecolor);
  color: var(--basecolor);
  background: var(--basecolorshadowback);
}

.expiremessage.error {
  border: 1px solid var(--button-red);
  color: var(--button-red);
  background: #ff4c5f10;
}

.expiremessage.reminde {
  border: 1px solid #ff8800;
  color: #ff8800;
  background: #ff880010;
}

/*setting*/

.setting-box {
  text-align: right;
  direction: rtl;
  color: #444;
  font-size: 15px;
  font-weight: 300;
  width: 100%;
}

.customer-credit .credit-state {
  display: flex;
  align-items: center;
}

.identifier-box {
  display: none !important;
  flex-direction: column;
  padding: unset;
  margin-top: 8px;
}

.identifier-box .credit-box {
  padding: 10px;
}

.customer-credit .credit-box {
  display: none;
  flex-direction: column;
}

.identifier-box .customer-credit .credit-box .credit-box-type {
  margin-top: 8px;
}

.customer-credit .credit-box .credit-box-type {
  display: flex;
  align-items: center;
}

.customer-credit .credit-box .credit-box-type-percent.active,
.customer-credit .credit-box .credit-box-type-amount.active,
.customer-credit .credit-box .identifier-box-type-percent.active,
.customer-credit .credit-box .identifier-box-type-amount.active {
  display: block;
}

.customer-credit .credit-box .credit-box-type-percent,
.customer-credit .credit-box .credit-box-type-amount,
.customer-credit .credit-box .identifier-box-type-percent,
.customer-credit .credit-box .identifier-box-type-amount {
  display: none;
}

.customer-credit .credit-box .credit-box-type-percent .credit-percent,
.customer-credit .credit-box .credit-box-type-amount .credit-amount,
.customer-credit .credit-box .identifier-box-type-percent .credit-percent,
.customer-credit .credit-box .identifier-box-type-amount .credit-amount {
  position: relative;
  margin: 0px 0px 5px;
  display: flex;
  align-items: center;
}

.customer-credit
  .credit-box
  .credit-box-type-percent
  .credit-percent
  .top-label,
.customer-credit .credit-box .credit-box-type-amount .credit-amount .top-label,
.customer-credit
  .credit-box
  .identifier-box-type-percent
  .credit-percent
  .top-label,
.customer-credit
  .credit-box
  .identifier-box-type-amount
  .credit-amount
  .top-label {
  margin-left: 10px;
}

.customer-credit .credit-box .credit-box-type-percent .infotitle,
.customer-credit .credit-box .credit-box-type-amount .infotitle,
.customer-credit .credit-box .identifier-box-type-percent .infotitle,
.customer-credit .credit-box .identifier-box-type-amount .infotitle {
  padding: 0px;
}

.customer-credit
  .credit-box
  .credit-box-type-percent
  .credit-percent
  .boxdesign,
.customer-credit .credit-box .credit-box-type-amount .credit-amount .boxdesign,
.customer-credit
  .credit-box
  .identifier-box-type-percent
  .credit-percent
  .boxdesign,
.customer-credit
  .credit-box
  .identifier-box-type-amount
  .credit-amount
  .boxdesign {
  flex-grow: 1;
  width: unset;
}

.customer-credit
  .credit-box
  .credit-box-type-percent
  .credit-percent
  .credit-label.over,
.customer-credit
  .credit-box
  .credit-box-type-amount
  .credit-amount
  .credit-label.over,
.customer-credit
  .credit-box
  .identifier-box-type-percent
  .credit-percent
  .credit-label.over,
.customer-credit
  .credit-box
  .identifier-box-type-amount
  .credit-amount
  .credit-label.over {
  width: unset;
}

.customer-credit .credit-box.active,
.identifier-box.active {
  display: flex !important;
}

.setting-box.customer-credit {
  padding: 0px;
  display: flex;
  flex-direction: column;
}

.setting-box:focus {
  box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
  border-color: var(--basecolor);
}

.setting .top-label {
  margin-top: 16px;
  text-align: right;
  margin-bottom: 5px;
}

.setting .label.top {
  margin: 12px 0px 5px 0px;
}

.setting .checkbox,
.shopsetting .checkbox {
  display: flex;
  direction: ltr !important;
  cursor: pointer;
  float: right;
  padding: 10px 10px 0px 0px;
}

.setting-box.customer-credit .checkbox {
  padding: 0px;
}

.customer-credit .top-label {
  width: fit-content;
  width: -moz-fit-content;
  margin-top: 5px;
}

.logo-header {
  border-radius: 0px;
  height: 39px;
  width: 39px;
  margin-left: 6px;
}

.checkbox.disable span.fa-check {
  background-color: var(--basecolorshadowback);
  color: var(--basecolorshadow);
  transition: 0.3s;
}

.checkbox.disable span.fi-sr-bullet {
  background-color: transparent;
  color: transparent;
  border-color: var(--basecolorshadow);
  transition: 0.3s;
}

.checkbox .fa-check {
  height: 20px;
  width: 20px;
  background-color: var(--basecolor);
  border-radius: 10px;
  color: white;
  font-size: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 7px;
  transition: 0.3s;
  padding: 6px;
}

.checkbox .fi-sr-bullet {
  height: 20px;
  width: 20px;
  max-width: 20px;
  min-width: 20px;
  background-color: var(--basecolor);
  border: 2px solid var(--basecolor);
  border-radius: 10px;
  color: white;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px;
  transition: 0.3s;
}

.setting .button-bottom .button-row {
  width: var(--widthdashboard);
  max-width: 450px;
}

.message-state {
  width: 100%;
  display: flex;
  flex-direction: row;
  direction: rtl;
  margin-top: 8px;
}

.message-state span {
  height: 18px;
  width: 18px;
  border-radius: 9px;
  color: white;
  font-size: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 6px;
  transition: 0.3s;
  padding: 6px;
}

.message-state .label {
  white-space: normal;
  text-align: justify;
}

.message-state.ok .label {
  color: var(--basecolor);
}

.message-state.ok span {
  background-color: var(--basecolor);
}

.message-state.error .label {
  color: var(--button-red);
}

.message-state.error span {
  background-color: var(--button-red);
}

.message-state.wait .label {
  color: #11a0ef;
}

.message-state.wait span {
  background-color: #11a0ef;
}

/* credit */

.credit .button-bottom .button-row {
  width: var(--widthdashboard);
  max-width: 450px;
}

.credit .top-label {
  margin-bottom: 0px;
}

.credit-row {
  text-align: center;
  width: 100%;
  direction: rtl;
  margin-top: 16px;
}

.creditbox {
  width: var(--widthdashboard);
  min-height: 130px;
  align-items: center !important;
  justify-content: center !important;
  display: flex;
  flex-direction: column;
  transition: 0.3s;
  padding: 20px;
}

.creditbox.right {
  margin-left: 10px;
}

.creditbox.active {
  border: 1px solid var(--basecolor);
  box-shadow: 0 0 0 0.25rem #1acd967a;
}

.creditbox .price {
  font-weight: 500;
  color: var(--basecolor);
  margin-bottom: 3px;
}

.creditbox .price-dis {
  color: var(--button-red);
  font-size: 15px;
  text-decoration: line-through;
}

.creditbox .divider {
  margin: 16px 0px;
  width: 35%;
  border-top: 1px solid #ddd;
}

.credit-add-box-parent {
  width: var(--widthdashboard);
  max-width: 450px;
}

.credit-add-box {
  position: relative;
  margin: 16px auto;
  width: inherit;
  max-width: inherit;
}

.send-credit {
  position: relative;
  width: var(--widthdashboard);
  max-width: 450px;
}

.setting .send-credit {
  width: unset;
  max-width: unset;
}

.credit-choice {
  margin-top: 12px;
  display: flex;
  direction: rtl;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
}

.credit-selector {
  display: flex;
  direction: rtl;
  align-items: center;
  justify-content: center !important;
  border-radius: 16px;
  background: #eee;
  padding: 0px 12px;
  transition: 0.3s;
  cursor: pointer !important;
  width: fit-content;
  height: 32px;
  gap: 4px;
}

.credit-choice div.active {
  animation: activeFlash 1s ease;
}

#credit_payable {
  font-size: 13px;
  width: 100%;
  direction: rtl;
  text-align: center;
  color: #ff0000;
  margin-top: 12px;
  font-weight: bold;
  display: block;
  opacity: 1;
  transition: opacity 0.4s ease;
}

#credit_payable.hides {
  opacity: 0;
  pointer-events: none;
}

@keyframes activeFlash {
  0% {
    background-color: #eee;
  }
  50% {
    background-color: #ddd;
  }
  100% {
    background-color: #eee;
  }
}

.credit-selector:last-child {
  margin-left: 0;
}

.credit-selector * {
  margin: 0;
  color: #000;
}

.credit-selector .credit-text {
  font-size: 14px;
  width: fit-content;
  font-weight: 400;
}

.credit-selector .credit-label {
  font-size: 12px;
  width: auto;
  font-weight: 300;
}

.credit-top-height {
  gap: 8px;
  direction: rtl;
  margin-top: 12px;
}

.credit-top-label {
  margin-top: 16px;
  text-align: right;
  direction: rtl;
  font-weight: 400;
  margin-bottom: 0px;
  width: 100%;
}

.credit-top-height label {
  width: fit-content;
  margin: 0;
}

.credit-top-height.pglist {
  margin-top: -170px;
}

/* basket */

.basket-credit {
  direction: rtl;
}

.basket-credit .top-label {
  font-size: 15px;
  color: #444;
  width: auto;
  direction: rtl;
  margin-left: 10px;
}

.basket-info {
  font-size: 13px;
  margin-top: 8px;
  color: #777;
  line-height: 28px;
  white-space: pre-line;
}

/* sendsms */

.sendsms-row {
  display: flex;
  width: 100%;
  direction: rtl;
  margin-bottom: 10px;
}

.sendsms-rowbtn {
  width: 100%;
  margin-top: 0px;
  overflow: hidden;
  opacity: 1;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.sendsms-rowbtn-line {
  height: 0px;
  opacity: 0;
}

.sendsms-rowbtn-expand {
  height: 50px !important;
  margin-top: 10px !important;
  opacity: 1 !important;
}

.sendsms-row .dashboard-button {
  width: 90px;
}

.sendsms .top-label,
.list .top-label {
  margin-top: 16px;
  margin-bottom: 5px;
  text-align: right;
}

.list .divider {
  margin: 10px 10px 0px 10px;
  height: 1px;
  background-color: #ddd;
}

.list .top-label {
  margin-top: 10px;
  text-align: right;
}

.bottom-box .pagetext {
  margin-top: 10px;
  width: auto;
  flex-grow: 1;
}

.bottom-box .add-deactive {
  font-size: 15px;
  color: var(--button-red);
  font-weight: 400;
  margin-top: 9px;
}

.bottom-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  direction: rtl;
  padding: 0px 8px;
}

.pagetext .page {
  color: var(--button-red);
  font-weight: 400;
}

.text {
  margin: 0px;
  text-align: right;
  direction: rtl;
  color: #666;
  font-size: 16px;
  align-items: center !important;
  display: flex;
}

.text.green {
  color: var(--basecolor);
}

.text.red {
  color: var(--button-red);
}

.text.blue {
  color: #11a0ef;
}

.label {
  direction: rtl;
  font-size: 13px;
  color: #555;
  margin: 0 0 0 8px;
  display: flex;
  white-space: nowrap;
  text-align: right;
  line-height: 20px;
}

.count-report .label {
  white-space: break-spaces;
}

.label.wrap {
  white-space: break-spaces;
}

.setting .flex-column .label {
  width: 100%;
}

.flex-row .label {
  width: unset;
}

.label.main {
  font-size: 15px;
  color: #444;
  margin: 0;
  text-align: right;
  line-height: 25px;
  white-space: pre-line;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.label.main.ok {
  color: #1acd96;
  font-weight: 400;
}

.label.main.error {
  color: #ff4c5f;
  font-weight: 400;
}

.label.main.info {
  color: #11a0ef;
  font-weight: 400;
}

.label.main.wait {
  color: #ff8800;
  font-weight: 400;
}

.label-attention {
  text-align: justify;
  direction: rtl;
  color: var(--button-red);
  font-size: 14px;
  margin-top: 20px;
}

.label.required:after {
  content: "(اجباری)";
  font-size: 13px;
  color: #c70000;
  margin-right: 6px;
  font-weight: 400;
  margin-top: 1px;
}

.label.force:after {
  content: "(غیرقابل ویرایش)";
  font-size: 13px;
  color: #c70000;
  margin-right: 6px;
  font-weight: 400;
  margin-top: 1px;
}

.label.label-input {
  margin: 10px 8px 0px 0px !important;
  white-space: normal;
  text-align: justify;
}

.label-input.attention {
  color: var(--button-red);
}

.label.marginright {
  margin-right: 10px;
}

.sendsms .button-bottom .button-row {
  width: var(--widthdashboard);
  max-width: 450px;
}

.sendsms-box {
  margin-top: 5px;
  text-align: right;
  direction: rtl;
  color: #444;
  font-size: 15px;
  font-weight: 300;
  width: 100%;
}

.sendsms-box:focus {
  box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
}

/* dialog */

.dialog-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.dialog-icon i {
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  display: flex;
  border-radius: 30px;
  color: #fff;
  font-size: 14px;
}

.dialog-error {
  background-color: #ff4c5f;
  outline: 5px solid #ff4c5f40 !important;
}

.dialog-ok {
  background-color: #1acd96;
  outline: 5px solid #1acd9640 !important;
}

.dialog-info {
  background-color: #11a0ef;
  outline: 5px solid #11a0ef40 !important;
}

.dialog-question {
  background-color: #11a0ef;
  outline: 5px solid #11a0ef40 !important;
}

.dialog-confirm {
  background-image: url(../images/dialogconfirm.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: unset;
  border-radius: 0 !important;
}

.dialog-back {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  background-color: #00000050;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1002;
  transition: all 0.3s;
  opacity: 0;
  display: none;
  overflow: hidden;
  backdrop-filter: blur(2px);
}

.dialog-back-hide {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  overflow: hidden;
}

.dialog-box {
  width: var(--widthdialogbox);
  position: absolute;
  top: 40px;
  left: 50%;
  margin-left: calc(var(--widthdialogbox) * -1 / 2);
  background-color: #fff;
  transition: all 0.3s;
  padding: 18px 12px 12px 12px;
  display: none;
  border: 1px #f1f1f1 solid;
  border-radius: 8px;
  opacity: 0;
}

.dialog-box img {
  width: 30%;
  margin: 0 auto 20px auto;
  display: block;
}

.dialog-box p {
  text-align: right;
  direction: rtl;
  color: #555;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 25px;
  white-space: pre-wrap;
}

.dialog-box .button-bottom {
  position: relative !important;
  height: 43px !important;
  padding: 0px;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.dialog-box .button-bottom .button-row {
  width: 100%;
}

/* filter */

.filter-back {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  background-color: #00000050;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  /* بالاتر از نوار ناوبری (1002) تا دکمه‌های پایین مودال زیر آن نروند */
  z-index: 1010;
  transition: all 0.3s;
  opacity: 0;
  display: none;
  overflow: hidden;
  backdrop-filter: blur(2px);
}

.filter-box {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  transition: all 0.3s;
  padding: 12px;
  margin: 0px auto;
  max-width: 450px;
  display: none;
  max-height: calc(var(--vh, 1vh) * 100);
  overflow-y: auto;
}

#story-box.filter-box {
  padding: 0px 0px 0px 0px;
  border-radius: 0px;
}

.filter-box .button-bottom {
  position: relative !important;
  height: 43px !important;
  padding: 0px;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.filter-box .button-bottom .button-row {
  width: 100%;
}

.filter-row {
  display: flex;
  direction: rtl;
  align-items: center !important;
  margin-bottom: 10px;
  position: relative;
}

.shop-address-list .filter-row {
  border: 1px solid var(--basecolor);
  background-color: var(--basecolorshadowback);
  box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
  padding: 12px 12px;
  border-radius: 10px;
  transition: all 0.3s;
  align-items: start !important;
}

.shop-address-list .filter-row label {
  color: var(--basecolor);
  white-space: normal;
}

.shop-address-list .filter-row.disable label {
  color: #888;
}

.shop-address-list .filter-row.disable {
  border: 1px solid #eaeaea;
  background-color: white;
  box-shadow: none;
}

#story-box.shop-address-list .shop-address-header {
  padding: 12px 16px 12px 16px;
  position: absolute;
  width: 100%;
  z-index: 1000;
}

#story-box.shop-address-list .shop-address-header * {
  color: white;
}

.shop-address-list .shop-address-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  direction: rtl;
  padding: 0px 4px 12px 4px;
  align-items: center;
}

.shop-address-list .shop-address-header label {
  font-weight: 400;
  margin: 0;
}

#story-box.filter-box .shop-address-list .shop-address-header .address-button {
  color: white;
}

.shop-address-list .shop-address-header .address-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--buttonlinecolor);
  font-weight: 400;
  font-size: 15px;
}

.shop-address-list .shop-address-header .address-button i {
  width: 12px !important;
  height: 12px !important;
  font-size: 12px;
  margin-left: 8px;
}

.cartlist-info .shop-address-list .shop-address-header .address-button i {
  margin-left: 0px;
}

#filter-box-sort .filter-row {
  margin-bottom: 16px;
}

#filter-box-sort .filter-row:last-child {
  margin-bottom: 0px;
}

.filter-row.checkbox,
.filter-row.checkbox label,
.filter-row.checkbox select {
  cursor: pointer;
}

.filter-selectlist {
  border-radius: 8px;
  border: 1px solid #ccc;
  height: 35px;
  color: #666;
  font-weight: 300;
  font-size: 15px;
  padding: 3px 10px 0px 30px;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent
    url("data:image/svg+xml;utf8,<svg id='filter-selectlist-svg' fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>")
    no-repeat;
  background-position-y: 5px;
  transition: all 0.3s;
  width: 100%;
}

.filter-selectlist option {
  color: #666;
  font-weight: 300;
  font-size: 15px;
}

.filter-selectlist option:checked {
  font-weight: 500;
}

.filter-selectlist:focus {
  outline: 0px;
  box-shadow: 0 0 0 0.2rem #cccccc66;
}

.filter-input {
  border-radius: 8px;
  border: 1px solid #ccc;
  height: 35px;
  color: #666;
  font-weight: 300;
  font-size: 15px;
  transition: all 0.3s;
  width: 100%;
  text-align: center;
  direction: ltr;
}

.filter-input.shortsize {
  width: 20%;
}

.filter-input.middlesize {
  width: 40%;
}

.filter-input.largsize {
  width: 60%;
}

.filter-input.date {
  direction: ltr;
}

#bd-root-inputdatefrom,
#bd-root-inputdateto {
  width: 100%;
  position: unset !important;
}

.filter-box .bd-calendar,
.filter-box .bd-title,
.filter-box .bd-goto-today,
.filter-box .bd-calendar table {
  /*width: calc(var(--widthdashboard) - 32px) !important;
    max-width: calc(450px - 32px) !important;*/
  width: 100% !important;
  max-width: unset !important;
}

.filter-box .bd-empty-cell,
.filter-box .bd-table-days button {
  /*width: calc((var(--widthdashboard) - 32px) / 7);
    max-width: calc((450px - 32px) / 7);*/
  width: 100% !important;
  max-width: unset !important;
}

.filter-box .bd-table tbody tr td {
  width: calc((100%) / 7) !important;
}

.bd-main {
  padding: 0px !important;
  left: 0;
  width: 100% !important;
  max-width: unset !important;
}

.label.titledate {
  width: 100%;
  justify-content: center;
  margin: 0px;
  font-size: 13px;
}

.filter-input:focus {
  outline: 0px;
  box-shadow: 0 0 0 0.2rem #cccccc66;
}

/* login */

.login-row {
  display: flex;
  direction: rtl;
  flex-direction: column;
  align-items: center !important;
  padding: 0px 0px 16px 0px;
}

.login-row:last-child {
  padding: 0px;
}

.login-row .label {
  margin: 12px 0px 5px 0px;
  width: 100%;
}

.farsi {
  direction: rtl !important;
}

.english {
  direction: ltr !important;
}

.login-input,
.input {
  direction: rtl;
  color: #444;
  font-size: 15px;
  font-weight: 300;
  width: 100%;
  text-align: right;
  transition: 0.3s;
}

.login-input:focus,
.input:focus {
  box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
  border-color: var(--basecolor) !important;
}

.login-button .button-row {
  width: calc(var(--widthdashboard));
  max-width: 450px;
}

.forget-password {
  width: 100%;
  text-align: right;
  margin-top: 10px;
  font-size: 14px;
  color: #444 !important;
  font-weight: 400;
  display: flex;
  direction: rtl;
  padding-right: 8px;
}

.password-container {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.password-container i {
  display: flex;
  cursor: pointer;
  color: #666;
  font-size: 18px;
  width: 18px;
  height: 18px;
}

.password-container input {
  padding-left: 40px;
}

/* list */

.list {
  padding-top: 16px;
}

.list-box {
  margin-bottom: 12px;
  padding-top: 0px;
  position: relative;
}

.list-box.active {
  box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
  border-color: var(--basecolor);
}

.list-box .list-row {
  direction: rtl;
  margin-top: 8px;
  align-items: center;
  /*flex-wrap: wrap;*/
}

.list-box .list-row.line-through {
  position: relative;
  width: fit-content;
}

.list-box .list-row.line-through::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-bottom: 2px solid red;
}

.count-report .list-box .list-row {
  flex-wrap: wrap;
}

.list-row.line {
  align-items: start;
}

.list-row.line .label.main {
  margin-top: 0px;
}

.lazybtn {
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #888 !important;
  font-weight: 300;
  margin-bottom: 16px;
  background: #eee;
  padding: 10px;
  border-radius: 10px;
}

.lazybtn:hover {
  background: #ddd;
}

/* upload */
.uploadbox {
  width: 100%;
  margin-top: 5px;
  padding: 0px;
  cursor: pointer;
}

.uploadbox label {
  padding: 10px;
  width: 100%;
  text-align: center !important;
  display: block;
  overflow-y: hidden;
  overflow-x: auto;
  direction: ltr;
  white-space: nowrap !important;
}

.document .label.top {
  margin: 16px 0 5px 0;
}

.document select,
.ticket select,
.login select,
.product select,
.productsetting select,
.cartlist select,
.checkin-container select {
  direction: rtl;
  text-align-last: right;
  text-align: right;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent
    url("data:image/svg+xml;utf8,<svg id='filter-selectlist-svg' fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>")
    no-repeat;
  background-position-y: 10px;
  transition: all 0.3s;
  background-position-x: 5px;
  background-color: #fff;
}

.document .list-box {
  margin-bottom: 0px;
}

.infotitle {
  padding: 7px;
  white-space: normal;
  text-align: justify;
  margin: 0px !important;
  width: 100%;
  padding-right: 8px;
}

.infotitle::before {
  content: "توجه : ";
  font-size: 13px;
  color: #c70000;
  margin-left: 6px;
  font-weight: 400;
  margin-top: 1px;
  white-space: nowrap;
}

/* product */

.product .label.top,
.productsetting .label.top,
.cartlist .label.top {
  margin: 12px 0px 5px 0px;
}

.image_wrapper {
  width: var(--widthdashboard);
  max-width: 450px;
  height: 0px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.image_wrapper .deletebutton {
  width: 100%;
}

.product .product_image {
  width: min(calc(var(--widthdashboard) / 2), 225px);
  -webkit-box-shadow: 0 0 12px rgb(0 0 0 / 5%);
  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
  border: 1px #f1f1f1 solid;
  /*overflow: hidden;*/
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: white;
}

.product .credit-label.over,
.productsetting .credit-label.over {
  top: 33px;
}

.deletebutton {
  width: min(calc(var(--widthdashboard) / 2), 225px);
  text-align: center;
  background-color: var(--button-red);
  padding: 8px 8px;
  color: white !important;
  margin-top: 8px;
  border-radius: 8px;
  transition: 0.3s;
}

.deletebutton:hover {
  background-color: var(--button-red-hover);
  color: white;
}

.shop .top-label,
.product .top-label,
.cartlist .top-label,
.productsetting .top-label {
  text-align: right;
  margin-top: 16px;
}

.productcategory {
  display: flex;
  flex-direction: row;
  overflow-y: hidden;
  overflow-x: auto;
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none;
  direction: rtl;
  position: sticky;
  top: 62px;
  z-index: 998;
  background-color: #fafafaf5;
  -webkit-overflow-scrolling: touch;
  margin: 0 -12px;
  padding: 0 12px;
  border-width: 0px 0px 1px 0px;
  border-color: #f0f0f0;
  border-style: solid;
  gap: 6px;
}

/* حالت دسکتاپ: خط عمودی سمت راست یا چپ منوی دسته‌ها */
.shop-category-container .active-indicator {
  position: absolute;
  left: 0; /* یا left: 0; بسته به طرح */
  width: 4px; /* ضخامت خط */
  background-color: var(--basecolor); /* رنگ خط */
  border-radius: 3px 0px 0px 3px;
  transition: none; /* چون با JS انیمیت میشه */
}

/* حالت موبایل: خط افقی زیر دسته */
.productcategory .active-indicator {
  position: absolute;
  bottom: 0;
  height: 4px;
  background-color: var(--basecolor);
  border-radius: 3px 3px 0px 0px;
  transition: none;
}

.product .productcategory {
  border-width: 0px;
  border-style: unset;
}

.productcategory.ismobile {
  flex-wrap: wrap;
}

.productcategory::-webkit-scrollbar {
  display: none;
  width: 0;
}

.product .productcategory .cat-title.active {
  background: none;
  border: none;
  font-weight: bold;
  padding: 0;
  margin: 0;
}

.productcategory .cat-title.active {
  /*background: #1acd9618;*/
  border-color: var(--basecolor);
  color: var(--basecolor);
  /*font-weight: 400;*/
}

.productcategory .cat-title.energym.active {
  background: #ff3131;
  border-color: white;
  color: white;
}

.productcategory .cat-title.energym {
  border-color: #ff3131;
  color: #ff3131;
}

.productcategory .cat-title.energym .energymimg {
  width: 20px;
  height: 30px;
  margin-left: 6px;
  background-image: url("../images/energym/energym_color.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: inline-block;
}

.productcategory .cat-title.active.energym .energymimg {
  background-image: url("../images/energym/energym_white.svg");
}

.productcategory .cat-title {
  /*background: var(--background-button);*/
  padding: 8px 10px 12px;
  border-radius: 8px;
  border: 0px solid #ccc;
  color: #888;
  /*font-weight: 300;*/
  font-size: 14px;
  direction: rtl;
  white-space: nowrap;
  overflow: visible;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  cursor: pointer;
  font-weight: 400;
}

.productcategory > .cat-title:not(:has(~ .cat-title)) {
  margin-left: 12px;
}

.productcategory .cat-title i {
  margin-left: 5px;
  font-size: 16px;
}

.productlist .product-item-container:first-child {
  border-top: none;
  padding-top: 0;
}

.productlist .product-item-container.category {
  padding-top: 8px;
  border: none;
}

.productlist .product-item-container {
  padding: 12px 0px 12px;
  border-top: 1px solid #eee;
  overflow: visible;
}

.productlist .instagram-view {
  margin-top: 6px;
}

.productlist .instagram-view .product-item-container {
  padding: 0px 0px 12px 0px;
  border-top: none;
  overflow: unset;
  width: calc(var(--widthdashboard) / 2 - 6px);
  max-width: 217px;
}

.product-cart-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  text-align: right;
}

.product-cart-box .product-cart-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
}

.product-cart-box .product-cart-info .product-cart-info-title {
  font-size: 12px;
}

.product-cart-box .product-cart-info .product-cart-info-customize {
  font-size: 12px;
  display: flex;
  gap: 5px;
  align-items: center;
}

.product-cart-box
  .product-cart-info
  .product-cart-info-customize
  .product-cart-info-customize-title {
  color: #888;
}

.product-cart-box
  .product-cart-info
  .product-cart-info-customize
  .product-cart-info-customize-value {
  font-weight: 400;
  font-size: 13px;
}

.product-cart-box .product-cart-info .product-cart-info-bottom {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.product-cart-box
  .product-cart-info
  .product-cart-info-bottom
  .product-cart-info-price {
  font-weight: 400;
}

.product-cart-box
  .product-cart-info
  .product-cart-info-bottom
  .product-cart-info-count {
  border-radius: 50%;
  background-color: var(--button-red);
  height: 20px;
  min-width: 20px;
  color: white;
  font-size: 12px;
  align-items: center;
  justify-content: center;
  display: flex;
  font-weight: 400;
  padding: 3px 0px 0px;
}

.orderlist-cart.productlist .product-item-container {
  padding: 12px 0px 0px 0px;
  border: none;
  overflow: unset;
  margin-left: 12px;
}

.orderlist .list-box {
  padding-bottom: 0;
}

.orderlist .orderlist-cart {
  padding-bottom: 12px;
}

.orderlist-cart.productlist .product-item-container:last-child {
  margin-left: 0px;
}

.orderlist-cart .cartlist-count {
  margin-left: 0px;
}

.productlist .product-item-container .product-item,
.productlist .product-item-container .product-item:hover {
  color: #444;
}

.product .productlist .product-item-container {
  padding: 8px 0px;
}

.productlist .product-item-container:last-child {
  border-bottom: none;
}

.productlist {
  width: 100%;
  display: block;
  direction: rtl;
}

.orderlist-cart.productlist {
  display: flex;
  flex-direction: row;
  overflow-x: visible;
  padding-right: 10px;
  flex-wrap: wrap;
}

.orderlist-cart .product-title {
  margin-top: 8px;
  font-weight: 300;
  text-align: center;
  font-size: 14px;
  width: calc(var(--widthdashboard) / 5);
  max-width: 90px;
}

.product-item-container .product-item {
  display: flex;
  flex-direction: row;
}

.product-item-container .product-item i.special {
  position: absolute;
  right: -4px;
  top: -4px;
  width: 20px;
  height: 20px;
  font-size: 8px;
  background: var(--button-red);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.instagram-view .product-item-container .product-item {
  display: flex;
  flex-direction: column;
}

.product-item-container .product-item .product-image {
  margin-left: 12px;
  position: relative;
}

.instagram-view .product-item-container .product-item .product-image {
  margin-left: 0px;
}

.instagram-view .product-item-container:nth-child(1) {
  margin-left: 8px;
}

.instagram-view .product-item-container:nth-child(2) {
  margin-right: 8px;
}

.product-item-container .product-item .product-image img,
.imagelist .imagerow img {
  object-fit: contain;
  opacity: 1;
  transition: opacity 0.2s;
  display: inline-block;
  overflow: hidden;
  width: calc(var(--widthdashboard) / 3.5);
  max-width: calc(450px / 4);
  height: calc(var(--widthdashboard) / 3.5);
  max-height: calc(450px / 4);
  border-radius: 8px;
  /*border: 1px solid #ddd;*/
  /*padding: 5px;*/
  background-color: #fff;
}

.shop .product-item-container .product-item .product-image img,
.cartlist.noborder .product-item-container .product-item .product-image img {
  border: 0;
  padding: 0px;
}

.instagram-view .product-item-container .product-item .product-image img {
  width: calc(var(--widthdashboard) / 2 - 8px);
  max-width: 217px;
  height: calc(var(--widthdashboard) / 2 - 8px);
  max-height: 217px;
  width: 100%;
}

.product-item-container .product-item .product-image img::after,
.info-image img::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: transparent;
  text-align: center;
  content: attr(alt);
  background: #f9f9f9 url(/styles/images/image-placeholder.svg) no-repeat 50%;
  background-size: contain;
  width: 100%;
  height: 100%;
  border: 20px solid #f9f9f9;
}

.product-item-container .product-item .product-info {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.product-item-container .product-item .product-info .product-title .score {
  font-weight: 400;
  display: flex;
  align-items: center;
  color: var(--basecolor);
  background-color: var(--basecolorshadowback);
  padding: 4px 8px 1px;
  border-radius: 5px;
  font-size: 14px;
}

.product-item-container .product-item .product-info .product-title .score .fi {
  margin-right: 4px;
  height: 14px;
  font-size: 12px;
}

.score-box-product {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

.score-box-product .score-button {
  font-size: 13px;
  margin-right: 6px;
  background-color: #eee;
  padding: 3px 9px;
  border-radius: 5px;
  width: 100%;
  text-align: center;
  color: #666;
}

.product-item-container .product-item .product-info .product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 400;
  direction: rtl;
  text-align: right;
  margin: 0px 0px 6px 0px;
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  gap: 6px;
}

.instagram-view
  .product-item-container
  .product-item
  .product-info
  .product-title {
  margin: 6px 0px 6px 0px;
}

.product-item-container .product-item .product-info .product-tiny-description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 300;
  direction: rtl;
  text-align: right;
  color: #999;
  font-size: 12px;
  margin: 0px 0px 6px 0px;
}

.product-price {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.product-price.franchise {
  background: var(--buttonlinecolorback);
  padding: 8px;
  line-height: 1;
  border-radius: 6px;
  color: var(--buttonlinecolor);
}

.product-price.franchise * {
  color: var(--buttonlinecolor) !important;
}

.product-price.credit-box {
  padding: 10px 16px 10px;
  border-radius: 8px;
  background: var(--basecolorshadowback);
}

.a-tag {
  padding: 4px 10px 3px;
  border-radius: 8px;
  background: #1acd9618;
  color: var(--basecolor);
  font-weight: 400;
}

.product-bottom-price .product-price {
  width: var(--widthdashboard);
  max-width: 450px;
  /*margin: 4px auto;*/
}

.product-price .product-price-value {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  font-weight: 500;
  align-items: center;
}

.product-price-dis-value {
  margin-right: auto;
  /* padding-left: 33px حذف شد؛ قیمت خط‌خورده باید به قیمت نهایی بچسبد */
  text-decoration: line-through;
  color: #999;
  font-size: 14px;
}

.product-price .discount-title {
  font-weight: 300;
  margin-right: 4px;
}

.product-price .percent {
  background-color: var(--button-red);
  height: 22px;
  width: 36px;
  color: white;
  font-size: 12px;
  font-weight: 400;
  border-radius: 11px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 3px;
  letter-spacing: 1px;
}

.product .product-bottom-price,
.cartlist.short .product-bottom-price {
  height: 55px;
}

.cartlist-bottun {
  color: #fff;
  border-radius: 8px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 13px;
  cursor: pointer;
  transition: 0.3s;
  text-align: center;
  direction: rtl;
  background-color: var(--button-active) !important;
  width: 135px;
}

.cartlist-bottun.closeshop {
  background-color: var(--button-deactive) !important;
}

.cartlist-bottun:hover {
  background-color: var(--button-active-hover) !important;
  border-color: var(--button-active-hover) !important;
}

.cartlist-bottun.closeshop:hover {
  background-color: var(--button-deactive-hover) !important;
}

.cartlist-bottun a:hover {
  color: #ffffff;
}

.product-bottom-price {
  direction: rtl;
  position: fixed;
  bottom: 67px;
  right: 0;
  left: 0;
  padding: 8px 12px;
  background-color: #fff;
  width: 100%;
  -webkit-box-shadow: 0 0 12px 3px rgb(0 0 0 / 5%);
  box-shadow: 0 0 12px 3px rgb(0 0 0 / 5%);
  height: 72px;
  z-index: 998;
  align-items: center;
  justify-content: center;
  display: flex;
}

.product-bottom-price .product-price .product-price-value {
  justify-content: flex-start;
}

.product-bottom-price .product-price .product-price-value.center {
  justify-content: center;
}

.product-price .label {
  font-size: 12px;
  margin: 0;
}

.product-price .end-box {
  display: flex;
  flex-direction: column;
  align-items: end;
}

.product-bottom-price .product-price-dis-value {
  padding-left: 12px;
}

.filter-sort {
  direction: rtl;
  display: flex;
  /*padding: 12px 0px 12px 0px;*/
  border-width: 0px 0px 1px 0px;
  /*margin-top: 2px;*/
  border-color: #f0f0f0;
  border-style: solid;
  /*margin: 0px -16px;*/
  padding: 12px 0px;
  color: #444;
}

.filter-sort .sort-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.filter-sort .sort-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

.filter-sort .sort-title {
  font-weight: 400;
  font-size: 15px;
  margin-right: 6px;
}

.shop .productlist {
  padding-bottom: 74px;
}

.product .product-image {
  position: relative;
  /*border-bottom: 1px solid #f0f0f0;
    padding-bottom: 32px;*/
  overflow: hidden;
  padding-top: 16px;
}

.swiper-pagination .swiper-pagination-bullet-active {
  background: var(--basecolor);
}

.swiper-pagination-height {
  height: 32px;
}

.swiper-pagination-height.close {
  height: 0px;
}

.product .product-image .image-page {
  font-weight: 300;
  display: flex;
  background-color: #00000050;
  margin: 8px auto 0px auto;
  padding: 5px 7px 4px 12px;
  border-radius: 12px;
  width: fit-content;
  letter-spacing: 5px;
  color: #fff;
  position: absolute;
  top: 20px;
  z-index: 100;
  left: 12px;
}

.product .product-image img {
  object-fit: contain;
  opacity: 1;
  transition: opacity 0.2s;
  display: inline-block;
  width: calc(var(--widthdashboard));
  max-width: 450px;
  height: calc(var(--widthdashboard));
  max-height: 450px;
  border-radius: 8px;
}

.product .product-image .product-img .imageitem {
  /*margin-right: 8px;*/
}

.product .product-image .product-img .imageitem:last-child {
  margin-right: 0px;
}

.product .product-img {
  display: flex;
  width: calc(var(--widthdashboard));
  max-width: 450px;
  height: calc(var(--widthdashboard));
  max-height: 450px;
}

.product .category-parent {
  display: flex;
  flex-direction: row;
  direction: rtl;
  padding: 4px 0px 0px 0px;
  align-items: center;
}

.product .category-parent .top-label {
  width: auto;
  margin: 0px 0px 0px 8px;
}

.product-item-container .product-item .product-info .product-description {
  font-size: 15px;
  color: #555;
  -webkit-line-clamp: 5;
  line-height: 20px;
  text-align: justify;
  white-space: pre-line;
}

.product-item-container .product-item .product-info .more-click {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  padding: 8px 0px;
  width: 100%;
}

.more-click i {
  width: 15px;
  height: 15px;
  font-size: 15px;
  margin-right: 3px;
}

.customize-row {
  display: inline-flex;
  /*overflow-y: hidden;
    overflow-x: auto;*/
  align-items: center;
  padding: 5px 0px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.customize-row::after {
  content: "";
  min-width: calc(20% - 6.4px);
}

.customize-row::-webkit-scrollbar {
  display: none;
  width: 0;
}

.customize-row .customize-value {
  padding: 8px 12px 5px 12px;
  border: 1px #f0f0f0 solid;
  /*margin-left: 8px;*/
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  transition: 0.3s;
  cursor: pointer;
  white-space: nowrap;
  background-color: #fff;
  /*margin-bottom: 8px;*/
  min-width: calc((100% - 4 * 8px) / 5);
}

#row_time_id .customize-value {
  /*width: calc((100% - 4 * 8px) / 5);*/
}

.customize-row .customize-value:last-child {
  margin-left: 1px !important;
}

.customize-row .customize-value.active {
  background-color: var(--basecolorshadowback);
  border-color: var(--basecolor);
  box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
  color: var(--basecolor);
}

.customize-row-product {
  /*overflow: hidden;*/
  margin: 8px 0px;
  /*border-bottom: 1px solid #f0f0f0;*/
  /*padding-bottom: 8px;*/
}

.customize-row-product:last-child {
  margin-bottom: 0px;
}

.customize-row-product:first-child {
  /*border-top: 1px solid #f0f0f0;
    padding-top: 8px;*/
}

.product-customize-row {
  display: flex;
  flex-direction: row;
  cursor: pointer;
  direction: rtl;
}

.cartlist-customize-row {
  margin-bottom: 6px;
}

.product-customize-row span {
  margin-top: 12px;
}

.cartlist-count {
  margin-left: 8px;
  align-items: center;
  position: relative;
}

.cartlist-count .cart-state {
  padding: 5px 6px 4px;
  border-radius: 6px;
  font-size: 12px;
  margin-top: 8px;
  text-align: center;
  text-wrap: nowrap;
  font-weight: 400;
}

.cartlist-count .cart-state.ok {
  background-color: #e2f9f2 !important;
  color: #1acd96 !important;
}

.cartlist-count .cart-state.error {
  background-color: #ffe9eb !important;
  color: #ff4c5f !important;
}

.cartlist-count .cart-state.info {
  background-color: #e1f3fd !important;
  color: #11a0ef !important;
}

.cartlist-count .cart-state.wait {
  background-color: #fff6df !important;
  color: #ff8800 !important;
}

.cartlist-count .product-image {
  margin-left: 0px !important;
}

.cartlist-count .cart-product {
  width: 100%;
  margin: 12px 0px 0px 0px;
  height: 32px;
  /*border: 2px solid var(--button-red);
    padding: 0px 3px;*/
  border-radius: 8px;
}

.cartlist-count .cart-product .count-number {
  font-size: 16px;
}

.cartlist-bottom-totalprice.product-bottom-price
  .product-price
  .product-price-value {
  justify-content: flex-end;
}

.cartlist-bottom {
  /*margin-bottom: 16px;*/
}

.cartlist-bottom .cart-disprice {
  font-size: 14px;
  color: #555;
}

.cartlist-bottom .cart-disprice .label {
  font-size: 12px;
}

.cartlist-bottom .cart-totalprice,
.cartlist-bottom .cart-totalprice .label {
  color: #444;
}

.cartlist-bottom .product-price {
  margin-top: 12px;
}

.cartlist-bottom .label {
  font-weight: 400;
}

.cartlist-bottom-divider {
  border-bottom: 1px solid #eee;
  margin-top: 12px;
}

.cartlist-bottom-divider.dash {
  border: 1px dashed #eee;
}

.addaddressbutton {
  margin: 12px 0px;
}

.addressbuttonrow {
  display: flex;
  flex-direction: row;
  direction: rtl;
  margin-top: 10px;
}

.addressbutton {
  border-radius: 8px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: start;
  font-weight: 400;
  font-size: 13px;
  cursor: pointer;
  transition: 0.3s;
  text-align: center;
  direction: rtl;
  width: 50%;
  margin: 0px 12px 0px 0px;
  padding-right: 8px;
  position: relative;
  color: #555 !important;
  background-color: #fafafa;
  border: 1px solid #f0f0f0 !important;
}

.addressbutton:hover {
  background-color: #f0f0f0 !important;
}

.addressbutton:first-child {
  margin: 0px;
}

.deleteaddress.color {
  background-color: #ff4c5f20;
  color: #ff4c5f !important;
}

.editaddress.color {
  background-color: #11a0ef20;
  color: #11a0ef !important;
}

.product-info .label.main {
  font-size: 13px;
  margin-left: 2px;
}

.product-info .label.main.value {
  font-weight: 400;
  margin-right: 4px;
  font-size: 15px;
}

.product-info .label.main.count {
  font-weight: 400;
  margin-right: 4px;
}

.shop .product-info .label.main.count,
.cartlist .product-info .label.main.count {
  font-weight: 400;
  font-size: 12px;
  line-height: unset;
  margin-bottom: 6px;
  margin-right: 0px;
}

.product-info .label.main.count.ok {
  color: #1acd96;
}

.product-info .label.main.count.error {
  color: #ef394e;
}

.product-info .count-row {
  /*padding: 0px 0px 8px 0px;
    border-bottom: 1px solid #f0f0f0;*/
}

.imagelist {
}

.imagelist .imagerow .imageitem .checkbox {
  justify-content: center;
  cursor: pointer;
}

.imagelist .imagerow .imageitem {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  margin-left: 8px;
}

.imagelist .imagerow .imageitem:last-child {
  margin-left: 0px;
}

.imagelist .imagerow {
  display: flex;
  flex-direction: row;
  direction: rtl;
}

.imagelist .imagerow .imageitem img {
  width: calc((var(--widthdashboard) - 16px) / 3);
  max-width: 142px;
  height: calc((var(--widthdashboard) - 16px) / 3);
  max-height: 142px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.imagelist .imagerow .imageitem .deletebutton {
  width: calc((var(--widthdashboard) - 16px) / 3);
  max-width: 142px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  margin-top: 0px;
  margin-bottom: 8px;
}

.imagetype .boxdesign {
  padding: 0px;
}

.imagetype {
  direction: rtl;
}

.imagetype .imagetype-item {
  width: calc((var(--widthdashboard) - 8px) / 2);
  max-width: 221px;
  height: calc(((var(--widthdashboard) - 8px) / 2) + 52px);
  max-height: 273px;
  margin-left: 8px;
  overflow: hidden;
}

.imagetype .imagetype-item .checkbox {
  padding: 10px;
}

.imagetype .imagetype-item img {
  overflow: hidden;
}

.imagetype .imagetype-item:last-child {
  margin-left: 0px;
}

.imagetype-cover {
  object-fit: cover !important;
}

.imagetype-contain {
  object-fit: contain !important;
}

.searchbox {
  display: flex;
  position: relative;
  width: 100%;
  align-items: center;
  height: 46px;
  transition: all 0.3s ease-in;
  opacity: 1;
}

.searchbox.shide {
  height: 0 !important;
  opacity: 0;
}

.searchbox input {
  padding: 12px 40px 12px 16px;
  background: #f5f5f5;
  direction: rtl;
  border: none;
  border-radius: 8px;
  width: 100%;
  font-weight: 300;
  height: 46px;
}

.searchbox input::-webkit-search-cancel-button {
  left: 60px;
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  background: #888;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-color 0.2s;
}

.searchbox input::-webkit-search-cancel-button:hover {
  background-color: #666;
}

.searchbox .fi {
  position: absolute;
  right: 14px;
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: #888;
}

.searchbox .button-search {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 0px 12px;
  font-size: 13px;
  border-radius: 6px;
  transition: 0.3s;
  border: 1px solid var(--basecolor);
  color: var(--basecolor);
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.searchbox .button-search:hover {
  border: 1px solid var(--button-active-hover);
  color: var(--button-active-hover);
}

.search-bar {
  padding: 4px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  border-radius: 8px;
  border: 0px solid #ccc;
  color: #888 !important;
  position: relative;
  /*background: var(--background-button);*/
}

.search-bar.search-active {
  color: var(--button-red) !important;
  background: #ff4c5f20;
  border-color: var(--button-red) !important;
}

.search-bar i {
  font-size: 16px;
  width: 16px;
  height: 16px;
}

.search-bar span {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background-color: var(--button-red);
  position: absolute;
  top: -4px;
  left: -4px;
}

.shopbadge {
  background-color: var(--button-red);
  border: 3px solid #f9f9f9;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 0px;
  right: -6px;
  border-radius: 50%;
}

.emptybox {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #bbb;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 16px 16px 8px 16px;
  direction: rtl;
  line-height: 20px;
  margin: 16px 24px;
}

.emptybox .empty-title {
  font-weight: 400;
}

.emptybox .empty-message {
  font-size: 14px;
  color: #777;
}

.cart-product {
  width: 50%;
  border-radius: 8px;
  height: 43px;
  display: flex;
  align-items: center;
  font-weight: 300;
  font-size: 14px;
  cursor: pointer;
  transition: 0.3s;
  text-align: center;
  direction: rtl;
  /*background-color: var(--button-white);
    border: 2px solid var(--button-red);*/
  color: var(--button-red);
  justify-content: space-between;
  /*padding: 0px 8px;*/
  color: #333;
}

.cart-product .count-number {
  font-weight: 500;
  font-size: 18px;
  height: 43px;
  display: flex;
  align-items: center;
}

.cart-product .remove-count-btn,
.cart-product .add-count-btn,
.cart-product .trash-count-btn {
  color: var(--button-red);
  font-size: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background-color: #eee;
  color: #333;
}

.cart-product .trash-count-btn {
  /*margin-left: 4px;*/
}

.cart-product .add-count-btn {
  font-size: 20px;
  width: 32px;
  height: 32px;
}

.cart-product .add-count-btn i,
.cart-product .remove-count-btn i {
  width: 20px;
  height: 20px;
}

.cart-product .trash-count-btn i {
  width: 16px;
  height: 16px;
}

.cart-product .remove-count-btn {
  font-size: 20px;
  width: 32px;
  height: 32px;
}

.cart-icon,
.user-icon,
.home-icon,
.tel-icon,
.order-icon {
  display: flex;
  position: relative;
  cursor: pointer !important;
}

.cart-icon i,
.user-icon i,
.home-icon i,
.tel-icon i,
.order-icon i {
  width: 20px;
  height: 20px;
  font-size: 20px;
}

/* رنگ آیکون‌های نوار را حالا .ab-item کنترل می‌کند (currentColor).
   این دو قاعده با ویژگی بالاتر رنگ #555 را تحمیل می‌کردند و نمی‌گذاشتند
   آیکونِ تبِ فعال سفید شود، پس به .ab-item محدود نشده‌ها اختصاص یافتند. */
#appBar i.fi[class*="fi-sr-"]:not(.ab-item i),
#appBar .ab-item:not(.on) i.fi[class*="fi-sr-"] {
  color: #8b8f98;
}

#appBar i.fi[class*="fi-rr-"]:not(.ab-item i),
#appBar .ab-item:not(.on) i.fi[class*="fi-rr-"] {
  color: #8b8f98;
}

/* تب فعال: آیکون حتما سفید */
#appBar .ab-item.on i.fi,
#appBar .ab-item.on i.fi[class*="fi-rr-"],
#appBar .ab-item.on i.fi[class*="fi-sr-"] {
  color: #fff !important;
}

.header-shop .cart-icon .cart-count,
.product-page.cart-icon .cart-count {
  right: -8px;
  top: -8px;
}

.product-page.cart-icon {
  margin-right: 16px;
}

.cart-icon .cart-count {
  position: absolute;
  right: 0px;
  top: -8px;
  background-color: var(--button-red);
  height: 20px;
  min-width: 20px;
  color: white;
  font-size: 10px;
  font-weight: 400;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #fff;
  text-align: center;
  padding: 3px 5px 0px;
}

.push-state {
  position: absolute;
  left: 10px;
  top: -5px;
  background-color: #1acd96;
  height: 15px;
  min-width: 15px;
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.push-state.active {
  background-color: #1acd96;
}

.push-state.deactive {
  background-color: var(--button-red);
}

.push-state.count-badge {
  font-size: 10px;
  padding: 2px 3px 0px;
}

.push-state i {
  font-size: 5px;
  width: 5px;
  height: 5px;
}

.shop .top-height,
.shop-new .top-height,
.product .top-height,
.customerdashboard .top-height,
.cartlist .top-height,
.shopinfo .top-height {
  height: 63px;
}

.customershipping {
  margin-top: 16px;
}

.customershipping .label {
  white-space: pre-line;
  text-align: right;
  margin: 0;
}

.shipping-price {
  font-weight: 400;
}

.customershipping .shipping-disable {
  display: block !important;
  width: 100%;
  height: 100%;
  background-color: #ffffffaa;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-radius: 10px;
}

.customershipping .shipping-disable div {
  position: absolute;
  width: 100%;
  text-align: right;
  bottom: 12px;
  font-size: 14px;
  color: var(--button-red);
  font-weight: 400;
  direction: rtl;
  padding-right: 16px;
}

.customershipping .list-box.shipping-row-disable {
  padding-bottom: 42px;
}

.payment-row .payment-image,
.takeaway-row .takeaway-image {
  border: 1px solid var(--basecolor);
  box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
  border-radius: 8px;
  margin: 0px 0px 0px 12px;
  transition: all 0.3s;
  width: 48px;
  height: 48px;
  min-width: 48px;
  font-size: 24px;
  color: var(--basecolor);
  display: flex;
  align-items: center;
  justify-content: center;
}

.takeaway-row .fa-check,
.payment-row .fa-check {
  margin: 0 !important;
}

.payment-row.disable .payment-image,
.takeaway-row.disable .takeaway-image {
  border: 1px solid var(--basecolorshadow);
}

.payment-row .payment-image img {
  width: 42px;
  height: 42px;
  border-radius: 8px;
}

.payment-row .payment-image i {
  width: 24px;
  height: 24px;
  font-size: 24px;
}

.pg-box-credit {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  direction: rtl;
  margin-top: 12px;
}

.cursor-pointer,
.cursor-pointer * {
  cursor: pointer !important;
}

.pg-box-credit .pg-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 8px;
  width: 100%;
  height: 75px;
  justify-content: center;
  transition: all 0.3s;
  cursor: pointer !important;
  gap: 8px;
}

.pg-box-credit .pg-item.checkbox .fi-sr-bullet {
  margin-left: 0px;
}

.payment-title-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.payment-title-box .label.main {
  font-size: 15px;
  line-height: unset;
  font-weight: 400;
}

.payment-title-box .label {
  font-size: 13px;
  font-weight: 300;
  margin: 0;
  white-space: normal;
}

.pg-box-credit .pg-item:last-child {
  margin-left: 0px;
}

.pg-box-credit .pg-item.active {
  /*border: 1px solid var(--basecolor);
    box-shadow: 0 0 0 0.25rem var(--basecolorshadow);
    background: var(--basecolorshadowback);*/
}

.pg-box-credit .pg-item .payment-image img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.takeaway-row .takeaway-image {
  padding: 6px;
}

.takeaway-row .takeaway-image img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.takeaway-row .takeaway-image i {
  font-size: 24px;
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--basecolor);
}

.payment-discount .discount-btn:hover {
  border: 1px solid var(--button-active-hover);
  color: var(--button-active-hover);
}

.payment-discount .discount-btn {
  margin: 0px 12px 0px 0px;
  background-color: var(--button-white);
  border: 1px solid var(--basecolor);
  color: var(--basecolor);
  border-radius: 8px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
  transition: 0.3s;
  text-align: center;
  direction: rtl;
  padding: 0px 16px;
}

.m-top {
  margin-top: 12px !important;
}

.m-top-short {
  margin-top: 8px !important;
}

.m-bottom {
  margin-bottom: 12px !important;
}

.m-bottom-short {
  margin-bottom: 8px !important;
}

.m-right {
  margin-right: 16px;
}

.m-left {
  margin-left: 16px;
}

.discount-input-row .login-input::placeholder {
  color: #888 !important;
}

.discount-input-row {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
}

.discount-input-row .delete-discount {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -10px;
  margin-left: 12px;
}

.discount-input-row .delete-discount span {
  height: 20px;
  width: 20px;
  background-color: var(--button-red);
  border-radius: 10px;
  color: white;
  font-size: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
  padding: 7px 7px 6px 7px;
}

.currency {
  font-weight: 300;
  font-size: 12px;
  margin-right: 4px;
}

.cartlist-info .label {
  white-space: pre-line;
  text-align: right;
}

.cartlist-info .title-info {
  position: relative;
  margin: 0px 0px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: rtl;
}

.cartlist-info .title-info .title {
  font-weight: 500;
  font-size: 14px;
}

.cartlist-info .title-info .showMoreInfo {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--buttonlinecolor);
  font-weight: 500;
  font-size: 14px;
  direction: ltr;
}

.cartlist-info .title-bottom {
  display: none;
  margin: 0 -12px;
  padding: 0 12px;
}

.cartlist-info .title-info .fa {
  position: absolute;
  top: 50%;
  left: 11px;
  font-size: 18px;
  margin-top: -8px;
  color: #666;
  transform: rotate(0deg);
  transition: transform 0.5s ease;
}

.cartlist-info .title-info .fa.rotated {
  transform: rotate(180deg);
}

.cartlist-info .title-bottom .count-number .count-title,
.orderlist .count-number .count-title,
.orderlist-cart .count-number .count-title {
  color: #888;
  font-size: 12px;
  margin-left: 6px;
}

.cartlist-info
  .title-bottom
  .product-item-container
  .product-item
  .product-image
  img {
  /*width: calc(var(--widthdashboard) / 3.75);
    max-width: 120px;
    height: calc(var(--widthdashboard) / 3.75);
    max-height: 120px;*/
}

.cartlist-info .title-bottom .count-number,
.orderlist .count-number,
.orderlist-cart .count-number {
  color: #333;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  background: #fff;
  box-shadow: 0 0px 4px #00000050;
  padding: 4px 0px 0px;
}

.payment-count-number {
  color: #333;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  white-space: nowrap;
  background: #eee;
  padding: 6px 6px 3px;
  line-height: 1;
}

.cartlist-info .title-bottom .franchise,
.orderlist .franchise,
.orderlist-cart .franchise {
  background-color: #ffe9eb !important;
  color: #ff4c5f !important;
  font-size: 12px;
  font-weight: 400;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 10px 5px;
  margin-top: 8px;
}

.copon-button {
  background: var(--basecolor);
  color: #fff;
  padding: 6px 15px 5px;
  border-radius: 10px;
  top: 39px;
  font-size: 15px;
  left: 9px;
  position: absolute;
}

.resend-button,
.normal-time {
  background: var(--basecolor);
  color: #fff;
  padding: 6px 15px 5px;
  border-radius: 10px;
  top: 8px;
  font-size: 15px;
  left: 8px;
  position: absolute;
  font-weight: 400;
}

.warning-time {
  background: #ffc107;
  color: #fff;
  padding: 6px 15px 5px;
  border-radius: 10px;
  top: 8px;
  font-size: 15px;
  left: 8px;
  position: absolute;
  font-weight: 400;
}

.size-format {
  background-color: #f3f3f3;
  border-radius: 8px;
  padding: 5px 5px 3px;
  font-size: 15px;
}

.info-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-image img {
  width: calc(var(--widthdashboard) / 3);
  max-width: 150px;
  height: calc(var(--widthdashboard) / 3);
  max-height: 150px;
  /*border: 3px solid var(--basecolor);*/
  margin-top: 24px;
  /*border-radius: 35px;*/
  overflow: hidden;
  /*background-color: #fff;*/
  position: relative;
}

.shopinfo .info-title {
  text-align: center;
  margin: 16px 0px 24px;
  font-size: 20px;
  font-weight: 400;
  color: #444;
}

.info-row {
  display: flex;
  flex-direction: row;
  direction: rtl;
  align-items: center;
  margin-bottom: 12px;
  cursor: pointer;
}

.info-row .info-row-image {
  border-radius: 20px;
  margin-left: 10px;
}

.info-row.phone .info-row-image {
  background-color: #88888815;
}

.info-row.social_whatsapp .info-row-image {
  background-color: #1acd9615;
}

.info-row.social_instagram .info-row-image {
  background-color: #ff4c5f15;
}

.info-row.social_telegram .info-row-image {
  background-color: #0088cc15;
}

.info-row.enamad .info-row-image {
  background-color: #0088cc15;
}

.info-row.address .info-row-image {
  background-color: #11a0ef15;
}

.info-row.mail .info-row-image {
  background-color: #a503ff15;
}

.info-row.link .info-row-image,
.info-row.website .info-row-image {
  background-color: #ffa70015;
}

.info-row.phone .info-row-image i {
  color: #888888;
}

.info-row.social_whatsapp .info-row-image i {
  color: #1acd96;
}

.info-row.social_instagram .info-row-image i {
  color: #ff4c5f;
}

.info-row.social_telegram .info-row-image i {
  color: #0088cc;
}

.info-row.enamad .info-row-image i {
  color: #0088cc;
}

.info-row.address .info-row-image i {
  color: #11a0ef;
}

.info-row.mail .info-row-image i {
  color: #a503ff;
}

.info-row.link .info-row-image i,
.info-row.website .info-row-image i {
  color: #ffa700;
}

.info-row .info-row-image i {
  font-size: 16px;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.info-row-title {
  font-size: 12px;
  text-align: right;
  color: #bbb;
  margin-bottom: 3px;
}

.info-row-value {
  font-size: 15px;
  text-align: right;
  color: #222;
}

.info-divider {
  height: 1px;
  background-color: #eee;
  margin: 0px 20px 12px 20px;
}

.priority {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 16px;
  left: 16px;
  font-size: 20px;
  color: var(--basecolor);
  gap: 6px;
}

.productImage {
  width: 30%;
  margin-left: 8px;
  aspect-ratio: 1 / 1;
}

.priority i {
  width: 20px;
  height: 20px;
}

.category-row {
  width: 100%;
  text-align: right;
  direction: rtl;
  position: relative;
  align-items: center;
  justify-content: start;
  padding: 24px 0px 8px;
}

.category-row-line {
  position: absolute;
  /*height: 1px;
    background-color: var(--basecolor);
    width: 100%;*/
}

.category-row-line.red {
  background-color: var(--button-red);
}

.category-row-line.special {
  background-color: #f07722;
}

.category-row-title {
  width: fit-content;
  z-index: 1;
  /*color: var(--basecolor);*/
  /*padding: 8px;*/
  /*border-radius: 16px;
    border: 10px solid #f9f9f9;
    font-size: 14px;*/
  font-weight: 500;
  /*background-color: #f9f9f9;*/
  padding-right: 8px;
}

.category-row[data-category="catenergym"] .category-row-title {
  background: #ff3131;
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
}

.category-row-title.red {
  color: var(--button-red);
}

.category-row-title.special {
  color: #f07722;
}

/* ticket */

.ticket .label.top {
  margin: 0 0 5px 0;
  width: 100%;
}

.ticket-box {
  margin-bottom: 16px;
  margin-left: 50px;
}

.ticket-box.parent {
  margin-right: 50px;
  margin-left: 0px;
}

.ticket-box .message {
  direction: rtl;
  background-color: var(--basecolor);
  color: white;
  text-align: right;
  padding: 16px;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 3px;
  font-size: 16px;
  line-height: 20px;
  white-space: pre-wrap;
  word-break: break-word;
}

.ticket-box .message a {
  display: inline-block;
  text-align: left;
  direction: ltr;
  color: #ffffff;
  background: #ffffff35;
  transition: 0.3s;
  border-radius: 5px;
  padding: 5px 10px 2px;
  float: left;
}

.ticket-box .message a:hover {
  background: #ffffff50;
}

.ticket-box.parent .message {
  background-color: #eee;
  color: #444;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 3px;
}

.ticket-box .file {
  border: 1px solid var(--basecolor);
  border-radius: 10px;
  padding: 10px 16px;
  background-color: #1acd960d;
  color: var(--button-active-hover);
  font-size: 14px;
  font-weight: 400;
  margin: 8px 0px;
  direction: rtl;
  float: right;
}

.ticket-box.parent .file {
  float: left;
  background-color: #bbbbbb10;
  border: 1px solid #bbb;
  color: #777;
}

.ticket-box .file a {
  color: var(--button-active-hover);
}

.ticket-box.parent .file a {
  color: #666;
}

.ticket-box .info {
  direction: rtl;
  color: #999;
  font-size: 14px;
  margin-top: 6px;
}

.ticket-box.parent .info {
  direction: ltr;
}

.ticket-box .info .name {
  margin-left: 14px;
  position: relative;
  margin-right: 5px;
  color: #666;
  font-weight: 400;
}

.ticket-box.parent .info .name {
  margin-left: 5px;
  margin-right: 14px;
}

.ticket-box.parent .info .name::after {
  right: -7px;
  left: auto;
}

.ticket-box .info .name::after {
  content: "";
  width: 2px;
  height: 12px;
  border-radius: 12px;
  background: #ddd;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: -7px;
}

.ticket-response {
  margin-bottom: 16px;
}

.reason-amount {
  direction: ltr;
  margin-left: 5px;
  font-weight: bold;
  color: var(--button-red);
}

.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.poweredby {
  position: fixed;
  bottom: 0px;
  left: 0;
  right: 0;
  display: flex;
}

.poweredby a {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  margin: 0px auto;
  margin-bottom: 0px;
  color: #808080;
  background: #efefef;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding: 8px 16px;
  font-size: 15px;
  direction: rtl;
}

.poweredby a b {
  font-weight: 500;
}

.poweredby a img {
  width: 20px;
  margin: 0px 7px;
}

.workinghourbox i {
  position: absolute;
  top: 15px;
  left: 13px;
  color: #888;
  font-size: 11px;
  font-weight: 500;
}

.workinghourbox {
  display: flex;
  width: 100%;
  direction: rtl;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  background-color: #f5f5f5;
  margin-top: 16px;
  border-radius: 10px;
  color: #666;
  font-size: 14px;
  position: relative;
  gap: 8px;
}

.workinghoursshop .workinghourbox {
  padding: 10px 12px;
  background-color: #ffffff;
  border: 1px solid #eee;
  margin-top: 0px;
}

.workinghoursshop .workinghourbox.shopclose {
  padding: 7px 12px;
  background-color: #ff4c5f14;
  color: #ff4c5f;
  font-weight: 500;
  border: 1px solid #ff4c5f30;
}

.workinghoursshop .workinghourbox.shopclose.denied {
  padding: 10px 12px;
}

.workinghoursshop .workinghourbox.shopopen {
  padding: 7px 12px;
  background-color: #1acd9614;
  color: #1acd96;
  font-weight: 500;
  border: 1px solid #1acd9642;
}

.workinghoursshop .workinghourboxstate.shopclose {
  background-color: #ff4c5f;
  color: #ffffff;
}

.workinghoursshop .workinghourboxstate.shopopen {
  background-color: #1acd96;
  color: #ffffff;
}

.workinghoursshop .login-row {
  padding: 0px;
}

.workinghoursshop .login-row:last-child {
  margin-bottom: 16px;
}

.cartlist-workinghours {
  position: fixed;
  bottom: 140px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  right: 0;
  left: 0;
}

.cartlist-workinghours-box {
  background-color: var(--button-red);
  color: #fff;
  padding: 8px 15px 6px;
  font-size: 13px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

.receipt-container {
  display: flex;
  flex-direction: column;
  direction: rtl;
  /*padding: 16px 32px 16px 16px;*/
  padding: 16px;
  width: 80mm;
  text-align: right;
}

.receipt-container * {
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  color: #000 !important;
  border-color: #000 !important;
}

.receipt-container .label.main.border {
  padding: 0px 8px;
  margin: 6px 0px;
}

.receipt-container .product-info {
  border: 1px solid #000;
  padding: 0px 4px;
  line-height: 20px;
}

.receipt-container .product-item-container {
  border-bottom: 1px solid #000;
  margin-bottom: 8px;
}

.receipt-container .category-row {
  border: 1px solid #000;
  padding: 0px 4px;
  line-height: 20px;
  color: #000;
  margin-bottom: 8px;
}

.receipt-container.customer .label.main {
  line-height: 20px;
}

.receipt-container.customer .label {
  line-height: 20px;
}

.receipt-container .flex-row {
  /*flex-basis: 100%;
    align-items: center*/
}

.receipt-container .flex-row:nth-child(1) {
  justify-content: start;
  align-items: center;
}

.receipt-container .flex-row.line:nth-child(1) {
  justify-content: start;
  align-items: start;
}

.receipt-container .flex-row:nth-child(2) {
  justify-content: start;
  align-items: center;
}

.receipt-container .flex-row.header {
  width: 100%;
  border-bottom: 1px solid #000;
  margin-top: 8px;
  justify-content: space-between;
}

.receipt-container .flex-column.item {
  border-bottom: 1px solid #aaa;
}

.receipt-container .flex-column.item:last-child {
  border-bottom: 0px;
}

.receipt-container .flex-column .flex-row.item {
  justify-content: space-between;
  align-items: center;
}

.receipt-container .flex-row.item {
  width: 100%;
}

.receipt-container .flex-row.header label,
.receipt-container .flex-row.item label {
  margin: 0px;
}

.receipt-container .flex-row.header label:nth-child(1),
.receipt-container .flex-row.item label.main:nth-child(1) {
  width: 70%;
  justify-content: start;
  align-items: center;
}

.receipt-container .flex-row.header label:nth-child(2),
.receipt-container .flex-row.item label.main:nth-child(2) {
  width: 10%;
  justify-content: center;
  align-items: center;
}

.receipt-container .flex-row.header label:nth-child(3),
.receipt-container .flex-row.item label.main:nth-child(3) {
  width: 20%;
  justify-content: end;
  align-items: center;
}

.report-list .product-item-container {
  direction: rtl;
  display: flex;
  flex-direction: row;
  text-align: right;
  border-bottom: 1px solid #f5f5f5;
  padding: 8px;
}

.report-list .product-image {
  margin-left: 8px;
}

.report-list .product-image img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  opacity: 1;
  transition: opacity 0.2s;
  display: inline-block;
  overflow: hidden;
  border-radius: 8px;
}

.report-list .product-info .cartlist-customize-row {
  margin: 0px;
}

.report-list .product-info .label.main.value,
.report-list .product-item-container .product-info .product-title,
.report-list .product-info .label.main {
  font-size: 14px;
}

.report-list .category-row {
  padding: 10px 10px 8px;
  color: #888;
  background: #fafafa;
  font-size: 13px;
}

.report-list .boxdesign {
  padding: 0px;
  overflow: hidden;
  direction: rtl;
  text-align: right;
}

.report-list .product-item-container .product-info .product-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 300;
  direction: rtl;
  text-align: right;
  margin: 0px;
}

.report-list .product-item-container .product-info {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.report-header a {
  color: #fff;
  padding-left: 8px;
  margin-left: 8px;
}

.report-header a.print {
  background: #11a0ef !important;
}

.report-header a.print:hover {
  background: #0e81c1;
}

.customer-receipt .report-header {
  margin: 12px 0px 0px;
}

.customer-receipt .report-header > *,
.customer-receipt .report-header a {
  margin: 0px;
}

.customer-receipt .report-header a {
  width: 100%;
}

.report-header {
  display: flex;
  direction: rtl;
  flex-wrap: wrap;
  margin-bottom: 4px;
  flex-direction: column;
}

.report-header > * {
  margin-bottom: 8px;
}

.report-header .label.top {
  margin: 0px;
  width: fit-content;
}

.product-day-list {
  display: flex;
  flex-direction: row;
  direction: rtl;
  flex-wrap: wrap;
}

.product-day-list a.active {
  border: 1px solid var(--basecolor);
  background-color: var(--background-button);
  color: var(--basecolor);
  font-weight: 400;
  box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
}

.product-day-list a.active:hover {
  color: var(--button-active-hover);
}

.product-day-list a:hover {
  color: #666;
}

.product-day-list a {
  border: 1px solid #dadada;
  padding: 5px 16px;
  border-radius: 20px;
  margin-left: 10px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  color: #888;
  font-weight: 300;
  font-size: 14px;
  transition: 0.3s;
}

.reservation-time-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  direction: rtl;
  border-bottom: 1px solid #f0f0f0;
  margin-top: 12px;
}

.reservation-time-container .reservation-time-item .reservation-time-day {
  font-size: 13px;
  margin-bottom: 8px;
}

.reservation-time-container .reservation-time-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
  font-size: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 6px;
  margin-bottom: 6px;
  background-color: #f5f5f5;
  font-weight: 300;
  color: #888;
  transition: 0.3s;
  cursor: pointer;
  min-width: 72px;
}

.reservation-time-container .reservation-time-item.active {
  background: #1acd9618;
  border: 1px solid var(--basecolor);
  color: var(--basecolor);
  box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
}

.reservation-time-header {
  margin: 12px 0px 0px;
  direction: rtl;
  font-size: 15px;
  font-weight: 300;
  color: #666;
  display: flex;
  flex-direction: row;
  border: 1px solid #dadada;
  padding: 10px 12px 8px;
  border-radius: 10px;
  background-color: #fff;
  align-items: center;
}

.reservation-time-header-error {
  background: var(--button-red);
  color: #fff;
  direction: rtl;
  padding: 8px 12px;
  border-radius: 10px;
  text-align: center;
  font-weight: 300;
  margin-top: 12px;
}

.reservation-time-header .reservation-time-header-title {
  font-weight: 400;
  margin-right: 8px;
}

.checkin-container .boxdesign {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  width: 60%;
}

.checkin-container .boxdesign input,
.checkin-container .boxdesign select {
  direction: rtl;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  transition: 0.3s;
  text-align: center;
  text-align-last: center;
  width: 100%;
}

.checkin-container .boxdesign input:focus,
.checkin-container .boxdesign select:focus {
  box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
}

.receipt-container #break {
  padding-bottom: 50px;
  border-bottom: 1px dashed #aaa;
  margin-bottom: 8px;
}

/* address bar */
.addressbar {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-direction: row;
  direction: rtl;
  font-size: 14px;
  padding: 8px;
  transition: 0.3s;
  color: #666 !important;
  justify-content: space-between;
  width: 100%;
  text-align: right;
}

.addressbar.address-error {
  padding: 12px;
  background: #ff4c5f20;
  border-color: #ff4c5f;
}

.addressbar .fi-rr-marker {
  font-size: 18px;
  width: 18px;
  height: 18px;
  color: #666;
}

.addressbar .fi-rr-angle-small-left {
  font-size: 15px;
  width: 15px;
  height: 15px;
  color: #666;
}

.addressbar i:first-child {
  margin-left: 8px;
}

.addressbar i:last-child {
  margin-right: 8px;
  margin-left: 4px;
}

.addressbar:hover {
  border: 1px solid #f0f0f0;
  color: #444 !important;
}

.addressbar .addressbox {
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 100%;
}

.addressbar .addressbox .addresstitle {
  border-radius: 6px;
  background-color: #eee;
  padding: 4px 6px;
  margin-left: 8px;
  white-space: nowrap;
}

.addressbar .addressbox .addresstext {
  font-weight: 400;
}

.addressbar-product {
}

.slogan {
  margin-top: 8px;
  font-size: 14px;
}

.state-group #showstate {
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  padding: 8px;
  margin: 4px 0px 0px;
  cursor: pointer;
  transition: all 0.3s;
}

.state-group #showstate:not(.disable) {
  border: 1px solid var(--basecolor);
  box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
}

.cart-state-group .boxdesign {
  padding-bottom: 0px;
}

.state-title {
  font-weight: 400;
  color: #444;
  margin: 0px 5px;
}

.state-group #showstate .label {
  cursor: pointer;
}

.state-group .state-item {
  border: 1px solid #1acd96;
  padding: 7px 8px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  display: flex;
  font-weight: 400;
  margin: 0px 0px 8px 8px;
  font-size: 14px;
}

.state-group .state-item i {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  display: none;
}

.state-group .state-item.yellow {
  background-color: #fff6df !important;
  color: #ff8800 !important;
  border-color: #ff8800 !important;
}

.state-group .state-item.blue {
  background-color: #e1f3fd !important;
  color: #11a0ef !important;
  border-color: #11a0ef !important;
}

.state-group .state-item.green {
  background-color: #e2f9f2 !important;
  color: #1acd96 !important;
  border-color: #1acd96 !important;
}

.state-group .state-item.red {
  background-color: #ffe9eb !important;
  color: #ff4c5f !important;
  border-color: #ff4c5f !important;
}

.state-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  direction: rtl;
  padding-bottom: 4px;
}

.select2-container--default.select2-container--focus
  .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
  border-radius: 8px;
  border: 1px solid #ccc;
  direction: rtl;
  text-align: right;
  background-color: #fff !important;
}

.boxdesign-background
  .select2-container--default.select2-container--focus
  .select2-selection--multiple,
.boxdesign-background .select2-container--default .select2-selection--multiple {
  -webkit-border-radius: 8px;
  border-radius: 8px;
  background: white;
  padding: 12px;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  border: 0px #ddd solid;
  transition: 0.3s;
  direction: rtl;
}

.select2.select2-container.select2-container--default,
.select2-search.select2-search--inline {
  border-radius: 18px;
  background-color: #fff !important;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  border: 1px solid var(--basecolor);
  border-radius: 10px;
  background-color: var(--basecolor);
  color: #fff;
  font-size: 14px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.manage-time
  .select2-container--default.select2-container--focus
  .select2-selection--multiple,
.manage-time .select2-container--default .select2-selection--multiple {
  border-radius: 8px;
  background: white;
  padding: 12px;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  border: 1px #f1f1f1 solid;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__display {
  padding-right: 8px;
}

.select2-container--default .select2-results > .select2-results__options {
  font-size: 14px;
  direction: rtl;
  text-align: right;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove {
  color: #fff;
  padding: 4px 8px 0px;
  border-right: none;
}

.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove:hover,
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove:focus {
  background-color: unset;
  color: #f0f0f0;
}

.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--selected {
  background-color: var(--basecolor);
  color: #fff;
}

.alertmessage {
  text-align: justify;
  direction: rtl;
  background-color: #f07722;
  color: #fff;
  padding: 11px;
  margin: 12px 0px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  border: 1px solid #f07722;
  display: flex;
  white-space: normal;
}

.alertmessage.error {
  background-color: #ff4c5f;
  border: 1px solid #ff4c5f;
  color: #fff;
}

.alertmessage.ok {
  background-color: #1acd96;
  border: 1px solid #1acd96;
  color: #fff;
}

.alertmessage.info {
  background-color: #11a0ef;
  border: 1px solid #11a0ef;
  color: #fff;
}

.alertmessage.warning {
  background-color: #f07722;
  border: 1px solid #f07722;
  color: #fff;
}

.alertmessage.yek {
  background-color: #00d895;
  border: 1px solid #00d895;
  color: #fff;
}

.alertmessage.outline.error {
  background-color: #ff4c5f20;
  border: 1px solid #ff4c5f;
  color: #ff4c5f;
}

.alertmessage.outline.ok {
  background-color: #1acd9620;
  border: 1px solid #1acd96;
  color: #1acd96;
}

.alertmessage.outline.info {
  background-color: #11a0ef20;
  border: 1px solid #11a0ef;
  color: #11a0ef;
}

.alertmessage.outline.warning {
  background-color: #f0772220;
  border: 1px solid #f07722;
  color: #f07722;
}

.alertmessage.outline.yek {
  background-color: #00d89520;
  border: 1px solid #00d895;
  color: #00d895;
}

.alertmessage.rffit-html {
  background-color: #7f0b50;
  display: flex;
  flex-direction: column;
  font-weight: 400;
  color: white;
  border: 1px solid #7f0b50;
  padding: 0px 16px 0px 8px;
  overflow: hidden;
}

.alertmessage.energym-html {
  background-color: #ff3131;
  display: flex;
  flex-direction: column;
  font-weight: 400;
}

.alertmessage.energym-html:hover {
  color: white;
}

.alertmessage.energym-html .title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 400;
}

.alertmessage.energym-html .title .logo {
  display: flex;
  gap: 8px;
}

.alertmessage.energym-html .title .logo img {
  height: 32px;
}

.alertmessage.energym-html .info {
  font-size: 13px;
  font-weight: 300;
}

#print-state {
  position: absolute;
  left: 0;
}

#print-state i {
  background-color: var(--basecolor);
  color: #fff;
  font-size: 9px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.score-bar {
  cursor: pointer;
  border: 0 !important;
  font-size: 14px;
  margin-bottom: 12px;
  overflow: hidden;
  height: 40px;
  font-weight: 400;
  width: 100%;
}

.score-bar .score-bar-empty {
  color: #888 !important;
  background-color: #88888820 !important;
}

.score-bar .score-buttom {
  font-weight: 400;
  display: flex;
  align-items: center;
}

.score-bar .score {
  font-weight: 400;
  display: flex;
  align-items: center;
  color: var(--basecolor);
  background-color: var(--basecolorshadowback);
  padding: 1px 8px;
  border-radius: 5px;
}

.score-bar .score .fi {
  margin-right: 4px;
  height: 14px;
  font-size: 12px;
}

.score-bar .score-buttom .fi {
  height: 14px;
  margin-right: 4px;
}

.score-bar .score-bar-notempty {
  color: #444 !important;
  background-color: #fff !important;
  border: 1px solid #ddd;
}

.score-bar .score-bar-empty,
.score-bar .score-bar-notempty {
  padding: 0px 10px;
  display: flex;
  width: 100%;
  flex-direction: row;
  direction: rtl;
  justify-content: space-between;
  height: 100%;
  align-items: center;
  border-radius: 8px;
}

.score-box {
  justify-content: center;
  padding: 16px;
}

.score-box .score-title {
  background: #f5f5f5;
  padding: 6px 9px;
  font-size: 15px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-weight: 500;
  color: #aaa;
  transition: 0.3s;
}

.score-info {
  line-height: 20px;
  text-align: right;
  white-space: pre-line;
  width: 100%;
  font-size: 16px;
  margin: 12px 0px;
  direction: rtl;
}

.score-box .score-title.score5,
.score-box .score-title.score4 {
  color: #1acd96;
  background: #1acd9620;
}

.score-box .score-title.score1,
.score-box .score-title.score2 {
  color: #ff4c5f;
  background: #ff4c5f20;
}

.score-box .score-title.score3 {
  color: #666;
  background: #66666620;
}

.score-box .score-item {
  font-size: 22px;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.score-box .score-item i {
  color: #ddd;
  transition: 0.3s;
}

.score-box .score-item.active i {
  color: var(--basecolor);
}

.scorelist-cart {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.scorelist-cart div {
  aspect-ratio: 1 / 1; /* اختیاری */
  border-radius: 8px;
  overflow: hidden;
}

.scorelist-cart div img {
  width: 100%;
  height: 100%;
}

.score-list-box {
  display: flex;
  flex-direction: column;
  direction: rtl;
  text-align: right;
  margin-bottom: 12px;
  border-bottom: 1px solid #eee;
}

.score-list-box:last-child {
  margin-bottom: 0px;
  border-bottom: 0;
}

.score-list-box .name {
}

.score-list-box .comment {
  font-size: 14px;
  margin-bottom: 8px;
  text-align: right;
  white-space: pre-wrap;
}

.score-list-box .response .title {
  font-weight: 400;
  margin-bottom: 5px;
}

.score-list-box .response {
  color: var(--basecolor);
  border: 1px solid var(--basecolorshadow);
  border-radius: 8px;
  padding: 12px;
  text-align: right;
  font-size: 14px;
  margin-bottom: 12px;
  white-space: pre-wrap;
}

.score-list-box .cart-list {
  display: flex;
  flex-direction: row;
  direction: rtl;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.score-list-box .cart-list .cart-item {
  padding: 5px 8px;
  border-radius: 8px;
  margin-left: 8px;
  margin-bottom: 8px;
  background-color: #eee;
  color: #666;
  font-weight: 300;
  font-size: 14px;
  transition: 0.3s;
}

.score-list-box .time-score {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 6px;
}

.score-list-box .time-score .time {
  font-size: 14px;
  color: #999;
}

.score-list-box .time-score .score .fi {
  margin-right: 4px;
  height: 14px;
  font-size: 12px;
}

.score-list-box .time-score .score {
  font-weight: 400;
  display: flex;
  align-items: center;
  color: var(--basecolor);
  background-color: var(--basecolorshadowback);
  padding: 4px 8px 1px;
  border-radius: 5px;
  font-size: 14px;
}

.score-top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin: 12px auto;
  background-color: var(--basecolorshadowback);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--basecolor);
}

.score-top .score-value .fi {
  font-size: 16px;
}

.score-top .score-value {
  font-weight: 500;
  font-size: 25px;
  color: var(--basecolor);
}

.score-top .score-text {
  font-size: 13px;
  color: var(--basecolor);
}

.score-top .score-text .score-text-b {
  font-size: 14px;
  font-weight: 400;
}

.party .party-top-message {
  color: #9911ef !important;
  background-color: #9911ef20 !important;
  border: 0 !important;
  direction: rtl;
  text-align: right;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 300;
  line-height: 20px;
  font-size: 15px;
}

.party-cartlist-name {
  direction: rtl;
  text-align: right;
  font-size: 14px;
}

.receipt-container .party-cartlist-name {
  border: 1px solid #888;
  margin: 6px 0px;
  padding: 1px 4px;
}

.party-cartlist-name .title {
  font-weight: 400;
}

.shop-party-top {
  display: flex;
  flex-direction: row;
  direction: rtl;
  width: 100%;
}

.shop-party-top a:nth-child(2) {
  margin-right: 8px;
}

.status-dot {
  width: 6px;
  height: 6px;
  background-color: #1acd96;
  border-radius: 50%;
  position: relative;
  animation: pulse 1.5s ease infinite;
  margin-left: 6px;
}

.status-dot::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #1acd96;
  border-radius: 50%;
  opacity: 0.4;
  animation: glow 1.5s ease infinite;
}

.shopclose .status-dot {
  background-color: #ff4c5f;
}

.shopclose .status-dot::after {
  background-color: #ff4c5f;
}

.workinghourboxstate {
  /*margin-left: 8px;*/
  padding: 3px 12px;
  font-weight: 500;
  border-radius: 6px;
  font-size: 14px;
  display: flex;
  align-items: center;
  flex-direction: row;
}

.shop .workinghourboxstate {
  margin-left: 0px;
}

.workinghourboxstate.shopclose {
  background-color: #ff4c5f14;
  color: #ff4c5f;
  border: 1px solid #ff4c5f;
}

.workinghourboxstate.shopopen {
  background-color: #1acd9614;
  color: #1acd96;
  border: 1px solid #1acd96;
}

/*.box-product {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.box-product .product-item-container {
    min-width: 80%;
    margin-left: 16px;
    border: none;
    padding-top: 8px;
}*/

.shop-cart-count {
  background-color: var(--button-red);
  height: 20px;
  min-width: 20px;
  color: white;
  font-size: 12px;
  font-weight: 400;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 3px 5px 0px;
  margin-right: 6px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes glow {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
}

@media only screen and (max-width: 325px) {
  .box a {
    font-size: 30px;
  }

  .daybox a {
    font-size: 15px;
  }

  .monthbox a {
    font-size: 15px;
  }

  .monthtitle {
    font-size: 7px;
  }

  .credit-selector {
    padding: 10px 7px;
    margin-left: 7px;
  }

  .credit-selector .credit-text {
    font-size: 14px;
  }

  .credit-selector .credit-label {
    font-size: 10px;
  }

  .credit-top-height {
    height: 40px;
  }
}

/* Extra small devices (phones, 325px and down) */
@media only screen and (min-width: 325px) {
  .box a {
    font-size: 30px;
  }

  .daybox a {
    font-size: 15px;
  }

  .monthbox a {
    font-size: 15px;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .box a {
    font-size: 35px;
  }

  .daybox a {
    font-size: 17px;
  }

  .monthbox a {
    font-size: 17px;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .box a {
    font-size: 40px;
  }

  .daybox a {
    font-size: 19px;
  }

  .monthbox a {
    font-size: 19px;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .box a {
    font-size: 45px;
  }

  .daybox a {
    font-size: 21px;
  }

  .monthbox a {
    font-size: 21px;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .box a {
    font-size: 50px;
  }

  .daybox a {
    font-size: 23px;
  }

  .monthbox a {
    font-size: 23px;
  }
}

@media (hover: none) {
  a:hover {
    color: inherit;
  }
}

.pg-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 24px;
}

.pg-box-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.pg-box-row .pg-logo {
  width: 32px;
  height: 32px;
}

.pg-box .pg-logo {
  width: 64px;
  height: 64px;
  border-radius: 8px;
}

.pg-box .pg-row {
  margin-top: 12px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.pg-box .pg-title {
  font-size: 16px;
  color: #777;
}

.pg-box .pg-info {
  font-size: 18px;
  color: #444;
  margin-top: 4px;
  font-weight: 400;
}

.pg-box .pg-value {
  font-size: 20px;
  color: #444;
  font-weight: 500;
  margin-top: 8px;
}

.pg-box-row .normal-time {
  background-color: #1acd9620;
  color: #1acd96;
  font-weight: 400;
  padding: 5px 8px;
  font-size: 14px;
  border-radius: 8px;
}

.pg-box-row .warning-time {
  background-color: #ff4c5f20;
  color: #ff4c5f;
  font-weight: 400;
  padding: 5px 8px;
  font-size: 14px;
  border-radius: 8px;
}

.product-price-franchise {
  display: flex;
  justify-content: end;
  align-items: center;
  font-size: 12px;
  background: #eee;
  width: fit-content;
  border-radius: 4px;
  padding: 5px 10px 3px;
  color: #666;
  float: left;
  margin-top: 6px;
}

.product-bottom-price .product-price-franchise {
  margin: 0px 6px 0px 0px;
}

#notification-container {
  position: fixed;
  top: 20px;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  direction: rtl;
  text-align: right;
  flex-direction: column;
}

.custom-notification {
  background-color: #fff;
  padding: 12px;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  border: 1px #f1f1f1 solid;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  animation: slideIn 0.5s forwards;
  width: var(--widthdashboard);
  max-width: 450px;
  font-size: 14px;
}

.custom-notification.slide-out {
  animation: slideOut 0.5s forwards;
}

.custom-notification .icon {
  margin-left: 12px;
  height: 40px;
  width: 40px;
  border-radius: 5px;
  overflow: hidden;
}

.custom-notification .content {
  flex: 1;
}

.custom-notification .message {
  white-space: pre-wrap;
  line-height: 20px;
}

.custom-notification .title {
  font-weight: 400;
  margin-bottom: 5px;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.push-list .boxdesign {
  direction: rtl;
  text-align: right;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.push-list .boxdesign .expire {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0px;
  top: 0px;
  background-color: #ffffff99;
}

.push-list .boxdesign:first-child {
  margin-top: 0px;
}

.push-list .time {
  white-space: nowrap;
  font-size: 11px;
  color: #999;
}

.push-list .read.deactive {
  background-color: #ff4c5f;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 8px;
}

.push-list .title {
  font-weight: 400;
  margin-bottom: 6px;
}

.push-list .message {
  font-size: 14px;
  white-space: normal;
  line-height: 20px;
  color: #666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.push-list .icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin-left: 8px;
  background-color: #1acd9615;
  color: #1acd96 !important;
  border: 0px;
}

.push-list .icon.blue {
  background-color: #11a0ef15;
  color: #11a0ef !important;
}

.push-list .icon.green {
  background-color: #1acd9615;
  color: #1acd96 !important;
}

.push-list .icon.red {
  background-color: #ff4c5f15;
  color: #ff4c5f !important;
}

.push-list .icon.yellow {
  background-color: #f0772215;
  color: #f07722 !important;
}

.push-list .icon.purple {
  background-color: #9911ef15;
  color: #9911ef !important;
}

.push-list .icon.pink {
  background-color: #ff6fb515;
  color: #ff6fb5 !important;
}

.push-list .icon i {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

.push-full .shop-address-header {
  border-bottom: 1px solid #ddd !important;
  margin-bottom: 12px !important;
}

.push-full.push-list .message {
  white-space: pre-wrap !important;
  display: block !important;
  text-align: right !important;
  color: #444 !important;
  direction: rtl !important;
  font-size: 15px !important;
}

.push-full.push-list .title {
  margin-bottom: 0px !important;
}

.push-container {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #00000050;
  z-index: 999;
  right: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

.push-container .box {
  overflow: hidden;
  margin: 32px auto;
  width: calc(var(--widthdashboard) - 32px);
  max-width: calc(450px - 32px);
  height: fit-content;
  border-radius: 15px;
  direction: rtl;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #fff;
  opacity: 0;
}

.push-container .box-back {
  background-image: url("/styles/images/pattern-background-push-v2.png");
  background-size: cover;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.5;
  position: absolute;
  right: 0;
  top: 0;
}

.push-container .box .logo-container {
  position: relative;
  width: 30%;
  display: block;
  object-fit: contain;
  margin-top: calc(100% / 3);
  z-index: 1;
}

.push-container .box .logo-container .logo {
  width: 100%;
  display: block;
  object-fit: contain;
  margin: 0 auto;
}

.push-container .box .logo-container .badge {
  position: absolute;
  font-size: 16px;
  width: 36px;
  height: 36px;
  background-color: #ff4c5f;
  border-radius: 50%;
  color: #fff;
  right: -16px;
  top: -16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid #fff;
  font-weight: 400;
  padding-top: 6px;
}

.push-container .box .title-message-container {
  z-index: 1;
}

.push-container .box .title {
  font-size: 20px;
  font-weight: 500;
  margin-top: 32px;
  z-index: 1;
}

.push-container .box .message {
  width: 70%;
  margin: 0px auto;
  line-height: 20px;
  margin-top: 8px;
  z-index: 1;
}

.push-container .box .button {
  height: 45px;
  width: calc(100% - 64px);
  font-size: 15px;
  font-weight: 300;
  margin: calc(100% / 4) 32px 0px;
  background-color: var(--basecolorshadowback);
  z-index: 1;
}

.push-container .box .button:hover {
  background-color: #1acd9650;
  color: var(--basecolor);
}

.push-container .box .button-no {
  height: 45px;
  width: calc(100% - 64px);
  font-size: 15px;
  font-weight: 300;
  margin: 0px 32px;
  background-color: unset;
  color: #aaa;
  z-index: 1;
}

form {
  width: 100%;
}

.shop-new {
  width: 100%;
}

.shop-new .shop-container {
  display: flex;
  margin: 12px;
  direction: rtl;
  padding-bottom: 67px;
}

.shop-new .shop-category-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 74px;
  height: calc(100vh - 63px - 67px);
  overflow-y: auto;
  direction: ltr;
  padding: 0px 12px 12px 0px;
  margin-left: 12px;
}

.shop-new .shop-category-container .search-bar {
  margin: 0;
  padding: 8px 8px;
}

.shop-new .shop-category-container .cat-title {
  padding: 4px 8px;
  /*border-left: 4px solid #00000000;*/
  font-size: 14px;
  direction: rtl;
  white-space: normal;
  overflow: visible;
  height: unset;
  display: flex;
  justify-content: start;
  align-items: center;
  transition: all 0.3s ease;
  cursor: pointer;
  text-align: right;
  font-weight: 400;
  color: #888;
  border-radius: 3px;
}

.shop-new .shop-category-container .cat-title.energym.active {
  background-color: #ff3131;
  color: #ffffff;
}

.shop-new .shop-category-container .cat-title.energym {
  border-color: #ff3131;
  color: #ff3131;
}

.shop-new .shop-category-container .cat-title.energym .energymimg {
  width: 20px;
  height: 30px;
  margin-left: 6px;
  background-image: url("../images/energym/energym_color.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: inline-block;
}

.shop-new .shop-category-container .cat-title.energym.active .energymimg {
  background-image: url("../images/energym/energym_white.svg");
}

.category-title {
  font-size: 14px;
  direction: rtl;
  white-space: normal;
  text-align: right;
  font-weight: 400;
  color: #444 !important;
}

.shop-new .shop-category-container .cat-title.active {
  /*background: #1acd9618;*/
  /*border-left-color: var(--basecolor);*/
  color: var(--basecolor);
  /*font-weight: 400;*/
}

.shop-new .shop-category-container .cat-title i {
  margin-left: 5px;
  margin-top: 7px;
  font-size: 16px;
}

.shop-new .box-product {
  display: grid;
  gap: 12px;
}

.shop-new .productlist .product-item-container {
  /*border-top: none;*/
  overflow: visible;
  background-color: #ffffff;
  padding: 12px;
  border-radius: 8px;
  border: 0px solid #e9e9e9;
  height: fit-content;
}

.shop-new #scrollToTop {
  right: 16px;
}

.shop-new .box-top-shop-new {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.shop .box-top-shop-new {
  margin-top: 16px;
}

.box-top-shop-new {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shop-new .top-title .farsi {
  width: 100%;
  max-width: 100%;
}

.shop-new .lazybtn {
  margin: 0;
}

@media screen and (min-width: 1024px) {
  .shop-new .shop-category-container {
    display: flex;
    width: 25%;
  }

  .shop-new .productcategory,
  .shop-catbar {
    display: none !important;
  }

  .shop-new .shop-product-container {
    width: 75%;
  }

  .shop-new .box-top-shop-new {
    flex-direction: column;
  }

  .shop-new .box-product {
    grid-template-columns: repeat(2, 1fr);
  }

  .shop-new .searchbox.shide {
    display: none;
  }
}

/* استایل برای اندازه‌های متوسط */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .shop-new .productcategory {
    display: none;
  }

  .shop-new .shop-category-container {
    display: flex;
    width: 25%;
  }

  .shop-new .shop-product-container {
    width: 75%;
  }

  .shop-new .box-product {
    grid-template-columns: repeat(2, 1fr);
  }

  .shop-new .box-top-shop-new {
    flex-direction: row;
  }

  .shop-new .searchbox.shide {
    display: none;
  }
}

/* استایل برای موبایل (اندازه کوچک) */
@media screen and (max-width: 767px) {
  .shop-new .shop-category-container {
    display: none;
  }

  .shop-new .productcategory {
    display: flex;
  }

  .shop-new .shop-product-container {
    width: 100%;
  }

  .shop-new .box-product {
    grid-template-columns: repeat(1, 1fr);
  }

  .shop-new .box-top-shop-new {
    flex-direction: column;
  }

  .shop-new .searchbox.shide {
    display: flex;
  }
}

.pg-box-info {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  padding: 8px 12px;
  background-color: var(--basecolorshadowback);
  width: fit-content;
  margin: 12px auto 0px;
  border-radius: 8px;
  border: 1px solid var(--basecolor);
  color: var(--basecolor);
  font-weight: 400;
}

.energym-container {
  margin-top: 16px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.energym-container .regimen-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.energym-container .regimen-header .energym-logo {
  width: 48px;
}

.energym-container .answers {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
}

.energym-container .answers .answer-item {
  padding: 4px 8px;
  border: 1px solid #ddd;
  background: #f0f0f0;
  border-radius: 8px;
  color: #666;
  font-size: 14px;
}

.meal-header {
  display: flex;
  background: #eee;
  padding: 8px 12px 8px 8px;
  border-radius: 8px;
  color: #888;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  grid-column: 1 / -1;
}

.meal-header:not(.box-product .meal-header) {
  margin-bottom: 12px;
}

.meal-header .meal-title-box {
  display: flex;
  gap: 5px;
  flex-direction: row;
}

.meal-header .meal-title-box .meal-title {
  font-size: 14px;
}

.meal-header .meal-title-box .meal-value {
  font-weight: 400;
  color: #666;
}

.meal-header .meal-info {
  font-size: 12px;
  background: #ddd;
  padding: 2px 4px;
  border-radius: 4px;
  color: #666;
  font-weight: 400;
}

/*map*/

.leaflet-container {
  font-family: IRANSansX !important;
}

.leaflet-control-geocoder .leaflet-control-geocoder-alternatives a {
  width: 100%;
  direction: rtl;
  text-align: right;
}

.leaflet-bottom.leaflet-right {
  display: none;
}

.leaflet-container
  > div[style*="position: absolute"][style*="z-index: 999999"] {
  display: none !important;
}

.map-container {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 12px;
}

.map-container .fi {
  font-size: 14px;
  width: 14px;
  height: 14px;
  display: flex;
  line-height: unset;
}

#map {
  width: 100%;
  height: 100%;
}

.center-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 998;
  pointer-events: none;
  color: #444;
  filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.2));
}

.center-marker .fi {
  font-size: 30px;
  width: 30px;
  height: 30px;
  display: flex;
  line-height: unset;
}

/* کنترل‌های روی نقشه */
.map-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 998;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.search-control {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
  position: relative;
  direction: rtl;
}

.search-input-container {
  position: relative;
}

.search-loading {
  position: absolute;
  left: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}

.search-loading i {
  animation: spin 1s linear infinite;
}

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

/* لیست پیشنهادات */
.suggestions-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 6px 6px;
  max-height: 250px;
  overflow-y: auto;
  display: none;
  z-index: 1001;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.suggestion-item {
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.suggestion-item:hover,
.suggestion-item.active {
  background-color: #f8f9fa;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-icon {
  color: #666;
  font-size: 14px;
  margin-top: 2px;
  min-width: 16px;
}

.suggestion-content {
  flex: 1;
}

.suggestion-title {
  font-weight: bold;
  color: #333;
  margin-bottom: 3px;
  font-size: 14px;
}

.suggestion-subtitle {
  color: #666;
  font-size: 12px;
  line-height: 1.4;
}

.suggestion-distance {
  color: #007bff;
  font-size: 11px;
  font-weight: bold;
}

.no-suggestions {
  padding: 15px;
  text-align: center;
  color: #666;
  font-style: italic;
}

.search-error {
  padding: 15px;
  text-align: center;
  color: #dc3545;
  font-size: 13px;
}

.map-btn {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background-color: #ffc107;
  color: #212529;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translate(0, -50%);
}

.map-btn:hover {
  background-color: #e0a800;
}

/* کنترل‌های اضافی */
.extra-controls {
  position: absolute;
  top: 76px;
  right: 8px;
  z-index: 997;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.extra-controls .control-btn {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  color: #444;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.extra-controls .control-btn:hover {
  background-color: #f8f9fa;
  border-color: #adb5bd;
}

.extra-controls .control-btn.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

/* موقعیت کنترل‌ها برای موبایل */
@media (max-width: 768px) {
  .map-controls {
    top: 10px;
    right: 10px;
    left: 10px;
  }

  .search-control {
    min-width: auto;
  }

  .extra-controls {
    justify-content: center;
  }

  .extra-controls .control-btn {
    width: 40px;
    height: 40px;
  }

  .suggestions-list {
    max-height: 200px;
  }
}

.address-image-view img {
  object-fit: cover;
  display: block;
  width: 100%;
  height: 100%;
  transition: filter 0.3s ease;
}

.address-image-view .center-marker {
  transition: filter 0.3s ease;
}

.address-image-view #addressImage.blurred,
.address-image-view .center-marker.blurred {
  filter: blur(3px);
}

.address-image-view .edit-image-location {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.address-image-view:hover .edit-image-location {
  opacity: 1;
  pointer-events: all;
}

.address-image-view {
  width: 100%;
  aspect-ratio: 2/1;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  margin-top: 12px;
}

.location-marker i {
  font-size: 30px;
  width: 30px;
  height: 30px;
  color: var(--basecolor);
  filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.3));
}

.form-control {
  font-weight: 300;
  /*border: 1px solid #ddd;*/
  border-radius: 0.35rem !important;
  color: #222222;
  direction: rtl;
  text-align: right;
  min-height: calc(1.5em + 1rem + 2px);
  font-size: 15px;
  display: flex;
  align-items: center;
  position: relative;
}

.dashboard-button.editaddress.no-after {
  padding-left: 12px;
  color: white !important;
  background-color: #11a0ef;
  border: none !important;
}

.dashboard-button.editaddress.no-after i {
  margin-left: 0;
  background: none;
}

/*end map */

.top-bar-shop {
  margin: 16px 0px;
  position: relative;
  display: none;
}

.top-bar-shop-box {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: space-between;
}

.top-bar-shop-item {
  display: flex;
  flex-direction: column;
  width: calc(var(--widthdashboard) / 8);
  max-width: 57px;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

.top-bar-shop-title {
  color: var(--basecolor);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  font-weight: 400;
}

.top-bar-shop-icon {
  width: calc(var(--widthdashboard) / 8);
  height: calc(var(--widthdashboard) / 8);
  max-width: 57px;
  max-height: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--basecolor);
  background-color: var(--basecolorshadowback);
  border-radius: 50%;
}

.top-bar-shop-icon i {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

.top-bar-shop-item.active .top-bar-shop-icon {
  background-color: var(--basecolor);
  color: white;
}

.top-bar-shop-item.active .top-bar-shop-title {
  color: var(--basecolor);
}

.top-bar-shop-line {
  border-top: 1px dashed var(--basecolor);
  position: absolute;
  top: min(calc(var(--widthdashboard) / 16), 28px);
  left: 0;
  width: 100%;
  z-index: -1;
}

.back-to-app {
  width: 24px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: end;
  color: #444;
  cursor: pointer;
}

.back-to-app i {
  font-size: 16px;
  width: 16px;
  height: 16px;
  display: flex;
}

.calories-column {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0px;
  justify-content: center;
}

.calories-row {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.calories-container {
  padding: 3px;
  width: fit-content;
  background: var(--basecolorshadowback);
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calories-container.first {
  background: #fcdade;
}

.calories-container .calories-content {
  display: flex;
  flex-direction: row;
  direction: rtl;
  text-align: right;
  gap: 4px;
  align-items: center;
  background: white;
  border-radius: 22px;
  padding: 4px 4px 4px 16px;
}

.calories-container .calories-content .calories-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--basecolorshadowback);
  border-radius: 16px;
}

.calories-container.first .calories-content .calories-icon {
  background-color: #fcdade;
}

.calories-container .calories-content .calories-icon i {
  font-size: 16px;
  color: var(--basecolor);
  width: 16px;
  height: 16px;
}

.calories-container.first .calories-content .calories-icon i {
  color: #ef394e;
}

.calories-container .calories-content .calories-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.calories-container .calories-content .calories-info .calories-title {
  font-size: 11px;
  color: #888;
  line-height: 1;
  display: block;
}

.calories-container.first .calories-content .calories-info .calories-title {
  display: none;
}

.calories-container .calories-content .calories-info .calories-value-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  color: var(--basecolor);
}

.calories-container.first
  .calories-content
  .calories-info
  .calories-value-container {
  color: #ef394e;
}

.calories-container
  .calories-content
  .calories-info
  .calories-value-container
  .calories-value-text {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}

.calories-container
  .calories-content
  .calories-info
  .calories-value-container
  .calories-value-params {
  font-size: 10px;
  line-height: 1;
}

.working-slot {
  direction: rtl;
  padding: 12px;
  margin: 12px;
  border-radius: 8px;
  border: 1px solid var(--basecolor);
  text-align: right;
  background: var(--basecolorshadowback);
  color: var(--basecolor);
}

.working-slot.nomargin {
  margin: 12px 0px 0px;
}

.working-slot-title {
  font-weight: 400;
  margin-bottom: 6px;
}

.working-slot-text {
  font-weight: 300;
  font-size: 14px;
}

.working-slot-text b {
  font-weight: bold;
}

.order-live {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background-color: #fff;
  border: 0 solid #e9e9e9;
  border-radius: 8px;
  padding: 12px;
  overflow: visible;
  margin-bottom: 12px;
}

.order-live .order-live-detail {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: start;
}

.order-live .order-live-detail .label-main {
  font-weight: 500;
}

.order-live .order-live-detail .label-adress {
  font-size: 14px;
  text-align: right;
}

.order-live .order-live-bar {
  position: relative;
  width: 100%;
  margin-top: 8px;
}

.order-live .order-live-bar .order-live-bar-line {
  position: absolute;
  top: 35px;
  height: 1px;
  background-color: var(--basecolorshadow);
  z-index: 0;
}

.order-live .order-live-bar .order-live-bar-line .order-live-bar-line-active {
  position: absolute;
  top: -1px;
  right: 0;
  height: 2px;
  width: 0;
  background-color: var(--basecolor);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.order-live .order-live-bar .order-live-bar-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  z-index: 1;
}

.order-live .order-live-bar .order-live-bar-content .order-live-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.order-live
  .order-live-bar
  .order-live-bar-content
  .order-live-bar-item
  .order-live-bar-item-title {
  font-size: 12px;
  color: var(--basecolorshadow);
  height: 21px;
}

.order-live
  .order-live-bar
  .order-live-bar-content
  .order-live-bar-item.active
  .order-live-bar-item-title {
  color: var(--basecolor);
  font-weight: 500;
}

.order-live
  .order-live-bar
  .order-live-bar-content
  .order-live-bar-item.active
  .order-live-bar-item-icon {
  background-color: var(--basecolor);
  color: #fff;
}

.order-live
  .order-live-bar
  .order-live-bar-content
  .order-live-bar-item
  .order-live-bar-item-icon {
  background-color: var(--basecolorshadowback);
  color: var(--basecolorshadow);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  padding: 6px;
  font-size: 8px;
  transition: all 0.3s;
  display: flex;
}

.order-live
  .order-live-bar
  .order-live-bar-content
  .order-live-bar-item.active.loading
  .order-live-bar-item-icon {
  width: 28px;
  height: 28px;
}

.order-live
  .order-live-bar
  .order-live-bar-content
  .order-live-bar-item.active.loading {
  margin-top: -4px;
}

.order-live
  .order-live-bar
  .order-live-bar-content
  .order-live-bar-item
  .loader {
  display: none;
}

.order-live
  .order-live-bar
  .order-live-bar-content
  .order-live-bar-item.active.loading
  .loader {
  display: inline-block;
}

.order-live
  .order-live-bar
  .order-live-bar-content
  .order-live-bar-item.active.loading
  .fa {
  display: none;
}

.loader {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media screen and (min-width: 320px) and (max-width: 480px) {
  .order-live-product {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media screen and (min-width: 481px) and (max-width: 1024px) {
  .order-live-product {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
  .order-live-product {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

@media screen and (min-width: 1201px) and (max-width: 1440px) {
  .order-live-product {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

@media screen and (min-width: 1441px) {
  .order-live-product {
    grid-template-columns: repeat(7, 1fr) !important;
  }
}

.order-live-product {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.order-live-product .order-live-product-item {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
}

.order-live-product .order-live-product-item img {
  width: 100%;
  height: 100%;
}

.order-live .score-bar {
  margin: 0;
}

.alertMessageYek {
  background: #ff0045;
  color: white;
  direction: rtl;
  text-align: right;
  padding: 12px;
  border-radius: 8px;
  margin-top: 12px;
}

.addToCartShopBtnStyle {
  background-color: var(--basecolorshadowback);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  color: var(--basecolor);
  line-height: 0;
  font-size: 14px;
  margin-top: 8px;
  font-weight: 500;
}

.shop-new .swiper-horizontal > .swiper-pagination-bullets,
.shop-new .swiper-pagination-bullets.swiper-pagination-horizontal,
.shop-new .swiper-pagination-custom,
.shop-new .swiper-pagination-fraction {
  bottom: 5px !important;
}

.shop-new .swiper-pagination {
  background-color: #ffffff00;
  padding: 8px 0px;
  border-radius: 12px;
}

/* استایل‌های خود کانتینر بولت‌ها (باکس شفاف) */
.shop-new .swiper-pagination {
  position: absolute;
  bottom: 20px !important;
  left: 50%;
  transform: translateX(-50%);

  /* استایل‌های باکس */
  background: rgba(255, 255, 255, 0.3);
  padding: 0px 5px;
  height: 16px;
  border-radius: 8px;
  width: auto !important;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* استایل‌های خود بولت‌ها (نقاط) */
.shop-new .swiper-pagination-bullet {
  /* یکسان‌سازی اندازه */
  width: 6px;
  height: 6px;

  /* ظاهر */
  background: #ffffff; /* رنگ سفید برای غیرفعال */
  opacity: 0.6; /* کمی شفافیت */
  margin: 0 4px; /* فاصله بین بولت‌ها */
  transition:
    opacity 0.3s,
    background-color 0.3s;
}

/* استایل برای بولت فعال */
.shop-new .swiper-pagination-bullet-active {
  opacity: 1;
  background: #007aff; /* رنگ بولت فعال (مثلاً آبی Swiper) */
  transform: scale(1); /* مهم: اگر dynamic فعال بود این رو برمی‌گردونه به 1 */
}

/* اگر دایمیک فعال باشه این کلاس‌ها ممکن است اعمال شوند، بهتر است تنظیمات زیر را هم برای اطمینان قرار دهید */
.shop-new .swiper-pagination-bullets.swiper-pagination-horizontal {
  text-align: center;
}

.shop-new .swiper-pagination .swiper-pagination-bullet-active {
  background: white;
}

.shop-new
  .swiper-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet,
.shop-new
  .swiper-pagination-horizontal.swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 0px);
}

@media screen and (max-width: 767px) {
  .mySwiper.single-slide {
    padding-left: 12px;
    padding-right: 12px;
  }

  .shop-new .swiper-slide {
    border-radius: 8px;
    overflow: hidden;
  }

  .shop-new .mySwiper {
    margin-top: 12px;
  }
}

@media screen and (min-width: 768px) {
  .mySwiper.single-slide {
    padding-left: 0px;
    padding-right: 0px;
  }

  .shop-new .swiper-slide {
    border-radius: 0px;
    overflow: hidden;
  }

  .shop-new .mySwiper {
    margin-top: 0px;
  }
}

.shop-new .swiper-slide {
  cursor: pointer;
}

.mySwiper.single-slide .swiper-pagination {
  display: none;
}

.clearCart {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
}

.clearCart .buttonClear {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ef394e;
  background-color: #ef394e15;
  border-radius: 8px;
  margin-right: 8px;
}

.clearCart .buttonClear * {
  border-color: #ef394e !important;
  border-bottom-color: transparent !important;
}

.clearCart .buttonClear i {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

.empty-cartlist {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}

.empty-cartlist img {
  width: 100%;
}

.empty-cartlist a {
  color: var(--basecolor) !important;
  font-weight: 500;
  background-color: var(--basecolorshadowback);
  padding: 10px 16px;
  border-radius: 8px;
}

.payment-payment-box {
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.payment-payment-item-top-title {
  margin-bottom: 12px;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  direction: rtl;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.arrow-btn-report {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: #fafafa;
  border: 1px solid #f0f0f0 !important;
  color: #555;
  cursor: pointer;
}

.arrow-btn-report.disable {
  color: #ddd;
  cursor: not-allowed;
}

.arrow-btn-report i {
  font-size: 15px;
  width: 15px;
  height: 15px;
}

.payment-payment-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background-color: #fafafa;
  border: 1px solid #f0f0f0 !important;
  border-radius: 8px;
}

.payment-payment-item-title {
  font-size: 12px;
  text-align: center;
}

.payment-payment-item-value {
  font-weight: 500;
  text-align: center;
}

.input-group {
  position: relative;
  margin-top: 12px;
}

.input-group input,
.input-group select,
.input-group textarea {
  width: 100%;
  font-weight: 400;
}

.input-group .label {
  position: absolute;
  right: 12px;
  top: 18px;
  transition: 0.3s;
  pointer-events: none;
  margin: 0px;
  font-size: 14px;
}

.input-group textarea + label {
  top: 12px !important;
}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label,
.input-group select:focus + label,
.input-group select:valid + label,
.input-group textarea:focus + label,
.input-group textarea:not(:placeholder-shown) + label,
.input-group.active div + label {
  top: 6px;
  font-size: 12px;
}

.input-group .boxdesign {
  padding: 28px 12px 6px;
}

input.boxdesign,
select.boxdesign,
textarea.boxdesign {
  border: 0px solid #eee !important;
}

.input-group.group-border input.boxdesign {
  border: 1px solid #ccc !important;
}

.input-group input:required {
  /*border-left: 4px solid red;*/
}

.payment-top .divider,
#shipping-box-back .divider {
  width: calc(100% - 30px);
  margin: 12px 0px;
  height: 1px;
  max-width: 100%;
}

#shipping-box-back .divider {
  margin: 12px 0px 0px;
}

.header-address-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.header-address-title .title {
  font-weight: 500;
  font-size: 14px;
}

.header-address-title .changeAddress {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--buttonlinecolor);
  font-weight: 500;
  font-size: 14px;
  direction: ltr;
}

.header-address-title .changeAddress:hover {
  color: var(--buttonlinecolorhover);
}

.header-address-title .changeAddress i {
  width: 10px;
  height: 10px;
  font-size: 10px;
  margin-right: 6px;
}

.header-address-info {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.header-address-info .icon {
  width: 18px;
  font-size: 18px;
  height: 18px;
  color: #777;
}

.header-address-info .info {
  width: 100%;
  display: flex;
  align-items: start;
  flex-direction: column;
}

.header-address-info .info .addressTitle {
  font-weight: 400;
  font-size: 14px;
}

.header-address-info .info .addressValue {
  font-weight: 300;
  font-size: 13px;
  color: #666;
  white-space: normal;
  text-align: right;
  width: 100%;
}

.grayspiner {
  display: flex;
  align-content: center;
  justify-content: center;
}

.title-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.title-btn-a {
  font-size: 11px;
  background: var(--buttonlinecolorback);
  color: var(--buttonlinecolor);
  padding: 8px 8px;
  border-radius: 6px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

/* =====================================================================
 *  مواد اولیه و گزارش فروش  —  استایل مینیمال
 *  به انتهای فایل css اصلی اضافه شود
 * ===================================================================== */

:root {
  --ing-line: rgba(128, 128, 128, 0.14);
  --ing-soft: #ffffff;
  --ing-soft2: rgba(128, 128, 128, 0.14);
  --ing-accent: var(--basecolor);
  --ing-danger: #e2506a;
  --ing-muted: rgba(128, 128, 128, 0.95);
}

/* ---------------------------------------------------------------------
 *  عمومی
 * --------------------------------------------------------------------- */
.ing-cards,
.ing-card,
.sr-form,
.sr-card,
.sr-result,
.sr-note {
  direction: rtl;
  text-align: right;
}

.ing-pagehint {
  display: block;
  font-size: 12px;
  line-height: 22px;
  color: var(--ing-muted);
  margin: 12px 0px;
  direction: rtl;
  text-align: right;
}

.ing-pagehint b {
  font-weight: 700;
}

/* ---------------------------------------------------------------------
 *  کارت هر ترکیب
 * --------------------------------------------------------------------- */
.ing-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ing-card {
  border: 1px solid var(--ing-line);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.ing-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.ing-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ing-soft);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11.5px;
  line-height: 1;
}

.ing-chip b {
  font-weight: 400;
  opacity: 0.55;
}

/* ---------------------------------------------------------------------
 *  ردیف ماده اولیه
 * --------------------------------------------------------------------- */
.ing-rows {
  display: flex;
  flex-direction: column;
}

.ing-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0px;
  border-bottom: 1px solid var(--ing-line);
}

.ing-rows .ing-row:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

.ing-row-name {
  flex: 1 1 auto;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ing-input-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  background: var(--ing-soft);
  border: 1px solid transparent;
  border-radius: 10px;
  height: 40px;
  padding: 0px 10px;
  transition:
    border-color 0.15s,
    background 0.15s;
}

.ing-input-wrap:focus-within {
  border-color: var(--ing-accent);
}

.ing-input {
  width: 82px;
  height: 38px;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  direction: ltr;
  padding: 0px;
  color: inherit;
}

.ing-input::placeholder {
  font-weight: 400;
  opacity: 0.35;
}

.ing-input-suffix {
  font-size: 11px;
  opacity: 0.55;
  padding-right: 8px;
  border-right: 1px solid var(--ing-line);
  margin-right: 8px;
  white-space: nowrap;
  min-width: 34px;
  text-align: center;
}

.ing-row-del {
  flex: 0 0 28px;
  height: 28px;
  line-height: 26px;
  text-align: center;
  border-radius: 50%;
  background: var(--ing-soft);
  color: var(--ing-danger);
  font-size: 17px;
  cursor: pointer;
  opacity: 0.85;
}

.ing-row-del:active {
  opacity: 1;
}

.ing-empty {
  font-size: 12px;
  color: var(--ing-muted);
  padding: 14px 0px;
  text-align: center;
}

/* دکمه افزودن */
.ing-add {
  display: block;
  margin-top: 10px;
  padding: 11px 0px;
  border: 1px dashed var(--ing-line);
  border-radius: 10px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ing-accent);
  cursor: pointer;
  transition: background 0.15s;
}

.ing-add:active {
  background: var(--ing-soft);
}

/* صفحه خالی */
.ing-empty-page {
  border: 1px solid var(--ing-line);
  border-radius: 14px;
  padding: 26px 18px;
  text-align: center;
  direction: rtl;
}

.ing-empty-page-title {
  font-size: 14px;
  margin-bottom: 6px;
}

.ing-empty-page-text {
  font-size: 12px;
  color: var(--ing-muted);
  margin-bottom: 12px;
}

/* واحد های پیشنهادی */
.ing-unit-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  direction: rtl;
}

.ing-unit-suggest a {
  padding: 6px 13px;
  font-size: 11.5px;
  border-radius: 20px;
  background: var(--ing-soft);
  cursor: pointer;
}

.ing-unit-suggest a.active {
  background: var(--ing-accent);
  color: #fff;
}

/* =====================================================================
 *  باکس انتخاب مواد اولیه
 * ===================================================================== */
.ing-picker {
  display: none;
  position: fixed;
  inset: 0px;
  z-index: 10000;
  direction: rtl;
}

.ing-picker-back {
  position: absolute;
  inset: 0px;
  background: rgba(0, 0, 0, 0.45);
}

.ing-picker-box {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: 0px auto;
  max-width: 520px;
  height: 74vh;
  display: flex;
  flex-direction: column;
  background: var(--boxback, #fff);
  color: inherit;
  border-radius: 20px 20px 0px 0px;
  overflow: hidden;
  box-shadow: 0px -8px 30px rgba(0, 0, 0, 0.18);
}

.ing-picker-handle {
  width: 38px;
  height: 4px;
  border-radius: 4px;
  background: var(--ing-soft2);
  margin: 10px auto 4px auto;
  flex: 0 0 auto;
}

.ing-picker-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 12px 18px;
  font-size: 14px;
}

.ing-picker-all {
  font-size: 12px;
  color: var(--ing-accent);
  cursor: pointer;
}

.ing-picker-search {
  flex: 0 0 auto;
  padding: 0px 18px 12px 18px;
}

.ing-picker-search input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--ing-line);
  border-radius: 12px;
  background: var(--ing-soft);
  outline: none;
  padding: 0px 14px;
  font-size: 13px;
  color: inherit;
  direction: rtl;
  text-align: right;
}

.ing-picker-search input:focus {
  border-color: var(--ing-accent);
}

.ing-picker-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0px 18px;
  -webkit-overflow-scrolling: touch;
}

.ing-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 0px;
  border-bottom: 1px solid var(--ing-line);
  cursor: pointer;
}

.ing-picker-list .ing-picker-item:last-child {
  border-bottom: none;
}

.ing-picker-check {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--ing-soft2);
  border-radius: 6px;
  position: relative;
  transition: all 0.15s;
}

.ing-picker-item.selected .ing-picker-check {
  background: var(--ing-accent);
  border-color: var(--ing-accent);
}

.ing-picker-item.selected .ing-picker-check:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 7px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0px 2px 2px 0px;
  transform: rotate(45deg);
}

.ing-picker-name {
  flex: 1 1 auto;
}

.ing-picker-sub {
  flex: 0 0 auto;
  font-size: 12px;
  opacity: 0.5;
}

.ing-picker-foot {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 12px 18px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--ing-line);
}

.ing-picker-foot a {
  flex: 1 1 0;
  text-align: center;
  padding: 13px 0px;
  border-radius: 12px;
  cursor: pointer;
}

.ing-picker-foot .cancel {
  background: var(--ing-soft);
}

.ing-picker-foot .confirm {
  background: var(--ing-accent);
  color: #fff;
}

/* =====================================================================
 *  گزارش فروش
 * ===================================================================== */
.sr-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 12px;
}

.sr-form-row {
  display: flex;
  flex-direction: column;
}

.sr-form-dates {
  flex-direction: row;
  gap: 10px;
  position: relative;
}

.sr-form-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0px;
}

.sr-label {
  font-size: 12px;
  margin-bottom: 8px;
  opacity: 0.75;
}

.sr-label.required:after {
  content: " *";
  color: var(--ing-danger);
}

.sr-hint {
  display: block;
  font-size: 11.5px;
  color: var(--ing-muted);
  margin-top: -8px;
  direction: rtl;
  text-align: right;
}

.sr-textinput {
  width: 100%;
  height: 46px;
  border: 1px solid var(--ing-line);
  border-radius: 12px;
  background: var(--ing-soft);
  outline: none;
  padding: 0px 14px;
  font-size: 13px;
  color: inherit;
  direction: rtl;
  text-align: right;
}

.sr-textinput:focus {
  border-color: var(--ing-accent);
}

/* سگمنت نوع فروش */
.sr-segment {
  display: flex;
  background: var(--ing-soft);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}

.sr-segment a {
  flex: 1 1 0;
  text-align: center;
  padding: 10px 0px;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.15s;
  color: inherit;
}

.sr-segment a.active {
  background: var(--ing-accent);
  color: #fff;
}

/* select2 هماهنگ با طراحی */
.sr-form .select2-container--default .select2-selection--multiple {
  min-height: 46px;
  border: 1px solid var(--ing-line) !important;
  border-radius: 8px !important;
  background: var(--ing-soft) !important;
  padding: 4px 6px;
}

.sr-form
  .select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  background: var(--ing-accent) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 13px;
  padding: 4px 4px 4px 20px;
  margin: 4px 4px 0px 0px;
}

.select2-container--default .select2-search--inline .select2-search__field {
  font-family: unset;
  margin-right: 6px;
}

/* کارت گزارش */
.sr-card {
  border: 1px solid var(--ing-line);
  border-radius: 14px;
  padding: 14px;
  margin-top: 12px;
}

.sr-card-head {
  font-size: 13.5px;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ing-line);
}

.sr-item {
  padding: 14px 0px;
  border-bottom: 1px solid var(--ing-line);
}

.sr-card .sr-item:last-child {
  border-bottom: none;
  padding-bottom: 2px;
}

.sr-item-title {
  font-size: 11.5px;
  color: var(--ing-muted);
  margin-bottom: 10px;
}

.sr-fields {
  display: flex;
  gap: 10px;
}

.sr-field {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0px;
}

.sr-field-label {
  font-size: 11px;
  opacity: 0.6;
  margin-bottom: 6px;
}

.sr-input-wrap {
  display: flex;
  align-items: center;
  background: var(--ing-soft);
  border: 1px solid transparent;
  border-radius: 10px;
  height: 42px;
  padding: 0px 10px;
}

.sr-input-wrap:focus-within {
  border-color: var(--ing-accent);
}

.sr-input-wrap.lock {
  border: 1px dashed var(--ing-line);
}

.sr-input {
  flex: 1 1 auto;
  min-width: 0px;
  height: 40px;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  direction: ltr;
  padding: 0px;
  color: inherit;
}

.sr-input-wrap.lock .sr-input {
  opacity: 0.7;
}

.sr-input::placeholder {
  font-weight: 400;
  opacity: 0.3;
}

.sr-input-suffix {
  flex: 0 0 auto;
  font-size: 10.5px;
  opacity: 0.5;
}

/* دکمه محاسبه */
.sr-mainbtn {
  display: block;
  margin: 12px 0px 4px 0px;
  padding: 15px 0px;
  border-radius: 12px;
  background: var(--ing-accent);
  color: #fff;
  text-align: center;
  font-size: 13.5px;
  cursor: pointer;
}

/* نتیجه */
.sr-result {
  border: 1px solid var(--ing-line);
  border-radius: 14px;
  padding: 4px 14px 10px 14px;
  margin-top: 12px;
}

.sr-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0px 12px 0px;
  border-bottom: 1px solid var(--ing-line);
  font-size: 13.5px;
  font-weight: 600;
}

.sr-result-sum {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.6;
}

.sr-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 0px;
  border-bottom: 1px solid var(--ing-line);
}

.sr-result .sr-result-row:last-child {
  border-bottom: none;
}

.sr-result-name {
  flex: 1 1 auto;
  font-size: 13px;
}

.sr-result-value {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
  direction: ltr;
}

.sr-result-unit {
  flex: 0 0 44px;
  font-size: 11px;
  opacity: 0.5;
  text-align: left;
}

.sr-empty {
  font-size: 12px;
  color: var(--ing-muted);
  text-align: center;
  padding: 20px 0px;
}

/* هشدار ها */
.sr-note {
  border: 1px solid rgba(226, 80, 106, 0.3);
  background: rgba(226, 80, 106, 0.06);
  border-radius: 14px;
  padding: 12px;
  margin-top: 12px;
}

.sr-note-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ing-danger);
  margin-bottom: 6px;
}

.sr-note-text {
  font-size: 11.5px;
  color: var(--ing-muted);
  line-height: 20px;
  margin-bottom: 8px;
}

.sr-note-item {
  font-size: 11.5px;
  padding: 7px 0px;
  border-top: 1px solid rgba(226, 80, 106, 0.18);
  line-height: 20px;
}

.sr-note-item span {
  opacity: 0.6;
}
/* ---------------------------------------------------------------------------
   ورود با رمز یکبار مصرف
   --------------------------------------------------------------------------- */

/* لینک‌های کمکی زیر هم، نه کنار هم */
.login-alt-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  direction: rtl;
  gap: 10px;
  margin-top: 14px;
  padding: 0 8px;
}

.login-alt-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--basecolor) !important;
  cursor: pointer;
  transition: 0.2s;
  line-height: 1;
}

.login-alt-link.muted {
  color: #8a8a8a !important;
  font-weight: 400;
}

.login-alt-link:hover {
  opacity: 0.7;
}

.login-alt-link.disabled {
  color: #b4b4b4 !important;
  cursor: default;
  pointer-events: none;
}

.login-alt-link i {
  display: flex;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

/* چهار خانه‌ی کد */
.otp-boxes {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 12px 0 8px 0;
}

.otp-box {
  width: 58px;
  height: 62px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: #333;
  background: white;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  outline: none;
  transition: 0.18s ease;
  font-variant-numeric: tabular-nums;
  caret-color: var(--basecolor);
  -moz-appearance: textfield;
}

.otp-box::-webkit-outer-spin-button,
.otp-box::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.otp-box.filled {
  border-color: var(--basecolor);
}

.otp-box:focus {
  border-color: var(--basecolor);
  box-shadow: 0 0 0 0.2rem var(--basecolorshadow);
}

.otp-hint {
  text-align: center !important;
  justify-content: center;
  margin-top: 4px;
}

/* نوار پیشرفت انتظار تا ارسال مجدد */
.otp-progress {
  height: 4px;
  width: 100%;
  background: var(--progress-track);
  border-radius: 99px;
  overflow: hidden;
  margin: 14px 0 2px 0;
}

.otp-progress.hide {
  display: none;
}

.otp-progress-fill {
  height: 100%;
  width: 100%;
  border-radius: 99px;
  background: var(--progress-fill);
  transition: width 1s linear;
}

/* ---------------------------------------------------------------------------
   نوار «تا رسیدن به حداقل سفارش» و دکمه‌ی رفتن به سبد خرید
   ---------------------------------------------------------------------------
   بالای نوار ناوبری ثابت (ارتفاع 67px) می‌نشیند و عرضش با محتوای صفحه یکی است.
   دو حالت دارد: زیر حد نصاب نوار پیشرفت، بالای حد نصاب دکمه‌ی شیشه‌ای.
   --------------------------------------------------------------------------- */

.cart-goal {
  position: fixed;
  /* نوار ناوبری شناور است (12 + 58) */
  bottom: 70px;
  right: calc((100vw - min(var(--widthdashboard), 450px)) / 2);
  width: min(var(--widthdashboard), 450px);
  z-index: 998;
  direction: rtl;
  padding: 0px 0px 12px 0px;
  box-sizing: border-box;
  pointer-events: none;
  animation: cart-goal-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.cart-goal > * {
  pointer-events: auto;
}

@keyframes cart-goal-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- حالت اول: هنوز به حداقل نرسیده --- */

.cart-goal-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  padding: 0 2px;
}

.cart-goal-text {
  font-size: 12.5px;
  font-weight: 500;
  color: #4a4a4a;
  line-height: 1;
}

.cart-goal-text .currency {
  font-size: 10.5px;
  font-weight: 400;
  opacity: 0.65;
  margin: 0 2px;
}

.cart-goal-percent {
  font-size: 12px;
  font-weight: 600;
  color: var(--basecolor);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.cart-goal-track {
  height: 6px;
  width: 100%;
  background: var(--progress-track);
  border-radius: 99px;
  overflow: hidden;
}

.cart-goal-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--progress-fill);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* نوار پیشرفت روی محصولات شناور است، پس کارت مات خودش را دارد
   (گرادیان محو قبلی شفاف بود و متن روی محصولات پشتش می‌افتاد) */
.cart-goal-bar {
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 14px;
  padding: 15px;
  box-shadow: 0 4px 18px -8px rgba(0, 0, 0, 0.18);
}

/* --- حالت دوم: به حداقل رسیده، دکمه‌ی شیشه‌ای --- */

.cart-goal-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 16px;
  cursor: pointer;
  text-decoration: none;
  /* رنگ سازمانی با شفافیت + بلور پس‌زمینه */
  background: var(--basecolor);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 6px 22px -6px var(--basecolorshadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #fff !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.cart-goal-btn:active {
  transform: scale(0.985);
  box-shadow:
    0 3px 12px -6px var(--basecolorshadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.cart-goal-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
}

.cart-goal-btn-icon i {
  display: flex;
  font-size: 15px;
  line-height: 1;
}

.cart-goal-btn-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.cart-goal-btn-price {
  margin-right: auto;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cart-goal-btn-price .currency {
  font-size: 10.5px;
  font-weight: 400;
  opacity: 0.8;
  margin-right: 3px;
}

/* دکمه‌ی «برو بالا» فقط وقتی نوار سبد هست بالاتر می‌رود.
   باکس داخل #cart-goal-slot رندر می‌شود، پس وجودِ محتوا سنجیده می‌شود؛
   کلاس has-goal را هم جاوااسکریپت ست می‌کند تا در مرورگرهای بدون :has کار کند. */
#cart-goal-slot:has(.cart-goal) ~ #scrollToTop,
#cart-goal-slot.has-goal ~ #scrollToTop {
  bottom: 166px;
}

/* بدون نوار سبد هم دکمه باید بالای نوار ناوبری شناور بماند */
body.has-appbar #scrollToTop {
  bottom: 92px;
}

/* انتهای لیست محصولات پشت نوار سبد پنهان نشود.
   سلکتور عمدا به .shop-new محدود شده: کلاس productlist در صفحه‌ی پرداخت هم
   استفاده می‌شود و بدون این قید، padding آنجا هم اعمال می‌شد. */
.shop-new .productlist:has(~ #cart-goal-slot .cart-goal),
body:has(#cart-goal) .shop-new .productlist,
.has-goal-page .shop-new .productlist {
  padding-bottom: 70px;
}

/* ---------------------------------------------------------------------------
   نشانه‌گذاری فیلد خطادار در فرم‌ها
   ---------------------------------------------------------------------------
   سرور نام فیلد را در پاسخ می‌فرستد (api::ret_field) و showFieldError این
   کلاس‌ها را روی کادر مربوطه می‌گذارد، تا کاربر در فرم بلند ثبت نام دقیقا
   ببیند کدام کادر مشکل دارد.
   --------------------------------------------------------------------------- */

.field-error .boxdesign,
.field-error.boxdesign,
.field-error select.boxdesign {
  border: 1px solid var(--button-red) !important;
  box-shadow: 0 0 0 0.2rem rgba(239, 57, 78, 0.12);
}

.field-error .label {
  color: var(--button-red) !important;
}

.field-error-msg {
  color: var(--button-red) !important;
  display: flex;
  animation: field-error-in 0.22s ease;
}

@keyframes field-error-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------------------
   دعوت به افزودن آدرس در صفحه‌ی سبد خرید
   ---------------------------------------------------------------------------
   نداشتن آدرس تنها مانعی است که خودِ مشتری می‌تواند رفعش کند، پس عمدا به شکل
   دعوت طراحی شده نه هشدار قرمز مثل بقیه‌ی موانع.
   --------------------------------------------------------------------------- */

.cart-needaddress {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  direction: rtl;
  margin: 12px 0;
  padding: 14px;
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 14px;
  box-shadow: 0 4px 18px -10px rgba(0, 0, 0, 0.16);
}

.cart-needaddress-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--basecolorshadowback);
  color: var(--basecolor);
}

.cart-needaddress-icon i {
  display: flex;
  font-size: 17px;
  line-height: 1;
}

.cart-needaddress-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cart-needaddress-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #333;
  line-height: 1.5;
}

.cart-needaddress-text {
  font-size: 12px;
  color: #8a8a8a;
  line-height: 1.6;
}

.cart-needaddress-btn {
  margin-right: auto;
  flex-shrink: 0;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  color: var(--basecolor) !important;
  background: var(--basecolorshadowback);
  transition: 0.18s ease;
}

.cart-needaddress-btn:active {
  transform: scale(0.97);
}

/* ---------------------------------------------------------------------------
   نوار اعلام نسخه‌ی جدید
   ---------------------------------------------------------------------------
   بالای صفحه و روی همه چیز می‌نشیند. تا وقتی کلاس show نگیرد کاملا از جریان
   خارج است تا روی هیچ عنصری اثر نگذارد.
   --------------------------------------------------------------------------- */

.app-update {
  position: fixed;
  top: 0;
  right: 50%;
  transform: translate(50%, -140%);
  width: min(calc(var(--widthdashboard) - 24px), 426px);
  z-index: 100000;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  direction: rtl;
  margin-top: 12px;
  padding: 12px 14px;
  box-sizing: border-box;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 34px -12px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s ease;
}

.app-update.show {
  transform: translate(50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.app-update-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--basecolorshadowback);
  color: var(--basecolor);
}

.app-update-icon i {
  display: flex;
  font-size: 15px;
  line-height: 1;
}

.app-update-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.app-update-title {
  font-size: 13px;
  font-weight: 600;
  color: #2c2c2c;
  line-height: 1.5;
}

.app-update-sub {
  font-size: 11px;
  color: #8f8f8f;
  line-height: 1.6;
}

.app-update-btn {
  margin-right: auto;
  flex-shrink: 0;
  padding: 8px 13px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  color: #fff !important;
  background: var(--basecolor);
  transition: 0.18s ease;
}

.app-update-btn:active {
  transform: scale(0.96);
}

.app-update-btn.loading {
  opacity: 0.65;
  pointer-events: none;
}

.app-update-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
  color: #b0b0b0;
  border-radius: 8px;
  transition: 0.18s ease;
}

.app-update-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #777;
}

.app-update-close i {
  display: flex;
  font-size: 16px;
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   پاپ آپ فروشگاه
   ---------------------------------------------------------------------------
   تصویر مربعی، متن اختیاری و یک دکمه‌ی call to action. تنظیماتش از جدول
   user_shop_popup می‌آید و فاصله‌ی نمایش سمت مرورگر نگهداری می‌شود.
   --------------------------------------------------------------------------- */

.shop-popup {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  direction: rtl;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease;
}

.shop-popup.show {
  opacity: 1;
  visibility: visible;
}

.shop-popup-back {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.shop-popup-box {
  position: relative;
  width: 100%;
  max-width: 330px;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.45);
  transform: scale(0.94) translateY(12px);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.shop-popup.show .shop-popup-box {
  transform: scale(1) translateY(0);
}

.shop-popup-close {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: 0.18s ease;
}

.shop-popup-close:hover {
  background: rgba(0, 0, 0, 0.48);
}

.shop-popup-close i {
  display: flex;
  font-size: 18px;
  line-height: 1;
}

/* تصویر همیشه مربع می‌ماند، مستقل از ابعاد فایل */
.shop-popup-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f4f4f4;
  overflow: hidden;
}

.shop-popup-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shop-popup-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px 4px 18px;
  text-align: center;
}

.shop-popup-title {
  font-size: 15px;
  font-weight: 600;
  color: #2c2c2c;
  line-height: 1.6;
}

.shop-popup-text {
  font-size: 12.5px;
  color: #8a8a8a;
  line-height: 1.9;
}

.shop-popup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 18px 18px 18px;
  padding: 13px;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: #fff !important;
  background: var(--basecolor);
  box-shadow: 0 8px 20px -8px var(--basecolorshadow);
  transition: 0.18s ease;
}

.shop-popup-btn:active {
  transform: scale(0.985);
}

body.popup-open {
  overflow: hidden;
}

/* هایلایت کوتاه روی محصولی که پاپ آپ به آن اسکرول کرده */
.product-item-container.popup-highlight {
  animation: popup-highlight 2.2s ease;
}

@keyframes popup-highlight {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  18%,
  62% {
    box-shadow: 0 0 0 3px var(--basecolorshadow);
  }
}

/* ---------------------------------------------------------------------------
   دیالوگ انتخاب آدرس / روش ارسال: هدر و دکمه‌ها ثابت، لیست اسکرول‌شونده
   ---------------------------------------------------------------------------
   پیش از این کل باکس با لیست بلند می‌شد و در حساب‌های با چند آدرس، دکمه‌های
   پایین از دسترس خارج می‌شدند.
   --------------------------------------------------------------------------- */

.shop-address-list {
  display: flex;
  flex-direction: column;
  max-height: 82vh;
  max-height: 82dvh;
  box-sizing: border-box;
}

.shop-address-list .shop-address-header {
  flex: 0 0 auto;
}

/* ناحیه‌ی اسکرول‌شونده */
.shop-address-list #addresslist,
.shop-address-list #customershipping {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  /* فضای لازم برای سایه‌ی ردیف‌ها تا زیر لبه‌ی اسکرول بریده نشود */
  padding: 4px 4px 2px 4px;
  margin: 0 -4px;
}

.shop-address-list .button-bottom {
  flex: 0 0 auto;
  margin: 16px 0px !important;
}

/* در صفحه‌های بلند، جداکننده‌ی نرم بین لیست و دکمه‌ها */
.shop-address-list .button-bottom::before {
  content: "";
  position: absolute;
  top: -14px;
  right: 0;
  left: 0;
  height: 1px;
  background: #f0f0f0;
}

/* اگر عنوان، متن و دکمه هر سه خالی باشند فقط تصویر می‌ماند؛
   در آن حالت تصویر باید گوشه‌های پایین باکس را هم پر کند */
.shop-popup-image:last-child img {
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

/* بدون دکمه ولی با متن: فاصله‌ی پایین از دست نرود */
.shop-popup-body:last-child {
  padding-bottom: 18px;
}

/* ===========================================================================
 *  نوار ناوبری پایین — شیشه‌ای و شناور
 * ===========================================================================
 *  نوار یک بار به body منتقل می‌شود (appBarSync) و بعد از آن رندر دوباره
 *  نمی‌شود، پس انیمیشن باز شدن برچسبِ آیتم فعال بین صفحه‌ها حفظ می‌ماند.
 *
 *  به‌جای چسبیدن به لبه‌ی پایین، کمی بالاتر شناور است تا محتوای صفحه از
 *  زیرش دیده شود و حس شیشه‌ای واقعی پیدا کند.
 * ========================================================================= */

.bottom-header.ab-bar {
  position: fixed;
  bottom: 12px;
  /* عرض و موقعیت دقیقا مثل .cart-goal تا در موبایل و دسکتاپ هم‌راستا باشند */
  right: calc((100vw - min(var(--widthdashboard), 450px)) / 2);
  left: auto;
  transform: none;
  width: min(var(--widthdashboard), 450px);
  height: auto;
  padding: 7px;
  box-sizing: border-box;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  direction: rtl;

  border: 1px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 22px;

  /* شیشه: پس‌زمینه‌ی نیمه‌شفاف + بلور قوی، تا لیست از زیرش دیده شود */
  background: rgba(252, 252, 253, 0.72);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);

  box-shadow:
    0 8px 32px -10px rgba(16, 24, 40, 0.22),
    0 2px 8px -4px rgba(16, 24, 40, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* لایه‌بندی:
       1001 overlay بارگذاری  →  نوار باید رویش باشد تا انیمیشن دیده شود
       1002 dialog-back        →  دیالوگ باید روی نوار باشد
       1010 filter-back        →  مودال‌ها روی نوار
       9999 shop-layer         →  لایه‌ی جستجو روی همه
       پس نوار دقیقا بین overlay و dialog می‌نشیند. */
  z-index: 1001;
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.24s ease;
}

/* مرورگرهایی که بلور ندارند، پس‌زمینه‌ی مات‌تر می‌گیرند تا خوانا بماند */
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .bottom-header.ab-bar {
    background: rgba(252, 252, 253, 0.97);
  }
}

.bottom-header.ab-bar.ab-hidden {
  transform: translateY(150%);
  opacity: 0;
  pointer-events: none;
}

/* --- آیتم --- */

.bottom-header.ab-bar .ab-item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex: 0 1 auto;
  min-width: 46px;
  height: 44px;
  padding: 0 13px;
  border-radius: 16px;
  cursor: pointer;
  color: #8b8f98;
  background: transparent;
  /* همه‌ی ویژگی‌ها با یک منحنی و یک زمان حرکت می‌کنند تا قرص، پدینگ و
       برچسب کاملا هماهنگ باز شوند و پرش دیده نشود */
  transition:
    background-color 0.38s cubic-bezier(0.32, 0.72, 0, 1),
    color 0.38s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.38s cubic-bezier(0.32, 0.72, 0, 1),
    padding 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: padding, background-color;
}

/* پرش مقیاس حذف شد: با هم‌زمان شدنش با باز شدن قرص، آیتم اول کوچک و بعد
   ناگهان بزرگ می‌شد. بازخورد لمس حالا فقط با روشن شدن قرص است. */

.bottom-header.ab-bar .ab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bottom-header.ab-bar .ab-icon i {
  display: flex;
  font-size: 19px;
  line-height: 1;
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
}

/* --- برچسب: بسته است تا آیتم فعال شود --- */

.bottom-header.ab-bar .ab-label {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  margin: 0;
  transform: translateX(6px);
  transition:
    max-width 0.38s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.26s ease 0.08s,
    margin 0.38s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
}

/* --- حالت فعال: قرص رنگی با برچسب باز --- */

.bottom-header.ab-bar .ab-item.on {
  background: var(--basecolor);
  color: #fff;
  padding: 0 16px;
  box-shadow: 0 6px 16px -6px var(--basecolorshadow);
}

.bottom-header.ab-bar .ab-item.on .ab-icon,
.bottom-header.ab-bar .ab-item.on .ab-icon i,
.bottom-header.ab-bar .ab-item.on .ab-label {
  color: #fff;
}

.bottom-header.ab-bar .ab-item.on .ab-label {
  max-width: 120px;
  opacity: 1;
  /* در RTL برچسب سمت چپ آیکون می‌نشیند */
  margin-right: 8px;
  transform: translateX(0);
}

.bottom-header.ab-bar .ab-item.on .ab-icon i {
  transform: scale(1.04);
}

/* --- نشانگر سبد خرید --- */

.bottom-header.ab-bar .cart-count {
  position: absolute;
  top: 5px;
  /* در RTL آیکون سمت راست قرص است، پس بج هم به راست لنگر می‌شود تا با باز
       شدن برچسب روی متن نیفتد */
  right: 9px;
  left: auto;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--button-red);
}

.bottom-header.ab-bar .ab-item.on .cart-count {
  background: #fff;
  color: var(--basecolor);
  box-shadow: 0 0 0 2px var(--basecolor);
}

.bottom-header.ab-bar .cart-count.hide {
  display: none;
}

/* فضای پایین صفحه تا محتوا زیر نوار پنهان نشود */
body.has-appbar .bottom-height,
body.has-appbar .bottom-height.product-bottom {
  height: 86px;
}

/* ===========================================================================
 *  نوار پایین صفحه‌ی سبد خرید و محصول — هم‌سبک نوار ناوبری شناور
 * ===========================================================================
 *  با شناور شدن نوار ناوبری، این نوار که به لبه می‌چسبید و پس‌زمینه‌ی سفید
 *  توپر داشت ناهماهنگ شده بود. حالا همان کارت شیشه‌ای است، با همان عرض و
 *  همان فاصله‌ی ۱۲ پیکسل.
 *
 *  در صفحه‌هایی که این نوار هست، appBarAutoVisible نوار ناوبری را کنار
 *  می‌برد، پس این نوار خودش پایین‌ترین عنصر است.
 * ========================================================================= */

.cartlist .product-bottom-price,
.product .product-bottom-price {
  bottom: 12px;
  right: calc((100vw - min(var(--widthdashboard), 450px)) / 2);
  left: auto;
  width: min(var(--widthdashboard), 450px);
  height: auto;
  min-height: 62px;
  padding: 10px 12px;
  box-sizing: border-box;

  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 20px;

  background: rgba(252, 252, 253, 0.78);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);

  box-shadow:
    0 8px 32px -10px rgba(16, 24, 40, 0.22),
    0 2px 8px -4px rgba(16, 24, 40, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);

  gap: 10px;
  z-index: 1000;
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .cartlist .product-bottom-price,
  .product .product-bottom-price {
    background: rgba(252, 252, 253, 0.97);
  }
}

.cartlist .product-bottom-price .product-price,
.product .product-bottom-price .product-price {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

/* دکمه‌ی اصلی: هم‌شکل دکمه‌ی «رفتن به سبد خرید» */
.cartlist .product-bottom-price .cartlist-bottun,
.product .product-bottom-price .cartlist-bottun {
  height: 44px;
  width: auto;
  min-width: 142px;
  flex: 0 0 auto;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 18px -8px var(--basecolorshadow);
}

.cartlist .product-bottom-price .cartlist-bottun:active,
.product .product-bottom-price .cartlist-bottun:active {
  transform: scale(0.985);
}

.cartlist .product-bottom-price .cartlist-bottun.closeshop,
.product .product-bottom-price .cartlist-bottun.closeshop {
  box-shadow: none;
}

/* مبلغ قابل پرداخت */
.cartlist .product-bottom-price .end-box,
.product .product-bottom-price .end-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin-right: auto;
  text-align: right;
}

.cartlist .product-bottom-price .end-box .label,
.product .product-bottom-price .end-box .label {
  font-size: 11px;
  color: #8b8f98;
  line-height: 1;
  margin: 0;
}

.cartlist .product-bottom-price .end-box .product-price-value,
.product .product-bottom-price .end-box .product-price-value {
  font-size: 15px;
  font-weight: 700;
  color: #2c2c2c;
  line-height: 1.4;
}

.cartlist .product-bottom-price .end-box .currency,
.product .product-bottom-price .end-box .currency {
  font-size: 10.5px;
  font-weight: 400;
  opacity: 0.65;
  margin-right: 3px;
}

/* فاصله‌ی انتهای محتوا تا این نوار */
.cartlist .bottom-height,
.cartlist .bottom-height.product-bottom {
  height: 90px;
}

/* ===========================================================================
 *  چیدمان پله‌ای: باکس اقدام صفحه بالای نوار ناوبری
 * ===========================================================================
 *  در سبد خرید و صفحه‌ی محصول، نوار ناوبری می‌ماند و باکس اقدام دقیقا
 *  بالای آن می‌نشیند. ارتفاع نوار ۵۸ و فاصله‌اش از پایین ۱۲ است، پس لبه‌ی
 *  بالایی‌اش روی ۷۰ قرار دارد و باکس اقدام از ۸۲ شروع می‌شود (۱۲ فاصله).
 * ========================================================================= */

/* نوار قیمت سبد خرید و محصول */
body.has-appbar .cartlist .product-bottom-price,
body.has-appbar .product .product-bottom-price {
  bottom: 82px;
}

/* دکمه‌های پایین صفحه‌ی محصول: هم‌سبک کارت شیشه‌ای، بالای نوار ناوبری */
.button-bottom.product-button {
  position: fixed;
  bottom: 12px;
  right: calc((100vw - min(var(--widthdashboard), 450px)) / 2);
  left: auto;
  width: min(var(--widthdashboard), 450px);
  height: auto;
  padding: 9px 12px;
  box-sizing: border-box;

  border: 1px solid rgba(255, 255, 255, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 20px;

  background: rgba(252, 252, 253, 0.78);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);

  box-shadow:
    0 8px 32px -10px rgba(16, 24, 40, 0.22),
    0 2px 8px -4px rgba(16, 24, 40, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);

  z-index: 1000;
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .button-bottom.product-button {
    background: rgba(252, 252, 253, 0.97);
  }
}

/* وقتی نوار ناوبری هست، دکمه‌های محصول یک پله بالاتر و نوار قیمت بالاتر از آن */
body.has-appbar .button-bottom.product-button {
  bottom: 82px;
}

body.has-appbar .product .product-bottom-price {
  /* 82 (دکمه‌ها) + 62 (ارتفاعشان) + 12 فاصله */
  bottom: 156px;
}

.button-bottom.product-button .button-row {
  width: 100%;
  gap: 8px;
}

/* آیکون سبد داخل دکمه‌های محصول با کارت جدید هماهنگ شود */
.button-bottom.product-button .footer-icon.cart-icon.product-page {
  height: 44px;
  width: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #f3f4f6;
  position: relative;
}

.button-bottom.product-button .c50left,
.button-bottom.product-button .c50right {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
}

/* فاصله‌ی انتهای محتوا: نوار ناوبری + باکس اقدام */
body.has-appbar .cartlist .bottom-height,
body.has-appbar .cartlist .bottom-height.product-bottom {
  height: 150px;
}

body.has-appbar .product .bottom-height,
body.has-appbar .product .bottom-height.product-bottom {
  height: 232px;
}

/* ===========================================================================
 *  دکمه‌های پایین مودال‌ها — هم‌سبک کارت شناور
 * ===========================================================================
 *  مودال‌ها (فیلتر، مرتب‌سازی، انتخاب آدرس، افزودن سریع) کف صفحه باز می‌شوند
 *  و دکمه‌هایشان زیر نوار ناوبری می‌رفت. حالا مودال بالاتر از نوار است و
 *  خودِ کارت مودال هم شناور و گرد شده تا با بقیه‌ی طراحی یکی باشد.
 * ========================================================================= */

.filter-back .filter-box {
  /* در موبایل تمام عرض و چسبیده به لبه‌ها، در دسکتاپ حداکثر ۴۵۰ */
  bottom: 0;
  left: auto;
  right: calc((100vw - min(100%, 450px)) / 2);
  width: min(100%, 450px);
  max-width: none;
  /* فقط گوشه‌های بالا گرد؛ پایین به لبه‌ی صفحه می‌چسبد */
  border-radius: 22px 22px 0 0;
  padding: 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;

  border: 0;
  background: #fff;

  box-shadow: 0 -8px 40px -12px rgba(16, 24, 40, 0.28);

  max-height: calc(var(--vh, 1vh) * 100 - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* مودال دیگر شیشه‌ای نیست، پس فالبک بلور لازم ندارد */

/* دکمه‌های داخل مودال ثابت نیستند، بخشی از خود کارت‌اند */
.filter-back .filter-box .button-bottom {
  position: relative !important;
  bottom: auto;
  right: auto;
  left: auto;
  width: 100%;
  height: auto;
  padding: 0;
  margin-top: 14px;
  background: transparent;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.filter-back .filter-box .button-bottom .button-row {
  width: 100%;
  gap: 8px;
}

.filter-back .filter-box .button-bottom .c50left,
.filter-back .filter-box .button-bottom .c50right,
.filter-back .filter-box .button-bottom .c100 {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
}

/* ---------------------------------------------------------------------
 *  نوار ناوبری نباید روی لایه‌های بالاتر بیفتد
 * ------------------------------------------------------------------- */

/* overlay بارگذاری: نوار باید رویش باشد تا انیمیشن انتخاب تب دیده شود */
#overlay {
  z-index: 1000;
}

/* دیالوگ خطا و تایید روی نوار */
.dialog-back {
  z-index: 1020;
}

/* لایه‌ی جستجو: نوار باید کاملا کنار برود */
body.shop-layer-lock .bottom-header.ab-bar {
  transform: translateY(150%);
  opacity: 0;
  pointer-events: none;
}

/* وقتی مودالی باز است، صفحه‌ی زیرین اسکرول نخورد */
body.modal-open {
  overflow: hidden;
  touch-action: none;
}

/* ===========================================================================
 *  صفحه‌ی محصول: کارت سه‌بخشی
 * ===========================================================================
 *      [ ۳۰٪ دکمه ]  │  [ ۷۰٪ قیمت ]
 *
 *  نسبت ثابت است تا با فرانشیز و تخفیف هم چیزی بیرون نزند. داخل بخش قیمت،
 *  قیمت نهایی به لبه‌ی چپ می‌چسبد و فرانشیز/قیمت خط‌خورده/درصد به لبه‌ی
 *  راستِ همان بخش، یعنی کنار خط جداکننده.
 * ========================================================================= */

.button-bottom.product-button .pb-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}

/* --- بخش راست: دکمه‌ی افزودن یا کنترل تعداد --- */

.button-bottom.product-button .pb-row .c50right,
.button-bottom.product-button .pb-row .cart-product {
  flex: 0 0 35%;
  width: 35%;
  min-width: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* --- خط جداکننده --- */

.button-bottom.product-button .pb-price {
  flex: 1 1 65%;
  width: 65%;
  min-width: 0;

  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;

  margin: 0;
  padding: 0 12px 0 4px;
  margin-right: 12px;
  border-right: 1px solid rgba(16, 24, 40, 0.1);
}

/* قیمت نهایی: چسبیده به لبه‌ی چپ */
.button-bottom.product-button .pb-price .product-price-value {
  order: 2;
  margin-left: auto;
  font-size: 16px;
  font-weight: 700;
  color: #2c2c2c;
  line-height: 1.7;
  white-space: nowrap;
  direction: rtl;
}

.button-bottom.product-button .pb-price .product-price-value.center {
  text-align: left;
  width: auto;
}

.button-bottom.product-button .pb-price .currency {
  font-size: 10.5px;
  font-weight: 400;
  opacity: 0.65;
  margin-right: 3px;
}

/* فرانشیز، قیمت خط‌خورده و درصد: چسبیده به خط جداکننده (راست) */
.button-bottom.product-button .pb-price .product-price-franchise,
.button-bottom.product-button .pb-price .product-price-dis-value,
.button-bottom.product-button .pb-price .percent {
  order: 1;
  flex: 0 0 auto;
}

.button-bottom.product-button .pb-price .product-price-dis-value {
  font-size: 12px;
  color: #a0a4ab;
  text-decoration: line-through;
  white-space: nowrap;
}

.button-bottom.product-button .pb-price .percent {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
}

/* قیمت فرانشیز راست‌چین می‌ماند */
.button-bottom.product-button .pb-price .product-price-franchise {
  float: none;
  margin: 0;
  padding: 4px 8px 2px;
  font-size: 11px;
  border-radius: 7px;
  white-space: nowrap;
  line-height: 1.5;
  direction: rtl;
}

/* اگر هم فرانشیز و هم تخفیف بود، ستونی روی هم تا جا شوند */
.button-bottom.product-button
  .pb-price:has(.product-price-franchise):has(.percent) {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 2px;
}

/* --- کارت --- */

body.has-appbar .button-bottom.product-button {
  bottom: 82px;
  border-radius: 20px;
  padding: 9px 12px;
}

body.has-appbar .button-bottom.product-button::before {
  content: none;
}

body.has-appbar .product .bottom-height,
body.has-appbar .product .bottom-height.product-bottom {
  height: 156px;
}

body.has-appbar .product .bottom-height.short {
  height: 0;
}

/* ===========================================================================
 *  لیست آدرس و روش ارسال — هم‌سبک لیست دسته‌بندی
 * ===========================================================================
 *  هدر ثابت بالا، لیست وسط اسکرول می‌شود و دکمه‌ها ثابت پایین. اسکرول‌بار
 *  سمت راست کارت می‌ماند (جهت طبیعی RTL) ولی محتوای لیست از لبه‌ی چپ شروع
 *  می‌شود، دقیقا مثل لیست دسته‌بندی.
 * ========================================================================= */

.filter-back .filter-box.shop-address-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  max-height: calc(var(--vh, 1vh) * 100 - 64px);
}

/* هدر ثابت */
.filter-back .filter-box.shop-address-list .shop-address-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  margin: 0;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px;
  font-weight: 700;
  color: #222;
}

.filter-back .filter-box.shop-address-list .shop-address-header label {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

/* ناحیه‌ی اسکرول: تنها بخش متحرک */
.filter-back .filter-box.shop-address-list #addresslist,
.filter-back .filter-box.shop-address-list #customershipping,
.filter-back .filter-box.shop-address-list #mahanlist {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px;
  margin: 0;
  background: #fafafa;
}

/* نوار اسکرول باریک و کم‌رنگ، مثل لیست دسته‌بندی */
.filter-back .filter-box.shop-address-list #addresslist::-webkit-scrollbar,
.filter-back
  .filter-box.shop-address-list
  #customershipping::-webkit-scrollbar {
  width: 4px;
}

.filter-back
  .filter-box.shop-address-list
  #addresslist::-webkit-scrollbar-thumb,
.filter-back
  .filter-box.shop-address-list
  #customershipping::-webkit-scrollbar-thumb {
  background: #d8d8d8;
  border-radius: 99px;
}

.filter-back
  .filter-box.shop-address-list
  #addresslist::-webkit-scrollbar-track,
.filter-back
  .filter-box.shop-address-list
  #customershipping::-webkit-scrollbar-track {
  background: transparent;
}

/* آخرین ردیف نباید فاصله‌ی اضافه بگیرد */
.filter-back .filter-box.shop-address-list #addresslist > *:last-child,
.filter-back .filter-box.shop-address-list #customershipping > *:last-child {
  margin-bottom: 0;
}

/* دکمه‌ها ثابت پایین */
.filter-back .filter-box.shop-address-list .button-bottom {
  flex: 0 0 auto;
  margin: 0;
  padding: 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid #f0f0f0;
}

.filter-back .filter-box.shop-address-list .button-bottom::before {
  content: none;
}

/* ===========================================================================
 *  اصلاحات مودال لیست‌ها و صفحه‌ی پرداخت
 * ========================================================================= */

/* ۲ و ۳) دکمه‌های پایین مودال لیست: بدون خط بالا، با فاصله‌ی درست */
.filter-back .filter-box.shop-address-list .button-bottom {
  border-top: 0;
  padding: 16px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  background: #fff;
}

/* ناحیه‌ی اسکرول: دقیقا مثل لیست دسته‌بندی */
.filter-back .filter-box.shop-address-list #addresslist,
.filter-back .filter-box.shop-address-list #customershipping,
.filter-back .filter-box.shop-address-list #mahanlist {
  background: #fafafa;
  padding: 12px 12px;
  scrollbar-width: thin;
  scrollbar-color: #d8d8d8 transparent;
}

/* هدر: سفید و بدون درز با بدنه */
.filter-back .filter-box.shop-address-list .shop-address-header {
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  padding: 15px 16px;
}

/* ردیف‌های لیست آدرس و روش ارسال: کارت سفید روی زمینه‌ی خاکستری */
.filter-back .filter-box.shop-address-list #addresslist .filter-row,
.filter-back .filter-box.shop-address-list #customershipping .filter-row {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  margin-bottom: 8px;
  padding: 12px;
}

.filter-back .filter-box.shop-address-list #addresslist .filter-row:last-child,
.filter-back
  .filter-box.shop-address-list
  #customershipping
  .filter-row:last-child {
  margin-bottom: 0;
}

.filter-back
  .filter-box.shop-address-list
  #addresslist
  .filter-row:not(.disable),
.filter-back
  .filter-box.shop-address-list
  #customershipping
  .filter-row:not(.disable) {
  border-color: var(--basecolor);
  box-shadow: 0 0 0 0.12rem var(--basecolorshadow);
}

/* ۴) صفحه‌ی پرداخت: مبلغ قابل پرداخت و دکمه‌ها در یک کارت گرد ثابت
 *
 *    مارکاپ این دو جداست (نوار مبلغ داخل لیست، دکمه‌ها بعد از آن)، پس مثل
 *    صفحه‌ی محصول بصری به هم چسبانده می‌شوند: بالایی گوشه‌های بالا، پایینی
 *    گوشه‌های پایین، و یک خط نازک بینشان.
 */

.product-bottom-price.cartlist-bottom-totalprice {
  bottom: 92px;
  right: calc((100vw - min(var(--widthdashboard), 450px)) / 2);
  left: auto;
  width: min(var(--widthdashboard), 450px);
  height: auto;
  min-height: 0;
  padding: 12px 14px 10px 14px;
  box-sizing: border-box;
  border: 0;
  border-radius: 20px;
  background: #fff;
  /* سایه عمدا اینجا تعریف نمی‌شود تا از قاعده‌ی مشترک
       «.cartlist .product-bottom-price» به ارث برسد */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  z-index: 999;
}

.product-bottom-price.cartlist-bottom-totalprice .product-price {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

.product-bottom-price.cartlist-bottom-totalprice .label {
  font-size: 12px;
  color: #8b8f98;
  margin: 0;
}

.product-bottom-price.cartlist-bottom-totalprice .product-price-value {
  font-size: 16px;
  font-weight: 700;
  color: #2c2c2c;
  line-height: 1.5;
}

/* دکمه‌های پایین صفحه‌ی پرداخت: چسبیده به نوار مبلغ، گوشه‌های پایین گرد */
body:has(.cartlist-bottom-totalprice) .login-button.button-bottom {
  bottom: 12px;
  right: calc((100vw - min(var(--widthdashboard), 450px)) / 2);
  left: auto;
  width: min(var(--widthdashboard), 450px);
  height: auto;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 20px;
  background: #fff;
  box-shadow:
    0 10px 32px -12px rgba(16, 24, 40, 0.26),
    0 2px 8px -4px rgba(16, 24, 40, 0.08);
  -webkit-box-shadow:
    0 10px 32px -12px rgba(16, 24, 40, 0.26),
    0 2px 8px -4px rgba(16, 24, 40, 0.08);
}

/* دو کارت جدا شدند، پس خط چسبندگی لازم نیست */
body:has(.cartlist-bottom-totalprice) .login-button.button-bottom::before {
  content: none;
}

/* وقتی مبلغ صفر است (ثبت سفارش بدون پرداخت) دکمه‌ها کارت مستقل می‌شوند */
body:not(:has(.cartlist-bottom-totalprice)) .login-button.button-bottom {
  bottom: 12px;
  right: calc((100vw - min(var(--widthdashboard), 450px)) / 2);
  left: auto;
  width: min(var(--widthdashboard), 450px);
  height: auto;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 20px;
  background: #fff;
  box-shadow:
    0 10px 32px -12px rgba(16, 24, 40, 0.26),
    0 2px 8px -4px rgba(16, 24, 40, 0.08);
  -webkit-box-shadow:
    0 10px 32px -12px rgba(16, 24, 40, 0.26),
    0 2px 8px -4px rgba(16, 24, 40, 0.08);
}

.login-button.button-bottom .button-row {
  width: 100%;
  gap: 8px;
}

.login-button.button-bottom .c50left,
.login-button.button-bottom .c50right,
.login-button.button-bottom .c100 {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
}

/* ۵) کارت محصول: مبلغ و واحد ستونی، اما کنار فرانشیز ردیفی
 *
 *    <div class="product-price-value">        ← ردیف
 *      <span class="pb-amount">              ← ستون: مبلغ روی واحد
 *         65,000 <span class="currency">تومان</span>
 *      </span>
 *      <div class="product-price-franchise">…</div>
 *    </div>
 */
.button-bottom.product-button .pb-price .product-price-value {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 6px;
  line-height: 1.25;
  justify-content: space-between;
}

.button-bottom.product-button .pb-price .pb-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}

.button-bottom.product-button .pb-price .pb-amount .currency {
  display: block;
  margin: 0;
  font-size: 10px;
  font-weight: 400;
  opacity: 0.6;
  text-align: left;
  align-self: flex-start;
}

/* فرانشیز کنار مبلغ می‌ماند، نه زیرش */
.button-bottom.product-button
  .pb-price
  .product-price-value
  .product-price-franchise {
  align-self: center;
}

/* قیمت خط‌خورده به قیمت نهایی بچسبد */
.button-bottom.product-button .pb-price .product-price-dis-value {
  margin: 0;
  padding: 0;
}

/* فرانشیز: قیمت اصلی چپ، قیمت فرانشیز راستِ آن، بدون واحد */
.button-bottom.product-button .pb-price .product-price-franchise .currency {
  display: none;
}

/* کنترل تعداد: دکمه‌ها به دو لبه بچسبند */
.button-bottom.product-button .pb-row .cart-product {
  justify-content: space-between;
}

/* فاصله‌ی انتهای لیست صفحه‌ی پرداخت: نوار مبلغ + دکمه‌ها + فاصله */
body:has(.cartlist-bottom-totalprice) .bottom-height.product-bottom {
  height: 67px;
}

body:not(:has(.cartlist-bottom-totalprice)) .bottom-height.product-bottom {
  height: 90px;
}

/* ===========================================================================
 *  اصلاحات نهایی فاصله‌ها
 * ========================================================================= */

/* ۸) فاصله‌ی استاندارد انتهای محتوا */
.bottom-height,
.bottom-height.short {
  height: 82px;
}

/* ۱۰) دکمه‌های مودال لیست آدرس و روش تحویل نباید به لبه بچسبند */
.filter-back .filter-box.shop-address-list .button-bottom {
  border-top: 0;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: #fff;
}

/* ناحیه‌ی اسکرول هم از دکمه‌ها فاصله بگیرد */
.filter-back .filter-box.shop-address-list #addresslist,
.filter-back .filter-box.shop-address-list #customershipping,
.filter-back .filter-box.shop-address-list #mahanlist {
  padding-bottom: 14px;
}

/* صفحه‌ی پرداخت: دو کارت مستقل با فاصله‌ی ۱۲ بینشان
   دکمه‌ها bottom=12 ارتفاع≈66 → لبه بالا 78، پس نوار مبلغ از 92 شروع می‌شود */
body:has(.cartlist-bottom-totalprice) .bottom-height.product-bottom {
  height: 67px;
}

/* ===========================================================================
 *  کارت دکمه‌های پایین صفحه — قاعده‌ی عمومی
 * ===========================================================================
 *  صفحه‌هایی مثل افزایش اعتبار، فرم‌ها و مراحل، .button-bottom ساده دارند و
 *  هنوز به لبه‌ی پایین می‌چسبیدند. این قاعده همه را به همان کارت شناور
 *  تبدیل می‌کند.
 *
 *  موارد استثنا: .product-button (صفحه‌ی محصول) و .login-button (پرداخت) که
 *  قواعد اختصاصی خودشان را دارند، و دکمه‌های داخل مودال‌ها که اصلا شناور
 *  نیستند.
 * ========================================================================= */

/* داخل مودال‌ها شناور نیست، بخشی از خود کارت است */
#container .filter-back .button-bottom,
#container .qa-modal-box .button-bottom {
  position: relative !important;
  bottom: auto;
  right: auto;
  left: auto;
  width: 100%;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-box-shadow: none;
}

#container .button-bottom:not(.product-button):not(.login-button) .button-row {
  width: 100%;
  gap: 8px;
}

#container .button-bottom:not(.product-button):not(.login-button) .c50left,
#container .button-bottom:not(.product-button):not(.login-button) .c50right,
#container .button-bottom:not(.product-button):not(.login-button) .c100 {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
}

#cart-info-box .productlist {
  padding: 12px;
}