/* ======================================================
LINKWORLD EXPRESS
PREMIUM TRACKING PAGE CSS
PART 1
GLOBAL + HEADER + HERO
====================================================== */


/* ======================================================
GLOBAL RESET
====================================================== */


*{

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Poppins",sans-serif;

}



html{

    scroll-behavior:smooth;

}



body{

    background:#f5f7fb;
    color:#172033;
    overflow-x:hidden;

}



img{

    max-width:100%;
    display:block;

}



a{

    text-decoration:none;
    color:inherit;

}



.container{

    width:90%;
    max-width:1250px;
    margin:auto;

}









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


.tracking-header{

    position:sticky;
    top:0;
    z-index:999;

    background:rgba(255,255,255,0.95);

    backdrop-filter:blur(15px);

    border-bottom:1px solid rgba(0,0,0,0.06);

}



.tracking-header .container{

    height:85px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}








/* LOGO */


.logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:22px;

    font-weight:800;

    color:#07152f;

}



.logo img{

    width:48px;

    height:48px;

    object-fit:contain;

}









/* NAVIGATION */


.navbar{

    display:flex;

    align-items:center;

    gap:35px;

}



.navbar a{

    font-size:15px;

    font-weight:500;

    color:#526075;

    position:relative;

    transition:.3s;

}



.navbar a:hover,
.navbar a.active{


    color:#0066ff;

}



.navbar a.active::after{


    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:100%;

    height:3px;

    border-radius:10px;

    background:#0066ff;


}









/* LIVE INDICATOR */


.tracking-live-indicator{


    display:flex;

    align-items:center;

    gap:10px;

    background:#eef7ff;

    color:#0066ff;

    padding:10px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

}





.live-dot{


    width:10px;

    height:10px;

    background:#18c964;

    border-radius:50%;

    animation:pulseLive 1.5s infinite;


}





@keyframes pulseLive{


    0%{

        box-shadow:0 0 0 0 rgba(24,201,100,.5);

    }


    70%{

        box-shadow:0 0 0 12px rgba(24,201,100,0);

    }


    100%{

        box-shadow:0 0 0 0 rgba(24,201,100,0);

    }


}









/* ======================================================
HERO SECTION
====================================================== */


.tracking-hero{


    min-height:650px;

    position:relative;

    display:flex;

    align-items:center;

    background:

    linear-gradient(
        120deg,
        rgba(3,17,43,.92),
        rgba(0,83,255,.80)
    ),

    url("../images/tracking-bg.jpg");


    background-size:cover;

    background-position:center;

}





.hero-overlay{


    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at top right,
        rgba(255,255,255,.15),
        transparent 40%
    );


}








.hero-content{


    position:relative;

    z-index:2;

    max-width:750px;

    color:white;

}








.hero-tag{


    display:inline-block;

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

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

    padding:10px 22px;

    border-radius:30px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:25px;


}








.hero-content h1{


    font-size:58px;

    line-height:1.15;

    font-weight:800;

    margin-bottom:25px;


}





.hero-content p{


    font-size:18px;

    line-height:1.8;

    color:rgba(255,255,255,.85);

    margin-bottom:40px;


}









/* ======================================================
TRACK SEARCH CARD
====================================================== */


.tracking-search-card{


    background:white;

    padding:35px;

    border-radius:22px;

    box-shadow:

    0 25px 60px rgba(0,0,0,.25);

    color:#172033;

    max-width:650px;


}





.tracking-search-card h3{


    font-size:24px;

    margin-bottom:20px;

    font-weight:700;


}








.tracking-search{


    display:flex;

    gap:15px;


}





.tracking-search input{


    flex:1;

    height:58px;

    border-radius:12px;

    border:1px solid #dbe2ec;

    padding:0 20px;

    font-size:15px;

    outline:none;

    transition:.3s;


}




.tracking-search input:focus{


    border-color:#0066ff;

    box-shadow:

    0 0 0 4px rgba(0,102,255,.12);


}








.tracking-search button{


    height:58px;

    padding:0 30px;

    border:none;

    border-radius:12px;

    background:#0066ff;

    color:white;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:10px;

    transition:.3s;


}





