html:has(.bb-notice-modal) {
    overflow: hidden;

    .bb-form:before {
        content: '';
        position: fixed;
        inset: 0;
        background-color: rgba(242, 242, 242, .7);
        z-index: 1;
        display: inline-block;
    }
}

.bb-form, .bb-form * {
    box-sizing: border-box;
}

.bb-form__wrapper {
    max-width: 1190px;
    width: 100%;
    margin-inline: auto;
    background-color: #F2F2F2;
}

.bb-form {
    display: flex;
    flex-wrap: wrap;
    font-size: 18px;

    &:has(label .bb-form__error) {
        .bb-form__action button {
            opacity: .4;
            pointer-events: none;
        }
    }

    .bb-notice-modal {
        width: 650px;
        max-width: calc(100% - 20px);
        padding:  12px 60px 12px 12px;
        background-color: #F2F2F2;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 2px solid #D13120;
        z-index: 2;

        p {
            padding: 0;
            margin: 0;
            font-weight: 700;
            color: #000;
        }

        button {
            background-image: url('./times-white.svg');
            background-repeat: no-repeat;
            background-position: center center;
            position: absolute;
            right: 12px;
            top: 12px;
            width: 40px;
            height: 40px;
            padding: 0;
            background-color: #D13120;
            display: inline-block;
            border: 1px solid #fff;
            border-radius: 3px;
            cursor: pointer;

            &:focus, 
            &:focus-visible,
            &:focus-within {
                outline: 2px solid #D13120;
            }
            
            &:hover {
                color: #fff;
                background-color: #690507;
            }
        }
    }

    .bb-form__content {
        display: flex;
        flex-wrap: wrap;
        font-size: 18px;
        padding: 0 16px 6px;
        margin-inline: -26px;
        width: calc(100% + 52px);

        @media (width >= 640px) {
            padding-inline: 60px;    
        }
        
        @media (width >= 1024px) {
            padding-inline: 114px;    
        }
    }

    .bb-form__field.bb-form__error {
        background-color: yellow;
        color: #000;
        font-size: 1rem;
        padding: .75rem 1rem 0;
        border: .125rem solid #D13120;
        margin-inline: 1.625rem;

        p {
            font-weight: 700;
        }
    }

    .bb-form__headline {
        width: 100%;
        font-size: 22px;
        line-height: 28px;
        background-color: #D13120;
        color: #fff;
        font-weight: 700;
        margin-bottom: 20px;
        padding: 18px 16px;

        @media (width >= 640px) {
            padding-inline: 60px;    
        }
        
        @media (width >= 1024px) {
            padding-inline: 114px;    
        }
    }

    .bb-form__field {
        padding: 0 26px;
        width: 100%;
        margin-bottom: 28px;

        &:has(input[type="checkbox"]),
        &:has(input[type="radio"]) {
            position: relative;
        }

        .bb-form__field  {
            margin-bottom: 0;
        }
    }

    .bb-form__field--alt {
        @media (width >= 768px) {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        > div {

            &:first-child {
                @media (width >= 768px) {
                    flex-grow: 1;
                }
            }

            &:nth-child(2) {
                @media (width >= 768px) {
                    width: auto;
                }
            }
        }
    }

    .bb-form__field--bottom {
        display: flex;
        align-items: flex-end;
    }

    &:has([data-cond="one"] input:checked) {
        [data-cond-res="one"] {
            display: block;
        }
    }

    &:has([data-cond="two"] input:checked) {
        [data-cond-res="two"] {
            display: block;
        }

        [data-cond-res="two three"] {
            display: block;
        }
    }

    &:has([data-cond="three"] input:checked) {
        [data-cond-res="three"] {
            display: block;
        }

        [data-cond-res="two three"] {
            display: block;
        }
    }

    &:has([data-cond="four"] input:checked) {
        [data-cond-res="four"] {
            display: block;
        }
    }

    .hidden,
    [data-cond-res] {
        display: none;
    }

    [data-non-member][data-member] {
        display: none;
    }

    &:has(input[id='member']:checked) {
        [data-non-member] {
            display: none;
        }

        [data-non-member][data-member] {
            display: block;
        }
    }

    &:has(input[id='nonMember']:checked) {
        [data-member] {
            display: none;
        }

        [data-non-member][data-member] {
            display: block;
        }
    }

    .bb-form__success,
    .bb-form__error {
        font-weight: 700;
        font-size: 12px;
        color: #D13120;

        span {
            display: block;
        }
    }

    .bb-form__success {
        color: green;
    }

    .bb-form__field-group {
        display: flex;
        margin-inline: -26px;

        .bb-form__field {
            width: auto;
        }
    }

    p {
        margin: 0 0 28px;
        padding: 0 26px;
        width: 100%;
    }

    p span {
        font-size: 14px;
        display: block;
    }
    .bb-form__field p,
    label {
        display: inline-block;
        width: 100%;
        margin: 0 0 10px;
        padding: 0;
        font-weight: 400;
        line-height: 20px;

        .bb-form__error {
            margin-left: 10px;
        }
    }

    .strong {
        font-weight: 700;
    }

    label:has(.bb-form__error) {
        ~ input {
            outline: red solid .125rem !important;
            outline-offset: .125rem !important;
        }
    }

    select, 
    input[type="text"],
    input[type="email"],
    textarea {
        margin: 0;
        height: 46px;
        width: 100%;
        background-color: #fff;
        color: #646464 !important;
        font-family: 'Liebling';
        font-size: 18px;
        padding: 10px 20px !important;
        border: 1px solid #ccc;
        width: 100%;
        box-shadow: inset 5px 3px 6px rgba(0, 0, 0, .3);

        &:focus, 
        &:focus-visible,
        &:focus-within {
            outline: 2px solid #D13120 !important;;
        }
    }

    textarea {
        resize: none;
        height: 70px;
    }

    input[list]::-webkit-calendar-picker-indicator {
        display: none !important;
    }

    input[list],
    select {
        border: 1px solid #ccc;
        box-shadow: 5px 3px 6px rgba(0, 0, 0, .3);
        background-repeat: no-repeat;
        background-position: calc(100% - 20px) center !important;
        padding-right: 60px !important;
        -webkit-appearance: none !important;
        appearance: none !important; 
        -moz-appearance: none !important;
        text-indent: 1px !important;
        text-overflow: '';
        background-image: url('./arrow.svg') !important;
    }

    input[type="checkbox"],
    input[type="radio"] {
        position: absolute;
        opacity: 0;
        top: 0;
        left: 0;

        &:focus, 
        &:focus-visible,
        &:focus-within {

            +label:before {
                outline: 2px solid red;
            }
        }

        &:checked {
            + label {
                &:before {
                    background-image: url('./times.svg');
                    background-repeat: no-repeat;
                    background-position: center center;
                }
            }
        }

        + .bb-form__label--top {
            padding-top: 0;
        }

        + label {
            position: relative;
            padding: 10px 0 0 66px;
            min-height: 46px;
            margin: 0;

            &:before {
                content: '';
                display: inline-block;
                position: absolute;
                top: 0;
                left: 0;
                width: 46px;
                height: 46px;
                background-color: #fff;
                box-shadow: inset 5px 3px 6px rgba(0, 0, 0, .3);
            }
        }
    }

    a {
        font-weight: 700;
        text-decoration: underline;

        &:hover {
            color: #D13120;
        }
    }


    hr {
        width: 100%;
        margin: 20px 26px 40px;
    }

    .bb-form__table-headline {
        font-weight: 700;
        margin-bottom: 10px;
    }

    .bb-form__table {
        padding: 0 26px;
        width: 100%;

        @media (width >=768px) {
            width: 460px;
        }

        p {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }

        strong {
            color: #000 !important;
        }
    
        p:first-child {
            margin-bottom: 10px;
        }

        p:last-child {
            border-top: 2px solid gray;
            font-weight: 700;
            margin: 20px 0;
            padding-top: 20px;
        }
    }

    .bb-form__action {
        padding: 0 26px 28px;
        width: 100%;

        button {
            margin-block: 28px;
        }
    }

    .bb-button-group {
        display: flex;
        flex-wrap: wrap;
        padding-block: 26px 56px;
        gap: 20px 32px;

        button {
            margin: 0;
        }
    }

    .bb-link, 
    .bb-button {
        background-color: #D13120;
        color: #fff;
        display: inline-block;
        font-size: 18px;
        line-height: 18px;
        padding: 12px 36px;
        font-weight: 400;
        border: 1px solid #fff;
        border-radius: 3px;
        cursor: pointer;
        text-decoration: none !important;

        &:focus, 
        &:focus-visible,
        &:focus-within {
            outline: 2px solid #D13120;
        }
    }

    .bb-button {

        #main & {
            color: #fff !important;
        }

        &:hover {
            color: #fff;
            background-color: #690507;
        }
    }

    .bb-link {
        background-color: transparent;
        border: 1px solid #D13120;
        color: #D13120;

        &:hover {
            background-color: hsl(0, 0%, 90%);
        }
    }

    [hidden] {
        display: none !important;
    }
}

/* reverse from theme styling */
#top .bb-form {
    label {
        font-weight: 400;
        font-size: 18px;
        
        span {
            font-size: 18px;
        }
    }

    .strong,
    a {
        font-weight: 700;
    }
}