/* ═══════════════════════════════════════════════════════════════
   theme.css — палитра и типографика в стилистике jetour-ru.com
   Подключается ПОСЛЕ main.css/responsive.css/dev.css/banner.css
   Не меняет структуру вёрстки, только цвета, шрифты, скругления.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Палитра ─── */
:root{
    --jt-accent:       #5cacb1;   /* основной акцент (бирюза JETOUR) */
    --jt-accent-hover: #37aeb3;   /* hover */
    --jt-accent-soft:  #a1cfd2;   /* active */
    --jt-text:         #2e2d2d;   /* основной текст */
    --jt-text-soft:    #5A5F65;   /* приглушённый текст */
    --jt-bg-soft:      #F5F6F9;   /* мягкий фон секций */
    --jt-border:       #E6E7E8;
    --jt-radius:       5px;       /* единый радиус */
}

/* ─── 2. Типографика ─── */
body{
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    color: var(--jt-text);
}

/* Заголовки — Russo One (плакатный шрифт JETOUR) */
h1, h2, h3,
.section-heading__text,
.modal__title,
.slide-title,
.gifts-item-box__title,
.gifts-item-content__title,
.models-carousel__title,
.futures-item__title{
    font-family: "Russo One", Arial, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0;
}

/* Tradein-форма: ОСТАВЛЯЕМ оригинальную light-типографику, меняем только шрифт на Manrope */
.tradein-form,
.tradein-form__title,
.tradein-form__desc{
    font-family: "Manrope", "Mulish", Arial, sans-serif;
}

/* Подсветка нижней полоски под заголовком — в акцент */
.section-heading:after{
    background: var(--jt-accent) !important;
    height: 3px;
    width: 90px;
}

/* ─── 3. Кнопки — единый стиль ─── */
.btn{
    border-radius: var(--jt-radius);
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-weight: 600;
    transition: .2s;
}

/* Основная кнопка — бирюзовая вместо чёрной */
.btn.btn_primary{
    background-color: var(--jt-accent);
    border-color: var(--jt-accent);
    color: #fff;
}
.btn.btn_primary:hover{
    background-color: var(--jt-accent-hover);
    border-color: var(--jt-accent-hover);
    color: #fff;
}
.btn.btn_primary:active{
    background-color: var(--jt-accent-soft);
    border-color: var(--jt-accent-soft);
}

/* Тёмная кнопка-обводка — слегка скруглим и подружим */
.btn.btn_border_dark{
    border-radius: var(--jt-radius);
    border-width: 1px;
}
.btn.btn_border_dark:hover{
    background-color: var(--jt-text);
    border-color: var(--jt-text);
}

/* Белая прозрачная кнопка тоже в одном радиусе */
.btn.btn_border_white{
    border-radius: var(--jt-radius);
}

/* ─── 4. Ссылки — hover в акцент ─── */
a:hover{ color: var(--jt-accent); }

/* Активные пункты меню — подчёркивание в акцент */
.header-main__nav-item.--active:after{
    background: var(--jt-accent) !important;
}

/* ─── 5. Цены — выделим в акцент ─── */
.catalog-item__pricing-new,
.models-carousel__pricing-main{
    color: var(--jt-accent);
}

/* Зачёркнутая старая цена — приглушаем */
.catalog-item__pricing-old{
    color: var(--jt-text-soft);
    opacity: .7;
}

/* ─── 6. Акция/тег — бирюзовый бейдж ─── */
.models-carousel__gifts{
    color: var(--jt-accent);
    font-weight: 600;
}

/* ─── 7. Формы — фокус в акцент ─── */
.main-form-input:focus,
.main-form-input:focus-visible{
    border-color: var(--jt-accent) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(92,172,177,.15);
}

/* Чекбокс — заливка в акцент */
.main-form-checkbox__input:checked + .main-form-checkbox__checkmark{
    background-color: var(--jt-accent);
    border-color: var(--jt-accent);
}

/* ─── 8. Заголовки секций — чуть смягчим uppercase ─── */
.section-heading__text{
    letter-spacing: .5px;
}

/* ─── 9. Размер заголовков — чуть аккуратнее ─── */
@media (min-width: 768px){
    .section-heading__text{ font-size: 36px; }
    .modal__title{ font-size: 28px; }
}