.tracking-search button:hover{


    background:#004dcc;

    transform:translateY(-2px);


}








.tracking-note{


    margin-top:20px;

    display:flex;

    align-items:center;

    gap:10px;

    color:#65748b;

    font-size:13px;


}
 /* ======================================================
LINKWORLD EXPRESS
PREMIUM TRACKING PAGE CSS
PART 2
DASHBOARD + OVERVIEW + MAP
====================================================== */





/* ======================================================
TRACKING PAGE
====================================================== */


.tracking-page{

    padding:80px 0;

}



section{

    margin-bottom:80px;

}









/* ======================================================
LIVE STATUS DASHBOARD
====================================================== */


.dashboard-grid{


    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:25px;


}








/* MAIN STATUS CARDS */


.status-card,
.location-card,
.mini-card{


    background:white;

    border-radius:24px;

    padding:30px;

    box-shadow:

    0 15px 45px rgba(0,0,0,.08);

    transition:.3s;


}



.status-card:hover,
.location-card:hover,
.mini-card:hover{


    transform:translateY(-5px);

    box-shadow:

    0 20px 55px rgba(0,0,0,.12);


}









/* STATUS LARGE CARD */


.premium-status{


    grid-column:span 2;


}







.status-top{


    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;


}



.status-top span{


    font-size:14px;

    font-weight:600;

    color:#65748b;


}








.pulse-green{


    width:12px;

    height:12px;

    background:#20d36b;

    border-radius:50%;

    animation:pulseGreen 1.5s infinite;


}





@keyframes pulseGreen{


0%{

box-shadow:0 0 0 0 rgba(32,211,107,.5);

}


70%{

box-shadow:0 0 0 14px rgba(32,211,107,0);

}


100%{

box-shadow:0 0 0 0 rgba(32,211,107,0);

}


}







.status-card h2{


    font-size:34px;

    font-weight:800;

    color:#07152f;

    margin-bottom:15px;


}




.status-card p{


    color:#65748b;

    line-height:1.7;

    font-size:14px;


}








.status-footer{


    margin-top:25px;

    padding-top:20px;

    border-top:1px solid #edf1f7;

    color:#16a34a;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:10px;


}









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



.current-location-card{


    grid-column:span 2;


}




.card-title{


    display:flex;

    align-items:center;

    gap:12px;

    font-weight:700;

    color:#07152f;

    margin-bottom:25px;


}



.card-title i{


    color:#0066ff;

    font-size:22px;


}





.location-card h2{


    font-size:28px;

    font-weight:800;

    margin-bottom:15px;


}





.location-card p{


    color:#65748b;

    font-size:14px;


}





.location-indicator{


    margin-top:25px;

    display:flex;

    align-items:center;

    gap:10px;

    font-size:13px;

    font-weight:700;

    color:#e11d48;


}




.pulse-red{


    width:12px;

    height:12px;

    background:#ef4444;

    border-radius:50%;

    animation:redPulse 1.5s infinite;


}




@keyframes redPulse{


0%{

box-shadow:0 0 0 0 rgba(239,68,68,.6);

}


70%{

box-shadow:0 0 0 14px rgba(239,68,68,0);

}


100%{

box-shadow:0 0 0 0 rgba(239,68,68,0);

}


}









/* ======================================================
MINI CARDS
====================================================== */


.mini-card{


    display:flex;

    align-items:center;

    gap:20px;


}



.mini-icon{


    width:60px;

    height:60px;

    border-radius:18px;

    background:#eef5ff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#0066ff;

    font-size:24px;


}




.mini-card h5{


    color:#65748b;

    font-size:13px;

    margin-bottom:8px;


}




.mini-card h3{


    font-size:20px;

    font-weight:700;


}









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


.section-header{


    text-align:center;

    margin-bottom:45px;


}




.section-header span{


    color:#0066ff;

    font-weight:700;

    font-size:13px;

    letter-spacing:1px;


}



.section-header h2{


    font-size:38px;

    margin:10px 0;

    font-weight:800;


}



.section-header p{


    color:#65748b;

}









