/* 设置字体为微软雅黑，并设置备用字体 */
body {
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  font-size: 0.3906rem !important;
  line-height: 1;
}

.btn {
  cursor: pointer;
}

.btn:active {
  transform: scale(0.99);
}

.app-wrapper {
  display: flex;
  position: relative;
  flex-direction: column;
  overflow: hidden;
  height: 100vh;
}

.header,
.footer {
  flex-shrink: 0;
}
.app-body {
  flex-grow: 1;
  overflow: auto;
}

.header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 0.2604rem #0002;
  height: 1.7708rem;
  background: #fff;
  z-index: 3;
}

.logo {
  display: inline-block;
  margin-left: 0.4818rem;
}
.logo img {
  width: 3.3854rem;
  height: 0.7161rem;
}

/** 本地化 */
.location-btn {
  display: inline-block;
  position: relative;
  /* margin-top: 0.3906rem; */
  margin-right: 0.3906rem;
  width: 2.526rem;
  height: 0.8854rem;
  text-align: center;
  line-height: 0.8854rem;
  border-radius: 0.4492rem;
  color: #010101;
  font-size: 0.4rem;
  background: #c0c1ff;
  cursor: pointer;
}

.location-btn.open {
  border-radius: 0.4492rem 0.4492rem 0 0;
}

.location-list {
  display: none;
  position: absolute;
  bottom: 0;
  transform: translateY(100%);
  z-index: 3;
  background: #c0c1ff;
  color: #010101;
  text-align: center;
  font-size: 0.4rem;
  width: 2.526rem;
  border-radius: 0 0 0.4492rem 0.4492rem;
}

.location-btn.open .location-list {
  display: block;
}

.location-item {
  height: 0.7682rem;
  line-height: 0.7682rem;
  cursor: pointer;
  font-size: 0.3385rem;
}
.location-item.active {
  background: #5d50d9;
  color: #fff;
}

/** 登录 */
.login {
  display: flex;
  align-items: center;
  margin-left: 0.6771rem;
  margin-top: 0.3906rem;
}

.login img {
  width: 1.5625rem;
}

.login-wrapper,
.user-info-wrapper {
  margin-left: 0.1953rem;
  display: none;
  flex-direction: column;
  font-size: 0.319rem;
}

.login-wrapper.open,
.user-info-wrapper.open {
  display: flex;
}

.notice {
  display: inline-block;
  margin-left: 0.3255rem;
  font-size: 0.3125rem;
  color: #4b81ed;
}

.notice:hover {
  color: #4b81ed;
  text-decoration: underline;
}

.login-input-wrapper {
  position: relative;
  margin-top: 0.1302rem;
  width: 6.2109rem;
}

.login-input {
  display: inline-block;
  width: 6.2109rem;
  height: 0.9115rem;
  border: 0.026rem solid #ccc;
  /* border-bottom: none; */
  border-radius: 0.5859rem;
  box-shadow: 0 0.0651rem 0.1302rem #0002;
  padding-left: 0.2604rem;
  font-size: 0.3906rem;
}

.login-input::placeholder {
  color: #000;
}

html[lang='fr'] .login-input::placeholder,
html[lang='de'] .login-input::placeholder,
html[lang='es'] .login-input::placeholder,
html[lang='pt'] .login-input::placeholder,
html[lang='it'] .login-input::placeholder {
  font-size: 0.3125rem;
}

.login-input:focus {
  border-color: #6ca6cd;
  box-shadow: 0 0.0651rem 0.1302rem rgba(181, 172, 255, 0.5);
}

.login-btn {
  display: inline-block;
  position: absolute;
  color: #fff;
  background: #000;
  top: 0;
  right: 0;
  width: 2.2656rem;
  height: 0.9115rem;
  font-size: 0.3906rem;
  text-align: center;
  line-height: 0.9115rem;
  transform: translateX(0.7813rem);
  border-radius: 2.2656rem;
}

html[lang='fr'] .login-btn,
html[lang='de'] .login-btn,
html[lang='es'] .login-btn,
html[lang='pt'] .login-btn,
html[lang='it'] .login-btn {
  font-size: 0.3125rem;
}

.login-btn:active {
  transform: translateX(0.7813rem) scale(0.99);
}

