/* Full-screen overlay */
#loaderOverlay { position: fixed; inset: 0; background: #ffffff; z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity .4s ease, visibility .4s ease; }
#loaderOverlay.hidden { opacity: 0; visibility: hidden; }

/* Next-like loader styles (from components/loader.css) */
.loader { width: fit-content; height: fit-content; display: flex; align-items: center; justify-content: center; }

.truckWrapper { width: 200px; height: 100px; display: flex; flex-direction: column; position: relative; align-items: center; justify-content: flex-end; overflow-x: hidden; }

/* truck upper body */
.truckBody { width: 130px; height: fit-content; margin-bottom: 6px; animation: motion 1s linear infinite; }

/* truck suspension animation*/
@keyframes motion { 0% { transform: translateY(0px); } 50% { transform: translateY(3px); } 100% { transform: translateY(0px); } }

/* truck's tires */
.truckTires { width: 130px; height: fit-content; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 15px; position: absolute; bottom: 0; }
.truckTires svg { width: 24px; }

.road { width: 100%; height: 1.5px; background-color: #282828; position: relative; bottom: 0; align-self: flex-end; border-radius: 3px; }
.road::before { content: ""; position: absolute; width: 20px; height: 100%; background-color: #282828; right: -50%; border-radius: 3px; animation: roadAnimation 1.4s linear infinite; border-left: 10px solid white; }
.road::after { content: ""; position: absolute; width: 10px; height: 100%; background-color: #282828; right: -65%; border-radius: 3px; animation: roadAnimation 1.4s linear infinite; border-left: 4px solid white; }

.lampPost { position: absolute; bottom: 0; right: -90%; height: 90px; animation: roadAnimation 1.4s linear infinite; }

@keyframes roadAnimation { 0% { transform: translateX(0px); } 100% { transform: translateX(-350px); } }