/* =========================================================
   LIVE TRACKING PANEL
========================================================= */

.live-tracking-panel{

    max-width:850px;

    margin:30px auto 0;

    background:white;

    border-radius:32px;

    padding:0 0 40px;

    box-shadow:0 20px 60px rgba(0,0,0,0.06);

    border-top:6px solid #5b2e1f;

    overflow:hidden;

    display:none;

}

.live-tracking-panel.live-visible{

    display:block;

    animation:liveFadeIn 0.4s ease;

}

@keyframes liveFadeIn{

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

}

.live-panel-header{

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

    padding:26px 34px;

    border-bottom:1px solid #f1e4d7;

}

.live-panel-header h3{

    font-family:'Playfair Display',serif;

    font-size:26px;

    color:#2c1810;

}

.live-badge{

    background:#e9f7ee;

    color:#1f8a4c;

    font-size:13px;

    font-weight:600;

    padding:8px 16px;

    border-radius:999px;

    display:inline-flex;
    align-items:center;
    gap:8px;

}

.live-badge::before{

    content:'';

    width:8px;
    height:8px;

    border-radius:50%;

    background:#1f8a4c;

    animation:livePulse 1.4s infinite;

}

.live-badge-delivered::before{

    animation:none;

    background:#2c1810;

}

@keyframes livePulse{

    0%,100%{ opacity:1; }
    50%{ opacity:0.3; }

}

#liveMap{

    width:100%;
    height:340px;

}

.live-pin{

    font-size:22px;

    text-align:center;

    line-height:1;

}

.live-pin-driver{

    font-size:26px;

    filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));

}

.live-stats{

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:20px;

    padding:26px 34px 6px;

}

.live-stat-box{

    background:#faf7f5;

    border:1px solid #f1e4d7;

    border-radius:20px;

    padding:20px 24px;

    text-align:center;

}

.live-stat-box span{

    display:block;

    font-size:13px;

    color:#8d7b6e;

    letter-spacing:1px;

    margin-bottom:8px;

    text-transform:uppercase;

}

.live-stat-box strong{

    font-size:26px;

    color:#2c1810;

    font-family:'Playfair Display',serif;

}

.live-progress-track{

    margin:26px 34px 0;

    height:10px;

    background:#f1e4d7;

    border-radius:999px;

    overflow:hidden;

}

.live-progress-fill{

    height:100%;

    width:0%;

    background:linear-gradient(135deg,#d4a373,#b57f50);

    border-radius:999px;

    transition:width 1.2s ease;

}

.live-stages{

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

    gap:12px;

    padding:26px 34px 0;

}

.live-stage{

    text-align:center;

    font-size:13px;

    color:#b3a396;

    font-weight:500;

    position:relative;

    padding-top:22px;

}

.live-stage::before{

    content:'';

    position:absolute;

    top:0;
    left:50%;

    transform:translateX(-50%);

    width:14px;
    height:14px;

    border-radius:50%;

    background:#f1e4d7;

    border:2px solid #f1e4d7;

}

.live-stage-active{

    color:#2c1810;

}

.live-stage-active::before{

    background:#d4a373;
    border-color:#d4a373;

}

.live-stage-done{

    color:#5b2e1f;

}

.live-stage-done::before{

    background:#5b2e1f;
    border-color:#5b2e1f;

}

@media(max-width:768px){

    .live-stats{

        grid-template-columns:1fr;

    }

    .live-stages{

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

        row-gap:22px;

    }

    #liveMap{

        height:260px;

    }

}