/* =========================================
   GLOBAL EXPRESS SERVICE v4.0
   PROFESSIONAL DESIGN SYSTEM
========================================= */

/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ROOT COLORS */
:root {
    --primary: #D40511;
    --secondary: #FFCC00;
    --dark: #1f2937;
    --light: #f5f7fa;
    --white: #ffffff;
}

/* BODY */
body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--light);
    color: var(--dark);
}

/* NAVBAR */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--primary);
    padding: 15px 40px;
    color: var(--white);
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

/* COMPANY LOGO */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-img{

    width:180px;

    height:55px;

    object-fit:contain;

    display:block;

}

.logo-text h2 {
    margin: 0;
    font-size: 22px;
    color: var(--white);
    font-weight: bold;
}

.logo-text span {
    display: block;
    font-size: 11px;
    color: #ffffff;
    opacity: 0.9;
    margin-top: 3px;
}

/* ==================================
PROFESSIONAL HERO
================================== */

.hero{

position:relative;

min-height:550px;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

color:white;

}

.hero-content{

    width:100%;

    max-width:1200px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

}

.hero-text{

    flex:1;

}

.hero-text h1{

    font-size:52px;

    margin-bottom:20px;

    line-height:1.2;

}

.hero-text p{

    font-size:22px;

    line-height:1.7;

}

.track-box{

    width:400px;

    background:white;

    color:#333;

    padding:30px;

    border-radius:15px;

    box-shadow:0 15px 40px rgba(0,0,0,.35);

}

.track-box h3{

    margin-bottom:20px;

    color:#D40511;

}

.track-box input{

    width:100%;

    padding:15px;

    margin-bottom:20px;

    border:1px solid #ddd;

    border-radius:8px;

    font-size:16px;

}

.track-box button{

    width:100%;

    padding:15px;

    background:#D40511;

    color:white;

    border:none;

    border-radius:8px;

    font-size:17px;

    cursor:pointer;

    transition:.3s;

}

.track-box button:hover{

    background:#a5000e;

}

/* ===============================
HERO IMAGE SLIDER
=============================== */


.hero-slider{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

z-index:0;

}



.hero-slider img{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

opacity:0;

animation:heroSlide 20s infinite;

}




.hero-slider img:nth-child(1){

animation-delay:0s;

}


.hero-slider img:nth-child(2){

animation-delay:5s;

}


.hero-slider img:nth-child(3){

animation-delay:10s;

}


.hero-slider img:nth-child(4){

animation-delay:15s;

}




@keyframes heroSlide{


0%{

opacity:0;

}


10%{

opacity:1;

}


25%{

opacity:1;

}


35%{

opacity:0;

}


100%{

opacity:0;

}


}




.hero-overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.55);

z-index:1;

}



.hero-content{

position:relative;

z-index:2;

}

/* DASHBOARD */
.dashboard {
    display: none;
    padding: 30px;
    background: white;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.dashboard.show {
    display: block;
}

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

.step{

display:inline-flex;

align-items:center;

justify-content:center;

padding:12px 20px;

margin:12px 8px;

border-radius:30px;

background:white;

border:2px solid #ddd;

font-weight:bold;

font-size:14px;

transition:.35s;

box-shadow:0 4px 10px rgba(0,0,0,.08);

}
.step.completed{

background:#27ae60;

color:white;

border-color:#27ae60;

}

.step.current{

background:#f39c12;

color:white;

border-color:#f39c12;

}


/* STATUS STEP COLORS */

.step.completed{

background:#27ae60;

color:white;

border-color:#27ae60;

}


.step.current{

background:#f39c12;

color:white;

border-color:#f39c12;

}

.step.completed {

    background:#27ae60;

    color:white;

    border:2px solid #27ae60;

}

.step.current {

    background:#f39c12;

    color:white;

    border:2px solid #f39c12;

}

/* MAP */
#map {
    border-radius: 10px;
    margin: 20px;
}
/* ======================================
   GLOBAL EXPRESS SERVICE v5.1 UI UPGRADE
   MODULE 3.1 - PROFESSIONAL DESIGN
====================================== */

/* ==========================================
   PREMIUM CUSTOMER SHIPMENT CARD
========================================== */

.shipment-card {
    background: #ffffff;
    padding: 26px;
    margin-top: 18px;
    border-radius: 18px;
    border: 1px solid #e7e7e7;
    box-shadow:
        0 12px 35px rgba(0,0,0,.08);
    font-family: Arial, sans-serif;
    animation: fadeIn .5s ease-in-out;
}


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

