/* Gravity Forms - Elementor Style Multi-Step Progress Bar */

/* Hide default Gravity Forms progress bar if present */
body .gform_wrapper .gf_progressbar_wrapper {
    display: none !important;
}

/* Main container for the progress steps */
body .gform_wrapper .gf_page_steps {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    margin: 0 0 40px 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Individual step container */
body .gform_wrapper .gf_page_steps .gf_step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    text-align: center !important;
    z-index: 2 !important;
}

/* Step number circles */
body .gform_wrapper .gf_page_steps .gf_step:before {
    content: "1" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background-color: #6c757d !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    margin-bottom: 12px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 3 !important;
}

/* Step 1 */
body .gform_wrapper .gf_page_steps .gf_step:nth-child(1):before {
    content: "1" !important;
}

/* Step 2 */
body .gform_wrapper .gf_page_steps .gf_step:nth-child(2):before {
    content: "2" !important;
}

/* Step 3 */
body .gform_wrapper .gf_page_steps .gf_step:nth-child(3):before {
    content: "3" !important;
}

/* Step 4 */
body .gform_wrapper .gf_page_steps .gf_step:nth-child(4):before {
    content: "4" !important;
}

/* Step 5 */
body .gform_wrapper .gf_page_steps .gf_step:nth-child(5):before {
    content: "5" !important;
}

/* Step labels */
body .gform_wrapper .gf_page_steps .gf_step {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: white !important;
    line-height: 1.3 !important;
    text-transform: none !important;
}

/* Active step styling */
body .gform_wrapper .gf_page_steps .gf_step_active:before {
    background-color: #f4d03f !important; /* Golden yellow like your design */
    color: #333 !important;
    transform: scale(1.05) !important;
}

body .gform_wrapper .gf_page_steps .gf_step_active {
    color: #f4d03f !important;
    font-weight: 600 !important;
}

/* Completed steps (previous steps) */
body .gform_wrapper .gf_page_steps .gf_step_completed:before {
    background-color: #f4d03f !important;
    color: #333 !important;
}

body .gform_wrapper .gf_page_steps .gf_step_completed {
    color: #f4d03f !important;
}

/* Pending/future steps */
body .gform_wrapper .gf_page_steps .gf_step_pending:before {
    background-color: #6c757d !important;
    color: white !important;
}

body .gform_wrapper .gf_page_steps .gf_step_pending {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Connection lines between steps */
body .gform_wrapper .gf_page_steps .gf_step:not(:last-child):after {
    content: "" !important;
    position: absolute !important;
    top: 25px !important;
    right: -50% !important;
    width: calc(100% - 50px) !important;
    height: 3px !important;
    background-color: #6c757d !important;
    z-index: 1 !important;
    transform: translateY(-50%) !important;
}

/* Active/completed connection lines */
body .gform_wrapper .gf_page_steps .gf_step_completed:not(:last-child):after,
body .gform_wrapper .gf_page_steps .gf_step_active:not(:last-child):after {
    background-color: #f4d03f !important;
}

/* Responsive design for tablets */
@media (max-width: 768px) {
    body .gform_wrapper .gf_page_steps .gf_step:before {
        width: 45px !important;
        height: 45px !important;
        font-size: 16px !important;
    }
    
    body .gform_wrapper .gf_page_steps .gf_step {
        font-size: 14px !important;
    }
    
    body .gform_wrapper .gf_page_steps .gf_step:not(:last-child):after {
        top: 22px !important;
        width: calc(100% - 45px) !important;
    }
}

/* Responsive design for mobile */
@media (max-width: 480px) {
    body .gform_wrapper .gf_page_steps {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    body .gform_wrapper .gf_page_steps .gf_step {
        flex: 0 1 48% !important;
        margin: 10px 1% !important;
    }
    
    body .gform_wrapper .gf_page_steps .gf_step:not(:last-child):after {
        display: none !important;
    }
    
    body .gform_wrapper .gf_page_steps .gf_step:before {
        width: 40px !important;
        height: 40px !important;
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    
    body .gform_wrapper .gf_page_steps .gf_step {
        font-size: 12px !important;
    }
}

/* Alternative approach if the above doesn't work - using specific step targeting */
/* Step 1 Active */
body .gform_wrapper .gf_page_steps .gf_step:first-child.gf_step_active:before {
    background-color: #f4d03f !important;
    color: #333 !important;
}

/* Step 2 Active */
body .gform_wrapper .gf_page_steps .gf_step:nth-child(2).gf_step_active:before {
    background-color: #f4d03f !important;
    color: #333 !important;
}

/* Step 3 Active */
body .gform_wrapper .gf_page_steps .gf_step:nth-child(3).gf_step_active:before {
    background-color: #f4d03f !important;
    color: #333 !important;
}

/* Step 4 Active */
body .gform_wrapper .gf_page_steps .gf_step:nth-child(4).gf_step_active:before {
    background-color: #f4d03f !important;
    color: #333 !important;
}

/* Ensure proper spacing and alignment */
body .gform_wrapper .gf_page_steps {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Optional: Add some padding to the main form container */
body .gform_wrapper {
    padding-top: 20px !important;
}