/* =====================================
   🛒 PREMIUM BUYER DASHBOARD
===================================== */

.sw-dashboard-wrap {
    padding: 20px;
}

.sw-dashboard-header {
    background: linear-gradient(135deg,#071226,#182848);
    color: white;
    padding: 35px;
    border-radius: 24px;
    margin-bottom: 25px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

.sw-dashboard-header h2 {
    font-size: 38px;
    margin-bottom: 10px;
    font-weight: 800;
}

.sw-dashboard-header p {
    opacity: 0.9;
    font-size: 16px;
}

.sw-stats-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
    margin-bottom: 30px;
}

.sw-stat-card {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

.sw-stat-card small {
    display: block;
    color: #666;
    margin-bottom: 10px;
    font-size: 14px;
}

.sw-stat-card h2 {
    font-size: 34px;
    margin: 0;
    color: #111827;
}

.sw-dashboard-orders {
    margin-top: 20px;
}

.sw-section-title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 20px;
}

.sw-order-card {
    background: white;
    border-radius: 22px;
    padding: 20px 24px;
    margin-bottom: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);

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

    transition: all 0.25s ease;
}

.sw-order-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.10);
}

.sw-order-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.sw-order-icon {
    width: 65px;
    height: 65px;
    border-radius: 18px;
    background: #eef4ff;

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

    font-size: 28px;
}

.sw-order-info h3 {
    margin: 0 0 10px;
    font-size: 22px;
}