/* 用户信息 */
.user-info-wrapper {
  display: none;
  margin-left: 0.3385rem;
}
.nick-name-wrapper {
  position: relative;
}
.nick-name {
  display: inline-block;
  padding-left: 0.2474rem;
  width: 6.7839rem;
  height: 0.7943rem;
  border-radius: 0.1953rem;
  background-color: #f4eeff;
  font-size: 0.3906rem;
  line-height: 0.7943rem;
}
.logout {
  position: absolute;
  right: -0.1823rem;
  top: -0.0586rem;
  display: inline-block;
  width: 2.2656rem;
  height: 0.9115rem;
  border-radius: 0.4557rem;
  background-color: #f2542f;
  text-align: center;
  line-height: 0.9115rem;
  color: #fff;
  font-size: 0.3906rem;
}
html[lang='fr'] .logout {
  font-size: 0.3125rem;
}

.uid-wrapper {
  display: inline-block;
  margin-top: 0.1693rem;
  margin-left: 0.2474rem;
  font-size: 0.3255rem;
}

/** 登录模态框 */
.login-dialog,
.login-notice-dialog {
  display: none;
  position: absolute;
  z-index: 100;
  width: 8.9193rem;
  height: 8.4896rem;
  top: 3.2552rem;
  left: 0.5469rem;
  background-color: #fff;
  border-radius: 0.2604rem;
  box-shadow: 0 0 0.1302rem #0007;
  opacity: 0;
  transition: opacity 0.3s;
}

.login-dialog.open,
.login-notice-dialog.open {
  display: block;
  opacity: 1;
}

.login-dialog-header,
.login-notice-dialog-header {
  position: relative;
  width: 100%;
  height: 1.4323rem;
  line-height: 1.4323rem;
  border-radius: 0.2605rem 0.2605rem 0 0;
  text-align: center;
  background-image: linear-gradient(to right, #b8aeff, #8e92ff);
  font-size: 0.5208rem;
}

.login-dialog-close,
.login-notice-dialog-close {
  position: absolute;
  top: 50%;
  right: 0.3255rem;
  transform: translate(-50%, -50%);
  width: 0.5208rem;
  height: 0.5208rem;
  z-index: 4;
  cursor: pointer;
}
.login-dialog-close::after,
.login-dialog-close::before,
.login-notice-dialog-close::after,
.login-notice-dialog-close::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5208rem;
  z-index: 5;
  height: 0.0521rem;
  background: #000;
  transform: rotate(45deg) translate(-50%, -50%);
  transform-origin: 0% 0%;
}

.login-dialog-close::before,
.login-notice-dialog-close::before {
  transform-origin: 0% 0%;
  transform: rotate(-45deg) translate(-50%, -50%);
}

.login-dialog-input-wrapper {
  padding-top: 1.4974rem;
  text-align: center;
}
.login-dialog-input {
  display: inline-block;
  width: 7.2526rem;
  height: 0.9115rem;
  padding-left: 0.3255rem;
  border: 0.026rem solid #ccc;
  border-radius: 0.5859rem;
  box-shadow: 0 0.0651rem 0.1302rem #0002;
  font-size: 0.3906rem;
}

.login-dialog-input::placeholder {
  color: #000;
}

.login-dialog-input:focus {
  border-color: #6ca6cd;
  box-shadow: 0 0.0651rem 0.1302rem rgba(181, 172, 255, 0.5);
}

.login-dialog-notice {
  display: inline-block;
  font-size: 0.3906rem;
  color: #4b81ed;
  text-decoration: underline;
  margin-top: 0.3906rem;
}

.login-dialog-notice:hover {
  color: #4b81ed;
  text-decoration: none;
}

html[lang='fr'] .login-dialog-notice,
html[lang='de'] .login-dialog-notice,
html[lang='es'] .login-dialog-notice,
html[lang='pt'] .login-dialog-notice,
html[lang='it'] .login-dialog-notice {
  font-size: 0.2604rem;
}

.question {
  width: 0.5339rem;
  display: inline-block;
  margin-right: 0.1302rem;
  margin-top: -0.0651rem;
}

html[lang='fr'] .question,
html[lang='de'] .question,
html[lang='es'] .question,
html[lang='pt'] .question,
html[lang='it'] .question {
  width: 0.2604rem;
}

.login-dioalog-btn-wrapper,
.login-notice-dioalog-btn-wrapper {
  margin-top: 1.3411rem;
  text-align: center;
}
.login-dioalog-btn,
.login-notice-dioalog-btn {
  display: inline-block;
  width: 6.0156rem;
  height: 1.3672rem;
  border-radius: 0.6836rem;
  background-color: #000;
  color: #fff;
  font-size: 0.5208rem;
  line-height: 1.3672rem;
  cursor: pointer;
  user-select: none;
}

.login-dioalog-btn:active {
  transform: scale(0.99);
}

/* 折扣banner */
.discount-banner {
  margin-top: 0.5469rem;
  text-align: center;
}
.discount-banner img {
  width: 8.5938rem;
  height: 1.5365rem;
}

