/* ============================================================
   consformnew-v1.css — «Запишитесь на консультацию» с формой
   ============================================================ */

/* ── Section spacing ────────────────────────────────────────── */
.consformnew-v1 { --section-pt: 0px; --section-pb: 40px; }

@media (max-width: 768px) {
    .consformnew-v1 { --section-pt: 0px; --section-pb: 40px; }
}

/* ============================================================
   CONSFORMNEW v1 — секция «Запишитесь на консультацию» с формой
   ============================================================ */

/* Мобильные br-переносы: скрыты на десктопе, показаны в @media (max-width: 768px) */
.consformnew-v1__subtitle-br { display: none; }

.consformnew-v1 {
    background: #fff;
    padding: var(--section-pt) 0 var(--section-pb);
}

/* Враппер: padding-top = высота зоны над формой (304px по Figma).
   Горизонтальный padding = 0: form-card занимает ровно 1200px, все абс. элементы
   считаются от wrap-left (= 360px на 1920px). */
.consformnew-v1__wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 304px 0 0;
    position: relative;
}

/* Заголовок — левая зона */
.consformnew-v1__title {
    position: absolute;
    top: 167px;
    left: 0;
    width: 483px;
    font-family: "LorenzoSans", Arial, sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-main-color);
    margin: 0;
}

/* Фото внутри form-card; desktop: уходит вверх на 304px (= высота зоны выше формы).
   right: 19px = 19px от правого края form-card.
   z-index: 1 — под .bg (z-index:2), т.е. нижний край перекрыт фоном карточки. */
.consformnew-v1__photo {
    position: absolute;
    top: -304px;
    right: 19px;
    width: 581px;
    height: 373px;
    display: block;
    z-index: 1;
}
.consformnew-v1__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Карточка «Ольга и Анастасия» — внутри form-card, позиционируется вверх.
   top: -142px = 4121−3959=162px (от wrap) − 304px (form-card top) = −142px от form-card top.
   left: 412px = 772−360=412px (Figma abs 772, wrap-left=form-card left=360). */
.consformnew-v1__admin-card {
    position: absolute;
    top: -142px;
    left: 412px;
    width: 270px;
    height: 107px;
    background: #fff;
    border: 1px solid #E5E9F0;
    box-shadow: 0 10px 35px rgba(152, 152, 152, 0.1);
    border-radius: 20px;
    padding: 0 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    z-index: 4;
}

.consformnew-v1__admin-name {
    font-family: "LorenzoSans", Arial, sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.26;
    letter-spacing: -0.005em;
    color: var(--text-main-color);
    margin: 0;
}

.consformnew-v1__admin-role {
    font-family: "LorenzoSans", Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--text-main-color-85);
    margin: 0;
}

/* --alt: заголовок и admin-card смещены вверх и вправо (Figma: heading top=8525, card top=8519).
   top title:  8525−8370=155px (vs 167px дефолт)
   top card:   8519−8674=−155px (vs −142px дефолт)
   left card:  1290−360=930px (vs 412px дефолт; 360=wrap-left=form-card left) */
.consformnew-v1--alt .consformnew-v1__title {
    top: 155px;
    width: 540px;
}
.consformnew-v1--alt .consformnew-v1__admin-card {
    top: -155px;
    left: 930px;
}
/* Фото сдвинуто левее: 859+581=1440, 1560−1440=120px от правого края form-card */
.consformnew-v1--alt .consformnew-v1__photo {
    right: 120px;
}

/* Карточка формы — overflow: visible → фото и admin-card выступают выше на desktop.
   Фон вынесен в дочерний .bg (z-index:2), чтобы перекрыть нижний край фото (z-index:1). */
.consformnew-v1__form-card {
    position: relative;
    z-index: 2;
    overflow: visible;
    border-radius: 20px;
    padding: 30px 35px 40px;
    box-sizing: border-box;
    min-height: 276px;
}

