/* =========================================================
   MY ORDERS PAGE
========================================================= */

.orders-page {
    background: #f7faff;
}


/* =========================================================
   PAGE HERO
========================================================= */

.orders-hero {
    text-align: center;
    padding: 28px 20px 25px;
    background: linear-gradient(
        to bottom,
        #f4f8ff,
        #ffffff
    );
}

.orders-hero span {
    display: inline-block;
    background: #f9a825;
    color: #ffffff;

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

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

    margin-bottom: 10px;
}

.orders-hero h1 {
    margin: 0;

    font-size: 36px;
    line-height: 1.15;

    color: #123b78;
    font-weight: 700;
}

.orders-hero p {
    margin: 8px 0 0;

    font-size: 15px;
    color: #666;
}


/* =========================================================
   ORDERS CONTAINER
========================================================= */

.orders-container {
    width: 86%;
    max-width: 950px;

    margin: 25px auto 45px;
}


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

.order-card {
    background: #ffffff;

    border-radius: 14px;

    padding: 20px 24px;

    margin-bottom: 20px;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.07);

    border: 1px solid #eeeeee;
}


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

.order-header {
    display: flex;

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

    padding-bottom: 14px;

    border-bottom: 1px solid #e5e5e5;
}

.order-header h2 {
    margin: 0 0 7px;

    font-size: 18px;

    color: #123b78;

    font-weight: 700;
}

.order-status {
    display: inline-block;

    background: #e8f8f4;
    color: #00a58c;

    padding: 5px 11px;

    border-radius: 18px;

    font-size: 12px;

    font-weight: 600;
}

.order-date {
    font-size: 13px;

    color: #777;

    padding-top: 3px;
}


/* =========================================================
   DELIVERY DETAILS
========================================================= */

.order-customer {
    padding: 15px 0;

    border-bottom: 1px solid #e5e5e5;
}

.order-customer h3,
.order-books h3 {
    margin: 0 0 9px;

    font-size: 16px;

    color: #123b78;
}

.order-customer p {
    margin: 4px 0;

    font-size: 13px;

    line-height: 1.4;

    color: #666;
}

.order-customer strong {
    color: #555;

    font-size: 14px;
}


/* =========================================================
   ORDERED BOOKS
========================================================= */

.order-books {
    padding: 15px 0;
}

.order-book {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 10px 0;

    border-bottom: 1px solid #eeeeee;
}


/* Book Image */

.order-book img {
    width: 55px;
    height: 72px;

    object-fit: cover;

    border-radius: 6px;

    background: #f5f5f5;
}


/* Book Information */

.order-book-info {
    flex: 1;
}

.order-book-info h4 {
    margin: 0 0 5px;

    font-size: 15px;

    color: #123b78;

    font-weight: 600;
}

.order-book-info p {
    margin: 0;

    font-size: 12px;

    color: #777;
}


/* Book Price */

.order-book-price {
    font-size: 15px;

    font-weight: 700;

    color: #00a58c;

    min-width: 60px;

    text-align: right;
}


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

.order-total {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 14px;
}

.order-total span {
    font-size: 14px;

    color: #333;

    font-weight: 600;
}

.order-total strong {
    font-size: 18px;

    color: #123b78;

    font-weight: 700;
}


/* =========================================================
   NO ORDERS
========================================================= */

.no-orders {
    display: none;

    text-align: center;

    background: #ffffff;

    padding: 35px 20px;

    border-radius: 14px;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.07);
}

.no-orders-icon {
    font-size: 38px;

    color: #123b78;

    margin-bottom: 12px;
}

.no-orders h2 {
    margin: 0 0 7px;

    font-size: 21px;

    color: #123b78;
}

.no-orders p {
    color: #777;

    margin-bottom: 17px;

    font-size: 14px;
}

.browse-orders-btn {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: #123b78;

    color: #ffffff;

    padding: 9px 17px;

    border-radius: 7px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;
}

