/* 全局样式和rpx转换系统 */
:root {
  --base-font-size: 16px;
}

html {
  font-size: var(--base-font-size);
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  height: 100%;
  background-color: #fff;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* rpx单位转换 - 基于750px设计稿 */
@media screen and (max-width: 750px) {
  html {
    font-size: calc(100vw / 750 * 100);
  }
}

@media screen and (min-width: 751px) {
  html {
    font-size: calc(100px);
  }
}

/* 通用组件样式 */
.container {
  width: 100%;
  box-sizing: border-box;
}

.flex {
  display: flex;
}

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

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text-center {
  text-align: center;
}

/* 支付页面样式 */
.PAY_PAGE_SECOND {
  min-height: 100vh;
  background-size: 100% 100%;
  position: relative;
}

.top_box {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.08rem 0.18rem 0.08rem 0.5rem;
  background: #1886ff;
  font-size: 0.507rem;
  color: #fff;
  z-index: 2;
}

.price_box {
  font-weight: bold;
  font-size: 0.693rem;
  color: #fff;
  text-align: center;
}

.price_box span {
  padding-right: 0.133rem;
  font-size: 0.42rem;
}

#amountDisplay {
  font-size: 0.55rem;
}

.timer {
  display: flex;
  align-items: center;
}

.timer_item {
  margin: 0 0.25rem;
  font-size: 0.40rem;
  height: 0.38rem;
}

.timer img {
  margin: 0.173rem -0.133rem 0 0;
  width: 0.35rem;
  height: 0.35rem;
}

.max_box {
  margin: 0.24rem 0.26rem 0.267rem;
  padding: 0.12rem 0.12rem 0.02rem;
  background-color: #1486FF;
  border-radius: 0.28rem;
}

.info_box {
  background: #FFFFFF;
  border-radius: 0.267rem;
  margin: 0 0 0.15rem;
  padding-bottom: 0.133rem;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.qr_code_title {
  padding: 0.133rem 0.4rem 0;
  font-weight: bold;
  font-size: 0.35rem;
  color: #1A91FB;
}

.qr_code_tip {
  text-align: center;
  font-size: 0.27rem;
  color: #ABABAB;
}

.img_box_qr {
  position: relative;
}

.title_step {
  padding: 0.133rem 0.4rem 0.1rem;
  font-weight: bold;
  font-size: 0.32rem;
  color: #1A91FB;
}

.pay_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 0.8rem;
  padding: 0 0.4rem 0 0.5rem;
  margin: 0 0.307rem 0.15rem;
  border-radius: 0.267rem;
  font-size: 0.413rem;
  color: #202631;
  border: 0.027rem solid #eeeeee;
  cursor: pointer;
  transition: all 0.3s;
}

.pay_item .arrow img {
  width: 0.3rem;
  height: 0.3rem;
}

.left_icon {
  display: flex;
  align-items: center;
}

.title_pay {
  margin: 0 0.133rem 0.133rem 0.133rem;
  font-weight: 700;
  color: #5F259F;
}

.copy_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.1rem 0 0.133rem 0;
  margin: 0 0.293rem;
  border-radius: 0.16rem;
}

.left_box {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 0.36rem;
  color: #191919;
  font-weight: 700;
  justify-content: space-between;
  padding-right: 0.2rem;
}

.label {
  padding-right: 0.267rem;
  color: #7D7D7D;
}


.btn {
  width: 1rem;
  height: 0.56rem;
  background: #1989FA;
  border-radius: 0.133rem;
  text-align: center;
  line-height: 0.5rem;
  color: #fff;
  font-size: 0.3rem;
  cursor: pointer;
  border: none;
  outline: none;
}

.ipt_box {
  margin: 0 0.4rem;
  display: flex;
  align-items: center;
}

.input-field {
  flex: 1;
  height: 0.9rem;
  padding: 0 0.267rem;
  border: none;
  outline: none;
  font-size: 0.3rem;
  box-sizing: border-box;
  border: 0.007rem solid #A8A8A8;
  border-radius: 0.133rem;
}

.sub_btn {
  margin: 0.4rem auto 0.267rem;
  height: 0.9rem;
  border-radius: 0.8rem;
  background-color: #1989FA;
  text-align: center;
  line-height: 0.9rem;
  font-weight: bold;
  font-size: 0.287rem;
  color: #FFFFFF;
  cursor: pointer;
  border: none;
  outline: none;
  transition: background-color 0.3s;
}

.sub_btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.tips {
  padding: 0.133rem 0.4rem 0.2rem;
  font-size: 0.28rem;
  color: #F50000;
  line-height: 0.4rem;
}

.sub_btn_max {
  margin: 0.2rem 0.4rem !important;
  width: auto !important;
  border-radius: 0.2rem !important;
}

