/* ==================================================
   04、订单  基础样式
   移动优先，单列布局，安全区适配
   ================================================== */
:root{
    --main:#1F7A5C;
    --main-dark:#155B43;
    --main-light:#E8F4EF;
    --text:#1C1F1D;
    --text-2:#6B7271;
    --text-3:#9AA09E;
    --line:#EBEEEC;
    --bg:#F5F7F6;
    --card:#FFFFFF;
    --red:#D93A2B;
    --radius:12px;
    --bar-h:48px;
    --tab-h:56px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
a{text-decoration:none;color:inherit;}
img{border:0;display:block;}
input,textarea,button{font-family:inherit;font-size:inherit;color:inherit;}
html{
    font-size:16px;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
    -webkit-text-size-adjust:100%;
}
body{
    background:var(--bg);
    color:var(--text);
    line-height:1.5;
    padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));
}

/* ---------- 顶部栏 ---------- */
.bar{
    position:sticky;top:0;z-index:20;
    height:var(--bar-h);
    padding-top:env(safe-area-inset-top);
    height:calc(var(--bar-h) + env(safe-area-inset-top));
    display:flex;align-items:center;
    background:var(--card);
    border-bottom:1px solid var(--line);
}
.bar h1{
    flex:1;text-align:center;
    font-size:17px;font-weight:600;
}
.bar-back{
    width:48px;height:var(--bar-h);
    display:flex;align-items:center;justify-content:center;
    font-size:26px;line-height:1;color:var(--text);
    padding-bottom:3px;
}

/* ---------- 页面容器 ---------- */
.page{padding:12px 14px 20px;}

