/* 基础样式重置 */
.quick-payment-reset * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* 弹框样式 */
.quick-payment-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }

.quick-payment-modal-overlay.active { opacity: 1; visibility: visible; }

.quick-payment-modal-container { width: 90%; max-width: 450px; background-color: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); transform: translateY(20px); transition: transform 0.3s; }

.quick-payment-modal-overlay.active .quick-payment-modal-container { transform: translateY(0); }

.quick-payment-modal-header { padding: 16px; background-color: #1989fa; color: white; text-align: center; position: relative; }

.quick-payment-modal-close { position: absolute; right: 16px; top: 8px; background: none; border: none; color: white; font-size: 20px; cursor: pointer; }

.quick-payment-modal-body { padding: 16px; }

/* 表单样式 */
.quick-payment-form-group { margin-bottom: 16px; }

.quick-payment-form-label { display: block; margin-bottom: 6px; font-weight: 500; color: #333; }

.quick-payment-form-input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; transition: border-color 0.3s; }

.quick-payment-form-input:focus { border-color: #1989fa; outline: none; }

.quick-payment-form-select { width: 100%; padding: 12px; border: 1px solid #ddd !important; border-radius: 6px; font-size: 16px; background-color: white; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8.5L1.5 4 2.5 3l3.5 3.5L9.5 3l1 1z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }

.quick-payment-form-select:focus { border-color: #1989fa; outline: none; }

/* 条件显示样式 */
.quick-payment-conditional-field { display: none; }

.quick-payment-conditional-field.active { display: block; }

/* 按钮样式 */
.quick-payment-form-button { display: block; width: 100%; padding: 14px; background-color: #1989fa; color: white; border: none; border-radius: 6px; font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color 0.3s; }

.quick-payment-form-button:hover { background-color: #0076e4; }

/* 日期时间选择器样式 */
.quick-payment-datetime-picker { display: flex; gap: 10px; }

.quick-payment-datetime-picker .quick-payment-form-input { flex: 1; }

/* 加载状态 */
.quick-payment-loading { position: relative; pointer-events: none; }

.quick-payment-loading:after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: quick-payment-spin 0.8s linear infinite; }

@keyframes quick-payment-spin {
    to { transform: rotate(360deg); }
}
/*遮罩层*/
.masklayer { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 4; display: none; background-color: #000; background: rgba(0, 0, 0, 0.36); }
.masklayer.paytoread { position: absolute; text-align: center; font-size: 25px; color: white; padding-top: 50%; z-index: 1; line-height: 2em; margin-bottom: 0px; }
.w30 { width: 30px; }
.w40 { width: 40px; }
.w50 { width: 50px; }
.w60 { width: 60px; }
.w70 { width: 70px; }
.w80 { width: 80px; }
.w100 { width: 100px; }
.w120 { width: 120px; }
.w125 { width: 125px; }
.w130 { width: 130px; }
.w140 { width: 140px; }
.w150 { width: 150px; }
.wauto { width: auto; }
.wmp100 { max-width: 100%; }
.wp98 { width: 98%; }
.wp100 { width: 100%; }
.h20 { height: 20px; }
.h50 { height: 50px; }
.h100 { height: 100px; }
.h150 { height: 150px; }
.h200 { height: 200px; }
.h250 { height: 250px; }
.h280 { height: 280px; }
.h300 { height: 300px; }
.h350 { height: 350px; }
.h380 { height: 380px; }
.h400 { height: 400px; }
.h330 { height: 330px; }
.h450 { height: 450px; }
.h460 { height: 460px; }
.h470 { height: 470px; }
.h480 { height: 480px; }
.h500 { height: 500px; }
.hp100 { height: 100%; }
.hauto { height: auto; }
/*对话框*/
.popuplayer { border-radius: 3px; position: fixed; left: 50%; top: 50%; background: white; display: none; z-index: 999; background-color: #fff; overflow: hidden; }
.popuplayer > div { position: absolute; top: 40px; left: 0; right: 0; line-height: 40px; font-size: 14px; }
.popuplayer > div:first-child { height: 40px; top: 0; background-color: #f3f3f3; cursor: all-scroll; }
.popuplayer > div:first-child > h2 { padding-left: 5px; color: #666; }
.popuplayer > div:first-child > span { position: absolute; top: 0; right: 0; bottom: 0; width: 25px; text-align: center; cursor: pointer; }
.popuplayer > div:first-child > a { position: absolute; top: 13.5px; right: 25px; height: 12px; width: 12px; text-align: center; cursor: pointer; font-size: 12px; background: url(img/winmax.png) no-repeat center bottom; background-size: 100%; }
.popuplayer > div:first-child > a.winmin { background-image: url(img/winmin.png); }
.popuplayer > div:last-child { height: 40px; top: auto; bottom: 0; text-align: right; border-top: solid 1px #e4e4e4; }
.popuplayer > div:last-child > button { background: #1abc9c; border: solid 1px #1abc9c; color: white; width: 80px; line-height: 30px; border-radius: 5px; letter-spacing: 3px; margin-right: 20px; }
.popuplayer > div:last-child > button:first-child { border-color: #ccc; background-color: white; color: #999; }
.popuplayer > div > iframe { width: 100%; height: 100%; border: 0; overflow: auto; }
.popuplayer > div > img { width: 100%; display: block; }
.popuplayer > div .infowrap, .popupwrap > div.infowrap { padding: 8px; overflow: hidden; line-height: 22px; }
.popuplayer.nofooter > div { bottom: 0; }
.popuplayer.nofooter > div:last-child { display: none; }
.popuplayer.noheader > div { top: 0; }
.popuplayer.noheader > div:first-child { display: none; }

/* 辅助文本 */
.quick-payment-help-text { font-size: 12px; color: #888; margin-top: 4px; }

/* 错误消息 */
.quick-payment-error-message { color: #f44336; font-size: 12px; margin-top: 4px; display: none; }

.quick-payment-error-message.active { display: block; }


.qrcodeview { text-align: center; margin: 10px; width: 220px; height: 220px; }
.qrcodeview.size250 { width: 250px; height: 250px; }
.qrcodeview.size200 { width: 200px; height: 200px; }
.qrcodeview img, .qrcodeview canvas { width: 100%; }

/* 成功消息 */
.quick-payment-success-message { background-color: #e8f5e9; color: #2e7d32; padding: 12px; border-radius: 6px; margin-bottom: 16px; display: none; }

.quick-payment-success-message.active { display: block; }