/* Hide all steps by default (flicker-free) */
.uacf7-step {
    display: none;
}

/* Show first step initially */
.uacf7-step:first-child {
    display: block;
}

.cf7-step-indicators {
    display: flex;
    justify-content: center; /* Center the indicators above the form */
    margin-bottom: 30px;
    gap: 15px; /* Spacing between circles */
}

.cf7-step-indicators span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px; /* Size of the circle */
    height: 35px;
    border-radius: 50%; /* Makes it a circle */
    background-color: #e0e0e0; /* Light gray for inactive steps */
    color: #555; /* Dark gray text for inactive steps */
    font-size: 16px;
    font-weight: bold;
    cursor: default;
    transition: background-color 0.3s, color 0.3s;
}

.cf7-step-indicators span.active {
    background-color: #3672c1; /* Bright blue for the active step */
    color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); /* Subtle glowing effect */
}

/* Optional styling */
.uacf7-buttons {
    margin-top: 20px;
}
/* .uacf7-buttons .uacf7-prev {
    text-align: right !important;
} */

.uacf7-step:first-child .uacf7-next {
    float: right !important;
}
.uacf7-step.step-content.step-start button.uacf7-next {
    float: right !important;
}
.uacf7-step:first-child .uacf7-prev {
    display: none !important; 
}

.uacf7-prev,
.uacf7-next {
    background-color: #3672c1;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    margin-right: 10px;
    border-radius: 5px;
}

.uacf7-prev:hover,
.uacf7-next:hover {
    background-color: #fff;
    color: #3672c1;
}