/* Модалка заявки (.modal-request) — редизайн 16.09.2026 */

.modal-request .modal__wrap {
    max-width: 94vw;
    width: 520px !important;
}

/* display у .lead-modal__car и цены перебивает атрибут hidden, и на страницах
   без лота оставалась пустая серая плашка с тильдой. */
.lead-modal [hidden] {
    display: none !important;
}

.lead-modal {
    border-radius: 20px !important;
    max-height: 100vh;
    overflow: hidden !important;
    padding: 0 !important;
}

.lead-modal__close {
    align-items: center;
    background: var(--as-surf-a);
    border-radius: 50%;
    display: flex;
    height: 38px;
    justify-content: center;
    right: 20px;
    top: 20px;
    width: 38px;
}

.lead-modal__main {
    position: relative;
}

/* Форма: тело прокручивается, кнопка приколочена к низу — иначе при
   раскрытых пожеланиях или на низком экране она уезжает за край. */
.lead-modal__form {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: min(94vh, 940px);
}

.lead-modal__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 30px 28px 18px;
}

.lead-modal__foot {
    background: var(--as-bg);
    box-shadow: 0 -10px 18px -14px rgba(21, 2, 2, .45);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 12px;
    padding: 16px 28px 20px;
}

/* ---------- шапка ---------- */

.lead-modal__head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

html body .lead-modal__title {
    border: none;
    color: var(--as-text);
    font-size: 29px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.15;
    margin: 0;
    padding: 0 44px 0 0;
    text-transform: none;
}

.lead-modal__promise {
    align-items: center;
    color: var(--as-link-muted);
    display: flex;
    font-size: 15px;
    gap: 9px;
}

.lead-modal__promise span {
    background: var(--as-ok-bg);
    border-radius: 50%;
    flex-shrink: 0;
    height: 9px;
    width: 9px;
}

/* ---------- карточка авто ---------- */

.lead-modal__car {
    align-items: center;
    background: var(--as-surf-b);
    border-radius: 14px;
    display: flex;
    gap: 14px;
    padding: 10px;
}

.lead-modal__car-photo {
    background: var(--as-surf-h);
    border-radius: 10px;
    display: block;
    flex-shrink: 0;
    height: 84px;
    object-fit: cover;
    width: 116px;
}