.shipment-card h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #111111;
    letter-spacing: -.3px;
}

.shipment-card > p {
    margin: 6px 0 20px;
    color: #666666;
    font-size: 14px;
}


/* ==========================================
   SECTION HEADINGS
========================================== */

.shipment-card h3 {
    margin: 24px 0 14px;
    color: #171717;
    font-size: 18px;
    font-weight: 700;
}


/* ==========================================
   SUMMARY LABELS
========================================== */

.summary-label {
    display: block;
    margin-bottom: 6px;
    color: #777777;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
}


/* ==========================================
   SUMMARY VALUES
========================================== */

.summary-item span:last-child {
    color: #171717;
    font-size: 14px;
    font-weight: 700;
    word-break: break-word;
}


/* ==========================================
   SHIPMENT INFORMATION GRID
========================================== */

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 8px;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.info-grid div {
    min-height: 52px;
    padding: 13px 15px;
    border-bottom: 1px solid #eeeeee;
}

.info-grid div:nth-child(odd) {
    background: #fafafa;
}

.info-grid strong {
    display: block;
    margin-bottom: 5px;
    color: #777777;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.info-grid div[id^="ship"] {
    color: #171717;
    font-size: 14px;
    font-weight: 600;
}


/* ==========================================
   STATUS BADGE
========================================== */

#shipStatus {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 30px;
    padding: 5px 12px;
    border-radius: 20px;
    background: #fff4f4;
    color: #d40511;
    font-size: 12px;
    font-weight: 700;
}


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

.progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 22px 0 10px;
}

#progressTitle {
    color: #333333;
    font-size: 14px;
    font-weight: 700;
}

#progressText {
    color: #d40511;
    font-size: 14px;
    font-weight: 700;
}


/* ==========================================
   PREMIUM PROGRESS TRACK
========================================== */

.progress-container {
    width: 100%;
    height: 10px;
    background: #eeeeee;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,.08);
}

#progressBar {
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #d40511,
        #ef3340
    );
    transition: width .7s ease;
}


/* ==========================================
   EXISTING STEP TIMELINE
========================================== */

