:root {
    color-scheme: light dark;
    --color-error-background: lch(95% 64.51 22.72); /* #cf3a4e */
}

.section-bts-selector .subhead {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    letter-spacing: calc(2 * var(--tracking-basis));
    text-transform: uppercase;
}

.section-bts-selector .contact > .flex-box {
    gap: 0.5rem;
}

.section-bts-selector .bts-selector > div:first-of-type {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;;
}

.section-bts-selector .contact > .flex-box:not(:last-of-type) {
    margin-bottom: 1rem;
}

.section-bts-selector .contact > .flex-box > div:first-of-type, 
.section-bts-selector .contact > .flex-box > div:first-of-type > svg {
    width: 2rem
}

.section-bts-selector .contact > .flex-box > div:first-of-type > svg {
    fill: var(--color-foreground);
}

.section-bts-selector .contact > .flex-box > div:last-of-type p {
    margin: 0;
}

.section-bts-selector .contact > .flex-box > div:last-of-type p:first-of-type {
    margin: 0 0 0.125rem 0;
}

.section-bts-selector .contact > .flex-box > div:last-of-type button {
    background-color: transparent;
    border-width: 0;
    border-radius: 0;
    color: var(--color-link-normal);
    font-family: var(--font-body);
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 0.1875rem;
}

.section-bts-selector .bts-selector-form .flex-box {
    gap: 1rem;
    padding: 0.75rem;
}

.section-bts-selector .bts-selector-form .bts-form-error {
    background-color: var(--color-error-background);
    border: 1px solid var(--color-accent);
}

.section-bts-selector .bts-selector-form .bts-error-message {
    display: none;
    font-weight: var(--font-weight-medium);
    margin-top: 0.5rem;
}

.section-bts-selector .bts-selector-form .flex-box:not(:last-of-type) {
    margin-bottom: 0.75rem;
}

.section-bts-selector .bts-selector-form .flex-box > div:first-of-type {
    background-color: var(--color-background-standard);
    border: 2px solid var(--color-link-normal);
    border-radius: 100vw;
    color: var(--color-link-normal);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--font-size-heading-4);
    font-weight: var(--font-weight-semibold);
    height: 2.5rem;
    place-content: center;
    width: 2.5rem;
}

.section-bts-selector .bts-selector-form .flex-box > div:last-of-type {
    flex: 1;
}

.section-bts-selector .bts-selector-form .flex-box > div:last-of-type label {
    display: block;
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.section-bts-selector .bts-selector-form .flex-box > div:last-of-type select {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--color-background-standard);
    background-image: url('data:image/svg+xml,<svg height="12" viewBox="0 0 36 12" xmlns="http://www.w3.org/2000/svg"><path fill="%23cf3a4e" d="M16,1.3c0,0.3-0.1,0.6-0.3,0.8L9.1,9C8.8,9.2,8.4,9.4,8,9.4S7.2,9.2,6.9,8.9L0.3,2C0.1,1.8,0,1.6,0,1.3c0-0.4,0.2-0.7,0.5-1C0.8,0.1,1.2,0,1.6,0c0.4,0,0.7,0.2,1,0.4L8,6.2l5.4-5.7C13.7,0.2,14,0,14.4,0c0.4,0,0.8,0.1,1.1,0.3C15.8,0.5,16,0.9,16,1.3z"/></svg>');
    background-position: center right;
    background-repeat: no-repeat;
    background-size: initial;
    border: 2px solid var(--color-link-normal);
    border-radius: 100vw;
    box-sizing: border-box;
    color: var(--color-foreground);
    display: block;
    height: 2.5rem;
    margin: 0.25rem 0 0 0;
    max-width: 20rem;
    padding-right: 3rem;
    width: 100%;
}

.section-bts-selector .bts-selector-form .flex-box > div:last-of-type select option {
    background-color: var(--color-background-standard);
    color: var(--color-foreground);
}

.section-bts-selector .bts-selector-form .flex-box > div:last-of-type select:focus {
    border-color: var(--color-link-hover);
}

.section-bts-selector .bts-selector-form .bts-selector-group {
    margin: 0 0 0.25rem 0;
}

.section-bts-selector .bts-selector-form .bts-selector-group:not(:first-of-type) {
    margin-top: 1rem;
}

.section-bts-selector .bts-selector-form .bts-product-item {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.25rem;
}

.section-bts-selector .bts-selector-form .bts-product-item input {
    accent-color: var(--color-accent);
    border: 2px solid var(--color-foreground);
    display: block;
    height: 1.25rem;
    width: 1.25rem;
}

.section-bts-selector .bts-selector-form .flex-box .bts-product-item input + label {
    display: block;
    flex: 1;
    font-weight: var(--font-weight-normal);
    line-height: 1;
    margin: 0;
    max-width: max-content;
}

.section-bts-selector .bts-selector-form .flex-box button {
    font-weight: var(--font-weight-bold);
    width: max-content;
}

@media(min-width: 50rem) { /* 800 px */
    .section-bts-selector .bts-selector {
        gap: 10%;
    }

    .section-bts-selector .bts-selector > div, 
    .section-bts-selector .bts-selector > div:first-of-type {
        border-bottom-width: 0;
        width: 45%;
    }   
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light dark;
        --color-error-background: lch(25% 64.51 22.72); /* #cf3a4e */
    }

    .section-bts-selector .bts-selector-form .flex-box > div:last-of-type select {
        background-image: url('data:image/svg+xml,<svg height="12" viewBox="0 0 36 12" xmlns="http://www.w3.org/2000/svg"><path fill="%23ed9798" d="M16,1.3c0,0.3-0.1,0.6-0.3,0.8L9.1,9C8.8,9.2,8.4,9.4,8,9.4S7.2,9.2,6.9,8.9L0.3,2C0.1,1.8,0,1.6,0,1.3c0-0.4,0.2-0.7,0.5-1C0.8,0.1,1.2,0,1.6,0c0.4,0,0.7,0.2,1,0.4L8,6.2l5.4-5.7C13.7,0.2,14,0,14.4,0c0.4,0,0.8,0.1,1.1,0.3C15.8,0.5,16,0.9,16,1.3z"/></svg>');
    }
}