.sub_btn_sed {
  background-color: #fff !important;
  border: 0.03rem solid #1989fa !important;
  color: #1989fa !important;
}

/* 订单状态页面样式 */
.TIMEOUT {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  z-index: 2;
}

.TIMEOUT img {
  display: block;
    margin: 1.6rem auto 0.2rem;
    width: 2rem;
    height: 2rem;
}

.TIMEOUT .title {
  font-weight: bold;
  font-size: 0.35rem;
  color: #020202;
  text-align: center;
}

.TIMEOUT .info {
  margin: 0.4rem 0.8rem;
  font-size: 0.3rem;
  color: #060606;
  line-height: 0.36rem;
}

.submit_utr_box {
  padding-top: 1rem;
  border-top: 0.013rem solid #F2F4F6;
}

.submit_utr_box .title {
  font-size: 0.32rem;
  color: #020202;
  font-weight: 400;
  text-align: center;
  margin-bottom: 0.4rem;
}

.ipt_box .label {
  font-size: 0.3rem;
  color: #060606;
  margin-right: 0.1rem;
  white-space: nowrap;
}

.ipt_box .label::before {
  content: '*';
  color: #F50000;
  margin-right: 0.1rem;
}

.sub_btn_state {
  background-color: #6a39f2;
  width: 4rem;
}

/* 弹窗样式 */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 1000;
}

.popup-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  border-radius: 0.333rem 0.333rem 0 0;
  padding: 0.827rem 0.533rem 0.853rem;
  box-sizing: border-box;
  max-height: 80vh;
  overflow-y: auto;
}

.popup-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6rem;
  background: white;
  border-radius: 0.133rem;
  padding-bottom: 0.533rem;
  box-sizing: border-box;
  box-shadow: 0 0.267rem 1.067rem rgba(0, 0, 0, 0.2);
}

.popup-close {
  position: absolute;
  top: 0.267rem;
  right: 0.267rem;
  font-size: 0.533rem;
  color: #999;
  cursor: pointer;
  width: 0.8rem;
  height: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.copy_popup .title {
  font-weight: bold;
  font-size: 0.4rem;
  color: #28344A;
  text-align: center;
  margin-bottom: 0.2rem;
}

.copy_popup .title span {
  font-size: 0.54rem;
}

.copy_popup .step_title {
  margin: 0.3rem auto;
  font-weight: bold;
  font-size: 0.33rem;
  color: #E66C66;
  text-align: center;
}

.copy_popup .ipt_box {
  margin: 0.2rem 0 0;
}

.qr_code_image {
  display: block;
  margin: 0 auto;
  width: 2.65rem;
  height: 2.65rem;
  background: white;
}

.tips_popup {
  margin: 0 auto;
  margin-top: 0.4rem;
  font-size: 0.28rem;
  color: #F50000;
  text-align: center;
  line-height: 0.48rem;
}


.message_box_second .title {
  margin: 0.533rem 0rem 0.2rem;
  height: 0.453rem;
  text-align: center;
  font-weight: bold;
  font-size: 0.36rem;
  color: #020202;
}

.meassage_info_se {
  margin: .3rem .6rem;
  font-size: 0.28rem;
  color: #4C4C4D;
  line-height: 0.4rem;
  text-align: center;
}

.meassage_info {
  margin: 0 0.4rem;
  font-size: 0.28rem;
  color: #4C4C4D;
  line-height: 0.4rem;
}

.btn_list_popup {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn_popup {
  flex: 1;
  height: 0.9rem;
  text-align: center;
  line-height: 0.9rem;
  font-size: 0.36rem;
  color: #6D3DF2;
  border-top: .05rem solid #F4F4F4;
}

.btn_popup_cancel { 
  color: #4C4C4D;
}

.btn_popup:nth-child(2) {
  border-left: .05rem solid #F4F4F4;
}

.tips_img {
  padding: .5rem 0 .2rem;
  display: block;
  margin: 0 auto;
  width: 1.2rem;
  height: 0.9rem;
}

/* 加载样式 */
.loading {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 2.5rem;
  height: 1.7rem;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: white;
  border-radius: .2rem;
}

.loading.active {
  display: flex;
}

.loading-spinner {
  width: 0.4rem;
  height: 0.4rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
}

.spinner_img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #eee;
}
.spinner_img .img {
  width: .5rem;
  height: .5rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  border-top-color: rgba(0, 0, 0, 0.3);
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 0.427rem;
}

/* 简化Toast样式 */
.toast-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.3rem 0.6rem;
    border-radius: 0.2rem;
    font-size: 0.3rem;
    z-index: 10000;
    max-width: 70%;
    text-align: center;
}