/* ==========================================================================
   Секция «Бесплатно рассчитаем стоимость»
   Тёмная карточка, «лист» наоборот (большие углы TR и BL).
   Слева картинка с «полосами скорости» в цветах триколора, справа форма.
   ========================================================================== */

.calc__wrap { padding-inline: var(--gutter); }

.calc-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(0, .95fr) minmax(0, 1.45fr);
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  max-width: calc(var(--container) + 2 * var(--s-10));
  margin-inline: auto;
  padding: clamp(28px, 4vw, 64px);
  border-radius: var(--r-lg) var(--r-xl) var(--r-lg) var(--r-xl) / var(--r-lg) var(--r-xl-v) var(--r-lg) var(--r-xl-v);
  background:
    radial-gradient(60% 90% at 12% 50%, rgba(29, 98, 168, .55) 0%, transparent 60%),
    linear-gradient(135deg, var(--c-navy-800) 0%, var(--c-navy-900) 55%, var(--c-navy-950) 100%);
  color: var(--c-on-dark);
}

/* --- «Полосы скорости» за картинкой ------------------------------------- */
.calc-card__streaks {
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 34%;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
.calc-card__streaks i {
  position: absolute;
  left: 0;
  width: 60%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--streak, #7FA8D6));
  opacity: .7;
  animation: calc-streak 1.8s linear infinite;
}
.calc-card__streaks i:nth-child(1) { top: 12%; --streak: #fff;           animation-delay: -.2s; }
.calc-card__streaks i:nth-child(2) { top: 30%; --streak: var(--c-blue-500); animation-delay: -1.1s; width: 70%; }
.calc-card__streaks i:nth-child(3) { top: 50%; --streak: var(--c-red-400);  animation-delay: -.6s; }
.calc-card__streaks i:nth-child(4) { top: 68%; --streak: #fff;           animation-delay: -1.5s; width: 45%; }
.calc-card__streaks i:nth-child(5) { top: 86%; --streak: var(--c-blue-500); animation-delay: -.9s; }
@keyframes calc-streak {
  from { transform: translateX(120%); }
  to   { transform: translateX(-100%); }
}

/* --- Картинка ----------------------------------------------------------- */
.calc-card__visual {
  position: relative;
  display: grid;
  place-items: center;
}
.calc-card__visual::before {           /* свечение под картинкой */
  content: "";
  position: absolute;
  inset: 12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(29, 98, 168, .6), transparent 70%);
  filter: blur(30px);
}
.calc-card__visual img {
  width: 100%;
  max-width: 460px;
  height: auto;
  animation: calc-float 6s ease-in-out infinite;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45));
}
@keyframes calc-float {
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(6px); }
}
.calc-card__placeholder {
  display: grid;
  place-content: center;
  gap: 6px;
  width: min(100%, 340px);
  aspect-ratio: 1;
  border: 2px dashed rgba(255, 255, 255, .25);
  border-radius: 50%;
  text-align: center;
  color: var(--c-on-dark-muted);
  font-size: 14px;
}
.calc-card__placeholder span { font-size: 12px; color: var(--c-on-dark-faint); }

/* --- Текст -------------------------------------------------------------- */
.calc-card__title {
  margin: 0 0 16px;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.calc-card__lead { margin: 0 0 20px; color: var(--c-on-dark-muted); }
.calc-card__points { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.calc-card__points li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 600; }
.calc-card__points svg {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 7px 2px 7px 2px;
  background: rgba(224, 84, 76, .18);
  color: var(--c-red-400);
}

/* --- Форма -------------------------------------------------------------- */
.calc-form { display: grid; gap: 16px; }
.calc-form .lead-form__status { grid-area: auto; }   /* в contacts.css у статуса именованная область формы контактов */
.calc-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.calc-form__wide { grid-column: 1 / -1; }
.calc-form__submit { justify-self: start; min-height: 56px; padding-inline: 28px; }
.calc-form__submit[disabled] { opacity: .6; pointer-events: none; }
.calc-form.is-sent > :not(.lead-form__status) { display: none; }
.calc-form.is-sent .lead-form__status { font-size: var(--fs-md); }

/* многострочное поле и выпадающий список (в дизайн-системе форм) */
.input--area { min-height: 104px; padding-block: 16px; line-height: 1.5; resize: vertical; }
.select { position: relative; display: block; }
.select select { appearance: none; padding-right: 44px; cursor: pointer; }
.select select:has(option[value=""]:checked) { color: var(--c-on-dark-faint); }   /* плейсхолдер «Авто из…?» */
.select option { color: var(--c-text); }
.select svg {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--c-on-dark-muted);
  pointer-events: none;
}

/* --- Адаптив ------------------------------------------------------------ */
@media (max-width: 1180px) {
  .calc-card { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .calc-form { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .calc-card { grid-template-columns: 1fr; }
  .calc-card__visual img,
  .calc-card__placeholder { max-width: 240px; }
  .calc-card__streaks { width: 100%; top: 4%; bottom: auto; height: 240px; }
  .calc-form__grid { grid-template-columns: 1fr; }
  .calc-form__submit { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .calc-card__streaks i, .calc-card__visual img { animation: none; }
}