.sw-order-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sw-badge {
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.sw-badge-status {
    background: #fff7ed;
    color: #ea580c;
}

.sw-badge-escrow {
    background: #ecfeff;
    color: #0891b2;
}

.sw-order-right {
    text-align: right;
}

.sw-order-price {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 12px;
    color: #111827;
}

.sw-primary-btn {
    display: inline-block;
    background: #2563eb;
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 14px;
    font-weight: 700;
    transition: 0.2s ease;
}

.sw-primary-btn:hover {
    background: #1d4ed8;
    transform: scale(1.03);
}

.sw-empty-orders {
    background: white;
    border-radius: 18px;
    padding: 40px;
    text-align: center;
    color: #666;
}

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

@media(max-width:768px){

    .sw-stats-grid {
        grid-template-columns: 1fr;
    }

    .sw-order-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .sw-order-right {
        width: 100%;
        text-align: left;
    }

    .sw-dashboard-header h2 {
        font-size: 30px;
    }

}







/* =====================================
   🚚 ORDER PROGRESS
===================================== */

.sw-progress-wrap {
    margin-top: 14px;
    width: 260px;
}

.sw-progress-label {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 6px;
}

.sw-progress-bar {
    width: 100%;
    height: 10px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.sw-progress-fill {

    height: 100%;

    border-radius: 999px;

    background: linear-gradient(
        90deg,
        #2563eb,
        #06b6d4,
        #2563eb
    );

    background-size: 200% 100%;

    animation: swProgressFlow 2s linear infinite;

    transition: width 0.3s ease;
}


@keyframes swProgressFlow {

    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.sw-order-seller {
    margin-top: 8px;
    color: #6b7280;
    font-size: 14px;
}






/* =====================================
   ORDER ACTIONS
===================================== */

.sw-order-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
    align-items: stretch;
}

.sw-btn-primary,
.sw-btn-secondary,
.sw-ghost-btn {
    border: none;
    border-radius: 14px;
    padding: 12px 22px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.25s ease;

    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.sw-actions{
    display:flex;
    flex-direction:column;
    gap:14px;
}

/* PRIMARY */

.sw-btn-primary {
    background: linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color: white;

    box-shadow:
        0 8px 20px rgba(37,99,235,0.25);
}

.sw-btn-primary:hover {
    transform: translateY(-2px);
}

/* SECONDARY */

.sw-secondary-btn{
    background:white;
    color:#374151;

    border:1px solid #dbe3ef;

    box-shadow:
        0 2px 8px rgba(0,0,0,0.03);
}

.sw-secondary-btn:hover{
    background:#f8fafc;
    transform:translateY(-2px);
}

/* GHOST */

.sw-ghost-btn {
    width: 100% !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    padding: 12px 22px !important;

    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 14px;

    color: #374151;

    font-weight: 700;

    box-sizing: border-box;
}

.sw-ghost-btn:hover {
    background: #f9fafb;
}




.sw-order-card {
    cursor: pointer;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.sw-order-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 20px 40px rgba(37,99,235,0.08);

    border-color:
        rgba(37,99,235,0.15);
}


/* ANIMATED PROGRESS BAR */

.sw-progress-fill{
    height:100%;
    border-radius:999px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );

    transition:width 0.5s ease;

    position:relative;
    overflow:hidden;
}

.sw-progress-fill::after{
    content:"";
    position:absolute;
    top:0;
    left:-40%;
    width:40%;
    height:100%;

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

    filter:blur(8px);

    animation:swProgressGlow 2s linear infinite;
}

@keyframes swProgressGlow{
    from{
        left:-40%;
    }
    to{
        left:120%;
    }
}






.sw-order-main,
.sw-order-sidebar{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.sw-order-layout{

    display:grid;

    grid-template-columns:
        minmax(0, 1fr)
        420px;

    gap:32px;

    align-items:start;
}

.sw-order-sidebar{

    width:100%;

    min-width:420px;
}

@media(max-width:980px){

    .sw-order-layout{
        grid-template-columns:1fr;
    }

    .sw-order-sidebar{
        position:relative;
        top:auto;
    }
}



.sw-product-image{
    width:120px;
    height:120px;
    object-fit:cover;
    border-radius:20px;
    background:#fff;
    border:1px solid #e5e7eb;
}



.sw-product-preview{
    display:flex;
    gap:20px;
    align-items:flex-start;
    background:#fff;
    padding:24px;
    border-radius:24px;
    box-shadow:0 8px 30px rgba(0,0,0,0.04);
}


/* ================================
⚠️ DANGER BUTTON
================================ */

.sw-danger-btn{
    width:100%;
    border:none;
    border-radius:18px;
    padding:16px 20px;
    cursor:pointer;

    background:#fff5f5;
    color:#dc2626;

    font-size:16px;
    font-weight:700;

    border:1px solid #fecaca;

    transition:all 0.25s ease;
}

.sw-danger-btn:hover{
    background:#fee2e2;
    transform:translateY(-2px);
}




/* ================================
📍 ORDER TIMELINE
================================ */

.sw-order-timeline{
    margin-top:32px;
    padding-left:18px;
    border-left:2px solid #e5e7eb;
}

.sw-timeline-item{
    position:relative;
    padding-left:28px;
    margin-bottom:28px;
}

.sw-timeline-dot{
    position:absolute;
    left:-11px;
    top:6px;

    width:16px;
    height:16px;

    border-radius:50%;
    background:#d1d5db;
}

.sw-timeline-item.active .sw-timeline-dot{
    background:#2563eb;
    box-shadow:
        0 0 0 4px rgba(37,99,235,0.15);
}


.sw-timeline-item.disputed .sw-timeline-dot{
    background:#dc2626;
    box-shadow:
        0 0 0 4px rgba(220,38,38,0.18);
}

.sw-timeline-content h4{
    margin:0;
    font-size:16px;
    font-weight:700;
    color:#111827;
}

.sw-timeline-content p{
    margin-top:4px;
    color:#6b7280;
    font-size:14px;
    line-height:1.5;
}




/* ===================================
🚚 TRACK ORDER PAGE
=================================== */

.sw-track-layout{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:24px;
    margin-top:30px;
}

.sw-track-card{
    background:#fff;
    border-radius:24px;
    padding:24px;
    margin-bottom:24px;
    box-shadow:0 2px 10px rgba(0,0,0,0.04);
}

.sw-track-top{
    display:flex;
    gap:20px;
    align-items:center;
}

.sw-track-image{
    width:120px;
    height:120px;
    border-radius:18px;
    object-fit:cover;
    background:#f5f7ff;
}

.sw-track-steps{
    margin-top:20px;
}

.sw-track-step{
    padding:14px 18px;
    border-radius:14px;
    background:#f7f8fb;
    margin-bottom:14px;
    color:#6b7280;
    font-weight:600;
}

.sw-track-step.active{
    background:#eef4ff;
    color:#2563eb;
}

.sw-track-step.delivered{
    background:#ecfdf3;
    color:#16a34a;
}

.sw-track-sidebar .sw-primary-btn{
    width:100%;
}

@media(max-width:991px){

    .sw-track-layout{
        grid-template-columns:1fr;
    }

    .sw-track-top{
        flex-direction:column;
        align-items:flex-start;
    }
}



.sw-tracking-wrapper{

    width:100%;

    max-width:100%;

    overflow-x:hidden;

    padding:120px 20px 60px;

    background:#f4f7fb;

    min-height:100vh;

    box-sizing:border-box;
}



.sw-delivery-box{
    margin-top:24px;
    background:#fff;
    border-radius:22px;
    padding:22px;
    border:1px solid #edf1f7;
}

.sw-delivery-box h3{
    margin-bottom:18px;
    font-size:18px;
    font-weight:700;
    color:#111827;
}

.sw-delivery-item{
    margin-bottom:16px;
}

.sw-delivery-item small{
    display:block;
    color:#6b7280;
    margin-bottom:4px;
    font-size:13px;
}

.sw-delivery-item strong{
    display:block;
    color:#111827;
    font-size:15px;
    line-height:1.5;
}



.sw-delivery-live{
    margin-bottom:20px;
    padding:10px 14px;
    border-radius:14px;
    font-size:14px;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.sw-delivery-live.pending{
    background:#fff7ed;
    color:#ea580c;
}

.sw-delivery-live.pickup{
    background:#eff6ff;
    color:#2563eb;
}

.sw-delivery-live.transit{
    background:#f3e8ff;
    color:#9333ea;
}

.sw-delivery-live.delivered{
    background:#f0fdf4;
    color:#16a34a;
}



/* ====================================
🚚 LIVE DISPATCH
==================================== */

.sw-dispatch-live{
    margin-top:18px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.sw-dispatch-item{
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:14px;
    padding:14px;
}

.sw-dispatch-item small{
    display:block;
    color:#64748b;
    margin-bottom:6px;
    font-size:12px;
}

.sw-dispatch-item strong{
    color:#0f172a;
    font-size:15px;
    font-weight:700;
}




.sw-dispatch-header{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.sw-dispatch-avatar{
    width:58px;
    height:58px;
    border-radius:18px;
    background:#eef4ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
}

.sw-dispatch-name{
    font-size:18px;
    font-weight:700;
    color:#111827;
}

.sw-dispatch-role{
    font-size:13px;
    color:#64748b;
}

.sw-dispatch-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:20px;
    width:100%;
}

.sw-dispatch-status-bar{
    width:100%;
    height:10px;
    background:#e5e7eb;
    border-radius:999px;
    overflow:hidden;
    margin-top:20px;
}

.sw-dispatch-status-fill{
    height:100%;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );
    transition:0.4s ease;
}

.sw-dispatch-note{
    margin-top:14px;
    font-size:14px;
    font-weight:600;
    color:#334155;
}




.sw-dispatch-live{
    margin-top:20px;
}

.sw-dispatch-header{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.sw-dispatch-avatar{
    flex-shrink:0;
}

.sw-dispatch-status-wrap{
    margin-top:20px;
}

.sw-dispatch-note{
    margin-top:10px;
    line-height:1.5;
}

@media(max-width:768px){

    .sw-dispatch-grid{
        grid-template-columns:1fr;
    }

}










.sw-activity-box{
    margin-top:24px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:24px;
    padding:24px;
}

.sw-activity-box h3{
    font-size:22px;
    margin-bottom:20px;
}

.sw-activity-item{
    padding:14px 0;
    border-bottom:1px solid #f1f5f9;
    color:#334155;
    font-weight:500;
}

.sw-activity-item:last-child{
    border-bottom:none;
}









.sw-route-stats{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:18px;

    margin-top:24px;
}

.sw-route-stat{
    min-width:140px;
    background:#fff;
    border:1px solid #e8edf5;
    border-radius:18px;

    padding:18px;

    box-shadow:0 4px 14px rgba(0,0,0,0.04);

    transition:0.3s ease;
}

.sw-route-stat:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(0,0,0,0.08);
}

.sw-route-stat small{
    display:block;

    color:#64748b;

    margin-bottom:8px;

    font-size:13px;
}

.sw-route-stat strong{
    color:#0f172a;

    font-size:18px;

    font-weight:700;
}









.sw-location-picker-card{
    background:#fff;
    border-radius:28px;
    padding:28px;
    margin-bottom:28px;

    border:1px solid #e7edf5;

    box-shadow:0 10px 30px rgba(15,23,42,0.05);
}

.sw-location-header{
    font-size:28px;
    font-weight:700;
    margin-bottom:20px;
}

.sw-location-search input{
    width:100%;
    height:58px;

    border-radius:16px;
    border:1px solid #dbe4f0;

    padding:0 18px;

    font-size:16px;

    outline:none;
}

#sw-delivery-map{
    width:100%;
    height:420px;

    border-radius:24px;

    margin-top:20px;

    overflow:hidden;

    border:1px solid #e7edf5;
}

.sw-location-meta{
    display:flex;
    gap:18px;

    margin-top:20px;
}

.sw-location-stat{
    flex:1;

    background:#f8fafc;

    border-radius:18px;

    padding:18px;
}




#sw-delivery-map{
    width:100%;
    height:420px;

    border-radius:24px;

    overflow:hidden;

    background:#eef3ff;

    border:1px solid #e5ebf8;

    margin-top:18px;
}

.sw-location-picker-card{
    background:#ffffff;

    border-radius:28px;

    padding:28px;

    margin-bottom:28px;

    box-shadow:
        0 8px 30px rgba(15,23,42,0.05);
}

.sw-location-header{
    font-size:18px;
    font-weight:700;

    color:#0f172a;

    margin-bottom:18px;
}

.sw-location-search input{
    width:100%;

    height:58px;

    border-radius:18px;

    border:1px solid #dbe4f0;

    padding:0 18px;

    font-size:15px;

    outline:none;

    transition:0.3s ease;
}

.sw-location-search input:focus{
    border-color:#2563eb;

    box-shadow:
        0 0 0 4px rgba(37,99,235,0.08);
}

.sw-location-meta{
    display:grid;

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

    gap:18px;

    margin-top:22px;
}

.sw-location-stat{
    background:#f8fafc;

    border-radius:18px;

    padding:16px;
}

.sw-location-stat small{
    display:block;

    color:#64748b;

    margin-bottom:6px;
}

.sw-location-stat strong{
    color:#0f172a;

    font-size:17px;
}





.sw-location-status{
    margin-top:16px;
    margin-bottom:16px;
    padding:14px 18px;
    border-radius:14px;
    font-weight:600;
    font-size:14px;
}

.sw-location-status.loading{
    background:#eef6ff;
    color:#2563eb;
}

.sw-location-status.success{
    background:#ecfdf3;
    color:#16a34a;
}

.sw-location-status.error{
    background:#fef2f2;
    color:#dc2626;
}




.sw-live-progress{
    margin-top:18px;
    background:#ffffff;
    border-radius:18px;
    padding:16px;
    border:1px solid #e8edf5;
    box-shadow:0 4px 18px rgba(0,0,0,0.04);
}

.sw-progress-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
    font-size:14px;
    color:#0f172a;
    font-weight:600;
}

.sw-progress-track{
    width:100%;
    height:10px;
    background:#e8edf5;
    border-radius:999px;
    overflow:hidden;
}

.sw-progress-fill{
    width:62%;
    height:100%;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );
    
    transition: width 0.3s linear;
}

