/* Hide elements */
#gform_1 .gf_progressbar_wrapper, 
.gform_required_legend, 
#gform_1 .gform_ajax_spinner,
#gform_wrapper_1 .gform_validation_errors { 
    display: none !important;
}


@media screen and (min-width: 1024px) {
    .step-title {
        font-size: 1.75rem;
        line-height: 1.28;
    }

    #gform_1 label.gfield_label.gform-field-label, 
    #gform_1 legend.gfield_label {
        font-size: 1.125rem;
        
    } 

}



/* Form styling */
#gform_1 {
    font-family: 'Schibsted Grotesk';
}

#gform_1 .gfield_required_asterisk {
    font-size: 1rem;
    color: #DA356C !important;
}

#gform_1 label.gfield_label.gform-field-label, 
#gform_1 legend.gfield_label {
    font-weight: 600 !important;
    font-size: 1rem;
    margin-bottom: 4px;
    
} 

body .gform_wrapper .gchoice .gform-field-label { 
    font-size: 1rem;
    display: flex;
}


/* Input and select styling */
#gform_1 input[type="text"],
#gform_1 input[type="tel"],
#gform_1 input[type="email"],
#gform_1 input[type="file"],
#gform_1 select {
    height: 50px;
    border-radius: 12px;
    border: 1.5px solid #CBCFD2;
    box-shadow: none;
    font-size: 1rem;
    width: 100%;
    display: flex;
    align-items: center;
}

#gform_1 input[type="file"]::-webkit-file-upload-button {
    border-right: 1.5px solid #CBCFD2 !important;
}


/* Placeholder styling */
#gform_1 input::placeholder,
#gform_1 textarea::placeholder{
    color: #7A828A!important;
    font-size: 1rem;
}

/* Select dropdown styling */
#gform_1 select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTE5IDlMMTIgMTZMNSA5IiBzdHJva2U9IiMxRTIwMjIiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 20px 20px;
    padding-right: 45px;
}


#gform_1 #gform_page_1_6 .gfield_checkbox,
#gform_1 #gform_page_1_7 .gfield_checkbox{
    margin: 0;
}

/* Field descriptions */
#gform_wrapper_1 div.gfield_description {
    color: #35383C;
    font-size: 14px;
    line-height: 1.42;
}

#gform_wrapper_1 div.gfield_description.gfield_validation_message {
    color: red;
}

/* Button styling */
body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_page_footer input[type="submit"] {
    font-size: 18px; 
}

body.step-1 #gform_1 .gform_page_footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;
}

#gform_1 .gform_page_footer {
    justify-content: space-between;
    
}

#gform_1 .gform_page_footer .button {
    border-radius: 8px;
    font-size: 1.125rem !important;
    min-width: 125px;
    padding: 16px;
    position: relative;
    height: 53px;
    background-color: #1E2022;
}

#gform_1 .gform_page_footer .button:hover {
    background-color: #A31E4A;
}


#gform_1 .gform_previous_button {
    background-color: transparent!important;
    text-shadow: none;
    color: #A31E4A;
    border: none;
    box-shadow: none;
    min-width: 125px;
    padding-left: 30px !important;
    display: inline-flex;
    align-items: center;
}

#gform_1 .gform_previous_button {
    background-image: url('/wp-content/themes/hello-elementor/assets/enrollment-form/images/back-icon.svg');
    background-repeat: no-repeat;
    background-position: 6px center;
    background-size: 18px 18px; 
    display: inline-flex;
    align-items: center;
   
}

#gform_1 .gform_next_button {
    background-color: #1E2022;
    color: white;
    background-image: url('/wp-content/themes/hello-elementor/assets/enrollment-form/images/next-icon.svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 25px) center; 
    background-size: 16px 16px;
    text-indent: -25px;
}


#gform_1 .gform_next_button {
    background-color: #1E2022;
    color: white;
}


/* Accordion styling */

.sidebar-counter-lines {
    display: flex;
    gap: 6px;
}   

.sidebar-counter-line {
    height: 4px;
    width: max(16.66667%, 57px);
    background-color: #D9DADC;
    border-radius: 4px;
}

/* Add position relative to all steps that need icons */
body.step-1 .form-steps .form-step:nth-child(1),
body.step-2 .form-steps .form-step:nth-child(1),
body.step-2 .form-steps .form-step:nth-child(2),
body.step-3 .form-steps .form-step:nth-child(-n+3),
body.step-4 .form-steps .form-step:nth-child(-n+4),
body.step-5 .form-steps .form-step:nth-child(-n+5),
body.step-6 .form-steps .form-step:nth-child(-n+6),
body.step-7 .form-steps .form-step:nth-child(-n+7) {
    position: relative;
}

