/* ###############
##### Forms ######
############### */
@media all {

    form .row {
        --bs-gutter-y: 0;
    }

    .captcha a {
        display: inline-block;
    }

    .captcha svg * {
        fill: currentColor;
    }

    .captcha > img {
        border-radius: var(--border-radius-small);
    }

    .content-main > .ce-type-form_formframework :is(.ce-header, form) {
        max-width: var(--content-width-narrow);
        margin-inline: auto;
    }

    input, textarea, select {
        padding: 1rem;
        border: 0 none transparent;
        box-shadow: var(--box-shadow-24);
        background-color: var(--ce-color-card-bg);
        color: var(--ce-color-card-fg);
        margin-left: 0;

        /*
        &:focus ,
        &:hover {
            box-shadow: var(--box-shadow-24) !important;
        }
        */

    }
    
    textarea {
        min-height: 12rem;
    }

    legend {
        font-size: inherit;
    }

    select {
        background-image: url("../Icons/sprite-svgs/arrow-single-down.svg");
        background-size: 2.125em;
        background-repeat: no-repeat;
        background-position: right .25em center;
    }

    select {
        padding-right: 2.5em;
    }

    :is(input,textarea)::placeholder {
        color: var(--ce-color-card-fg);
        opacity: .32;
    }

    .form-element-mathguard legend,
    .form-label {
        font-size: .875rem;
    }

    .form-element-mathguard {
        margin-bottom: 1rem;
    }

    .form-element-mathguard .form-label {
        font-size: inherit;
    }

    .form-label-mathguard {
        margin-bottom: 0;
        margin-right: .75rem;
    }

    legend.fieldset-header {
        margin-bottom: 1rem
    }

    .form-row-captcha {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .form-row-captcha .form-control {
        width: 10em
    }

    .form-text {
        color: currentColor;
    }

    .form-check-wrapping-label input ~ .form-check {
        background-image: url(../Images/Form/checkbox-check-red.png);
        background-repeat: no-repeat;
        background-size: 0;
        background-position: center center;
        transition: var(--transition-brr);
    }

    .form-check-wrapping-label input:checked ~ .form-check {
        background-size: 75%;
    }

    :is(.ce-theme-dark-purple,.ce-theme-green) .form-check-wrapping-label input ~ .form-check {
        background-image: url(../Images/Form/checkbox-check-offwhite.png);
    }

    .ce-theme-yellow .form-check-wrapping-label input ~ .form-check {
        background-image: url(../Images/Form/checkbox-check-darkpurple.png);
    }

    .form-check-wrapping-label {
        display: flex;
        position: relative;
        align-items: center;
        gap: 1.25rem;
    }

    [role="radiogroup"] {

        .form-check-wrapping-label::after {
            content: "";
            position: absolute;
            inset: 0;
            top: 50%;
            background-color: var(--ce-color-interactive);
            aspect-ratio: 1;
            mask-image: url(../Icons/sprite-svgs/check.svg);
            mask-repeat: no-repeat;
            mask-position: center;
            opacity: 0;
            transform: translateY(-50%) scale(0);
            transition: var(--transition-brr);
        }

        .form-check-wrapping-label:has(input:checked)::after {
            opacity: 1;
            transform: translateY(-50%) scale(1);
        }
        
        .form-check-label {
            width: 100%;
            white-space: nowrap;
        }

    }

    .form-check {
        padding: 0;
        margin: 0;
        width: 2.5rem;
        height: auto;
    }

    :is(.ce-theme-off-white, .ce-theme-yellow) .form-check-light {
        display: none;
    }

    :is(.ce-theme-dark-purple, .ce-theme-green) .form-check-dark {
        display: none;
    }
}

@media all {

    .ce-type-html .sib-form {
    font-family: inherit;
    padding: 0 !important;

    & * ,
    & *::placeholder ,
    & #sib-container input::placeholder{
        font-family: inherit !important;
    }

    & #sib-container {
        background: transparent !important;
        border: unset !important;
        padding: 0;

        & #sib-form {
        display: flex;
        flex-direction: column;
        gap: 1rem !important;

        & > div {
            padding: 0 !important;
        }

        & > div:has( > .sib-form-block > p) {
            display: none;
        }

        & .sib-form-block {
            padding: 0;
        }

        & .entry__label {
            margin: 0;
            margin-bottom: .5rem;
        }

        & .entry__field {
            margin: 0;
            border: 0 none transparent;

            & .input {
            font-family: inherit !important;
            height: auto;
            text-transform: none !important;
            font-size: 1rem !important;
            font-weight: 400;
            line-height: 1.5;
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;

            padding: 1rem;
            box-shadow: var(--box-shadow-24);
            background-color: var(--ce-color-card-bg);
            color: var(--ce-color-card-fg);
            border-radius: var(--bs-border-radius);

            :focus-visible {    
                --focus-opacity: 1;
                box-shadow: 0 0 0 .25rem rgba(var(--ce-color-interactive-rgb),var(--focus-opacity)) !important;
                outline: .25rem rgba(var(--ce-color-interactive-rgb),var(--focus-opacity)) !important;
                overflow: clip;
                border-radius: .25rem;
            }

            }

        }

        & .sib-form-block .sib-form-block__button {
            padding: 2rem;
            position: relative;
            background-color: var(--color-red) !important;
            color: var(--color-offwhite) !important;
            padding: var(--size-5) !important;
            font-size: 1.3125rem !important;
            border-radius: .375rem !important;

            &:focus,
            &:hover,
            &:focus-within {

            &::after {
                opacity: 1;
            }

            }

            &::after {
            content: "";
            display: unset !important;
            position: absolute;
            left: calc(var(--bs-btn-padding-x) - .25rem);
            bottom: var(--bs-btn-padding-x);
            transform: translateY(100%);
            background-image: url(../Images/BtnPrimary/btnlink-hover-darkpurple.png);
            background-position: center center;
            background-size: 80% 65%;
            background-repeat: no-repeat;
            aspect-ratio: 140 / 22;
            width: 100%;
            max-width: 140px;
            opacity: 0;
            transition: var(--transition-default);
            left: 50%;
            transform: translateX(-50%) translateY(100%);
            background-size: 100% 100%;

            }

        }

        }

    }

    }

}