/* Styling Eindewerken form */
.gform_wrapper .binding-image {
    display: block;
    max-width: 200px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

.gchoice:has(input:checked) .binding-image {
    border: 2px solid var(--pink);
}

#field_6_31 .option-description {
    margin-left: 2.9em;
    font-size: 0.95em;
    color: var(--pink);
    line-height: 1.4;
}

#field_6_31 .option-description ul {
    margin: 0.3em 0 0 0;
    padding-left: 1em;
    list-style-type: disc;
}


#gform_6 .gfield_radio label,
#gform_6 .gfield_checkbox label {
    color: var(--pink);
    font-weight: 500;
}

#gform_6 #input_6_31 label {
    font-weight: 700;
    font-size: 18px;
}


#gform_6 .gfield_label,
#gform_6 legend.gfield_label {
    font-size: 22px;
    color: var(--pink);
    font-weight: 700;
}

#gform_6 input[type="submit"],
#gform_6 .gform_next_button {
    background-color: var(--pink) !important;
    border-color: var(--pink) !important;
    color: white !important;
}


#gform_6 input[type="submit"]:hover,
#gform_6 .gform_next_button:hover {
    background-color: var(--purple) !important;
    border-color: var(--purple) !important;
}

#gform_6 .gform_previous_button {
    background-color: var(--purple) !important;
    border-color: var(--purple) !important;
    color: white !important;
}

#gform_6 .gform_previous_button:hover {
    background-color: var(--pink) !important;
    border-color: var(--pink) !important;
}


#gform_6 legend.gfield_label,
#gform_6 .gfield_label.gform-field-label,
#gform_6 p {
    color: var(--pink) !important;
    font-weight: 800 !important;
}

#gform_6 .gform-field-label--type-sub,
#gfield_upload_rules_6_24 {
    color: var(--pink) !important;
}

#gform_6 input[type="text"],
#gform_6 input[type="number"],
#gform_6 input[type="email"],
#gform_6 input[type="tel"],
#gform_6 input[type="url"],
#gform_6 textarea {
    border-color: var(--pink) !important;
    color: var(--pink) !important;
}

#gform_6 input[type="number"]:focus,
#gform_6 input[type="text"]:focus,
#gform_6 input[type="email"]:focus,
#gform_6 input[type="tel"]:focus,
#gform_6 input[type="radio"]:focus,
#gform_6 input[type="button"]:focus,
#gform_6 input[type="url"]:focus,
#gform_6 textarea:focus {
    outline: none;
    box-shadow: none;
}

#gf_progressbar_wrapper_6 .gf_progressbar_title {
    color: var(--pink) !important;
}

#gf_progressbar_wrapper_6 .gf_progressbar .percentbar_blue {
    background-color: var(--pink) !important;
}

#gform_6 input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 2px solid var(--pink);
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    position: relative;
    cursor: pointer;
     flex-shrink: 0 !important;
}

#gform_6 input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    background-color: var(--blue);
    border-radius: 50%;
}

#gform_6 #input_6_4 {
    max-width: 75px;
    width: 100%;
}

#gform_6 #input_6_34 {
    max-width: 75px;
    width: 100%;
}

.formaat-column .gform-page-footer {
    margin-top: 2rem !important;
}

.formaat-column #field_6_13 {
    margin-top: 2rem !important;
}

.formaat-column .totaalbedrag {
    margin-top: 1rem !important;
}

#field_6_13.gfield--type-section {
    --gf-field-section-border-color: var(--pink);
}

.gform_wrapper .formaat-image {
    max-width: 150px;
}

#field_6_4 .gfield_description.instruction,
#field_6_34 .gfield_description.instruction {
    display: none !important;
}

#field_6_4 .ginput_container_number,
#field_6_34 .ginput_container_number {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#field_6_4 .ginput_container_number span,
#field_6_34 .ginput_container_number span {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 0;
}

.formaat-column {
    position: relative !important;
}

.formaat-sticky-inner {
    position: sticky !important;
    top: 3rem !important;
    /* or whatever offset you want */
    z-index: 10 !important;
    /* Make sure it’s above other elements */
}




/* Styling drukwerk form */
#gform_8 .gfield_label,
#gform_8 legend.gfield_label {
    font-size: 22px;
    color: var(--orange) !important;
    font-weight: 700;
}

#gform_8 .gfield_radio label,
#gform_8 .gfield_checkbox label {
    color: var(--orange);
    font-weight: 500;
}

#gform_8 .gform-field-label--type-sub,
#gfield_upload_rules_8_24 {
    color: var(--orange) !important;
}

#gform_8 input[type="text"],
#gform_8 input[type="number"],
#gform_8 input[type="email"],
#gform_8 input[type="tel"],
#gform_8 input[type="url"],
#gform_8 textarea {
    border-color: var(--orange) !important;
    color: var(--orange) !important;
}

