/**
 * Wizard-specific Styles
 * Step transitions, progress indicators, and wizard UI
 */

/* Step Transition Animations */
[x-cloak] {
    display: none !important;
}

/* Smooth step transitions */
[x-transition] {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Progress Bar Enhancements */
.wizard-progress {
    @apply relative;
}

.wizard-progress-line {
    @apply absolute top-6 left-0 right-0 h-1 bg-gray-300 z-0;
}

.wizard-step {
    @apply relative z-10 flex flex-col items-center cursor-pointer transition-all;
}

.wizard-step:hover {
    @apply transform scale-105;
}

.wizard-step-circle {
    @apply w-12 h-12 rounded-full flex items-center justify-center font-bold text-lg transition-all shadow-md;
}

.wizard-step-circle.active {
    @apply bg-white text-blue-600 ring-4 ring-blue-200;
}

.wizard-step-circle.completed {
    @apply bg-blue-500 text-white;
}

.wizard-step-circle.pending {
    @apply bg-blue-400 text-white opacity-50;
}

.wizard-step-label {
    @apply mt-2 text-sm font-medium transition-all;
}

.wizard-step.active .wizard-step-label {
    @apply text-white font-bold;
}

/* Step Content Container */
#step-container {
    min-height: 400px;
}

/* Form Field Animation on Error */
.form-input.error {
    animation: shake 0.3s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* Validation Indicator */
.validation-indicator {
    @apply inline-flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold;
}

.validation-indicator.valid {
    @apply bg-green-500 text-white;
}

.validation-indicator.invalid {
    @apply bg-red-500 text-white;
}

.validation-indicator.pending {
    @apply bg-gray-300 text-gray-600;
}

/* Step Card */
.step-card {
    @apply bg-white rounded-lg shadow-md p-6 mb-6;
}

.step-card-title {
    @apply text-xl font-bold text-gray-800 mb-4 flex items-center gap-2;
}

.step-card-title::before {
    content: "";
    @apply block w-1 h-6 bg-blue-600 rounded;
}

/* Navigation Button Styles */
.wizard-nav {
    @apply flex justify-between items-center bg-gray-50 px-8 py-6 border-t;
}

.wizard-nav-btn {
    @apply px-6 py-3 rounded-lg font-medium transition flex items-center gap-2;
}

.wizard-nav-btn:disabled {
    @apply opacity-50 cursor-not-allowed;
}

.wizard-nav-btn.prev {
    @apply bg-gray-200 hover:bg-gray-300 text-gray-800;
}

.wizard-nav-btn.next {
    @apply bg-blue-600 hover:bg-blue-700 text-white;
}

.wizard-nav-btn.submit {
    @apply bg-green-600 hover:bg-green-700 text-white;
}

/* Collapsible Section */
.collapsible-header {
    @apply flex justify-between items-center cursor-pointer p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition;
}

.collapsible-content {
    @apply mt-2 p-4 border-l-4 border-blue-600;
}

/* Conditional Field Highlight */
.conditional-field {
    @apply relative;
}

.conditional-field::before {
    content: "";
    @apply absolute -left-3 top-0 bottom-0 w-1 bg-blue-400 rounded;
}

/* Required Field Indicator */
.required-indicator {
    @apply text-red-500 font-bold;
}

/* Step Completion Indicator */
.step-completion {
    @apply flex items-center gap-2 text-sm;
}

.step-completion-bar {
    @apply flex-1 h-2 bg-gray-200 rounded-full overflow-hidden;
}

.step-completion-progress {
    @apply h-full bg-green-500 transition-all duration-500;
}

/* Auto-save Indicator */
.autosave-indicator {
    @apply fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg text-sm flex items-center gap-2 z-50;
}

.autosave-indicator.saving {
    @apply bg-blue-600;
}

.autosave-indicator.saved {
    @apply bg-green-600;
}

.autosave-indicator.error {
    @apply bg-red-600;
}

/* Pulse Animation for Active Elements */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .wizard-progress {
        @apply px-2;
    }

    .wizard-step-circle {
        @apply w-10 h-10 text-sm;
    }

    .wizard-step-label {
        @apply text-xs;
    }

    .wizard-nav {
        @apply px-4 py-4 flex-col gap-4;
    }

    .wizard-nav-btn {
        @apply w-full;
    }

    #step-container {
        @apply p-4;
        min-height: 300px;
    }
}

/* Print Styles */
@media print {
    .wizard-progress,
    .wizard-nav,
    button {
        @apply hidden;
    }

    #step-container {
        @apply shadow-none border-0;
    }

    .step-card {
        @apply break-inside-avoid;
    }
}

/* Focus Styles for Accessibility */
*:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

button:focus,
a:focus {
    @apply ring-2 ring-blue-500;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .wizard-step-circle {
        @apply border-2 border-current;
    }

    .form-input,
    .form-select {
        @apply border-2;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}