/* Custom styles, mobile safe areas, animations, and typography */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --safe-bottom: env(safe-area-inset-bottom, 16px);
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* Safe area padding for mobile navigation */
.pb-safe {
  padding-bottom: calc(5rem + var(--safe-bottom));
}

.bottom-nav-safe {
  padding-bottom: calc(0.5rem + var(--safe-bottom));
}

/* Water glass filling animation */
.water-fill {
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.wave-animation {
  position: absolute;
  top: -12px;
  left: 0;
  width: 200%;
  height: 24px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4) 30%, transparent 70%);
  animation: wave 3s infinite linear;
}

@keyframes wave {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Status badges */
.badge-danger {
  background-color: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

.badge-warning {
  background-color: #fef3c7;
  color: #b45309;
  border: 1px solid #fcd34d;
}

.badge-success {
  background-color: #d1fae5;
  color: #047857;
  border: 1px solid #6ee7b7;
}

/* Hide scrollbar for clean horizontal scrolls */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Modal transition */
.modal-overlay {
  transition: opacity 0.2s ease-in-out;
}
.modal-content {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Touch feedback */
.active-press:active {
  transform: scale(0.97);
}