/**
 * Progress Indicators Component
 * 
 * Visual indicators for form completion progress
 * 
 * Version: 1.0
 * Last Updated: 2025-01-27
 */

/* ==========================================================================
   FORM PROGRESS INDICATOR
   ========================================================================== */

.form-progress-indicator {
    display: flex;
    align-items: center;
    gap: var(--booking-space-md, 16px);
    padding: var(--booking-space-lg, 20px);
    background: var(--booking-surface, #f9fafb);
    border: 1px solid var(--booking-border, #e5e7eb);
    border-radius: var(--booking-radius-lg, 12px);
    margin-bottom: var(--booking-space-xl, 24px);
}

[data-theme="dark"] .form-progress-indicator {
    background: var(--color-background-secondary, #1f2937);
    border-color: var(--color-border, #374151);
}

.form-progress-indicator__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--booking-primary-bg, rgba(12, 35, 64, 0.1));
    border-radius: var(--booking-radius-full, 50%);
    color: var(--booking-primary, #0c2340);
    flex-shrink: 0;
}

[data-theme="dark"] .form-progress-indicator__icon {
    background: rgba(212, 175, 55, 0.15);
    color: var(--accent-color, #d4af37);
}

.form-progress-indicator__content {
    flex: 1;
    min-width: 0;
}

.form-progress-indicator__text {
    font-size: var(--booking-text-sm, 14px);
    color: var(--booking-text-secondary, #6b7280);
    margin: 0 0 var(--booking-space-xs, 8px) 0;
}

[data-theme="dark"] .form-progress-indicator__text {
    color: var(--color-text-secondary, #d1d5db);
}

.form-progress-indicator__bar {
    width: 100%;
    height: 6px;
    background: var(--booking-surface-hover, #f3f4f6);
    border-radius: var(--booking-radius-full, 9999px);
    overflow: hidden;
}

[data-theme="dark"] .form-progress-indicator__bar {
    background: var(--color-background-tertiary, #111827);
}

.form-progress-indicator__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--booking-primary, #0c2340) 0%, var(--booking-primary-hover, #0a1d33) 100%);
    border-radius: var(--booking-radius-full, 9999px);
    transition: width var(--booking-transition-base, 0.3s ease);
}

[data-theme="dark"] .form-progress-indicator__fill {
    background: linear-gradient(90deg, var(--accent-color, #d4af37) 0%, #c5a030 100%);
}

/* Field completion indicator */
.field-completion-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--booking-space-xs, 8px);
    margin-left: var(--booking-space-xs, 8px);
    font-size: var(--booking-text-xs, 12px);
    color: var(--booking-success, #2ecc71);
}

.field-completion-indicator i {
    font-size: var(--booking-text-sm, 14px);
}

.field-completion-indicator--error {
    color: var(--booking-error, #e74c3c);
}

/* Section completion indicator */
.section-completion-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--booking-space-xs, 8px);
    padding: 4px 12px;
    background: var(--booking-success-bg, rgba(46, 204, 113, 0.1));
    border-radius: var(--booking-radius-full, 9999px);
    color: var(--booking-success, #2ecc71);
    font-size: var(--booking-text-xs, 12px);
    font-weight: var(--booking-font-medium, 500);
}

.section-completion-indicator i {
    font-size: var(--booking-text-sm, 14px);
}

/* Required field indicator */
.required-indicator {
    color: var(--booking-error, #e74c3c);
    font-weight: var(--booking-font-bold, 700);
    margin-left: 2px;
}

/* Optional badge */
.optional-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--booking-info-bg, rgba(52, 152, 219, 0.1));
    color: var(--booking-info, #3498db);
    border-radius: var(--booking-radius-full, 9999px);
    font-size: var(--booking-text-xs, 12px);
    font-weight: var(--booking-font-medium, 500);
    margin-left: var(--booking-space-xs, 8px);
}

[data-theme="dark"] .optional-badge {
    background: rgba(52, 152, 219, 0.2);
    color: #60a5fa;
}