/* Block: Upsale */

.upsale {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
  padding: var(--spacing-40) var(--spacing-20) var(--spacing-0);
  overflow: visible;
  background: var(--color-surface-bright);
}

.upsale__title {
  width: 100%;
  margin: 0;
  font-size: var(--font-headline-s-size);
  font-weight: 600;
  line-height: var(--font-headline-s-line);
  letter-spacing: var(--font-headline-s-tracking);
  text-align: center;
  color: var(--color-on-surface);
}

/* Tariffs container */
.upsale__tariffs {
  width: 100%;
  overflow: visible;
}

.upsale__tariffs-scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--upsale-scroll-bleed);
  scrollbar-width: none;
  /* Компенсация клиппинга при overflow-x: auto (тень, бейдж) */
  padding-block: 20px 24px;
  margin-block: -20px -24px;
  padding-inline: var(--upsale-scroll-bleed);
  margin-inline: calc(-1 * var(--upsale-scroll-bleed));
}

.upsale__tariffs-scroll::-webkit-scrollbar {
  display: none;
}

.upsale__tariffs-track {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-8);
  width: max-content;
  min-width: 100%;
  overflow: visible;
}

/* Tariff cards */
.upsale__card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--upsale-card-width-mobile);
  width: var(--upsale-card-width-mobile);
  min-height: 100%;
  padding: var(--spacing-20);
  border-radius: var(--radius-32);
  scroll-snap-align: start;
}

.upsale__card--ancestry {
  justify-content: space-between;
  background: var(--color-surface-bright);
  box-shadow: var(--shadow-card-mobile);
}

.upsale__card--passport {
  gap: var(--spacing-24);
  border: 1px solid var(--color-primary-2);
  background:
    radial-gradient(
      120% 80% at 68% 105%,
      rgba(154, 184, 255, 1) 16%,
      rgba(228, 222, 243, 1) 45%,
      rgba(255, 255, 255, 1) 100%
    ),
    var(--color-surface-bright);
}

.upsale__badge-popular {
  position: absolute;
  top: -15px;
  left: 19px;
  padding: var(--spacing-4) var(--spacing-8);
  border-radius: var(--radius-8);
  background: var(--color-primary-2);
  font-size: var(--font-body-s-size);
  font-weight: 400;
  line-height: var(--font-body-s-line);
  letter-spacing: var(--font-body-s-tracking);
  color: var(--color-on-primary-2);
  white-space: nowrap;
}

.upsale__top {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  width: 100%;
}

.upsale__card-title {
  margin: 0;
  font-size: var(--font-title-l-size);
  font-weight: 600;
  line-height: var(--font-title-l-line);
  letter-spacing: var(--font-title-l-tracking);
  color: var(--color-on-surface);
}

.upsale__card-title-accent {
  color: var(--color-primary-2);
}

.upsale__all {
  display: flex;
  gap: var(--spacing-8);
  align-items: flex-start;
  width: 100%;
  padding: var(--spacing-8);
  border: 1px solid var(--color-primary-container);
  border-radius: var(--radius-16);
}

.upsale__all-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.upsale__all-text {
  flex: 1;
  min-width: 0;
  font-size: var(--font-label-m-size);
  font-weight: 600;
  line-height: var(--font-label-m-line);
  letter-spacing: var(--font-label-m-tracking);
}

.upsale__benefits {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.upsale__benefit {
  display: flex;
  gap: 6px;
  align-items: center;
}

.upsale__benefit--multiline {
  align-items: flex-start;
}

.upsale__benefit-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.upsale__benefit-text {
  font-size: var(--font-body-s-size);
  font-weight: 400;
  line-height: var(--font-body-s-line);
  letter-spacing: var(--font-body-s-tracking);
}

.upsale__benefit--multiline .upsale__benefit-text {
  flex: 1;
  min-width: 0;
}

/* CTA */
.upsale__cta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.upsale__mockup {
  display: flex;
  gap: var(--spacing-16);
  align-items: center;
}

.upsale__mockup-image {
  flex-shrink: 0;
  width: 39px;
  height: 78px;
  object-fit: contain;
  object-position: center;
}

.upsale__mockup-name {
  font-size: var(--font-label-m-size);
  font-weight: 600;
  line-height: var(--font-label-m-line);
  letter-spacing: var(--font-label-m-tracking);
  white-space: nowrap;
}

.upsale__actions {
  display: flex;
  gap: 15px;
  align-items: center;
}

.upsale__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-12) var(--spacing-24);
  border-radius: var(--radius-full);
  background: var(--color-on-surface);
  font-size: var(--font-label-m-size);
  font-weight: 600;
  line-height: var(--font-label-m-line);
  letter-spacing: var(--font-label-m-tracking);
  color: var(--color-surface-bright);
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.upsale__button:hover {
  background-color: #ea187e;
}