/* ======================================================
SHIPMENT OVERVIEW
====================================================== */



.overview-grid{


    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:25px;


}




.overview-card{


    background:white;

    border-radius:22px;

    padding:30px;

    text-align:center;

    box-shadow:

    0 15px 40px rgba(0,0,0,.07);

    transition:.3s;


}




.overview-card:hover{


    transform:translateY(-6px);

}




.overview-card i{


    width:60px;

    height:60px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto auto 20px;

    background:#eef5ff;

    color:#0066ff;

    font-size:25px;


}





.overview-card h4{


    color:#65748b;

    font-size:14px;

    margin-bottom:12px;


}





.overview-card h3{


    font-size:18px;

    font-weight:700;

    word-break:break-word;


}









/* ======================================================
LIVE MAP SECTION
====================================================== */


.map-wrapper{


    background:white;

    border-radius:30px;

    padding:25px;

    box-shadow:

    0 20px 50px rgba(0,0,0,.08);


}





.map-toolbar{


    display:flex;

    justify-content:center;

    gap:20px;

    margin-bottom:20px;

    flex-wrap:wrap;


}







.toolbar-item{


    background:#f2f6ff;

    padding:12px 22px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    color:#0066ff;

    display:flex;

    gap:10px;

    align-items:center;


}







.tracking-map{


    width:100%;

    height:550px;

    border-radius:22px;

    overflow:hidden;


}






.leaflet-control-zoom{


    border:none!important;


}
 /* ======================================================
LINKWORLD EXPRESS
PREMIUM TRACKING PAGE CSS
PART 3
PROGRESS + TIMELINE
====================================================== */







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


.progress-card{


    background:white;

    border-radius:28px;

    padding:40px;

    box-shadow:

    0 20px 50px rgba(0,0,0,.08);


}








.progress-top{


    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;


}





.progress-top h3{


    font-size:22px;

    font-weight:800;


}




#progressText{


    background:#eef5ff;

    color:#0066ff;

    padding:10px 20px;

    border-radius:30px;

    font-weight:700;


}









/* MAIN PROGRESS BAR */


.premium-progress{


    height:22px;

    background:#e9eef7;

    border-radius:50px;

    overflow:hidden;

    position:relative;


}






.premium-progress-fill{


    height:100%;

    width:0%;

    background:

    linear-gradient(

    90deg,

    #0066ff,

    #00b7ff

    );


    border-radius:50px;

    position:relative;

    transition:1s ease;


}








.truck-progress{


    position:absolute;

    right:-15px;

    top:50%;

    transform:

    translateY(-50%);


    width:45px;

    height:45px;

    border-radius:50%;


    background:white;


    display:flex;

    align-items:center;

    justify-content:center;


    color:#0066ff;


    box-shadow:

    0 5px 20px rgba(0,0,0,.15);


}







.progress-labels{


    display:flex;

    justify-content:space-between;

    margin-top:20px;


}



.progress-labels span{


    color:#65748b;

    font-size:13px;

    font-weight:600;


}









/* ======================================================
SHIPMENT JOURNEY
====================================================== */


.journey-container{


    max-width:850px;

    margin:auto;


}





.journey-step{


    display:flex;

    gap:25px;

    align-items:flex-start;

    position:relative;

    padding:25px;

    background:white;

    border-radius:22px;

    box-shadow:

    0 15px 40px rgba(0,0,0,.07);

    transition:.3s;


}





.journey-step:hover{


    transform:translateX(8px);


}









/* ICON */


.journey-icon{


    width:65px;

    height:65px;

    flex-shrink:0;

    border-radius:50%;

    background:#edf2f8;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;

    color:#94a3b8;


}








.journey-step.completed .journey-icon{


    background:#dcfce7;

    color:#16a34a;


}








.journey-step.active .journey-icon{


    background:#dbeafe;

    color:#0066ff;

    animation:currentPulse 2s infinite;


}







@keyframes currentPulse{


0%{

box-shadow:

0 0 0 0 rgba(0,102,255,.4);

}


70%{

box-shadow:

0 0 0 18px rgba(0,102,255,0);

}


100%{

box-shadow:

0 0 0 0 rgba(0,102,255,0);

}


}









