/* ------------------------------------------------------------------
   Баннер «Киловатты за онлайн» — АО «Томскэнергосбыт»
   Поп-ап на главной. Десктоп 958 × 492 (макет Figma, вариант 3).
   Ниже 960 px — компактная раскладка в столбик.
   ------------------------------------------------------------------ */

.tes-banner {
  --tes-blue: #224b7f;
  --tes-blue-dark: #0d3964;
  --tes-orange: #f58e1f;
  --tes-orange-hover: #ed800a;
  --tes-card: #fff;
  --tes-radius: 16px;

  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
}

.tes-banner[hidden] {
  display: none;
}

.tes-banner *,
.tes-banner *::before,
.tes-banner *::after {
  box-sizing: border-box;
}

/* затемнение страницы, клик по нему закрывает баннер */
.tes-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 57, 100, 0.55);
}

/* окно: карточка + крестик за её границей */
.tes-banner__window {
  position: relative;
  width: 958px;
  max-width: 100%;
}

.tes-banner__card {
  position: relative;
  height: 492px;
  background: var(--tes-card);
  border-radius: var(--tes-radius);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(27, 42, 65, 0.18);
}

/* ---- иллюстрация слева ---- */
.tes-banner__art {
  position: absolute;
  top: 0;
  left: 0;
  width: 543px;
  height: 100%;
  overflow: hidden;
}

.tes-banner__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

/* ---- синяя шапка на всю ширину ---- */
.tes-banner__head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  background: var(--tes-blue);
}

.tes-banner__head-title {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
}

/* ---- текстовая колонка справа ---- */
.tes-banner__content {
  position: absolute;
  top: 80px;
  right: 0;
  bottom: 0;
  width: 415px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: 40px 32px;
  background: var(--tes-card);
}

.tes-banner__text {
  width: 100%;
  color: var(--tes-blue);
  text-align: left;
}

.tes-banner__text p {
  margin: 0;
  font-weight: 700;
  line-height: 1.05;
}

.tes-banner__lead {
  font-size: 40px;
}

.tes-banner__amount {
  font-size: 32px;        /* размер «кВт/ч» */
  white-space: nowrap;
}

.tes-banner__amount-value {
  font-size: 88px;
  color: var(--tes-orange);
}

.tes-banner__note {
  font-size: 26px;
}

/* ---- кнопка ---- */
.tes-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 280px;
  height: 64px;
  border: 0;
  border-radius: 8px;
  background: var(--tes-orange);
  color: #fff;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.tes-banner__btn:hover,
.tes-banner__btn:focus-visible {
  background: var(--tes-orange-hover);
  color: #fff;
}

/* ---- крестик за правым верхним углом ---- */
.tes-banner__close {
  position: absolute;
  top: 0;
  left: calc(100% + 12px);
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.tes-banner__close svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tes-banner__close circle {
  fill: #fff;
  stroke: var(--tes-blue);
  stroke-width: 1.5;
  transition: fill 0.15s ease;
}

.tes-banner__close path {
  stroke: var(--tes-blue);
  stroke-width: 2;
  stroke-linecap: round;
}

.tes-banner__close:hover circle,
.tes-banner__close:focus-visible circle {
  fill: #eef4fa;
}

/* ------------------------------------------------------------------
   Компактная раскладка. Полноценный мобильный макет согласовывается
   отдельно — здесь раскладка в столбик, чтобы баннер не ломался.
   ------------------------------------------------------------------ */
@media (max-width: 1010px) {
  .tes-banner {
    padding: 16px;
  }

  .tes-banner__window {
    width: 343px;
  }

  .tes-banner__card {
    height: auto;
    display: flex;
    flex-direction: column;   /* порядок задаём order, разметку не меняем */
  }

  .tes-banner__art {
    position: static;
    order: 2;
    width: 100%;
    height: 260px;
    flex: none;
  }

  /* поднимаем картинку: в ней вшита старая синяя плашка,
     её закрывает шапка баннера */
  .tes-banner__art img {
    object-position: left -51px;
  }

  .tes-banner__head {
    position: static;   /* в столбик: шапка, картинка, текст */
    order: 1;
    height: 56px;
    flex: none;
    padding: 0 44px;
  }

  .tes-banner__head-title {
    font-size: 16px;
  }

  .tes-banner__content {
    position: static;
    order: 3;
    width: 100%;
    gap: 22px;
    padding: 24px 24px 28px;
  }

  .tes-banner__text {
    text-align: center;
  }

  .tes-banner__lead {
    font-size: 30px;
  }

  .tes-banner__amount {
    font-size: 20px;
  }

  .tes-banner__amount-value {
    font-size: 56px;
  }

  .tes-banner__note {
    font-size: 20px;
  }

  .tes-banner__btn {
    width: 260px;
    height: 56px;
    font-size: 17px;
  }

  .tes-banner__close {
    top: -52px;
    left: auto;
    right: 0;
  }
}

/* пользователям с отключённой анимацией — без переходов */
@media (prefers-reduced-motion: reduce) {
  .tes-banner__btn,
  .tes-banner__close circle {
    transition: none;
  }
}