/**
 * Authentication Styles
 * Additional styles for login, register, and password reset forms
 */

/* Enhanced Form Styles */
.auth-form-enhanced {
    @apply relative;
}

/* Input Validation States */
.auth-input-valid {
    @apply border-pink-500 bg-pink-50 dark:bg-pink-900/20;
}

.auth-input-invalid {
    @apply border-red-500 bg-red-50 dark:bg-red-900/20;
}

/* Validation Messages */
.auth-input-error {
    @apply bg-red-500 text-white text-sm mt-2 px-4 py-3 rounded-lg flex items-center gap-2;
    animation: fadeIn 0.3s ease-out;
    font-weight: 500;
}

.auth-input-success {
    @apply text-pink-500 dark:text-pink-400 text-sm mt-1 flex items-center gap-1;
    animation: fadeIn 0.3s ease-out;
}

/* Helper Text */
.auth-helper-text {
    @apply text-gray-400 dark:text-gray-500 text-sm mt-2;
    font-weight: 400;
}

.auth-input-success::before {
    content: '';
    @apply w-4 h-4 flex-shrink-0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
}

/* Loading States */
.auth-loading {
    @apply opacity-50 pointer-events-none;
}

.auth-spinner {
    @apply inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin;
}

.auth-button-loading {
    @apply relative overflow-hidden;
}

.auth-button-loading::after {
    content: '';
    @apply absolute inset-0 bg-white/20 animate-pulse;
}

/* Alert Styles - Enhanced */
.auth-alert {
    @apply fixed top-4 right-4 z-50 p-5 rounded-xl shadow-2xl max-w-md min-w-[320px];
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: slideInRight 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.auth-alert-success {
    @apply bg-pink-500 text-white border-pink-300/40;
    box-shadow: 0 10px 40px rgba(236, 72, 153, 0.3);
}

.auth-alert-error {
    @apply bg-red-500 text-white border-red-300/40;
    box-shadow: 0 10px 40px rgba(239, 68, 68, 0.3);
}

.auth-alert-info {
    @apply bg-blue-500 text-white border-blue-300/40;
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.3);
}

.auth-alert-warning {
    @apply bg-yellow-500 text-white border-yellow-300/40;
    box-shadow: 0 10px 40px rgba(234, 179, 8, 0.3);
}

.auth-alert-icon {
    @apply w-6 h-6 flex-shrink-0;
}

.auth-alert-content {
    @apply flex items-start gap-3;
}

.auth-alert-message {
    @apply flex-1 text-sm font-medium leading-relaxed;
}

.auth-alert-close {
    @apply ml-auto flex-shrink-0 w-5 h-5 text-white/80 hover:text-white transition-colors cursor-pointer;
}

.auth-alert-progress {
    @apply absolute bottom-0 left-0 h-1 bg-white/30 rounded-b-xl;
    animation: progressBar 5s linear;
}

/* Password Strength Indicator Enhanced */
.password-strength-enhanced {
    @apply mt-2 h-3 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden relative;
}

.password-strength-bar-enhanced {
    @apply h-full transition-all duration-500 ease-out relative overflow-hidden;
}

.password-strength-bar-enhanced::after {
    content: '';
    @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent;
    animation: shimmer 2s infinite;
}

.password-strength-weak-enhanced {
    @apply bg-red-500;
}

.password-strength-fair-enhanced {
    @apply bg-yellow-500;
}

.password-strength-good-enhanced {
    @apply bg-blue-500;
}

.password-strength-strong-enhanced {
    @apply bg-pink-500;
}

/* Password Strength Labels */
.password-strength-label {
    @apply text-xs mt-1 font-medium;
}

.password-strength-label-weak {
    @apply text-red-500 dark:text-red-400;
}

.password-strength-label-fair {
    @apply text-yellow-500 dark:text-yellow-400;
}

.password-strength-label-good {
    @apply text-blue-500 dark:text-blue-400;
}

.password-strength-label-strong {
    @apply text-pink-500 dark:text-pink-400;
}

/* Form Field Groups */
.auth-field-group {
    @apply space-y-1;
}

.auth-field-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1;
}

.auth-field-input {
    @apply w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg 
           bg-white dark:bg-gray-800 text-gray-900 dark:text-white
           placeholder-gray-500 dark:placeholder-gray-400
           focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent
           transition-all duration-200;
}

.auth-field-input:focus {
    @apply ring-pink-500 dark:ring-pink-400;
}

.auth-field-input:invalid {
    @apply border-red-500 dark:border-red-400;
}

.auth-field-input:valid {
    @apply border-pink-500 dark:border-pink-400;
}

/* Checkbox and Radio Enhancements */
.auth-checkbox-enhanced {
    @apply w-5 h-5 text-pink-500 border-gray-300 dark:border-gray-600 
           rounded focus:ring-pink-500 focus:ring-2
           bg-white dark:bg-gray-800
           transition-all duration-200;
}

