:root{

    --bg:#060606;

    --surface:#111214;

    --surface-2:#17181b;

    --card:#111214;

    --border:#232428;

    --text:#ffffff;

    --muted:#8d8f98;

    --accent:var(--brand-primary);

    --radius:28px;

    --transition:.25s ease;

    --header-height:78px;
}

.delivery-page{

    width:100%;

    max-width:920px;

    margin:auto;

    padding:
        32px
        22px
        170px;

    box-sizing:border-box;

}

.delivery-page-header{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:20px;

    margin-bottom:32px;

}

.delivery-page-label{

    opacity:.45;

    text-transform:uppercase;

    letter-spacing:.08em;

    font-size:12px;

    margin-bottom:10px;

}

.delivery-page-title{

    font-size:56px;

    line-height:.95;

    letter-spacing:-0.06em;

}

.delivery-balance{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:4px;

    padding:14px 18px;

    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            rgba(31,86,184,.12),
            rgba(24,167,192,.08)
        );

    border:
        1px solid
        rgba(24,167,192,.15);

    backdrop-filter:blur(20px);

}

.delivery-balance small{

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:.08em;

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

}

.delivery-balance strong{

    font-size:18px;

    font-weight:700;

}

.delivery-empty-state{

    width:100%;

    min-height:220px;

    border-radius:36px;

    display:flex;

    align-items:center;

    justify-content:center;

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

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

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

    font-size:20px;

    text-align:center;

    backdrop-filter:blur(20px);

}

.delivery-order-page{

    min-height:100vh;

    background:#050505;

    color:#fff;

}

.delivery-order-overlay{

    width:100%;

    max-width:760px;

    margin:0 auto;

    display:grid;

    gap:22px;

    padding:
        18px
        18px
        180px;

    box-sizing:border-box;

    background:
        radial-gradient(
            circle at top,
            rgba(255,255,255,.04),
            transparent 45%
        ),
        #050505;

}

.delivery-order-topbar{

    display:grid;

    gap:18px;

}

.delivery-order-card{

    width:100%;

    padding:28px;

    border-radius:32px;

    background:
        radial-gradient(
            circle at top,
            rgba(255,255,255,.04),
            transparent 60%
        ),
        #0b0b0d;

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

    display:block;

    box-sizing:border-box;
}

.delivery-order-back{

    width:58px;

    height:58px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

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

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

    backdrop-filter:blur(24px);

    color:#fff;

    font-size:20px;

}

.delivery-order-info{

    width:100%;

    margin:0;

    padding:0;

    background:none;

    border:none;

    backdrop-filter:none;

    box-shadow:none;

}

.delivery-order-info-label{

    opacity:.45;

    text-transform:uppercase;

    letter-spacing:.08em;

    font-size:11px;

    margin-bottom:10px;

}

.delivery-order-info h1{

    font-size:64px;

    line-height:1;

    margin-bottom:14px;

}

.delivery-order-shop{

    font-size:2rem;

    font-weight:900;

    line-height:1.05;

    letter-spacing:-.03em;

}

.delivery-order-client{

    font-size:1rem;

    opacity:.72;

    margin-top:10px;

}

.delivery-order-bottom{

    display:grid;

    gap:18px;

    padding-top:24px;

}

.delivery-order-action{

    width:100%;

    height:74px;

    border:none;

    border-radius:28px;

    background:
        var(--brand-gradient);

    box-shadow:
        0 18px 50px
        var(--brand-glow);

    color:#ffffff;

    font-size:22px;

    font-weight:800;

    cursor:pointer;

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

}

.delivery-marker{

    width:72px;

    height:72px;

    border-radius:999px;

    padding:5px;

    backdrop-filter:blur(20px);

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

}

.delivery-marker-inner{

    width:100%;

    height:100%;

    border-radius:999px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:900;

}

.shop-marker .delivery-marker-inner{

    background:
        var(--local-blue);

    color:#fff;

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

}

.customer-marker .delivery-marker-inner{

    background:
        var(--local-orange);

    color:#fff;

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

}

.delivery-user-marker .delivery-marker-inner{

    background:
        var(--local-green);

    color:#fff;

    animation:
        deliveryPulse 1.8s infinite;

}

@keyframes deliveryPulse{

    0%{

        transform:scale(1);

        box-shadow:
            0 0 0 0 rgba(255,255,255,.45);

    }

    70%{

        transform:scale(1.06);

        box-shadow:
            0 0 0 22px rgba(255,255,255,0);

    }

    100%{

        transform:scale(1);

        box-shadow:
            0 0 0 0 rgba(255,255,255,0);

    }

}

