/* Seamless Deep Forest Green Kiosk Styles */

body {
  font-family: 'Inter', sans-serif;
  background-color: #0a221c;
  color: #ffffff;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Hidden Utility Class */
.hidden {
  display: none !important;
}

/* Bulletproof PIN Dot Styling (24px x 24px Always) */
.pin-dot {
  width: 1.5rem !important;   /* 24px */
  height: 1.5rem !important;  /* 24px */
  min-width: 1.5rem !important;
  min-height: 1.5rem !important;
  border-radius: 9999px !important;
  border-width: 2px !important;
  border-style: solid !important;
  box-sizing: border-box !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pin-dot.empty {
  border-color: #a3e6d2 !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.pin-dot.filled {
  border-color: #a3e6d2 !important;
  background-color: #a3e6d2 !important;
  box-shadow: 0 0 12px rgba(163, 230, 210, 0.7) !important;
}

.pin-dot.error {
  border-color: #f43f5e !important;
  background-color: #f43f5e !important;
  box-shadow: 0 0 12px rgba(244, 63, 94, 0.7) !important;
}

/* Keypad Button Active State */
.keypad-btn:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: scale(0.95);
}

/* Animations */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  70% {
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

.animate-bounce-in {
  animation: bounceIn 0.25s ease-out forwards;
}

.animate-shake {
  animation: shake 0.35s ease-in-out;
}