.custom-form {
    --cf-color-main: var(--color_main, var(--css_var_color_main, #e30613));
    --cf-color-main-hover: var(--color_mainhover, var(--css_var_color_mainhover, #000));
    --cf-color-text: var(--color_text, var(--css_var_color_text, #000));
    --cf-color-white: var(--color_white, var(--css_var_color_white, #fff));
    --cf-color-button-text: var(--color_buttontext, var(--css_var_color_buttontext, #fff));
    --cf-color-valid-bg: var(--color_white, var(--css_var_color_white, #fff));

    --cf-color-grey5: var(--color_grey5, var(--css_var_color_grey5, #f6f6f6));
    --cf-color-grey10: var(--color_grey10, var(--css_var_color_grey10, #ebebeb));
    --cf-color-grey20: var(--color_grey20, var(--css_var_color_grey20, #d8d8d8));
    --cf-color-grey30: var(--color_grey30, var(--css_var_color_grey30, #c8c8c8));
    --cf-color-grey40: var(--color_grey40, var(--css_var_color_grey40, #b5b5b5));
    --cf-color-grey50: var(--color_grey50, var(--css_var_color_grey50, #a2a2a2));
    --cf-color-grey60: var(--color_grey60, var(--css_var_color_grey60, #8f8f8f));
    --cf-color-grey70: var(--color_grey70, var(--css_var_color_grey70, #787878));
    --cf-color-grey80: var(--color_grey80, var(--css_var_color_grey80, #5e5e5e));

    --cf-font-family: var(--fontfamily_default_font-family, SourceSansPro, Arial, Verdana, sans-serif);
    --cf-font-size: var(--fontsize_default_font-size, 17px);
    --cf-font-size-small: var(--fontsize_defaultsmall_font-size, .938rem);
    --cf-font-size-h1: var(--fontsize_defaulth1_font-size, 1.75rem);
    --cf-font-size-h2: var(--fontsize_defaulth2_font-size, 1.3rem);
    --cf-font-size-h3: var(--fontsize_defaulth3_font-size, 1.3rem);

    --cf-font-weight-light: var(--fontweight_light_font-weight, 300);
    --cf-font-weight-normal: var(--fontweight_normal_font-weight, 400);
    --cf-font-weight-semibold: var(--fontweight_semibold_font-weight, 600);

    --cf-line-height-default: var(--default-line-height_line-height, 155%);
    --cf-line-height-middle: var(--middle-line-height_line-height, 130%);
    --cf-line-height-narrow: var(--narrow-line-height_line-height, 120%);

    --cf-border-radius: var(--formelement_border-radius, var(--dim_border-radius, 3px));
    --cf-border-line: var(--default-border-and-line_border, 1px solid #d8d8d8);
    --cf-field-border-width: var(--formfield_border-width, 1px);
    --cf-field-border-style: var(--formfield_border-style, solid);
    --cf-field-border-color: var(--formfield_border-color, #000);
    --cf-field-padding: var(--formelement_padding, 8px);
    --cf-field-margin-top: var(--formfield_margin-top, .1rem);

    --cf-row-gap: var(--dim_formrowgap2, .9rem);
    --cf-row-gap-large: var(--dim_formrowgap1, 1.1rem);
    --cf-column-gap: var(--dim_formcolumngap2, .9rem);
    --cf-column-gap-large: var(--dim_formcolumngap1, 1.2rem);

    max-width: 900px;
    margin: 2rem auto 0 auto;
    padding: 2rem;
    border: var(--cf-border-line);
    border-radius: var(--cf-border-radius);
    color: var(--cf-color-text);
    font-family: var(--cf-font-family);
    font-size: var(--cf-font-size);
    font-weight: var(--cf-font-weight-light);
    line-height: var(--cf-line-height-middle);
    background: var(--cf-color-white);
}

.custom-form-head {
    margin-bottom: 2rem;
}

.custom-form-title {
    margin: 0;
    font-size: var(--cf-font-size-h1);
    font-weight: var(--cf-font-weight-semibold);
    line-height: var(--cf-line-height-default);
}

.custom-form-intro {
    max-width: 900px;
    padding-top: 1rem;
    margin-bottom: 0;
    line-height: var(--cf-line-height-middle);
}

.custom-form-element {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cf-row-gap);
}

.custom-form-section {
    border-top: 1px solid var(--cf-color-grey20);
    padding-top: 1rem;
    margin-top: 1rem;
}

.custom-form-section:first-of-type {
    margin-top: 0;
}

.custom-form-section-title {
    margin: 0 0 1rem 0;
    font-size: var(--cf-font-size-h2);
    font-weight: var(--cf-font-weight-semibold);
    line-height: var(--cf-line-height-default);
}

.custom-form-repeatable-item {
    margin-bottom: 1rem;
}

.custom-form-repeatable-title {
    margin: 0 0 1rem 0;
    font-size: var(--cf-font-size-h3);
    font-weight: var(--cf-font-weight-semibold);
    line-height: var(--cf-line-height-default);
}

.custom-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--cf-column-gap);
    row-gap: var(--cf-row-gap);
}

.custom-form-field {
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: start;
    gap: .25rem;
    font-size: var(--fontsize-form_default_font-size, 1rem);
}

.custom-form-field-full {
    grid-column: 1 / -1;
}

.custom-form-label {
    font-weight: var(--cf-font-weight-light);
    line-height: var(--cf-line-height-narrow);
}

.custom-form-required {
    color: var(--cf-color-main);
    margin-left: .2rem;
    font-size: var(--cf-font-size);
}

.custom-form-hint {
    color: var(--cf-color-grey60);
    font-size: var(--cf-font-size-small);
    line-height: var(--cf-line-height-narrow);
}

.custom-form-input {
    width: 100%;
    min-height: 42px;
    border-width: var(--cf-field-border-width);
    border-style: var(--cf-field-border-style);
    border-color: var(--cf-field-border-color);
    border-radius: var(--cf-border-radius);
    padding: var(--cf-field-padding);
    margin-top: var(--cf-field-margin-top);
    font-family: var(--cf-font-family);
    font-size: var(--cf-font-size);
    font-weight: var(--cf-font-weight-normal);
    line-height: var(--cf-line-height-middle);
    color: var(--cf-color-text);
    background: var(--cf-color-white);
    box-sizing: border-box;
}

.custom-form-input[type="date"],
.custom-form-input[type="number"],
.custom-form-input[type="email"],
.custom-form-input[type="tel"],
.custom-form-input[type="text"] {
    line-height: var(--cf-line-height-middle);
}

.custom-form-input[type="date"],
.custom-form-input[type="number"] {
    padding-top: var(--cf-field-padding);
    padding-bottom: var(--cf-field-padding);
}

.custom-form-input:focus {
    border-color: var(--color_formaktivborder, var(--cf-color-grey60));
    outline: none;
    box-shadow: none;
}
/*
.custom-form-input:disabled {
    background: var(--color_forminaktivbg, var(--cf-color-grey10));
    border-color: var(--color_forminaktivborder, var(--cf-color-grey40));
    color: var(--cf-color-grey60);
}
*/
/*
 * Validation states.
 * Keep the old custom-form_bak.css behavior:
 * - invalid / missing required fields get a red border
 * - valid required fields get a light blue background
 */

.custom-form-input:not(:disabled):invalid {
    border-color: var(--cf-color-main);
}

/*
 * Required fields that validate successfully.
 * We intentionally apply the blue background only to required fields,
 * otherwise empty optional fields would also appear as "valid".
 */
.custom-form-input:not(:disabled)[required]:valid {
    background-color: var(--cf-color-valid-bg);
}

/*
 * Optional fields should stay white when empty.
 * If an optional field has content and validates, it may also get the valid background.
 */
.custom-form-input:not(:disabled):not([required]):not(:placeholder-shown):valid {
    background-color: var(--cf-color-valid-bg);
}

/*
 * Do not color file inputs like text/date/select fields.
 */
.custom-form-input[type="file"]:valid,
.custom-form-input[type="file"]:invalid {
    background-color: var(--cf-color-white);
}

/*
 * Disabled derived fields, e.g. name of part, keep the inactive look.
 */
.custom-form-input:disabled {
    background: var(--color_forminaktivbg, var(--cf-color-grey10));
    border-color: var(--color_forminaktivborder, var(--cf-color-grey40));
    color: var(--cf-color-grey60);
}

/*
 * Checkbox validation: native checkbox has no normal border box,
 * so use outline instead.
 */
.custom-form-checkbox:required:invalid {
    outline: 1px solid var(--cf-color-main);
    outline-offset: 2px;
}

.custom-form-checkbox:required:valid {
    accent-color: var(--cf-color-main);
}


.custom-form-select {
    background-color: var(--cf-color-white);
    line-height: var(--cf-line-height-narrow);
}

.custom-form-textarea {
    min-height: 8rem;
    width: 100%;
    resize: vertical;
}

.custom-form-fieldset {
    grid-column: 1 / -1;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.custom-form-fieldset legend {
    padding: 0;
    margin: 0 0 .45rem 0;
}

.custom-form-radio-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .7rem;
    border: 0;
    padding: 0;
    margin: 0;
}

.custom-form-radio-choice {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    padding: .15rem 0;
    background: transparent;
    line-height: var(--cf-line-height-narrow);
}

.custom-form-radio-choice input {
    width: auto;
    min-height: auto;
    margin: 0;
    padding: 0;
    accent-color: var(--cf-color-main);
}

.custom-form-field-checkbox {
    margin-top: .5rem;
}

.custom-form-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-size: var(--cf-font-size-small);
    line-height: var(--cf-line-height-middle);
}

.custom-form-checkbox {
    width: auto;
    margin-top: 4px;
    accent-color: var(--cf-color-main);
}

.custom-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.custom-form-repeatable-actions {
    margin-top: 1rem;
    justify-content: flex-end;
}

.custom-form-actions-submit {
    justify-content: flex-start;
    margin-top: .5rem;
}

.custom-form-button {
    min-width: 80px;
    min-height: auto;
    border: none;
    border-radius: var(--cf-border-radius);
    padding: var(--cf-field-padding);
    cursor: pointer;
    font-family: var(--cf-font-family);
    font-size: var(--cf-font-size-small);
    font-weight: var(--cf-font-weight-semibold);
    line-height: var(--cf-line-height-narrow);
    transition: all .3s;
}

.custom-form-button-secondary {
    background: var(--cf-color-grey80);
    color: var(--cf-color-button-text);
}

.custom-form-button-secondary:hover {
    background: var(--cf-color-main-hover);
    color: var(--cf-color-button-text);
}

.custom-form-button-submit {
    background: var(--cf-color-main);
    color: var(--cf-color-button-text);
}

.custom-form-button-submit:hover {
    background: var(--cf-color-main-hover);
    color: var(--cf-color-button-text);
}

.custom-form-button-remove {
    background: transparent;
    color: var(--cf-color-grey70);
    border: 1px solid var(--cf-color-grey20);
}

.custom-form-button-remove:hover {
    border-color: var(--cf-color-main);
    color: var(--cf-color-main);
}

.custom-form-complaint {
    padding-bottom: 1rem;
}

.custom-form-complaint + .custom-form-complaint {
    border-top: 1px solid var(--cf-color-grey20);
    padding-top: 1rem;
}

.custom-form-repeatable-item-hidden {
    display: none;
}

.custom-form-honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.custom-form-file {
    cursor: pointer;
}

.custom-form-file-list {
    display: grid;
    gap: .4rem;
    margin-top: .45rem;
}

.custom-form-file-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .75rem;
    align-items: center;
    padding: .45rem .6rem;
    background: var(--cf-color-grey5);
    border: 1px solid var(--cf-color-grey20);
    border-radius: var(--cf-border-radius);
    line-height: var(--cf-line-height-narrow);
}

.custom-form-file-name {
    overflow-wrap: anywhere;
}

.custom-form-file-size {
    color: var(--cf-color-grey60);
    font-size: var(--cf-font-size-small);
    margin-left: .4rem;
}

.custom-form-file-remove {
    border: 0;
    background: transparent;
    color: var(--cf-color-main);
    cursor: pointer;
    padding: .15rem .35rem;
    min-height: auto;
    font-family: var(--cf-font-family);
    font-size: var(--cf-font-size);
    font-weight: var(--cf-font-weight-semibold);
    line-height: 1;
}

.custom-form-message {
    margin-top: .5rem;
    padding: .65rem .8rem;
    border-left: 4px solid var(--cf-color-grey60);
    background: var(--cf-color-grey5);
    border-radius: var(--cf-border-radius);
    font-size: var(--cf-font-size-small);
    line-height: var(--cf-line-height-middle);
}

.custom-form-message[hidden] {
    display: none;
}

.custom-form-message-info {
    border-left-color: var(--cf-color-grey60);
}

.custom-form-message-warning {
    border-left-color: #f0ad4e;
}

.custom-form-message-error {
    border-left-color: var(--cf-color-main);
}

.custom-form-process-message {
    max-width: 900px;
    margin: 2rem auto;
}

/*
 * Keep standalone response/error messages from getting too much form spacing
 * if they are rendered as .custom-form.custom-form-process-message.
 */
.custom-form.custom-form-process-message {
    display: block;
}

@media (max-width: 900px) {
    .custom-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .custom-form-radio-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .custom-form {
        margin-top: 1rem;
        padding: 1rem;
    }

    .custom-form-grid,
    .custom-form-radio-list {
        grid-template-columns: 1fr;
    }

    .custom-form-repeatable-actions,
    .custom-form-actions-submit {
        justify-content: flex-start;
    }

    .custom-form-button {
        width: 100%;
    }
}