@keyframes swProgressMove{
    0%{
        filter:brightness(1);
    }

    50%{
        filter:brightness(1.15);
    }

    100%{
        filter:brightness(1);
    }
}




.sw-dispatch-pulse{
    animation:swPulse 2s infinite;
}

@keyframes swPulse{
    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }
}






/* ================================
📡 LOCATION BUTTON
================================ */

.sw-location-action{
    margin:18px 0 20px;
}

.sw-location-btn{
    width:100%;

    display:flex;
    align-items:center;
    gap:14px;

    background:#ffffff;

    border:1px solid #e4eaf3;
    border-radius:18px;

    padding:14px 16px;
    min-height:78px;

    cursor:pointer;

    transition:0.3s ease;

    box-shadow:
        0 6px 18px rgba(15,23,42,0.04);
}

.sw-location-btn:hover{
    transform:translateY(-2px);

    border-color:#2563eb;

    box-shadow:
        0 12px 28px rgba(37,99,235,0.12);
}

.sw-location-icon{
    width:52px;
    height:52px;

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

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

    font-size:24px;

    color:#fff;
}

.sw-location-text{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.sw-location-text strong{
    color:#0f172a;
    font-size:16px;
    font-weight:700;
}

.sw-location-text small{
    color:#64748b;
    font-size:13px;
    margin-top:4px;
}




.sw-live-progress{
    position:relative;
    overflow:hidden;
}

.sw-live-progress::after{
    content:"";

    position:absolute;
    top:0;
    left:-100%;

    width:100%;
    height:100%;

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

    animation: swPulse 2.4s infinite;
}

@keyframes swPulse{
    100%{
        left:100%;
    }
}




.sw-progress-fill{
    animation: swPulse 1.5s infinite;
}

@keyframes swPulse{

    0%{
        opacity:0.7;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0.7;
    }
}




.sw-bike-marker{

    font-size: 34px;

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

    transition:
        transform 0.2s linear;

    transform-origin:center;

    filter:
        drop-shadow(
            0 4px 10px rgba(0,0,0,0.25)
        );

    will-change: transform;
}




.sw-dispatch-pulse {

    animation: swDispatchPulse 1.2s infinite;
}

@keyframes swDispatchPulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}