#gform_8 input[type="number"]:focus,
#gform_8 input[type="text"]:focus,
#gform_8 input[type="email"]:focus,
#gform_8 input[type="tel"]:focus,
#gform_8 input[type="radio"]:focus,
#gform_8 input[type="checkbox"]:focus,
#gform_8 input[type="button"]:focus,
#gform_8 input[type="url"]:focus,
#gform_8 textarea:focus {
    outline: none;
    box-shadow: none;
}

#gf_progressbar_wrapper_8 .gf_progressbar_title {
    color: var(--orange) !important;
}

#gf_progressbar_wrapper_8 .gf_progressbar .percentbar_blue {
    background-color: var(--orange) !important;
}

#gform_8 input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 2px solid var(--orange);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}

#gform_8 input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    background-color: var(--blue);
    border-radius: 50%;
}

#gform_8 input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: 2px solid var(--orange);
    width: 18px;
    height: 18px;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}

#gform_8 input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    background-color: var(--blue);
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


#gform_8 input[type="submit"],
#gform_8 .gform_next_button {
    background-color: var(--purple) !important;
    border-color: var(--purple) !important;
    color: white !important;
}


#gform_8 input[type="submit"]:hover,
#gform_8 .gform_next_button:hover {
    background-color: var(--yellow) !important;
    border-color: var(--yellow) !important;
}

#gform_8 .gform_previous_button {
    background-color: var(--orange) !important;
    border-color: var(--orange) !important;
    color: white !important;
}

#gform_8 .gform_previous_button:hover {
    background-color: var(--yellow) !important;
    border-color: var(--yellow) !important;
}

.tooltip-inner {
    background-color: var(--orange);
    color: #fff;
    padding: 0.75rem !important;
}

.tooltip-arrow::before {
    border-top-color: var(--orange) !important;
}

.tooltip.bs-tooltip-top .tooltip-arrow {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.tooltip-inner p {
    margin: 0 !important;
}

/* Apply only to the field that has gf_custom_two_columns */
.gf_custom_two_columns .gf-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.gf_custom_two_columns .gf-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
}

.gf_custom_two_columns .gf-column .gchoice {
    width: 100% !important;
}




/* Styling textiel form */

#gform_9 .gfield_label,
#gform_9 legend.gfield_label {
    font-size: 22px;
    color: white !important;
    font-weight: 700;
}

#gform_9 .gfield_radio label,
#gform_9 .gfield_checkbox label {
    color: white;
    font-weight: 500;
}

#gform_9 .gform-field-label--type-sub,
#gfield_upload_rules_9_24 {
    color: white !important;
}


#gform_9 input[type="text"],
#gform_9 input[type="number"],
#gform_9 input[type="email"],
#gform_9 input[type="tel"],
#gform_9 input[type="url"],
#gform_9 textarea {
    border-color: white !important;
    color: white !important;
    background-color: transparent !important;
}

#gform_9 input[type="number"]:focus,
#gform_9 input[type="text"]:focus,
#gform_9 input[type="email"]:focus,
#gform_9 input[type="tel"]:focus,
#gform_9 input[type="radio"]:focus,
#gform_9 input[type="checkbox"]:focus,
#gform_9 input[type="button"]:focus,
#gform_9 input[type="url"]:focus,
#gform_9 textarea:focus {
    outline: none;
    box-shadow: none;
}

#gf_progressbar_wrapper_9 .gf_progressbar_title {
    color: white !important;
}

#gf_progressbar_wrapper_9 .gf_progressbar .percentbar_blue {
    background-color: white !important;
}

#gform_9 input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    border: 2px solid white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}

#gform_9 input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    background-color: var(--blue);
    border-radius: 50%;
}

#gform_9 input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--purple);
    border: 2px solid white;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}

#gform_9 input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    background-color: var(--blue);
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#gform_9 input[type="submit"],
#gform_9 .gform_next_button {
    background-color: var(--pink) !important;
    border-color: var(--pink) !important;
    color: white !important;
}


#gform_9 input[type="submit"]:hover,
#gform_9 .gform_next_button:hover {
    background-color: var(--yellow) !important;
    border-color: var(--yellow) !important;
}

#gform_9 .gform_previous_button {
    background-color: var(--orange) !important;
    border-color: var(--orange) !important;
    color: white !important;
}

#gform_9 .gform_previous_button:hover {
    background-color: var(--yellow) !important;
    border-color: var(--yellow) !important;
}

#gform_9 #input_9_35 {
    max-width: 75px;
    width: 100%;
}

#gform_9_validation_container {
    border: 1px solid var(--yellow) !important;
    color: var(--yellow);
}

#gform_9_validation_container h2 {
    color: var(--yellow) !important;
}

#gform_9_validation_container .gform-icon--circle-error {
    color: var(--yellow) !important;
    border-color: var(--yellow) !important;
}

