/* ====== 基础样式 ====== */
/*html { overflow-y: scroll; }*/
.clear { clear: both; }
/* 弹窗蒙层 - 弹窗外框 */
.pop-coupon { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 100; display: block; text-align: center; color: #333; font-size: 12PX; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", "微软雅黑", sans-serif;; }
/* 用于居中的辅助元素 */
.pop-coupon::after { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
/* 弹窗容器 */
.couponPop { width: 400px; background-color: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); display: inline-block; vertical-align: middle; position: relative; opacity: 1; transform: scale(1); transition: opacity 0.3s ease, transform 0.3s ease; margin: 0; padding: 0; }
/* 弹窗头部 */
.pop-header { padding: 12px; position: relative; text-align: center; background-color: #f4f4f4; border-radius: 10px 10px 0 0; vertical-align: middle }
.pop-title { font-size: 14px; font-weight: 500; color: #141414; line-height: 20px; display: inline-block; vertical-align: middle; }
.pop-header .price { font-size: 16px; line-height: 20px; font-weight: 500; color: #f2a128; vertical-align: middle; }
.close-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; width: 24px; height: 24px; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.close-btn .icon { width: 14px; height: 14px; }
/* Hover状态仅增加底色，无放大和过渡动画 */
.close-btn:hover { background-color: #fff; }
/* 弹窗内容 */
.pop-body { padding: 12px; background-color: #fff; position: relative; }
.pop-body .top { padding: 12px; background-color: #f4f4f4; border-radius: 6px 6px 0 0; text-align: left; display: inline-block; width: calc(100% - 24px); vertical-align: middle; }
.pop-body .top .top-left { font-size: 16px; line-height: 20px; color: #141414; font-weight: 500; text-align: left; display: block; float: left; vertical-align: middle; }
.pop-body .top .top-right { color: #515151; font-size: 14px; line-height: 18px; position: relative; display: block; vertical-align: middle; text-align: right; }
/* 弹窗底部 */
.pop-footer { padding: 12px; border-radius: 0 0 10px 10px; overflow: hidden; }
.confirm-btn { width: 100%; height: 44px; border-radius: 100px; font-size: 16px; line-height: 20px; font-weight: 500; cursor: pointer; border: none; background-color: #462F90; color: white; }
.confirm-btn:hover { background-color: #291762; }
/* ========= 传统布局版 ========= */
.coupon-list { padding: 0 12px 6px; width: 100%; overflow: hidden; box-sizing: border-box; background-color: #f4f4f4; }
/* 单张券外壳 */
.select-card { position: relative; width: 100%; height: 62px; background: #fff; border-radius: 8px; box-sizing: border-box; vertical-align: middle; text-align: center; transform: translateZ(0); }
.select-card-border { width: 351px; height: 61.5px; border: .5px solid #e0e0e0; border-radius: 8px; }
.select-card-border::before { content: ""; position: absolute; top: -.5px; width: 14px; right: 132px; height: 7px; background: #f4f4f4; border: .5px solid #e0e0e0; border-top: none; border-radius: 0 0 14px 14px; z-index: 2; }
.select-card-border:after { content: ""; position: absolute; bottom: -.5px; width: 14px; right: 132px; height: 7px; background: #f4f4f4; border: .5px solid #e0e0e0; border-bottom: none; border-radius: 14px 14px 0px 0px; z-index: 2; }
.left-part { float: left; width: 200px; box-sizing: border-box; position: relative; display: block; text-align: left; padding: 12px 16px; }
.right-part { float: right; position: relative; text-align: right; box-sizing: border-box; display: block; padding-right: 12px; }
/* 左侧文字垂直居中 */
.left-part .title { line-height: 18px; font-size: 14px; font-weight: 500; color: #141414; margin-bottom: 4px; }
.s-border { float: left; width: 1px; height: 35px; margin: 13px 12px; border-left: 0.5px dashed #d6d6d6; display: inline-block; vertical-align: middle; }
/* 右侧价格区 */
.right-part .left { float: left; position: relative; display: block; vertical-align: middle; min-width: 95px; padding: 12px 14px 12px 0px; }
.right-part .left .title { font-size: 18px; line-height: 22px; color: #f44336; font-weight: 500; white-space: nowrap; }
.right-part .left .title.free { color: #5F4EAF; }
.text3 { color: #8E8E8E; }
.text3.red { color: #f44336; }
/* 推荐角标 */
.label-recommend { position: absolute; top: 0px; right: 0px; border-radius: 0 8px 0 8px; background: linear-gradient(91.37deg, #ff9b43, #f44336); padding: 2px 8px; font-size: 12px; line-height: 14px; color: #fff; font-weight: 500; }
/* 单选按钮 */
.radio-item { float: left; display: block; vertical-align: middle; margin-top: 23px; }
.radio-circle { display: inline-block; width: 16px; height: 16px; border: 1px solid #ccc; border-radius: 50%; background: transparent; transition: all .02s ease; position: relative; cursor: pointer; }
.radio-circle.checked { background: #f44336; border-color: #f44336; }
.radio-circle.checked::after { content: ""; position: absolute; width: 4px; height: 8px; top: 2px; left: 5px; border: 1.5px solid #fff; border-top: none; border-left: none; transform: rotate(45deg); }
.coupon-content { max-height: calc(62px * 5 + 9px * 4); overflow-y: auto; background-color: #f4f4f4; position: relative; /* 隐藏原生滚动条 */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 和 Edge */ border-radius: 0 0 8px 8px; padding-bottom: 6px; margin-bottom: 12px; }
/* 隐藏WebKit浏览器原生滚动条 */
.coupon-content::-webkit-scrollbar { display: none; }
/* 自定义滚动条轨道 - 绝对定位 */
.coupon-scrollbar-track { position: absolute; top: 4px; right: 4px; bottom: 4px; width: 2px; background-color: #e0e0e0; border-radius: 1px; z-index: 10; }
/* 自定义滚动条滑块 - 绝对定位 */
.coupon-scrollbar-thumb { position: absolute; right: 4px; width: 2px; background-color: #cfcfcf; border-radius: 1px; cursor: pointer; z-index: 11; transition: height .1s, top .1s; will-change: transform; }
/* 滑块hover效果 */
.coupon-scrollbar-thumb:hover { background-color: #888; }
.p-border { border: 0.5px solid #ebebeb; }
.pop-list { padding: 0px 12px; width: 100%; position: relative; box-sizing: border-box; overflow: hidden; /* 清除浮动 */ }
.pop-list2 { padding: 12px 12px 0px 12px; width: 100%; position: relative; box-sizing: border-box; overflow: hidden; /* 清除浮动 */ text-align: left; font-size: 12px; line-height: 14px; }
.pop-list:after { content: ""; display: table; clear: both; }
.pop-list-price { margin-bottom: 12px; overflow: hidden; /* 清除浮动 */ text-align: center; vertical-align: middle; }
.pop-list-price:after { content: ""; display: table; clear: both; }
/* 左侧文字 */
.pop-list-price_txt { float: left; font-weight: 500; margin-right: 12px; font-size: 16px; line-height: 20px; height: 32px; /* 与右侧高度保持一致 */ line-height: 32px; /* 垂直居中 */ }
/* 右侧整组容器 */
.pop-list-price_right { float: right; font-size: 22px; line-height: 32px; white-space: nowrap; }
.pop-list-price_tag { font-size: 12px; line-height: 14px; color: #f2a128; float: left; line-height: 32px; margin-right: 8px; }
.pop-list-price_red { color: #f44336; font-size: 22px; line-height: 32px; font-weight: 500; }
.under-text { margin-top: 4px; text-decoration: underline; margin-bottom: 12px; }
.under-text .link { text-decoration: none; }
.under-text.gray { color: #9f9fa9; }
.under-text.red { color: #f44336; }