/* ================================================ */
/* WIZARD / STYLES                      */
/* ================================================ */

.wizard-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    border: 2px solid #dee2e6;
    background: #fff;
    color: #adb5bd;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

/* Active step: #0d6efd (primary blue) */
.wizard-step-circle.wizard-active {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
    box-shadow: 0 3px 10px rgba(13, 110, 253, 0.4);
}

/* Done step: #5f9efb (lighter blue) */
.wizard-step-circle.wizard-done {
    background: #5f9efb;
    border-color: #5f9efb;
    color: #fff;
}

/* Pending step: default gray */
.wizard-step-circle.wizard-pending {
    background: #fff;
    border-color: #dee2e6;
    color: #adb5bd;
}

/* Clickable step (completed step, linked back to its page) */
.wizard-step-circle.wizard-clickable {
    cursor: pointer;
}

.wizard-clickable-link:hover .wizard-step-circle {
    box-shadow: 0 3px 10px rgba(95, 158, 251, 0.5);
    transform: scale(1.08);
}

.wizard-clickable-link:hover .wizard-label {
    color: #0d6efd !important;
}

/* Check icon swaps to a pen/edit icon on hover, to signal "click to revise" */
.wizard-icon-edit {
    display: none;
}

.wizard-clickable-link:hover .wizard-icon-check {
    display: none;
}

.wizard-clickable-link:hover .wizard-icon-edit {
    display: inline-block;
}

/* Connector line */
.wizard-connector {
    height: 2px;
    flex: 1;
    background: #dee2e6;
    margin: 0 8px;
    position: relative;
    top: 17px;
    z-index: 0;
    transition: background 0.2s ease;
}

/* Done connector: #5f9efb */
.wizard-connector.wizard-connector-done {
    background: #5f9efb;
}

/* Label styling */
.wizard-label {
    margin-top: 6px;
    font-size: 11px;
    text-align: center;
}

/* Text utilities to match the theme */
.text-primary {
    color: #0d6efd !important;
}
.fw-bold {
    font-weight: bold !important;
}
.text-muted {
    color: #adb5bd !important;
}