.delivery-route-legend{

    position:absolute;

    left:28px;

    bottom:130px;

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 18px;

    border-radius:22px;

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

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

    backdrop-filter:blur(20px);

    pointer-events:auto;

}

.delivery-route-item{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:700;

}

.delivery-route-marker{

    width:36px;

    height:36px;

    border-radius:999px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        rgba(
            24,
            167,
            192,
            .14
        );

    border:
        1px solid
        rgba(
            24,
            167,
            192,
            .20
        );

    color:#fff;

    font-weight:800;

}

.delivery-route-arrow{

    opacity:.4;

    font-size:20px;

}

.delivery-cash-alert{

    margin-top:18px;

    padding:18px 20px;

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            var(--brand-primary-soft),
            rgba(255,255,255,.03)
        );

    border:
        1px solid
        rgba(46,45,94,.25);
}

.delivery-cash-alert p{

    margin-top:6px;

    line-height:1.5;

    opacity:.78;
}

.delivery-live-status{

    width:100%;

    min-height:58px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:0 18px;

    border-radius:20px;

    backdrop-filter:blur(18px);

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

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

    color:#fff;

    font-size:.94rem;

    font-weight:700;

    letter-spacing:-.01em;

    box-shadow:
        0 10px 30px rgba(0,0,0,.18);

}

.delivery-live-status i{

    font-size:20px;

}

.delivery-cash-alert i{

    font-size:22px;

    color:var(--brand-secondary);

    margin-top:2px;

}

.delivery-cash-alert strong{

    display:block;

    margin-bottom:6px;

}

.delivery-cash-alert p{

    opacity:.72;

    line-height:1.4;

}

.delivery-navigation-actions{

    display:flex;

    gap:14px;

}

.delivery-navigation-btn{

    flex:1;

    height:74px;

    border-radius:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

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

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

    color:#fff;

    font-size:18px;

    font-weight:700;

    backdrop-filter:blur(20px);

}

.delivery-navigation-btn.primary{

    background:var(--brand-primary);

    color:#ffffff;

}

.delivery-navigation-btn-aux{

    flex:1;

    height:74px;

    border-radius:28px;

    padding:10px 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

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

    background:var(--brand-primary);

    color:#ffffff;

    font-size:18px;

    font-weight:700;

    backdrop-filter:blur(20px);

}

.delivery-navigation-btn-aux i{

    padding-left:5px;

    font-size:28px;

}

.delivery-recharge-form{

    display:flex;

    gap:14px;

    margin-top:24px;

    margin-bottom:40px;

    flex-wrap:wrap;

}

.delivery-recharge-form form{

    margin:0;

}

.delivery-recharge-btn{

    height:54px;

    min-width:110px;

    padding:0 24px;

    border:none;

    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            rgba(255,255,255,.04)
        );

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

    color:#fff;

    font-size:17px;

    font-weight:700;

    letter-spacing:-0.02em;

    cursor:pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease;

    backdrop-filter:blur(20px);

}

.checkout-submit{

    width:100%;

    height:64px;

    border-radius:24px;

    display:flex;

    text-align:center;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    background:var(--brand-primary);

    color:#ffffff;

    font-weight:700;

    font-size:18px;

}

.delivery-recharge-btn:hover{

    transform:translateY(-2px);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.14),
            rgba(255,255,255,.08)
        );

    border-color:
        rgba(255,255,255,.14);

}

.delivery-pending-page{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:32px;

}

.delivery-pending-card{

    width:100%;

    max-width:520px;

    padding:48px;

    border-radius:36px;

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

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

    text-align:center;

    backdrop-filter:blur(20px);

}

.delivery-pending-icon{

    width:88px;

    height:88px;

    margin:auto;

    margin-bottom:24px;

    border-radius:999px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

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

}

.delivery-pending-card h1{

    font-size:42px;

    margin-bottom:18px;

}

.delivery-pending-card p{

    opacity:.7;

    line-height:1.7;

    margin-bottom:32px;

}

.delivery-pending-btn{

    width:100%;

    height:64px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    background:var(--brand-primary);

    color:#ffffff;

    font-weight:700;

    font-size:18px;

}

.delivery-profile-card{

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

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:
        32px;

    padding:
        32px;

    display:flex;

    flex-direction:column;

    gap:32px;

    backdrop-filter:
        blur(20px);

}

.delivery-profile-top{

    display:flex;

    align-items:center;

    gap:24px;

}

.delivery-profile-avatar{

    width:110px;

    height:110px;

    border-radius: 28px;

    overflow:hidden;

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

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:42px;

    color:
        rgba(255,255,255,0.7);

    flex-shrink:0;

}

