/* ============================================================
   聚阅AI · 支付相关样式
   1) 会员权益弹层内的「开通会员」选择区
   2) 可嵌入支付浮层（airead-pay-layer）
   3) 微信支付图标
   ============================================================ */

/* ─────────────────────────────────────────────
   1. 会员权益弹层 · 开通会员选择区
   ───────────────────────────────────────────── */
#upgrade-modal .upgrade-purchase:empty {
  display: none;
}

#upgrade-modal .upgrade-purchase {
  padding: 0 28px 4px;
}

#upgrade-modal .up-panel {
  margin-top: 16px;
  padding: 16px 18px 18px;
  border: 1px solid #e8e8f0;
  border-radius: 10px;
  background: #fafaff;
}

#upgrade-modal .up-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

#upgrade-modal .up-panel__title {
  font-size: 15px;
  font-weight: 600;
  color: #222;
}

#upgrade-modal .up-panel__close {
  font-size: 12px;
  color: #999;
  cursor: pointer;
  user-select: none;
}
#upgrade-modal .up-panel__close:hover {
  color: #4078ff;
}

/* 分组 */
#upgrade-modal .up-panel__group {
  margin-bottom: 14px;
}

/* 会员等级 / 时长类型 —— 横向并排 */
/* 会员等级（上） / 时长类型（下）—— 上下排列 */
#upgrade-modal .up-panel__row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;   /* 每组撑满整行宽度 */
}
#upgrade-modal .up-panel__row .up-panel__group {
  flex: 0 0 auto;
  min-width: 0;
}
/* 单选项组在上下排列下天然占满 100% 宽度 */
#upgrade-modal .up-panel__row .up-panel__group.is-single {
  flex: 0 0 auto;
}

#upgrade-modal .up-panel__label {
  font-size: 12px;
  color: #888;
  margin-bottom: 7px;
}

/* 选项容器 */
#upgrade-modal .up-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 时长类型 —— 两列并排 */
#upgrade-modal .up-options--row {
  flex-direction: row;
  gap: 10px;
}
#upgrade-modal .up-options--row .up-option {
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;    /* 名称/说明在上，价格在下 */
  align-items: flex-start;
  gap: 6px;
}

/* 单个选项卡片 */
#upgrade-modal .up-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e4e4ee;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
  outline: none;
}
#upgrade-modal .up-option:hover {
  border-color: #b8ccff;
}
#upgrade-modal .up-option:focus-visible {
  box-shadow: 0 0 0 2px rgba(64, 120, 255, .28);
}
#upgrade-modal .up-option.is-active {
  border-color: #4078ff;
  background: #f2f6ff;
  box-shadow: inset 0 0 0 1px #4078ff;
}

#upgrade-modal .up-option__main {
  flex: 1;
  min-width: 0;
}

#upgrade-modal .up-option__name {
  font-size: 14px;
  color: #222;
  font-weight: 500;
  line-height: 1.4;
}

#upgrade-modal .up-option__sub {
  font-size: 12px;
  color: #999;
  line-height: 1.5;
  margin-top: 2px;
}

#upgrade-modal .up-option__price {
  font-size: 13px;
  color: #666;
  white-space: nowrap;
}
#upgrade-modal .up-option__price i {
  font-style: normal;
  color: #ccc;
  margin: 0 2px;
}

#upgrade-modal .up-option__action {
  font-size: 12px;
  color: #4078ff;
  background: #eaf0ff;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
#upgrade-modal .up-option.is-active .up-option__action {
  color: #fff;
  background: #4078ff;
}

/* 支付方式选项 */
#upgrade-modal .up-option--method .up-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

#upgrade-modal .up-option__check {
  color: #4078ff;
  font-size: 15px;
  font-weight: 700;
}

#upgrade-modal .up-wx-fallback {
  font-size: 22px;
  line-height: 1;
}

/* 底部金额 + 提交 */
#upgrade-modal .up-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  margin-top: 2px;
  border-top: 1px solid #ececf4;
}

#upgrade-modal .up-panel__amount {
  font-size: 13px;
  color: #666;
}
#upgrade-modal .up-panel__amount span {
  font-size: 19px;
  font-weight: 700;
  color: #e64340;
  margin-left: 2px;
}

#upgrade-modal .up-panel__submit {
  padding: 9px 22px;
  border: none;
  border-radius: 6px;
  background: #4078ff;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .18s;
  white-space: nowrap;
}
#upgrade-modal .up-panel__submit:hover:not(:disabled) {
  opacity: .88;
}
#upgrade-modal .up-panel__submit:disabled {
  background: #b8c4d8;
  cursor: not-allowed;
}