.browse-orders-btn:hover {
    background: #0d2d5d;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .orders-hero {
        padding: 25px 15px 20px;
    }

    .orders-hero h1 {
        font-size: 30px;
    }

    .orders-hero p {
        font-size: 14px;
    }

    .orders-container {
        width: 92%;

        margin-top: 20px;
    }

    .order-card {
        padding: 17px;
    }

    .order-header {
        gap: 8px;
    }

    .order-book {
        gap: 10px;
    }

    .order-book img {
        width: 50px;
        height: 65px;
    }

    .order-book-info h4 {
        font-size: 14px;
    }

    .order-book-price {
        font-size: 14px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .orders-hero h1 {
        font-size: 27px;
    }

    .orders-hero span {
        font-size: 12px;

        padding: 6px 13px;
    }

    .orders-hero p {
        font-size: 13px;
    }

    .order-card {
        padding: 14px;
    }

    .order-header h2 {
        font-size: 16px;
    }

    .order-customer h3,
    .order-books h3 {
        font-size: 15px;
    }

    .order-book img {
        width: 48px;
        height: 62px;
    }

    .order-book-info h4 {
        font-size: 13px;
    }

    .order-book-info p {
        font-size: 11px;
    }

    .order-total strong {
        font-size: 17px;
    }
}
/* =========================================================
   FINAL COMPACT ORDER DESIGN
========================================================= */

.orders-container {
    width: 70% !important;
    max-width: 800px !important;
    margin: 20px auto 40px !important;
}

.order-card {
    padding: 18px 22px !important;
    margin-bottom: 18px !important;
    border-radius: 12px !important;
}

.order-header h2 {
    font-size: 17px !important;
}

.order-status {
    font-size: 11px !important;
    padding: 4px 9px !important;
}

.order-date {
    font-size: 12px !important;
}

.order-customer {
    padding: 12px 0 !important;
}

.order-customer h3,
.order-books h3 {
    font-size: 15px !important;
    margin-bottom: 7px !important;
}

.order-customer p {
    font-size: 12px !important;
    margin: 3px 0 !important;
}

.order-book {
    gap: 12px !important;
    padding: 8px 0 !important;
}

.order-book img {
    width: 48px !important;
    height: 62px !important;
}

.order-book-info h4 {
    font-size: 14px !important;
    margin-bottom: 3px !important;
}

.order-book-info p {
    font-size: 11px !important;
}

.order-book-price {
    font-size: 14px !important;
    min-width: 50px !important;
}

.order-total {
    padding-top: 12px !important;
}

.order-total span {
    font-size: 13px !important;
}

.order-total strong {
    font-size: 17px !important;
}


/* Smaller My Orders heading */

.orders-hero {
    padding: 22px 20px 18px !important;
}

.orders-hero h1 {
    font-size: 34px !important;
}

.orders-hero p {
    font-size: 14px !important;
}

.orders-hero span {
    font-size: 12px !important;
    padding: 6px 14px !important;
}
.customer-tracking{margin-top:18px;padding:18px;border:1px solid #e7e9ef;border-radius:12px;background:#fff}
.customer-tracking h3{margin:0 0 16px}
.tracking-timeline{display:flex;align-items:flex-start;justify-content:space-between;position:relative;gap:4px;margin:10px 0 22px}
.tracking-timeline:before{content:"";position:absolute;top:12px;left:4%;right:4%;height:3px;background:#e5e7eb;z-index:0}
.tracking-step{position:relative;z-index:1;text-align:center;flex:1;font-size:12px;color:#7b8494}
.tracking-dot{width:25px;height:25px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 7px;background:#e5e7eb;color:#fff;font-weight:700}
.tracking-step.done .tracking-dot{background:#123b7a}
.tracking-step.current .tracking-dot{box-shadow:0 0 0 4px rgba(18,59,122,.12)}
.tracking-step.done .tracking-label{color:#172033;font-weight:700}
.tracking-extra{padding:10px 0}
.tracking-extra p{margin:6px 0}
.tracking-cancelled{padding:12px;border-radius:9px;background:#fff1f1;color:#b42318;font-weight:700}
.customer-tracking details{margin-top:10px}
.customer-tracking summary{cursor:pointer;font-weight:700}
.customer-history-item{padding:10px 0;border-bottom:1px solid #eee}
.customer-history-item b{display:block}
.customer-history-item span{font-size:12px;color:#667085}
.customer-history-item p{margin:4px 0 0;font-size:13px}
@media(max-width:650px){.tracking-label{font-size:10px}.tracking-timeline:before{left:5%;right:5%}}


.order-payment-info{display:flex;flex-wrap:wrap;gap:10px 24px;padding:12px 0;color:#555;font-size:13px}
.order-payment-info strong{color:#123b78}
@media(max-width:600px){.order-payment-info{display:grid;gap:7px}}