/* =========================================
   CALLBACK BLOCK
========================================= */

.morefx-callback {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    border-radius: 32px;

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.08);

    background-position: center right !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}


/* Белое растворение поверх фонового изображения */

.morefx-callback::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.98) 35%,
        rgba(255, 255, 255, 0.88) 52%,
        rgba(255, 255, 255, 0.25) 78%,
        rgba(255, 255, 255, 0.05) 100%
    );
}


/* Внутренний контейнер Kadence */

.morefx-callback > .kt-row-column-wrap {
    position: relative;
    z-index: 1;

    padding: 64px 60px !important;
}


/* =========================================
   TEXT
========================================= */

.morefx-callback-content {
    max-width: 650px;
}


.morefx-callback-title,
.morefx-callback-title-accent {
    margin: 0 !important;

    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
}


.morefx-callback-title {
    color: #222222;
}


.morefx-callback-title-accent {
    margin-top: 4px !important;
    color: #FA4B05;
}


.morefx-callback-text {
    max-width: 520px;
    margin-top: 28px !important;
    margin-bottom: 0 !important;

    color: #747474;
    line-height: 1.55;
}


/* =========================================
   FORM
========================================= */

.morefx-callback-form {
    max-width: 900px;
    margin-top: 32px;
}


.morefx-callback-form form {
    display: grid;

    grid-template-columns:
        minmax(180px, 1fr)
        minmax(210px, 1fr)
        auto;

    grid-template-areas:
        "name phone button"
        "consent consent consent";

    gap: 14px 16px;

    align-items: stretch;
}


/* Первое поле */

.morefx-callback-form form > .ff-el-group:nth-of-type(1) {
    grid-area: name;
}


/* Второе поле */

.morefx-callback-form form > .ff-el-group:nth-of-type(2) {
    grid-area: phone;
}


/* Согласие */

.morefx-callback-form form > .ff-el-group:has(.ff-el-form-check) {
    grid-area: consent;
}


/* Кнопка */

.morefx-callback-form .ff_submit_btn_wrapper {
    grid-area: button;
    margin: 0 !important;
}


/* Убираем стандартные отступы Fluent Forms */

.morefx-callback-form .ff-el-group {
    margin-bottom: 0;
}


/* Поля */

.morefx-callback-form input[type="text"],
.morefx-callback-form input[type="tel"],
.morefx-callback-form input[type="email"] {
    width: 100%;
    height: 68px;

    padding: 0 22px;

    border: 1px solid #D8D8D8;
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.92);

    color: #222222;
    font-size: 17px;

    box-shadow: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}


/* Placeholder */

.morefx-callback-form input::placeholder {
    color: #929292;
    opacity: 1;
}


/* Поле в фокусе */

.morefx-callback-form input[type="text"]:focus,
.morefx-callback-form input[type="tel"]:focus,
.morefx-callback-form input[type="email"]:focus {
    outline: none;

    border-color: #FA4B05;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(250, 75, 5, 0.12);
}


/* =========================================
   BUTTON
========================================= */

.morefx-callback-form .ff-btn-submit {
    position: relative;

    min-width: 250px;
    height: 68px;

    padding: 0 64px 0 30px !important;

    border: none !important;
    border-radius: 16px !important;

    background: #FA4B05 !important;

    color: #ffffff !important;
    font-size: 17px;
    font-weight: 500;

    box-shadow: none !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}


/* Стрелка */

.morefx-callback-form .ff-btn-submit::after {
    content: "→";

    position: absolute;
    top: 50%;
    right: 24px;

    transform: translateY(-52%);

    font-size: 28px;
    font-weight: 300;
    line-height: 1;
}


/* Hover кнопки */

.morefx-callback-form .ff-btn-submit:hover {
    background: #E94400 !important;

    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(250, 75, 5, 0.22) !important;
}


/* Нажатие */

.morefx-callback-form .ff-btn-submit:active {
    transform: translateY(0);
}


/* =========================================
   CONSENT
========================================= */

.morefx-callback-form .ff-el-form-check {
    margin-top: 2px;
}


.morefx-callback-form .ff-el-form-check-label {
    color: #777777;
    font-size: 13px;
    line-height: 1.4;
}


.morefx-callback-form input[type="checkbox"] {
    accent-color: #FA4B05;
}


/* =========================================
   NOTE
========================================= */

