/* Custom CSS for Verification App */

/* Utility classes for animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

.slide-in {
  animation: slideIn 0.3s ease-out;
}

.pulse {
  animation: pulse 2s infinite;
}

/* Custom button hover effects */
.btn-hover-scale {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-hover-scale:hover {
  transform: translateY(-1px);
}

.btn-hover-scale:active {
  transform: translateY(0);
}

/* Status badge animations */
.status-badge {
  transition: all 0.3s ease;
}

.status-badge.success {
  background-color: rgb(0 0 0 / 0.1);
  color: rgb(0 0 0);
  border: 1px solid rgb(0 0 0 / 0.2);
}

.status-badge.failed {
  background-color: rgb(64 64 64 / 0.1);
  color: rgb(64 64 64);
  border: 1px solid rgb(64 64 64 / 0.2);
}

.status-badge.pending {
  background-color: rgb(128 128 128 / 0.1);
  color: rgb(128 128 128);
  border: 1px solid rgb(128 128 128 / 0.2);
}

/* Loading spinner */
.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Message animations */
.message-enter {
  animation: slideIn 0.3s ease-out;
}

.message-exit {
  animation: fadeOut 0.3s ease-out;
}

@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

/* Responsive improvements */
@media (max-width: 640px) {
  .container-mobile {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .text-mobile-sm {
    font-size: 0.875rem;
  }
  
  .button-mobile {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }
}

/* Custom focus styles */
.focus-ring {
  transition: box-shadow 0.2s ease;
}

.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.5);
}

/* Icon animations */
.icon-rotate {
  transition: transform 0.3s ease;
}

.icon-rotate:hover {
  transform: rotate(12deg);
}

/* Card hover effects */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
}

/* Copy button styles */
.copy-btn {
  transition: all 0.2s ease;
}

.copy-btn:hover {
  background-color: rgb(107 114 128 / 0.1);
  transform: scale(1.1);
}

.copy-btn:active {
  transform: scale(0.95);
}

/* Auto-refresh button states */
.auto-refresh-active {
  background-color: rgb(0 0 0);
  color: white;
}

.auto-refresh-active svg {
  color: white;
}

.auto-refresh-inactive {
  background-color: transparent;
  color: rgb(128 128 128);
  border: 1px solid rgb(192 192 192);
}

.auto-refresh-inactive svg {
  color: rgb(128 128 128);
}

/* Balance display animations */
.balance-update {
  animation: fadeIn 0.5s ease-out;
}

/* Status icon animations */
.status-icon {
  transition: all 0.3s ease;
}

.status-icon.success {
  background-color: rgb(0 0 0 / 0.1);
  color: rgb(0 0 0);
}

.status-icon.failed {
  background-color: rgb(64 64 64 / 0.1);
  color: rgb(64 64 64);
}

.status-icon.pending {
  background-color: rgb(128 128 128 / 0.1);
  color: rgb(128 128 128);
}