/*
 * Form-specific overrides
 * Add form styling here without touching the main theme stylesheet.
 */

/* .gform_wrapper {
  max-width: 100%;
}

.gform_body,
.gform_fields,
.gform_footer {
  width: 100%;
}

.gfield {
  margin-bottom: 1rem;
}

.gfield input,
.gfield textarea,
.gfield select {
  width: 100%;
  max-width: 100%;
}

.gform_footer {
  text-align: center;
} */

.gform-theme.gform-theme--foundation,
.gf_browser_chrome.gform_wrapper.gform_legacy_markup_wrapper.gform-theme--no-framework 
{
    --text-color: #000;
    --label-color: #000;
    --accent-color: #60880e;
    --accent-hover: #0d2555;

    .gform-body {
        

        .gform_fields {
            padding-top: 1rem;
            row-gap: 1rem !important;
        }
        
        .gfield_label.gform-field-label {
            flex: 0 1 auto;
            width: auto;
            display: block;
        }

        .gform-field-label__text {
            color: var(--label-color);
            font-weight: 500;
            font-size: 1.2rem;
            text-align: left;
        }

        .gfield.gfield--type-name,
        .gfield.gfield--type-text,
        .gfield.gfield--type-email,
        .gfield.gfield--type-phone,
        .gfield.gfield--type-textarea,
        .gfield.gfield--type-select,
        .gfield.gfield--type-checkbox,
        .gfield.gfield--type-radio,
        .gfield.gfield--type-section {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
            
            * {
                width: 100%;
            }
        }

        .gfield {
            input[type='text'],
            input[type='email'],
            input[type='tel'],
            textarea {
                appearance: none;
                display: flex;
                line-height: 1.2em;
                padding: 2rem 1rem !important;
                border: 1px solid var(--label-color);
                color: var(--text-color);
                text-align: left;
            }

            textarea {
                height: auto;
            }

            select {
                appearance: none;
                display: flex;
                height: auto;
                line-height: 1.2rem;
                padding: 1rem 1rem !important;
                flex-direction: column;
                align-items: flex-start;
                align-self: stretch;
                border: 1px solid var(--label-color);
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23000000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right 1.5rem center;
                background-size: 1.5rem;
                color: var(--text-color) !important;

                &:hover {
                    outline: 0 transparent;
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23000000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                }

                &:focus,
                &:active {
                    outline: 0 transparent;
                    border: 2px solid var(--label-color);
                }
            }

            .gfield_checkbox,
            .gfield_radio {
                gap: 0;
            } 

            input[type="radio"],
            input[type="checkbox"] {
                appearance: none;
                display: none;

                + label {
                    display: flex;
                    align-items: center;
                    font-size: 1rem;
                    line-height: 2em;
                    color: var(--label-color);
                    padding: .25rem;
                    gap: .6rem;
                    border-radius: .5rem;
                    background: none;
                    transform: translate(0,0);
                    font-weight: 400;

                    &:hover {
                        cursor: pointer;
                    }

                    &:after {
                        display: none;
                    }

                    &:before {
                        content: '';
                        flex: 0 0 1.5rem;
                        height: 1.5rem;
                        width: 1.5rem;
                        aspect-ratio: 1 / 1;
                        border-radius: .25rem;
                        background-color: #fff;
                        border: 2px solid var(--accent-color);
                        transition: background-color 300ms ease-in-out;
                    }
                }

                &:checked {
                    + label {
                        &:before{
                            border: 2px solid var(--accent-color);
                            background-color: var(--accent-color);
                            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 15.75L5.3 11.5l-1.4 1.4 5.65 5.65 11.3-11.3-1.4-1.4-9.9 9.9z' fill='%23ffffff'/%3E%3C/svg%3E");
                            background-repeat: no-repeat;
                            background-position: center center;
                            background-size: size(18);
                        }
                    }
                }
            }

            input[type="radio"] {
                + label {
                    &:before {
                        border-radius: 50%;
                    }
                }
                &:checked {
                    + label {
                        &:before{
                            border: 2px solid var(--accent-color);
                            background-color: var(--accent-color);
                            border: 2px solid var(--accent-color);
                            background-color: var(--accent-color);
                            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='%23ffffff'/%3E%3C/svg%3E");
                            background-repeat: no-repeat;
                            background-position: center center;
                            background-size: size(16);
                        }
                    }
                }
            }
        }
    }

    .gform-footer {
        button.gform_button.button {
            -webkit-appearance: none;
            border: none;
            display: block;
            float: left;
            width: auto;
            position: relative;
            outline: none !important;
            font-size: 1.25rem;
            font-weight: 500;
            color: #fff;
            text-align: center;
            line-height: 1.5;
            padding: 15px 30px;
            box-sizing: border-box;
            background: var(--accent-color);
            border-radius: 0;
            cursor: pointer;
            text-transform: uppercase;
            transition: all .3s ease-in-out;
        }

        button.gform_button.button:hover {
            background: var(--accent-hover);
            transition: all .3s ease-in-out;
        }
    }
}

.bgc-dark {
    .gform-theme.gform-theme--foundation,
    .gf_browser_chrome.gform_wrapper.gform_legacy_markup_wrapper.gform-theme--no-framework 
    {
        --label-color: #fff !important;
        --accent-color: #82b121;
        --accent-hover: #60880e;
    }   
}