/* 商品列表  */
.item-list {
  padding: 0 0.6771rem;
  margin-top: 0.3906rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3646rem;
}
.item {
  position: relative;
}
.item:nth-child(n + 3) {
  margin-top: 0.3646rem;
}
.item-bg {
  width: 4.1406rem;
  height: 4.1667rem;
}
.discount {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.6406rem;
  height: 0.5208rem;
}
.discount-num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-style: italic;
  font-size: 0.2604rem;
  white-space: nowrap;
  font-weight: bold;
}

.item-example {
  position: absolute;
  top: 0.651rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.4974rem;
  height: 1.4974rem;
}

.item-name {
  position: absolute;
  top: 2.2917rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.3125rem;
  color: #000;
  white-space: nowrap;
}

.buy-btn {
  position: absolute;
  width: 3.776rem;
  height: 0.8984rem;
  border-radius: 0.4492rem;
  background-color: #000;
  color: #fff;
  font-size: 0.3906rem;
  text-align: center;
  line-height: 0.8984rem;
  bottom: 0.2214rem;
  left: 0.1823rem;
  cursor: pointer;
}
.buy-btn:active {
  transform: scale(0.99);
}
.origin-cost-wrapper {
  position: absolute;
  top: -0.2344rem;
  left: 2.3828rem;
  width: 1.3932rem;
  height: 0.3776rem;
  background-color: #e8e9ff;
  border-radius: 0.1302rem 0.1302rem 0.1302rem 0;
}

.origin-cost-wrapper::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: 0.0521rem;
  top: 0.1172rem;
  width: 1.3021rem;
  height: 0.0391rem;
  background: #de3232;
  transform-origin: 0 0;
  transform: rotate(5deg);
  /* z-index: 3; */
}

.origin-cost {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.2604rem;
  height: 0.3776rem;
  width: 1.3932rem;
  line-height: 0.3776rem;
  color: #000;
}

/** 遮罩 */
.mask-layer {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 99;
}

.mask-layer.open {
  display: inherit;
}

/** 维护 */
.task-repair {
  display: none;
  position: absolute;
  top: 1.7708rem;
  left: 0;
  width: 100%;
  height: calc(100% - 1.7708rem);
  background: #fff;
  z-index: 2;
  box-shadow: 0 0 0.2604rem #0002 inset;
}

.task-repair.open {
  display: inherit;
}

.task-repair img {
  width: 4.0495rem;
  height: 3.8021rem;
}
.task-repair-bg {
  margin-top: 2.6042rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.task-repair-title {
  font-size: 0.3646rem;
}

/* 账号登录提示 */
.login-notice-dioalog-btn-wrapper {
  margin: 0;
}
.login-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.2604rem;
  font-size: 0.3906rem;
  color: #ff396b;
  text-align: center;
  height: 4.6875rem;
  word-break: break-all;
}

/* 订单确认 */
.order-check-wrapper {
  display: none;
  position: absolute;
  top: 100%;
  width: 100%;
  height: calc(100% - 1.7057rem);
  opacity: 0;
}

.order-check-wrapper.hidden {
  /* display: inherit; */
  animation: slideDown 0.3s forwards;
}
.order-check-wrapper.open {
  display: initial;
  top: 1.7057rem;
  opacity: 1;
  z-index: 5;
  animation: slideUp 0.3s forwards;
}