/* CONTENT */


.journey-content h3{


    font-size:20px;

    font-weight:800;

    margin-bottom:8px;


}





.journey-content p{


    color:#65748b;

    font-size:14px;

    line-height:1.7;


}









/* LIVE BADGE */


.live-badge{


    display:inline-block;

    margin-top:12px;

    background:#fee2e2;

    color:#dc2626;

    padding:5px 15px;

    border-radius:20px;

    font-size:12px;

    font-weight:800;


}









/* ======================================================
VERTICAL CONNECTING LINE
====================================================== */


.journey-line{


    height:45px;

    width:3px;

    background:#dbe4f0;

    margin-left:56px;


}









/* ======================================================
TIMELINE ACTIVE EFFECT
====================================================== */


.journey-step.active{


    border:

    2px solid rgba(0,102,255,.15);


}





.journey-step.active::before{


    content:"";


    position:absolute;

    left:-8px;

    top:25px;


    width:5px;

    height:60px;


    background:#0066ff;

    border-radius:10px;


}









/* ======================================================
SMOOTH APPEAR ANIMATION
====================================================== */


.journey-step{


    animation:

    fadeJourney .6s ease both;


}





.journey-step:nth-child(1){

animation-delay:.1s;

}



.journey-step:nth-child(3){

animation-delay:.2s;

}



.journey-step:nth-child(5){

animation-delay:.3s;

}



.journey-step:nth-child(7){

animation-delay:.4s;

}





@keyframes fadeJourney{


from{


opacity:0;

transform:translateY(25px);


}



to{


opacity:1;

transform:translateY(0);


}



}
/* ======================================================
LINKWORLD EXPRESS
PREMIUM TRACKING PAGE CSS
PART 4
DETAIL CARDS + GPS MARKERS + POLISH
====================================================== */








/* ======================================================
SHIPMENT DETAILS SECTION
====================================================== */


.details-grid{


    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:25px;


}








.detail-card{


    background:white;

    border-radius:25px;

    overflow:hidden;

    box-shadow:

    0 18px 45px rgba(0,0,0,.08);

    transition:.3s;


}






.detail-card:hover{


    transform:translateY(-6px);


}








/* CARD HEADER */


.detail-header{


    display:flex;

    align-items:center;

    gap:15px;

    padding:25px;

    background:

    linear-gradient(

    135deg,

    #f4f8ff,

    #ffffff

    );

    border-bottom:

    1px solid #edf2f7;


}





.detail-header i{


    width:45px;

    height:45px;

    border-radius:14px;

    background:#0066ff;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;


}





.detail-header h3{


    font-size:18px;

    font-weight:800;


}









/* DETAIL BODY */


.detail-body{


    padding:25px;


}








.detail-row{


    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:15px 0;

    border-bottom:

    1px solid #edf1f7;


}






.detail-row:last-child{


    border-bottom:none;


}








.detail-row span{


    color:#64748b;

    font-size:14px;


}







.detail-row strong{


    color:#07152f;

    font-size:14px;

    font-weight:700;

    text-align:right;

    max-width:60%;

    word-break:break-word;


}









/* ======================================================
LIVE LOCATION CARD
====================================================== */


.live-location-card{


    border:

    1px solid rgba(239,68,68,.15);


}






.live-location{


    margin-top:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:12px;

    background:#fff1f2;

    border-radius:15px;

    color:#dc2626;

    font-size:13px;

    font-weight:800;


}









/* ======================================================
LEAFLET MAP CUSTOMIZATION
====================================================== */



.leaflet-container{


    font-family:"Poppins",sans-serif;

}






.leaflet-popup-content-wrapper{


    border-radius:18px;

    padding:5px;


}







.leaflet-popup-content{


    margin:15px;

    font-size:14px;


}





.leaflet-popup-tip{


    display:none;


}









/* ======================================================
CUSTOM LIVE SHIPMENT MARKER
====================================================== */


.shipment-live-marker{


    background:none!important;

    border:none!important;


}