.upsale__button:focus-visible {
  outline: 2px solid var(--color-primary-2);
  outline-offset: 2px;
}

.upsale__price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 98px;
}

.upsale__price {
  font-size: var(--font-price-size);
  font-weight: 600;
  line-height: var(--font-price-line);
  letter-spacing: var(--font-price-tracking);
}

.upsale__price-row {
  display: flex;
  gap: var(--spacing-4);
  align-items: center;
}

.upsale__old-price {
  font-size: var(--font-body-xs-size);
  font-weight: 400;
  line-height: var(--font-body-xs-line);
  letter-spacing: var(--font-body-xs-tracking);
  text-decoration: line-through;
  text-decoration-color: #ea187e;
}

.upsale__discount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px var(--spacing-4);
  border-radius: var(--radius-24);
  background: var(--color-tertiary-4);
  font-size: var(--font-body-xs-size);
  font-weight: 400;
  line-height: var(--font-body-xs-line);
  letter-spacing: var(--font-body-xs-tracking);
  color: var(--color-surface-bright);
  white-space: nowrap;
}

/* Обёртка для триггера и тултипа — даёт позиционный контекст и
   "сжимается" по ширине триггера, чтобы тултип мог пристыковаться
   к правому краю иконки */
.upsale__license-wrap {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
}

.upsale__license {
  display: flex;
  gap: var(--spacing-4);
  align-items: center;
  transition: color 0.2s ease;
}

.upsale__license:hover {
  color: #ea187e;
}

/* Сброс системных стилей <button> для триггера */
button.upsale__license {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

button.upsale__license:focus-visible {
  outline: 2px solid var(--color-primary-2);
  outline-offset: 4px;
  border-radius: var(--radius-8);
}

.upsale__license--hidden {
  visibility: hidden;
}

.upsale__license-text {
  font-size: var(--font-body-s-size);
  font-weight: 400;
  line-height: var(--font-body-s-line);
  letter-spacing: var(--font-body-s-tracking);
  white-space: nowrap;
}

/* Иконка — инлайновый <svg> с stroke="currentColor"; цвет
   подхватывается из .upsale__license и меняется на :hover вместе
   с текстом. */
.upsale__license-icon {
  flex-shrink: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
}

/* === Tooltip над .upsale__license =========================== */

/* Внешний контейнер тултипа — он же якорь для стрелки.
   .upsale__license-wrap имеет ширину триггера (текст + 4px + иконка 20px),
   поэтому правый край wrap'а совпадает с правым краем иконки.
   right: 10px → правый край тултипа находится по горизонтальному
   центру иконки (10px = половина её ширины), а translateX(50%)
   сдвигает тултип на половину его ширины → центр тултипа
   совпадает с центром .upsale__license-icon.
   bottom: calc(100% + 4px + 7px) → визуально 4px между стрелкой
   и верхней границей .upsale__license (7px — высота стрелки). */
.upsale__tooltip {
  position: absolute;
  right: 10px;
  bottom: calc(100% + var(--spacing-4) + 7px);
  transform: translateX(50%);
  z-index: 20;
  filter: drop-shadow(var(--shadow-tooltip));
  pointer-events: auto;
}

.upsale__tooltip[hidden] {
  display: none;
}

.upsale__tooltip-body {
  position: relative;
  display: flex;
  gap: var(--spacing-8);
  align-items: flex-start;
  width: max-content;
  max-width: min(280px, calc(100vw - var(--spacing-40)));
  padding: var(--spacing-12);
  border-radius: var(--radius-16);
  background: var(--color-tooltip-bg);
  color: var(--color-on-surface);
}

/* Стрелка, указывающая на .upsale__license-icon.
   Тултип отцентрован относительно иконки, поэтому стрелка
   ставится строго по центру тултипа. */
.upsale__tooltip-body::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--color-tooltip-bg);
}