/* Background and border for ACTIVE steps only */
body.step-1 .form-steps .form-step:nth-child(1),
body.step-2 .form-steps .form-step:nth-child(2),
body.step-3 .form-steps .form-step:nth-child(3),
body.step-4 .form-steps .form-step:nth-child(4),
body.step-5 .form-steps .form-step:nth-child(5),
body.step-6 .form-steps .form-step:nth-child(6),
body.step-7 .form-steps .form-step:nth-child(7) {
    border: 1.5px solid #A31E4A;
    background-color: #FCEEF2;
}



/* Base icon styling for all steps with icons */
body.step-1 .form-steps .form-step:nth-child(1)::after,
body.step-2 .form-steps .form-step:nth-child(1)::after,
body.step-2 .form-steps .form-step:nth-child(2)::after,
body.step-3 .form-steps .form-step:nth-child(-n+3)::after,
body.step-4 .form-steps .form-step:nth-child(-n+4)::after,
body.step-5 .form-steps .form-step:nth-child(-n+5)::after,
body.step-6 .form-steps .form-step:nth-child(-n+6)::after,
body.step-7 .form-steps .form-step:nth-child(-n+7)::after {
    content: ""!important;
    position: absolute !important;
    top: 30%!important;
    right: 10px!important;
    width: 24px;
    height: 24px;
    background-size: contain;
}

/* Ongoing icon for ACTIVE steps only */
body.step-1 .form-steps .form-step:nth-child(1)::after,
body.step-2 .form-steps .form-step:nth-child(2)::after,
body.step-3 .form-steps .form-step:nth-child(3)::after,
body.step-4 .form-steps .form-step:nth-child(4)::after,
body.step-5 .form-steps .form-step:nth-child(5)::after,
body.step-6 .form-steps .form-step:nth-child(6)::after,
body.step-7 .form-steps .form-step:nth-child(7)::after {
    background-image: url('/wp-content/themes/hello-elementor/assets/enrollment-form/images/ongoing-icon.svg');
    background-repeat: no-repeat;
    background-position: center;
}

/* Completed icon for COMPLETED steps only */
body.step-2 .form-steps .form-step:nth-child(1)::after,
body.step-3 .form-steps .form-step:nth-child(1)::after,
body.step-3 .form-steps .form-step:nth-child(2)::after,
body.step-4 .form-steps .form-step:nth-child(1)::after,
body.step-4 .form-steps .form-step:nth-child(2)::after,
body.step-4 .form-steps .form-step:nth-child(3)::after,
body.step-5 .form-steps .form-step:nth-child(1)::after,
body.step-5 .form-steps .form-step:nth-child(2)::after,
body.step-5 .form-steps .form-step:nth-child(3)::after,
body.step-5 .form-steps .form-step:nth-child(4)::after,
body.step-6 .form-steps .form-step:nth-child(1)::after,
body.step-6 .form-steps .form-step:nth-child(2)::after,
body.step-6 .form-steps .form-step:nth-child(3)::after,
body.step-6 .form-steps .form-step:nth-child(4)::after,
body.step-6 .form-steps .form-step:nth-child(5)::after,
body.step-7 .form-steps .form-step:nth-child(1)::after,
body.step-7 .form-steps .form-step:nth-child(2)::after,
body.step-7 .form-steps .form-step:nth-child(3)::after,
body.step-7 .form-steps .form-step:nth-child(4)::after,
body.step-7 .form-steps .form-step:nth-child(5)::after,
body.step-7 .form-steps .form-step:nth-child(6)::after {
    background-image: url('/wp-content/themes/hello-elementor/assets/enrollment-form/images/complete-icon.svg');
    background-repeat: no-repeat;
    background-position: center;
}

/* Completed icon for COMPLETED steps only */
body.step-2 .form-steps .form-step:nth-child(1),
body.step-3 .form-steps .form-step:nth-child(1),
body.step-3 .form-steps .form-step:nth-child(2),
body.step-4 .form-steps .form-step:nth-child(1),
body.step-4 .form-steps .form-step:nth-child(2),
body.step-4 .form-steps .form-step:nth-child(3),
body.step-5 .form-steps .form-step:nth-child(1),
body.step-5 .form-steps .form-step:nth-child(2),
body.step-5 .form-steps .form-step:nth-child(3),
body.step-5 .form-steps .form-step:nth-child(4),
body.step-6 .form-steps .form-step:nth-child(1),
body.step-6 .form-steps .form-step:nth-child(2),
body.step-6 .form-steps .form-step:nth-child(3),
body.step-6 .form-steps .form-step:nth-child(4),
body.step-6 .form-steps .form-step:nth-child(5),
body.step-7 .form-steps .form-step:nth-child(1),
body.step-7 .form-steps .form-step:nth-child(2),
body.step-7 .form-steps .form-step:nth-child(3),
body.step-7 .form-steps .form-step:nth-child(4),
body.step-7 .form-steps .form-step:nth-child(5),
body.step-7 .form-steps .form-step:nth-child(6) {
    border:1.5px solid #B0B5BA;
    background-color: #FFF;
}


body.step-1  .step-1-contents{
    padding: 0 30px;
    max-width: 825px;
    
}