.live-marker{


    width:45px;

    height:45px;

    border-radius:50%;

    background:#0066ff;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;


    border:

    4px solid white;


    box-shadow:

    0 10px 30px rgba(0,102,255,.45);


    animation:

    markerPulse 2s infinite;


}






@keyframes markerPulse{


0%{

box-shadow:

0 0 0 0 rgba(0,102,255,.5);

}



70%{

box-shadow:

0 0 0 20px rgba(0,102,255,0);

}



100%{

box-shadow:

0 0 0 0 rgba(0,102,255,0);

}



}









/* ======================================================
DESTINATION MARKER
====================================================== */


.destination-marker{


    background:none!important;

    border:none!important;


}






.destination-pin{


    width:45px;

    height:45px;

    border-radius:50%;

    background:#16a34a;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;


    border:

    4px solid white;


    box-shadow:

    0 10px 30px rgba(22,163,74,.35);


}









/* ======================================================
LOADING OVERLAY (OPTIONAL)
====================================================== */


.loading-overlay{


    position:fixed;

    inset:0;

    background:

    rgba(255,255,255,.95);


    display:flex;

    align-items:center;

    justify-content:center;

    z-index:9999;


}






.loader-card{


    text-align:center;

    background:white;

    padding:45px;

    border-radius:30px;

    box-shadow:

    0 25px 70px rgba(0,0,0,.15);


}





.loader-card img{


    width:70px;

    margin:auto auto 20px;


}





.loader-spinner{


    width:55px;

    height:55px;

    border-radius:50%;

    border:

    5px solid #e5edff;

    border-top-color:#0066ff;

    margin:20px auto;

    animation:spinLoader 1s linear infinite;


}





@keyframes spinLoader{


100%{

transform:rotate(360deg);

}


}









/* ======================================================
DESKTOP SPACING POLISH
====================================================== */


.shipment-details-section{


    padding-bottom:40px;


}





.delivery-card{


    border:

    1px solid rgba(0,102,255,.12);


}







/* ======================================================
LINKWORLD EXPRESS
PREMIUM TRACKING PAGE CSS
PART 5
RESPONSIVE + FINAL POLISH
====================================================== */







/* ======================================================
TABLET DEVICES
====================================================== */


@media(max-width:1100px){






.container{


    width:92%;


}








/* HEADER */


.navbar{


    gap:20px;


}





.tracking-live-indicator{


    display:none;


}








/* HERO */


.hero-content h1{


    font-size:46px;


}







/* DASHBOARD */


.dashboard-grid{


    grid-template-columns:

    repeat(2,1fr);


}





.premium-status,
.current-location-card{


    grid-column:span 2;


}








/* OVERVIEW */


.overview-grid{


    grid-template-columns:

    repeat(2,1fr);


}








/* DETAILS */


.details-grid{


    grid-template-columns:

    repeat(2,1fr);


}








}









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


@media(max-width:768px){






body{


    overflow-x:hidden;


}







.container{


    width:94%;


}









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



.tracking-header .container{


    height:auto;

    padding:18px 0;

    flex-direction:column;

    gap:20px;


}







.logo{


    font-size:20px;


}








.navbar{


    width:100%;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;


}






.navbar a{


    font-size:13px;


}









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


.tracking-hero{


    min-height:auto;

    padding:80px 0;


}







.hero-content{


    text-align:center;


}





.hero-content h1{


    font-size:34px;

    line-height:1.25;


}







.hero-content p{


    font-size:15px;


}







.hero-tag{


    font-size:11px;


}








.tracking-search-card{


    padding:25px;

}


.tracking-search{


    flex-direction:column;


}




.tracking-search input,
.tracking-search button{


    width:100%;


}









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


.dashboard-grid{


    grid-template-columns:

    1fr;


}





.premium-status,
.current-location-card{


    grid-column:auto;


}







.status-card,
.location-card,
.mini-card{


    padding:25px;


}








.status-card h2{


    font-size:26px;


}








.location-card h2{


    font-size:23px;


}









/* ======================================================
SECTION TITLES
====================================================== */


.section-header h2{


    font-size:30px;


}






.section-header p{


    font-size:14px;


}









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


.overview-grid{


    grid-template-columns:

    1fr;


}







.overview-card{


    padding:25px;


}









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


.map-wrapper{


    padding:15px;

    border-radius:20px;


}







.map-toolbar{


    flex-direction:column;


}







.toolbar-item{


    justify-content:center;


}







.tracking-map{


    height:400px;


}









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


.progress-card{


    padding:25px;


}







.progress-top h3{


    font-size:18px;


}







.progress-labels span{


    font-size:11px;


}









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


.journey-step{


    padding:20px;

    gap:15px;


}







.journey-icon{


    width:50px;

    height:50px;

    font-size:18px;


}







.journey-content h3{


    font-size:17px;


}







.journey-line{


    margin-left:44px;


}









/* ======================================================
DETAIL CARDS MOBILE
====================================================== */


.details-grid{


    grid-template-columns:

    1fr;


}







.detail-header{


    padding:20px;


}





.detail-body{


    padding:20px;


}







.detail-row{


    flex-direction:column;

    align-items:flex-start;

    gap:8px;


}







.detail-row strong{


    text-align:left;

    max-width:100%;


}









}