.step {
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

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


/* ==========================================
   SHIPMENT HISTORY
========================================== */

.shipment-card .history-empty {
    margin: 12px 0;
    padding: 18px;
    text-align: center;
    color: #888888;
    background: #fafafa;
    border: 1px dashed #dddddd;
    border-radius: 10px;
    font-size: 13px;
}


/* ==========================================
   GENERAL TEXT
========================================== */

.shipment-card p {
    color: #444444;
    font-size: 14px;
    line-height: 1.5;
}

.shipment-card strong {
    color: #111111;
}


/* ==========================================
   CARD ANIMATION
========================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================
   MOBILE CARD
========================================== */

@media (max-width:700px){

    .shipment-card {
        padding: 20px;
        border-radius: 15px;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .info-grid div {
        padding: 11px 13px;
    }

    .info-grid div:nth-child(odd) {
        background: #ffffff;
    }

}


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

@media (max-width:430px){

    .shipment-card {
        padding: 16px;
        border-radius: 13px;
    }

    .shipment-card h2 {
        font-size: 21px;
    }

    .summary-item span:last-child {
        font-size: 13px;
    }

}

/* Processing */
.status-processing {
    background: #fff3cd;
    color: #856404;
}

/* In Transit */
.status-transit {
    background: #cce5ff;
    color: #004085;
}

/* Delivered */
.status-delivered {
    background: #d4edda;
    color: #155724;
}
.leaflet-marker-icon {
    filter: drop-shadow(0 0 8px rgba(212, 5, 17, 0.8));
    transition: transform 0.3s ease;
}

.pulse {
    animation: pulseAnim 1.2s infinite;
}

@keyframes pulseAnim {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}


/* ===============================
   CONTACT SECTION
=============================== */

.contact {
    padding: 40px;
    text-align: center;
    background: #f8f8f8;
    margin-top: 40px;
}

.contact h2 {
    color: #D40511;
    margin-bottom: 10px;
}

.contact p {
    margin: 5px 0;
}

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

.footer {
    background: #111;
    color: white;
    text-align: center;
    padding: 15px;
    margin-top: 20px;
}

/* ===============================
   LANGUAGE SELECT
=============================== */

#languageSelect {
    padding: 6px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* ===============================
LANGUAGE SELECTOR
=============================== */

.language-box{

    margin-left:20px;

}

#lang{

    padding:8px 12px;

    border-radius:6px;

    border:none;

    font-size:14px;

    cursor:pointer;

    background:white;

    color:#333;

}
/* ===============================
SERVICES SECTION
=============================== */

.services{

padding:60px 40px;

background:white;

text-align:center;

}


.services h2{

font-size:32px;

margin-bottom:40px;

color:#D40511;

}



.service-container{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}



.service-card{

width:280px;

background:#f8f8f8;

padding:30px;

border-radius:15px;

box-shadow:0 5px 15px rgba(0,0,0,.12);

transition:.3s;

}



.service-card:hover{

transform:translateY(-10px);

}



.service-icon{

font-size:45px;

margin-bottom:15px;

}



.service-card h3{

margin-bottom:15px;

color:#333;

}



.service-card p{

color:#666;

line-height:1.6;

}

/* ===============================
PROFESSIONAL SHIPMENT CARD
=============================== */

.glass-card{

background:rgba(255,255,255,.97);

border-radius:18px;

padding:30px;

box-shadow:0 15px 40px rgba(0,0,0,.12);

border:1px solid rgba(255,255,255,.3);

transition:.35s;

margin-bottom:25px;

}

.glass-card:hover{

transform:translateY(-4px);

box-shadow:0 20px 45px rgba(0,0,0,.18);

}

/* =====================================
   SHIPMENT HISTORY
===================================== */

.shipment-history{

    margin-top:30px;

    background:#ffffff;

    border-radius:15px;

    padding:20px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.shipment-history h3{

    color:var(--primary);

    margin-bottom:20px;

    font-size:22px;

    font-weight:bold;

}


/* ==========================================
   PREMIUM SHIPMENT HISTORY
   ========================================== */

.history-item{

    display:flex;

    align-items:flex-start;

    gap:16px;

    position:relative;

    padding:0 0 28px 0;

    min-height:62px;

}


/* Vertical connecting line */

.history-item:not(:last-child)::before{

    content:"";

    position:absolute;

    left:16px;

    top:38px;

    width:2px;

    height:calc(100% - 25px);

    background:linear-gradient(
        to bottom,
        #d40511,
        #e5e5e5
    );

}


/* History icon */

.history-icon{

    width:34px;

    height:34px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:14px;

    font-weight:700;

    color:#ffffff;

    background:#cfcfcf;

    flex-shrink:0;

    position:relative;

    z-index:2;

    box-shadow:
        0 3px 10px rgba(0,0,0,.08);

}


/* Completed event */

.history-item.completed .history-icon{

    background:#28a745;

    box-shadow:
        0 4px 12px rgba(40,167,69,.25);

}


/* Current event */

.history-item.current .history-icon{

    background:#d40511;

    box-shadow:
        0 4px 14px rgba(212,5,17,.30);

    animation:pulseHistory 1.8s infinite;

}


/* History content */

.history-item > div{

    padding-top:2px;

    min-width:0;

}


/* Event title */

.history-item strong{

    display:block;

    font-size:15px;

    line-height:1.35;

    margin-bottom:5px;

    color:#222222;

    font-weight:700;

}


/* Event description */

.history-item p{

    margin:0 0 5px 0;

    color:#666666;

    font-size:13px;

    line-height:1.5;

}


/* Event date/status */

.history-item small{

    display:block;

    color:#999999;

    font-size:12px;

    line-height:1.4;

}


/* Current event text */

.history-item.current strong{

    color:#d40511;

}


/* History pulse */

@keyframes pulseHistory{

    0%{

        transform:scale(1);

        box-shadow:
            0 0 0 0 rgba(212,5,17,.45);

    }

    70%{

        transform:scale(1.06);

        box-shadow:
            0 0 0 10px rgba(212,5,17,0);

    }

    100%{

        transform:scale(1);

        box-shadow:
            0 0 0 0 rgba(212,5,17,0);

    }

}

/* ==========================================
   PREMIUM SHIPMENT PROGRESS
   ========================================== */

.progress-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin:18px 0 10px 0;

}


/* Progress title */

#progressTitle{

    font-size:14px;

    font-weight:700;

    color:#333333;

}


/* Percentage */

#progressText{

    font-size:14px;

    font-weight:800;

    color:#d40511;

}


/* Track */