#gform_9 .gfield.gfield_error .gfield_description.validation_message,
#gform_9 .gfield.gfield_error .gfield_validation_message {
    color: var(--yellow) !important;
}

#gform_9 .gfield.gfield_error label.gform-field-label--type-sub {
    color: var(--yellow) !important;
}

/* Target the "Anders" radio choice wrapper */
.plaats-bedrukking .gchoice_9_31_4 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

/* Horizontally align the "Anders" radio + input field */
.plaats-bedrukking .gchoice_9_31_4 {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex-wrap: nowrap !important;
}

/* Hide the label "Anders" */
.plaats-bedrukking .gchoice_9_31_4 label {
    display: none !important;
}

/* Remove the line break */
.plaats-bedrukking .gchoice_9_31_4 br {
    display: none !important;
}

/* Prevent radio button from shrinking */
.plaats-bedrukking .gchoice_9_31_4 input[type="radio"] {
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
}

/* Align the text input inline */
.plaats-bedrukking .gchoice_9_31_4 input[type="text"] {
    margin: 0 !important;
    width: 100% !important;
    flex: 1 !important;
    display: inline-block !important;
}





/* Styling bestand uploadedn form */

#gform_10 .gfield_label,
#gform_10 legend.gfield_label {
    font-size: 22px;
    color: white !important;
    font-weight: 700;
}

#gform_10 .gfield_radio label,
#gform_10 .gfield_checkbox label {
    color: white;
    font-weight: 500;
}

#gform_10 .gform-field-label--type-sub,
#gfield_upload_rules_10_24 {
    color: white !important;
}


#gform_10 input[type="text"],
#gform_10 input[type="number"],
#gform_10 input[type="email"],
#gform_10 input[type="tel"],
#gform_10 input[type="url"],
#gform_10 textarea {
    border-color: white !important;
    color: white !important;
    background-color: transparent !important;
}

#gform_10 input[type="number"]:focus,
#gform_10 input[type="text"]:focus,
#gform_10 input[type="email"]:focus,
#gform_10 input[type="tel"]:focus,
#gform_10 input[type="radio"]:focus,
#gform_10 input[type="button"]:focus,
#gform_10 input[type="url"]:focus,
#gform_10 textarea:focus {
    outline: none;
    box-shadow: none;
}

#gf_progressbar_wrapper_10 .gf_progressbar_title {
    color: white !important;
}

#gf_progressbar_wrapper_10 .gf_progressbar .percentbar_blue {
    background-color: white !important;
}

#gform_10 input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    border: 2px solid white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
}

#gform_10 input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    background-color: var(--blue);
    border-radius: 50%;
}

#gform_10 input[type="submit"],
#gform_10 .gform_next_button {
    background-color: var(--purple) !important;
    border-color: var(--purple) !important;
    color: white !important;
}


#gform_10 input[type="submit"]:hover,
#gform_10 .gform_next_button:hover {
    background-color: var(--yellow) !important;
    border-color: var(--yellow) !important;
}

#gform_10 .gform_previous_button {
    background-color: var(--orange) !important;
    border-color: var(--orange) !important;
    color: white !important;
}

#gform_10 .gform_previous_button:hover {
    background-color: var(--yellow) !important;
    border-color: var(--yellow) !important;
}

#gform_10 #input_10_35 {
    max-width: 75px;
    width: 100%;
}

#gform_10_validation_container {
    border: 1px solid var(--yellow) !important;
    color: var(--yellow);
}

#gform_10_validation_container h2 {
    color: var(--yellow) !important;
}

#gform_10_validation_container .gform-icon--circle-error {
    color: var(--yellow) !important;
    border-color: var(--yellow) !important;
}

#gform_10 .gfield.gfield_error .gfield_description.validation_message,
#gform_10 .gfield.gfield_error .gfield_validation_message {
    color: var(--yellow) !important;
}
.gfield.validate-wetransfer input[type="url"] {
    width: 100% !important;
    max-width: 100% !important;
}



@media (min-width: 640px) {

    .gform-theme--foundation .gfield--width-half.inbinden,
    #field_6_4,
    #field_6_34 {
        grid-column: span 12 !important;
    }

    .gf_custom_two_columns .gf-columns {
        flex-direction: row !important;
        gap: 3rem !important;
        flex-wrap: nowrap !important;
    }

    .gf_custom_two_columns .gf-column {
        flex: 1 !important;
    }

}

@media (min-width: 768px) {

    .gform-theme--foundation .gfield--width-half.inbinden,
    #field_6_4,
    #field_6_34 {
        grid-column: span 8 !important;
    }

    .formaat-column {
        grid-column: 9 /13 !important;
        /* From column 9 to the last column */
        grid-row: 1 / 4 !important;
        /* From row 1 to the last row */
    }


    .gf_custom_two_columns .gf-columns {
        gap: 5rem !important;
    }

}