﻿/* =========================
   券包列表
========================= */
.pack-list{padding:0 13px;box-sizing:border-box;margin-top:10px;}
/* =========================
   券包卡片
========================= */
.pack-card{position:relative;display:flex;align-items: center;width:100%;height:auto;min-height:78px;padding: 4px 8px 4px 2px;margin-bottom:12px;box-sizing:border-box;overflow:hidden;border-radius:10px;border:0.5px solid #FFF;background: linear-gradient(180deg, rgb(255 255 255 / 90%) 0%, rgb(255 255 255 / 72%) 100%);}
/* =========================
   左侧图标
========================= */
.pack-icon { display: block; flex: 0 0 72px; width: 72px; height: 72px; margin-right: 2px; align-self: flex-start; object-fit: contain; border-radius: 8px; }
/* =========================
   中间内容
========================= */
.pack-info{flex:1 1 0;min-width:0;padding-right:2px;}
/* 券包名称 */
.pack-name{margin-bottom:0;line-height:20px;font-size:15px;font-weight:500;color:#222;overflow-wrap:anywhere;}
/* =========================
   券包描述：自动换行
========================= */
.pack-desc{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;column-gap:3px;row-gap:1px;width:100%;min-width:0;margin-top:3px;line-height:16px;font-size:12px;color:#444;white-space:normal;}
/* 每张券优先完整排列 */
.pack-desc span{display:inline-block;flex:0 1 auto;width:auto;max-width:100%;margin:0;white-space:normal;overflow-wrap:anywhere;}
/* 券数量 */
.pack-desc em,.pack-num{margin-left:0;font-style:normal;font-weight:500;color:#F04438;white-space:nowrap;}
/* 竖向分隔线 */
.pack-divider{display:inline-block;flex:0 0 1px;width:1px;height:11px;margin:0 2px;background:rgba(0,0,0,.12);}
/* =========================
   有效期
========================= */
.pack-valid{margin-top:3px;line-height:15px;font-size:12px;color:#999;}
/* =========================
   右侧操作区
========================= */
.pack-action{flex:0 0 auto;display:flex;align-items:flex-end;justify-content:center;align-self:center;margin-left:4px;}
/* =========================
   右上角限购角标
========================= */
.pack-limit{position:absolute;top:0;right:0;height:22px;line-height:22px;padding:0 11px;border-radius:0 10px 0 10px;background:linear-gradient(90deg,rgba(255,113,121,0.08) 0%,rgba(255,92,105,0.18) 100%);font-size:11px;font-weight:500;color:#E6535E;white-space:nowrap;}
/* =========================
   价格按钮
========================= */
.pack-price{min-width:84px;height:30px;padding:0 8px;margin-top:8px;border:0;border-radius:100px;background:linear-gradient(90deg,#FF935C 0%,#FF3F50 100%);font-size:12px;color:#FFF;white-space:nowrap;display:flex;align-items:center;justify-content:center;box-sizing:border-box;box-shadow:0 4px 10px rgba(255,76,76,0.15);}
.pack-price strong{margin-right:2px;font-size:14px;font-weight:500;}
/* =========================
   已达购买上限
========================= */
.pack-price-disabled{min-width:84px;background:rgba(0,0,0,.32);font-size:11.5px;font-weight:400;box-shadow:none;}
/* =========================
   小屏幕 <= 375px
========================= */
@media screen and (max-width: 375px)
{
   .pack-card { min-height: 74px; padding: 5px 5px 5px 2px; }
   .pack-icon { flex-basis: 52px; width: 64px; height: 64px; margin-right: 4px; flex: 0 0 64px; }
    .pack-name{font-size:13px;}
    .pack-desc{column-gap:2px;row-gap:1px;margin-top:3px;line-height:15px;font-size:11.5px;}
    .pack-divider{margin:0 1px;}
    .pack-valid{margin-top:3px;font-size:11.5px;}
    .pack-action{margin-left:2px;}
    .pack-price{min-width:76px;padding:0 3px;margin-top: 10px;}
    .pack-price strong{font-size:13px;}
    .pack-price-disabled{font-size:11px;}
    .pack-limit{padding:0 9px;font-size:11px;}
}
/* =========================
   大屏幕 414px - 430px
========================= */
@media screen and (min-width: 414px) and (max-width: 430px)
{   
    .pack-icon { display: block; flex: 0 0 48px; width: 48px; height: 48px; margin-right: 12px;}
    .pack-list{padding-left:15px;padding-right:15px;}
    .pack-card{min-height:82px;padding:8px 9px 8px 6px;margin-bottom:13px;}
    .pack-icon{flex-basis:66px;width:66px;height:66px;margin-right:7px;}
    .pack-info{padding-right:3px;}
    .pack-name{line-height:21px;font-size:15.5px;font-weight:600;}
    .pack-desc{column-gap:3px;row-gap:1px;margin-top:3px;line-height:17px;font-size:12.5px;}
    .pack-valid{margin-top:3px;line-height:15px;font-size:12.5px;}
    .pack-action{margin-left:5px;}
    .pack-limit{height:23px;line-height:23px;padding:0 12px;font-size:11.5px;}
    .pack-price{min-width:88px;height:31px;padding:0 9px;margin-top:0;font-size:12.5px;}
    .pack-price strong{margin-right:2px;font-size:14.5px;}
    .pack-price-disabled{min-width:88px;font-size:11.5px;}
}


/*温馨提示*/

.pack-note { margin: 8px 13px 16px; padding: 12px; box-sizing: border-box; border-radius: 10px; border: 0.5px solid rgba(255, 255, 255, .9); background: linear-gradient(180deg, rgb(255 255 255 / 90%) 0%, rgb(255 255 255 / 72%) 100%); }
.pack-note-title { margin-bottom: 6px; line-height: 18px; font-size: 14px; font-weight: 500; color: #333; }
.pack-note-list{display:flex;flex-direction:column;gap:4px;}
.pack-note-item { line-height: 16px; font-size: 12px; font-weight: 400; color: #8a8a8a; }
