/* calc_v2/static/calc_v2/css/calc.css */

/* ====== Local tokens ====== */
.calc-v2{
  --calc-gap: var(--space-38);
  --calc-inner: var(--space-38);
  --calc-card-pad: var(--space-24);
  --calc-radius: var(--border-radius-large);

  --calc-border: 1px solid var(--text-color);
  --calc-border-soft: 1px solid rgba(255,255,255,.25);
  --calc-soft: rgba(0,0,0,.12);

  --calc-toggle-active: #006666;
  --calc-success: #1FA776;
  --calc-selected: var(--accent-color);

  --title-lines: 2;
  --title-lh: 1.25;
  --title-h: 3.2em;
  --title-max-h: 2.5em;

  /* частые rgba */
  --w25: rgba(255,255,255,.25);
  --w55: rgba(255,255,255,.55);
  --w18: rgba(255,255,255,.18);
  --w92: rgba(255,255,255,.92);
}

/* ====== Isolation ====== */
.calc-v2,
.calc-v2 * ,
.calc-v2 *::before,
.calc-v2 *::after{ box-sizing: border-box; }

.calc-v2 img{ max-width: 100%; height: auto; display: block; }

/* ====== Reduced motion ====== */
@media (prefers-reduced-motion: reduce){
  .calc-v2 *,
  .calc-v2 *::before,
  .calc-v2 *::after{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ====== Typography ====== */
.calc-title{ margin: 0 0 var(--calc-gap) 0; line-height: 1; }

.section-title{
  margin: 0;
  font: 300 var(--font-size-xlarge) / 1.2 'Roboto', sans-serif;
}

/* ====== Layout ====== */
.calc-container{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--calc-gap);
  align-items: start;
  margin-bottom: 76px;
}

.left-block,
.right-block{
  display: grid;
  gap: var(--calc-gap);
  min-width: 0;
}

.calc-block{
  display: grid;
  gap: var(--calc-gap);
  min-width: 0;
}

/* ====== Sections ====== */
.calc-section,
.calc-section-nobrder{
  background: var(--primary-color);
  border: none;
  border-radius: var(--calc-radius);
  width: 100%;
  min-width: 0;
}

.calc-section{ padding: var(--calc-inner); }
.calc-section--bordered{ border: var(--calc-border); }

/* ====== Route ====== */
.route-group{
  display: flex;
  width: 100%;
  min-width: 0;
  border: var(--calc-border);
  border-radius: var(--calc-radius);
  overflow: hidden;
}

.route-field{
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--space-5);
  padding: var(--space-15) var(--space-24);
  cursor: text;
}

/* модификаторы используются в HTML — оставляем */
.route-field--from{}
.route-field--to{}

.route-field + .route-field{ border-left: 1px solid var(--w25); }

.route-label{
  opacity: 0.9;
  font-size: var(--font-size-medium);
}

.route-input{
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-color);
  padding: 0;
  font: 300 var(--font-size-large) / 1.2 'Roboto', sans-serif;
}

.route-input::placeholder{ color: var(--w55); }

/* ====== Mode switch ====== */
.transport-mode{
  display: flex;
  margin-bottom: var(--calc-gap);
  background: var(--calc-soft);
  border: var(--calc-border);
  border-radius: var(--calc-radius);
  padding: var(--space-5);
  gap: 0;
}

.transport-mode .mode-btn{
  flex: 1;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.85);
  border-radius: calc(var(--calc-radius) - 6px);
  padding: var(--space-15) var(--space-10);
  font: 300 var(--font-size-large) / 1.2 'Roboto', sans-serif;
  cursor: pointer;
}

.transport-mode .mode-btn.is-active{
  background: var(--calc-toggle-active);
  color: var(--text-color);
}

/* ====== Swiper ====== */
.calc-v2 .fleet-carousel{ position: relative; width: 100%; min-width: 0; }
.calc-v2 .fleet-swiper{ width: 100%; min-width: 0; overflow: hidden; }

.calc-v2 .swiper-wrapper{ align-items: stretch; }
.calc-v2 .swiper-slide{ height: auto; display: flex; }
.calc-v2 .swiper-slide > *{ width: 100%; }
.calc-v2 .swiper-slide .fleet-card{ height: 100%; }

/* ====== Fleet nav ====== */
.calc-v2 .fleet-nav{
  display: flex;
  align-items: center;
  gap: var(--space-15);
  width: 100%;
  margin: var(--space-24) auto 0;
}

.calc-v2 .fleet-progress{
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: var(--w25);
  overflow: hidden;
}

.calc-v2 .fleet-progress__bar{
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent-color);
  border-radius: 999px;
  transition: width 120ms linear;
}

.calc-v2 .fleet-prev,
.calc-v2 .fleet-next{
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: var(--calc-radius);
  border: var(--calc-border-soft);
  background: var(--calc-soft);
  color: var(--text-color);
  cursor: pointer;
}

