:root {
    --techsol-error-color: #e81d2d;
    --techsol-error-background-color: #ffe5e7;

    --techsol-success-color: #26792d;
    --techsol-success-background-color: #e5ffe7;
}

form.techsol-subscribe-form {
    margin-top: 20px;
}

.techsol-form-result {
    margin:20px;
    padding:20px;
    display:none;

    &.error {
        border: 1px solid var(--techsol-error-color);
        color: var(--techsol-error-color);
        background-color: var(--techsol-error-background-color);
        display:block;
    }

    &.success {
        border: 1px solid var(--techsol-success-color);
        color: var(--techsol-success-color);
        background-color: var(--techsol-success-background-color);
        display:block;
    }
}
.techsol-form-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding:10px 20px;
    container-type: inline-size;

    .is-invalid {
        color: var(--techsol-error-color);
        border: 1px solid var(--techsol-error-color);
        background-color: var(--techsol-error-background-color);
    }

    .techsol-error-message {
        flex-basis: 100%;
        font-size: 0.8em;
        line-height:1em;
        color: var(--techsol-error-color);
    }

    .techsol-field-wrapper {
        width: 100%;
        &:not(.floating-label) label[for] {
            border: 0;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }
    }
    .floating-label {
        position: relative;
    }

    .floating-label input {
        width: 100%;
        padding: 12px 8px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 6px;
        outline: none;
    }

    .floating-label label {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        transition: 0.2s ease all;
        background: transparent;
        padding: 0 4px;
    }

    .floating-label input:focus + label,
    .floating-label input:not(:placeholder-shown) + label {
        top: -8px;
        font-size: 12px;
    }
}

@container (min-width: 480px) {
    .techsol-form-group {
        flex-direction: row;
        flex-wrap: wrap;

        .techsol-field-wrapper.half-width {
            width: calc(50% - 10px);
        }
    }
}