/*------------------------------------*\
    
    WebFX Choices.js Customizations - Global styling for select box/text inputs using Choices.js

    Add custom Choices.js select input styling to this file if it should be applied to all Choices.js select inputs on the site
    Otherwise, put your styles in individual block stylesheets

\*------------------------------------*/

.gfield--type-select {
    position: relative;
    & .choices[data-type*='select-one'] .choices__inner {
        background: #CCE5FF;
        outline: none;
        border: none;
    }

    .choices__list--dropdown {
        border-color: var(--light-blue);
    }

}

.gfield_radio {
    list-style: none;
    padding: 0;
    margin: 0;
}

.gfield_radio .gchoice {
    margin-bottom: 0.75rem;
}

.gfield_radio .gchoice input[type="radio"],
.gfield_radio .gchoice .gfield-choice-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 0.125rem solid var(--dark-blue);
    border-radius: 50%;
    background: var(--white);
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.gfield_radio .gchoice input[type="radio"]:hover,
.gfield_radio .gchoice .gfield-choice-input:hover {
    border-color: var(--dark-blue);
    background: var(--light-blue);
}

.gfield_radio .gchoice input[type="radio"]:checked,
.gfield_radio .gchoice .gfield-choice-input:checked {
    border-color: var(--dark-blue);
    background: var(--white);
}

.gfield_radio .gchoice input[type="radio"]:checked::after,
.gfield_radio .gchoice .gfield-choice-input:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--dark-blue);
}

.gfield_radio .gchoice label {
    cursor: pointer;
    font-family: var(--font-graphik-regular);
    font-size: 1rem;
    color: var(--dark-blue);
    vertical-align: middle;
    margin-left: 0;
}

/* Legacy markup support (for forms using ul/li structure) */
.gfield_radio li {
    margin-bottom: 0.75rem;
}

.gfield_radio li input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 0.125rem solid var(--dark-blue);
    border-radius: 50%;
    background: var(--white);
    cursor: pointer;
    position: relative;
    margin-right: 0.625rem;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.gfield_radio li input[type="radio"]:hover {
    border-color: var(--dark-blue);
    background: var(--dark-blue);
}

.gfield_radio li input[type="radio"]:checked {
    border-color: var(--dark-blue);
    background: var(--white);
}

.gfield_radio li input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--dark-blue);
}

.gfield_radio li label {
    cursor: pointer;
    font-family: var(--font-graphik-regular);
    font-size: 1rem;
    color: var(--dark-blue);
    vertical-align: middle;
    margin-left: 0;
}

.gfield_radio label.gform-field-label {
    position: relative;
    top: auto!important;
    left: auto!important;
    right: auto!important;
    background: transparent!important;
}

.gfield--type-select label {
    position: relative;
    top: auto!important;
    left: auto!important;
    right: auto!important;
    background: transparent!important;
    font-family: var(--font-graphiksemibold)!important;
}

.gfield--type-radio legend.gform-field-label {
    font-family: var(--font-graphiksemibold)!important;
    font-size: 1.0625rem;
}

.gfield--type-radio .gchoice {
    display: flex;
    align-items: center;
}

.gfield--type-select {
    & .choices__inner {
        min-height: 4.1875rem;
        display: flex;
        align-items: center;
    }
}

.choices__list--single .choices__item,
.choices__list--dropdown .choices__item {
    font-size: 1.0625rem;
}