/* ---------- 首屏 ---------- */
.hero{
    background:linear-gradient(135deg,var(--main) 0%,#2E9A76 100%);
    color:#fff;border-radius:var(--radius);
    padding:20px 18px;margin-bottom:14px;
    box-shadow:0 6px 16px rgba(31,122,92,.18);
}
.hero.simple{padding:18px;}
.hero-hi{font-size:20px;font-weight:600;letter-spacing:.5px;}
.hero-sub{font-size:13px;opacity:.85;margin-top:6px;}
.hero-sub b{font-size:16px;}

/* ---------- 快捷入口 ---------- */
.quick{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.quick-item{
    display:flex;align-items:center;gap:12px;
    background:var(--card);border-radius:var(--radius);
    padding:16px;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.quick-item.main{background:var(--main-light);}
.quick-ico{
    width:40px;height:40px;flex:0 0 40px;
    border-radius:10px;background:var(--main);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:20px;line-height:1;
}
.quick-txt{display:flex;flex-direction:column;}
.quick-txt b{font-size:16px;}
.quick-txt i{font-style:normal;font-size:12px;color:var(--text-2);margin-top:2px;}

/* ---------- 卡片 ---------- */
.card{
    background:var(--card);border-radius:var(--radius);
    margin-bottom:14px;overflow:hidden;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.card-hd{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 16px 10px;
}
.card-hd h2{font-size:15px;font-weight:600;}
.card-hd a{font-size:13px;color:var(--text-2);}

/* ---------- 列表 ---------- */
.list{padding:0 16px 6px;}
.row{
    display:flex;align-items:center;gap:12px;
    padding:13px 0;
    border-bottom:1px solid var(--line);
}
.row:last-child{border-bottom:0;}
.row-main{flex:1;display:flex;flex-direction:column;min-width:0;}
.row-main b{font-size:15px;font-weight:500;}
.row-main i{font-style:normal;font-size:12px;color:var(--text-3);margin-top:3px;}
.row-side{font-size:15px;color:var(--main);white-space:nowrap;}

/* ---------- 键值信息 ---------- */
.kv{padding:2px 16px 12px;}
.kv>div{display:flex;justify-content:space-between;padding:7px 0;font-size:14px;}
.kv span{color:var(--text-2);}
.kv b{font-weight:500;}

/* ---------- 表单 ---------- */
.form{background:var(--card);border-radius:var(--radius);padding:4px 16px 16px;margin-bottom:14px;}
.field{padding:12px 0;border-bottom:1px solid var(--line);}
.field:last-of-type{border-bottom:0;}
.field label{display:block;font-size:13px;color:var(--text-2);margin-bottom:7px;}
.field input,.field textarea{
    width:100%;border:0;outline:0;background:transparent;
    font-size:16px;padding:4px 0;
}
.field textarea{resize:none;line-height:1.6;}
.field-row{display:flex;align-items:center;gap:10px;}
.btn-code{
    flex:0 0 auto;border:0;background:var(--main-light);color:var(--main);
    font-size:13px;padding:8px 12px;border-radius:8px;
}
.btn{
    display:block;width:100%;border:0;border-radius:10px;
    padding:14px;font-size:16px;font-weight:500;text-align:center;
}
.btn-main{background:var(--main);color:#fff;margin-top:8px;}
.btn-main:active{background:var(--main-dark);}

/* ---------- 筛选 ---------- */
.filter{display:flex;gap:8px;margin-bottom:12px;}
.filter a{
    padding:7px 14px;border-radius:16px;
    background:var(--card);font-size:13px;color:var(--text-2);
}
.filter a.on{background:var(--main);color:#fff;}

/* ---------- 空态 ---------- */
.empty{
    padding:34px 0;text-align:center;
    font-size:13px;color:var(--text-3);
}

/* ---------- 底部导航 ---------- */
.tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:flex;
    height:calc(var(--tab-h) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(8px);
    border-top:1px solid var(--line);
}
.tabbar a{
    flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:2px;
    font-size:11px;color:var(--text-3);
}
.tabbar a .ico{font-size:19px;line-height:1;}
.tabbar a.on{color:var(--main);}

/* ---------- 悬浮按钮 ---------- */
.fab{
    position:fixed;right:18px;bottom:calc(var(--tab-h) + 20px + env(safe-area-inset-bottom));
    width:52px;height:52px;border-radius:50%;
    background:var(--main);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:28px;line-height:1;
    box-shadow:0 6px 16px rgba(31,122,92,.35);
}

/* ---------- 分页 ---------- */
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:4px 0 16px;}
.pager a,.pager span{
    min-width:34px;padding:6px 10px;text-align:center;
    background:var(--card);border-radius:8px;font-size:13px;color:var(--text-2);
}
.pager span.on{background:var(--main);color:#fff;}
.pager>span:first-child{width:100%;background:none;color:var(--text-3);font-size:12px;}

/* ---------- 登录页 ---------- */
.login{padding-top:34px;}
.login-hd{text-align:center;margin-bottom:22px;}
.login-hd h1{font-size:24px;letter-spacing:2px;color:var(--main);}
.login-hd p{font-size:13px;color:var(--text-3);margin-top:8px;}
.login-tip{text-align:center;font-size:12px;color:var(--text-3);margin-top:18px;}
.version{text-align:center;font-size:12px;color:var(--text-3);padding:20px 0;}

/* ---------- 轻提示 ---------- */
.toast{
    position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
    background:rgba(0,0,0,.78);color:#fff;
    padding:10px 18px;border-radius:10px;font-size:14px;
    z-index:9999;max-width:76vw;text-align:center;
    animation:toastIn .18s ease-out;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-46%);}to{opacity:1;transform:translate(-50%,-50%);}}

/* ==================================================
   惠农云仓 · 下单页 / 订单页
   ================================================== */
/* ---------- 分类 chips ---------- */
.chips{
    display:flex;gap:8px;overflow-x:auto;
    padding:4px 12px 10px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none;}
.chips a{
    flex:0 0 auto;padding:7px 14px;border-radius:16px;
    background:var(--card);color:var(--text-2);font-size:.8125rem;
    border:1px solid #E4E9E7;
}
.chips a.on{background:var(--main);color:#fff;border-color:var(--main);}

/* ---------- 商品行 ---------- */
.grow{
    display:flex;align-items:center;gap:10px;
    padding:12px 14px;background:var(--card);
    border-bottom:1px solid var(--line);
}
.grow:last-child{border-bottom:0;}
.gmain{flex:1;min-width:0;}
.gmain b{display:block;font-size:.9375rem;font-weight:600;color:var(--text);}
.gmain i{display:block;font-size:.75rem;color:var(--text-3);font-style:normal;margin-top:2px;}
.gside{text-align:right;flex:0 0 auto;}
.gprice{display:block;color:var(--red);font-weight:600;font-size:.875rem;}
.qty{display:inline-flex;align-items:center;gap:4px;margin-top:6px;}
.qty button{
    width:26px;height:26px;border-radius:50%;
    border:1px solid #DFE5E3;background:var(--card);
    color:var(--text-2);font-size:1rem;line-height:1;
}
.qty button:active{background:var(--main-light);}
.qty input{
    width:38px;text-align:center;border:0;background:transparent;
    font-size:.875rem;color:var(--text);-moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* ---------- 底部结算条 ---------- */
.cartbar{
    position:fixed;left:0;right:0;z-index:55;
    bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));
    display:flex;align-items:center;gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:var(--card);border-top:1px solid var(--line);
    box-shadow:0 -4px 16px rgba(20,40,30,.06);
}
.cartbar .cinfo{flex:0 0 auto;font-size:.75rem;color:var(--text-3);line-height:1.35;}
.cartbar .cinfo b{font-size:1.0625rem;color:var(--red);}

/* ---------- 订单卡 ---------- */
.badge{
    font-size:.75rem;color:var(--main);background:var(--main-light);
    padding:3px 9px;border-radius:10px;
}
.badge.lock{color:#B26A00;background:#FFF4E0;}
.orow{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:9px 14px;font-size:.875rem;border-bottom:1px dashed var(--line);
}
.orow:last-child{border-bottom:0;}
.orow span:first-child{flex:1;min-width:0;}
.orow span:nth-child(2){color:var(--text-2);}
.orow span:nth-child(3){color:var(--text);font-weight:500;}
.orow.total{color:var(--text-3);font-size:.75rem;border-top:1px solid var(--line);border-bottom:0;padding-top:11px;}
.orow.total span:last-child{color:var(--red);font-weight:600;font-size:.9375rem;}
.onote{padding:0 14px 10px;font-size:.75rem;color:var(--text-3);}
.lock-tip{
    padding:10px 14px;font-size:.8125rem;color:#8A6A16;
    background:#FFF9EC;border-top:1px solid #F6EBD3;
}
.oact{display:flex;gap:10px;padding:10px 14px;border-top:1px solid var(--line);}
.oact .btn{flex:1;text-align:center;}
.btn-gray{background:#F1F4F3;color:var(--text-2);}