/* ===============================
   MAIN WRAPPER
=============================== */
.tracking-wrapper{
    max-width:70%;
    margin:2% auto;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ===============================
   CARD
=============================== */
.tracking-card{
    background:#fff;
    border-radius:0.8rem;
    box-shadow:0 0.3rem 0.8rem rgba(0,0,0,0.08);
    overflow:hidden;
}

/* ===============================
   HEADER
=============================== */
.tracking-header{
    background:linear-gradient(135deg,#031772 0%,#6899f3 100%);
    color:#fff;
    padding:3%;
    text-align:center;
}

.tracking-header h1{
    margin:0 0 0.5%;
    font-size:160%;
}

.tracking-badge{
    background:rgba(255,255,255,0.2);
    padding:0.6% 2%;
    border-radius:0.4rem;
    display:inline-block;
    font-weight:600;
    font-size:95%;
}

/* ===============================
   BODY
=============================== */
.tracking-body{
    padding:3%;
}

/* ===============================
   SECTION TITLES
=============================== */
.section-title{
    font-size:120%;
    font-weight:600;
    margin:2% 0 1%;
    display:flex;
    align-items:center;
    gap:1%;
}

/* ===============================
   ORDER INFO
=============================== */
.order-info-container{
    background:#f8f9fa;
    border:0.5px solid #bebdc2;
    padding:2%;
    border-radius:0.5rem;
    box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.06);
    margin-bottom:2%;
    position:relative;
}

.order-info-container ul{
    list-style:none;
    padding:0;
    margin:0;
}

.order-info-container li{
    margin-bottom:0.5%;
    font-size:95%;
}

/* LOGO */
.shipment-logo {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    max-width: 90px; /* cap it */
    overflow: hidden;
}

.shipment-logo img {
    width: 100%;
    height: auto;
    display: block; /* removes inline baseline gap */
}


/* ===============================
   ITEMS
=============================== */
.items-box{
    background:#f8f9fa;
    border:0.5px solid #bebdc2;
    border-radius:0.5rem;
    box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.06);
    overflow:hidden;
}

.item-row{
    display:flex;
    align-items:center;
    gap:2%;
    padding:2%;
}

.item-row + .item-row{
    border-top:1px solid #bebdc2;
}

.item-image{
    width:8%;
}

.item-image img{
    width:100%;
    border-radius:0.4rem;
}

.item-details{
    width:60%;
}

.item-total{
    width:20%;
    text-align:right;
    font-weight:700;
    font-size:95%;
}

/* ===============================
   TIMELINE
=============================== */
.tracking-timeline{
    background:#f8f9fa;
    border:0.5px solid #bebdc2;
    padding:2%;
    border-radius:0.5rem;
    box-shadow:0 0.1rem 0.3rem rgba(0,0,0,0.06);
    margin-top:3%;
}

.timeline-container {
    position: relative; /* add this */
    padding-top: 0.5rem; /* gives the logo breathing room at the top */
    padding-right: 100px; /* prevents timeline text from sliding under the logo */
}

.timeline-container::before{
    content:"";
    position:absolute;
    left:1rem;
    top:0;
    bottom:0;
    width:0.12rem;
    background:#e0e0e0;
}

.timeline-container.delivered::before{
    background:#28a745;
}

.timeline-item{
    display:flex;
    gap:2%;
    margin-bottom:2%;
}

.timeline-marker{
    z-index:2;
}

.timeline-icon{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:2.2rem;
    height:2.2rem;
    border-radius:50%;
    font-size:100%;
}

/* ICONS */
.icon-complete{background:#28a745;color:#fff;}
.icon-complete::before{content:"✓";}

.icon-current{
    background:#ffc107;
    animation:pulse 2s infinite;
}
.icon-current::before{content:"●";}

.icon-out-for-delivery{background:#e5f3a4;}
.icon-out-for-delivery::before{content:"🚛";}

.icon-future{
    background:#e9ecef;
    border:0.12rem solid #dee2e6;
}
.icon-future::before{content:"○";}

.icon-final-delivered{
    background:rgb(93,45,180);
    color:#fff;
    animation:pulse 2s infinite;
}
.icon-final-delivered::before{content:"📦";}

@keyframes pulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.07);}
    100%{transform:scale(1);}
}

/* TEXT */
.timeline-status{
    font-weight:600;
    font-size:95%;
}

.timeline-location,
.timeline-timestamp{
    font-size:85%;
    color:#666;
}

/* ===============================
   ALERT (outside card)
=============================== */
.tracking-alert-wrapper{
    max-width:70%;
    margin:1.5% auto;
}

.tracking-alert{
    background:#fef3c7;
    border-left:0.35rem solid #f59e0b;
    padding:1.5%;
    border-radius:0.4rem;
    color:#92400e;
    font-size:95%;
}

/* ===============================
   LOADING OVERLAY
=============================== */
#tracking-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.4);
    z-index:9999;
    justify-content:center;
    align-items:center;
}

#tracking-overlay.htmx-request{
    display:flex;
}

#tracking-overlay .spinner{
    border:0.35rem solid #f3f3f3;
    border-top:0.35rem solid #3498db;
    border-radius:50%;
    width:3rem;
    height:3rem;
    animation:spin 1s linear infinite;
}

@keyframes spin{
    100%{transform:rotate(360deg);}
}

/* ===============================
   ORDER ITEMS HEADER ROW
=============================== */
.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2% 0 1%;
}

.order-total-badge {
    background: #031772;
    color: #fff;
    padding: 0.4% 1.5%;
    border-radius: 0.4rem;
    font-size: 95%;
    font-weight: 500;
    white-space: nowrap;
}

.order-total-badge strong {
    font-size: 110%;
}