.calc-v2 .fleet-prev:disabled,
.calc-v2 .fleet-next:disabled{
  opacity: 0.45;
  cursor: default;
}

/* ====== Card ====== */
.calc-v2 .fleet-card{
  border: var(--calc-border);
  border-radius: var(--calc-radius);
  padding: var(--calc-card-pad);
  min-width: 0;
  height: 100%;
  display: grid;
  gap: var(--calc-card-pad);
  grid-template-rows: var(--title-h) auto 1fr auto;
}

.calc-v2 .fleet-card.is-selected{
  box-shadow: none;
  border: 2px solid var(--accent-color);
}

.calc-v2 .fleet-card__title{
  margin: 0;
  text-align: center;
  font: 300 var(--font-size-xlarge) / var(--title-lh) 'Roboto', sans-serif;
  height: var(--title-h);
  overflow: hidden;
  padding: .15em 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--title-lines);
}

@supports not (-webkit-line-clamp: 2){
  .calc-v2 .fleet-card__title{
    display: block;
    max-height: var(--title-max-h);
  }
}

.calc-v2 .fleet-card__img{
  width: 100%;
  border-radius: var(--calc-radius);
  overflow: hidden;
  background: var(--calc-soft);
  aspect-ratio: 16 / 9;
  padding: var(--space-10);
  display: flex;
  align-items: center;
  justify-content: center;
}

.calc-v2 .fleet-card__img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.92);
  transform-origin: center;
}

.calc-v2 .fleet-card__specs{
  display: grid;
  gap: var(--space-10);
  font-size: var(--font-size-medium);
  color: var(--w92);
}

.calc-v2 .fleet-spec{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-10);
  align-items: baseline;
}

.calc-v2 .fleet-spec__label{ white-space: nowrap; opacity: 0.7; }
.calc-v2 .fleet-spec__value{ opacity: 0.7; }

.calc-v2 .fleet-card__footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  margin-top: var(--space-5);
}

.calc-v2 .fleet-card__price{
  font-weight: 700;
  font-size: var(--font-size-xlarge);
  white-space: nowrap;
}

/* ====== Card select button ====== */
.calc-v2 .fleet-card__btn{
  width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--w25);
  background: var(--calc-soft);
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 0;
  line-height: 0;
  position: relative;
}

.calc-v2 .fleet-card__btn.is-active{
  background: var(--calc-toggle-active);
  border-color: var(--calc-toggle-active);
  cursor: default;
}

.calc-v2 .fleet-card__btn.is-active::before{
  content: "";
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ====== Anti-FOUC: прячем карусель до инициализации Swiper ====== */
.calc-v2 .fleet-carousel{
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease;
}

.calc-v2 .fleet-carousel.is-ready{
  opacity: 1;
  visibility: visible;
}

/* ====== Loaders ====== */
.calc-v2 .loader-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-15);
  padding: var(--space-10) 0;
}

.calc-v2 .loader-row__label{} /* используется в HTML — оставляем */

.calc-v2 .calc-section--bordered .loader-row + .loader-row{ margin-top: 18px; }

.calc-v2 .loader-title{ font-weight: 300; font-size: var(--font-size-xlarge); }
.calc-v2 .loader-subtitle{ opacity: 0.7; font-size: var(--font-size-medium); }

.calc-v2 .counter{ display: flex; align-items: center; gap: var(--space-10); }

.calc-v2 .counter-btn{
  width: 50px;
  height: 50px;
  border-radius: var(--calc-radius);
  border: var(--calc-border-soft);
  background: var(--calc-soft);
  color: var(--text-color);
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-3xlarge);
  font-weight: 300;
  cursor: pointer;
}

.calc-v2 .counter-value{
  min-width: 18px;
  text-align: center;
  font-weight: 300;
  font-size: var(--font-size-xlarge);
}

/* ====== Price ====== */
.calc-v2 .total-line{ margin: 0 0 var(--space-15); }
.calc-v2 .total-price{ font-size: var(--font-size-7xlarge); font-weight: 700; }

.calc-v2 .price-breakdown{
  display: grid;
  gap: var(--space-10);
  opacity: 0.7;
}

.calc-v2 .price-breakdown .row{
  display: flex;
  justify-content: space-between;
  gap: var(--space-10);
  border-bottom: 1px solid var(--w18);
  padding-bottom: var(--space-10);
}

/* discount row */
.calc-v2 .price-breakdown .row.discount-row{
  position: relative;
  opacity: 1;
  border-bottom: 0;
  padding-bottom: 0;
}

.calc-v2 .price-breakdown .row.discount-row::before{
  content: "";
  position: absolute;
  inset: -6px -10px;
  border-radius: 38px;
  background: rgba(255,255,255,.10);
  z-index: 0;
}

.calc-v2 .price-breakdown .row.discount-row > *{
  position: relative;
  z-index: 1;
  opacity: 1;
}

