/* Premium button interactions */
.btn-pri, .btn-auth, .btn-submit, .nav-cta, .sb-btn, .sa-btn {
  position: relative;
  overflow: hidden;
}

.btn-pri, .btn-auth, .btn-submit, .nav-cta {
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), background 0.22s, border-color 0.22s, color 0.22s;
}

.btn-pri:hover, .btn-auth:hover, .btn-submit:hover, .nav-cta:hover {
  transform: translateY(-2px);
}

.btn-pri:active, .btn-auth:active, .btn-submit:active, .nav-cta:active {
  transform: translateY(0) scale(0.98);
}

.btn-ghost, .nav-login, .role-tab {
  transition: transform 0.2s var(--ease-out), border-color 0.2s, color 0.2s, background 0.2s;
}

.btn-ghost:hover, .nav-login:hover {
  transform: translateY(-1px);
}

.ripple-host { position: relative; overflow: hidden; }

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: rippleAnim 0.55s var(--ease-out) forwards;
  pointer-events: none;
}

@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

.sb-btn, .sa-btn {
  transition: background 0.2s, color 0.2s, transform 0.2s var(--ease-out), border-color 0.2s;
}

.sb-btn:hover, .sa-btn:hover {
  transform: translateX(3px);
}

.sb-btn.active, .sa-btn.active {
  box-shadow: inset 0 0 0 1px rgba(87, 70, 175, 0.15);
}