/* Custom Base & Utilities for 30-Day Smart Save Challenge */

/* Prevent iOS bounce zoom & text selection */
html, body {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* Enable selection only on editable inputs */
input, textarea {
  user-select: text;
  -webkit-user-select: text;
}

/* Custom Safe Area Padding Helpers */
.pt-safe-top {
  padding-top: max(12px, env(safe-area-inset-top));
}
.pb-safe-bottom {
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* Smooth custom scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
}
::-webkit-scrollbar-thumb {
  background: rgba(6, 78, 59, 0.2);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(6, 78, 59, 0.4);
}

/* Tile Grid Card Animations & States */
.day-card {
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.day-card:active {
  transform: scale(0.94);
}

.day-card.completed {
  background: linear-gradient(135deg, #064E3B 0%, #047857 100%);
  color: #FFFFFF;
  border-color: #10B981;
  box-shadow: 0 4px 14px rgba(6, 78, 59, 0.25);
}

.day-card.today-highlight {
  border-color: #F59E0B;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3), 0 8px 16px -4px rgba(245, 158, 11, 0.2);
}

/* Pop keyframe on complete toggle */
@keyframes popCheck {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

.check-pop {
  animation: popCheck 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Modal entrance animation */
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.animate-slide-up {
  animation: slideUp 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Plan Card Selected Indicator */
.plan-card input[type="radio"]:checked + div {
  border-color: #064E3B;
}

/* Pulse glow for milestone badge unlock */
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.2); }
  50% { box-shadow: 0 0 25px rgba(245, 158, 11, 0.6); }
}

.badge-glow {
  animation: goldPulse 2s infinite ease-in-out;
}