/*
 * CF7 to Forminator mapping (theme scope: .contact-form__form--forminator):
 *
 * .row                         -> .forminator-row (one per row in Forminator builder)
 * .col-xxs-12 .col-sm-6       -> field Column Width 6/12 (two fields in same row)
 * .col-xxs-12 (full)          -> field Column Width 12/12
 * .form-col                   -> spacing comes from .forminator-field + row (no extra wrapper)
 * .form-col-btn               -> put HTML + Submit in ONE row; see comment block below
 * label + sup                -> .forminator-label (required asterisk is in label HTML)
 * .btn .btn-primary           -> Forminator Submit: Appearance -> add custom class "btn btn-primary"
 *
 * Forminator admin tips:
 * - Row 1: Name (6/12) + Email (6/12) in the same row (drag both into one row).
 * - Row 2: Subject 12/12, Row 3: Textarea 12/12.
 * - Row 4: Add "HTML" field with privacy copy (full width). Submit is always a separate row after fields
 *   (Forminator appends the button). Desktop side-by-side like old .form-col-btn is approximated by
 *   full-width HTML then a right-aligned button row.
 * - Settings -> Appearance: pick a simple style (e.g. Default) so theme CSS can override.
 */

.contact-form {
    padding: 45px 22px 85px;
    background: var(--fx-brand-colors-secondary-default);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.contact-form__heading h2 {
    line-height: 1em;
    margin: 0 0 10px;
}

.contact-form__heading p {
    color: var(--fx-brand-colors-secondary-text-and-icon);
}

.contact-form__heading {
    margin: 0 0 22px;
}

.contact-form__empty {
    margin: 0;
    font-size: var(--fx-text-font-size-paragraph);
    color: var(--fx-brand-colors-secondary-text-and-icon);
}

.contact-block__bg-icon {
    position: absolute;
    right: 22px;
    bottom: -10px;
    width: 120px;
    z-index: -1;
    height: auto;
}

/* --- Forminator: soften plugin chrome so theme controls layout --- */
.contact-form__form--forminator .forminator-ui {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.contact-form__form--forminator .forminator-custom-form {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

/* Grid: match .contact-form__area .row gutters from global.css */
.contact-form__area .contact-form__form--forminator .forminator-row {
    --fx-contact-gutter-x: 18px;
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--fx-contact-gutter-x) / -2);
    margin-right: calc(var(--fx-contact-gutter-x) / -2);
}

.contact-form__area .contact-form__form--forminator .forminator-row > [class*="forminator-col"] {
    padding-left: calc(var(--fx-contact-gutter-x) / 2);
    padding-right: calc(var(--fx-contact-gutter-x) / 2);
    box-sizing: border-box;
    width: 100%;
}

/* Stack half-columns on small screens (CF7 col-sm-6 starts at 768px) */
@media (max-width: 767px) {
    .contact-form__form--forminator .forminator-row .forminator-col-6 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }
}

/* Field spacing similar to .form-col */
.contact-form__form--forminator .forminator-row:not(:last-child) {
    margin-bottom: 17px;
}

.contact-form__form--forminator .forminator-field {
    margin-bottom: 0;
}

.contact-form__form--forminator .forminator-label {
    display: block;
    width: 100%;
    font-size: 15px;
    font-weight: 400;
    line-height: 1em;
    margin: 0 0 8px;
    color: var(--fx-brand-colors-secondary-text-and-icon);
}

.contact-form__form--forminator .forminator-label sup {
    color: var(--light-orange);
    top: 0;
    font-size: 15px;
}

.contact-form__form--forminator input.forminator-input,
.contact-form__form--forminator textarea.forminator-textarea {
    display: block;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    background: var(--white);
    color: var(--black-coffee);
    border: 1px solid rgba(5, 79, 98, 0.4);
    box-sizing: border-box;
}

.contact-form__form--forminator input.forminator-input {
    height: 41px;
    padding: 7px 15px;
    border-radius: 18px;
}

.contact-form__form--forminator input.forminator-input::placeholder,
.contact-form__form--forminator textarea.forminator-textarea::placeholder {
    color: var(--text-color);
    opacity: 1;
}

.contact-form__form--forminator textarea.forminator-textarea {
    min-height: 115px;
    height: auto;
    padding: 8px 15px;
    border-radius: 18px;
    resize: vertical;
}

.contact-form__form--forminator select:not(.select2-hidden-accessible) {
    display: block;
    width: 100%;
    font-size: 16px;
    min-height: 41px;
    padding: 7px 15px;
    border-radius: 18px;
    border: 1px solid rgba(5, 79, 98, 0.4);
    background: var(--white);
    color: var(--black-coffee);
    box-sizing: border-box;
}

.contact-form__form--forminator .forminator-description {
    margin-top: 6px;
    font-size: 14px;
    color: var(--fx-brand-colors-neutrals-light-orange, var(--light-orange));
}
.contact-form__form--forminator .forminator-response-message {
    margin: 0;
    padding: 0;
    background: none;
}

