/* ============================================================================
   ONBOARDING STYLES
   ============================================================================ */

/* Onboarding Header */
.onboarding-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.onboarding-icon,
.logo-large {
    font-size: 64px;
    margin-bottom: var(--spacing-lg);
}

.onboarding-header h1 {
    font-size: var(--font-3xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.onboarding-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.onboarding-subtitle {
    font-size: var(--font-base);
    color: var(--color-text-secondary);
}

/* Progress Indicator */
.onboarding-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-2xl);
    padding: 0 var(--spacing-2xl);
}

.progress-step {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    color: var(--color-text-tertiary);
    border: 2px solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-md);
}

.progress-step.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.progress-step.complete {
    background: var(--color-success);
    color: white;
    border-color: var(--color-success);
}

.progress-line {
    flex: 1;
    height: 2px;
    background: var(--color-border-light);
    max-width: 60px;
}

.progress-line.complete {
    background: var(--color-success);
}

/* Step Info */
.onboarding-step-info {
    margin-bottom: var(--spacing-2xl);
}

.onboarding-step-info h2 {
    font-size: var(--font-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.onboarding-step-info p {
    font-size: var(--font-md);
    color: var(--color-text-secondary);
}

/* Child Field Group */
.child-field-group {
    margin-bottom: var(--spacing-lg);
}

/* Form Row */
.form-row {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-end;
}

/* Compact Form */
.form-compact {
    background: var(--color-bg-secondary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
}

.form-compact .form-group {
    margin-bottom: 0;
}

.form-group-action {
    display: flex;
    align-items: flex-end;
}

.btn-compact {
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
}

/* ============================================================================
   USER VERIFICATION CARD
   ============================================================================ */

.confirmed-user-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-radius: var(--radius-lg);
    padding: 14px var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.confirmed-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.confirmed-name {
    font-size: var(--font-lg);
    font-weight: 600;
    color: #166534;
}

.confirmed-phone {
    font-size: var(--font-md);
    color: #15803d;
}

.verified-badge {
    font-size: var(--font-xs);
    color: #22c55e;
    font-weight: 500;
}