/* Job post progress bar styles */
#job-post-progress-container {
    position: sticky;
    top: 0;
    height: 0; /* Zero height so it doesn't push content */
    z-index: 999;
    pointer-events: none; /* Allow clicks to pass through empty space */
}

#job-post-progress {
    position: relative;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
    pointer-events: auto; /* Re-enable clicks on actual content */
}

#job-post-progress-container.is-visible #job-post-progress {
    opacity: 1;
    max-height: 60px;
}

#job-post-progress .progress {
    height: 0.75rem;
    border-radius: 6px;
}

#job-post-progress .progress::-webkit-progress-bar {
    background-color: rgba(245, 245, 245, 0.8);
    border-radius: 4px;
}

#job-post-progress .progress::-webkit-progress-value {
    background-color: #3273dc;
    border-radius: 4px;
    transition: width 0.3s ease;
}

#job-post-progress .progress::-moz-progress-bar {
    background-color: #3273dc;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Submit button styles to prevent layout shift */
button[type="submit"].button {
    min-height: 2.5em;
    position: relative;
}

button[type="submit"].button.is-loading {
    pointer-events: none;
}

/* Smooth fade-out animation for button containers */
.field.is-fading-out {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    opacity: 0;
    transform: translateY(-5px);
    pointer-events: none;
}

/* Continue button fade-in animation */
.continue-btn {
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}