.ft-group,
.ft-form-group,
.ft-form-navigation {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;

    >* {
        flex: 1;
    }

    &.ft-wrap {
        flex-wrap: wrap;
        justify-content: center;
    }

    &.vertical {
        flex-direction: column;
        align-items: center;
    }
}

.ft-form {
    margin-top: 1rem;

    &.ft-paged-form {
        display: flex;
        position: relative;
        /* Javascript will move this with calc(-100% * page - 4rem) */
        left: 0;
        margin: 0 -2rem;
        transition: left 0.5s ease-in-out;

        .ft-form-page {
            visibility: hidden;

            &.ft-form-page__active {
                visibility: visible;
            }
        }
    }

    .ft-form-page {
        flex: 0 0 100%;
        padding: 0 2rem;
        box-sizing: border-box;
    }

    .ft-form-header {
        display: flex;
        gap: 1rem;
        justify-content: left;
        align-items: center;
    }

    .ft-form-control {
        text-align: left;

        &.vertical {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        >* {
            display: block;
            width: 100%;
        }

        label {
            font-size: 0.85rem;
            font-weight: 600;
            padding-left: 1rem;
        }

        span.ft-error-label {
            font-size: 0.75rem;
            font-weight: 600;
            padding-left: 1rem;
            color: #900;
        }

        textarea {
            resize: none;
        }

        input:not([type="radio"]),
        textarea,
        select {
            padding: 0.5rem 1rem;
            border: 1px solid #ccc;
            border-radius: 666px;
            outline: none;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;

            &.ft-error {
                box-shadow: 0 0 5px #900;
            }

            &:focus {
                border-color: #35bdfc;
                box-shadow: 0 0 5px #35bdfc;
            }

            &.small {
                padding: 0 1rem;
            }
        }

        textarea {
            border-radius: 18px;
        }

        &.ft-checkbox {
            max-width: max-content;
            min-width: max-content;
            padding: 0.1rem 0.7rem;
            border-radius: 666px;
            border: 1px solid gray;
            user-select: none;
            cursor: pointer;
            filter: grayscale(0.8) contrast(0.75);
            color: white;
            background-image: linear-gradient(90deg, #0074db 0%, #35bdfc 98%);
            transition: filter 0.05s ease, transform 0.1s ease, box-shadow 0.2s ease;
            transform: scale(1);
            box-shadow: 0 0 0 0 transparent;
            font-size: 14px;


            >span {
                display: inline;
            }

            &:focus {
                box-shadow: 0 0 6px 2px grey;
            }

            &:focus-visible {
                outline: none;
            }

            &:has(input:checked) {
                background-color: #35bdfc;
                color: white;
                filter: grayscale(0);
                box-shadow: 0 0 6px 2px #35bdfc;
                transform: scale(1.1);
                border: 1px solid #008ecf;
            }

            input {
                display: none;
            }
        }

        &.ft-form-control-radio {
            display: flex;
            flex-direction: column;
        }

        .ft-form-control-radio-group {
            flex: 1;
            display: flex;
            justify-content: left;
            align-items: center;

            label {
                display: flex;
                gap: 0.5rem;

                margin-right: 2rem;
                align-items: center;
            }

            input[type="radio"] {
                margin: 0;
                width: round(nearest, clamp(1.13rem, calc(0.37vw + 1.05rem), 1.38rem), 1px);
                height: unset;
                aspect-ratio: 1 / 1;
                appearance: revert;
                box-shadow: none;

                &:before {
                    display: none;
                }
            }
        }
    }

    .ft-form-actions {
        display: flex;
        gap: 0.7rem;
        margin-top: 2rem;
    }

    .ft-form-currency-input {
        position: relative;
    }

    .ft-form-currency-symbol {
        position: absolute;
        left: 1.1rem;
        top: 50%;
        color: #444;
        font-size: 1rem;
        pointer-events: none;
    }

    .ft-form-currency-input input[type="number"] {
        padding-left: 1.7rem;
    }
}

.ft-form-feedback-container {
    position: relative;
    min-height: 1.8rem;
}

.ft-form-feedback-container > * {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    padding: inherit;
}

@media (max-width: 767px) {
    .ft-form-group-responsive {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 425px) {
    .ft-form-group-responsive {
        margin-top: 1.2rem;
    }

    .ft-form-field-responsive {
        margin-top: 0.6rem;
    }
}