.morefx-callback-note {
    position: relative;

    max-width: 700px;
    margin-top: 20px;

    padding-left: 34px;

    color: #777777;
    font-size: 14px;
    line-height: 1.5;
}


.morefx-callback-note::before {
    content: "✓";

    position: absolute;
    top: 50%;
    left: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    border: 1.5px solid #FA4B05;
    border-radius: 50%;

    color: #FA4B05;
    font-size: 13px;
    font-weight: 600;

    transform: translateY(-50%);
}


/* =========================================
   SUCCESS MESSAGE
========================================= */

.morefx-callback-form .ff-message-success {
    padding: 20px 24px;

    border: 1px solid rgba(250, 75, 5, 0.25);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.95);

    color: #222222;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1024px) {

    .morefx-callback > .kt-row-column-wrap {
        padding: 52px 40px !important;
    }

    .morefx-callback-form form {
        grid-template-columns:
            minmax(160px, 1fr)
            minmax(190px, 1fr)
            auto;
    }

    .morefx-callback-form .ff-btn-submit {
        min-width: 220px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .morefx-callback {
        border-radius: 24px;

        background-position: center center !important;
        background-size: cover !important;
    }


    .morefx-callback::before {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.28) 190px,
            rgba(255, 255, 255, 0.94) 315px,
            rgba(255, 255, 255, 1) 400px
        );
    }


    .morefx-callback > .kt-row-column-wrap {
        padding:
            100px
            22px
            34px !important;
    }


    .morefx-callback-title,
    .morefx-callback-title-accent {
        letter-spacing: -0.025em;
    }


    .morefx-callback-text {
        margin-top: 22px !important;
    }


    .morefx-callback-form {
        margin-top: 28px;
    }


    .morefx-callback-form form {
        display: flex;
        flex-direction: column;

        gap: 14px;
    }


    .morefx-callback-form input[type="text"],
    .morefx-callback-form input[type="tel"],
    .morefx-callback-form input[type="email"] {
        height: 62px;

        padding: 0 18px;

        font-size: 16px;
    }


    .morefx-callback-form .ff-btn-submit {
        width: 100%;
        min-width: 0;
        height: 62px;

        font-size: 16px;
    }


    .morefx-callback-form .ff-el-form-check {
        order: 4;
    }


    .morefx-callback-form .ff_submit_btn_wrapper {
        order: 3;
    }


    .morefx-callback-note {
        margin-top: 22px;
        padding-left: 32px;

        font-size: 13px;
    }
}

/* =========================================
   CALLBACK FORM — FIX FLUENT FORMS LAYOUT
========================================= */

.morefx-callback-form {
    width: 100%;
    max-width: 1000px;
    margin-top: 32px;
}

.morefx-callback-form .fluentform,
.morefx-callback-form .frm-fluent-form,
.morefx-callback-form .frm-fluent-form fieldset {
    width: 100% !important;
    max-width: none !important;
}


/* Сетка должна быть именно на fieldset */

.morefx-callback-form .frm-fluent-form fieldset {
    display: grid !important;

    grid-template-columns:
        minmax(210px, 1fr)
        minmax(230px, 1fr)
        250px;

    grid-template-areas:
        "name phone button"
        "consent consent consent";

    gap: 14px 16px;
    align-items: stretch;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}


/* Первое поле: имя */

.morefx-callback-form
.frm-fluent-form
fieldset > .ff-el-group:nth-of-type(1) {
    grid-area: name;
}


/* Второе поле: телефон */

.morefx-callback-form
.frm-fluent-form
fieldset > .ff-el-group:nth-of-type(2) {
    grid-area: phone;
}


/* Согласие */

.morefx-callback-form
.frm-fluent-form
fieldset > .ff-el-group:nth-of-type(3) {
    grid-area: consent;
}


/* Кнопка */

.morefx-callback-form .ff_submit_btn_wrapper {
    grid-area: button;

    display: flex !important;
    align-items: stretch;

    margin: 0 !important;
}


/* Убираем стандартные отступы групп */

.morefx-callback-form .ff-el-group {
    margin-bottom: 0 !important;
}


/* Прячем подписи Name и Телефон.
   В полях остаются placeholder */

.morefx-callback-form .ff-el-input--label {
    display: none !important;
}


/* Поля растягиваем на всю ячейку */

.morefx-callback-form .ff-el-form-control {
    width: 100% !important;
}


/* Кнопка полностью занимает свою ячейку */

.morefx-callback-form .ff-btn-submit {
    width: 100% !important;
    height: 68px !important;
    margin: 0 !important;
}