/* ======================================================
SMALL PHONES
====================================================== */


@media(max-width:420px){





.hero-content h1{


    font-size:30px;


}







.logo span{


    font-size:18px;


}







.tracking-search-card h3{


    font-size:20px;


}







.status-footer{


    font-size:13px;


}





.tracking-map{


    height:350px;


}





}









/* ======================================================
FINAL PRODUCTION TOUCHES
====================================================== */



::selection{


    background:#0066ff;

    color:white;


}






button{


    font-family:"Poppins",sans-serif;


}





input{


    font-family:"Poppins",sans-serif;


}






::-webkit-scrollbar{


    width:10px;


}






::-webkit-scrollbar-track{


    background:#f1f5f9;


}






::-webkit-scrollbar-thumb{


    background:#0066ff;

    border-radius:20px;


}

/* =========================================================
PREMIUM TRACKING LOADING SCREEN
========================================================= */

.tracking-loading{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(7,13,25,.94);

backdrop-filter:blur(12px);

display:flex;

align-items:center;

justify-content:center;

z-index:999999;

opacity:0;

visibility:hidden;

transition:.45s;

}




.tracking-loading.active{

opacity:1;

visibility:visible;

}






.tracking-loading-card{

width:460px;

max-width:92%;

background:#ffffff;

border-radius:24px;

padding:45px 35px;

text-align:center;

box-shadow:0 25px 70px rgba(0,0,0,.35);

animation:loaderPop .5s ease;

}






@keyframes loaderPop{

0%{

transform:scale(.85);

opacity:0;

}

100%{

transform:scale(1);

opacity:1;

}

}






.tracking-loading-logo{

width:90px;

margin-bottom:15px;

}






.tracking-loading-card h2{

font-size:34px;

font-weight:900;

letter-spacing:.5px;

text-transform:uppercase;

color:#081b38;

text-shadow:0 2px 8px rgba(0,0,0,.08);

margin-bottom:10px;

}






.loading-title{

color:#777;

margin-bottom:35px;

font-size:15px;

}






/* ==========================================
SPINNER
========================================== */

.tracking-spinner{

position:relative;

width:95px;

height:95px;

margin:auto;

margin-bottom:30px;

display:flex;

align-items:center;

justify-content:center;

}






.spinner-ring{

position:absolute;

width:95px;

height:95px;

border-radius:50%;

border:6px solid #ececec;

border-top:6px solid #e30613;

animation:spinLoader 1s linear infinite;

}






.tracking-spinner i{

font-size:34px;

color:#e30613;

animation:pulseEarth 1.3s infinite;

}






@keyframes spinLoader{

100%{

transform:rotate(360deg);

}

}






@keyframes pulseEarth{

0%{

transform:scale(.95);

}

50%{

transform:scale(1.18);

}

100%{

transform:scale(.95);

}

}






/* ==========================================
MESSAGE
========================================== */

#loadingMessage{

font-size:20px;

