/* JODOH OpusMax - Custom Styles */

/* Custom animations */
@keyframes float {
  0%, 100% { 
    transform: translateY(0px); 
  }
  50% { 
    transform: translateY(-20px); 
  }
}

@keyframes pulse-slow {
  0%, 100% { 
    opacity: 1; 
  }
  50% { 
    opacity: 0.7; 
  }
}

@keyframes bounce-in {
  0% { 
    transform: scale(0.3) translateY(50px);
    opacity: 0; 
  }
  50% { 
    transform: scale(1.05); 
  }
  70% { 
    transform: scale(0.9); 
  }
  100% { 
    transform: scale(1) translateY(0);
    opacity: 1; 
  }
}

@keyframes slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Utility classes */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse-slow {
  animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce-in {
  animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.animate-slide-up {
  animation: slide-up 0.5s ease-out;
}

/* Glass effect */
.glass-effect {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Gradient backgrounds */
.gradient-bg {
  background: linear-gradient(135deg, #EC4899 0%, #8B5CF6 50%, #3B82F6 100%);
}

.gradient-pink {
  background: linear-gradient(135deg, #EC4899, #F97316);
}

.gradient-purple {
  background: linear-gradient(135deg, #8B5CF6, #3B82F6);
}

/* Navigation tabs */
.nav-tab {
  @apply px-4 py-2 text-gray-600 hover:text-gray-900 font-medium transition-all duration-200 rounded-lg relative;
}

.nav-tab.active {
  @apply text-pink-600 bg-pink-50;
}

.nav-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: #EC4899;
  border-radius: 1px;
}

/* Card styles */
.card {
  @apply bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300;
}

.card-hover {
  @apply transform hover:scale-105 transition-transform duration-200;
}

/* Button styles */
.btn-primary {
  @apply bg-pink-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-pink-700 transition-all duration-200 transform hover:scale-105;
}

.btn-secondary {
  @apply bg-gray-100 text-gray-800 px-6 py-3 rounded-lg font-medium hover:bg-gray-200 transition-all duration-200;
}

.btn-outline {
  @apply border-2 border-pink-600 text-pink-600 px-6 py-3 rounded-lg font-medium hover:bg-pink-600 hover:text-white transition-all duration-200;
}

/* Swipe buttons */
.swipe-btn {
  @apply w-16 h-16 rounded-full flex items-center justify-center text-white font-bold shadow-lg transform transition-all duration-200 hover:scale-110 active:scale-95;
}

.swipe-pass {
  @apply bg-gray-500 hover:bg-gray-600;
}

.swipe-like {
  @apply bg-pink-600 hover:bg-pink-700;
}

.swipe-super {
  @apply bg-blue-600 hover:bg-blue-700;
}

/* Profile completion bar */
.progress-bar {
  @apply w-full bg-gray-200 rounded-full h-3 overflow-hidden;
}

.progress-fill {
  @apply h-full bg-gradient-to-r from-pink-500 to-purple-500 rounded-full transition-all duration-500;
}

/* Interest tags */
.interest-tag {
  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-pink-100 text-pink-800 hover:bg-pink-200 transition-colors cursor-pointer;
}

.interest-tag-removable {
  @apply interest-tag;
}

.interest-tag-removable .remove-btn {
  @apply ml-2 text-pink-600 hover:text-pink-800 transition-colors;
}

/* Modal styles */
.modal-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm flex items-center justify-center z-50 p-4;
}

.modal-content {
  @apply bg-white rounded-2xl max-w-md w-full p-6 transform transition-all duration-300;
}

.modal-enter {
  animation: bounce-in 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Notification styles */
.notification {
  @apply mb-4 p-4 rounded-lg shadow-lg transform transition-all duration-300 max-w-sm;
}

.notification-success {
  @apply bg-green-500 text-white;
}

.notification-error {
  @apply bg-red-500 text-white;
}

.notification-info {
  @apply bg-blue-500 text-white;
}

.notification-warning {
  @apply bg-yellow-500 text-white;
}

/* Form styles */
.form-input {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent transition-all duration-200;
}

.form-input:focus {
  @apply shadow-lg;
}

.form-label {
  @apply block text-sm font-semibold text-gray-700 mb-2;
}

.form-error {
  @apply text-red-600 text-sm mt-1;
}

/* Loading states */
.loading-spinner {
  @apply inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin;
}

.loading-dots::after {
  content: '';
  animation: loading-dots 1.5s steps(4, end) infinite;
}

@keyframes loading-dots {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}

/* Match card styles */
.match-card {
  @apply bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-xl;
}

.match-card-image {
  @apply w-full h-48 object-cover;
}

.match-card-content {
  @apply p-4;
}

.match-card-name {
  @apply text-lg font-bold text-gray-800 mb-1;
}

.match-card-info {
  @apply text-sm text-gray-600 mb-2;
}

.match-card-bio {
  @apply text-sm text-gray-700 mb-3 line-clamp-2;
}

.match-card-footer {
  @apply flex justify-between items-center;
}

/* Candidate card styles */
.candidate-card {
  @apply bg-white rounded-2xl shadow-xl overflow-hidden max-w-md mx-auto;
}

.candidate-image-container {
  @apply relative;
}

.candidate-image {
  @apply w-full h-96 object-cover;
}

.candidate-overlay {
  @apply absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6 text-white;
}

.candidate-name {
  @apply text-2xl font-bold mb-1;
}

.candidate-location {
  @apply text-white/90 text-sm;
}

.candidate-content {
  @apply p-6 space-y-4;
}

.compatibility-score {
  @apply text-center;
}

.compatibility-number {
  @apply text-3xl font-bold text-pink-600;
}

.compatibility-label {
  @apply text-sm text-gray-600;
}

/* Stats grid */
.stats-grid {
  @apply grid grid-cols-3 gap-4;
}

.stat-card {
  @apply bg-white p-4 rounded-lg shadow text-center;
}

.stat-number {
  @apply text-2xl font-bold;
}

.stat-label {
  @apply text-sm text-gray-600;
}

/* Responsive utilities */
@media (max-width: 640px) {
  .nav-tab {
    @apply px-2 py-1 text-sm;
  }
  
  .candidate-card {
    @apply mx-2;
  }
  
  .swipe-btn {
    @apply w-14 h-14;
  }
  
  .modal-content {
    @apply mx-2;
  }
}

/* Dark mode support (for future implementation) */
@media (prefers-color-scheme: dark) {
  /* Add dark mode styles here if needed */
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #EC4899;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #BE185D;
}

/* Selection styles */
::selection {
  background: #EC4899;
  color: white;
}

::-moz-selection {
  background: #EC4899;
  color: white;
}

/* Line clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Focus states for accessibility */
.focus-ring:focus {
  @apply outline-none ring-2 ring-pink-500 ring-offset-2;
}

/* Hover effects for interactive elements */
.hover-lift:hover {
  @apply transform -translate-y-1 shadow-lg;
}

.hover-glow:hover {
  @apply shadow-lg;
  box-shadow: 0 10px 25px rgba(236, 72, 153, 0.3);
}

/* Text utilities */
.text-gradient {
  background: linear-gradient(135deg, #EC4899, #8B5CF6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Border utilities */
.border-gradient {
  border: 1px solid;
  border-image: linear-gradient(135deg, #EC4899, #8B5CF6) 1;
}