/* ============================================================================
 * PROGRESS COMPONENT STYLES
 * Progress indicators, navigation dots, and status displays
 * ============================================================================ */

/* ========================================
 * PROGRESS ELEMENT CONTAINER
 * Main progress element layout and positioning
 * ======================================== */

.progress-element {
    position: absolute;
    z-index: 402;
}

.progress-element[data-grid-position] {
    position: absolute;
    z-index: var(--z-elevated);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========================================
 * PROGRESS DOTS CONTAINER
 * Container for progress navigation dots
 * ======================================== */

.progress-dots-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 10px;
    padding: 10px;
}

/* ========================================
 * PROGRESS DOTS
 * Individual progress navigation dots
 * ======================================== */

.progress-dot {
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-align: center;
    box-sizing: border-box;
}

.progress-dot:hover {
    transform: scale(1.1);
}

.progress-dot:focus {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

.progress-dot.active {
    background-color: var(--color-button-next);
    border: 3px solid var(--color-white);
    box-shadow: 0 0 10px rgba(255, 171, 64, 0.5);
}

.progress-dot.inactive {
    background-color: #888888;
    border: 3px solid var(--color-white);
}

/* ========================================
 * PROGRESS DOTS STATES
 * Different states for progress dots
 * ======================================== */

.progress-dot.pending {
    opacity: 0.7;
    cursor: wait;
}

.progress-dot.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
 * PROGRESS ANIMATIONS
 * Progress-specific animations and effects
 * ======================================== */

.progress-dot.pulsate {
    animation: pulsate 1.5s ease-in-out infinite;
}

.progress-dot.glow {
    animation: glow 2s ease-in-out infinite alternate;
    box-shadow: 0 0 10px currentColor;
}

/* ========================================
 * PROGRESS ACCESSIBILITY
 * Screen reader and accessibility support
 * ======================================== */

.progress-dots-container[role="navigation"] {
    aria-label: 'Page navigation';
}

.progress-dot[aria-current="page"] {
    background-color: var(--color-button-next);
    border-color: var(--color-white);
    box-shadow: 0 0 10px rgba(255, 171, 64, 0.5);
}