/* Public /contact/ form: recipient slide toggle + community requirement. */

#contact-form-wrapper {
    .contact-recipient-toggle {
        display: flex;
        align-items: stretch;
        justify-content: center;
        position: relative;
        background: var(--content-background-color);
        border-radius: 2rem;
        padding: 0.5rem;
        width: 100%;
        max-width: 32rem;

        input[type="radio"] {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
            pointer-events: none;
        }

        > label {
            position: relative;
            z-index: 2;
            flex: 1 1 0;
            min-width: 0;
            padding: 0.5rem 0.75rem;
            color: var(--content-color);
            font-weight: 500;
            cursor: pointer;
            transition: color 0.3s ease;
            user-select: none;
            border-right: none;
            line-height: 1.2;
            margin: unset;
            text-align: center;
        }

        &:has(#contact-recipient-client:checked) label[for="contact-recipient-client"],
        &:has(#contact-recipient-manager:checked) label[for="contact-recipient-manager"] {
            color: var(--content-color-dark);
            font-weight: 700;
        }

        .toggle-slider {
            position: absolute;
            top: 0.5rem;
            left: 0.5rem;
            width: calc(50% - 0.5rem);
            height: calc(100% - 1rem);
            background: white;
            border-radius: 1.5rem;
            transition: transform 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            z-index: 1;
            pointer-events: none;
        }

        &:has(#contact-recipient-manager:checked) .toggle-slider {
            transform: translateX(100%);
        }
    }

    .contact-community-field {
        .contact-community-help-required {
            display: none;
        }

        &.is-required {
            label[for="community"]::after {
                content: " (required)";
            }

            .contact-community-help-optional {
                display: none;
            }

            .contact-community-help-required {
                display: block;
            }
        }
    }

    button#send:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }
}

@media (prefers-reduced-motion: reduce) {
    #contact-form-wrapper .contact-recipient-toggle .toggle-slider {
        transition: none;
    }
}