/* RNG · раздел дисков — блок заявки в тёмной теме раздела + «живая» картинка (12.09.2026).
   Работает только внутри обёртки .rng71-quote (template_cat/wheels.php); общая форма
   на остальных страницах сайта не затрагивается. Лайм — та же переменная --wl, что в
   wheels-theme-rng.css. Откат: убрать enqueue rng-wheels71-quote и обёртку. */

.rng71-quote {
  --wl: #C6F24E;
  --wl-deep: #A9D634;
  --q-bg: #141414;
  --q-ink: #F2F2F0;
  --q-mute: rgba(242, 242, 240, .64);
  --q-line: rgba(255, 255, 255, .16);
  --q-field: rgba(255, 255, 255, .05);
}

/* --- секция: тёмная студия вместо светлого градиента --- */
.rng71-quote .home-form,
.rng71-quote .home-form.section-white {
  background: radial-gradient(120% 90% at 22% 55%, #1E1E1E 0%, var(--q-bg) 52%, #101010 100%);
  color: var(--q-ink);
}
.rng71-quote .home-form::before { display: none; }

/* --- типографика формы в системе раздела --- */
.rng71-quote .home-form__title {
  color: var(--q-ink);
  font-family: 'Saira Condensed', system-ui, sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: .98;
}
.rng71-quote .home-form__text { color: var(--q-mute); }
.rng71-quote .home-form__text hr { display: none; }

/* подпись «Вы смотрели · RNG S04 · Silver · изменить» (создаётся JS) */
.rng71-quote .rng71-pick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--q-mute);
}
.rng71-quote .rng71-pick__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--wl);
  box-shadow: 0 0 0 4px rgba(198, 242, 78, .18);
}
.rng71-quote .rng71-pick b { color: var(--q-ink); font-weight: 600; }
.rng71-quote .rng71-pick__change {
  color: var(--wl);
  text-decoration: none;
  border-bottom: 1px solid rgba(198, 242, 78, .4);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
.rng71-quote .rng71-pick__change:hover { color: var(--wl-deep); border-bottom-color: currentColor; }

/* --- поля --- */
.rng71-quote .home-form__input input {
  background: var(--q-field);
  border-color: var(--q-line);
  color: var(--q-ink);
}
.rng71-quote .home-form__input input::placeholder { color: rgba(242, 242, 240, .55); }
.rng71-quote .home-form__input input:focus { border-color: var(--wl); }
.rng71-quote .home-form__input input:-webkit-autofill {
  -webkit-text-fill-color: var(--q-ink);
  -webkit-box-shadow: 0 0 0 1000px #1E1E1E inset;
}
/* выпадашка кода страны (intl-tel-input) */
.rng71-quote .iti__selected-flag { background: transparent; }
.rng71-quote .iti__selected-dial-code,
.rng71-quote .iti__arrow { color: var(--q-ink); border-top-color: var(--q-ink); }
.rng71-quote .iti__country-list { background: #1E1E1E; color: var(--q-ink); border-color: var(--q-line); }
.rng71-quote .iti__country.iti__highlight { background: rgba(255, 255, 255, .08); }

/* зона загрузки фото */
.rng71-quote .home-form__upload-label,
.rng71-quote .section-white .home-form__upload-label {
  color: var(--q-mute);
  border-color: var(--q-line);
  background: rgba(255, 255, 255, .04);
}
.rng71-quote .home-form__upload-label:hover,
.rng71-quote .section-white .home-form__upload-label:hover {
  border-color: var(--wl);
  background: rgba(198, 242, 78, .06);
}
.rng71-quote .home-form__upload-area.drag-over .home-form__upload-label {
  border-color: var(--wl);
  background: rgba(198, 242, 78, .1);
}

/* согласие */
.rng71-quote .agree_wrap,
.rng71-quote .agree_wrap a { color: rgba(242, 242, 240, .45); }
.rng71-quote .agree_wrap a:hover { color: var(--q-ink); }
.rng71-quote .acceptance_label { background: rgba(255, 255, 255, .12); }

/* кнопка Send: лаймовый контур вместо красного, hover — заливка лаймом */
.rng71-quote .btn {
  background: transparent; /* у <button> дефолтный buttonface #efefef, на светлой секции его не видно */
  border-color: var(--wl);
  color: var(--q-ink);
}
.rng71-quote .btn img { filter: brightness(0) invert(1); }
.rng71-quote .btn:hover {
  background: var(--wl);
  border-color: var(--wl);
  color: #141414;
}
.rng71-quote .btn:hover img { filter: none; }

/* --- картинка диска: рендер на тёмной студии, растворяем края маской --- */
.rng71-quote .home-form .home-form__img {
  left: max(1vw, calc(50% - 860px));
  right: auto;
  bottom: 50%;
  transform: translateY(50%);
  width: min(48vw, 92vh);
  max-width: none;
  height: auto;
  opacity: 1;
  transition: opacity .22s ease;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 50%, rgba(0, 0, 0, 0) 70%);
          mask-image: radial-gradient(circle at 50% 50%, #000 50%, rgba(0, 0, 0, 0) 70%);
}
.rng71-quote .home-form .home-form__img.is-swapping { opacity: 0; }

@media (max-width: 1400px) {
  .rng71-quote .home-form .home-form__img { width: min(52vw, 92vh); }
}

/* мобильный: тема прячет картинку ≤992 и показывает 485px под формой — оставляем
   её схему, но с маской и без выезда за экран */
@media (max-width: 992px) {
  .rng71-quote .home-form .home-form__img {
    display: block;
    position: absolute;
    left: 50%;
    right: auto;
    bottom: -20px;
    transform: translateX(-50%);
    width: min(82vw, 420px);
  }
  .rng71-quote .home-form { padding-bottom: min(82vw, 420px) !important; }
  .rng71-quote .rng71-pick { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .rng71-quote .home-form .home-form__img { transition: none; }
}