/*
 * Оформление формы «Конструктор регламента использования ИИ» (Gravity Forms, форма 1)
 * по макетам «Конструктор регламентов HTML».
 *
 * Про двойные классы вида .kr-stepper.kr-stepper — это не опечатка.
 * Gravity Forms подключает gravity-forms-theme-reset.min.css с правилом
 *     .gform-theme--framework :where(:not(html)…) { all: unset; display: revert }
 * Внутри :where() специфичность не растёт, поэтому вес правила — один класс.
 * Стили Gravity Forms грузятся после наших, и при равном весе побеждают они:
 * div снова становится block, span — inline, размеры и gap стираются.
 * Повтор класса поднимает вес до двух классов и решает это без !important.
 *
 * Правила самой формы привязаны к #gform_wrapper_1: вес с идентификатором reset
 * не перебивает, плюс другие формы сайта не затрагиваются.
 *
 * ВАЖНО ПРИ ПЕРЕНОСЕ: все селекторы привязаны к #gform_wrapper_1, где 1 — номер
 * формы. При импорте на другой сайт номер меняется, и стили перестают находить форму.
 * Замена в один проход:
 *     sed -i 's/#gform_wrapper_1/#gform_wrapper_НОМЕР/g' kr-form.css
 * Тот же номер надо выставить в константе KR_FORM_ID в 05-kr-form-ui.php.
 *
 * Иконки из макетов нарисованы средствами CSS: в макете они ссылались на figma.com,
 * такие ссылки на рабочем сайте не живут.
 */

#gform_wrapper_1 {
    --kr-bg:            #ffffff;
    --kr-bg-soft:       #f4f5f7;
    --kr-accent:        #216cff;
    --kr-accent-hover:  #1a5ee6;
    --kr-accent-soft:   #eff4ff;
    --kr-text:          #3c3c3c;
    --kr-text-muted:    #616161;
    --kr-text-contrast: #ffffff;
    --kr-border:        #e4e4e4;
    --kr-checkbox-border: #c9ced6;
    --kr-track:         #dee9ff;
    --kr-track-border:  #b9d0ff;
    --kr-success:       #00a632;
    --kr-success-soft:  #e6f6ec;
    --kr-font: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --kr-font-display: 'Manrope', 'Inter', -apple-system, 'Segoe UI', sans-serif;

    font-family: var(--kr-font);
    color: var(--kr-text);
    width: min(808px, calc(100vw - 48px));
    margin: 0 auto;
    box-sizing: border-box;
}

/*
 * Карточкой в макете является сама форма, а stepper — отдельная плашка над ней.
 * Поэтому фон и отступы висят на <form>, а не на обёртке.
 */
#gform_wrapper_1 form {
    background: var(--kr-bg);
    border-radius: 40px;
    padding: 48px 64px;
    box-sizing: border-box;
}

/* Экран подтверждения рендерится вне обёртки формы — переменные нужны и там */
.kr-success.kr-success,
/*
 * здесь осознанно. Reset Gravity Forms объявляет
 *     .gform-theme--framework :where(…) { all: unset; display: revert }
 * и подключается ПОСЛЕ наших стилей. Поднятия веса до двух классов достаточно
 * по правилам каскада, но any свойство, которое GF задаст в будущей версии
 * с большим весом, снова сломает раскладку. Для несущих свойств stepper
 * (display, размеры, отступы) надёжнее закрепить их жёстко — это ровно те
 * четыре строки, без которых вместо цепочки шагов получается столбик текста.
 */
.kr-stepper.kr-stepper {
    --kr-bg:            #ffffff;
    --kr-bg-soft:       #f4f5f7;
    --kr-accent:        #216cff;
    --kr-accent-soft:   #eff4ff;
    --kr-text:          #3c3c3c;
    --kr-text-muted:    #616161;
    --kr-text-contrast: #ffffff;
    --kr-border:        #e4e4e4;
    --kr-success:       #00a632;
    --kr-success-soft:  #e6f6ec;
}

#gform_wrapper_1 .gform_heading { margin: 0 0 32px; }
#gform_wrapper_1 .gform_title {
    font-family: var(--kr-font-display);
    font-size: 28px; line-height: 1.25; text-align: center; margin: 0;
}
#gform_wrapper_1 .gform_description { display: block; text-align: center; color: var(--kr-text-muted); }

