/* ==========================================================================
   aurora theme - dujiaoka
   视觉参考 fbsml88(双木林) 站：Material/Muse-UI 语言
   ========================================================================== */
:root{
    --bg:            #fafafa;
    --card:          #ffffff;
    --text:          rgba(0,0,0,.87);
    --text-2:        rgba(0,0,0,.54);
    --text-3:        rgba(0,0,0,.38);
    --primary:       #03a9f4;
    --primary-dark:  #0288d1;
    --thead:         #f6f6f6;
    --line:          #e0e0e0;
    --row-line:      #f0f0f0;
    --shadow:        0 1px 6px 0 rgba(0,0,0,.1);
    --raised:        0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    --radius:        2px;
    --font: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font);
    font-size:14px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:none}
img{max-width:100%}
[hidden]{display:none !important}
h1,h2,h3,h4,h5,h6{margin:0}
p{margin:0}
textarea{font-family:var(--font)}

::-webkit-input-placeholder{color:var(--text-3)}
::-moz-placeholder{color:var(--text-3)}

.container{max-width:1154px;margin:0 auto;padding:0 16px}

/* ===================== header ===================== */
header.gray-background{
    height:65px;
    background:var(--bg);
    line-height:18px;
    position:relative;
    z-index:5;
}
.header{
    max-width:1154px;
    margin:0 auto;
    padding:0 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:65px;
}
.header-title{
    color:#000;
    font-size:28px;
    font-weight:100;
    line-height:65px;
}
.header-title:hover{color:#000}
.top-nav{display:flex;align-items:center}
.header-btn{
    color:var(--primary);
    font-size:16px;
    line-height:65px;
    padding:0 14px;
    display:block;
}
.header-btn.active{font-weight:700}
.header-btn:hover{opacity:.85}

/* ===================== main ===================== */
.main{padding:16px 16px 40px}

/* ===================== card ===================== */
.mu-card.my-card{
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    margin-bottom:12px;
    overflow:hidden;
}
.list-select-title.mu-card-title-container,
.card-title-block{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px;
}
.mu-card-title{
    color:var(--text);
    font-size:15px;
    font-weight:400;
    line-height:1.4;
}
.mu-card-sub-title{color:var(--text-2);font-size:13px}
.mu-card-text{padding:16px}

/* 公告 */
.mu-card-text.shop-info{padding:16px 20px}
.shop-info .title{color:var(--text);font-size:15px;font-weight:700}
.notice-content{margin-top:6px;font-size:14px}
.notice-content p{margin:0 0 8px}
.notice-content ul,.notice-content ol{margin:0 0 8px;padding-left:22px}

/* ===================== table ===================== */
table{width:100%;border-collapse:collapse}
.mu-card-text.list-select{padding:0 0 8px}
.list-select thead th{
    background:var(--thead);
    color:var(--text);
    font-size:14px;
    font-weight:400;
    padding:8px 14px;
    text-align:left;
    border-bottom:1px solid var(--row-line);
}
.list-select tbody td{
    font-size:14px;
    padding:8px 14px;
    color:var(--text);
    border-bottom:1px solid var(--row-line);
    vertical-align:middle;
}
.list-select tbody tr:last-child td{border-bottom:none}
.list-select tbody tr:hover{background:#fafafa}
.row-action{
    color:var(--primary);
    cursor:pointer;
    white-space:nowrap;
}
.row-action:hover{color:var(--primary-dark)}
.sold-out{color:var(--text-3)}
.empty-row{color:var(--text-2);text-align:center;padding:24px !important}

/* ===================== pill / badge ===================== */
.pill{
    display:inline-block;
    padding:2px 10px;
    border-radius:2px;
    font-size:12px;
    line-height:1.8;
    margin-right:6px;
    color:#fff;
}
.pill-success{background:#4caf50}
.pill-warning{background:#ff9800}
.pill-dark{background:#313131}
.pill-blue{background:var(--primary)}
.pill-gray{background:#9e9e9e}
.pill-cyan{background:#00bcd4}
.pill-indigo{background:#3f51b5}
.pill-red{background:#f44336}
.pill-orange{background:#ff5722}

/* ===================== form (mu-input) ===================== */
.mu-input{display:block;margin-bottom:18px}
.mu-input.has-label .mu-input-label{
    font-size:14px;
    color:var(--text-2);
    margin-bottom:4px;
    line-height:1.4;
}
.mu-text-field{position:relative}
.mu-text-field-input{
    width:100%;
    border:none;
    background:transparent;
    font-size:15px;
    color:var(--text);
    line-height:1.6;
    padding:2px 0 6px;
    outline:none;
}
.mu-text-field-input:read-only{color:var(--text-2)}
.mu-input-line{
    position:absolute;
    bottom:0;left:0;right:0;
    height:1px;
    background:var(--line);
}
.mu-input-focus-line{
    position:absolute;
    bottom:0;left:0;right:0;
    height:2px;
    background:var(--primary);
    transform:scaleX(0);
    transition:transform .3s ease;
}
.mu-text-field:focus-within .mu-input-focus-line{transform:scaleX(1)}
select.mu-text-field-input{appearance:none}

/* ===================== button ===================== */
.mu-button{
    display:inline-block;
    border:none;
    background:transparent;
    color:var(--primary);
    font-size:14px;
    font-family:var(--font);
    height:36px;
    line-height:36px;
    padding:0 16px;
    border-radius:var(--radius);
    cursor:pointer;
    text-align:center;
    vertical-align:middle;
    white-space:nowrap;
    user-select:none;
}
.mu-button:hover{opacity:.88}
.mu-button.mu-raised-button{
    background:var(--primary);
    color:#fff;
    box-shadow:var(--raised);
}
.mu-button.mu-raised-button:disabled{background:#9e9e9e;cursor:not-allowed;box-shadow:none}
.mu-button.mu-button-block{display:block;width:100%}
.mu-button.mu-button-dark{background:#424242;color:#fff;box-shadow:var(--raised)}
.mu-button.mu-button-outline{background:#fff;border:1px solid #9e9e9e;color:#424242}

/* ===================== radio ===================== */
.mu-radio{margin-right:20px;display:inline-flex;align-items:center;cursor:pointer}
.mu-radio input{display:none}
.mu-radio .mu-radio-circle{
    width:18px;height:18px;
    border:2px solid #9e9e9e;
    border-radius:50%;
    margin-right:8px;
    position:relative;
    flex:0 0 auto;
    transition:border-color .2s;
}
.mu-radio input:checked + .mu-radio-circle{border-color:var(--primary)}
.mu-radio input:checked + .mu-radio-circle::after{
    content:"";
    position:absolute;
    inset:3px;
    border-radius:50%;
    background:var(--primary);
}
.mu-radio:hover .mu-radio-circle{border-color:var(--primary)}

.mu-fieldset-title{font-size:14px;color:var(--text-2);margin:4px 0 10px}
.payways{display:flex;flex-wrap:wrap}

/* ===================== tab ===================== */
.mu-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:20px}
.mu-tab{
    padding:10px 18px;
    font-size:14px;
    color:var(--text-2);
    cursor:pointer;
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
    user-select:none;
}
.mu-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
.mu-tab-pane{display:none}
.mu-tab-pane.active{display:block}

/* ===================== dialog ===================== */
.mu-overlay{
    position:fixed;
    inset:0;
    z-index:20141225;
    background:rgba(0,0,0,.4);
}
.mu-dialog-wrapper{
    position:fixed;
    inset:0;
    z-index:20141226;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
}
.mu-dialog{
    background:#fff;
    border-radius:var(--radius);
    box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);
    max-width:520px;
    width:100%;
    max-height:85vh;
    overflow:auto;
    padding:24px;
}
.mu-dialog-title{font-size:18px;color:var(--text);margin-bottom:12px}
.mu-dialog-body{color:var(--text);font-size:14px}
.mu-dialog-body p{margin:0 0 8px}
.mu-dialog-actions{display:flex;justify-content:flex-end;margin-top:16px}

/* ===================== 商品购买 ===================== */
.buy-head{display:flex}
.buy-cover{
    width:120px;height:120px;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    background:#fafafa;border-radius:var(--radius);
    margin-right:16px;overflow:hidden;
}
.buy-cover img{max-height:110px;max-width:110px;object-fit:contain}
.buy-title{font-size:20px;font-weight:400;margin:8px 0 6px;line-height:1.4}
.stock-line{color:var(--text-2);font-size:13px;margin:2px 0}
.wholesale{margin:6px 0 10px}
.total-price{
    font-size:15px;
    margin:14px 0 6px;
    color:var(--text);
}
.total-price .price{color:#f44336;font-size:24px;font-weight:500;margin-left:4px}
.buy-form{margin:14px 0 6px}
.form-row{display:flex;flex-wrap:wrap;margin:0 -8px}
.form-col{flex:1 1 50%;max-width:50%;padding:0 8px}
.form-col.col-full{flex:1 1 100%;max-width:100%}
.captcha{display:flex;align-items:flex-end;gap:10px}
.captcha img{height:36px;cursor:pointer;border-radius:var(--radius);border:1px solid var(--line)}
.goods-desc{font-size:14px}
.goods-desc p{margin:0 0 8px}
.goods-desc video,.goods-desc img{max-width:100%}

/* ===================== 订单 ===================== */
.bill-card{margin:0 0 12px}
.bill-title{font-size:18px;font-weight:400;color:var(--text);margin-bottom:16px}
.bill-table td{padding:7px 0;font-size:14px;vertical-align:top}
.bill-table td.k{color:var(--text-2);padding-right:18px;white-space:nowrap;width:1%}
.bill-table td.v{color:var(--text)}
.bill-table td.v .total{color:#f44336;font-size:20px;font-weight:500}
.pay-now{margin-top:22px}
.order-card{margin:0 0 12px}
.order-summary{display:flex;flex-wrap:wrap;margin:0 -8px}
.order-summary .col{flex:1 1 50%;max-width:50%;padding:0 8px}
.info-block{
    margin-top:14px;
    border-top:1px solid var(--row-line);
    padding-top:14px;
}
.info-block textarea{
    width:100%;
    min-height:110px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:10px;
    background:#fafafa;
    resize:vertical;
    font-size:13px;
    color:var(--text);
}
.info-block .mu-copy-row{margin-top:10px}

/* ===================== qr pay ===================== */
.qr-card{margin:0 0 12px;text-align:center}
.qr-title{font-size:18px;margin-bottom:6px}
.qr-sub{color:var(--text-2);font-size:13px;margin-bottom:16px}
.qr-box{
    display:inline-block;
    padding:16px;
    background:#fff;
    border:1px solid var(--row-line);
    border-radius:var(--radius);
}
.qr-box img{width:200px;height:200px;display:block}
.qr-amount{color:#f44336;font-size:18px;margin:14px 0 4px}
.qr-tip{color:var(--text-2);font-size:13px}
.qr-actions{margin-top:16px}

/* ===================== error ===================== */
.err-card{margin:0 0 12px;text-align:center}
.err-click{display:block;text-decoration:none;cursor:pointer}
.err-click:hover .err-code{color:var(--primary)}
.err-code{font-size:72px;font-weight:100;color:var(--text);line-height:1.2;margin-bottom:8px}
.err-title{font-size:20px;margin-bottom:4px}
.err-sub{color:var(--text-2);font-size:13px;margin-bottom:16px}
.err-content{color:var(--text);font-size:14px;margin-bottom:20px}
.err-actions{display:flex;justify-content:center}

/* ===================== footer ===================== */
.footer{
    border-top:1px solid var(--line);
    background:var(--card);
    padding:20px 0;
    color:var(--text-2);
    font-size:13px;
}
.footer p{margin:4px 0}
.footer .author a{color:var(--text-2)}
.footer .custom{color:var(--text-2)}

/* ===================== 响应式 ===================== */
@media (max-width:720px){
    .header-title{font-size:20px}
    .header-btn{font-size:14px;padding:0 8px}
    .form-col{flex:1 1 100%;max-width:100%}
    .order-summary .col{flex:1 1 100%;max-width:100%}
    .buy-cover{width:86px;height:86px}
    .buy-cover img{max-height:80px;max-width:80px}
}