.gfield_label {
    color: #ddd;
    font-size: 14px;
    margin-bottom: 0px;
    transform: translateY(20px);
    display: block;
    transition: all 0.24s;
}

.gform_submission_error  {
    font-size: 24px;
    color: red;
}

.gfield_validation_message {
    font-size: 12px;
    color: red;
    margin-top: 8px;
}

.gform_confirmation_message {
    color: #fff;
}


.gform_fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;    

    .gfield {
        &:has(input:not([type="radio"], [type="checkbox"]):focus, select:focus, textarea:focus) {
            .gfield_label {
                transform: translateY(10px);
            }
        }

        input:not([type="radio"], [type="checkbox"]), select, textarea {
            position: relative;
            margin-top: 0.9375rem;
            padding: 0.625rem 0;
            width: 100%;
            text-align: left;
            color: #DDDDDD;
            outline: 0;
            border: 0;
            box-shadow: none;
            border: none;
            border-bottom: 1px solid #70707040;
            transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            -webkit-transition: all 0.5s ease-in-out;
            background-color: transparent;

            &:focus {
                border-color: var(--primary);
            }
        }

        textarea {
        	min-height: 80px;
            height: 80px;
        }

    }
}

.gform_footer {
    position: relative;
    display: inline-flex;
    width: fit-content;
    margin-top: 32px;

    .gform_ajax_spinner {
        display: none !important;
    }

    &:has(.gform_ajax_spinner) {
        &:after {
            animation: scalePulse 1.2s ease-in-out infinite;
        }
    }

    input {
        cursor: pointer;
        display: flex;
        gap: 20px;
        font-size: 1.25rem;
        padding-left: 0;
        padding-right: 4.6875rem;
        position: relative;
        color: #fff;
        line-height: 3.125rem;
        border-radius: 3.125rem;
        overflow: hidden;
        background: transparent;
        border: none;       
    }

    &:after {
        content: "";
        font-family: "icomoon"!important;
        speak: never;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        pointer-events: none;
        position: absolute; 
        right: 0;
        top: 0;
        bottom: 0;
        color: #fff;
        width: 50px;
        height: 50px;
        font-size: 18px;
        border-radius: 50%;
        background: #EB2248;
        display: inline-flex;
        align-items: center;
        justify-content: center;   
    }

    &:hover {
        border-color: #EB2248;
    }
    
}

@keyframes scalePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
}



.gform-service-contact {
    .gform_fields {
        display: grid;
        gap: 0px 140px;
        grid-template-columns: 1fr 1fr;

        /* Force all standard fields into the first column */
        .gfield:not(fieldset) {
          grid-column: 1;
        }

        /* Place the checkbox field group in the second column */
        fieldset {
          grid-column: 2;
          grid-row: 1 / span 4; /* Makes it span the same height as the 4 fields on the left */
        }
    }
}


fieldset {
    &:has(.ginput_container_checkbox)  {
        .gfield_label {
            font-size: 1.5rem;
            font-weight: 700;
            color: #EB2248;
            line-height: 1.2;
            margin-bottom: 3.4375rem;
            text-align: left;
        }


        .ginput_container_checkbox {
            .gfield_checkbox {
                gap: 24px;
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;


                .gchoice {
                    input {
                        display: none !important;
                    }

                    label {
                        border-radius: 250px;
                        position: relative;
                        cursor: pointer;
                        padding: 8px 24px;
                        font-size: 1rem;
                        color: #ddd;
                        line-height: 2.5rem;
                        background-color: #292028;
                        text-align: center;
                        display: block;
                        white-space: nowrap;
                    }

                    &:has(input:checked) label {
                        background-color: #6d0317;
                    }
                }

            }
        }
    }
}