/**
 * AYIO Jobs - Registration Wizard Styles
 * Multi-step wizard overlay for registration forms.
 * Works with registration-wizard.js to show/hide existing form sections.
 */

/* ==================== Progress Bar ==================== */
.wizard-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 0 0.5rem;
    position: relative;
}

.wizard-progress::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 40px;
    right: 40px;
    height: 3px;
    background: var(--gray-200, #e4e6eb);
    z-index: 0;
}

.wizard-progress-fill {
    position: absolute;
    top: 18px;
    left: 40px;
    height: 3px;
    background: var(--gold, #f0a500);
    z-index: 1;
    transition: width 0.4s ease;
}

.wizard-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

.wizard-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    background: var(--gray-200, #e4e6eb);
    color: var(--gray-500, #6b7280);
    border: 3px solid var(--gray-200, #e4e6eb);
    transition: all 0.3s ease;
}

.wizard-step-indicator.active .wizard-step-circle {
    background: var(--gold, #f0a500);
    color: var(--navy, #0f1f3d);
    border-color: var(--gold, #f0a500);
}

.wizard-step-indicator.completed .wizard-step-circle {
    background: var(--navy, #0f1f3d);
    color: #fff;
    border-color: var(--navy, #0f1f3d);
}

.wizard-step-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--gray-500, #6b7280);
    text-align: center;
    max-width: 80px;
    line-height: 1.2;
}

.wizard-step-indicator.active .wizard-step-label {
    color: var(--navy, #0f1f3d);
    font-weight: 600;
}

.wizard-step-indicator.completed .wizard-step-label {
    color: var(--navy, #0f1f3d);
}

/* ==================== Navigation Buttons ==================== */
.wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200, #e4e6eb);
    gap: 1rem;
}

.wizard-nav .btn {
    min-width: 120px;
}

.wizard-nav .btn-prev {
    background: var(--gray-100, #f1f3f5);
    color: var(--gray-700, #374151);
    border: 1px solid var(--gray-300, #d0d3d8);
}

.wizard-nav .btn-prev:hover {
    background: var(--gray-200, #e4e6eb);
}

.wizard-nav .btn-next {
    background: var(--gold, #f0a500);
    color: var(--navy, #0f1f3d);
    border: none;
    font-weight: 600;
}

.wizard-nav .btn-next:hover {
    background: var(--gold-dark, #c8880a);
}

.wizard-step-info {
    font-size: 0.85rem;
    color: var(--gray-500, #6b7280);
}

/* ==================== Hidden Sections in Wizard Mode ==================== */
/* Double-class selectors boost specificity to override style.css rules without !important.
   JS inline styles (with !important) handle the actual runtime show/hide; these CSS rules
   provide the correct initial/fallback state. */
.wizard-active.wizard-active .form-section {
    display: none;
}

.wizard-active.wizard-active .form-section.wizard-visible {
    display: block;
}

/* Keep conditional sections hidden unless wizard-visible */
.wizard-active.wizard-active .form-section.conditional-section:not(.wizard-visible) {
    display: none;
}

/* Hide the original submit button when not on last step */
.wizard-active.wizard-active .wizard-submit-area {
    display: none;
}

.wizard-active.wizard-active .wizard-submit-area.wizard-visible {
    display: block;
}

/* Hide quick-fill section and divider in wizard mode */
.wizard-active.wizard-active .registration-quick-fill,
.wizard-active.wizard-active .quick-fill-divider {
    display: none;
}

/* Hide the AYIOFormUX progress bar when wizard is active */
.wizard-active.wizard-active ~ .form-progress-container,
.form-progress-container:has(+ .wizard-active.wizard-active),
.wizard-active-hide.wizard-active-hide {
    display: none;
}

/* ==================== Responsive ==================== */
@media (max-width: 768px) {
    .wizard-progress {
        padding: 0;
    }

    .wizard-progress::before {
        left: 20px;
        right: 20px;
    }

    .wizard-progress-fill {
        left: 20px;
    }

    .wizard-step-label {
        display: none;
    }

    .wizard-step-circle {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .wizard-nav {
        flex-wrap: wrap;
    }

    .wizard-nav .btn {
        flex: 1;
        min-width: 0;
    }

    .wizard-step-info {
        width: 100%;
        text-align: center;
        order: -1;
    }
}

/* ==================== Dark Mode ==================== */
[data-theme="dark"] .wizard-progress::before {
    background: #30363d;
}

[data-theme="dark"] .wizard-step-circle {
    background: #21262d;
    color: #8b949e;
    border-color: #30363d;
}

[data-theme="dark"] .wizard-step-label {
    color: #8b949e;
}

[data-theme="dark"] .wizard-step-indicator.active .wizard-step-label {
    color: #e6edf3;
}

[data-theme="dark"] .wizard-nav {
    border-top-color: #30363d;
}

[data-theme="dark"] .wizard-nav .btn-prev {
    background: #21262d;
    color: #c9d1d9;
    border-color: #30363d;
}

[data-theme="dark"] .wizard-nav .btn-prev:hover {
    background: #30363d;
}