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

body { 
    font-family: 'Hind', sans-serif; 
    -webkit-tap-highlight-color: transparent; 
    overscroll-behavior-y: none; 
}

button, header, footer, .nav-item, .chip {
    user-select: none; 
    -webkit-user-select: none;
}

::-webkit-scrollbar { 
    display: none; 
    width: 0px; 
    background: transparent; 
}
.hide-scrollbar { 
    -ms-overflow-style: none;  
    scrollbar-width: none;     
}

.pb-safe { 
    padding-bottom: env(safe-area-inset-bottom, 16px); 
}

.toast-enter { 
    animation: toastSlideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
}
.toast-exit { 
    animation: toastSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; 
}

@keyframes toastSlideIn { 
    from { transform: translateY(-100%); opacity: 0; } 
    to { transform: translateY(0); opacity: 1; } 
}
@keyframes toastSlideOut { 
    from { transform: translateY(0); opacity: 1; } 
    to { transform: translateY(-120%); opacity: 0; } 
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type=number] { 
    -moz-appearance: textfield; 
}

.nav-item { 
    opacity: 0.5; 
    filter: grayscale(100%); 
    transition: all 0.3s ease;
}
.nav-item.active { 
    opacity: 1; 
    filter: grayscale(0%); 
}