/* "Truck delivery" order button: see storefront/truck_btn.js. The button is 56px high (.sf-pf-btn); everything here is drawn for that. */
.sft-run, .sft-done { position: relative; overflow: hidden; }
.sft-run:disabled, .sft-done:disabled { opacity: 1 !important; cursor: default; }
.sft-run > *:not(.sft) { opacity: 0; transition: opacity .2s ease; }
.sft { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; opacity: 0; transition: opacity .3s ease; background: #2a2d34; pointer-events: none; }
.sft.on { opacity: 1; }
.sft-road { position: absolute; inset: 0; }
.sft-road::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: linear-gradient(90deg, #fff 0 20px, transparent 20px) repeat-x; background-size: 44px 3px; animation: sft-dash .5s linear infinite; animation-play-state: paused; }
.sft-road::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; bottom: 5px; border-top: 2px solid rgba(255, 255, 255, .45); border-bottom: 2px solid rgba(255, 255, 255, .45); }
.sft.moving .sft-road::before { animation-play-state: running; }
.sft.fast .sft-road::before { animation-duration: .2s; }
@keyframes sft-dash { from { background-position: 0 0; } to { background-position: -44px 0; } }

.sft-truck { position: absolute; top: 50%; left: -30%; width: 92px; height: 40px; margin: -20px 0 0 -46px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55)); transition: left .95s cubic-bezier(.2, .7, .2, 1); }
.sft-truck svg { display: block; width: 92px; height: 40px; }
.sft-truck.enter { left: 50%; }
.sft-truck.leave { left: 160%; transition: left 1.1s cubic-bezier(.55, 0, .9, .55); }
.sft-door { position: absolute; left: -2px; width: 3px; height: 17px; border-radius: 1px; background: #d5d9e0; box-shadow: 0 0 0 .5px #aab0bb; transition: transform .45s ease; }
.sft-door-t { top: 3px; transform-origin: 50% 0; }
.sft-door-b { top: 20px; transform-origin: 50% 100%; }
.sft.open .sft-door-t { transform: rotate(100deg); }
.sft.open .sft-door-b { transform: rotate(-100deg); }

.sft-parcel { position: absolute; top: 50%; left: 22px; width: 18px; height: 18px; margin-top: -9px; opacity: 0; transform: translateX(-53px); transition: transform .85s ease-in-out, opacity .2s ease; }
.sft-parcel svg { display: block; width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.sft.load .sft-parcel { opacity: 1; transform: translateX(0); }
.sft-truck svg { position: relative; z-index: 1; }
.sft-door { z-index: 2; }

.sft-done { display: flex; align-items: center; justify-content: center; gap: 10px; background: #16a34a !important; color: #fff !important; border-color: transparent !important; }
.sft-done .sft-check { width: 24px; height: 24px; }
.sft-done .sft-check path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: sft-draw .45s .1s ease forwards; }
.sft-done .sft-check circle { stroke-dasharray: 60; stroke-dashoffset: 60; animation: sft-draw .5s ease forwards; }
@keyframes sft-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .sft-truck, .sft-parcel, .sft-door { transition: none; } .sft-road::before { animation: none; } }
/* the button's own icon rule (.sf-pf-btn svg) must not shrink the drawings */
.sft .sft-truck svg { width: 92px !important; height: 40px !important; }
.sft .sft-parcel svg { width: 18px !important; height: 18px !important; }
.sft-done .sft-check { width: 24px !important; height: 24px !important; }