/*
 * Стили новых элементов, которых нет в доноре. Стили донора — style.css (1 в 1, не правим),
 * этот файл подключается после него.
 */

/* Шапка: кнопка «Submit a request» рядом с телефоном — той же высоты */
.headerTop__contacts {gap: 8px;}
.headerTop__btn {min-height: 36px;}
/* Иконка в жёлтой кнопке (у донора правил для неё нет — была бы белой): цвета текста, и на ховере тоже */
.btn_prim .btn__icon svg {fill: currentColor;}
.btn_prim .btn__icon.stroke svg {fill: none; stroke: currentColor;}

/* Хлебные крошки: разделитель между пунктами (в доноре его давал плагин Breadcrumb NavXT) */
.crumbs__sep {margin: 0 6px;}

/* Корзина: количество с подписью «pcs» («999 pcs») — поле растёт по содержимому, не уже донорского */
.cartQuantity {
	width: auto;
	min-width: 120px;
}
.cartQuantity__txt {
	padding: 0 4px;
	white-space: nowrap;
}
.cartSetProduct__qnt {
	width: auto;
	min-width: 60px;
	padding-left: 8px;
	white-space: nowrap;
	text-align: right;
}
.cartItem__title a {color: inherit;}
.cartEmpty__btn {margin-top: 20px;}

@media screen and (max-width: 767px) {
	.cartQuantity {min-width: 110px;}
}

/* Формы (этап 5) */

/* Телефон (intl-tel-input): поле на всю ширину, как остальные поля донора */
.sgmIti {
	display: block;
	width: 100%;
}
.sgmIti .iti__country-list,
.sgmIti .iti__search-input {font: 400 14px/1.4 var(--font);}
.sgmIti .iti__dropdown-content {
	border-radius: 8px;
	color: var(--base);
}
.sgmIti input.dark + .iti__country-container .iti__selected-dial-code,
.sgmIti:has(input.dark) .iti__arrow {border-top-color: var(--gray2);}

/* Ошибка отправки — под кнопкой; во время отправки форма неактивна */
.formMessage {
	display: none;
	margin-top: 8px;
	color: #FF0000;
}
.js_lead_form.loading,
.js_checkout_form.loading {
	opacity: 0.7;
	pointer-events: none;
}

/* Выбор страны на оформлении заказа (компонент .citySelect донора) */
.countrySelect .citySelect__opt:hover,
.countrySelect .citySelect__opt:focus {background: var(--minor);}

/* КАЛЬКУЛЯТОР (этап 6) */

/* Популярная марка без логотипа в спрайте (sgm_calc_brand_sprites): название крупно вместо картинки */
.calcPopular_text .calcPopular__image {
  height: 64px;
  justify-content: center;
}
.calcPopular__name {
  font: 600 16px/1.2 var(--font);
  text-align: center;
  color: var(--base);
  overflow-wrap: normal;
  word-break: keep-all;
}
.calcPopular_text .calcPopular__text {display: none;}
.calc.calc_prime .calcPopular__name {color: inherit;}

/* Итог: три кнопки — «Place order», «Add to cart», PDF */
.calcResult__btns_3 {grid-template-columns: repeat(3, 1fr);}
/* В режиме SGM Prime донор делает все кнопки итога тёмными — «Place order» остаётся главной (жёлтой) */
.calc.calc_prime .calcResult__btns .btn.btn_grad {
  background: linear-gradient(90deg, #FFCE38, #FFAE00);
  border: 0;
  color: var(--base);
}
.calc.calc_prime .calcResult__btns .btn.btn_grad:hover {
  background: linear-gradient(90deg, #FFCE38, #FFAE00);
  color: var(--base);
}

/* Сетка из 9 марок на 1200–1279px: подпись «Volkswagen» при 16px не влезает и рвётся посреди слова */
@media screen and (min-width: 1200px) and (max-width: 1279px) {
  .calcPopular__text {font-size: 15px;}
}

/* Слайдер марок (уже 1200px): плитка без логотипа — по ширине названия */
@media screen and (max-width: 1199px) {
  .calcPopular_text {width: auto; min-width: 96px;}
  .calcPopular_text .calcPopular__name {white-space: nowrap; padding: 0 8px;}
}
.calcResultTable__col a {color: inherit;}
.calcResultTable__col a:hover {color: var(--hover);}

@media screen and (max-width: 767px) {
  .calcResult__btns_3 {grid-template-columns: 1fr;}
  .calcPopular_text .calcPopular__image {height: 48px;}
  .calcPopular__name {font-size: 14px;}
  /* Подпись под логотипом: в плитке 96px «Volkswagen» при 14px не влезает и рвётся посреди слова */
  .calcPopular__text {font-size: 13px;}
}

/* Стать партнёром: картинка баннера — только на компьютере (решение 2026-11-13). На телефоне — тёмный фон баннера
   без картинки; донорский отступ снизу под картинку (padding-bottom: 266px) больше не нужен */
@media screen and (max-width: 767px) {
  #becomeHeroBanner .heroBanner__img {display: none;}
  #becomeHeroBanner {padding-bottom: 20px;}
}