.delivery-profile-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.delivery-profile-info{

    display:flex;

    flex-direction:column;

    gap:6px;

}

.delivery-profile-info h2{

    margin:0;

    font-size:32px;

    font-weight:700;

    color:#fff;

}

.delivery-profile-info p{

    margin:0;

    font-size:18px;

    color:
        rgba(255,255,255,0.75);

}

.delivery-profile-info span{

    font-size:14px;

    color:
        rgba(255,255,255,0.45);

}

.delivery-profile-form{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.delivery-profile-field{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.delivery-profile-field label{

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:0.12em;

    color:
        rgba(255,255,255,0.45);

}

.delivery-profile-field input{

    width:100%;

    border:
        1px solid rgba(255,255,255,0.06);

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

    border-radius:18px;

    padding:18px 20px;

    color:#fff;

    font-size:16px;

    outline:none;

}

.delivery-profile-save{

    height:62px;

    border:none;

    border-radius:22px;

    background:
        var(--brand-gradient);

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    cursor:pointer;

    margin-top:10px;

}

.delivery-profile-upload{

    height:58px;

    border-radius:20px;

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

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

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    cursor:pointer;

    position:relative;

    overflow:hidden;

    color:#fff;

    font-weight:600;

    transition:.2s ease;

}

.delivery-profile-upload:hover{

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

}

.delivery-profile-upload input{

    position:absolute;

    inset:0;

    opacity:0;

    cursor:pointer;

}

.delivery-profile-upload i{

    opacity:.7;

}

.delivery-profile-links{

    margin-top:28px;

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    opacity:.7;

}

.delivery-profile-links a{

    color:#fff;

    text-decoration:none;

    font-size:13px;

    transition:.2s ease;

}

.delivery-profile-links a:hover{

    opacity:1;

}

.delivery-profile-links .logout{

    color:#ff8a8a;

}

.delivery-active-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    min-height:42px;

    padding:0 18px;

    border-radius:999px;

    background:
        rgba(
            139,
            195,
            74,
            .12
        );

    border:
        1px solid
        rgba(
            139,
            195,
            74,
            .22
        );

    color:
        var(--local-green);

    font-size:.82rem;

    font-weight:800;

    letter-spacing:.08em;

    margin-bottom:18px;

    backdrop-filter:blur(10px);

}

.delivery-mission-card{

    display:grid;

    gap:14px;

    margin-top:22px;

}

.delivery-route-button{

    width:100%;

    min-height:68px;

    border:none;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    background:var(--brand-primary);

    color:#ffffff;

    font-size:1rem;

    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 10px 40px rgba(0,0,0,.22);

}

.delivery-mission-primary{

    width:100%;

    min-height:72px;

    border-radius:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    background:var(--brand-primary);

    color:#ffffff;

    text-decoration:none;

    font-size:1.05rem;

    font-weight:800;

    box-shadow:
        0 10px 40px rgba(0,0,0,.22);

}

.delivery-mission-secondary{

    width:100%;

    min-height:62px;

    border:none;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

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

    color:#fff;

    font-size:1rem;

    font-weight:700;

}

.delivery-order-route{

    margin-top:10px;

    font-size:1rem;

    opacity:.72;

}

.delivery-order-meta{

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:14px;

    margin-top:22px;

}

.delivery-order-meta small{

    display:block;

    margin-bottom:8px;

    opacity:.55;

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.delivery-order-meta strong{

    font-size:1rem;

}

.delivery-order-preview{

    margin-top:20px;

}

.delivery-order-preview-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

}

.delivery-order-preview-top span{

    opacity:.7;

    font-size:.82rem;

    font-weight:700;

}

.delivery-order-preview-top strong{

    font-size:1.15rem;

    font-weight:900;

}

.delivery-order-preview-route{

    display:grid;

    gap:10px;

    margin-top:18px;

}

.delivery-order-preview-route div{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:.94rem;

    opacity:.88;

}

.delivery-order-preview-footer{

    margin-top:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    opacity:.5;

    font-size:.78rem;

}

.delivery-distance{

    opacity:.75;

}

.delivery-live-time{

    opacity:.5;

}

.customer-order-card.is-new{

    animation:
        deliveryNewCard .9s ease;

}

@keyframes deliveryNewCard{

    0%{

        transform:
            scale(.985);

        opacity:.55;

    }

    40%{

        transform:
            scale(1.01);

    }

    100%{

        transform:
            scale(1);

        opacity:1;

    }

}

.delivery-reference-box{

    margin-top:18px;

    padding:18px;

    border-radius:22px;

    background:#ffffff08;

    border:1px solid #ffffff10;

    display:grid;

    gap:10px;

}

.delivery-reference-stack{

    display:grid;

    gap:14px;

}

.delivery-reference-label{

    font-size:.72rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    opacity:.45;

    font-weight:700;

}

.delivery-reference-text{

    line-height:1.7;

    font-size:.96rem;

    opacity:.92;

}

.delivery-route-actions{

    display:grid;

    gap:12px;

    margin-bottom:18px;

}

.delivery-mission-preview{

    display:grid;

    gap:18px;

    padding:24px;

    border-radius:28px;

    background:#0f1012;

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

    margin-bottom:20px;

}

.delivery-mission-preview-label{

    font-size:.78rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    opacity:.5;

    font-weight:700;

}

.delivery-mission-preview-flow{

    display:grid;

    gap:14px;

}

.delivery-mission-stop{

    display:flex;

    align-items:center;

    gap:14px;

    font-weight:600;

}

.delivery-mission-stop i{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ffffff10;

    font-size:1rem;

}

.delivery-mission-line{

    width:2px;

    height:18px;

    background:#ffffff14;

    margin-left:20px;

}

.delivery-order-inline-meta{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

    margin-top:10px;

    font-size:1rem;

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

}

.delivery-order-inline-meta strong{

    color:#fff;

    font-weight:700;

}

.shop-bottom-nav{

    position:fixed;

    left:50%;

    transform:translateX(-50%);

    bottom:14px;

    width:calc(100% - 24px);

    max-width:520px;

    height:64px;

    padding:0 8px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

    border-radius:999px;

    background:
        rgba(10,10,12,.78);

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

    backdrop-filter:
        blur(24px);

    -webkit-backdrop-filter:
        blur(24px);

    box-shadow:
        0 10px 30px rgba(0,0,0,.35);

    z-index:9999;

}

.bottom-nav-item{

    flex:1;

    height:48px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    position:relative;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;

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

}

.bottom-nav-item i{

    font-size:18px;

    transition:
        transform .2s ease,
        opacity .2s ease;

    opacity:.9;

}

.bottom-nav-item span{

    display:none;

}

.bottom-nav-item.active{

    background:
        rgba(
            46,
            45,
            94,
            .35
        );

    color:#fff;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04);

}

.bottom-nav-item.active i{
    
    color:
        var(--local-cyan);

    transform:scale(1.08);

    opacity:1;

}

.bottom-nav-item:active{

    transform:scale(.96);

}

@media(max-width:768px){

    .delivery-page{

        padding:
            20px
            18px
            170px;

    }

    .delivery-page-title{

        font-size:42px;

    }

    .delivery-page-header{

        margin-bottom:24px;

    }

    .delivery-order-overlay{

        padding:
            12px
            14px
            170px;

    }

    .delivery-order-info{

        min-width:auto;

        width:100%;

    }

    .delivery-order-info h1{

        font-size:46px;

        margin-top:-10px;

    }

    .delivery-order-shop{

        font-size:20px;

        margin-top:-15px;

        margin-bottom:2px;

    }

    .delivery-route-legend{

        left:18px;

        right:18px;

        bottom:100px;

        justify-content:center;

    }

    .delivery-profile-card{

        padding:24px;

        border-radius:28px;

    }

    .delivery-profile-top{

        flex-direction:column;

        align-items:flex-start;

    }

    .delivery-profile-info h2{

        font-size:26px;

    }

    .shop-bottom-nav{

        width:calc(100% - 20px);

        height:62px;

        bottom:10px;

    }

    .bottom-nav-item{

        height:46px;

    }

    .bottom-nav-item i{

        font-size:17px;

    }

}

.delivery-chip{
    display:flex;
    align-items:center;
    gap:10px;
    height:42px;
    padding:0 16px;
    border-radius:999px;
    background:#ffffff08;
    border:1px solid #ffffff10;
    font-size:.9rem;
}

.delivery-search-results{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-top:10px;

}

.delivery-search-item{

    padding:12px 14px;

    border-radius:14px;

    background:var(--glass-2);

    cursor:pointer;

}

.delivery-search-item:hover{

    background:var(--glass-4);

}

.delivery-stats{

    display:grid;

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

    gap:12px;

    margin-bottom:20px;

}

.delivery-stat-card{

    padding:18px;

    border-radius:20px;

    background:var(--glass-3);

    border:
        1px solid var(--glass-border);

    text-align:center;

}

.delivery-stat-card strong{

    display:block;

    font-size:1.6rem;

    font-weight:700;

    margin-bottom:4px;

}

.delivery-stat-card span{

    color:var(--text-faded);

    font-size:.9rem;

}