/* ป้องกันการลากเพื่อรีเฟรชบนมือถือ (Pull-to-refresh) เพื่อให้เหมือนแอปจริง */
body { overscroll-behavior-y: contain; -webkit-tap-highlight-color: transparent; }

/* ป้องกันการคัดลอกข้อความในส่วนที่ไม่จำเป็น */
* { -webkit-tap-highlight-color: transparent; }
.no-select { -webkit-user-select: none; user-select: none; }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.safe-pb { padding-bottom: env(safe-area-inset-bottom); }
.touch-active:active { transform: scale(0.96); transition: 0.1s; }

/* Animation */
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.animate-slide-up { animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

/* Animation: เด้งขึ้นมานุ่มๆ (Pop In) */
@keyframes popIn {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}
.animate-pop-in { animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Animation: Drawer Slide In */
@keyframes slideLeft {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
.animate-slide-left { animation: slideLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Animation: กระดิ่งสั่น */
@keyframes swing { 0%,100%{transform:rotate(0deg)} 20%{transform:rotate(15deg)} 40%{transform:rotate(-10deg)} 60%{transform:rotate(5deg)} 80%{transform:rotate(-5deg)} }
.animate-swing { animation: swing 1s infinite; }

.dot-wave-red{display:flex;align-items:center;justify-content:center;gap:8px}.dot-wave-red span{width:12px;height:12px;background-color:#c52d23;border-radius:50%;animation:wave-red 1.2s ease-in-out infinite}.dot-wave-red span:nth-child(1){animation-delay:-0.24s}.dot-wave-red span:nth-child(2){animation-delay:-0.12s}.dot-wave-red span:nth-child(3){animation-delay:0s}@keyframes wave-red{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Filter Bar & Categories (Order-System clone) */
.station-container { 
    padding: 12px 20px 4px 20px; 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 60px;
    opacity: 1;
    overflow: hidden;
}
.hidden-station {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.cat-scroll { display: flex; overflow-x: auto; gap: 12px; padding: 12px 20px 16px 20px; -ms-overflow-style: none; scrollbar-width: none; }
.cat-scroll::-webkit-scrollbar { display: none; }
.cat-btn { padding: 10px 24px; border-radius: 16px; font-weight: 700; font-size: 1rem; white-space: nowrap; transition: all 0.2s ease; border: 1px solid #e2e8f0; background: white; color: #64748b; }
.dark .cat-btn { background: #1e293b; border-color: #334155; color: #94a3b8; }
.cat-btn.active { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transform: scale(1.02); }
.dark .cat-btn.active { background: #334155; color: #ffffff; border-color: #475569; }

/* Menu Card (Horizontal) */
.menu-card { background: white; position: relative; transition: all 0.2s ease; border-bottom: 1px solid #f1f5f9; padding: 16px; }
.dark .menu-card { background: #0f172a; border-bottom-color: #334155; }
.menu-card:last-child { border-bottom: none; }
.menu-card:active { opacity: 0.7; transform: scale(0.98); }
.add-btn { width: 32px; height: 32px; background: #f1f5f9; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #0f172a; font-size: 0.9rem; transition: all 0.2s ease; border: none; }
.dark .add-btn { background: #334155; color: white; }
.add-btn:active { background: #e2e8f0; transform: scale(0.85); }
.dark .add-btn:active { background: #475569; }