.form-select {
    padding: 0.375rem 0.75rem !important;
    font-size: var(--font-base) !important;
    font-weight: 500 !important;
    border-radius: var(--radius-xs) !important;
    box-shadow: none !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;

    &:hover,
    &:focus {
        border-color: var(--primary) !important;
    }
}

.auto-width-select {
    width: auto !important;
    display: inline-block !important;
    min-width: unset !important;
    padding-right: 2rem !important; /* enough space for the arrow */
    background-position: right 0.75rem center; /* keep arrow aligned */
}

.form-floating {
    label {
        font-weight: 500 !important;
        transform: translateY(0.1rem) !important;
    }

    .form-control {
        box-shadow: none !important;
        border-radius: var(--radius-xs) !important;
        border-color: var(--border) !important;
        font-size: 1rem !important;
        font-weight: 500 !important;

        &:focus {
            border-color: var(--primary) !important;
        }

        &:focus ~ label,
        &:not(:placeholder-shown) ~ label {
            font-weight: 500 !important;
            font-size: 0.75rem !important;
            color: var(--text-muted) !important;
            transform: translateY(-0.45rem) !important;
        }
    }
}

.turnstile-wrapper {
    width: 100%;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xs) !important;
    overflow: hidden;

    .cf-turnstile {
        transform: scale(1.03);         /* shrink just slightly */
        transform-origin: center center;
    }

    .cf-turnstile,
    .cf-turnstile iframe {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
    }
}