/* Custom Styles & View Transitions */

:root {
  --color-uninga: #0f4d91;
  --color-uninga-light: rgba(15, 77, 145, 0.04);
  --color-uninga-border: rgba(15, 77, 145, 0.15);
  --color-accent: #ff5621;
}

/* Modern font styling */
body {
  font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  background-color: #f8fafc;
}

/* View Transition Keyframes */
@keyframes slide-to-left {
  to { transform: translateX(-40px); opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(40px); opacity: 0; }
}

@keyframes slide-to-right {
  to { transform: translateX(40px); opacity: 0; }
}

@keyframes slide-from-left {
  from { transform: translateX(-40px); opacity: 0; }
}

/* Apply transitions */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(root) {
    animation-duration: 0.3s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: both;
  }

  html:active-view-transition-type(forward)::view-transition-old(root) {
    animation-name: slide-to-left;
  }
  html:active-view-transition-type(forward)::view-transition-new(root) {
    animation-name: slide-from-right;
  }

  html:active-view-transition-type(backward)::view-transition-old(root) {
    animation-name: slide-to-right;
  }
  html:active-view-transition-type(backward)::view-transition-new(root) {
    animation-name: slide-from-left;
  }
}

/* Premium micro-interactions */
.premium-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px -8px rgba(0, 76, 76, 0.15);
}

.payment-card {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: 2px solid transparent;
}

.payment-card:hover {
  border-color: var(--color-uninga-border);
}

.payment-card.selected {
  border-color: var(--color-uninga);
  background-color: var(--color-uninga-light);
  box-shadow: 0 8px 16px -6px rgba(0, 76, 76, 0.12);
}

/* Custom styling for inputs */
input:focus {
  outline: none;
  border-color: var(--color-uninga) !important;
  box-shadow: 0 0 0 3px rgba(0, 76, 76, 0.15) !important;
}

/* Success micro-animations */
@keyframes check-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.animate-check {
  animation: check-bounce 0.4s ease-out;
}