/* public/assets/test/css/orders.css
 * 我的订单列表（用户端） - unified + clean
 * - font smaller, font-weight <= 500
 * - desktop table + mobile cards
 * - stable "more menu" layer
 * - remove ugly tap highlight
 */

:root{
    --brand-color:#2c65ad;
    --brand-soft: rgba(44, 101, 173, 0.08);

    --txt: #0f172a;
    --muted:#64748b;
    --muted2:#94a3b8;
    --line:#e5e7eb;
    --panel:#ffffff;

    --fz-title: 18px;
    --fz-base: 13px;
    --fz-sub: 12px;
    --fz-mini: 11px;

    --fw: 500;
}

/* =======================
   Root
   ======================= */
.orders-main{
    width:100%;
    padding-bottom: 72px;
    font-size: var(--fz-base);
    color: var(--txt);
}

/* =======================
   Header
   ======================= */
.orders-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.orders-header-text{
    display:flex;
    flex-direction:column;
    gap: 4px;
}

.orders-title{
    margin:0;
    font-size: var(--fz-title);
    font-weight: var(--fw);
    color:#020617;
}

.orders-subtitle{
    margin:0;
    font-size: var(--fz-sub);
    color: var(--muted2);
    font-weight: 400;
}

/* search */
.orders-search-form{ flex-shrink:0; }
.orders-search-input{
    display:flex;
    align-items:center;
    gap:6px;
    border-radius: 14px;
    padding: 6px 12px;
    border:1px solid var(--line);
    background:#f9fafb;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.orders-search-input .material-icons{
    font-size:18px;
    color:#9ca3af;
}
.orders-search-input input[type="search"]{
    border:0;
    background:transparent;
    outline:none;
    height:34px;
    line-height:34px;
    font-size: var(--fz-base);
    color: var(--txt);
    min-width: 240px;
}
.orders-search-input input::placeholder{ color:#9ca3af; }
.orders-search-input:focus-within{
    border-color: var(--brand-color);
    background:#fff;
    box-shadow: 0 0 0 1px rgba(44,101,173,.14);
}

/* =======================
   Tabs
   ======================= */
.orders-tabs{
    display:inline-flex;
    flex-wrap:wrap;
    gap: 6px;
    margin-bottom: 10px;
    font-size: var(--fz-base);
}
.orders-tab{
    padding: 7px 14px;
    border-radius: 999px;
    text-decoration:none;
    color:#64748b;
    background:transparent;
    border:1px solid transparent;
    line-height:1;
    font-weight: 500;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.orders-tab:hover{
    background: rgba(15,23,42,.03);
    border-color: #e5e7eb;
    color:#111827;
}
.orders-tab.is-active{
    background: var(--brand-color);
    border-color: var(--brand-color);
    color:#fff;
    box-shadow: 0 6px 14px rgba(44,101,173,.22);
}

/* mobile/desktop tab visibility */
.orders-tabs--mobile{ display:none; }
.orders-tabs--desktop{ display:flex; }
@media (max-width:768px){
    .orders-tabs--desktop{ display:none; }
    .orders-tabs--mobile{ display:flex; gap:8px; }
    .orders-tabs--mobile .orders-tab{
        flex:1;
        text-align:center;
        padding: 10px 6px;
        white-space:nowrap;
    }
}

/* =======================
   Panel (desktop container)
   ======================= */
.orders-panel{
    background: var(--panel);
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(15,23,42,.05);
    padding: 6px 0 14px;
    margin-bottom: 26px;
}

/* empty */
.orders-empty{
    padding: 52px 8px;
    text-align:center;
    color:#6b7280;
}
.orders-empty-icon{ font-size:32px; margin-bottom:10px; }
.orders-empty-title{
    font-size: 15px;
    font-weight: 500;
    color:#020617;
    margin-bottom:4px;
}
.orders-empty-desc{ font-size: var(--fz-sub); }

/* =======================
   Desktop table
   ======================= */
.orders-table-head{
    display:grid;
    grid-template-columns: minmax(0, 3.2fr) minmax(0, 1.7fr) minmax(0, 1.6fr) 1.2fr 1.2fr 1.5fr;
    padding: 8px 20px 6px;
    border-bottom: 1px solid var(--line);
    font-size: var(--fz-mini);
    color: var(--muted2);
}
.orders-th{ white-space:nowrap; }
.orders-th-action{ text-align:right; padding-right:4px; }

.orders-table-body{ display:flex; flex-direction:column; }

.orders-row{
    display:grid;
    grid-template-columns: minmax(0, 3.2fr) minmax(0, 1.7fr) minmax(0, 1.6fr) 1.2fr 1.2fr 1.5fr;
    align-items:center;
    gap:8px;
    padding: 10px 20px;
    border-top: 1px solid #f1f5f9;
    min-height: 74px;
    transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.orders-row:hover{
    background:#fbfdff;
    box-shadow: 0 12px 24px rgba(15,23,42,.06);
    transform: translateY(-1px);
}
.orders-td{ font-size: var(--fz-base); color:#4b5563; }

/* info */
.orders-td-info{ min-width:0; }
.order-info-main{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}
.order-badge-avatar{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    overflow:hidden;
    background:#e5e7eb;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
}
.order-badge-avatar img{ width:100%; height:100%; object-fit:cover; }
.order-badge-char{
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    background: var(--brand-color);
    color:#fff;
    font-size: 16px;
    font-weight: 500;
}
.order-info-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }

.order-game-name{
    font-size: var(--fz-base);
    font-weight: 500;
    color:#020617;
    max-width: 320px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.35;
}
.order-game-sub{
    font-size: var(--fz-mini);
    font-weight: 400;
    color:#6b7280;
    max-width: 320px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.3;
}
.order-sn-line{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.order-sn-link{
    font-size: var(--fz-mini);
    color: var(--brand-color);
    text-decoration:none;
}
.order-sn-link:hover{ text-decoration:underline; }
.order-sn-coupon{ font-size: var(--fz-mini); color:#b91c1c; }

/* time/pay */
.orders-td-time, .orders-td-pay{
    font-size: var(--fz-sub);
    color:#6b7280;
}

/* amount */
.orders-td-amount{
    font-size: var(--fz-base);
    font-weight: 500;
    color:#020617;
    white-space:nowrap;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
}

.order-amount-value{
    font-size: var(--fz-base);
    font-weight: 600;
    color:#020617;
}

.order-amount-fee{
    font-size: var(--fz-mini);
    line-height:1.35;
    color: var(--muted);
    font-weight: 500;
}

/* status */
.orders-td-status{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    white-space:nowrap;
}
.order-status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width: 82px;
    font-size: var(--fz-mini);
    padding: 3px 8px;
    border-radius:999px;
    font-weight: 500;
    letter-spacing:.01em;
}
.order-status-badge.is-warning{ background:var(--fm-brand-yellow-soft); color:#b45309; }
.order-status-badge.is-processing{ background:#e0ecf8; color:#1d4f91; }
.order-status-badge.is-success{ background:#dcfce7; color:#166534; }
.order-status-badge.is-danger{ background:#fee2e2; color:#b91c1c; }
.order-status-badge.is-muted{ background:#e5e7eb; color:#4b5563; }

/* actions */
.orders-td-action{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    min-width:0;
    position:relative;
}
.orders-td-action.no-more::after{
    content:"";
    flex:0 0 56px;
    height:30px;
}

/* primary op button (if any) */
.order-op-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height: 30px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: var(--fz-sub);
    font-weight: 500;
    white-space:nowrap;
    cursor:pointer;
    text-decoration:none;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
    -webkit-tap-highlight-color: transparent;
}
.order-op-btn:active{ transform: translateY(1px); }

.order-op-btn--pay{ background:#f18e49; border-color:#f18e49; color:#fff; }
.order-op-btn--progress{ background: var(--brand-color); border-color: var(--brand-color); color:#fff; }
.order-op-btn--reorder{ background:#fff; border-color: rgba(44,101,173,.35); color:#1d4f91; }
.order-op-btn--support{ background:#f8fafc; border-color:#eef2f7; color:#475569; }

/* =======================
   Pagination
   ======================= */
.orders-pagination{
    margin: 18px 0 20px;
    text-align:center;
}
.orders-pagination .pagination{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding-left:0;
    margin:0;
    list-style:none;
    font-size: var(--fz-base);
}
.orders-pagination .page-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width: 30px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border:1px solid var(--line);
    background:#fff;
    color:#4b5563;
    text-decoration:none;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.orders-pagination .page-link:hover{
    background: var(--brand-soft);
    border-color: rgba(44,101,173,.30);
    color: var(--brand-color);
    box-shadow: 0 6px 14px rgba(44,101,173,.12);
}
.orders-pagination .page-item.active .page-link{
    background: var(--brand-color);
    border-color: var(--brand-color);
    color:#fff;
    box-shadow: 0 6px 14px rgba(44,101,173,.22);
    cursor:default;
}
.orders-pagination .page-item.disabled .page-link{
    background:#f9fafb;
    border-color: var(--line);
    color:#9ca3af;
    cursor:default;
    box-shadow:none;
}

/* =========================
   More Menu (PC + Mobile) - single source
   ========================= */
.orders-panel,
.orders-table-body,
.orders-row,
.orders-td,
.orders-td-action,
.m-order-card,
.m-order-actions{
    overflow: visible !important;
}

.order-more{
    position:relative;
    display:inline-flex;
    align-items:center;
    -webkit-tap-highlight-color: transparent;
}

.order-more__btn{
    height: 30px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,.12);
    background:#fff;
    color:#475569;
    font-size: var(--fz-sub);
    font-weight: 500;
    line-height: 30px;
    cursor:pointer;
    text-decoration:none;
    box-shadow:none;
    -webkit-tap-highlight-color: transparent;
}
.orders-td-action .order-more__btn{
    min-width: 56px;
    padding: 0;
}
.order-more__btn:hover{ background:#f8fafc; border-color: rgba(15,23,42,.18); }
.order-more__btn:active{ transform: translateY(1px); }

.order-more__menu{
    display:none;
    min-width: 180px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.10);
    background:#fff;
    box-shadow: 0 18px 60px rgba(15,23,42,.18);
    z-index: 100001;
    -webkit-tap-highlight-color: transparent;
}

.order-more__menu::before{
    content:"";
    position:absolute;
    width:10px; height:10px;
    transform: rotate(45deg);
    background:#fff;
    border-left: 1px solid rgba(15,23,42,.10);
    border-top: 1px solid rgba(15,23,42,.10);
    top: -6px;
    right: 18px;
}

.order-more.is-open .order-more__menu{ display:block; }

.order-more__item{
    display:block;
    width:100%;
    text-align:left;
    border:0;
    background:transparent;
    padding: 10px 10px;
    border-radius: 12px;
    font-size: var(--fz-base);
    font-weight: 500;
    color:#0f172a;
    cursor:pointer;
    text-decoration:none;
    -webkit-tap-highlight-color: transparent;
}
.order-more__item:hover{ background: rgba(37, 99, 235, 0.06); }
.order-more__item.is-danger{ color:#ef4444; }
.order-more__item.is-danger:hover{ background:#fef2f2; }

/* =========================
   Confirm modal + Toast
   ========================= */
.fm-ui-mask{
    position:fixed; inset:0;
    z-index:100000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background: rgba(2,6,23,.46);
    backdrop-filter: blur(6px);
}
.fm-ui-modal{
    width: min(380px, 92vw);
    background:#fff;
    border-radius:18px;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 24px 70px rgba(15,23,42,.22);
    padding:14px 14px 12px;
    transform: translateY(6px) scale(.98);
    opacity: .98;
    transition: transform 160ms ease, opacity 160ms ease;
}
.fm-ui-mask.is-open .fm-ui-modal{
    transform: translateY(0) scale(1);
    opacity: 1;
}
.fm-ui-modal__msg{
    font-size: var(--fz-base);
    font-weight: 500;
    color:#0f172a;
    line-height:1.55;
    margin: 2px 2px 12px;
    letter-spacing:.01em;
}
.fm-ui-modal__actions{
    display:flex;
    gap:10px;
    justify-content:flex-end;
    padding-top:2px;
}
.fm-ui-btn{
    height:34px;
    padding:0 14px;
    border-radius:12px;
    border:1px solid rgba(15,23,42,.10);
    background:#fff;
    color:#334155;
    font-size: var(--fz-base);
    font-weight: 500;
    cursor:pointer;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
    -webkit-tap-highlight-color: transparent;
}
.fm-ui-btn:hover{ background:#f8fafc; border-color: rgba(15,23,42,.16); }
.fm-ui-btn:active{ transform: translateY(1px); }

.fm-ui-btn--primary{
    border-color: rgba(44,101,173,.22);
    background: rgba(44,101,173,.10);
    color:#1d4f91;
}
.fm-ui-btn--primary:hover{
    background: rgba(44,101,173,.14);
    border-color: rgba(44,101,173,.28);
}

.fm-toast{
    position:fixed;
    left:50%;
    bottom:18px;
    transform: translateX(-50%);
    z-index:100001;
    display:none;
    max-width: min(520px, 90vw);
    padding:10px 12px;
    border-radius:14px;
    background: rgba(2,6,23,.88);
    color:#fff;
    font-size: var(--fz-base);
    font-weight: 500;
    line-height:1.4;
    box-shadow: 0 18px 50px rgba(15,23,42,.22);
}

/* =======================
   Mobile cards + refresh + infinite
   ======================= */
.m-orders-refresh{
    width:0;
    height:0;
    overflow:visible;
    display:block;
    position: fixed;
    left:50%;
    top: calc(env(safe-area-inset-top, 0px) + 72px);
    transform: translateX(-50%);
    z-index: 80;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    background:transparent;
    transition: transform 160ms ease, opacity 160ms ease;
    pointer-events: none;
}
.m-orders-refresh::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:40px;
    height:40px;
    margin-left:-20px;
    border-radius:999px;
    background:rgba(255,255,255,.98);
    border:1px solid rgba(223,230,239,.95);
    box-shadow:0 12px 28px rgba(15,23,42,.14);
    opacity:0;
    transform:translateY(calc(-10px + min(var(--fm-refresh-pull, 0) * .16px, 10px))) scale(.92);
    transition:opacity .18s ease, transform .18s ease;
}
.m-orders-refresh::after{
    content:"";
    position:absolute;
    left:0;
    top:11px;
    width:18px;
    height:18px;
    margin-left:-9px;
    border-radius:999px;
    border:3px solid rgba(59,130,246,.20);
    border-top-color:#5b6cff;
    opacity:0;
    transform:translateY(calc(-10px + min(var(--fm-refresh-pull, 0) * .16px, 10px)));
    transition:opacity .18s ease, transform .18s ease;
}
.m-orders-refresh.is-show::before,
.m-orders-refresh.is-show::after,
.m-orders-refresh.is-loading::before,
.m-orders-refresh.is-loading::after,
.m-orders-refresh.is-ready::before,
.m-orders-refresh.is-ready::after{
    opacity:1;
    transform:translateY(0);
}
.m-orders-refresh.is-ready::after{
    border-top-color:#5b6cff;
    transform:translateY(0) rotate(180deg);
}
.m-orders-refresh.is-loading::after{
    animation: m-orders-refresh-spin .85s linear infinite;
}
.m-orders-refresh.is-loading{ color: transparent; }

@keyframes m-orders-refresh-spin{
    to{ transform:translateY(0) rotate(360deg); }
}

.m-orders-sentinel{
    padding: 12px 0 18px;
    text-align:center;
    font-size: var(--fz-sub);
    color: var(--muted2);
}
.m-orders-sentinel.is-loading{ color: var(--txt); }
.m-orders-sentinel.is-done{ color:#cbd5e1; }

/* remove ugly tap highlight (IMPORTANT) */
.orders-row,
.m-order-card,
.m-order-hit,
.m-order-hit * ,
.m-order-thumb-link,
.m-order-btn,
.order-more__btn,
.order-more__item{
    -webkit-tap-highlight-color: transparent !important;
}
.m-order-hit{
    -webkit-touch-callout: none;
}

/* Mobile layout */
@media (max-width:768px){

    /* 手机端：隐藏标题块，只留搜索 */
    .orders-header-text{ display:none !important; }
    .orders-header{ display:block !important; margin-bottom:10px; }
    .orders-search-form{ width:100% !important; }
    .orders-search-input{ width:100% !important; border-radius: 12px; }
    .orders-search-input input[type="search"]{
        width:100% !important;
        min-width:0 !important;
        flex:1 1 auto;
        font-size: 16px; /* ✅ iOS 不放大：必须 >= 16px */
    }

    /* desktop table hide */
    .orders-panel{
        background:#f3f4f6;
        box-shadow:none;
        border-radius:0;
        padding:0;
        margin-bottom:12px;
    }
    .orders-table-head{ display:none !important; }
    .orders-table-body{ padding:0; }

    /* card */
    .m-order-card{
        position:relative;
        background:#fff;
        padding: 14px 12px;
        border-bottom: 10px solid #f3f4f6;
    }

    /* whole card link overlay for detail */
    .m-order-hit{
        position:absolute;
        inset:0;
        z-index: 2;              /* ✅ 必须盖住 body 才能点进详情 */
        display:block;
    }

    /* content layer under hit */
    .m-order-head,
    .m-order-body{
        position:relative;
        z-index: 1;
    }

    /* interactive layer above hit */
    .m-order-actions,
    .m-order-thumb-link{
        position:relative;
        z-index: 3;              /* ✅ 按钮/图标可点 */
        pointer-events:auto;
    }

    .m-order-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        margin-bottom:10px;
    }
    .m-order-head-left{
        max-width:70%;
        font-size: var(--fz-base);
        font-weight: 500;
        color: var(--txt);
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .m-order-head-arrow{ margin-left:6px; color: var(--muted2); font-weight:500; }
    .m-order-head-right{
        font-size: var(--fz-sub);
        color:#9ca3af;
        white-space:nowrap;
        font-weight: 400;
    }

    .m-order-body{
        display:flex;
        align-items:flex-start;
        gap:12px;
    }

    .m-order-thumb{
        width:74px;
        height:74px;
        border-radius:10px;
        overflow:hidden;
        border:1px solid var(--line);
        background:#f1f5f9;
        flex:0 0 auto;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .m-order-thumb img{ width:100%; height:100%; object-fit:cover; }
    .m-order-thumb-char{
        font-weight: 500;
        color:#fff;
        background: var(--brand-color);
        width:100%;
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size: 16px;
    }

    .m-order-info{
        min-width:0;
        flex:1 1 auto;
    }
    .m-order-title{
        padding-top:4px;
        font-size: var(--fz-base);
        font-weight: 500;
        line-height:1.25;
        color: var(--txt);
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
    .m-order-sub{
        margin-top:6px;
        font-size: var(--fz-sub);
        color: var(--muted);
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        font-weight: 400;
    }

    .m-order-amount{
        flex:0 0 auto;
        align-self:center;
        text-align:right;
        padding-left:6px;
        display:flex;
        flex-direction:column;
        align-items:flex-end;
        gap:4px;
    }
    .m-order-amount-v{
        font-size: 16px;
        font-weight: 500;
        color: var(--txt);
        white-space:nowrap;
    }
    .m-order-amount-fee{
        font-size: var(--fz-mini);
        line-height:1.35;
        color: var(--muted);
        font-weight: 500;
        white-space:nowrap;
    }

    /* actions row: more left, primary right */
    .m-order-actions{
        display:flex !important;
        justify-content: space-between !important;
        align-items:center !important;
        gap:10px !important;
        margin-top: 12px;
    }

    .m-order-btn{
        font-size: var(--fz-sub);
        display:inline-flex;
        align-items:center;
        justify-content:center;
        height:32px;
        min-width: 96px;
        padding:0 14px;
        border-radius: 10px;
        background:#fff;
        border:1px solid #d1d5db;
        box-shadow: 0 6px 14px rgba(15,23,42,.10);
        color:#111827;
        text-decoration:none;
        font-weight: 500;
        -webkit-tap-highlight-color: transparent;
    }
    .m-order-btn:active{
        transform: translateY(1px);
        box-shadow: 0 4px 10px rgba(15,23,42,.10);
    }
}




/* =========================================
   Orders mobile tighten
   - top spacing smaller
   - search box more compact
   - mobile tabs less crowded
   ========================================= */
@media (max-width:768px){

    /* 1) 顶部留白收紧 */
    .account-main.orders-main{
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .account-main.orders-main .orders-header{
        margin: 0 0 8px !important;
    }

    .account-main.orders-main .orders-search-form{
        margin: 0 !important;
    }

    /* 2) 搜索框整体缩小 */
    .account-main.orders-main .orders-search-input{
        min-height: 40px;
        padding: 4px 10px !important;
        gap: 5px !important;
        border-radius: 10px !important;
    }

    .account-main.orders-main .orders-search-input .material-icons{
        font-size: 16px !important;
    }

    .account-main.orders-main .orders-search-input input[type="search"]{
        height: 30px !important;
        line-height: 30px !important;
        font-size: 16px !important; /* 保留 16，避免 iOS 自动放大 */
    }

    .account-main.orders-main .orders-search-input input[type="search"]::placeholder{
        font-size: 14px;
    }

    /* 3) mobile tabs 缩小，别那么挤 */
    .account-main.orders-main .orders-tabs--mobile{
        gap: 6px !important;
        margin-bottom: 8px !important;
    }

    .account-main.orders-main .orders-tabs--mobile .orders-tab{
        flex: 1 1 0;
        padding: 8px 4px !important;
        min-height: 34px;
        border-radius: 10px !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
        font-weight: 500 !important;
    }

    .account-main.orders-main .orders-tabs--mobile .orders-tab.is-active{
        box-shadow: 0 4px 10px rgba(44,101,173,.14) !important;
    }
}




/* =======================
   Search - glass / translucent white
   替换原有 search 相关样式
   ======================= */
.orders-search-form{
    flex-shrink: 0;
}

.orders-search-input{
    display: flex;
    align-items: center;
    gap: 6px;

    min-height: 42px;
    padding: 4px 12px;
    border-radius: 14px;

    border: 1px solid rgba(255,255,255,.42);
    background:
        linear-gradient(180deg,
            rgba(255,255,255,.58) 0%,
            rgba(255,255,255,.34) 100%
        );
    box-shadow:
        0 8px 24px rgba(15,23,42,.06),
        inset 0 1px 0 rgba(255,255,255,.55);

    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);

    transition:
        border-color 140ms ease,
        box-shadow 140ms ease,
        background 140ms ease,
        transform 140ms ease;
}

.orders-search-input .material-icons{
    font-size: 17px;
    color: rgba(15,23,42,.42);
    flex: 0 0 auto;
}

.orders-search-input input[type="search"]{
    border: 0;
    background: transparent;
    outline: none;

    width: 100%;
    min-width: 240px;
    height: 30px;
    line-height: 30px;

    font-size: var(--fz-base);
    color: #0f172a;

    appearance: none;
    -webkit-appearance: none;
}

.orders-search-input input[type="search"]::-webkit-search-decoration,
.orders-search-input input[type="search"]::-webkit-search-cancel-button,
.orders-search-input input[type="search"]::-webkit-search-results-button,
.orders-search-input input[type="search"]::-webkit-search-results-decoration{
    -webkit-appearance: none;
    appearance: none;
}

.orders-search-input input::placeholder{
    color: rgba(15,23,42,.34);
}

.orders-search-input:focus-within{
    border-color: rgba(255,255,255,.58);
    background:
        linear-gradient(180deg,
            rgba(255,255,255,.68) 0%,
            rgba(255,255,255,.42) 100%
        );
    box-shadow:
        0 10px 28px rgba(37,99,235,.08),
        inset 0 1px 0 rgba(255,255,255,.72),
        0 0 0 1px rgba(255,255,255,.28);
    transform: translateY(-.5px);
}

/* mobile: 保持玻璃感，同时更贴合手机宽度 */
@media (max-width:768px){
    .orders-search-form{
        width: 100% !important;
        margin: 0 !important;
    }

    .orders-search-input{
        width: 100% !important;
        min-height: 40px !important;
        padding: 3px 10px !important;
        gap: 5px !important;
        border-radius: 12px !important;

        border-color: rgba(255,255,255,.40) !important;
        background:
            linear-gradient(180deg,
                rgba(255,255,255,.54) 0%,
                rgba(255,255,255,.30) 100%
            ) !important;
        box-shadow:
            0 6px 18px rgba(15,23,42,.05),
            inset 0 1px 0 rgba(255,255,255,.50) !important;

        backdrop-filter: blur(10px) saturate(135%);
        -webkit-backdrop-filter: blur(10px) saturate(135%);
    }

    .orders-search-input .material-icons{
        font-size: 16px !important;
    }

    .orders-search-input input[type="search"]{
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;

        height: 28px !important;
        line-height: 28px !important;
        font-size: 16px !important; /* 保持 16，避免 iPhone 放大 */
    }

    .orders-search-input input::placeholder{
        font-size: 13px !important;
    }

    .orders-search-input:focus-within{
        background:
            linear-gradient(180deg,
                rgba(255,255,255,.64) 0%,
                rgba(255,255,255,.38) 100%
            ) !important;
        box-shadow:
            0 8px 22px rgba(37,99,235,.07),
            inset 0 1px 0 rgba(255,255,255,.66),
            0 0 0 1px rgba(255,255,255,.22) !important;
    }
}

/* =========================================
   Orders mobile: top spacing above search <= 10px
   放到 orders.css 最底部
   ========================================= */
@media (max-width:768px){

    /* 真正的大空白来源：account.css 里的 margin-top:30px */
    .account-page .account-layout{
        margin-top: 0 !important;
    }

    /* 页面顶部只保留 10px */
    .account-page{
        padding-top: 10px !important;
    }

    /* 订单主区本身不要再叠加上边距 */
    .account-main.orders-main{
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 搜索区紧贴顶部 */
    .account-main.orders-main .orders-header{
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }

    .account-main.orders-main .orders-search-form{
        margin-top: 0 !important;
    }
}

/* =========================================
   Orders: yellow theme + mobile white gap fix
   追加到 orders.css 最底部
   ========================================= */

/* 1) 订单页主色：蓝 -> 黄 */
.orders-main{
    --brand-color: var(--fm-brand-yellow) !important;
    --brand-soft: rgba(var(--fm-brand-yellow-rgb), .14) !important;
    --brand-ink: var(--fm-brand-yellow-ink) !important;
    --brand-line: rgba(var(--fm-brand-yellow-rgb), .36) !important;
    --brand-glow: rgba(var(--fm-brand-yellow-rgb), .26) !important;
}

/* tabs active */
.orders-tab.is-active{
    background: var(--fm-brand-yellow) !important;
    border-color: var(--fm-brand-yellow) !important;
    color: var(--fm-brand-yellow-ink) !important;
    box-shadow: 0 6px 14px rgba(var(--fm-brand-yellow-rgb), .24) !important;
}

/* 分页 */
.orders-pagination .page-link:hover{
    background: rgba(var(--fm-brand-yellow-rgb), .14) !important;
    border-color: rgba(var(--fm-brand-yellow-rgb), .34) !important;
    color: var(--fm-brand-yellow-ink) !important;
    box-shadow: 0 6px 14px rgba(var(--fm-brand-yellow-rgb), .14) !important;
}
.orders-pagination .page-item.active .page-link{
    background: var(--fm-brand-yellow) !important;
    border-color: var(--fm-brand-yellow) !important;
    color: var(--fm-brand-yellow-ink) !important;
    box-shadow: 0 6px 14px rgba(var(--fm-brand-yellow-rgb), .24) !important;
}

/* 主按钮 */
.order-op-btn--progress,
.m-order-btn--primary{
    background: var(--fm-brand-yellow) !important;
    border-color: var(--fm-brand-yellow) !important;
    color: var(--fm-brand-yellow-ink) !important;
    box-shadow: 0 6px 14px rgba(var(--fm-brand-yellow-rgb), .18) !important;
}

/* 再次购买按钮（如果后续你用了这个类） */
.order-op-btn--reorder{
    background: var(--fm-brand-yellow-wash) !important;
    border-color: rgba(var(--fm-brand-yellow-rgb), .42) !important;
    color: var(--fm-brand-yellow-ink) !important;
}

/* “处理中”状态蓝色 -> 黄系 */
.order-status-badge.is-processing{
    background: rgba(var(--fm-brand-yellow-rgb), .18) !important;
    color: var(--fm-brand-yellow-ink) !important;
}

/* 首字母占位头像 */
.order-badge-char,
.m-order-thumb-char{
    background: var(--fm-brand-yellow) !important;
    color: var(--fm-brand-yellow-ink) !important;
}

/* 订单号链接 */
.order-sn-link{
    color: var(--fm-brand-yellow-ink) !important;
}

/* 更多菜单 hover 蓝色 -> 黄系 */
.order-more__item:hover{
    background: rgba(var(--fm-brand-yellow-rgb), .10) !important;
}

/* 确认弹窗主按钮 */
.fm-ui-btn--primary{
    border-color: rgba(var(--fm-brand-yellow-rgb), .30) !important;
    background: rgba(var(--fm-brand-yellow-rgb), .14) !important;
    color: var(--fm-brand-yellow-ink) !important;
}
.fm-ui-btn--primary:hover{
    background: rgba(var(--fm-brand-yellow-rgb), .20) !important;
    border-color: rgba(var(--fm-brand-yellow-rgb), .40) !important;
}

/* 搜索框 focus 的蓝色光圈 -> 黄系 */
.orders-search-input:focus-within{
    border-color: rgba(255,255,255,.60) !important;
    box-shadow:
        0 10px 28px rgba(var(--fm-brand-yellow-rgb), .12),
        inset 0 1px 0 rgba(255,255,255,.72),
        0 0 0 1px rgba(var(--fm-brand-yellow-rgb), .14) !important;
}

/* 手机端 active tab 阴影同步 */
@media (max-width:768px){
    .account-main.orders-main .orders-tabs--mobile .orders-tab.is-active{
        box-shadow: 0 4px 10px rgba(var(--fm-brand-yellow-rgb), .18) !important;
    }
}

/* =========================================
   2) 修复手机端卡片之间灰色间距
   3) 修复“没有更多了”底部灰底突兀
   ========================================= */
@media (max-width:768px){

    /* 手机端列表容器改回白底，不要灰底 */
    .orders-panel{
        background: #fff !important;
        box-shadow: none !important;
    }

    /* 下拉刷新区域也别用灰底 */
    .m-orders-refresh{
        background: #fff !important;
    }

    /* 卡片之间的“灰条”改成白色 */
    .m-order-card{
        background: #fff !important;
        border-bottom: 10px solid #fff !important;
    }

    /* 最后一张卡片后面的底部区域保持白色 */
    .orders-table-body{
        background: #fff !important;
    }

    /* 没有更多了：底色白，不要灰块 */
    .m-orders-sentinel{
        background: #fff !important;
        border: 0 !important;
        padding: 12px 0 18px !important;
    }

    /* is-done 文案别那么灰、别突兀 */
    .m-orders-sentinel.is-done{
        background: #fff !important;
        color: var(--fm-brand-yellow) !important;
    }
}

/* =========================================
   Orders mobile:
   保留卡片间距，但间距显示页面原背景（不是白、不是灰）
   ========================================= */
@media (max-width:768px){

    /* 容器不要自己铺底色，露出 account-page 原背景 */
    .orders-panel{
        background: transparent !important;
        box-shadow: none !important;
    }

    .orders-table-body{
        background: transparent !important;
    }

    .m-orders-refresh{
        background: transparent !important;
    }

    /* 卡片本体保持白色，但不要用灰色 border-bottom 做分隔 */
    .m-order-card{
        background: #fff !important;
        border-bottom: 0 !important;
        margin-bottom: 10px !important;   /* 这里才是模块间距 */
    }

    /* 最后一张卡片后面不要多留一段 */
    .m-order-card:last-child{
        margin-bottom: 0 !important;
    }

    /* “没有更多了”区域也透明，露出页面背景 */
    .m-orders-sentinel{
        background: transparent !important;
        border: 0 !important;
        padding: 12px 0 18px !important;
    }

    /* done 状态只调文字，不铺底色 */
    .m-orders-sentinel.is-done{
        background: transparent !important;
        color: var(--fm-brand-yellow) !important;
    }
}


/* =========================================
   Orders: each row/card more rounded
   - PC 每一行做成圆角卡片
   - Mobile 每张订单卡片更圆润
   ========================================= */

/* =======================
   Desktop：每一行订单变圆角卡片
   ======================= */
@media (min-width: 769px){

    /* 表头左右稍微跟卡片对齐一点 */
    .orders-table-head{
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .orders-row{
        margin: 10px 10px 0 !important;   /* 行与行之间留空 */
        padding: 12px 20px !important;

        border-top: 0 !important;         /* 去掉原本表格分割线 */
        border: 1px solid rgba(15,23,42,.06) !important;
        border-radius: 18px !important;   /* ✅ 关键：圆角 */
        background: #fff !important;

        box-shadow: 0 8px 20px rgba(15,23,42,.04);
        overflow: visible !important;
    }

    .orders-row:hover{
        background: #fff !important;
        box-shadow: 0 14px 28px rgba(15,23,42,.08) !important;
        transform: translateY(-1px);
    }
}

/* =======================
   Mobile：每张订单卡片更圆润
   ======================= */
@media (max-width: 768px){

    .m-order-card{
        border-radius: 18px !important;   /* ✅ 更圆 */
        border: 1px solid rgba(15,23,42,.06) !important;
        box-shadow: 0 8px 20px rgba(15,23,42,.05) !important;
        overflow: hidden !important;      /* 让点击层 / 内容跟着圆角走 */

        margin-bottom: 10px !important;
        background: #fff !important;
    }

    .m-order-card:last-child{
        margin-bottom: 0 !important;
    }

    /* 整卡点击层跟随圆角，手感更一致 */
    .m-order-hit{
        border-radius: inherit !important;
    }

    /* 更多按钮和主按钮也顺手更圆一点，风格统一 */
    .m-order-btn{
        border-radius: 12px !important;
    }

    .m-order-more .order-more__btn{
        border-radius: 12px !important;
    }
}

/* =========================================
   FIX: mobile button hit area offset
   原因：.m-order-hit 整卡覆盖层在部分手机会抢触摸命中
   处理：让它不再接管 pointer events，整卡跳转交给 JS
   ========================================= */
@media (max-width:768px){

    /* 覆盖层保留在 DOM 里给 JS 读取 href，但不参与点击 */
    .m-order-hit{
        pointer-events: none !important;
        z-index: 0 !important;
    }

    /* 卡片内容层统一放到上面 */
    .m-order-head,
    .m-order-body,
    .m-order-actions{
        position: relative !important;
        z-index: 1 !important;
    }

    /* 这些交互元素明确保证可点 */
    .m-order-thumb-link,
    .m-order-btn,
    .m-order-more,
    .m-order-more .order-more__btn{
        position: relative !important;
        z-index: 2 !important;
        pointer-events: auto !important;
    }
}

/* =========================================
   Orders empty mobile background
   Use one smooth layer when there are no orders, so the empty state
   does not reveal the account-page image/white split.
   ========================================= */
@media (max-width:768px){
    body.page-account-orders-empty{
        background: #fff !important;
    }

    body.page-account-orders-empty::before{
        content: "" !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        background:
            radial-gradient(
                ellipse at 50% -8%,
                rgba(var(--fm-brand-yellow-rgb), .24) 0%,
                rgba(var(--fm-brand-yellow-rgb), .12) 34%,
                rgba(255, 255, 255, 0) 70%
            ),
            linear-gradient(
                180deg,
                var(--fm-brand-yellow-soft) 0%,
                var(--fm-brand-yellow-wash) 44%,
                #ffffff 100%
            ) !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-size: 100% 520px, 100% 100% !important;
        filter: none !important;
        transform: translateZ(0);
    }

    body.page-account-orders-empty::after{
        content: none !important;
        display: none !important;
    }

    body.page-account-orders-empty #page_main,
    body.page-account-orders-empty .account-page,
    body.page-account-orders-empty .account-layout,
    body.page-account-orders-empty .account-main.orders-main{
        background: transparent !important;
    }

    body.page-account-orders-empty .account-page.is-orders-empty{
        min-height: calc(100svh - var(--fm-mb-tabbar-h, 56px) - env(safe-area-inset-bottom, 0px)) !important;
    }

    body.page-account-orders-empty .orders-panel{
        min-height: calc(100svh - 210px - var(--fm-mb-tabbar-h, 56px)) !important;
        background: transparent !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }

    body.page-account-orders-empty .orders-empty{
        width: 100% !important;
        padding: 42px 12px 96px !important;
    }
}