/* =========================
   PAGE WRAPPER
========================= */

.ordersPage{
    padding:14px;
    background:#f6f7fb;
    min-height:100vh;
    font-family:system-ui;
}


/* =========================
   BIG HEADER (PAYMENT STYLE)
========================= */

.ordersBigHeader{
    display:flex;
    align-items:center;
    gap:12px;

    padding:16px;
    border-radius:16px;

            background:
    linear-gradient(
        135deg,
        #ff9800,
        #ff5722,
        #ffcc80
    );

    color:#fff;

    box-shadow:0 6px 18px rgba(0,0,0,0.15);

    margin-bottom:12px;
}

.ordersBigHeader h2{
    margin:0;
    font-size:17px;
    font-weight:700;
}

.ordersBigHeader p{
    margin:0;
    font-size:12px;
    opacity:0.8;
}

.ordersBackBtn{
    width:38px;
    height:38px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,0.15);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}


/* =========================
   SUMMARY CARDS
========================= */

.orderStats{
    display:grid;
    grid-template-columns:repeat(
    3,1fr);
    gap:8px;
    margin:12px 0;
}

.statCard{
    background:#fff;
    padding:8px 6px;
    text-align:center;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.statCard b{
    font-size:14px;
    display:block;
}

.statCard span{
    font-size:11px;
    color:#777;
}


/* =========================
   TABS (SCROLLABLE COMPACT)
========================= */

/* =========================
   ACCOUNT ORDER TABS
========================= */

.accOrderTabs{

    display:flex;
    align-items:center;
    flex-wrap:nowrap !important;

    gap:6px;

    overflow-x:auto;
    overflow-y:hidden;

    width:100%;

    padding:2px 0 8px;
    margin-bottom:12px;

    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.accOrderTabs::-webkit-scrollbar{
    display:none;
}

/* TAB BUTTON */

.accTab{

    flex:none !important;
    width:auto !important;
    min-width:auto !important;
    max-width:max-content !important;

    display:inline-flex !important;
    align-items:center;
    justify-content:center;

    height:30px;

    padding:0 12px;

    border:none;
    border-radius:999px;

    background:#ffffff;
    color:#666;

    font-size:11px;
    font-weight:700;

    white-space:nowrap;

    cursor:pointer;

    box-shadow:0 2px 8px rgba(0,0,0,.06);

    transition:all .25s ease;
}

.accTab:hover{
    transform:translateY(-1px);
}

/* ACTIVE TAB */

.accTabActive{

    color:#fff !important;

    background:linear-gradient(
        135deg,
        #ff6a00 0%,
        #ff4d6d 50%,
        #ff2d95 100%
    ) !important;

    box-shadow:
        0 4px 12px rgba(255,106,0,.25),
        0 4px 12px rgba(255,45,149,.20);
}

/* MOBILE */

@media(max-width:600px){

    .accOrderTabs{
        gap:5px;
    }

    .accTab{

        height:28px;

        padding:0 10px;

        font-size:10px;
    }
}

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

.ordersList{
    display:flex;
    flex-direction:column;
    gap:10px;
}


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

.orderCard{
    background:#fff;
    border-radius:14px;
    padding:12px;

    box-shadow:0 2px 10px rgba(0,0,0,0.05);
    border:1px solid #f0f0f0;
}

.orderTop{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.orderTop h3{
    font-size:14px;
    margin:0;
    font-weight:600;
}

.orderTop small{
    font-size:11px;
    color:#777;
}

.orderPrice{
    font-size:13px;
    font-weight:700;
    color:#16a34a;
}


/* STATUS TAG */
.statusTag{
    display:inline-block;
    margin-top:6px;
    font-size:11px;
    padding:4px 8px;
    border-radius:10px;
    text-transform:capitalize;
}

.statusTag.pending{background:#fff4d6;color:#b8860b;}
.statusTag.processing{background:#dbeafe;color:#1e40af;}
.statusTag.delivered{background:#dcfce7;color:#166534;}
.statusTag.cancelled{background:#fee2e2;color:#991b1b;}

.orderCard.cancelled{
    opacity:0.7;
}


/* =========================
   INVOICE OVERLAY
========================= */
.invoiceOverlay{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,0.6);

    display:flex;
    justify-content:center;
    align-items:center;

    padding:14px;

    overflow-y:auto;

    z-index:99999;
}
.invoiceBox{
    background:#fff;

    width:100%;
    max-width:420px;

    border-radius:16px;
    padding:14px;

    box-shadow:0 10px 30px rgba(0,0,0,0.2);

    max-height:85vh;

    overflow-y:auto;

    -webkit-overflow-scrolling:touch;
}
.invoiceBox::-webkit-scrollbar{
    width:4px;
}

.invoiceBox::-webkit-scrollbar-thumb{
    background:#ff6a00;
    border-radius:20px;
}


/* HEADER */
.invoiceHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.invoiceHeader h3{
    margin:0;
    font-size:15px;
}

.invoiceHeader small{
    font-size:11px;
    color:#777;
}

.closeX{
    border:none;
    background:#f3f3f3;

    width:30px;
    height:30px;

    border-radius:50%;

    cursor:pointer;

    color:#ef4444;   /* Red Cross Color */
    font-size:16px;
    font-weight:700;

    display:flex;
    align-items:center;
    justify-content:center;
}

/* =========================
   TIMELINE (PRO LEVEL)
========================= */

/* =========================
   PROFESSIONAL TIMELINE
========================= */

.trackingBar{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    position:relative;

    margin:18px 0 20px;
    padding:0 8px;
}

/* Main Line */

.trackingBar::before{

    content:"";

    position:absolute;

    top:12px;
    left:35px;
    right:35px;

    height:3px;

    background:#e5e7eb;

    border-radius:20px;

    z-index:1;
}

/* Step */

.step{

    flex:1;

    text-align:center;

    position:relative;

    z-index:2;
}

/* Circle */

.step span{

    width:24px;
    height:24px;

    border-radius:50%;

    background:#d1d5db;

    border:4px solid #fff;

    margin:0 auto 8px;

    display:block;

    box-shadow:
        0 0 0 2px #d1d5db;
}

/* Completed */

.step.done span{

    background:#22c55e;

    box-shadow:
        0 0 0 2px #22c55e;
}

/* Current */

.step.active span{

    background:#ff6a00;

    box-shadow:
        0 0 0 3px rgba(255,106,0,.25);

    transform:scale(1.1);
}

/* Text */

.step p{

    margin:0;

    font-size:11px;
    font-weight:600;

    color:#666;

    line-height:1.2;
}

/* Active Text */

.step.active p{

    color:#ff6a00;
    font-weight:700;
}

/* Done Text */

.step.done p{

    color:#22c55e;
}

/* Cancel */

.cancelledStep span{

    background:#ef4444 !important;

    box-shadow:
        0 0 0 2px #ef4444 !important;
}

.cancelledStep p{

    color:#ef4444 !important;
    font-weight:700;
}

.orderCancelledBox{

    margin:15px 0;

    padding:12px;

    border-radius:12px;

    background:#fee2e2;

    border:1px solid #fecaca;

    color:#b91c1c;

    text-align:center;

    font-size:13px;
    font-weight:700;
}

/* =========================
   PRODUCTS (NEW STYLE FIX)
========================= */

.invoiceProducts{
    margin-top:10px;
    border-top:1px dashed #eee;
    padding-top:8px;
}

.invoiceItem{
    display:flex;
    align-items:center;
    gap:10px;

    padding:8px 0;
    border-bottom:1px solid #f5f5f5;
}

.invLeft{
    display:flex;
    align-items:center;
    gap:10px;
}

.invIcon{
    width:40px;
    height:40px;

    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#fff3e6;   /* Light Orange */
    color:#ff7a00;

    flex-shrink:0;
}
.invInfo b{
    display:block;
    font-size:13px;
    color:#111;
}

.invInfo small{
    font-size:11px;
    color:#777;
}


/* =========================
   TOTAL
========================= */

.invoiceTotal{
    margin-top:12px;

    text-align:right;

    font-size:15px;
    font-weight:700;

    color:#16a34a; /* Green */

    padding-top:10px;
    border-top:1px dashed #e5e7eb;
}

/* =========================
   ACTION BUTTON
========================= */

.cancelBtn{
    width:100%;
    margin-top:10px;

    padding:10px;
    border:none;
    border-radius:10px;

    background:#ef4444;
    color:#fff;

    font-size:13px;
    font-weight:600;
}


/* CANCEL STAMP */
.cancelStamp{
    margin-top:10px;
    text-align:center;
    font-size:12px;
    font-weight:700;
    color:#ef4444;
}


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

.emptyText{
    text-align:center;
    color:#777;
    font-size:13px;
    padding:20px;
}

.statusTag.confirmed{
    background:#dcfce7;
    color:#15803d;
}


.cancel-modal{
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(0,0,0,0.6);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

.cancel-box{
    width:90%;
    max-width:420px;
    background:#fff;
    padding:20px;
    border-radius:12px;
    animation:pop .2s ease;
}

@keyframes pop{
    from{transform:scale(.8); opacity:0}
    to{transform:scale(1); opacity:1}
}

.cancel-box h2{
    color:#d32f2f;
    margin-bottom:5px;
}

.sub{
    font-size:13px;
    margin-bottom:10px;
    color:#444;
}

/*Cancle order reason popup*/
#cancelReasonModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

.cancel-box {
    width: 90%;
    max-width: 420px;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
}
.reason-list {
    max-height: 250px;
    overflow-y: auto;
    font-size: 14px;
}

.reason-list label {
    display: block;
    padding: 8px;
}

.orderCancelledBox{
    background:#fff5f5;
    border:2px solid #ef4444;
    border-radius:12px;
    padding:15px;
    margin-bottom:15px;
}

.cancelTitle{
    color:#dc2626;
    font-size:18px;
    font-weight:700;
    margin-bottom:10px;
}

.cancelReasonInside{
    background:#ffffff;
    border-radius:8px;
    padding:10px;
    font-size:14px;
    line-height:1.5;
}
.orderCancelReason{
    margin-top:8px;
    font-size:12px;
    color:#d32f2f;
    padding:6px;
    border-radius:6px;
}
.btn-ok{
    width:100%;
    height:48px;
    border:none;
    border-radius:10px;
    background:#e53935;
    color:#fff;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:0.25s;
}

.btn-ok:hover{
    opacity:0.9;
    transform:translateY(-1px);
}

.btn-ok:active{
    transform:scale(0.98);
}


.invoiceSummary{
    margin-top:15px;
    border:1px solid #e5e5e5;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
}

.sumRow{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 15px;
    border-bottom:1px solid #eee;
}

.sumRow:last-child{
    border-bottom:none;
}

.rewardRow{
    background:#f0fff4;
    color:#16a34a;
    font-weight:600;
}

.finalRow{
    background:#f8fafc;
    font-size:17px;
    font-weight:700;
}