.lead-modal__car-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.lead-modal__car-title {
    color: var(--as-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.lead-modal__car-specs {
    color: var(--as-link-muted);
    font-size: 13px;
    line-height: 1.4;
}

.lead-modal__car-price {
    align-items: baseline;
    display: flex;
    gap: 5px;
    margin-top: 4px;
}

.lead-modal__car-price-value {
    color: var(--as-text);
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.lead-modal__price-tilde {
    color: var(--as-muted-11);
    font-size: 18px;
    font-weight: 500;
}

.lead-modal__car-price-label {
    color: var(--as-muted-10);
    font-size: 13px;
}

.lead-modal__lead-in {
    color: var(--as-link-muted);
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: -4px;
}

/* ---------- поля ---------- */

.lead-modal__fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lead-modal__field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.lead-modal__row {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lead-modal__label {
    color: var(--as-text-12);
    font-size: 13px;
    font-weight: 600;
}

.lead-modal__label i {
    color: var(--as-brand-text);
    font-style: normal;
}

html body .lead-modal__input {
    -webkit-appearance: none;
    appearance: none;
    background: var(--as-bg);
    border: 1.5px solid var(--as-bd-11);
    border-radius: 10px;
    box-shadow: none;
    box-sizing: border-box;
    color: var(--as-text);
    font-family: inherit;
    font-size: 16px;
    height: 54px;
    line-height: 1.4;
    outline: none;
    padding: 0 16px;
    width: 100%;
}

html body .lead-modal__input::placeholder {
    color: var(--as-muted-12);
    opacity: 1;
}

html body .lead-modal__input:focus {
    border-color: var(--as-brand);
    box-shadow: 0 0 0 3px rgba(188, 0, 45, .12);
}

html body .lead-modal__select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236e6868' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 15px center;
    background-repeat: no-repeat;
    cursor: pointer;
    padding-right: 40px;
}

html body .lead-modal__textarea {
    height: auto;
    line-height: 1.5;
    max-height: 150px;
    min-height: 62px;
    padding: 12px 16px;
    resize: vertical;
}

/* ---------- способ связи ---------- */

.lead-modal__connect {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

html body .lead-modal__connect-btn {
    align-items: center;
    background: var(--as-bg);
    border: 1.5px solid var(--as-bd-11);
    border-radius: var(--as-btn-r);
    color: var(--as-text);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    gap: 10px;
    height: 54px;
    justify-content: center;
    outline: none;
    padding: 0 10px;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
    width: 100%;
}

html body .lead-modal__connect-btn.is-active {
    background: var(--as-tint-brand-6);
    border-color: var(--as-brand);
    color: var(--as-brand-text);
}

html body .lead-modal__connect-btn--max.is-active {
    color: var(--as-text);
}

.lead-modal__max-badge {
    align-items: center;
    background: var(--as-tg-bg);
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: 26px;
    justify-content: center;
    width: 26px;
}

.lead-modal__max-badge img {
    display: block;
    height: 15px;
    width: 15px;
}

.lead-modal__max-badge--big {
    height: 40px;
    width: 40px;
}

.lead-modal__max-badge--big img {
    height: 23px;
    width: 23px;
}

/* ---------- пожелания ---------- */

.lead-modal__extra {
    border-bottom: 1px solid var(--as-bd-12);
    border-top: 1px solid var(--as-bd-12);
    display: flex;
    flex-direction: column;
    padding: 4px 0;
}

html body .lead-modal__comment-toggle {
    align-items: center;
    background: none;
    border: none;
    color: var(--as-text-12);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 15px;
    gap: 12px;
    height: 52px;
    outline: none;
    padding: 0;
    text-align: left;
    width: 100%;
}

.lead-modal__plus {
    align-items: center;
    background: var(--as-surf-a);
    border-radius: 50%;
    color: var(--as-text-12);
    display: flex;
    flex-shrink: 0;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.lead-modal__comment-toggle-text {
    flex-grow: 1;
}

.lead-modal__chevron {
    flex-shrink: 0;
    transition: transform .2s ease;
}

.lead-modal__comment-wrap {
    display: none;
    padding-bottom: 14px;
}

.lead-modal__extra.is-open .lead-modal__comment-wrap {
    display: block;
}

.lead-modal__extra.is-open .lead-modal__chevron {
    transform: rotate(180deg);
}

/* ---------- капча поверх формы ---------- */

.lead-modal__captcha-layer {
    align-items: center;
    background: var(--as-veil-97);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    opacity: 0;
    padding: 24px;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    transition: opacity .15s ease;
    visibility: hidden;
    z-index: 60;
}

.lead-modal__captcha-layer.is-visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.lead-modal__captcha-card {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 340px;
    text-align: center;
}

.lead-modal__captcha-title {
    color: var(--as-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.lead-modal__captcha-note {
    color: var(--as-muted-10);
    font-size: 13px;
}

/* ---------- кнопка и низ ---------- */

html body .lead-modal__submit {
    align-items: center;
    -webkit-appearance: none;
    appearance: none;
    background: var(--as-brand);
    border: none;
    border-radius: 10px;
    color: var(--as-on-inv);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    height: 60px;
    justify-content: center;
    letter-spacing: .01em;
    text-transform: none;
    transition: background-color .2s ease;
    width: 100%;
}

html body .lead-modal__submit {
    white-space: nowrap;
}

@media (max-width: 380px) {
    html body .lead-modal__submit {
        font-size: 16px;
    }
}

html body .lead-modal__submit:hover {
    background: var(--as-err-bg);
}

html body .lead-modal__submit[disabled] {
    background: var(--as-err-bg-soft);
    cursor: default;
}

.lead-modal__gift {
    align-items: center;
    color: var(--as-brand-text);
    display: flex;
    gap: 10px;
    justify-content: center;
}

.lead-modal__gift span {
    color: var(--as-text-12);
    font-size: 14px;
}

.lead-modal__agree {
    color: var(--as-muted-10);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.lead-modal__agree a {
    color: var(--as-link-muted);
    text-decoration: underline;
}

/* ---------- экраны «спасибо» и ошибки ---------- */

.lead-modal__done {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: min(94vh, 940px);
    overflow-y: auto;
    padding: 32px 28px 26px;
}

.lead-modal__done-icon {
    align-items: center;
    background: var(--as-tint-success);
    border-radius: 50%;
    display: flex;
    height: 60px;
    justify-content: center;
    width: 60px;
}

.lead-modal__done-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lead-modal__done p {
    color: var(--as-text-13);
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

.lead-modal__done b {
    color: var(--as-text);
}

.lead-modal__offer {
    align-items: center;
    border: 1.5px solid var(--as-bd-13);
    border-radius: 12px;
    color: var(--as-brand-text);
    display: flex;
    gap: 14px;
    padding: 14px;
}

.lead-modal__offer--gift {
    background: var(--as-tint-brand-6);
    border-color: transparent;
}

.lead-modal__offer-text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 3px;
    min-width: 0;
}

.lead-modal__offer-text b {
    color: var(--as-text);
    font-size: 15px;
    line-height: 1.3;
}

.lead-modal__offer-text span {
    color: var(--as-link-muted);
    font-size: 13px;
    line-height: 1.4;
}

html body .lead-modal__offer-btn {
    align-items: center;
    background: var(--as-bg);
    border: 1.5px solid var(--as-bd-11);
    border-radius: var(--as-btn-r);
    color: var(--as-text);
    display: flex;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    height: 48px;
    justify-content: center;
    padding: 0 24px;
    text-decoration: none;
}

html body .lead-modal__offer-btn--primary {
    background: var(--as-brand);
    border-color: var(--as-brand);
    color: var(--as-on-inv);
    font-weight: 700;
}

.lead-modal__office-badge {
    align-items: center;
    background: var(--as-surf-a);
    border-radius: 50%;
    color: var(--as-text-12);
    display: flex;
    flex-shrink: 0;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.lead-modal__done-foot {
    color: var(--as-muted-10);
    font-size: 13px;
    text-align: center;
}

.lead-modal__done-foot a {
    color: var(--as-text);
    font-weight: 700;
    text-decoration: none;
}

.lead-modal .form-loader {
    align-items: center;
    background: var(--as-veil-85);
    bottom: 0;
    display: none;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
}

.lead-modal .form-loader.vis {
    display: flex;
}

/* ---------- телефон ---------- */

@media (max-width: 600px) {
    .modal-request .modal__wrap {
        max-width: 100vw;
        place-self: end stretch;
        width: 100% !important;
    }

    .lead-modal {
        border-radius: 20px 20px 0 0 !important;
    }

    .lead-modal__body {
        gap: 15px;
        padding: 24px 18px 16px;
    }

    .lead-modal__foot {
        gap: 11px;
        padding: 14px 18px 18px;
    }

    .lead-modal__done {
        gap: 16px;
        padding: 26px 18px 22px;
    }

    .lead-modal__form {
        max-height: 92vh;
    }

    html body .lead-modal__title {
        font-size: 25px;
        padding-right: 40px;
    }

    .lead-modal__car {
        gap: 12px;
    }

    .lead-modal__car-photo {
        height: 86px;
        width: 116px;
    }

    .lead-modal__car-price-value {
        font-size: 20px;
    }

    .lead-modal__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .lead-modal__offer {
        flex-wrap: wrap;
    }

    html body .lead-modal__offer-btn {
        width: 100%;
    }
}