.auth-checkbox-enhanced:checked {
    @apply bg-pink-500 border-pink-500;
}

.auth-radio-enhanced {
    @apply w-5 h-5 text-pink-500 border-gray-300 dark:border-gray-600 
           focus:ring-pink-500 focus:ring-2
           bg-white dark:bg-gray-800
           transition-all duration-200;
}

.auth-radio-enhanced:checked {
    @apply bg-pink-500 border-pink-500;
}

/* Social Login Buttons */
.auth-social-divider {
    @apply relative my-6 text-center;
}

.auth-social-divider::before {
    content: '';
    @apply absolute top-1/2 left-0 right-0 h-px bg-gray-300 dark:bg-gray-600;
}

.auth-social-divider span {
    @apply relative bg-white dark:bg-gray-900 px-4 text-sm text-gray-500 dark:text-gray-400;
}

.auth-social-buttons {
    @apply grid grid-cols-1 gap-3;
}

.auth-social-button {
    @apply flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-600 
           rounded-lg text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800
           hover:bg-gray-50 dark:hover:bg-gray-700
           transition-all duration-200;
}

.auth-social-button:hover {
    @apply transform scale-105 shadow-md;
}

.auth-social-button-google {
    @apply hover:border-red-500 hover:text-red-500;
}

.auth-social-button-facebook {
    @apply hover:border-blue-500 hover:text-blue-500;
}

.auth-social-button-twitter {
    @apply hover:border-sky-500 hover:text-sky-500;
}

/* Progress Indicator */
.auth-progress {
    @apply w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden;
}

.auth-progress-bar {
    @apply h-full bg-pink-500 transition-all duration-300 ease-out;
}

/* Tooltips */
.auth-tooltip {
    @apply relative inline-block;
}

.auth-tooltip-content {
    @apply absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-3 py-2 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded-lg opacity-0 invisible transition-all duration-200 whitespace-nowrap;
    z-index: 50;
}

.auth-tooltip:hover .auth-tooltip-content {
    @apply opacity-100 visible;
}

.auth-tooltip-content::after {
    content: '';
    @apply absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(100%) scale(0.8);
    }
}

@keyframes progressBar {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

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

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Animation Classes */
.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

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

.animate-slide-out {
    animation: slideOut 0.3s ease-out;
}

.animate-pulse-slow {
    animation: pulse 2s infinite;
}

.animate-bounce-gentle {
    animation: bounce 1s ease-in-out;
}

/* Responsive Enhancements */
@media (max-width: 640px) {
    .auth-alert {
        @apply top-2 right-2 left-2 max-w-none min-w-0;
    }
    
    .auth-social-buttons {
        @apply grid-cols-1 gap-2;
    }
    
    .auth-social-button {
        @apply py-2 text-sm;
    }
}

/* Dark Mode Specific */
.dark .auth-field-input {
    @apply border-gray-600 bg-gray-800 text-white;
}

.dark .auth-field-input::placeholder {
    @apply text-gray-400;
}

.dark .auth-checkbox-enhanced {
    @apply border-gray-600 bg-gray-800;
}

.dark .auth-radio-enhanced {
    @apply border-gray-600 bg-gray-800;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .auth-field-input {
        @apply border-2 border-gray-900 dark:border-white;
    }
    
    .auth-button {
        @apply border-2 border-current;
    }
    
    .auth-alert {
        @apply border-2 border-current;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .auth-spinner {
        animation: none;
    }
    
    .animate-fade-in,
    .animate-slide-in,
    .animate-slide-out,
    .animate-pulse-slow,
    .animate-bounce-gentle {
        animation: none;
    }
    
    .password-strength-bar-enhanced::after {
        animation: none;
    }
}

/* Focus Visible for Accessibility */
.auth-field-input:focus-visible {
    @apply outline-none ring-2 ring-pink-500 ring-offset-2 ring-offset-white dark:ring-offset-gray-900;
}

.auth-button:focus-visible {
    @apply outline-none ring-2 ring-pink-500 ring-offset-2 ring-offset-white dark:ring-offset-gray-900;
}

.auth-checkbox-enhanced:focus-visible {
    @apply outline-none ring-2 ring-pink-500 ring-offset-2 ring-offset-white dark:ring-offset-gray-900;
}

.auth-radio-enhanced:focus-visible {
    @apply outline-none ring-2 ring-pink-500 ring-offset-2 ring-offset-white dark:ring-offset-gray-900;
}

/* Print Styles */
@media print {
    .auth-alert,
    .auth-social-buttons,
    .auth-password-strength {
        @apply hidden;
    }
    
    .auth-card {
        @apply border border-gray-300 shadow-none;
    }
}