.progress-container{

    width:100%;

    height:10px;

    background:#eeeeee;

    border-radius:20px;

    overflow:hidden;

    position:relative;

    box-shadow:
        inset 0 1px 3px rgba(0,0,0,.08);

}


/* Active progress */

#progressBar{

    height:100%;

    width:0%;

    min-width:0;

    background:linear-gradient(
        90deg,
        #8f0000 0%,
        #d40511 55%,
        #ff3030 100%
    );

    border-radius:20px;

    transition:
        width .8s ease;

    position:relative;

    box-shadow:
        0 2px 8px rgba(212,5,17,.25);

}


/* Moving highlight */

#progressBar::after{

    content:"";

    position:absolute;

    top:0;

    left:-40px;

    width:40px;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );

    animation:progressShine 2.2s linear infinite;

}


@keyframes progressShine{

    0%{

        left:-40px;

    }

    100%{

        left:100%;

    }

}

/* ===============================
WORLD ROUTE TIMELINE
=============================== */

.route-container{

    background:#fff;

    border-radius:14px;

    margin:20px;

    padding:25px;

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

}


.route-stop{

    display:flex;

    align-items:center;

    gap:15px;

    margin:14px 0;

    font-size:16px;

    position:relative;

}


.route-stop span:first-child{

    width:38px;

    height:38px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f1f1f1;

    font-size:20px;

    z-index:2;

}


.route-line{

    margin-left:18px;

    border-left:3px dashed #ddd;

    height:28px;

}


.route-complete{

    color:#28a745;

    font-weight:700;

}


.route-complete span:first-child{

    background:#dff5e5;

}


.route-current{

    color:#007bff;

    font-weight:700;

}


.route-current span:first-child{

    background:#dceeff;

    box-shadow:0 0 12px rgba(0,123,255,.5);

}


.route-pending{

    color:#999;

}


.route-pending span:first-child{

    background:#f5f5f5;

}


@keyframes pulseRoute{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.12);
    }

    100%{
        transform:scale(1);
    }

}

/* ===============================
SHIPMENT BRAND
=============================== */

.shipment-brand{

    text-align:center;

    margin-bottom:20px;

    padding-bottom:15px;

    border-bottom:2px solid #eeeeee;

}

.shipment-brand h2{

    margin:0;

    color:#BE0000;

    font-size:26px;

    font-weight:bold;

    letter-spacing:.5px;

}

.shipment-brand p{

    margin-top:6px;

    color:#666666;

    font-size:13px;

    font-style:italic;

}

/* ===============================
STATUS BADGE
=============================== */

.status-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:bold;

    color:#ffffff;

    background:#777777;

    letter-spacing:.5px;

    text-transform:uppercase;

    box-shadow:0 3px 8px rgba(0,0,0,.15);

}

/* ==========================================
   PREMIUM SHIPMENT SUMMARY
   FINAL POLISH
   ========================================== */

.shipment-summary{

    display:grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin:18px 0 24px;

    padding:0;

    background:#ffffff;

    border:1px solid #e1e5ea;

    border-radius:14px;

    overflow:hidden;

    box-shadow:
        0 5px 18px rgba(0,0,0,.06);

}


/* ==========================================
   SUMMARY ITEM
   ========================================== */

.summary-item{

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-height:78px;

    padding:15px 18px;

    background:#ffffff;

    border-right:1px solid #e9ecef;

    transition:
        background .2s ease,
        box-shadow .2s ease;

}


.summary-item:hover{

    background:#fafbfc;

}


.summary-item:last-child{

    border-right:none;

}


/* ==========================================
   SUMMARY LABEL
   ========================================== */

.summary-label{

    display:block;

    font-size:10px;

    font-weight:800;

    color:#7b8188;

    text-transform:uppercase;

    letter-spacing:.8px;

    margin-bottom:6px;

}


/* ==========================================
   SUMMARY VALUE
   ========================================== */

.summary-item span:last-child{

    display:block;

    font-size:14px;

    color:#202428;

    font-weight:700;

    line-height:1.4;

    word-break:break-word;

}


/* ==========================================
   SUMMARY VALUE EMPHASIS
   ========================================== */

#summaryTracking{

    color:#c40000;

    letter-spacing:.3px;

}


#summaryDestination{

    color:#222222;

}


#summaryETA{

    color:#333333;

}


/* ==========================================
   SHIPMENT CARD RESPONSIVE DESIGN
   ========================================== */