.gm-style img[src*="dispatch-"] {

    filter:
        drop-shadow(0 4px 10px rgba(37,99,235,0.35));

    transition: transform 0.2s linear;
}




.sw-delivery-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 16px;

    border-radius: 999px;

    background: rgba(37,99,235,0.08);

    color: #2563eb;

    font-weight: 700;

    font-size: 14px;

    border: 1px solid rgba(37,99,235,0.12);

    transition: all 0.3s ease;
}




.sw-activity-item {

    padding: 12px 14px;

    border-radius: 14px;

    background: #f8fafc;

    margin-bottom: 10px;

    transition: all 0.3s ease;

    color: #64748b;

    font-weight: 600;
}

.sw-activity-item.active {

    background: rgba(37,99,235,0.08);

    color: #2563eb;

    border: 1px solid rgba(37,99,235,0.15);

    transform: translateX(6px);

    box-shadow:
        0 8px 20px rgba(37,99,235,0.08);
}




.sw-eta-state {

    transition:
        color 0.4s ease,
        transform 0.4s ease;

    font-weight: 800;
}





.sw-event-feed {

    margin-top: 24px;

    padding: 22px;

    border-radius: 24px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
}

.sw-event-feed h3 {

    margin-bottom: 18px;

    font-size: 18px;

    font-weight: 800;
}