/* Согласие */

.morefx-callback-form
fieldset > .ff-el-group:nth-of-type(3) {
    margin-top: 2px !important;
}

.morefx-callback-title,
.morefx-callback-title-accent {
    font-size: clamp(36px, 3.2vw, 54px) !important;
    line-height: 1.04 !important;
}

.morefx-callback-title-accent {
    color: #FA4B05 !important;
    margin-top: 2px !important;
}

.morefx-callback-text {
    font-size: 17px !important;
    line-height: 1.5 !important;
}

/* =========================================
   CALLBACK — TABLET
========================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .morefx-callback-form .frm-fluent-form fieldset {
        display: grid !important;

        grid-template-columns:
            minmax(150px, 1fr)
            minmax(180px, 1fr)
            minmax(210px, 0.9fr);

        grid-template-areas:
            "name phone button"
            "consent consent consent";

        gap: 12px;
        align-items: stretch;
    }

    .morefx-callback-form .ff-el-form-control {
        min-width: 0 !important;
    }

    .morefx-callback-form input[type="text"],
    .morefx-callback-form input[type="tel"],
    .morefx-callback-form input[type="email"] {
        padding-left: 18px !important;
        padding-right: 18px !important;
        font-size: 15px !important;
    }

    .morefx-callback-form .ff-btn-submit {
        width: 100% !important;
        min-width: 0 !important;

        padding-left: 18px !important;
        padding-right: 48px !important;

        font-size: 15px !important;
        white-space: nowrap;
    }

    .morefx-callback-form .ff-btn-submit::after {
        right: 18px;
    }
}

@media (max-width: 767px) {

    .morefx-callback-form .frm-fluent-form fieldset {
        display: flex !important;
        flex-direction: column;
        gap: 14px;
    }

    .morefx-callback-form .ff_submit_btn_wrapper {
        width: 100%;
    }

    .morefx-callback-form .ff-btn-submit {
        width: 100% !important;
        max-width: none;
        height: 62px !important;
    }

    .morefx-callback-title,
    .morefx-callback-title-accent {
        font-size: clamp(34px, 10vw, 46px) !important;
    }
}

/* =========================================
   CALLBACK — SPACING FIX
========================================= */

/* Убираем растягивание содержимого по высоте */
.morefx-callback .kt-inside-inner-col {
    justify-content: flex-start !important;
    gap: 0 !important;
}

/* Блок не должен иметь принудительную высоту */
.morefx-callback,
.morefx-callback > .kt-row-column-wrap {
    min-height: 0 !important;
}

/* Расстояние перед формой */
.morefx-callback-form {
    margin-top: 34px !important;
}

/* Подтягиваем нижнюю подпись к форме */
.morefx-callback-note {
    margin-top: 28px !important;
}

/* Убираем внутренние отступы абзаца */
.morefx-callback-note p {
    margin: 0 !important;
}

/* Согласие делаем чуть читабельнее */
.morefx-callback-form .ff-el-form-check-label {
    color: #666666 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* =========================================
   CALLBACK — PROJECT DESCRIPTION
========================================= */

/* Основная сетка формы */
.morefx-callback-form .frm-fluent-form fieldset {
    grid-template-columns:
        minmax(210px, 1fr)
        minmax(230px, 1fr)
        250px;

    grid-template-areas:
        "name phone button"
        "project project project"
        "consent consent consent";
}

/* Поле описания проекта */
.morefx-callback-form
.frm-fluent-form
fieldset > .ff-el-group:nth-of-type(3) {
    grid-area: project;
}

/* Согласие теперь четвёртое поле */
.morefx-callback-form
.frm-fluent-form
fieldset > .ff-el-group:nth-of-type(4) {
    grid-area: consent;
}

/* Текстовое поле */
.morefx-callback-form textarea {
    width: 100% !important;
    min-height: 110px !important;
    padding: 18px 22px !important;

    border: 1px solid #d8d8d8 !important;
    border-radius: 16px !important;

    background: rgba(255, 255, 255, 0.94) !important;

    color: #222222 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;

    resize: vertical;
    box-shadow: none !important;
}

.morefx-callback-form textarea::placeholder {
    color: #929292 !important;
    opacity: 1;
}

.morefx-callback-form textarea:focus {
    outline: none !important;
    border-color: #FA4B05 !important;
    background: #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(250, 75, 5, 0.12) !important;
}