/* Фоновый слой: z-index:2 — поверх фото (z-index:1), закрывает его нижний край на desktop.
   На мобайле photo переопределяется в z-index:3, чтобы быть видимым поверх фона. */
.consformnew-v1__bg {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    z-index: 2;
}

/* Обёртка контента формы — z-index: 3 (выше .bg и фото) */
.consformnew-v1__form-body {
    position: relative;
    z-index: 3;
}

.consformnew-v1__form-title {
    font-family: "LorenzoSans", Arial, sans-serif;
    font-weight: 700;
    font-size: 25px;
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: #fff;
    margin: 0 0 10px;
}

.consformnew-v1__form-subtitle {
    font-family: "LorenzoSans", Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: #fff;
    margin: 0 0 25px;
}

/* Строка полей формы */
.consformnew-v1__form-row {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 15px;
}

/* Общий стиль для input-полей (name + phone внутри обёртки) */
.consformnew-v1__input {
    height: 73px;
    background: #fff;
    border: none;
    border-radius: 100px;
    padding: 0 25px;
    font-family: "LorenzoSans", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--text-main-color-85);
    outline: none;
    box-sizing: border-box;
    width: 100%;
}

.consformnew-v1__input::placeholder {
    color: rgba(28, 28, 28, 0.4);
}

/* Поле «Ваше имя» — прямой дочерний элемент form-row */
.consformnew-v1__form-row > .consformnew-v1__input {
    flex: 0 0 324px;
}

/* Обёртка для поля телефона с флагом.
   padding-left: 25px — флаг стартует в 25px от левого края (по Figma: 759−734=25px). */
.consformnew-v1__phone-wrap {
    flex: 0 0 324px;
    height: 73px;
    background: #fff;
    border-radius: 100px;
    display: flex;
    align-items: center;
    padding: 0 20px 0 25px;
    gap: 10px;
    box-sizing: border-box;
}

/* Флаг внутри обёртки телефона */
.consformnew-v1__flag {
    width: 25px;
    height: 15px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
}

/* Input телефона — сбрасываем стили, т.к. bg и border уже на обёртке */
.consformnew-v1__input--phone {
    flex: 1;
    height: auto;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

/* Кнопка отправки */
.consformnew-v1__submit {
    flex: 0 0 324px;
    height: 73px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-golden);
    border: none;
    border-radius: 100px;
    font-family: "LorenzoSans", Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: #fff;
    cursor: pointer;
    box-sizing: border-box;
    transition: opacity 0.2s;
}

.consformnew-v1__submit:hover {
    opacity: 0.9;
}

/* Текст согласия на обработку данных (Figma: left=40px от карточки, т.е. +5px к padding 35px) */
.consformnew-v1__consent {
    font-family: "LorenzoSans", Arial, sans-serif;
    font-size: 12px !important;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: #fff;
    margin: 0;
    padding-left: 5px;
    max-width: 525px;
}

.consformnew-v1__consent a {
    color: #fff;
    text-decoration: underline;
}

/* ── Мобайл ── */