font-weight:800;

line-height:1.8;

letter-spacing:.3px;

color:#0f172a;

min-height:34px;

margin-bottom:28px;

transition:.35s;

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

}







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

.tracking-progress{

width:100%;

height:12px;

background:#ececec;

border-radius:30px;

overflow:hidden;

}






.tracking-progress-fill{

width:0%;

height:100%;

background:linear-gradient(

90deg,

#d50000,

#ff3b30,

#ff6b6b

);

border-radius:30px;

transition:width .4s ease;

}






.tracking-progress-info{

margin-top:15px;

font-size:24px;

font-weight:700;

color:#d50000;

}






/* ==========================================
SUCCESS FLASH
========================================== */

.loader-success{

animation:loaderSuccess .7s;

}






@keyframes loaderSuccess{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}






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

@media(max-width:768px){

.tracking-loading-card{

padding:35px 22px;

}

.tracking-spinner{

width:75px;

height:75px;

}

.spinner-ring{

width:75px;

height:75px;

}

.tracking-spinner i{

font-size:28px;

}

#loadingMessage{

font-size:14px;

}

}

/* =========================================================
PREMIUM TRACKING LOADING
========================================================= */

.tracking-loading{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(5,10,20,.90);

backdrop-filter:blur(14px);

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

opacity:0;

visibility:hidden;

transition:.4s;

}

.tracking-loading.show{

opacity:1;

visibility:visible;

}

.tracking-loading-card{

width:520px;

max-width:92%;

background:#ffffff;

border-radius:24px;

padding:45px;

text-align:center;

box-shadow:0 30px 70px rgba(0,0,0,.45);

animation:loadingCard .5s ease;

}

@keyframes loadingCard{

from{

transform:translateY(40px) scale(.95);

opacity:0;

}

to{

transform:translateY(0) scale(1);

opacity:1;

}

}

.tracking-loading-card img{

width:85px;

margin-bottom:18px;

animation:spinLogo 8s linear infinite;

}

@keyframes spinLogo{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

.tracking-loading-card h2{

font-size:30px;

font-weight:700;

color:#0d2344;

margin-bottom:8px;

}

.tracking-loading-card h4{

font-size:22px;

font-weight:800;

letter-spacing:.4px;

color:#d71920;

margin-bottom:16px;

text-transform:uppercase;

}


.tracking-loading-card p{

color:#666;

font-size:15px;

margin-bottom:25px;

}
.loading-progress{

width:100%;

height:12px;

background:#ececec;

border-radius:50px;

overflow:hidden;

margin-bottom:15px;

}

.loading-progress-bar{

width:0%;

height:100%;

border-radius:50px;

background:linear-gradient(90deg,#d71920,#ff4545);

transition:width .5s ease;

box-shadow:0 0 20px rgba(215,25,32,.55);

}

.loading-percent{

font-size:34px;

font-weight:900;

letter-spacing:1px;

color:#d71920;

margin-bottom:30px;

text-shadow:0 3px 10px rgba(215,25,32,.25);

}

.loading-steps{

text-align:left;

display:flex;

flex-direction:column;

gap:14px;

}

.loading-step{

display:flex;

align-items:center;

gap:14px;

font-size:16px;

font-weight:700;

letter-spacing:.2px;

color:#6b7280;

opacity:.45;

transition:.35s;

}

.loading-step i{

width:34px;

height:34px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#ececec;

color:#888;

transition:.35s;

}

.loading-step.active{

opacity:1;

font-weight:800;

font-size:17px;

color:#111827;

text-shadow:0 1px 2px rgba(0,0,0,.05);

}

.loading-step.active i{

background:#d71920;

color:#fff;

box-shadow:0 0 18px rgba(215,25,32,.45);

animation:pulseStep 1s infinite;

}

@keyframes pulseStep{

0%{

transform:scale(1);

}

50%{

transform:scale(1.15);

}

100%{

transform:scale(1);

}

}

@media(max-width:768px){

.tracking-loading-card{

padding:30px 22px;

}

.tracking-loading-card h2{

font-size:24px;

}

.loading-step{

font-size:13px;

}

}