body.step-1  .step-1-contents p{
    font-size: 1.125rem;
    line-height: 28px;
    color: #1E2022;
    margin-bottom: 20px;
}

body.step-1  .step-1-contents ul {
    padding: 6px 30px;
    display: flex;
    gap: 4px;
    flex-direction: column;
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 1.55rem;
}
 
.gform_fields {
    row-gap: 24px !important;
}

body.step-6 .gform_fields,
body.step-7 .gform_fields {
    row-gap: 16px !important;
}

body.step-7 #field_1_214,
body.step-7 #field_1_202 {
    margin-top: 16px;
}
#gform_1 .custom-label {
    font-weight: 600 !important;
    font-size: 1rem;
    color: #112337;
    margin-top: 10px;
}

.gform_fields .gfield_radio ,
.gform_fields .gfield_checkbox {
    margin-top: 10px;
    margin-bottom: 6px;
}
body.step-1  .step-1-contents strong{
    font-weight: 600;
}




.step-title span {
    color: #A31E4A;
}

.step-title {
    color: #0A0A0A;
    font-weight: 600;
    font-family:  "Schibsted Grotesk" ;
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.28;
}


#gform_1  .accordion-content{
    grid-column: 1 / -1;
    row-gap: 25px;
    display: grid;
    column-gap: 25px;
}


#gform_1 .gsection {
    border-block-end: none!important;
    border-block-start: 1.5px solid #CBCFD2!important;
    
}
#gform_1  .gsection_title {
    display: flex;
    justify-content: space-between;
    font-size: 1.5rem;
    line-height: 1.33;
    margin: 0;
    padding: 20px 0 0;
}

#gform_1 .accordion-header .accordion-arrow {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTE5IDlMMTIgMTZMNSA5IiBzdHJva2U9IiMxRTIwMjIiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 24px;
    height: 24px;
    display: inline-block;
}
#gform_1  .accordion-header.accordion-open .accordion-arrow {
    transform: rotate(180deg); 
}

/* Hide the default checkbox */
.gchoice .gfield-choice-input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    width: 20px;
    height: 20px;
    margin: 0;
}

/* Create custom checkbox appearance */
.gfield_checkbox .gform-field-label {
    margin-left: 0;
    cursor: pointer; 
}

#gform_1 .custom-label {
    font-weight: 600 !important;
    font-size: 1rem;
    color: #112337;
}
.gfield_checkbox .gform-field-label::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 12px !important;
    border: 2px solid #ccc !important;
    border-radius: 4px !important;
    vertical-align: top !important;
    flex-shrink: 0 !important;
    position: relative;
}

/* Checked state - add checkmark */
.gfield_checkbox .gfield-choice-input[type="checkbox"]:checked + .gform-field-label::before {
    background-color: #A31E4A; 
    border-color: #A31E4A;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDEyIDEwIiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTEuNSA1LjdMNC4zNTcxNCA4LjVMMTAuNSAxLjUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIvPgo8L3N2Zz4=');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px 7px;
}

/* Hide the default radio button */
.gchoice .gfield-choice-input[type="radio"] {
    opacity: 0;
    position: absolute;
    width: 20px;
    height: 20px;
    margin: 0;
}

/* Create custom radio button appearance */
.gfield_radio .gform-field-label {
    margin-left: 0;
    cursor: pointer;
}

.gfield_radio .gform-field-label::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border: 2px solid #ccc;
    border-radius: 50%; /* Makes it circular */
    background-color: #fff;
    vertical-align: middle;
    position: relative;
}

/* Checked state - add filled circle */
.gfield_radio .gfield-choice-input[type="radio"]:checked + .gform-field-label::before {
    background-color: #fff;
    border-color: #A31E4A;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KPHJlY3QgeD0iMSIgeT0iMSIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iOSIgc3Ryb2tlPSIjQTMxRTRBIiBzdHJva2Utd2lkdGg9IjIiLz4KPHJlY3QgeD0iNSIgeT0iNSIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiByeD0iNSIgZmlsbD0iI0EzMUU0QSIvPgo8L3N2Zz4=');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

.gchoice .gform-field-label {
    margin-left: 0!important;
}


@media screen and (max-width: 1023px) {
    #gform_1 .gform_page_footer .button {
        width: 100%;
    }

    #gform_1 .gform_page_footer {
        flex-direction: column-reverse;
        margin-top: 2rem;
    }

    #gform_1 .gform_next_button {
        background-position: calc(100% - 140px) center; 
    }
    #gform_1 .gform_previous_button {
        background-position: calc(100% - 218px) center; 
    }

    body.step-1  .step-1-contents {
        padding: 0;
    }
}


@media (min-width: 392px) and (max-width: 600px) {

    #gform_1 .gform_next_button {
        background-position: calc(100% - 156px) center; 
    }
    #gform_1 .gform_previous_button {
        background-position: calc(100% - 238px) center; 
    }

}





.confirmation-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 500px;
}