.contact-form__form--forminator .forminator-response-message.forminator-accessible {
    margin: 0;
    padding: 0;
    border-radius: 10px;
    background: var(--light-orange);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1em;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.contact-form__form--forminator .forminator-response-message.forminator-accessible ul {
    padding: 0;
    margin: 0;
    text-align: left;
}

.contact-form__form--forminator .forminator-response-message.forminator-accessible ul li {
    margin-bottom: 0;
    font-size: 14px;
}

/* Submit: match .form-col-btn .btn when .btn is added in Forminator, else fallback */
.contact-form__form--forminator .forminator-button.forminator-button-submit {
    margin-top: 0;
    position: relative;
    font-size: 15px;
    font-weight: 400;
    line-height: 1em;
    color: var(--black-coffee);
    text-decoration: none;
    padding: 16px 42px;
    border: none;
    background: var(--white);
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all ease-in-out 0.1s;
    z-index: 1;
    cursor: pointer;
}

.contact-form__form--forminator .forminator-error-message {
    font-size: 12px;
    color: #ffffff;
    background: #df1b1b;
    padding: 0 16px;
    width: 100%;
    display: block;
    margin-top: 10px;
    border: 0;
    border-radius: 4px;
}

.contact-form__form--forminator .forminator-button.forminator-button-submit:hover {
    background: var(--light-orange);
}

.contact-form__form--forminator .forminator-button.forminator-button-submit:not(.btn)::after {
    content: '\e900';
    font-family: 'renovated-icons';
    position: relative;
    right: 0;
    transform: none;
    font-weight: normal;
    font-size: 20px;
}

/* Match .form-col-btn .btn when you add custom classes "btn btn-primary" on the submit field */
.contact-form__form--forminator .forminator-button.forminator-button-submit.btn {
    background: var(--white);
}

.contact-form__form--forminator .forminator-button.forminator-button-submit.btn:hover {
    background: var(--light-orange);
}

/* HTML field (privacy copy): matches .form-col-btn p */
.contact-form__form--forminator .forminator-field-html p {
    font-size: 12px;
    color: var(--black-coffee);
    margin: 0 0 12px;
}

.contact-form__area .contact-form__form--forminator .forminator-row.text-notice a {
    color: var(--black-coffee);
}

.contact-form__area .forminator-required {
    color: var(--white);
}

.contact-form__form--forminator .forminator-row .text-notice a {
    color: var(--fx-brand-colors-primary-lighter);
}

.forminator-edit-module {
    display: none;
}

@media (min-width: 768px) {
    .contact-form__form--forminator .forminator-field-html p {
        font-size: 14px;
        margin: 0 0 15px;
    }
}

@media (min-width: 1200px) {
    /* Side-by-side privacy + submit only at desktop; float on small screens made the next row flow beside it and overlap. */
    .contact-form__form--forminator .forminator-row:has(.text-notice),
    .contact-form__area .contact-form__form--forminator .forminator-row.text-notice {
        float: right;
        width: 55%;
    }

    .contact-form__form--forminator .forminator-field-html p {
        margin: 0 0 15px;
    }

    .contact-form__form--forminator .forminator-field-html p a {
        background: linear-gradient(to bottom, var(--secondary-hover-color) 0%, var(--secondary-hover-color) 100%);
        background-position: 0 104%;
        background-repeat: repeat-x;
        background-size: 4px 0;
        color: inherit;
    }

    .contact-form__form--forminator .forminator-field-html p a:hover {
        background-size: 4px 15px;
        color: var(--black-coffee);
    }
}

/* Submit is always in its own .forminator-row-last after other fields (Forminator core markup). */
.contact-form__form--forminator .forminator-row-last {
    align-items: flex-start;
}

@media (min-width: 1200px) {
    .contact-form__form--forminator .forminator-row-last {
        display: flex;
        justify-content: flex-end;
    }

    .contact-form__form--forminator .forminator-row:has(.forminator-field-html) .forminator-field-html p {
        margin-bottom: 0;
    }
}

@media(min-width: 768px) {
    .contact-form {
        padding: 60px 32px 85px;
        border-radius: 40px;
    }

    .contact-block__bg-icon {
        right: 32px;
        bottom: -26px;
        width: 185px;
    }

    .contact-form__area .contact-form__form--forminator .forminator-row {
        --fx-contact-gutter-x: 18px;
    }

    .contact-form__form--forminator .forminator-row:not(:last-child) {
        margin-bottom: 20px;
    }

    .contact-form__form--forminator .forminator-label,
    .contact-form__form--forminator .forminator-label sup {
        font-size: 16px;
    }

    .contact-form__form--forminator input.forminator-input,
    .contact-form__form--forminator select:not(.select2-hidden-accessible) {
        height: 51px;
        padding: 10px 15px;
        border-radius: 24px;
    }

    .contact-form__form--forminator textarea.forminator-textarea {
        border-radius: 24px;
        padding: 12px 15px;
    }

    .contact-form__form--forminator .forminator-button.forminator-button-submit {
        font-size: 16px;
    }
}

@media(min-width: 1200px) {
    .contact-form {
        padding: 75px 108px;
        border-radius: 50px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 32px;
    }

    .contact-form__heading {
        width: 40%;
        max-width: 400px;
        margin: 24px 0 0;
    }

    .contact-form__area {
        width: calc(62% - 32px);
        max-width: 616px;
    }

    .contact-form__heading h2 {
        margin: 0 0 16px;
    }

    .contact-block__bg-icon {
        right: unset;
        bottom: -28px;
        width: 336px;
        left: 108px;
    }

    .contact-form__area .contact-form__form--forminator .forminator-row {
        --fx-contact-gutter-x: 32px;
    }

    .contact-form__form--forminator .forminator-row:not(:last-child) {
        margin-bottom: 30px;
    }

    .contact-form__form--forminator .forminator-label,
    .contact-form__form--forminator .forminator-label sup {
        font-size: 18px;
    }

    .contact-form__form--forminator .forminator-button.forminator-button-submit {
        font-size: 18px;
    }
}