/* Custom Base Tweaks & CSS Utilities */
:root {
  --app-bg: #F7FBFF;
  --app-primary: #0077B6;
  --app-accent: #FF8A5B;
  --app-dark: #03045E;
}

body {
  background-color: var(--app-bg);
  color: var(--app-dark);
  font-family: 'Tajawal', sans-serif;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 119, 182, 0.05);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 119, 182, 0.25);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 119, 182, 0.45);
}

/* Inputs & Focus states */
input, select, textarea, button {
  font-family: inherit;
}

/* Modal animation */
@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-enter {
  animation: popIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Category Filter active state */
.categoryFilterBtn.active {
  background-color: #0077B6 !important;
  color: #FFFFFF !important;
  border-color: #0077B6 !important;
}

/* Pulse badge */
@keyframes softPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: 0.9; }
}

.advice-glow {
  animation: softPulse 4s infinite ease-in-out;
}