@keyframes slideDown {
  0% {
    top: 1.7057rem;
    opacity: 1;
  }

  100% {
    top: 100%;
    opacity: 0;
    display: none;
  }
}
@keyframes slideUp {
  0% {
    display: initial;
    top: 100%;
    opacity: 0;
  }
  100% {
    top: 1.7057rem;
    opacity: 1;
  }
}
.order-check-mask {
  position: absolute;
  top: -2.513rem;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 0;
}
.order-check {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #fff;
  z-index: 10;
  overflow-y: auto;
}
.order-check .title {
  position: sticky;
  position: -webkit-sticky;
  top: -1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.1953rem 0.2344rem;
  background-color: #fff;
  z-index: 6;
}
.order-rollback,
.order-close {
  width: 0.7943rem;
  height: 0.7943rem;
  cursor: pointer;
}
.order-check-title {
  font-size: 0.3906rem;
  font-weight: bold;
}
.nick-name.order {
  background-image: linear-gradient(to right, #dfe0ff, #f2f2ff);
}
.uid-wrapper.order {
  display: flex;
  justify-content: space-between;
}
html[lang='en'] .uid-wrapper.order {
  font-size: 0.2344rem;
}

html[lang='ja'] .uid-wrapper.order {
  font-size: 0.2865rem;
}

html[lang='es'] .uid-wrapper.order,
html[lang='fr'] .uid-wrapper.order,
html[lang='kore'] .uid-wrapper.order,
html[lang='it'] .uid-wrapper.order,
html[lang='pt'] .uid-wrapper.order,
html[lang='de'] .uid-wrapper.order {
  font-size: 0.2604rem;
}
html[lang='es'] .uid-wrapper.order,
html[lang='fr'] .uid-wrapper.order,
html[lang='it'] .uid-wrapper.order,
html[lang='pt'] .uid-wrapper.order,
html[lang='ja'] .uid-wrapper.order,
html[lang='de'] .uid-wrapper.order {
  flex-direction: column;
}

html[lang='es'] .uid-wrapper,
html[lang='fr'] .uid-wrapper,
html[lang='it'] .uid-wrapper,
html[lang='pt'] .uid-wrapper,
html[lang='ja'] .uid-wrapper,
html[lang='de'] .uid-wrapper {
  margin-top: 0.0651rem;
  line-height: 1.2;
}

.switch-user {
  color: #784ece;
  text-decoration: underline;
  cursor: pointer;
}

.gift-pack-wrapper {
  margin-top: 0.7161rem;
  padding-left: 0.625rem;
}
.gift-pack-bg {
  position: relative;
  width: 8.7109rem;
  height: 2.6432rem;
  border-radius: 0.2604rem;
  background-image: linear-gradient(to bottom, #d2ceff, #eadfff 20%, #fbefff 50%, #fffeff 80%, #fff);
}
.gift-order-item {
  position: absolute;
  left: 0.5208rem;
  top: 0.8464rem;
  width: 1.875rem;
  height: 1.4974rem;
  /* 144 * 115 */
}
.gift-pack-title {
  padding-left: 0.1953rem;
  margin-bottom: 0.1302rem;
  font-size: 0.3125rem;
  font-weight: bold;
}
.order-item-des {
  position: absolute;
  top: 0.9115rem;
  left: 2.7865rem;
  display: flex;
  flex-direction: column;
}
.order-item-content,
.order-item-price {
  font-size: 0.3906rem;
}
.order-item-content {
  margin-bottom: 0.2604rem;
}

.pay-way {
  margin-top: 0.651rem;
  padding-left: 0.625rem;
  padding-bottom: 0.651rem;
  background-color: #fff;
}
.pay-way-title {
  margin-left: 0.2344rem;
  font-size: 0.3125rem;
  font-weight: bold;
}
.pay-way-list {
  margin-top: 0.1042rem;
  padding: 0.2083rem;
  width: 8.7109rem;
  background-image: linear-gradient(to bottom, #c7c2fb, #ddd0fb 20%, #ecdbfb 40%, #f2e6fb 60%, #f4eefb 80%, #fff);
  border-radius: 0.2604rem;
}
.pay-way-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.5208rem 0 0.2604rem;
  width: 8.2682rem;
  height: 0.7943rem;
  margin-top: 0.2083rem;
  border-radius: 0.1953rem;
  background: #fff;
  border: 0.0391rem solid transparent;
  cursor: pointer;
  transition: border-color 0.3s;
}

.pay-way-item.active {
  border-color: #5d50d9;
}
.pay-way-item.placeholder {
  background-color: rgba(255, 255, 255, 0.3);
  cursor: default;
}
.pay-way-icon.bank {
  width: 3.0469rem;
  height: 0.4167rem;
}
.pay-way-icon.paypal {
  width: 1.8099rem;
  height: 0.4427rem;
}
.pay-way-icon {
  height: 0.4167rem;
}
.pay-way-name {
  font-size: 0.2604rem;
  color: #303030;
}
.pay-bnt-wrapper {
  position: sticky;
  bottom: 0;
  left: 0.3255rem;
  right: 0.3255rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #000;
  width: 9.349rem;
  height: 1.3281rem;
  border-radius: 0.1953rem;
  padding: 0 0.5729rem 0 0.7682rem;
}
.pay-price {
  font-size: 0.3906rem;
  color: #fff;
}
.pay-btn {
  width: 3.112rem;
  height: 0.8594rem;
  border-radius: 0.4297rem;
  text-align: center;
  line-height: 0.8594rem;
  color: #fff;
  background-color: #7b52d0;
  font-size: 0.3906rem;
  font-weight: bold;
}

/* 支付loading */
.pay-loading-wrapper {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.pay-loading-mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
.pay-loading-wrapper.open {
  display: initial;
  z-index: 101;
}
.pay-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 50%;
  background-color: #fff;
  width: 8.9193rem;
  height: 6.7448rem;
  border-radius: 0.2604rem;
  transform: translate(-50%, -50%);
}

.pay-loading-title {
  margin-top: 0.4688rem;
  font-size: 0.5208rem;
  font-weight: bold;
  text-align: center;
}
.loading-icon {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loading-icon-animation {
  width: 1.7578rem;
  height: 1.7578rem;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.loading-icon-text {
  margin-top: 0.5599rem;
  font-size: 0.3906rem;
}

/* 支付结果详情 */
.order-result-wrapper {
  display: none;
  position: absolute;
  top: 100%;
  width: 100%;
  height: calc(100% - 1.7057rem);
  opacity: 0;
}
.order-result-wrapper.open {
  display: initial;
  top: 1.7057rem;
  opacity: 1;
  z-index: 5;
  animation: slideUp 0.3s forwards;
}
.order-result-wrapper.hidden {
  display: none;
  animation: slideDown 0.3s forwards;
}
.order-result-mask {
  position: absolute;
  top: -1.7057rem;
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  z-index: 5;
}
.order-result {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-image: linear-gradient(
    to bottom,
    #a29dff,
    #b9abff 1.1458rem,
    #e0c6ff 3.2813rem,
    #f3d9ff 5.2344rem,
    #fbecff 7.1615rem,
    #fdf9ff 9.0234rem,
    #fff
  );
  z-index: 6;
}
.order-result-header {
  position: sticky;
  position: -webkit-sticky;
  top: -1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: linear-gradient(to bottom, #a29dff, #b7aaff);
  padding: 0.1953rem 0.2344rem;
  z-index: 6;
}
.order-result-rollback,
.order-result-close {
  width: 0.7943rem;
  height: 0.7943rem;
}
.order-result-pay {
  margin-top: 0.625rem;
  text-align: center;
  color: #303030;
}

.order-result-pay-price {
  font-size: 0.625rem;
  font-weight: bold;
}
.order-result-pay-text {
  font-size: 0.2604rem;
}

.divider {
  color: #c6c6c6;
  font-size: 0.2604rem;
  font-weight: bold;
  text-align: center;
  text-align: center;
}
.divider:after {
  content: '';
  display: inline-block;
  width: 8.0469rem;
  /* height: 1px; */
  border-bottom: 0.026rem dashed #c6c6c6;
}

.order-result-detail {
  margin-top: 0.625rem;
}
.order-result-item {
  margin-top: 0.6771rem;
  text-align: center;
}
.order-result-item:first-of-type {
  margin: 0;
}
.order-result-item-title {
  font-size: 0.2604rem;
  color: #919191;
}
.order-result-item-value {
  margin-top: 0.1302rem;
  font-size: 0.3125rem;
  color: #303030;
}

/* aihelp */
.aihelp {
  position: fixed;
  display: inline-block;
  top: 9.1146rem;
  right: 2px;
}
.aihelp img {
  width: 1.1068rem;
  height: 1.1068rem;
}

/* footer */
.footer {
  position: sticky;
  bottom: -2px;
  padding: 0.3516rem 0 0.2995rem;
  width: 100%;
  height: 2.7083rem;
  background: #fff;
  text-align: center;
  box-shadow: 0 0 0.2604rem #0002;
  line-height: 1;
}

.footer-logo {
  width: 100%;
  height: 0.8203rem;
  line-height: 1;
}

.footer-logo a {
  display: block;
  text-align: center;
  height: 0.8203rem;
  width: 100%;
  line-height: 1;
}

.footer-logo img {
  width: 3.8281rem;
  height: 0.8073rem;
  font-size: 20px;
  line-height: 1;
}
.policy {
  margin-top: 0.3125rem;
  color: #000;
  font-size: 0.2865rem;
  white-space: nowrap;
}
.copyright {
  margin-top: 0.3125rem;
  font-size: 0.2344rem;
  color: #5e5e5e;
}

.link:hover {
  text-decoration: underline;
}

/** pc适配（暂时使用） TODO: pc */
@media screen and (min-width: 769px) {
  .app-wrapper {
    width: 414px;
    height: 750px;
    border-radius: 30px;
    box-shadow: 0 0 10px #0007;
    margin: 50px auto 0;
  }

  .task-repair {
    height: calc(750px - 1.7708rem);
  }

  .order-check-wrapper {
    top: 2.513rem;
    height: calc(750px - 1.7708rem);
    /* 2.513rem */
  }

  .aihelp {
    top: 427px;
    right: calc((100vw - 414px) / 2 + 2px);
  }
  .footer {
    height: 117px;
  }
}