/* =========================
   PESANAN PAGE
========================= */

.km-pesanan-page{

    display:flex;

    flex-direction:column;

    gap:14px;

}

/* =========================
   HEADER
========================= */

.km-pesanan-head{

    padding:18px;

}

/* =========================
   FILTER
========================= */

.km-filter-wrapper{

    display:flex;

    gap:8px;

    overflow-x:auto;

    scrollbar-width:none;

}

.km-filter-wrapper::-webkit-scrollbar{

    display:none;

}

/* BTN */

.km-filter-btn{

    flex-shrink:0;

    padding:8px 14px;

    border-radius:999px;

    background:white;

    border:1px solid #e2e8f0;

    text-decoration:none;

    color:#64748b;

    font-size:12px;

    font-weight:700;

}

/* ACTIVE */

.km-filter-btn.active{

    background:#16a34a;

    border-color:#16a34a;

    color:white;

}

/* =========================
   LIST
========================= */

.km-pesanan-list{

    display:flex;

    flex-direction:column;

    gap:14px;

}

/* =========================
   ORDER CARD
========================= */

.km-order-card{

    padding:16px;

}

/* HEADER */

.km-order-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-bottom:12px;

    margin-bottom:12px;

    border-bottom:1px solid #f1f5f9;

}

/* META */

.km-order-meta{

    font-size:11px;

    color:#64748b;

}

/* BADGE */

.km-status-badge{

    padding:5px 10px;

    border-radius:8px;

    font-size:10px;

    font-weight:800;

    text-transform:uppercase;

}

/* STATUS */

/* pending */

.status-pending{

    background:#fff7ed;

    color:#c2410c;

}

/* konfirmasi */

.status-konfirmasi{

    background:#eff6ff;

    color:#1d4ed8;

}

/* lunas */

.status-lunas{

    background:#f0fdf4;

    color:#15803d;

}

/* batal */

.status-batal{

    background:#fee2e2;

    color:#dc2626;

}

/* =========================
   BODY
========================= */

.km-order-body{

    display:flex;

    gap:12px;

    align-items:center;

}

/* ICON */

.km-order-icon{

    width:52px;

    height:52px;

    border-radius:14px;

    background:#f1f5f9;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

}

/* CONTENT */

.km-order-content{

    flex:1;

    min-width:0;

}

/* NAME */

.km-order-name{

    font-size:14px;

    font-weight:700;

    color:#1e293b;

}

/* ADDRESS */

.km-order-address{

    margin-top:4px;

    font-size:12px;

    color:#64748b;

    line-height:1.5;

}

/* =========================
   FOOTER
========================= */

.km-order-footer{

    margin-top:14px;

    padding-top:12px;

    border-top:1px solid #f1f5f9;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* TOTAL */

.km-order-total{

    font-size:16px;

    font-weight:800;

    color:#f97316;

}

/* BTN */

.km-btn-detail{

    padding:9px 16px;

    border-radius:10px;

    text-decoration:none;

    background:#16a34a;

    color:white;

    font-size:12px;

    font-weight:700;

}

/* =========================
   EMPTY
========================= */

.km-empty-state{

    padding:50px 20px;

    text-align:center;

    color:#94a3b8;

}

/* =========================
   DETAIL PESANAN
========================= */

.km-pdetail-page{

    display:flex;

    flex-direction:column;

    gap:14px;

}

/* TOP */

.km-pdetail-top{

    padding:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* CODE */

.km-pdetail-code{

    font-size:16px;

    font-weight:800;

    color:#1e293b;

}

/* DATE */

.km-pdetail-date{

    margin-top:4px;

    font-size:12px;

    color:#64748b;

}

/* BOX */

.km-pdetail-box{

    padding:18px;

}

/* HEADING */

.km-pdetail-heading{

    font-size:14px;

    font-weight:800;

    color:#1e293b;

    margin-bottom:14px;

}

/* RECIPIENT */

.km-pdetail-recipient{

    font-size:13px;

    color:#475569;

    line-height:1.7;

}

/* ITEMS */

.km-pdetail-items{

    display:flex;

    flex-direction:column;

    gap:12px;

}

/* ITEM */

.km-pdetail-item{

    display:flex;

    gap:12px;

    align-items:center;

}

/* ICON */

.km-pdetail-icon{

    width:48px;

    height:48px;

    border-radius:12px;

    background:#f1f5f9;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

}

/* CONTENT */

.km-pdetail-content{

    flex:1;

    min-width:0;

}

/* NAME */

.km-pdetail-name{

    font-size:14px;

    font-weight:700;

    color:#1e293b;

}

/* META */

.km-pdetail-meta{

    margin-top:4px;

    font-size:12px;

    color:#64748b;

}

/* PRICE */

.km-pdetail-price{

    font-size:13px;

    font-weight:800;

    color:#f97316;

}

/* SUMMARY */

.km-pdetail-summary{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.km-pdetail-summary div{

    display:flex;

    justify-content:space-between;

    font-size:13px;

}

/* BUTTON */

.km-btn-bayar{

    margin-top:18px;

    display:block;

    text-align:center;

    text-decoration:none;

    background:#16a34a;

    color:white;

    padding:12px;

    border-radius:12px;

    font-size:13px;

    font-weight:800;

}

/* =========================
   PROOF
========================= */

.km-pdetail-proof{

    margin-top:18px;

}

/* IMAGE */

.km-proof-image{

    width:100%;

    max-width:260px;

    border-radius:14px;

    margin-top:10px;

    border:1px solid #e2e8f0;

    display:block;

}

.km-order-product{

    margin-top:4px;

    font-size:12px;

    color:#64748b;

}

/* =========================
   RINCIAN PESANAN
========================= */

.km-pdetail-rincian{

    margin-top:18px;

}

/* PRE */

.km-pdetail-rincian pre{

    margin:0;

    background:#f8fafc;

    border-radius:12px;

    padding:14px;

    font-size:12px;

    line-height:1.7;

    color:#334155;

    white-space:pre-wrap;

    overflow:auto;

}