.sw-event-list {

    display: flex;

    flex-direction: column;

    gap: 12px;

    max-height: 280px;

    overflow-y: auto;
}

.sw-event-item {

    padding: 12px 14px;

    border-radius: 14px;

    background: #f8fafc;

    color: #334155;

    font-size: 14px;

    line-height: 1.5;

    animation: swFeedFade 0.4s ease;
}

@keyframes swFeedFade {

    from {

        opacity: 0;

        transform: translateY(10px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }
}.sw-event-feed {

    margin-top: 24px;

    padding: 22px;

    border-radius: 24px;

    background: #ffffff;

    border: 1px solid #e2e8f0;
}

.sw-event-feed h3 {

    margin-bottom: 18px;

    font-size: 18px;

    font-weight: 800;
}

.sw-event-list {

    display: flex;

    flex-direction: column;

    gap: 12px;

    max-height: 280px;

    overflow-y: auto;
}

.sw-event-item {

    padding: 12px 14px;

    border-radius: 14px;

    background: #f8fafc;

    color: #334155;

    font-size: 14px;

    line-height: 1.5;

    animation: swFeedFade 0.4s ease;
}

@keyframes swFeedFade {

    from {

        opacity: 0;

        transform: translateY(10px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }
}




.sw-activity-item {

    transition:
        all 0.35s ease;

    opacity: 0.45;

    transform: translateX(0);
}

.sw-activity-item.active {

    opacity: 1;

    background: #ecfeff;

    border-left:
        4px solid #06b6d4;

    transform:
        translateX(6px);

    box-shadow:
        0 0 18px
        rgba(6,182,212,0.15);
}






.sw-otp-box{

    margin-top:28px;
    
    margin-left:auto;
    
    margin-right:auto;

    padding:28px;

    border-radius:32px;
    
    max-width:360px;max-width:360px;

    background:#ffffff;

    border:1px solid #dbeafe;

    box-shadow:
        0 10px 35px rgba(37,99,235,0.08);

    display:flex;

    flex-direction:column;

    gap:18px;
}

.sw-otp-header{

    font-size:20px;

    font-weight:800;

    line-height:1.4;

    color:#0f172a;
}

.sw-otp-description{

    margin:0;

    color:#64748b;

    line-height:1.7;

    font-size:15px;
}

.sw-otp-inputs{

    display:flex;

    gap:12px;
}

.sw-otp-digit{

    width:54px;

    height:58px;

    border-radius:18px;

    border:2px solid #dbeafe;

    background:#fff;

    text-align:center;

    font-size:26px;

    font-weight:800;

    outline:none;

    transition:0.25s ease;
}

.sw-otp-digit:focus{

    border-color:#2563eb;

    box-shadow:
        0 0 0 4px rgba(37,99,235,0.12);

    transform:translateY(-1px);
}

.sw-confirm-delivery-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color:#fff;

    font-size:17px;

    font-weight:800;

    cursor:pointer;

    transition:0.3s ease;
}

.sw-confirm-delivery-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 24px rgba(37,99,235,0.22);
}


















