@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;600;700&display=swap');

body { 
    font-family: 'Prompt', sans-serif; 
    overflow-x: hidden; 
}

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* =========================================
   CSS อนิเมชั่นสุดล้ำตามสั่ง
========================================= */
@keyframes packItem {
    0% { transform: translateX(-15px) scale(1); opacity: 1; }
    50% { transform: translateX(5px) scale(0.5); opacity: 0; }
    100% { transform: translateX(5px) scale(0); opacity: 0; }
}

@keyframes boxShake {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2) rotate(5deg); }
}

@keyframes deliveryRun {
    0% { transform: translateX(-20px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(10px); opacity: 0; }
}

@keyframes popSuccess {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); color: #10b981; }
    100% { transform: scale(1); color: #10b981; }
}

@keyframes shakeCancel {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); color: #ef4444; }
    75% { transform: translateX(5px); color: #ef4444; }
}

@keyframes spinReturn {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); color: #3b82f6; }
}

/* =========================================
   คลาสอนิเมชั่นเมื่อกดคลิก
========================================= */
.active-anim-packing .fa-shirt { animation: packItem 1.5s ease-in-out forwards; position: absolute; left: 0; color: #f59e0b; }
.active-anim-packing .fa-box-open { animation: boxShake 1.5s ease-in-out forwards; position: relative; z-index: 10; margin-left: 10px; }

.active-anim-delivery .fa-box { animation: deliveryRun 2s linear forwards; position: absolute; left: 0; color: #8b5cf6; font-size: 10px; margin-top: 5px;}
.active-anim-delivery .fa-person { position: relative; z-index: 10; margin-left: 20px; }

.active-anim-success i { animation: popSuccess 0.5s ease-out forwards; }
.active-anim-cancel i { animation: shakeCancel 0.5s ease-out forwards; }
.active-anim-return i { animation: spinReturn 0.8s ease-out forwards; }