.underline-blue {
    display: inline;
    background-image:
        linear-gradient(120deg, #095e7b, #ffffff),
        /* базовый */
        linear-gradient(120deg, #095e7b, #ff0000);
    /* при ховере */
    background-size: 100% 4px;
    background-repeat: no-repeat;
    background-position: 0 100%, 100% 100%;
    /* первый видим, второй — за границей */
    transition: background-position 0.4s ease;
}

.underline-blue:hover {
    background-position: -100% 100%, 0 100%;
    /* сдвигаем, показывая второй */
}


.underline-blue-second {
    text-decoration: underline;
    text-decoration-color: #FFFFFF;
    text-underline-offset: 9px;
    text-decoration-thickness: 6px;
    transition: color 1s ease, text-decoration-color 1s ease;
    /* сюда */
}


.h1-picker-form {
    font-size: 40px;
    margin-bottom: 0;
    color: #fff;
}

.how-it-works-2 {
    background: url('../img/bg/back5.webp') !important;
    object-fit: cover;
}

.picker-content {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
}

.picker-text-form {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.picker-image-form {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.pickerBlockWrapper {
    width: 24%;
    padding: 0.3rem;
    padding-left: 1rem;
    border-radius: 10px;
    border: 1px solid white;
}

.text-lab {
    font-size: 14px;
}

.hero-text p {
    font-weight: 200;
    font-size: 42px;
}

.hero-text p b {
    font-weight: 900;
}

.main-auto-image {
    z-index: 10;
    margin-top: -1000px;
}

.button-classic-wrapper {
    padding: 11px 35px;
    border-radius: 6px;
    background-color: #e53935 !important;
    display: flex;
    justify-content: center;
    align-items: center; /* чтобы текст был по центру по вертикали */
    width: 300px;
    color: white;
    border: none;         /* убираем рамку кнопки */
    outline: none;        /* убираем синюю обводку при клике */
    cursor: pointer;      /* делаем курсор как у кнопки */
    text-decoration: none; /* убираем подчёркивание у текста */
}

.button-classic-wrapper span {
    color: white;
}

.button-classic-wrapper:hover {
    background: #d32f2f; /* эффект при наведении */
}

.button-classic-wrapper-header {
    padding: 6px 25px;
    border-radius: 6px;
    background: #e53935;
    display: flex;
    justify-content: center;
    width: 300px;
    color: white;
    text-align: center;
}

.button-classic {
    text-align: center;
}

.afterStageButtonWrapper {
    z-index: 100;
    padding-top: 5rem;
    padding-bottom: 7rem;
    width: 100%;
    display: flex;
    justify-content: center;
}


@media (max-width: 575px) {
    .h1-picker-form-modal {
      font-size: 18px !important;
      color: #fff;
    }

    .underline-blue {
        display: inline;
        background-image:
            linear-gradient(120deg, #095e7b, #ffffff),
            /* базовый */
            linear-gradient(120deg, #095e7b, #ff0000);
        /* при ховере */
        background-size: 100% 2px;
        background-repeat: no-repeat;
        background-position: 0 100%, 100% 100%;
        /* первый видим, второй — за границей */
        transition: background-position 0.4s ease;
    }

    .underline-blue-second {
        text-decoration: underline;
        text-decoration-color: #FFFFFF;
        text-underline-offset: 12px;
        text-decoration-thickness: 2px;
        transition: color 1s ease, text-decoration-color 1s ease;
        /* сюда */
    }

    .hero-text p {
        font-weight: 200;
        font-size: 18px;
    }

    .picker-content {
        flex-direction: column;
    }

    .picker-text-form {
        flex-direction: column;
        width: 100%;
    }
    
    .pickerBlockWrapper {
        width: 100%;
        margin-bottom: 0.3rem;
    }

    .picker-block {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }


    .picker-image-form {
        width: 100%;
    }

    .picker-block {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .picker-image-form {

    }

    .car-type {
        width: 40%;
    }

    .car-type img {
        width: 100px
    }

    .button-classic-wrapper {
        width: 100%;
    }

    .h1-picker-form {
        font-size: 25px;
    }

    .button-classic-wrapper-header {
        width: 100px;
        font-size: 13px;
        padding: 6px;
        text-align: center;
    }

    .button-classic {
        width: 100%;
    }

    .button-classic span {
        width: 100%;
    }

    .executor_card {
        width: 100%;
    }

    .afterStageButtonWrapper {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .faq {
        padding-top: 3rem;
    }

    .cases {
        padding-top: 3rem
    }

    .executor {
        padding-top: 0rem
    }

    .carousel-controls {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

@media (max-width: 376px) {

    .carousel-controls {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .subtitle {
        font-size: 16px;
        font-weight: 300;
    }

    .h1-picker-form {
        font-size: 25px;
    }

    .car-picker {
        padding-bottom: 3rem;
    }

    .executor {
        padding-top: 3rem;
    }

    .picker-form {
        padding: 1rem;
    }

    .underline-blue-second {
        text-decoration: underline;
        text-decoration-color: #FFFFFF;
        text-underline-offset: 9px;
        text-decoration-thickness: 2px;
        transition: color 1s ease, text-decoration-color 1s ease;
        /* сюда */
    }

    .hero-text p {
        font-weight: 200;
        font-size: 16px;
    }
}



.loader {
    width: 48px;
    height: 48px;
    border: 3px dotted #FFF;
    border-style: solid solid dotted dotted;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation 2s linear infinite;
    vertical-align: middle;
}
.loader::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px dotted #FF3D00;
    border-style: solid solid dotted;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    animation: rotationBack 1s linear infinite;
    transform-origin: center center;
}
@keyframes rotation {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes rotationBack {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

/* disabled выглядит как активная */
.button-classic-wrapper[disabled],
.button-classic-wrapper[disabled] .button-classic { opacity:1; filter:none; cursor:default; }

/* прослойка, перехватывающая клик у заблокированной кнопки */
.submit-outer { position:relative; display:inline-block; }
.btn-guard { position:absolute; inset:0; background:transparent; pointer-events:none; border-radius:9999px; }
.btn-guard.active { pointer-events:auto; cursor:pointer; }

/* аккуратное сообщение (без рамок и фона) */
.form-hint { margin-top:8px; font-size:14px; line-height:1.4; color:#b00020; }
.form-hint.hidden { display:none; }

/* MINI-MODAL */
.mini-modal-popup { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; }
.mini-modal-popup.open { display:flex; }

.mini-modal-dialog {
  width:min(520px, 92vw);
  background:#fff; border-radius:16px; padding:20px 18px; box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.mini-modal-close {
  position:absolute; right:14px; top:10px; font-size:22px; line-height:1; background:transparent; border:none; cursor:pointer;
}

/* используем уже существующий .overlay как фон */
.overlay.visible { display:block; }

/* Оверлей под модалку */
.overlay{
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(0,0,0,.45);
  z-index: 999;              /* ниже модалки */
}
.overlay.visible{ display:block; }

/* Каркас мини-модалки */
.mini-modal-popup{
  position: fixed;
  inset: 0;
  display: none;             /* по умолчанию скрыта */
  align-items: center;
  justify-content: center;
  z-index: 1000;             /* поверх оверлея */
}
.mini-modal-popup.open{ display: flex; }

.mini-modal-dialog{
  max-width: 520px;
  width: calc(100% - 32px);
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  position: relative;
}
.mini-modal-close{
  position: absolute;
  top: 10px; right: 12px;
  font-size: 24px;
  line-height: 1;
  border: 0; background: transparent; cursor: pointer;
}


.h1-picker-form-modal {
    font-size: 24px;
    color: #fff;
}

.subtitle-modal {
    color: #fff;
}

/* если у тебя было что-то вроде: */
.custom-radio input[type="radio"]:checked + .radio-mark { /* ... */ }

/* добавь чекбоксы: */
.custom-radio input[type="checkbox"]:checked + .radio-mark { /* те же стили */ }

/* для карточек кузова: */
.car-type input[type="checkbox"]:checked + .radio-mark,
.car-type input[type="checkbox"]:checked ~ .car-label { /* те же стили, что и для radio */ }

/* показать системный чекбокс только в строке согласия */
.agree-line input[type="checkbox"]{
  display: inline-block !important;
  position: static !important;
  opacity: 1 !important;
  width: 18px; height: 18px;
  margin: 2px 8px 0 0;
  accent-color: #1a73e8; /* можно убрать, если не хотите цвет */
}
.agree-line{
  display:flex; align-items:flex-start; gap:8px;
  font-size:14px; line-height:1.4;
}
.agree-line a{ text-decoration: underline; }

.submit-outer { position: relative; }
.btn-guard { position: absolute; inset: 0; pointer-events: none; }
.btn-guard.active { pointer-events: auto; cursor: not-allowed; }

/* Бэкдроп */
.overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* Контейнер модалки */
.mini-modal-popup {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 1000;
}

/* Содержимое модалки */
.mini-modal-dialog {
  width: min(680px, 100%);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  transform: translateY(24px) scale(.98);
  opacity: 0;
  filter: blur(2px);
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    opacity .35s ease,
    filter .35s ease;
}

/* Состояние открыто */
.mini-modal-popup.open {
  opacity: 1;
  visibility: visible;
}
.mini-modal-popup.open .mini-modal-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
  filter: blur(0);
}

/* Кнопка закрытия — небольшая “микро-анимация” по ховеру */
.mini-modal-close {
  transition: transform .2s ease, opacity .2s ease;
}
.mini-modal-close:hover {
  transform: scale(1.05);
  opacity: .8;
}

/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .overlay,
  .mini-modal-popup,
  .mini-modal-dialog,
  .mini-modal-close {
    transition: none !important;
  }
}

.messengers {
    display: flex;
    width: 100%;
    justify-content:center;
    margin-top: 1rem;
    gap: 15px;
    align-items: center;
}

/* ===== ЧЕКБОКСЫ: квадрат + красная галочка ===== */

/* 1) Больше не скрываем ВСЕ input внутри .picker-form.
      Прячем только те, что внутри .custom-radio и .car-type,
      но оставляем им фокусируемость (a11y). */
.picker-form .custom-radio input[type="checkbox"],
.picker-form .car-type input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
}

/* 2) Базовый вид маркера: КВАДРАТ вместо круга */
.picker-form .radio-mark {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 2px solid var(--white-color);
  border-radius: 4px;                 /* квадрат с лёгким скруглением */
  background: transparent;
  margin-right: 10px;
  vertical-align: middle;
  position: relative;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .1s ease;
}

/* 3) Наведение: подчёркиваем интерактивность */
.custom-radio:hover .radio-mark,
.car-type:hover .radio-mark {
  border-color: #ffd6d6;              /* светлая обводка */
}

/* 4) Состояние :active — лёгкое нажатие */
.custom-radio:active .radio-mark,
.car-type:active .radio-mark {
  transform: scale(0.98);
}

/* 5) Фокус по TAB на самом input — видимое кольцо */
.picker-form .custom-radio input[type="checkbox"]:focus + .radio-mark,
.picker-form .car-type   input[type="checkbox"]:focus + .radio-mark {
  box-shadow: 0 0 0 3px rgba(179, 0, 3, .35); /* var(--red-color) с прозрачностью */
}

/* 6) ОТМЕТКА: рисуем красную галочку псевдоэлементом */
.picker-form .custom-radio input[type="checkbox"]:checked + .radio-mark::after,
.picker-form .car-type   input[type="checkbox"]:checked + .radio-mark::after {
  content: "";
  position: absolute;
  left: 5px;           /* подгон под 22×22 */
  top: 1px;
  width: 8px;
  height: 14px;
  border: 3px solid var(--red-color); /* #B30003 */
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}

/* 7) Дополнительно подсветим рамку при выбранном состоянии */
.picker-form .custom-radio input[type="checkbox"]:checked + .radio-mark,
.picker-form .car-type   input[type="checkbox"]:checked + .radio-mark {
  border-color: var(--red-color);
  background: rgba(179, 0, 3, 0.05);
}

/* 8) Тёмный фон формы: текст меток читаемый */
.picker-form .custom-radio .text-lab {
  color: #fff;
}

/* 9) Для карточек кузова (car-type) оставляем ту же логику:
      чекбокс внутри label и тот же .radio-mark */
.picker-form .car-type .radio-mark {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
  border-color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.15);
}

/* 10) Если у вас где-то осталась старая круглая версия — перебиваем её явно */
.picker-form .radio-mark { border-radius: 4px !important; }
.picker-form input:checked + .radio-mark::after { border-radius: 0 !important; background: none !important; }

/* ===== Мобильная версия: чекбокс под картинкой типа кузова ===== */
@media (max-width: 768px) {
  .picker-form .car-type {
    position: relative;
    display: flex;
    flex-direction: column;  /* вертикальное расположение */
    align-items: center;
    padding-bottom: 32px;    /* место под чекбокс */
  }

  .picker-image-form {
    margin-top: 1rem;
  }

  .car-type {
    width: 45%;
  }

  .picker-form .car-type .radio-mark {
    position: absolute;
    top: auto;               /* сброс верхнего позиционирования */
    bottom: 8px;              /* отступ снизу карточки */
    right: 50%;
    transform: translateX(50%); /* центрируем */
    background: rgba(0,0,0,.15);
    border-color: rgba(255,255,255,.85);
  }

  /* Чтобы подпись/текст был над галочкой */
  .picker-form .car-type .text-lab {
    order: -1; /* переносим текст выше картинки, если нужно */
    text-align: center;
    margin-bottom: 8px;
  }
}

/* курсор-рука даже у disabled-кнопок */
.button-classic-wrapper[disabled],
.button-classic-wrapper[disabled] .button-classic {
  cursor: pointer !important;
}

/* когда кнопка disabled — вообще не участвует в наведении */
.button-classic-wrapper[disabled] {
  pointer-events: none;
}

/* прослойка гарантированно выше и ловит ховер/клик */
.submit-outer { position: relative; }
.btn-guard {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: transparent;
  pointer-events: none;
}
.btn-guard.active {
  pointer-events: auto;
  cursor: pointer; /* будет рука, а не перечёркнутый круг */
}

/* на всякий — наследуем курсор для вложенного контента */
.button-classic, .button-classic * {
  cursor: inherit;
}

.hero-par {
  width: 60%;
}