@media (max-width: 768px) {
    /* Враппер: 75vw (Figma 300px на 400px базе). Центрируем через auto-margins. */
    .consformnew-v1__wrap {
        max-width: 75vw;
        margin: 0 auto;
        padding: 0;
    }

    /* Заголовок — нормальный поток (не абсолютный), над form-card */
    .consformnew-v1__title {
        position: static;
        width: auto;
        font-size: 25px;
        line-height: 1.07;
        letter-spacing: -0.01em;
        margin: 0 0 5vw; /* 5863→5937: 74px = title(54px) + gap(20px) */
    }

    /* Form-card: overflow:hidden — обрезает фото по border-radius карточки.
       min-height: 662px — строго по Figma, чтобы фото заполняло дно.
       padding: 20px 19px 0 — Figma: текст left=70, right=331 → правый зазор=19px (не 20px).
       Без этого контент = 260px вместо 261px → "минут:" уходит на 4-ю строку.
       padding-bottom: 58.25vw (= 75vw × 233/300 = высота фото) — резервирует место под фото.
       Фото bottom:0 занимает этот отступ, никогда не залезает на контент выше. */
    .consformnew-v1__form-card {
        overflow: hidden;
        min-height: 662px;
        padding: 5vw 4.75vw 58.25vw;
    }

    /* Мобильный фон — вертикальный (600×1324px), заменяет горизонтальный desktop-фон */
    .consformnew-v1__bg {
        background-image: var(--bg-mobile);
    }

    /* Форм-тайтл: 20px, 3 строки (~69px в Figma) */
    .consformnew-v1__form-title {
        font-size: 20px;
        line-height: 1.15;
        letter-spacing: -0.005em;
        margin: 0 0 2.5vw;
    }

    /* Субтайтл: 14px, 3 строки (~57px в Figma) */
    .consformnew-v1__form-subtitle {
        font-size: 14px;
        margin: 0 0 5vw;
    }
    .consformnew-v1__subtitle-br { display: inline; }

    /* Строка полей: вертикально, gaps 2.5vw */
    .consformnew-v1__form-row {
        flex-direction: column;
        gap: 2.5vw;
        margin-bottom: 2.5vw;
    }

    /* Поля ввода: 65vw × 15vw (60px ÷ 400 × 100) */
    .consformnew-v1__form-row > .consformnew-v1__input,
    .consformnew-v1__phone-wrap {
        flex: none;
        width: 65vw;
        height: 15vw;
    }

    /* Кнопка: 65vw × 15vw */
    .consformnew-v1 .consformnew-v1__submit {
        flex: none;
        width: 65vw;
        height: 15vw;
    }

    /* Figma mobile: placeholder и текст кнопки — 14px (desktop = 16px) */
    .consformnew-v1__input {
        font-size: 14px;
    }

    .consformnew-v1__submit {
        font-size: 14px;
    }

    /* Согласие: 10px, без extra padding-left */
    .consformnew-v1__consent {
        font-size: 10px !important;
        padding-left: 0;
        max-width: 65.25vw;
    }

    /* Фото: абс. низ form-card, 75vw × aspect-ratio 300/233, скругление правого нижнего угла.
       z-index:3 — поверх .bg (z-index:2). */
    .consformnew-v1__photo {
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
        width: 75vw;
        height: auto;
        aspect-ratio: 300/233;
        border-radius: 0 0 5vw 0;
        z-index: 3;
    }

    /* form-body на мобайле: z-index:4 — выше фото (z-index:3) */
    .consformnew-v1__form-body {
        z-index: 4;
    }

    /* Admin-card: поверх фото, у нижнего края form-card.
       bottom: 15px — от низа карточки (= от низа фото).
       При 375px: top = 662−74−15 = 573px = Figma. Масштабируется вместе с карточкой. */
    .consformnew-v1__admin-card {
        top: auto;
        bottom: 3.75vw;
        left: 3.75vw;
        width: 53.25vw;
        height: 18.5vw;
        border-radius: 3.75vw;
        padding: 0 3.75vw;
        z-index: 5;
    }

    .consformnew-v1__admin-name {
        font-size: 16px;
    }

    .consformnew-v1__admin-role {
        font-size: 14px;
    }

    /* --alt на мобайле: сбрасываем desktop-alt правила с повышенной специфичностью.
       padding-bottom: 58.25vw (= 75vw × 233/300) резервирует в form-card ровно высоту фото.
       Фото bottom:0 занимает этот padding-зазор — контент выше никогда не пересекается. */
    .consformnew-v1--alt .consformnew-v1__title {
        width: auto;
    }
    .consformnew-v1--alt .consformnew-v1__form-card {
        padding-bottom: 58.25vw;
    }
    .consformnew-v1--alt .consformnew-v1__photo {
        right: auto;
        height: auto;
        aspect-ratio: 300/233;
    }
    .consformnew-v1--alt .consformnew-v1__admin-card {
        left: 3.75vw;
    }
}