/* Tradein-секция: фон оригинальный (фото с закатом), ничего не трогаем */

/* ═══════════════════════════════════════════════════════════════
   Trade-in: хлебные крошки в баннере + позиция H1 снизу
   ═══════════════════════════════════════════════════════════════ */

/* Контент баннера на trade-in: крошки сверху, H1 снизу */
.jt-hero--tradein{
    height: 560px;
    min-height: 420px;
    max-height: 560px;
}
.jt-hero--tradein .jt-hero__img{
    object-position: center right;
}
.jt-hero--tradein .jt-hero__overlay{
    background: linear-gradient(90deg,
        rgba(0,0,0,.85) 0%,
        rgba(0,0,0,.55) 35%,
        rgba(0,0,0,.15) 60%,
        rgba(0,0,0,0) 90%);
}
.jt-hero--tradein .jt-hero__content{
    padding: 30px 60px 60px;
    justify-content: space-between;
}

.jt-hero__title--bottom{
    margin: 0;
    align-self: flex-start;
}

/* Хлебные крошки на баннере */
.jt-breadcrumbs{
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,.75);
    margin-bottom: auto;
    flex-wrap: wrap;
}
.jt-breadcrumbs__item{
    color: rgba(255,255,255,.75);
    text-decoration: none;
    transition: .2s;
}
a.jt-breadcrumbs__item:hover{
    color: #fff;
}
.jt-breadcrumbs__item--current{
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 12px;
}
.jt-breadcrumbs__sep{
    color: rgba(255,255,255,.45);
    font-size: 12px;
}

@media (max-width: 991px){
    .jt-hero--tradein{ height: auto; min-height: 480px; max-height: none; }
    .jt-hero--tradein .jt-hero__content{ padding: 20px 30px 40px; }
    .jt-breadcrumbs{ font-size: 12px; }
}
@media (max-width: 560px){
    .jt-hero--tradein .jt-hero__content{ padding: 20px 16px 30px; }
}

/* ═══════════════════════════════════════════════════════════════
   Секция онлайн-оценки автомобиля
   ═══════════════════════════════════════════════════════════════ */