.upsale__tooltip-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  flex: 1;
  min-width: 0;
}

.upsale__tooltip-section {
  display: flex;
  flex-direction: column;
}

.upsale__tooltip-label {
  margin: 0;
  font-size: var(--font-body-xs-size);
  line-height: var(--font-body-xs-line);
  letter-spacing: var(--font-body-xs-tracking);
  font-weight: 400;
  color: var(--color-on-surface);
  white-space: nowrap;
}

.upsale__tooltip-label--strong {
  font-weight: 600;
}

.upsale__tooltip-value {
  margin: 0;
  font-size: var(--font-title-m-size);
  line-height: var(--font-title-m-line);
  letter-spacing: var(--font-title-m-tracking);
  font-weight: 400;
  color: var(--color-on-surface);
  white-space: nowrap;
}

.upsale__tooltip-link {
  font-size: var(--font-body-xs-size);
  line-height: var(--font-body-xs-line);
  letter-spacing: var(--font-body-xs-tracking);
  color: var(--color-primary-2);
  text-decoration: underline;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.upsale__tooltip-link:hover {
  color: #ea187e;
}

.upsale__tooltip-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--color-tooltip-close);
}

.upsale__tooltip-close:focus-visible {
  outline: 2px solid var(--color-primary-2);
  outline-offset: 2px;
  border-radius: var(--radius-8);
}

.upsale__tooltip-close img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ≤575px — тултип не помещается на экране, сдвигаем его на 100px влево.
   Стрелка компенсируется на те же 100px вправо, чтобы остаться над
   .upsale__license-icon. */
@media (max-width: 575px) {
  .upsale__card-title {
    font-size: 20px;
    line-height: 120%;
  }

  .upsale__tooltip {
    transform: translateX(calc(50% - 100px));
  }

  .upsale__tooltip-body::after {
    left: calc(50% + 100px);
  }
}

/* 576–767px — карточки 360px */
@media (min-width: 576px) and (max-width: 767px) {
  .upsale__card {
    flex: 0 0 var(--upsale-card-width-tablet);
    width: var(--upsale-card-width-tablet);
  }
}

/* ≥768px — без горизонтальной прокрутки, равные колонки */
@media (min-width: 768px) {
  .upsale {
    padding-top: var(--spacing-80);
  }

  .upsale__title {
    font-size: var(--font-headline-l-size);
    line-height: var(--font-headline-l-line);
    letter-spacing: var(--font-headline-l-tracking);
  }

  .upsale__tariffs-scroll {
    overflow: visible;
    scroll-snap-type: none;
    scroll-padding-inline: 0;
    padding-block: 0;
    margin-block: 0;
    padding-inline: 0;
    margin-inline: 0;
  }

  .upsale__tariffs-track {
    width: 100%;
    justify-content: center;
  }

  .upsale__card {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    scroll-snap-align: none;
  }

  .upsale__card--ancestry {
    box-shadow: var(--shadow-level-3);
  }

  .upsale__button {
    width: 150px;
  }
}

/* ≥1100px — фиксированная ширина карточек */
@media (min-width: 1100px) {
  .upsale__card {
    flex: 0 0 var(--upsale-card-width-md);
    width: var(--upsale-card-width-md);
  }
}

/* ≥1440px — резиновая вёрстка */
@media (min-width: 1440px) {
  .upsale {
    padding-inline: max(
      var(--spacing-20),
      calc((100% - var(--upsale-content-max)) / 2)
    );
  }

  .upsale__tariffs {
    max-width: var(--upsale-content-max);
    margin-inline: auto;
  }

  .upsale__tariffs-track {
    gap: var(--spacing-16);
  }

  .upsale__card {
    flex: 1 1 var(--upsale-card-width-fluid);
    width: var(--upsale-card-width-fluid);
    max-width: none;
  }
}