/* =========================================
🚚 LIVE TRACKING GOOGLE MAP
========================================= */

#sw-live-map{
    width:100%;
    height:340px;
    border-radius:24px;
    overflow:hidden;
    margin-top:22px;
    border:1px solid #e5ebf5;
    background:#dfe7f5;
}

/* =========================================
TRACKING LAYOUT
========================================= */

.sw-tracking-layout{

    display:grid;

    grid-template-columns:
        minmax(0, calc(100% - 340px))
        320px;

    gap:24px;

    align-items:start;

    width:100%;

    max-width:100%;

    overflow:hidden;
}

.sw-tracking-main{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.sw-order-sidebar{

    display:flex;

    flex-direction:column;

    gap:24px;

    position:sticky;

    top:120px;

    width:100%;

    min-width:0;
}


.sw-order-sidebar .sw-card{

    transition:all .25s ease;

    border:1px solid #edf2f7;
}

.sw-order-sidebar .sw-card:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(15,23,42,.06);
}




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

.sw-location-picker-card{
    background:#ffffff;
    border-radius:28px;
    padding:28px;
    border:1px solid #e7edf5;
    box-shadow:0 10px 30px rgba(15,23,42,0.05);
}

.sw-location-header{
    font-size:18px;
    font-weight:800;
    color:#0f172a;
    margin-bottom:18px;
}

.sw-location-search input{
    width:100%;
    height:58px;
    border-radius:18px;
    border:1px solid #dbe4f0;
    padding:0 18px;
    font-size:15px;
    outline:none;
}

.sw-location-action{
    margin:18px 0 20px;
}

.sw-location-btn{
    width:100%;
    display:flex;
    align-items:center;
    gap:14px;
    border:none;
    border-radius:20px;
    padding:16px;
    cursor:pointer;
    background:#ffffff;
    border:1px solid #e5ebf5;
}

.sw-location-icon{
    width:54px;
    height:54px;
    border-radius:16px;
    background:linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );
}

.sw-location-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:22px;
}

.sw-location-stat{
    background:#f8fafc;
    border-radius:18px;
    padding:18px;
}

.sw-location-stat small{
    display:block;
    margin-bottom:6px;
    color:#64748b;
}

.sw-location-stat strong{
    font-size:20px;
    color:#0f172a;
}

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

.sw-live-progress{
    margin-top:20px;
    background:#ffffff;
    border-radius:20px;
    padding:18px;
    border:1px solid #e5ebf5;
}

.sw-progress-top{
    display:flex;
    justify-content:space-between;
    margin-bottom:12px;
    font-weight:700;
}

.sw-progress-track{
    width:100%;
    height:10px;
    border-radius:999px;
    background:#e2e8f0;
    overflow:hidden;
}

.sw-progress-fill{
    height:100%;
    width:20%;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );
    transition:width .4s ease;
}

/* =========================================
ROUTE STATS
========================================= */

.sw-route-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.sw-route-stat{
    background:#ffffff;
    border-radius:22px;
    padding:24px;
    border:1px solid #e5ebf5;
}

.sw-route-stat small{
    display:block;
    color:#64748b;
    margin-bottom:10px;
}

.sw-route-stat strong{
    font-size:20px;
    color:#071437;
}

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

@media(max-width:991px){

    .sw-tracking-layout{
        grid-template-columns:1fr;
    }

    .sw-order-sidebar{
        position:relative;
        top:auto;
    }

    .sw-route-stats{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:768px){

    .sw-route-stats{
        grid-template-columns:1fr;
    }

    #sw-live-map{
        height:320px;
    }

}




html,
body{

    overflow-x:hidden;

    max-width:100%;
}

.sw-tracking-main{

    min-width:0;
}

.sw-location-picker-card,
.sw-route-stats,
.sw-activity-box,
.sw-event-feed,
.sw-summary-grid,
.sw-user-grid,
.sw-delivery-card,
.sw-otp-box{

    width:100%;

    max-width:100%;

    box-sizing:border-box;
}