@media (max-width:700px){

    .shipment-summary{

        grid-template-columns:
            repeat(2, 1fr);

    }


    .summary-item{

        min-height:70px;

        padding:13px 14px;

        border-right:none;

        border-bottom:1px solid #e9ecef;

    }


    .summary-item:nth-child(odd){

        border-right:1px solid #e9ecef;

    }


    .summary-item:nth-last-child(-n+2){

        border-bottom:none;

    }


    .info-grid{

        grid-template-columns:
            1fr;

        gap:0;

    }


    .info-grid div{

        padding:10px 0;

    }


    .info-grid strong{

        display:block;

        margin-bottom:3px;

    }

}


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

@media (max-width:430px){

    .shipment-summary{

        grid-template-columns:
            1fr;

        border-radius:12px;

    }


    .summary-item{

        min-height:64px;

        padding:12px 14px;

        border-right:none !important;

        border-bottom:1px solid #e9ecef !important;

    }


    .summary-item:last-child{

        border-bottom:none !important;

    }


    .summary-label{

        font-size:9px;

        letter-spacing:.7px;

    }


    .summary-item span:last-child{

        font-size:13px;

    }

}

/* =========================================================
   GLOBAL EXPRESS SERVICE
   FINAL CUSTOMER TRACKING VISUAL POLISH
   CSS ONLY — DO NOT MODIFY JAVASCRIPT
   ========================================================= */


/* =========================================================
   1. SHIPMENT SUMMARY
   ========================================================= */

.shipment-summary{

    position:relative;

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fafafa 100%
        );

    border:1px solid #e4e7eb;

    border-radius:16px;

    overflow:hidden;

    margin:20px 0 24px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.07);

}


.summary-item{

    min-height:82px;

    padding:16px 18px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    border-right:1px solid #e9ecef;

    transition:
        background .25s ease,
        transform .25s ease;

}


.summary-item:hover{

    background:#fff;

}


.summary-item:last-child{

    border-right:none;

}


.summary-label{

    display:block;

    font-size:10px;

    font-weight:800;

    color:#8a8f98;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:7px;

}


.summary-item span:last-child{

    display:block;

    font-size:15px;

    font-weight:700;

    color:#20242a;

    line-height:1.35;

    word-break:break-word;

}


/* =========================================================
   2. SHIPMENT INFORMATION CONTAINER
   ========================================================= */

.info-grid{

    display:grid;

    grid-template-columns:
        180px 1fr;

    column-gap:0;

    row-gap:0;

    background:#ffffff;

    border:1px solid #e4e7eb;

    border-radius:16px;

    overflow:hidden;

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

    margin-top:14px;

}


.info-grid > div{

    min-height:48px;

    padding:13px 17px;

    display:flex;

    align-items:center;

    border-bottom:1px solid #edf0f2;

}


.info-grid > div:nth-last-child(-n+2){

    border-bottom:none;

}


.info-grid > div:nth-child(odd){

    background:#f8f9fa;

}


.info-grid > div:nth-child(even){

    background:#ffffff;

    color:#25282d;

    font-weight:600;

}


.info-grid strong{

    font-size:11px;

    font-weight:800;

    color:#737980;

    text-transform:uppercase;

    letter-spacing:.5px;

}


/* =========================================================
   3. SHIPMENT INFORMATION TITLE
   ========================================================= */

#shipmentInfoTitle{

    margin:24px 0 12px;

    font-size:18px;

    font-weight:800;

    color:#20242a;

    display:flex;

    align-items:center;

    gap:8px;

}


#shipmentInfoTitle::after{

    content:"";

    flex:1;

    height:1px;

    background:#e5e7ea;

    margin-left:8px;

}


/* =========================================================
   4. PROGRESS SECTION
   ========================================================= */

.progress-section{

    grid-column:1 / -1;

    padding:18px 18px 20px !important;

    background:#ffffff !important;

    border-bottom:1px solid #edf0f2;

    display:block !important;

}


.progress-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:9px;

}


#progressTitle{

    font-size:12px;

    font-weight:800;

    color:#555b63;

    text-transform:uppercase;

    letter-spacing:.5px;

}


#progressText{

    font-size:14px;

    font-weight:800;

    color:#c40000;

}


.progress-container{

    width:100%;

    height:9px;

    background:#eceff2;

    border-radius:20px;

    overflow:hidden;

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.08);

}


.progress-bar{

    height:100%;

    min-width:0;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            #d40511,
            #f21d2a
        );

    box-shadow:
        0 2px 8px rgba(212,5,17,.25);

    transition:
        width .7s ease;

}


