/* 收银台专有样式：支付方式选择、二维码、等待/完成态。
   弹窗骨架（原 .wb-dialog / .wb-dialog-head / .wb-dialog-close / .wb-dialog-body）已于 2026-09-20
   迁到全站通用样式 ui.css（.gr-dialog 系列），全站只有那一份，不再在这里定义。
   本文件只保留收银台自己的部分，类名仍为 wb-*，由「会员中心租赁订单」与
   「确认订单页 /robots/checkout」两处收银台共用。 */

.wb-pay-choices {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px
}

.wb-pay-choices button {
   border: 1px solid #d8dbe0;
   background: #fff;
   color: #313a46;
   border-radius: 10px;
   padding: 18px;
   font-size: 15px;
   font-weight: 700;
   cursor: pointer
}

.wb-pay-choices button[data-variant="primary"] {
   border-color: #c51b21;
   background: #c51b21;
   color: #fff
}

.wb-pay-choices button:disabled {
   opacity: .55;
   cursor: not-allowed
}

/* 扫码支付：二维码由服务端渲染成图片，这里只负责排版 */
.wb-pay-qr {
   display: grid;
   justify-items: center;
   gap: 10px;
   text-align: center
}

.wb-pay-qr img {
   width: 220px;
   height: 220px;
   padding: 8px;
   border: 1px solid #e5e8ec;
   border-radius: 10px;
   background: #fff
}

.wb-pay-qr b {
   color: #c51b21;
   font-size: 24px
}

.wb-pay-qr span {
   color: #4b5563
}

.wb-pay-qr small {
   color: #8b93a1
}

.wb-pay-qr-actions {
   display: flex;
   gap: 12px;
   margin-top: 4px
}

.wb-pay-qr-actions button {
   border: 1px solid #d8dbe0;
   background: #fff;
   color: #313a46;
   border-radius: 10px;
   padding: 9px 18px;
   font-weight: 700;
   cursor: pointer
}

.wb-pay-qr-actions button[data-variant="primary"] {
   border-color: #c51b21;
   background: #c51b21;
   color: #fff
}

.wb-pay-qr-actions button:disabled {
   opacity: .6;
   cursor: not-allowed
}

.wb-pay-qr-state {
   margin: 0;
   color: #8b93a1
}

.wb-pay-qr-state.ok {
   color: #167743;
   font-weight: 700
}

/* 等待支付时转圈（两处收银台共用） */
.wb-spin {
   display: inline-block;
   width: 14px;
   height: 14px;
   margin-right: 6px;
   border: 2px solid #e3e6ea;
   border-top-color: #c51b21;
   border-radius: 50%;
   vertical-align: -2px;
   animation: wb-spin .8s linear infinite
}

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

/* 完成态的绿色圆圈对勾（内联 SVG，不引图标库） */
.wb-ok-icon {
   width: 20px;
   height: 20px;
   margin-right: 6px;
   vertical-align: -4px
}

@media (max-width:650px) {
   .wb-pay-choices {
      grid-template-columns: 1fr
   }
}