@tailwind base; @tailwind components; @tailwind utilities;

.input-field { @apply w-full border-2 border-slate-200 p-3.5 rounded-xl focus:border-primary-500 focus:ring-0 outline-none transition-all shadow-sm bg-white text-[16px] text-slate-800 appearance-none; }
.btn-primary { @apply bg-primary-600 text-white px-5 py-2.5 rounded-xl hover:bg-primary-700 font-bold transition-all shadow-sm; }
.btn-ghost { @apply text-slate-500 hover:bg-slate-100 hover:text-slate-800 px-5 py-2.5 rounded-xl transition-all font-medium; }
.nav-btn { @apply w-10 h-10 flex items-center justify-center rounded-xl text-slate-500 hover:bg-slate-100 transition-all; }

.custom-scrollbar::-webkit-scrollbar { width: 5px; height: 5px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

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

.modal { transition: opacity 0.2s; }