/* =========================================================
   5. TRANSPORT DISPLAY
   ========================================================= */

.shipment-transport-display{

    display:inline-flex;

    align-items:center;

    gap:9px;

}


.shipment-transport-icon{

    width:28px;

    height:28px;

    object-fit:contain;

    display:block;

}


.shipment-transport-name{

    font-weight:700;

    color:#25282d;

}


/* =========================================================
   6. ROUTE TIMELINE
   ========================================================= */

#routeTimeline{

    grid-column:1 / -1;

    margin:0;

    padding:20px;

    background:#fafbfc;

    border-top:1px solid #edf0f2;

    border-bottom:1px solid #edf0f2;

}


.route-stop{

    display:flex;

    align-items:center;

    gap:10px;

    min-height:34px;

    font-size:13px;

    font-weight:700;

    color:#555b63;

}


.route-stop span:first-child{

    width:25px;

    height:25px;

    min-width:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#eef0f2;

    font-size:13px;

}


.route-stop.route-complete span:first-child{

    background:#e8f7ed;

    color:#218838;

}


.route-stop.route-current span:first-child{

    background:#fff1f2;

    color:#d40511;

}


.route-stop.route-current{

    color:#20242a;

}


.route-line{

    width:2px;

    height:20px;

    margin-left:12px;

    background:#dfe3e7;

}


/* =========================================================
   7. SHIPMENT PROGRESS STEPS
   ========================================================= */

#progressSectionTitle{

    margin:28px 0 15px;

    font-size:18px;

    font-weight:800;

    color:#20242a;

}


.step{

    position:relative;

    padding:14px 16px;

    margin-bottom:8px;

    background:#ffffff;

    border:1px solid #e5e8eb;

    border-radius:10px;

    color:#555b63;

    font-size:14px;

    font-weight:600;

    transition:
        .25s ease;

}


.step:hover{

    transform:translateX(3px);

    box-shadow:
        0 4px 12px rgba(0,0,0,.06);

}


/* =========================================================
   8. SHIPMENT HISTORY
   ========================================================= */

.shipment-history{

    margin-top:28px;

    padding:22px;

    background:#ffffff;

    border:1px solid #e4e7eb;

    border-radius:16px;

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

}


.shipment-history h3{

    margin:0 0 18px;

    font-size:18px;

    font-weight:800;

    color:#20242a;

}


#shipmentHistoryContainer{

    position:relative;

}


.history-empty{

    padding:20px;

    text-align:center;

    color:#888;

    background:#f8f9fa;

    border-radius:10px;

    font-size:13px;

}


/* =========================================================
   9. MAP CONTAINER
   ========================================================= */

#map{

    margin-top:22px !important;

    height:400px;

    border-radius:14px;

    overflow:hidden;

    border:1px solid #dfe3e7;

    box-shadow:
        0 8px 22px rgba(0,0,0,.08);

}


/* =========================================================
   10. TRACKING DASHBOARD
   ========================================================= */

#dash{

    background:#f6f7f9;

}


#dash.show{

    animation:
        dashboardFadeIn .45s ease;

}


@keyframes dashboardFadeIn{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* =========================================================
   11. GENERAL TEXT POLISH
   ========================================================= */

#dash h2,
#dash h3{

    color:#20242a;

}


#dash p{

    color:#555b63;

}


/* =========================================================
   12. MOBILE
   ========================================================= */

@media(max-width:800px){

    .shipment-summary{

        grid-template-columns:
            repeat(2,1fr);

    }


    .summary-item:nth-child(2){

        border-right:none;

    }


    .summary-item{

        border-bottom:1px solid #e9ecef;

    }


    .info-grid{

        grid-template-columns:
            1fr 1fr;

    }

}


@media(max-width:600px){

    .shipment-summary{

        grid-template-columns:
            1fr 1fr;

    }


    .summary-item{

        min-height:70px;

        padding:13px;

    }


    .summary-label{

        font-size:9px;

    }


    .summary-item span:last-child{

        font-size:13px;

    }


    .info-grid{

        grid-template-columns:
            1fr;

    }


    .info-grid > div{

        min-height:42px;

    }


    .info-grid > div:nth-child(odd){

        background:#f8f9fa;

    }


    .info-grid > div:nth-child(even){

        background:#ffffff;

    }


    #map{

        height:320px;

    }


    .shipment-history{

        padding:16px;

    }

}