#upgrade-modal .up-panel__tip {
  margin: 8px 0 0;
  font-size: 12px;
  color: #e64340;
  min-height: 16px;
}

/* ─────────────────────────────────────────────
   2. 可嵌入支付浮层
   ───────────────────────────────────────────── */
.airead-pay-layer {
  display: none;
  position: fixed;
  inset: 0;
  /* 必须高于权益弹层(#upgrade-modal z-index:99999)，
     否则支付浮层会被完全遮住 —— 用户只看到「正在创建订单…」按钮，
     感知就是「卡住了」。这里取 100002。 */
  z-index: 100002;
}
.airead-pay-layer.is-open {
  display: block;
}

/* ── 嵌入模式：叠加在宿主弹层（如「聚阅会员权益」）内部 ──
   需求：点击支付时，二维码图层显示在权益弹层**之上**，
   而不是另开一个全屏遮罩弹窗。
   做法：挂载到宿主内部 + 绝对定位覆盖宿主可视区 + 无全屏遮罩。 */
.airead-pay-layer.is-embedded {
  /* 宿主 .modal-box 有 overflow-y:auto，绝对定位会相对滚动内容区，
     浮层会跑到负坐标 → 改用 fixed + 动态计算宿主可视区矩形。
     top/left/width/height 由 JS 在打开时按宿主位置写入 inline style。 */
  position: fixed;
  z-index: 100003;
}
.airead-pay-layer.is-embedded .airead-pay-layer__overlay {
  /* 嵌入模式不用全屏遮罩，只做一层轻微压暗表示层级 */
  background: rgba(0, 0, 0, .25);
}
/* 优先级必须高于 #upgrade-modal .modal-box（ID 选择器 width:auto），
   否则卡片会被撑满整个弹层 */
#upgrade-modal .airead-pay-layer.is-embedded .airead-pay-layer__box,
.airead-pay-layer.is-embedded .airead-pay-layer__box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 340px;
  max-width: 92%;
  max-height: 92%;
  overflow-y: auto;
  z-index: 11;
  /* 嵌入模式：改为「卡片」形态（无标题栏，关闭按钮浮于右上），
     避免与宿主弹层的标题栏视觉打架 */
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.airead-pay-layer.is-embedded .modal-topbar {
  display: none;
}
.airead-pay-layer.is-embedded .airead-pay-layer__close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 12;
  width: 24px;
  height: 24px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  color: #999;
  background: rgba(0, 0, 0, .04);
  cursor: pointer;
}
.airead-pay-layer.is-embedded .airead-pay-layer__close:hover {
  color: #555;
  background: rgba(0, 0, 0, .08);
}

.airead-pay-layer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
}

.airead-pay-layer__box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  max-width: 94vw;
  max-height: 92vh;
  overflow-y: auto;
}

.airead-pay-layer__body {
  padding: 22px 24px 20px;
  text-align: center;
}

.airead-pay-layer__goods {
  margin: 0 0 4px;
  font-size: 14px;
  color: #666;
}

.airead-pay-layer__amount {
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 700;
  color: #222;
}

.airead-pay-layer__qr {
  display: flex;
  justify-content: center;
  padding: 10px 0 6px;
}
.airead-pay-layer__qr img,
.airead-pay-layer__qr canvas {
  max-width: 100%;
  height: auto;
}

.airead-pay-layer__status {
  margin: 10px 0 0;
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}
.airead-pay-layer__status.is-success {
  color: #07C160;
  font-weight: 600;
}

.airead-pay-layer__actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.airead-pay-layer__btn {
  padding: 8px 22px;
  border: 1px solid #dcdce6;
  border-radius: 6px;
  background: #fff;
  color: #444;
  font-size: 14px;
  cursor: pointer;
}
.airead-pay-layer__btn.is-primary {
  background: #4078ff;
  border-color: #4078ff;
  color: #fff;
}
.airead-pay-layer__btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.airead-pay-layer__sandbox {
  margin: 10px 0 0;
  font-size: 12px;
  color: #999;
  line-height: 1.6;
}

/* ─────────────────────────────────────────────
   3. 微信支付图标
   ───────────────────────────────────────────── */
.airead-wx-icon {
  display: block;
}

.airead-wx-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 支付页的支付方式卡片适配 */
.payment-method {
  position: relative;
  cursor: pointer;
}
.payment-method.is-disabled {
  display: none;
}
.payment-method__check {
  margin-left: auto;
  color: #07C160;
  font-weight: 700;
  font-size: 15px;
}