/* Sasthodoot Animated Place Order v3
   Built from the supplied reference GIF's visual sequence.
*/

.sd-apo-slot{
    width:100% !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    position:relative !important;
}

.sd-apo-button{
    --apo-dur:7000ms;
    position:relative !important;
    display:block !important;
    width:100% !important;
    max-width:var(--sd-apo-width,580px) !important;
    height:var(--sd-apo-height,152px) !important;
    margin:0 auto !important;
    padding:0 !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:var(--sd-apo-radius,76px) !important;
    background:var(--sd-apo-bg,#111820) !important;
    color:#eef3f8 !important;
    box-shadow:none !important;
    outline:none !important;
    cursor:pointer !important;
    font-family:Arial,Helvetica,sans-serif !important;
    font-size:24px !important;
    font-weight:400 !important;
    line-height:1 !important;
    text-align:center !important;
}

.sd-apo-button:hover,
.sd-apo-button:focus,
.sd-apo-button:active{
    background:var(--sd-apo-bg,#111820) !important;
    color:#eef3f8 !important;
    box-shadow:none !important;
    outline:none !important;
}

.sd-apo-label{
    position:absolute;
    inset:0;
    z-index:90;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:1;
    transform:scale(1);
}

.sd-apo-success{
    position:absolute;
    inset:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    font-size:23px;
    opacity:0;
    transform:scale(.92);
}

.sd-apo-check{
    color:var(--sd-apo-success,#39c778);
    font-size:27px;
    font-weight:700;
}

/* Top-view package */
.sd-apo-package{
    position:absolute;
    z-index:42;
    left:-80px;
    top:50%;
    width:51px;
    height:42px;
    margin-top:-21px;
    border-radius:4px;
    background:linear-gradient(180deg,#f8dc8c,#e7bd58);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        inset 0 -2px 0 rgba(151,103,22,.16),
        0 1px 3px rgba(0,0,0,.18);
    opacity:0;
}
.sd-apo-package:before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:2px;
    transform:translateX(-50%);
    background:rgba(156,106,24,.42);
}
.sd-apo-package:after{
    content:"";
    position:absolute;
    left:4px;
    right:4px;
    top:50%;
    height:2px;
    transform:translateY(-50%);
    background:rgba(255,255,255,.2);
}

/* Top-view truck */
.sd-apo-truck{
    position:absolute;
    z-index:45;
    left:-330px;
    top:50%;
    width:295px;
    height:86px;
    margin-top:-43px;
    opacity:0;
}

/* white cargo body */
.sd-apo-cargo{
    position:absolute;
    left:0;
    top:4px;
    width:216px;
    height:78px;
    border-radius:5px;
    background:linear-gradient(90deg,#f5f7fa 0%,#edf1f6 65%,#e1e7ee 100%);
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.08),
        0 1px 2px rgba(0,0,0,.2);
}

/* subtle cargo texture like reference */
.sd-apo-cargo:after{
    content:"";
    position:absolute;
    inset:0;
    opacity:.15;
    background-image:radial-gradient(#aeb7c3 .55px,transparent .55px);
    background-size:3px 3px;
}

/* front cabin */
.sd-apo-cabin{
    position:absolute;
    right:0;
    top:0;
    width:74px;
    height:86px;
    border-radius:6px 12px 12px 6px;
    background:var(--sd-apo-truck,#4d7df3);
    box-shadow:inset -7px 0 0 rgba(0,0,0,.07);
}

/* dark windshield */
.sd-apo-windshield{
    position:absolute;
    left:9px;
    top:11px;
    width:49px;
    height:57px;
    border-radius:8px 11px 8px 5px;
    background:linear-gradient(135deg,#263449 0%,#111a27 100%);
    box-shadow:inset 1px 0 0 rgba(255,255,255,.08);
}
.sd-apo-windshield:after{
    content:"";
    position:absolute;
    top:5px;
    bottom:5px;
    left:9px;
    width:2px;
    background:rgba(255,255,255,.12);
    transform:skewX(-9deg);
}

/* yellow lamps */
.sd-apo-lamp{
    position:absolute;
    right:-2px;
    width:8px;
    height:19px;
    border-radius:4px;
    background:#f7d84a;
}
.sd-apo-lamp.top{top:10px}
.sd-apo-lamp.bottom{bottom:10px}

/* headlights: triangular beams */
.sd-apo-beam{
    position:absolute;
    right:-5px;
    top:4px;
    width:0;
    height:0;
    border-top:38px solid transparent;
    border-bottom:38px solid transparent;
    border-right:170px solid rgba(255,226,75,.0);
    filter:blur(.2px);
    opacity:0;
    transform-origin:right center;
}
.sd-apo-beam.one{transform:rotate(0deg)}
.sd-apo-beam.two{transform:rotate(0deg);top:44px}

/* diagonal side mirrors/arms seen in reference */
.sd-apo-mirror{
    position:absolute;
    left:-42px;
    width:45px;
    height:3px;
    background:#e7edf5;
    transform-origin:right center;
    z-index:5;
}
.sd-apo-mirror.top{top:13px;transform:rotate(28deg)}
.sd-apo-mirror.bottom{bottom:13px;transform:rotate(-28deg)}

/* wheels barely visible from top */
.sd-apo-wheel{
    position:absolute;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#18202b;
    border:2px solid #46515f;
    opacity:.7;
}
.sd-apo-wheel.a{left:35px;top:-4px}
.sd-apo-wheel.b{left:35px;bottom:-4px}
.sd-apo-wheel.c{right:10px;top:-4px}
.sd-apo-wheel.d{right:10px;bottom:-4px}

/* road dashed line */
.sd-apo-road{
    position:absolute;
    z-index:15;
    left:0;
    top:50%;
    width:100%;
    height:4px;
    margin-top:14px;
    opacity:0;
    background:repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.78) 0 10px,
        transparent 10px 25px
    );
    transform:translateX(0);
}

/* animation progress is intentionally hidden until the road stage */
.sd-apo-progress{
    position:absolute;
    z-index:120;
    left:0;
    bottom:0;
    width:0;
    height:3px;
    background:var(--sd-apo-success,#39c778);
    opacity:0;
}

/* ===== REFERENCE SEQUENCE =====
   GIF = 125 frames x 100ms.
   Main action starts around frame 18 and completes around frame 90.
*/
.sd-apo-button.apo-running .sd-apo-label{
    animation:apoLabelOut 0.28s ease forwards;
}

.sd-apo-button.apo-running .sd-apo-package{
    animation:apoPackage 1.8s cubic-bezier(.25,.75,.2,1) forwards;
}

.sd-apo-button.apo-running .sd-apo-truck{
    animation:apoTruck 5.15s cubic-bezier(.32,.06,.24,.98) forwards;
}

.sd-apo-button.apo-running .sd-apo-beam{
    animation:apoBeam 2.0s ease-in-out 3.15s forwards;
}

.sd-apo-button.apo-running .sd-apo-road{
    animation:apoRoadAppear .18s linear 3.9s forwards, apoRoadMove .36s linear 3.9s infinite;
}

.sd-apo-button.apo-running .sd-apo-progress{
    animation:apoProgress var(--apo-dur) linear forwards;
    opacity:1;
}

.sd-apo-button.apo-done .sd-apo-success{
    animation:apoSuccess .42s cubic-bezier(.2,.9,.25,1) forwards;
}

@keyframes apoLabelOut{
    to{opacity:0;transform:scale(.72)}
}

/* package: reference has package on left first, then it disappears behind cargo */
@keyframes apoPackage{
    0%{
        opacity:0;
        left:-80px;
        transform:scale(.82);
    }
    8%{
        opacity:1;
        left:28px;
        transform:scale(1);
    }
    31%{
        opacity:1;
        left:94px;
    }
    45%{
        opacity:0;
        left:112px;
    }
    100%{opacity:0;left:112px}
}

/* Truck stays broad/low like the reference top-down vehicle */
@keyframes apoTruck{
    0%{
        opacity:0;
        left:-330px;
    }
    14%{
        opacity:1;
        left:-78px;
    }
    29%{
        left:15px;
    }
    43%{
        left:50%;
        transform:translateX(-50%);
    }
    62%{
        left:50%;
        transform:translateX(-50%);
    }
    76%{
        left:58%;
        transform:translateX(-50%);
    }
    100%{
        opacity:0;
        left:calc(100% + 330px);
        transform:translateX(0);
    }
}

@keyframes apoBeam{
    0%,15%{opacity:0;border-right-color:rgba(255,226,75,0)}
    30%{opacity:.25;border-right-color:rgba(255,226,75,.10)}
    55%{opacity:1;border-right-color:rgba(255,226,75,.19)}
    100%{opacity:1;border-right-color:rgba(255,226,75,.19)}
}

@keyframes apoRoadAppear{
    from{opacity:0}
    to{opacity:.85}
}

@keyframes apoRoadMove{
    from{background-position:0 0}
    to{background-position:35px 0}
}

@keyframes apoProgress{
    from{width:0}
    to{width:100%}
}

@keyframes apoSuccess{
    0%{
        opacity:0;
        transform:scale(.72);
    }
    65%{
        opacity:1;
        transform:scale(1.07);
    }
    100%{
        opacity:1;
        transform:scale(1);
    }
}

@media(max-width:700px){
    .sd-apo-button{
        max-width:100% !important;
        height:76px !important;
        font-size:20px !important;
    }
    .sd-apo-truck{
        transform:scale(.82);
        transform-origin:center;
    }
    .sd-apo-package{
        transform:scale(.9);
    }
}