@media(max-width:430px){

    .shipment-summary{

        grid-template-columns:1fr;

    }


    .summary-item{

        border-right:none !important;

        border-bottom:1px solid #e9ecef;

    }


    .summary-item:last-child{

        border-bottom:none;

    }


    #shipmentInfoTitle{

        font-size:16px;

    }


    #progressSectionTitle{

        font-size:16px;

    }


    #map{

        height:280px;

    }

}

/* ==========================================
   PREMIUM SHIPMENT HISTORY TIMELINE
   ========================================== */

.shipment-history{
    margin-top:28px;
    background:#ffffff;
    border:1px solid #e8e8e8;
    border-radius:16px;
    padding:24px;
    box-shadow:0 6px 22px rgba(0,0,0,.06);
}


/* ==========================================
   HISTORY TITLE
   ========================================== */

.shipment-history h3{
    margin:0 0 22px 0;
    font-size:18px;
    font-weight:800;
    color:#222;
    border-bottom:1px solid #eeeeee;
    padding-bottom:14px;
}


/* ==========================================
   HISTORY CONTAINER
   ========================================== */

#shipmentHistoryContainer{
    position:relative;
}


/* ==========================================
   TIMELINE ITEM
   ========================================== */

.history-item{
    position:relative;

    display:flex;
    align-items:flex-start;

    gap:16px;

    padding:0 0 24px 0;

    margin-left:4px;
}


/* ==========================================
   TIMELINE CONNECTING LINE
   ========================================== */

.history-item:not(:last-child)::before{

    content:"";

    position:absolute;

    left:16px;

    top:34px;

    bottom:0;

    width:2px;

    background:#e3e3e3;
}


/* ==========================================
   HISTORY ICON
   ========================================== */

.history-icon{

    position:relative;

    z-index:2;

    width:34px;
    height:34px;

    min-width:34px;

    display:flex;

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

    border-radius:50%;

    background:#f1f1f1;

    border:2px solid #ffffff;

    box-shadow:
        0 2px 7px rgba(0,0,0,.12);

    font-size:16px;

}


/* ==========================================
   COMPLETED / LATEST EVENT
   ========================================== */

.history-item.completed .history-icon{

    background:#D40511;

    color:#ffffff;

    box-shadow:
        0 0 0 4px rgba(212,5,17,.10),
        0 4px 12px rgba(212,5,17,.20);

}


/* ==========================================
   HISTORY CONTENT
   ========================================== */

.history-item > div{

    flex:1;

    min-width:0;

    padding-top:1px;

}


/* ==========================================
   STATUS
   ========================================== */

.history-item strong{

    display:block;

    font-size:14px;

    font-weight:800;

    color:#222;

    margin-bottom:4px;

}


/* ==========================================
   DESCRIPTION
   ========================================== */

.history-item p{

    margin:0 0 6px 0;

    font-size:13px;

    line-height:1.5;

    color:#666;

}


/* ==========================================
   DATE
   ========================================== */

.history-item small{

    display:block;

    font-size:11px;

    color:#999;

    margin-top:3px;

}


/* ==========================================
   LOCATION
   ========================================== */

.history-item .history-location{

    color:#555;

    font-weight:600;

}


/* ==========================================
   COMPLETED CONTENT
   ========================================== */

.history-item.completed strong{

    color:#D40511;

}


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

.history-empty{

    margin:0;

    padding:20px;

    text-align:center;

    color:#999;

    font-size:13px;

    background:#fafafa;

    border-radius:10px;

}


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

@media(max-width:600px){

    .shipment-history{

        padding:18px;

        border-radius:13px;

    }

    .shipment-history h3{

        font-size:16px;

    }

    .history-item{

        gap:12px;

        padding-bottom:20px;

    }

    .history-icon{

        width:30px;
        height:30px;

        min-width:30px;

        font-size:14px;

    }

    .history-item:not(:last-child)::before{

        left:14px;

        top:30px;

    }

    .history-item strong{

        font-size:13px;

    }

    .history-item p{

        font-size:12px;

    }

}

/* ==========================================
   FINAL PREMIUM SHIPMENT INFORMATION CARD
   ========================================== */

.shipment-card{
    position:relative;
    background:#ffffff;
    border:1px solid #e8e8e8;
    border-radius:18px;
    overflow:hidden;
    box-shadow:
        0 8px 30px rgba(0,0,0,.07);
}


/* ==========================================
   SHIPMENT BRAND HEADER
   ========================================== */

