/* ============================================================
   qiaozi商城 · 液态玻璃(Liquid Glass) + 高级动态UI 主题层
   支持后台主题设置参数覆盖(header 注入 :root 变量)与 body 开关类
   关闭开关时前台不加载本文件,自然回退 mall.css 默认风格
   ============================================================ */
:root{
  /* 玻璃底(alpha由后台注入,默认62%) */
  --lg-bg-a:      rgba(255,255,255,.62);
  --lg-bg-b:      rgba(255,255,255,.9);
  /* 玻璃模糊强度(px) */
  --lg-blur-card: 16px;
  --lg-blur-bar:  22px;
  --lg-blur-head: 16px;
  /* 圆角(px) */
  --lg-radius:    16px;
  /* 品牌渐变三色(后台可改) */
  --lg-c1:        #ff9a44;
  --lg-c2:        #ff5e3a;
  --lg-c3:        #ff2e63;
  /* rgb三元组(用于低透明渐变,由hex自动生成) */
  --lg-c1-rgb:    255,154,68;
  --lg-c2-rgb:    255,94,58;
  --lg-c3-rgb:    255,46,99;
  --lg-grad:      linear-gradient(135deg, var(--lg-c1) 0%, var(--lg-c2) 55%, var(--lg-c3) 100%);
  --lg-grad-soft: linear-gradient(135deg, rgba(var(--lg-c1-rgb),.16), rgba(var(--lg-c3-rgb),.10));
  --lg-brd:       rgba(255,255,255,.9);
  --lg-shadow:    0 10px 34px rgba(31,45,88,.10);
  --lg-shadow-h:  0 18px 46px rgba(31,45,88,.16);
}

