.form-control {
    //padding: 0.375rem 1rem;
    
    &:focus {
        & + .input-group-text {
            background-color: var(--primary-500);
            color: var(--bs-white);
            border-color: var(--primary-500);

            .form-check-input:checked {
                background-color: var(--primary-700);
                border-color: var(--primary-900);
            }
        }

        border-color: var(--primary-500);
    }

    & + .input-group-text {
        transition: all 0.15s ease-in-out;
    }
}

.input-group:focus-within {
    
    .input-group-text {
        background-color: var(--primary-500);
        color: var(--bs-white) !important;
        border-color: var(--primary-500);

        .form-check-input:checked {
            background-color: var(--primary-700);
            border-color: var(--primary-900);
        }
    }
    
    .form-select {
        border-color: var(--primary-500);
    }

    .input-group-text + .input-group-text {
        border-left: 1px solid var(--primary-700);
    }
}
.form-check-input {
    transition: all 0.3s ease;
}

.input-group-text {
    -webkit-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out
}

.input-group.input-group-multi-transition input[type=text] {
    -webkit-transition: width 470ms cubic-bezier(.34,1.25,.3,1);
    transition: width 470ms cubic-bezier(.34,1.25,.3,1)
}

.input-group.input-group-multi-transition input[type=text]:focus {
    width: 50%
}

// validation
/* When the input is invalid, make input-group-text red */
.was-validated .input-group.has-validation:has(> .form-control:invalid) .input-group-text,
.was-validated .input-group:has(> .form-control:invalid) .input-group-text,
.input-group:has(> .form-control.is-invalid) .input-group-text {
    background-color: var(--bs-form-invalid-color);
    border-color: var(--bs-form-invalid-border-color); 
    color: #ffffff; 
}
.was-validated .input-group.has-validation:has(> .form-control:valid) .input-group-text,
.was-validated .input-group:has(> .form-control:valid) .input-group-text,
.input-group:has(> .form-control.is-valid) .input-group-text {
    background-color: var(--bs-form-valid-color);
    border-color: var(--bs-form-valid-border-color); 
    color: #ffffff; 
}

/* create a hit area for the checkbox */
.form-check-hitbox {
    position: relative;

    .form-check-input {
        position: relative;
        z-index: 2;

        &:focus {
            & + .form-check-label {
                background: rgba(var(--bs-body-color-rgb), 0.03);
            }
        }
    }

    &:hover:has(.form-check-input):hover .form-check-label {
        background: rgba(var(--bs-body-color-rgb), 0.05);
    }

    .form-check-label {
        position: absolute;
        padding: 1.53em;
        background: transparent;
        border-radius: 100%;
        transform: translate(-86%, -23%);
        z-index: 1;
        transition: background 0.3s ease;

        &:hover {
            background: rgba(var(--bs-body-color-rgb), 0.05);
        }
    }
}

.offer-card:hover {
    background-color: var(--bs-body-bg);
    border-color: var(--primary-500);
    cursor: pointer;
}

.channel-card:hover {
    background-color: var(--bs-body-bg);
    cursor: pointer;
}

.offer-card .form-check-input,
.channel-card .form-check-input {
    display: none;
}

.offer-card:has(.form-check-input:checked) {
    border-color: var(--primary-500);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.channel-card:has(.form-check-input:checked) {
    border-color: var(--primary-500);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}