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

.bb-form__wrapper {
    max-width: 1196px;
    width: 100%;
    margin-inline: auto;
}

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

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

    .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;
        color: #D13120;
        font-weight: 700;
        margin-bottom: 40px;
    }

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

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

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

        > 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;
    }

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

            @media (width >=768px) {
                margin-left: 50%;
            }
        }
    }

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

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

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

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

    [data-cond="four"]:has(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-w-1-2 {
        @media (width >=768px) {
            width: 50%;
        }
    }

    .bb-offset {
        @media (width >=768px) {
            margin-left: 50%;
        }
    }

    .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;
        }

    }

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

    select, 
    input[type="text"],
    input[type="email"],
    textarea {
        margin: 0;
        height: 46px;
        width: 100%;
        background-color: #F2F2F2;
        color: #646464;
        font-family: 'Liebling';
        font-size: 18px;
        padding: 10px 20px;
        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;
        }
    }

    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;
        padding-right: 60px;
        -webkit-appearance: none;
        appearance: none; 
        -moz-appearance: none;
        text-indent: 1px;
        text-overflow: '';
        background-image: url('./arrow.svg');
    }

    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: #F2F2F2;
                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 {
        padding: 0 26px;
        width: 100%;

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

        p {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
    
        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 {
        text-align: center;
        padding: 0 26px;
        width: 100%;
    }

    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;

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

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