/* ============ 动态渐变底色 + 流动光斑 ============ */
html{ background:#eef1f7; }
body{ background:transparent; }
body::before{
  content:""; position:fixed; inset:-22%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(760px 480px at 12% -4%,  rgba(255,183,120,.38), transparent 62%),
    radial-gradient(620px 460px at 96% 8%,   rgba(122,178,255,.34), transparent 60%),
    radial-gradient(640px 520px at 46% 116%, rgba(255,132,196,.24), transparent 62%),
    linear-gradient(175deg,#fdf4ec 0%, #eef2fa 46%, #f4eefb 100%);
  animation: lg-orb 20s ease-in-out infinite alternate;
}
@keyframes lg-orb{
  0%  { transform:translate3d(-2%,-1%,0) scale(1); }
  50% { transform:translate3d(2.2%,1.8%,0) scale(1.05); }
  100%{ transform:translate3d(-1.8%,2.2%,0) scale(.97); }
}

/* ============ 玻璃容器统一质感 ============ */
.page-box, .panel, .goods-card, .order-card, .addr-card, .checkout-box,
.member-side, .filter-bar, .coupon-card, .detail-wrap, .detail-content,
.login-wrap, .modal, .notice-bar{
  background: var(--lg-bg-b);
  -webkit-backdrop-filter: blur(var(--lg-blur-card)) saturate(170%);
  backdrop-filter: blur(var(--lg-blur-card)) saturate(170%);
  border:1px solid var(--lg-brd);
  box-shadow: var(--lg-shadow), inset 0 1px 0 rgba(255,255,255,.85);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .page-box, .panel, .goods-card, .order-card, .addr-card, .checkout-box,
  .member-side, .filter-bar, .coupon-card, .detail-wrap, .detail-content,
  .login-wrap, .modal, .notice-bar{ background: var(--lg-bg-a); }
}
/* 覆盖原纯白底 */
.page-box, .panel, .goods-card, .order-card, .addr-card, .checkout-box,
.member-side, .filter-bar, .coupon-card, .detail-wrap, .detail-content,
.login-wrap, .modal, .banner-wrap{ background-color:transparent; }

/* ============ 移动顶栏:悬浮液态玻璃 ============ */
@media (max-width:768px){
  .m-header{
    background: rgba(255,255,255,.5);
    -webkit-backdrop-filter: blur(var(--lg-blur-head)) saturate(180%);
    backdrop-filter: blur(var(--lg-blur-head)) saturate(180%);
    border-bottom:1px solid rgba(255,255,255,.75);
    box-shadow:0 4px 22px rgba(31,45,88,.07);
  }
  .m-logo{
    background:var(--lg-grad);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  .m-search input{
    background:rgba(255,255,255,.72);
    border-color:rgba(var(--lg-c2-rgb),.45);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  }
  .m-search button{ background-image:var(--lg-grad); box-shadow:0 4px 12px rgba(var(--lg-c2-rgb),.35); }
}

/* ============ 底部导航:悬浮胶囊液态玻璃 ============ */
@media (max-width:768px){
  .m-tabbar{
    left:10px; right:10px; bottom:10px;
    bottom:max(10px, env(safe-area-inset-bottom));
    width:auto; height:62px; border-radius:24px;
    background: var(--lg-bg-b);
    border:1px solid var(--lg-brd);
    border-top:1px solid var(--lg-brd);
    box-shadow:0 12px 36px rgba(31,45,88,.16), inset 0 1px 0 rgba(255,255,255,.9);
    -webkit-backdrop-filter: blur(var(--lg-blur-bar)) saturate(190%);
    backdrop-filter: blur(var(--lg-blur-bar)) saturate(190%);
    padding:4px 8px;
    animation: lg-tabbar-in .55s cubic-bezier(.2,.85,.3,1.15) both;
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
    .m-tabbar{ background: var(--lg-bg-a); }
  }
  body{ padding-bottom:86px; }

  .m-tab{
    border-radius:18px; margin:0 2px;
    transition:transform .22s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, box-shadow .25s;
  }
  .m-tab:active{ transform:scale(.92); }
  .m-tab-icon{ transition:transform .25s cubic-bezier(.2,.9,.3,1.6); display:inline-block; }
  .m-tab.on{
    color:#fff; font-weight:600;
    background: var(--lg-grad);
    box-shadow:0 8px 20px rgba(var(--lg-c2-rgb),.38);
  }
  .m-tab.on .m-tab-icon{ transform:translateY(-1px) scale(1.12); }
  .m-tab.on .m-tab-badge{ background:#fff; color:var(--lg-c3); }

  @keyframes lg-tabbar-in{
    from{ transform:translateY(120%); opacity:0; }
    to  { transform:translateY(0); opacity:1; }
  }
}

/* ============ PC 头部轻玻璃 ============ */
.topbar{ background:rgba(20,24,38,.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.header{
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter: blur(var(--lg-blur-head)) saturate(170%);
  backdrop-filter: blur(var(--lg-blur-head)) saturate(170%);
  position:sticky; top:0; z-index:998;
  box-shadow:0 4px 22px rgba(31,45,88,.06);
  border-bottom:1px solid rgba(255,255,255,.6);
}
.nav-bar{
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(calc(var(--lg-blur-head) - 2px)) saturate(160%);
  backdrop-filter: blur(calc(var(--lg-blur-head) - 2px)) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.6);
}

/* ============ 卡片:悬停高级动效 ============ */
.goods-card{
  transition:transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s, border-color .3s;
  position:relative; overflow:hidden;
}
.goods-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 65%);
  transform:translateX(-130%);
}
.goods-card:hover{
  transform:translateY(-7px) !important;
  box-shadow:var(--lg-shadow-h), inset 0 1px 0 rgba(255,255,255,.9);
  border-color:rgba(var(--lg-c2-rgb),.6);
  z-index:2;
}
.goods-card:hover::after{ animation:lg-sheen .85s ease; }
.goods-card:hover .g-img{ transform:scale(1.06); }
.goods-card .g-img{ transition:transform .5s cubic-bezier(.2,.8,.2,1); }
@keyframes lg-sheen{ to{ transform:translateX(130%); } }

/* ============ 按钮:液态渐变 + 微光 ============ */
.btn-primary, .btn-danger{
  background-image:var(--lg-grad);
  background-size:150% 150%;
  border:0;
  transition:background-position .4s ease, transform .2s ease, box-shadow .3s ease;
  box-shadow:0 6px 16px rgba(var(--lg-c2-rgb),.30);
}
.btn-primary:hover, .btn-danger:hover{
  background-position:100% 0;
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(var(--lg-c2-rgb),.42);
}
.btn-primary:active, .btn-danger:active{ transform:translateY(1px) scale(.98); }

/* ============ 区块入场动画 ============ */
.section, .home-cate, .member-layout{
  animation:lg-fadeUp .6s ease both;
}
.home-cate{ animation-delay:.05s; }
.section:nth-of-type(2){ animation-delay:.07s; }
.section:nth-of-type(3){ animation-delay:.14s; }
.section:nth-of-type(4){ animation-delay:.21s; }
.section:nth-of-type(5){ animation-delay:.28s; }
@keyframes lg-fadeUp{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}

/* 商品卡交错入场 */
.goods-grid > .goods-card{ animation:lg-card-in .5s ease both; }
.goods-grid > .goods-card:nth-child(1){ animation-delay:.02s; }
.goods-grid > .goods-card:nth-child(2){ animation-delay:.06s; }
.goods-grid > .goods-card:nth-child(3){ animation-delay:.10s; }
.goods-grid > .goods-card:nth-child(4){ animation-delay:.14s; }
.goods-grid > .goods-card:nth-child(5){ animation-delay:.18s; }
.goods-grid > .goods-card:nth-child(6){ animation-delay:.22s; }
.goods-grid > .goods-card:nth-child(7){ animation-delay:.26s; }
.goods-grid > .goods-card:nth-child(8){ animation-delay:.30s; }
@keyframes lg-card-in{
  from{ opacity:0; transform:translateY(18px) scale(.98); }
  to  { opacity:1; transform:none; }
}

/* ============ 液态玻璃修饰细节 ============ */
.member-side a.on{
  background:var(--lg-grad-soft);
  border-left:3px solid var(--lg-c2);
}
.modal{
  background:#fff;
  border:1px solid rgba(31,45,88,.08);
  box-shadow:0 30px 80px rgba(20,26,50,.25);
}
#toast{
  background:rgba(30,34,52,.78);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}

/* 圆角统一 */
.goods-card, .page-box, .panel, .order-card, .addr-card, .checkout-box,
.member-side, .filter-bar, .detail-wrap, .detail-content{ border-radius:var(--lg-radius); }
.coupon-card{ border-radius:calc(var(--lg-radius) + 2px); }
.home-cate{ border-radius:calc(var(--lg-radius) + 2px); }

/* ============ 移动端性能:卡片关闭昂贵blur,保留光影质感 ============ */
@media (max-width:768px){
  .goods-card, .page-box, .panel, .order-card, .addr-card, .member-side,
  .filter-bar, .checkout-box, .detail-wrap, .detail-content, .coupon-card{
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    background:rgba(255,255,255,.84);
  }
  .banner-wrap{ background:transparent; border:none; box-shadow:var(--lg-shadow); }
}

/* ============ body 开关类: 后台可分别关闭 光斑/入场动画 ============ */
body.orb-off::before{ animation:none; }
body.anim-off .section,
body.anim-off .home-cate,
body.anim-off .member-layout,
body.anim-off .goods-grid > .goods-card,
body.anim-off .goods-card:hover::after{ animation:none !important; }
body.anim-off .goods-card,
body.anim-off .goods-card .g-img{ transition:none !important; }

/* ============ 动效减弱偏好 ============ */
@media (prefers-reduced-motion: reduce){
  body::before, .m-tabbar, .section, .home-cate, .member-layout,
  .goods-card, .goods-grid > .goods-card{
    animation:none !important;
  }
  .goods-card, .goods-card .g-img, .btn-primary, .btn-danger{ transition:none !important; }
}