.shipment-brand{

    padding:20px 24px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #fafafa 100%
        );

    border-bottom:1px solid #eeeeee;

}


.shipment-brand h2{

    margin:0;

    font-size:19px;

    font-weight:800;

    color:#222;

}


.shipment-brand p{

    margin:5px 0 0;

    font-size:11px;

    color:#888;

    letter-spacing:.2px;

}


/* ==========================================
   SHIPMENT SUMMARY
   ========================================== */

.shipment-summary{

    margin:0;

    border:none;

    border-bottom:1px solid #eeeeee;

    border-radius:0;

    box-shadow:none;

}


/* ==========================================
   SUMMARY VALUES
   ========================================== */

.summary-item span:last-child{

    color:#202020;

    font-size:14px;

    font-weight:750;

}


/* ==========================================
   SHIPMENT INFORMATION TITLE
   ========================================== */

#shipmentInfoTitle{

    margin:0;

    padding:20px 24px 14px;

    font-size:17px;

    font-weight:800;

    color:#222;

    border-bottom:1px solid #eeeeee;

}


/* ==========================================
   INFORMATION GRID
   ========================================== */

.info-grid{

    display:grid;

    grid-template-columns:
        180px 1fr;

    column-gap:20px;

    row-gap:0;

    padding:8px 24px 20px;

}


/* ==========================================
   LABELS
   ========================================== */

.info-grid > div:nth-child(odd){

    display:flex;

    align-items:center;

    min-height:46px;

    color:#777;

    font-size:12px;

    font-weight:700;

    border-bottom:1px solid #f1f1f1;

}


/* ==========================================
   VALUES
   ========================================== */

.info-grid > div:nth-child(even){

    display:flex;

    align-items:center;

    min-height:46px;

    color:#222;

    font-size:13px;

    font-weight:650;

    border-bottom:1px solid #f1f1f1;

}


/* ==========================================
   TRACKING NUMBER
   ========================================== */

#shipTracking{

    color:#D40511;

    font-weight:800;

    letter-spacing:.3px;

}


/* ==========================================
   STATUS
   ========================================== */

#shipStatus{

    font-weight:800;

}


/* ==========================================
   TRANSPORT DISPLAY
   ========================================== */

.shipment-transport-display{

    display:inline-flex;

    align-items:center;

    gap:8px;

}


.shipment-transport-icon{

    width:30px;

    height:22px;

    object-fit:contain;

}


.shipment-transport-name{

    font-weight:700;

}


/* ==========================================
   PROGRESS SECTION
   ========================================== */

.progress-section{

    margin:4px 24px 22px;

    padding:16px;

    background:#fafafa;

    border:1px solid #eeeeee;

    border-radius:12px;

}


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

.progress-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:9px;

}


#progressTitle{

    font-size:12px;

    font-weight:800;

    color:#555;

}


#progressText{

    font-size:13px;

    font-weight:800;

    color:#D40511;

}


/* ==========================================
   PROGRESS TRACK
   ========================================== */

.progress-container{

    width:100%;

    height:9px;

    background:#e8e8e8;

    border-radius:20px;

    overflow:hidden;

}


/* ==========================================
   PROGRESS BAR
   ========================================== */

.progress-bar{

    height:100%;

    width:0%;

    background:
        linear-gradient(
            90deg,
            #D40511,
            #ff3b30
        );

    border-radius:20px;

    transition:
        width .7s ease;

    box-shadow:
        0 0 8px rgba(212,5,17,.25);

}


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

@media(max-width:700px){

    .shipment-brand{

        padding:18px;

    }

    #shipmentInfoTitle{

        padding:18px 18px 13px;

    }

    .info-grid{

        grid-template-columns:
            1fr 1fr;

        padding:8px 18px 18px;

        column-gap:12px;

    }

    .info-grid > div:nth-child(odd),
    .info-grid > div:nth-child(even){

        min-height:42px;

    }

    .progress-section{

        margin-left:18px;

        margin-right:18px;

    }

}


@media(max-width:480px){

    .info-grid{

        grid-template-columns:1fr;

    }

    .info-grid > div:nth-child(odd){

        border-bottom:none;

        min-height:25px;

        padding-top:8px;

    }

    .info-grid > div:nth-child(even){

        min-height:38px;

        padding-bottom:8px;

    }

    .shipment-brand h2{

        font-size:17px;

    }

}

/* =========================================================
   END — FINAL CUSTOMER TRACKING VISUAL POLISH
   ========================================================= */