.jt-valuation{
    padding: 80px 0;
    background: var(--jt-bg-soft);
}
.jt-valuation__title{
    font-family: "Russo One", Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 36px;
    text-align: center;
    margin: 0 0 14px;
    color: var(--jt-text);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.jt-valuation__lead{
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 16px;
    color: var(--jt-text-soft);
    text-align: center;
    max-width: 740px;
    margin: 0 auto 36px;
    line-height: 1.5;
}

/* Карточка с тремя преимуществами */
.jt-valuation__benefits{
    background: #fff;
    border-radius: 14px;
    padding: 32px 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.jt-benefit__title{
    font-family: "Russo One", Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--jt-text);
    margin: 0 0 12px;
    letter-spacing: .5px;
}
.jt-benefit__text{
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    color: var(--jt-text-soft);
    margin: 0;
}

/* Степпер (вкладки этапов) */
.jt-stepper{
    background: #fff;
    border-radius: 14px;
    padding: 0;
    display: flex;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.jt-stepper__step{
    flex: 1;
    padding: 22px 30px 22px 50px;
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #b8bdc4;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    transition: .2s;
}
.jt-stepper__step:first-child{
    padding-left: 30px;
}
/* стрелка-разделитель */
.jt-stepper__step:not(:last-child)::after{
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 30px;
    height: 30px;
    border-top: 1px solid #e6e7e8;
    border-right: 1px solid #e6e7e8;
    background: #fff;
    z-index: 2;
}
.jt-stepper__step--done{
    color: var(--jt-text);
}
.jt-stepper__step--active{
    color: var(--jt-text);
}
.jt-stepper__check{
    color: var(--jt-accent);
    font-size: 18px;
    font-weight: 700;
}
.jt-stepper__label{
    position: relative;
    z-index: 1;
}

/* Форма заполните данные */
.jt-valuation__form{
    background: #fff;
    border-radius: 14px;
    padding: 32px 40px 40px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.jt-valuation__form-title{
    font-family: "Russo One", Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 22px;
    margin: 0 0 22px;
    color: var(--jt-text);
}
.jt-valuation-form__row{
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 14px;
    align-items: stretch;
}
.jt-field{
    display: block;
    position: relative;
}
.jt-field__input{
    width: 100%;
    height: 54px;
    padding: 0 22px;
    border: 1px solid #e6e7e8;
    border-radius: 10px;
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 15px;
    color: var(--jt-text);
    background: #fff;
    outline: none;
    transition: .2s;
}
.jt-field__input::placeholder{
    color: #b8bdc4;
}
.jt-field__input:focus{
    border-color: var(--jt-accent);
    box-shadow: 0 0 0 3px rgba(92,172,177,.15);
}

/* Кнопки для секции оценки */
.jt-btn.jt-btn--dark{
    background: #000;
    border-color: #000;
    color: #fff;
    height: 54px;
    padding: 0 38px;
    border-radius: 10px;
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
}
.jt-btn.jt-btn--dark:hover{
    background: #2a2a2a;
    border-color: #2a2a2a;
    color: #fff;
}
.jt-btn.jt-btn--outline{
    background: transparent;
    border: 1px solid #e6e7e8;
    color: var(--jt-text);
    height: 48px;
    padding: 0 24px;
    border-radius: 10px;
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
}
.jt-btn.jt-btn--outline:hover{
    border-color: var(--jt-text);
    background: var(--jt-text);
    color: #fff;
}
.jt-valuation-form__alt{
    margin-top: 18px;
}

/* Адаптив */
@media (max-width: 991px){
    .jt-valuation{ padding: 50px 0; }
    .jt-valuation__title{ font-size: 26px; }
    .jt-valuation__benefits{
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
    }
    .jt-stepper{
        flex-direction: column;
    }
    .jt-stepper__step{
        padding: 16px 24px !important;
        border-bottom: 1px solid #f0f0f0;
    }
    .jt-stepper__step:last-child{ border-bottom: 0; }
    .jt-stepper__step::after{ display: none !important; }
    .jt-valuation__form{ padding: 24px; }
    .jt-valuation-form__row{
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .jt-btn.jt-btn--dark{ width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   Trade-in: уменьшаем шрифт H1 на баннере (под донор ~44px)
   ═══════════════════════════════════════════════════════════════ */
.jt-hero--tradein .jt-hero__title{
    font-size: 44px;
    line-height: 1.1;
    max-width: 720px;
    text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
@media (max-width: 991px){
    .jt-hero--tradein .jt-hero__title{ font-size: 30px; }
}
@media (max-width: 560px){
    .jt-hero--tradein .jt-hero__title{ font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   Степпер: галочка появляется только когда шаг is-done
   ═══════════════════════════════════════════════════════════════ */
.jt-stepper__step .jt-stepper__check{ display: none; }
.jt-stepper__step.is-done .jt-stepper__check{ display: inline; }
.jt-stepper__step.is-done{ color: var(--jt-text); }
.jt-stepper__step.is-active{ color: var(--jt-text); }
.jt-stepper__step.is-disabled{ color: #b8bdc4; }

/* ═══════════════════════════════════════════════════════════════
   Контент шагов — общий контейнер
   ═══════════════════════════════════════════════════════════════ */
.jt-step{ display: none; }
.jt-step[data-step-active]{ display: block; animation: jt-fade .25s ease; }
@keyframes jt-fade{
    from{ opacity:0; transform: translateY(6px); }
    to{ opacity:1; transform: translateY(0); }
}

.jt-step__actions{
    display: flex;
    gap: 14px;
    margin-top: 28px;
    flex-wrap: wrap;
}
.jt-step__actions--center{ justify-content: center; }
.jt-btn--block{ flex: 1 1 100%; }

/* ═══════════════════════════════════════════════════════════════
   ШАГ 1: карточки моделей
   ═══════════════════════════════════════════════════════════════ */
.jt-model-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 4px;
}
.jt-model-card{
    cursor: pointer;
    display: block;
}
.jt-model-card input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.jt-model-card__inner{
    display: flex;
    flex-direction: column;
    background: #f5f6f9;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: .2s;
    height: 100%;
    border: 2px solid transparent;
}
.jt-model-card:hover .jt-model-card__inner{
    background: #ecedf1;
}
.jt-model-card input:checked + .jt-model-card__inner{
    border-color: var(--jt-accent);
    background: #fff;
    box-shadow: 0 4px 16px rgba(92,172,177,.18);
}
.jt-model-card__img{
    width: 100%;
    height: 130px;
    object-fit: contain;
    padding: 18px 14px 4px;
    background: transparent;
    display: block;
}
.jt-model-card__body{
    padding: 14px 16px 18px;
    background: #fff;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}
.jt-model-card__name{
    font-family: "Russo One", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--jt-text);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.jt-model-card__price{
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 14px;
    color: var(--jt-text-soft);
}
.jt-model-card__dot{
    position: absolute;
    right: 14px;
    top: 14px;
    width: 18px;
    height: 18px;
    border: 1.5px solid #c8ccd2;
    border-radius: 50%;
    background: #fff;
    transition: .2s;
}
.jt-model-card input:checked + .jt-model-card__inner .jt-model-card__dot{
    border-color: var(--jt-accent);
    background: var(--jt-accent);
    box-shadow: inset 0 0 0 4px #fff;
}

/* ═══════════════════════════════════════════════════════════════
   ШАГ 2: сетка полей
   ═══════════════════════════════════════════════════════════════ */
.jt-fields-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.jt-field__select{
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%235A5F65' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 22px center;
    padding-right: 50px;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   ШАГ 3: сводка + чекбоксы
   ═══════════════════════════════════════════════════════════════ */
.jt-summary{
    background: #f5f6f9;
    border-radius: 12px;
    padding: 22px 26px;
    margin-bottom: 24px;
}
.jt-summary__top{
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--jt-text);
    margin-bottom: 14px;
}
.jt-summary__grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 24px;
    margin-bottom: 18px;
}
.jt-summary__row{
    display: flex;
    gap: 10px;
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 14px;
}
.jt-summary__key{ color: var(--jt-text-soft); }
.jt-summary__val{ color: var(--jt-text); font-weight: 500; }
.jt-summary__edit{ height: 40px; }

.jt-contact-form{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.jt-check{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 13px;
    color: var(--jt-text-soft);
    line-height: 1.4;
    user-select: none;
}
.jt-check__input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.jt-check__box{
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid #c8ccd2;
    border-radius: 4px;
    background: #fff;
    position: relative;
    transition: .2s;
    margin-top: 1px;
}
.jt-check__input:checked ~ .jt-check__box{
    background: var(--jt-accent);
    border-color: var(--jt-accent);
}
.jt-check__input:checked ~ .jt-check__box::after{
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.jt-check__text a{
    color: var(--jt-text);
    text-decoration: underline;
}
.jt-check__text a:hover{ color: var(--jt-accent); }

/* ═══════════════════════════════════════════════════════════════
   ШАГ 4: результат
   ═══════════════════════════════════════════════════════════════ */
.jt-result__head{
    text-align: center;
    margin-bottom: 30px;
}
.jt-result__icon{
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--jt-accent);
    color: #fff;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 0 0 8px rgba(92,172,177,.15);
}
.jt-result__title{
    font-family: "Russo One", Arial, sans-serif !important;
    font-size: 28px;
    margin: 0 0 10px;
    text-transform: uppercase;
    color: var(--jt-text);
    font-weight: 400 !important;
}
.jt-result__sub{
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    color: var(--jt-text-soft);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.5;
}

.jt-result__car{
    background: #f5f6f9;
    border-radius: 12px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 30px;
}
.jt-result__car-img{
    width: 240px;
    height: 140px;
    object-fit: contain;
    flex-shrink: 0;
}
.jt-result__car-name{
    font-family: "Russo One", Arial, sans-serif !important;
    font-size: 22px;
    color: var(--jt-text);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.jt-result__car-price{
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--jt-accent);
    margin-bottom: 4px;
}
.jt-result__car-note{
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 13px;
    color: var(--jt-text-soft);
}

.jt-result__cols{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}
.jt-result__col{
    background: #fff;
    border: 1px solid #e6e7e8;
    border-radius: 12px;
    padding: 22px 26px;
}
.jt-result__col-title{
    font-family: "Russo One", Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px;
    text-transform: uppercase;
    margin: 0 0 14px;
    color: var(--jt-text);
    letter-spacing: .5px;
}
.jt-result__list{
    margin: 0;
    padding: 0;
    list-style: none;
}
.jt-result__list li{
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 14px;
    color: var(--jt-text);
    line-height: 1.4;
    padding: 8px 0 8px 26px;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}
.jt-result__list li:last-child{ border-bottom: 0; }
.jt-result__list li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--jt-accent);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'><path d='M1.5 5l2.5 2.5L9 2' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
}

/* ═══════════════════════════════════════════════════════════════
   Адаптив
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px){
    .jt-model-grid{ grid-template-columns: repeat(2, 1fr); }
    .jt-fields-grid{ grid-template-columns: 1fr; }
    .jt-summary__grid{ grid-template-columns: 1fr 1fr; }
    .jt-result__car{ flex-direction: column; text-align: center; padding: 20px; }
    .jt-result__car-img{ width: 100%; max-width: 280px; }
    .jt-result__cols{ grid-template-columns: 1fr; }
    .jt-step__actions{ flex-direction: column-reverse; }
    .jt-step__actions .jt-btn{ width: 100%; }
}
@media (max-width: 560px){
    .jt-model-grid{ grid-template-columns: 1fr; }
    .jt-summary__grid{ grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   Credit: баннер (вариант с подзаголовком как на скриншоте 3)
   ═══════════════════════════════════════════════════════════════ */
.jt-hero--credit{
    height: 600px;
    min-height: 460px;
    max-height: 600px;
}
.jt-hero--credit .jt-hero__img{
    object-position: center right;
}
.jt-hero--credit .jt-hero__overlay{
    background: linear-gradient(90deg,
        rgba(0,0,0,.85) 0%,
        rgba(0,0,0,.55) 30%,
        rgba(0,0,0,.15) 55%,
        rgba(0,0,0,0) 85%);
}
.jt-hero--credit .jt-hero__content{
    padding: 30px 60px 60px;
    justify-content: space-between;
    max-width: 1400px;
}
.jt-hero--credit .jt-hero__title{
    font-size: 60px;
    line-height: 1.05;
    letter-spacing: .5px;
    margin-bottom: 18px;
    text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.jt-hero__subtitle--credit{
    max-width: 480px;
    font-size: 16px;
    color: rgba(255,255,255,.85);
    text-shadow: 0 1px 12px rgba(0,0,0,.5);
    margin-bottom: 0;
}

@media (max-width: 991px){
    .jt-hero--credit{ height: auto; min-height: 500px; max-height: none; }
    .jt-hero--credit .jt-hero__content{ padding: 20px 30px 50px; }
    .jt-hero--credit .jt-hero__title{ font-size: 40px; }
    .jt-hero__subtitle--credit{ font-size: 14px; }
}
@media (max-width: 560px){
    .jt-hero--credit .jt-hero__title{ font-size: 28px; }
    .jt-hero--credit .jt-hero__content{ padding: 20px 16px 30px; }
}

/* ═══════════════════════════════════════════════════════════════
   Credit-calc: общий контейнер секции
   ═══════════════════════════════════════════════════════════════ */
.jt-credit{
    padding: 80px 0;
    background: var(--jt-bg-soft);
}
.jt-credit__title{
    font-family: "Russo One", Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 36px;
    margin: 0 0 28px;
    color: var(--jt-text);
    text-transform: uppercase;
    letter-spacing: .3px;
}
.jt-credit__sub{
    font-family: "Russo One", Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 22px;
    margin: 30px 0 18px;
    color: var(--jt-text);
    text-align: center;
}
.jt-credit__sub--left{ text-align: left; margin-top: 0; }

/* Карточка выбранной модели на шаге 2 */
.jt-credit__selected{
    background: #fff;
    border-radius: 14px;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 30px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.jt-credit__selected-icon{
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--jt-accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700;
    flex-shrink: 0;
}
.jt-credit__selected-body{ flex: 1; min-width: 0; }
.jt-credit__selected-name{
    font-family: "Russo One", Arial, sans-serif;
    font-size: 18px;
    color: var(--jt-text);
    margin-bottom: 4px;
    text-transform: uppercase;
}
.jt-credit__selected-meta{
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 14px;
    color: var(--jt-text-soft);
}
.jt-credit__selected-edit{
    background: transparent;
    border: 0;
    color: var(--jt-text);
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    transition: .2s;
}
.jt-credit__selected-edit:hover{ color: var(--jt-accent); }

/* ═══════════════════════════════════════════════════════════════
   ШАГ 1: сетка карточек моделей
   ═══════════════════════════════════════════════════════════════ */
.jt-credit-step{ display: none; }
.jt-credit-step[data-step-active]{ display: block; animation: jt-fade .25s ease; }

.jt-credit-models{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 0;
}
.jt-credit-card{
    cursor: pointer;
    display: block;
}
.jt-credit-card input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.jt-credit-card__inner{
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    padding: 14px 14px 12px;
    transition: .2s;
    height: 100%;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.jt-credit-card:hover .jt-credit-card__inner{
    border-color: #e1e3e7;
}
.jt-credit-card input:checked + .jt-credit-card__inner{
    border-color: var(--jt-text);
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.jt-credit-card__img{
    width: 100%;
    height: 150px;
    object-fit: contain;
    margin-bottom: 10px;
    background: transparent;
    padding: 4px 0;
}
.jt-credit-card__name{
    display: block;
    font-family: "Russo One", Arial, sans-serif;
    font-size: 13px;
    color: var(--jt-text);
    text-transform: uppercase;
    margin-bottom: 6px;
    letter-spacing: .4px;
}
.jt-credit-card__row{
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.jt-credit-card__price{
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--jt-text);
    line-height: 1.2;
}
.jt-credit-card__payment{
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 11px;
    color: var(--jt-text-soft);
    line-height: 1.2;
}

/* ─── Двухколоночный layout шага 1: модели слева, опции справа ─── */
.jt-credit-step--split{
    display: none;
}
.jt-credit-step--split[data-step-active]{
    display: grid !important;
    grid-template-columns: 1.3fr 1fr;
    gap: 30px;
    align-items: start;
    animation: jt-fade .25s ease;
}
.jt-credit-options{
    background: #fff;
    border-radius: 14px;
    padding: 24px 28px 26px;
    position: sticky;
    top: 100px;
}
.jt-credit-options .jt-credit__sub{
    font-size: 18px;
    margin: 0 0 14px;
    text-align: left;
}
.jt-credit-options .jt-credit__sub:not(:first-child){
    margin-top: 24px;
}
.jt-credit-options .jt-radio-row{
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 0;
    justify-content: flex-start;
}
.jt-credit-options .jt-radio-row--center{
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px;
}
.jt-credit-options .jt-credit__calc-btn{
    margin: 20px 0 0;
    width: 100%;
    max-width: none;
}

/* Радио-кнопки модификации/года */
.jt-radio-row{
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    justify-content: center;
}
.jt-radio-row--center{ justify-content: center; }
.jt-radio{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 14px;
    color: var(--jt-text);
}
.jt-radio input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.jt-radio__circle{
    width: 20px; height: 20px;
    border: 1.5px solid #c8ccd2;
    border-radius: 50%;
    background: #fff;
    transition: .2s;
    position: relative;
    flex-shrink: 0;
}
.jt-radio input:checked + .jt-radio__circle{
    border-color: var(--jt-text);
    background: var(--jt-text);
    box-shadow: inset 0 0 0 4px #fff;
}

/* Большая кнопка "Рассчитать кредит" */
.jt-credit__calc-btn{
    margin-top: 8px;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}
.jt-credit__calc-btn:disabled{
    background: #c8ccd2 !important;
    border-color: #c8ccd2 !important;
    cursor: not-allowed;
}
.jt-credit__hint{
    text-align: center;
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 13px;
    color: var(--jt-text-soft);
    margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   ШАГ 2: настройки + форма
   ═══════════════════════════════════════════════════════════════ */
.jt-credit-layout{
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 30px;
    align-items: start;
}

.jt-credit-field{
    background: #fff;
    border-radius: 12px;
    padding: 18px 26px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.jt-credit-field--readonly{
    background: #ecedf1;
}
.jt-credit-field__label{
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 13px;
    color: var(--jt-text-soft);
}
.jt-credit-field__value{
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--jt-text);
}

.jt-credit-slider-block{
    background: #fff;
    border-radius: 12px;
    padding: 22px 26px 26px;
    margin-bottom: 18px;
}
.jt-credit-slider-block__head{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 14px;
    gap: 16px;
}
.jt-credit-slider-block__head .jt-credit-field{
    background: transparent !important;
    padding: 0;
    margin: 0;
}
.jt-credit-slider-block__percent{
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--jt-text);
    white-space: nowrap;
}
.jt-credit-slider-block__minmax{
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 12px;
    color: var(--jt-text-soft);
}

/* Range-slider */
.jt-range{
    --jt-range-pct: 50%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right,
        var(--jt-text) 0%, var(--jt-text) var(--jt-range-pct),
        #e1e3e7 var(--jt-range-pct), #e1e3e7 100%);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.jt-range::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    background: #fff;
    border: 2px solid var(--jt-text);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    transition: transform .15s;
}
.jt-range::-webkit-slider-thumb:hover{
    transform: scale(1.1);
}
.jt-range::-moz-range-thumb{
    width: 22px;
    height: 22px;
    background: #fff;
    border: 2px solid var(--jt-text);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* Чекбокс "Выгода по трейд-ин" */
.jt-credit-bonus{
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 18px 26px;
    cursor: pointer;
    user-select: none;
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    color: var(--jt-text);
    font-size: 15px;
}
.jt-credit-bonus__input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.jt-credit-bonus__box{
    width: 22px; height: 22px;
    border: 1.5px solid #c8ccd2;
    border-radius: 6px;
    background: #fff;
    position: relative;
    flex-shrink: 0;
    transition: .2s;
}
.jt-credit-bonus__input:checked + .jt-credit-bonus__box{
    background: var(--jt-text);
    border-color: var(--jt-text);
}
.jt-credit-bonus__input:checked + .jt-credit-bonus__box::after{
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.jt-credit-bonus__text strong{ font-weight: 700; }

/* Правая колонка — форма "Получить кредит" */
.jt-credit-layout__right{
    background: #ecedf1;
    border-radius: 14px;
    padding: 26px 28px 24px;
    position: sticky;
    top: 100px;
}
.jt-credit-aside__title{
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--jt-text);
    margin: 0 0 18px;
}
.jt-credit-form{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.jt-credit-aside__hint{
    text-align: center;
    margin-top: 14px;
    font-family: "Manrope", "Mulish", Arial, sans-serif;
    font-size: 12px;
    color: var(--jt-text-soft);
}

/* Результат — переиспользует .jt-result из trade-in */
.jt-result--credit{
    background: #fff;
    border-radius: 14px;
    padding: 60px 40px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

/* ═══════════════════════════════════════════════════════════════
   Адаптив credit
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px){
    .jt-credit-step--split[data-step-active]{ grid-template-columns: 1fr; }
    .jt-credit-options{ position: static; }
    .jt-credit-layout{ grid-template-columns: 1fr; }
    .jt-credit-layout__right{ position: static; }
}
@media (max-width: 768px){
    .jt-credit{ padding: 50px 0; }
    .jt-credit__title{ font-size: 26px; }
    .jt-credit-card__img{ height: 90px; }
    .jt-credit-options{ padding: 20px; }
    .jt-credit__selected{ padding: 16px 18px; gap: 12px; }
    .jt-credit__selected-edit{ font-size: 13px; }
    .jt-credit-slider-block{ padding: 18px; }
    .jt-credit-slider-block__head{ flex-direction: column; align-items: flex-start; gap: 8px; }
    .jt-credit-field__value{ font-size: 18px; }
    .jt-credit-layout__right{ padding: 20px; }
}
@media (max-width: 480px){
    .jt-credit-models{ grid-template-columns: 1fr; }
    .jt-credit-options .jt-radio-row--center{ flex-direction: column; gap: 10px; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════
   Финальные правки кредитного сайдбара
   ═══════════════════════════════════════════════════════════════ */

/* Кнопка "Заявка на кредит" в сайдбаре — выше и пропорциональная полям */
.jt-credit-form .jt-btn--dark{
    height: 54px;
    padding: 0 24px;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

/* Поля в сайдбаре кредита — белый фон вместо подложки */
.jt-credit-form .jt-field__input{
    background: #fff;
    border: 1px solid #e6e7e8;
}

/* Подгоняю отступы внутри карточек кредита под новую высоту фото */
.jt-credit-card__inner{
    padding: 16px 14px 14px;
}