.calc-v2 .price-breakdown .row.discount-row #discount-sum{ font-weight: 700; }

.calc-v2 .included{ margin-top: var(--space-15); }
.calc-v2 .included-title{ font-weight: 600; margin: var(--space-24) 0 var(--space-10); }
.calc-v2 .included ul{ margin: 0; padding-left: var(--space-15); }

/* ====== Buttons ====== */
.calc-v2 .button-group{ display: flex; flex-direction: column; gap: var(--space-15); }

.calc-v2 .primary-btn,
.calc-v2 .secondary-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-15);
  border-radius: var(--calc-radius);
  text-decoration: none;
  font-size: var(--font-size-large);
}

.calc-v2 .primary-btn{ background: var(--calc-success); color: var(--text-color); }
.calc-v2 .secondary-btn{ background: var(--button-bg-color); color: var(--primary-color); }

.calc-v2 .small-note{
  margin-top: var(--space-10);
  opacity: 0.6;
  font-size: var(--font-size-small);
  text-align: center;
}

/* в HTML есть text-link — безопасно фиксируем, чтобы не зависеть от base */
.calc-v2 .text-link{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ====== Send request pill ====== */
.calc-v2 form.send-request-pill{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-15) var(--space-24);
  border-radius: var(--calc-radius);
  border: 0;
  background: var(--calc-success);
  color: var(--text-color);
  font-size: var(--font-size-large);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.calc-v2 .send-request-pill__label{
  display: block;
  width: 100%;
  text-align: center;
}

.calc-v2 .send-request-pill__input,
.calc-v2 .send-request-pill__submit{ display: none; }

/* раскрыто: белая форма */
.calc-v2 form.send-request-pill.is-expanded{
  background: var(--button-bg-color);
  color: var(--primary-color);
}

.calc-v2 form.send-request-pill.is-expanded .send-request-pill__label{ display: none; }
.calc-v2 form.send-request-pill.is-expanded .send-request-pill__input{ display: block; }
.calc-v2 form.send-request-pill.is-expanded .send-request-pill__submit{ display: block; }

.calc-v2 .send-request-pill__input{
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 0;
  padding-right: 150px;
}

/* красная кнопка отправки */
.calc-v2 .send-request-pill__submit{
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  border: 0;
  padding: 0 24px;
  background: var(--button-red-bg-color);
  color: #fff;
  font-size: var(--font-size-large);
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  cursor: pointer;
  border-radius: var(--calc-radius);
}

/* ✅ Успешная отправка: снова зелёная, но без инпута/кнопки */
.calc-v2 form.send-request-pill.is-sent{
  background: var(--calc-success);
  color: var(--text-color);
  cursor: default;
}

.calc-v2 form.send-request-pill.is-sent .send-request-pill__input,
.calc-v2 form.send-request-pill.is-sent .send-request-pill__submit{
  display: none !important;
}

/* ✅ Ошибка отправки: форма красная, показываем только текст */
.calc-v2 form.send-request-pill.is-error{
  background: var(--button-red-bg-color);
  color: #fff;
  cursor: pointer;
}

.calc-v2 form.send-request-pill.is-error .send-request-pill__label{
  display: block !important;
}

.calc-v2 form.send-request-pill.is-error .send-request-pill__input,
.calc-v2 form.send-request-pill.is-error .send-request-pill__submit{
  display: none !important;
}

/* ✅ FORCE: Ошибка отправки — всегда красная */
.calc-v2 form.send-request-pill.is-error{
  background: var(--button-red-bg-color) !important;
  color: #fff !important;
}

/* при ошибке показываем только текст */
.calc-v2 form.send-request-pill.is-error .send-request-pill__label{
  display: block !important;
}

.calc-v2 form.send-request-pill.is-error .send-request-pill__input,
.calc-v2 form.send-request-pill.is-error .send-request-pill__submit{
  display: none !important;
}

/* ====== Disclaimer ====== */
.calc-v2 .calc-disclaimer{
  margin: var(--space-14) 0 0;
  opacity: 0.6;
  font-family: 'Roboto', sans-serif;
}

.calc-v2 .calc-disclaimer--desktop{ display: block; }
.calc-v2 .calc-disclaimer--mobile{ display: none; }

/* ====== Responsive (<=1024px) ====== */
@media (max-width: 1024px){
  .calc-container{ grid-template-columns: 1fr; margin-bottom: 38px; }
  .calc-section{ padding: var(--space-24); }

  .route-group{ flex-direction: column; }
  .route-field + .route-field{
    border-left: 0;
    border-top: 1px solid var(--w25);
  }

  .calc-v2 .fleet-nav{ display: none; }

  .calc-v2 .calc-disclaimer--desktop{ display: none; }
  .calc-v2 .calc-disclaimer--mobile{ display: block; margin-top: 0; }

  .calc-v2 .calc-section--bordered .loader-row + .loader-row { margin-top: 8px;}
}