/* ============ Шаги: наш stepper вместо штатного прогресс-бара ============ */

#gform_wrapper_1 .gf_progressbar_wrapper { margin: 0 0 32px; padding: 0; }
/* На странице контактов сегментов нет — пустой слот не должен давать отступ */
#gform_wrapper_1 .gf_progressbar_wrapper:empty { display: none; margin: 0; }
/* штатные «Step 1 of 6» и полоса процентов */
#gform_wrapper_1 .gf_progressbar_title,
#gform_wrapper_1 .gf_progressbar { display: none; }

.kr-stepper.kr-stepper {
    background: var(--kr-bg, #ffffff);
    border-radius: 100px;
    padding: 16px 32px;
    margin: 0 auto 24px;
    width: fit-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.kr-step.kr-step {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.kr-step-circle.kr-step-circle {
    width: 32px;
    height: 32px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

/* В макете подпись шага — класс button-2: 16px, интерлиньяж 24px, вес 600 */
.kr-step-title.kr-step-title { font-weight: 600; font-size: 16px; line-height: 24px; }

.kr-step.is-current .kr-step-circle  { background: var(--kr-accent, #216cff); color: var(--kr-text-contrast, #fff); }
.kr-step.is-current .kr-step-title   { color: var(--kr-text, #3c3c3c); }
.kr-step.is-upcoming .kr-step-circle { background: var(--kr-bg-soft, #f4f5f7); color: var(--kr-text-muted, #616161); }
.kr-step.is-upcoming .kr-step-title  { color: var(--kr-text-muted, #616161); }
.kr-step.is-done .kr-step-circle     { background: var(--kr-success, #00a632); color: transparent; font-size: 0; }
.kr-step.is-done .kr-step-title      { color: var(--kr-text, #3c3c3c); }

/* Галочка у пройденного шага — рамками, без картинки */
.kr-step.is-done .kr-step-circle::after {
    content: "";
    width: 12px;
    height: 7px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg) translate(1px, -2px);
}

.kr-step-connector.kr-step-connector {
    max-width: 24px;
    width: 1vw;
    height: 2px;
    border-radius: 1px;
    background: var(--kr-bg-soft, #f4f5f7);
    flex-shrink: 0;
}

/* Сегменты «Вопрос N из 5» */
.kr-progress.kr-progress {
    display: flex;
    gap: 8px;
    width: 100%;
    margin: 0 0 32px;
}
.kr-progress-segment.kr-progress-segment {
    flex: 1 1 0;
    min-width: 1px;
    height: 10px;
    border-radius: 8px;
    background: var(--kr-track, #dee9ff);
    border: 1px solid var(--kr-track-border, #b9d0ff);
    box-sizing: border-box;
}
.kr-progress-segment.is-active { background: var(--kr-accent, #216cff); border-color: var(--kr-accent, #216cff); }

/* ============ Вопрос ============ */

#gform_wrapper_1 .gfield--type-radio > .gfield_label,
#gform_wrapper_1 .gfield--type-checkbox > .gfield_label {
    font-family: var(--kr-font-display);
    font-size: 24px; line-height: 1.3; font-weight: 700;
    text-align: center; display: block; margin: 0 0 24px;
}
#gform_wrapper_1 .gfield_description { text-align: center; color: var(--kr-accent); font-size: 14px; }

#gform_wrapper_1 .gfield_radio,
#gform_wrapper_1 .gfield_checkbox { display: flex; flex-direction: column; gap: 12px; }

#gform_wrapper_1 .gchoice {
    background: var(--kr-bg);
    border: 1px solid var(--kr-border);
    border-radius: 16px;
    min-height: 64px;
    padding: 0;
    display: flex;
    align-items: center;
    transition: border-color .15s, background .15s;
}
#gform_wrapper_1 .gchoice:hover { border-color: var(--kr-track-border); }

/* Родной input убираем из потока, но оставляем доступным с клавиатуры */
#gform_wrapper_1 .gchoice input[type="radio"],
#gform_wrapper_1 .gchoice input[type="checkbox"] {
    position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}

#gform_wrapper_1 .gchoice label {
    position: relative;
    flex: 1 1 auto;
    display: flex; align-items: center; gap: 12px;
    padding: 20px; margin: 0;
    /* .option-label.button-2 из макета: 16px, интерлиньяж 24px, вес 600 */
    font-weight: 600; font-size: 16px; line-height: 24px;
    color: var(--kr-text);
    cursor: pointer;
}

#gform_wrapper_1 .gchoice label::before {
    content: "";
    width: 20px; height: 20px; flex-shrink: 0;
    border: 1.5px solid var(--kr-checkbox-border);
    background: #ffffff;
    box-sizing: border-box;
}
#gform_wrapper_1 .gfield_radio .gchoice label::before    { border-radius: 50%; }
#gform_wrapper_1 .gfield_checkbox .gchoice label::before { border-radius: 6px; }

#gform_wrapper_1 .gchoice:has(input:checked) {
    background: var(--kr-accent-soft);
    border: 1.5px solid var(--kr-accent);
}
#gform_wrapper_1 .gfield_radio .gchoice input:checked + label::before {
    border-color: var(--kr-accent);
    box-shadow: inset 0 0 0 5px var(--kr-accent);
}
/*
 * Здесь псевдоэлемент допустим: он висит на <label>, а не на поле ввода.
 * Но галочку всё равно рисуем фоном — так она гарантированно по центру квадрата
 * независимо от размера шрифта подписи.
 */
#gform_wrapper_1 .gfield_checkbox .gchoice input:checked + label::before {
    background-color: var(--kr-accent);
    border-color: var(--kr-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.99 10.35 L5.40 8.94 L8.23 11.77 L13.89 6.11 L15.30 7.53 L8.23 14.60 Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    background-origin: border-box;
}

#gform_wrapper_1 .gchoice input:focus-visible + label::before {
    outline: 2px solid var(--kr-accent);
    outline-offset: 2px;
}

/* ============ Контакты ============ */

#gform_wrapper_1 .gform_fields { display: flex; flex-direction: column; gap: 16px; }

#gform_wrapper_1 .gfield--type-text > .gfield_label,
#gform_wrapper_1 .gfield--type-email > .gfield_label,
#gform_wrapper_1 .gfield--type-phone > .gfield_label {
    font-weight: 500; font-size: 12px; line-height: 1.4;
    color: var(--kr-text); margin-bottom: 4px; display: block;
}

#gform_wrapper_1 .gfield--type-text input,
#gform_wrapper_1 .gfield--type-email input,
#gform_wrapper_1 .gfield--type-phone input {
    font-family: inherit; font-weight: 400; font-size: 16px; line-height: 24px;
    color: var(--kr-text); background: var(--kr-bg);
    border: 1px solid var(--kr-border); border-radius: 12px;
    height: 56px; padding: 12px 16px; width: 100%;
    outline: none; box-sizing: border-box;
}
#gform_wrapper_1 input::placeholder { color: var(--kr-text-muted); }
#gform_wrapper_1 .gfield--type-text input:focus,
#gform_wrapper_1 .gfield--type-email input:focus,
#gform_wrapper_1 .gfield--type-phone input:focus { border-color: var(--kr-accent); }

/* Согласия */
#gform_wrapper_1 .gfield--type-consent > .gfield_label { display: none; }
#gform_wrapper_1 .ginput_container_consent { display: flex; align-items: center; gap: 12px; }
/*
 * Галочка нарисована фоновым SVG, а не псевдоэлементом.
 * Контур — точная копия конструкции из макета: элемент 10×6 с рамками слева и
 * снизу по 2px, повёрнутый на -45°. Диагональный скос в стыке рамок, который
 * CSS делает сам, здесь задан вершинами многоугольника — поэтому форма
 * совпадает с макетом, а не приблизительно похожа на галочку.
 * ::before/::after на <input> ведут себя непредсказуемо, к тому же reset
 * Gravity Forms прямо объявляет input[type=checkbox]::after { content: none }.
 * Фон на поле ввода работает всегда.
 */
#gform_wrapper_1 .ginput_container_consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    background-color: #ffffff;
    background-image: none;
    border: 1.5px solid var(--kr-checkbox-border);
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
}
#gform_wrapper_1 .ginput_container_consent input[type="checkbox"]:checked {
    background-color: var(--kr-accent);
    border-color: var(--kr-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.99 10.35 L5.40 8.94 L8.23 11.77 L13.89 6.11 L15.30 7.53 L8.23 14.60 Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
    background-origin: border-box;
}
#gform_wrapper_1 .ginput_container_consent input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--kr-accent);
    outline-offset: 2px;
}
/* В макете подпись согласия — класс body-3: 16px, интерлиньяж 24px, вес 400 */
#gform_wrapper_1 .ginput_container_consent label {
    color: var(--kr-text-muted);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    margin: 0;
    cursor: pointer;
}
#gform_wrapper_1 .ginput_container_consent a { color: var(--kr-accent); }

/* ============ Кнопки ============ */

#gform_wrapper_1 .gform_page_footer,
#gform_wrapper_1 .gform_footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin: 32px 0 0; padding: 0; border: 0;
}
/*
 * На первом шаге кнопки «Назад» нет — «Далее» должна уехать вправо.
 * Gravity Forms 2.9 рисует кнопки элементом <button>, а не <input>, поэтому
 * привязка к :only-of-type по input не работала. Проще прижать «Далее» вправо
 * всегда: при двух кнопках это делает justify-content: space-between.
 */
#gform_wrapper_1 .gform_page_footer > .gform_next_button:first-child,
#gform_wrapper_1 .gform_page_footer > .gform_button:first-child,
#gform_wrapper_1 .gform_footer > .gform_button:first-child { margin-left: auto; }

#gform_wrapper_1 .gform_next_button,
#gform_wrapper_1 .gform_button {
    background: var(--kr-accent); color: var(--kr-text-contrast);
    border: 0; border-radius: 16px; height: 56px; padding: 16px 32px;
    font-family: inherit; font-weight: 600; font-size: 16px;
    cursor: pointer; white-space: nowrap;
}
#gform_wrapper_1 .gform_next_button:hover,
#gform_wrapper_1 .gform_button:hover { background: var(--kr-accent-hover); }

#gform_wrapper_1 .gform_previous_button {
    background: #ffffff; color: var(--kr-text);
    border: 1px solid var(--kr-border); border-radius: 16px;
    height: 56px; padding: 16px 32px;
    font-family: inherit; font-weight: 600; font-size: 16px;
    cursor: pointer; white-space: nowrap;
}
#gform_wrapper_1 .gform_previous_button:hover { background: var(--kr-bg-soft); }

/* ============ Экран «Заявка принята» ============ */

.kr-success.kr-success {
    background: #ffffff;
    border-radius: 40px;
    width: min(720px, calc(100vw - 48px));
    margin: 0 auto;
    padding: 56px 64px;
    display: flex; flex-direction: column; align-items: center; gap: 24px;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: #3c3c3c;
    text-align: center;
}
.kr-success__check.kr-success__check {
    width: 80px; height: 80px; border-radius: 100px;
    background: #e6f6ec;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kr-success__check::after {
    content: "";
    width: 26px; height: 14px;
    border-left: 4px solid #00a632; border-bottom: 4px solid #00a632;
    transform: rotate(-45deg) translate(2px, -4px);
}
.kr-success__body.kr-success__body {
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    width: 100%; text-align: center;
}
.kr-success__title.kr-success__title {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-size: 32px; line-height: 1.2; font-weight: 700; margin: 0;
}
.kr-success__text.kr-success__text  { color: #616161; font-size: 16px; line-height: 1.5; margin: 0; }
.kr-success__text strong { color: #3c3c3c; font-weight: 400; }
.kr-success__note.kr-success__note {
    background: #f4f5f7; border-radius: 100px; padding: 10px 20px;
    color: #616161; font-size: 14px; margin: 0;
}
.kr-success__summary.kr-success__summary {
    background: #f4f5f7; border-radius: 20px; padding: 24px;
    display: flex; flex-direction: column; gap: 12px; width: 100%; text-align: left;
    box-sizing: border-box;
}
.kr-success__summary-title.kr-success__summary-title { font-weight: 600; margin: 0; }
.kr-success__summary ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kr-success__summary li { color: #616161; padding-left: 16px; position: relative; }
.kr-success__summary li::before {
    content: ""; position: absolute; left: 0; top: 9px;
    width: 5px; height: 5px; border-radius: 50%; background: #616161;
}
.kr-success__actions.kr-success__actions { padding-top: 8px; }
.kr-success__restart.kr-success__restart {
    background: #ffffff; border: 1px solid #e4e4e4; border-radius: 16px;
    height: 56px; padding: 16px 32px;
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    color: #3c3c3c; font-weight: 600; text-decoration: none;
    box-sizing: border-box;
}
.kr-success__restart:hover { background: #f4f5f7; }

/* ============ Наследство от старого оформления ============ */
/*
 * Эти правила раньше приходили из html-полей формы 101–106 («CSS»), где одна и та же
 * простыня старого дизайна лежала шесть раз. Поля вычищаются скриптом
 * kr-clean-css-fields.sh, а то немногое, что из них действительно нужно, переехало сюда.
 */

/* Сами поля-держатели CSS не должны занимать место в разметке */
#gform_wrapper_1 .gf-css-holder {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Сводка ошибок вверху формы: в макете её нет, ошибки показываются у полей */
#gform_wrapper_1 .gform_validation_errors { display: none !important; }

/* Сообщения валидации у поля */
#gform_wrapper_1 .validation_message,
#gform_wrapper_1 .gfield_validation_message {
    font-size: 13px;
    font-weight: 500;
    color: #c24444;
    background: none;
    border: 0;
    padding: 6px 0 0;
}
#gform_wrapper_1 .gfield_error input[type="text"],
#gform_wrapper_1 .gfield_error input[type="email"],
#gform_wrapper_1 .gfield_error input[type="tel"] {
    border-color: #c24444;
}

/*
 * Пометок «(Обязательно)» в макете нет — скрываем.
 * Атрибуты aria-required у полей остаются, так что для программ чтения с экрана
 * обязательность по-прежнему объявлена, а Gravity Forms продолжает валидировать.
 */
#gform_wrapper_1 .gfield_required { display: none; }
#gform_wrapper_1 .gfield_label .gform-field-label__text { display: inline; }

/* Заголовок html-поля «Остался последний шаг» на странице контактов */
#gform_wrapper_1 .gfield--type-html h3 {
    font-family: var(--kr-font-display);
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--kr-text);
}
#gform_wrapper_1 .gfield--type-html p {
    font-size: 16px;
    line-height: 1.5;
    color: var(--kr-text-muted);
}

/* На последней странице Gravity Forms рисует кнопку «Назад» другим элементом */
#gform_wrapper_1 button.gform_previous_button {
    background: #ffffff;
    color: var(--kr-text);
    border: 1px solid var(--kr-border);
    border-radius: 16px;
    height: 56px;
    padding: 16px 32px;
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;
}
#gform_wrapper_1 button.gform_previous_button:hover { background: var(--kr-bg-soft); }
#gform_wrapper_1 button.gform_next_button,
#gform_wrapper_1 button.gform_button {
    background: var(--kr-accent);
    color: var(--kr-text-contrast);
    border: 0;
    border-radius: 16px;
    height: 56px;
    padding: 16px 32px;
    font-family: inherit;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    white-space: nowrap;
}
#gform_wrapper_1 button.gform_next_button:hover,
#gform_wrapper_1 button.gform_button:hover { background: var(--kr-accent-hover); }

/* ============ Узкие экраны ============ */


@media (max-width: 720px) {
    #gform_wrapper_1 form { padding: 32px 20px; border-radius: 24px; }
    .kr-stepper.kr-stepper { padding: 12px 16px; margin-bottom: 16px; }
    #gform_wrapper_1 .gfield--type-radio > .gfield_label,
    #gform_wrapper_1 .gfield--type-checkbox > .gfield_label { font-size: 20px; }
    #gform_wrapper_1 .gform_page_footer,
    #gform_wrapper_1 .gform_footer { flex-direction: column-reverse; align-items: stretch; }
    #gform_wrapper_1 .gform_page_footer > input,
    #gform_wrapper_1 .gform_footer > input { width: 100%; margin-left: 0; }

    .kr-stepper.kr-stepper { gap: 8px; }
    .kr-step-title.kr-step-title { display: none; }
    .kr-step.is-current .kr-step-title { display: inline; }
    .kr-success.kr-success { padding: 32px 20px; border-radius: 24px; }
}