/* ==========================================================================
   Register — layout & stepper
   ========================================================================== */

.register-wrapper {
    max-width: 1140px;
}

.register-stepper {
    gap: 0;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
}

.step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    background-color: var(--bs-border-color);
    color: var(--bs-secondary);
    transition: background-color .2s, color .2s;
}

.step-item.active .step-circle {
    background-color: var(--bs-primary);
    color: #fff;
}

.step-label {
    font-size: .78rem;
    color: var(--bs-secondary);
    font-weight: 500;
    transition: color .2s;
}

.step-item.active .step-label {
    color: var(--bs-primary);
    font-weight: 600;
}

.step-line {
    flex: 1;
    height: 2px;
    min-width: 60px;
    background-color: var(--bs-border-color);
    margin: 0 .5rem;
    margin-bottom: 1.1rem;
    transition: background-color .2s;
}

.step-line.done {
    background-color: var(--bs-primary);
}

/* ==========================================================================
   Payment method selector (step 3)
   ========================================================================== */

.pm-card {
    border-color: #dee2e6 !important;
    background: #fff;
    color: #6c757d;
    transition: border-color .15s, box-shadow .15s, color .15s, background .15s;
}
.pm-card .pm-check { opacity: 0; transition: opacity .15s; }
.pm-card .pm-desc  { color: #adb5bd; transition: color .15s; }
.pm-card:hover {
    border-color: #adb5bd !important;
    background: #f8f9fa;
    color: #495057;
}
.btn-check:checked + .pm-card {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 1px var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .04);
    color: var(--bs-primary);
}
.btn-check:checked + .pm-card .pm-check { opacity: 1; }
.btn-check:checked + .pm-card .pm-icon  { color: var(--bs-primary); }
.btn-check:checked + .pm-card .pm-desc  { color: rgba(var(--bs-primary-rgb), .6); }

[data-bs-theme=dark] .pm-card {
    border-color: var(--bs-border-color) !important;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
}
[data-bs-theme=dark] .pm-card:hover {
    border-color: var(--bs-secondary-color) !important;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}
[data-bs-theme=dark] .btn-check:checked + .pm-card {
    background: rgba(var(--bs-primary-rgb), .08);
}

/* ==========================================================================
   Password strength checklist (step 1)
   ========================================================================== */

.password-strength {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .75rem;
}

.req-item {
    font-size: .78rem;
    color: var(--bs-secondary);
    transition: color .2s;
}

.req-item.req-valid {
    color: var(--bs-success);
}

.req-item.req-invalid {
    color: var(--bs-danger);
}