/* Adım göstergesi (auth/steps partial) */

.sp-wrapper {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 20px 24px 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

.sp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.sp-counter {
    font-size: 11px;
    font-weight: 700;
    color: var(--bank-primary, #E2251D);
    letter-spacing: .4px;
    text-transform: uppercase;
}
.sp-pct {
    font-size: 11px;
    font-weight: 500;
    color: #a1a5b7;
}

.sp-bar-track {
    width: 100%;
    height: 3px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 20px;
}
.sp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #50cd89, #1bc5bd);
    border-radius: 4px;
    transition: width .5s ease;
}

.sp-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.sp-line {
    flex: 1;
    height: 2px;
    margin-top: 22px;
    min-width: 8px;
    max-width: 56px;
    border-radius: 2px;
    transition: background .4s;
}
.sp-line--done    { background: #50cd89; }
.sp-line--pending { background: #e8e8e8; }

.sp-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    width: 68px;
}

.sp-bubble {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    border: 2px solid transparent;
    position: relative;
    transition: all .3s;
}

.sp-num {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.sp-label {
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    line-height: 1.35;
    transition: color .3s;
}

.sp-step--done .sp-bubble {
    background: #f0fdf6;
    border-color: #50cd89;
    color: #50cd89;
}
.sp-step--done .sp-label { color: #50cd89; }

.sp-step--current .sp-bubble {
    background: var(--bank-primary, #E2251D);
    border-color: var(--bank-primary, #E2251D);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(226,37,29,.15), 0 4px 14px rgba(226,37,29,.30);
}
.sp-step--current .sp-bubble i {
    color: #fff !important;
    font-size: 22px !important;
    line-height: 1;
}
.sp-step--current .sp-label {
    color: var(--bank-primary, #E2251D);
    font-weight: 700;
    font-size: 10.5px;
}

.sp-step--pending .sp-bubble {
    background: #f8f9fa;
    border-color: #dde1e7;
    color: #c4c6d0;
    border-style: dashed;
}
.sp-step--pending .sp-label { color: #c4c6d0; }

.sp-step--onay.sp-step--reviewing .sp-bubble {
    background: #fff8e1;
    border-color: #f6c90e;
    color: #d4a017;
    box-shadow: 0 0 0 3px rgba(246,201,14,.15);
}
.sp-step--onay.sp-step--reviewing .sp-bubble i { color: #d4a017 !important; font-size: 20px !important; }
.sp-step--onay.sp-step--reviewing .sp-label   { color: #c49a00; font-weight: 700; }

.sp-step--onay.sp-step--approved .sp-bubble {
    background: #f0fdf6;
    border-color: #50cd89;
    color: #50cd89;
    box-shadow: 0 0 0 3px rgba(80,205,137,.15);
}
.sp-step--onay.sp-step--approved .sp-bubble i { color: #50cd89 !important; font-size: 20px !important; }
.sp-step--onay.sp-step--approved .sp-label   { color: #2da870; font-weight: 700; }

.sp-step--onay.sp-step--rejected .sp-bubble {
    background: #fff4e5;
    border-color: #ff9800;
    color: #e65100;
    box-shadow: 0 0 0 3px rgba(255,152,0,.15);
}
.sp-step--onay.sp-step--rejected .sp-bubble i { color: #e65100 !important; font-size: 20px !important; }
.sp-step--onay.sp-step--rejected .sp-label   { color: #e65100; font-weight: 700; }

.sp-step--onay.sp-step--updated .sp-bubble {
    background: #e8f4fd;
    border-color: #1a9de3;
    color: #1a9de3;
    box-shadow: 0 0 0 3px rgba(26,157,227,.15);
}
.sp-step--onay.sp-step--updated .sp-bubble i { color: #1a9de3 !important; font-size: 20px !important; }
.sp-step--onay.sp-step--updated .sp-label   { color: #1580be; font-weight: 700; }

@media (max-width: 560px) {
    .sp-wrapper  { padding: 14px 10px 12px; }
    .sp-step     { width: 48px; }
    .sp-bubble   { width: 34px; height: 34px; font-size: 15px; }
    .sp-num      { font-size: 12px; }
    .sp-label    { font-size: 8.5px; }
    .sp-line     { margin-top: 17px; min-width: 4px; max-width: 16px; }
}