/* ============================================================
   JetNet ТЗ — кастомні стилі (dev)
   Акцент: #ef1a00
   ============================================================ */

/* ============================================================
   Багатокроковий поп-ап вибору адреси (image9/11)
   ============================================================ */
.jn-popup {
  position: relative; width: 100%; max-width: 680px; background: #fff;
  border-radius: 22px; padding: 32px 34px 26px;
}
.jn-popup-close {
  position: absolute; top: 22px; right: 24px; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: #f0f0f0; cursor: pointer;
}
.jn-popup-close::before, .jn-popup-close::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px;
  background: #555; border-radius: 2px;
}
.jn-popup-close::before { transform: translate(-50%,-50%) rotate(45deg); }
.jn-popup-close::after  { transform: translate(-50%,-50%) rotate(-45deg); }

.jn-popup-title { font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; letter-spacing: -0.02em; padding-right: 40px; }
.jn-popup-sub { margin-top: 8px; color: #6f6f6f; font-size: 14px; line-height: 1.45; }

/* Таби кроків */
.jn-tabs { display: flex; gap: 4px; margin: 20px 0 18px; background: #f4f4f4; border-radius: 12px; padding: 5px; overflow: hidden; }
.jn-tab {
  flex: 1; text-align: center; font-size: 13px; font-weight: 600; color: #9a9a9a;
  padding: 9px 6px; border-radius: 9px; white-space: nowrap; cursor: default; transition: all .2s ease;
}
.jn-tab.is-active { background: #ef1a00; color: #fff; }
.jn-tab:not(.is-active):not(.is-disabled) { cursor: pointer; color: #555; }
.jn-tab.is-disabled { color: #c4c4c4; }

/* Крок 1 — тип забудови */
.jn-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.jn-type-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  text-align: left; background: #fff; border: 1.5px solid #e8e8e8; border-radius: 16px;
  padding: 22px 22px 24px; cursor: pointer; transition: all .2s ease; min-height: 100%;
}
.jn-type-card:hover { border-color: #ef1a00; }
.jn-type-card.is-selected { border-color: #ef1a00; background: #fdece9; }
.jn-type-ico { width: 34px; height: 34px; background: no-repeat center/contain; margin-bottom: 6px; }
.jn-ico-apartment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='18'/%3E%3Crect x='14' y='8' width='7' height='13'/%3E%3Cline x1='6' y1='7' x2='6' y2='7'/%3E%3Cline x1='6' y1='11' x2='6' y2='11'/%3E%3Cline x1='6' y1='15' x2='6' y2='15'/%3E%3C/svg%3E"); }
.jn-type-card.is-selected .jn-ico-apartment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef1a00' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='18'/%3E%3Crect x='14' y='8' width='7' height='13'/%3E%3C/svg%3E"); }
.jn-ico-private { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E"); }
.jn-type-card.is-selected .jn-ico-private { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef1a00' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E"); }
.jn-type-name { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.jn-type-sub { color: #8a8a8a; font-size: 13px; }

/* Пошук */
.jn-search { position: relative; margin-bottom: 12px; }
.jn-search-input {
  width: 100%; border: 1.5px solid #e6e6e6; border-radius: 12px; padding: 13px 16px 13px 42px;
  font-size: 15px; outline: none; transition: border-color .2s ease;
}
.jn-search-input:focus { border-color: #ef1a00; }
.jn-search::before {
  content: ""; position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; background: no-repeat center/contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E");
}

/* Список */
.jn-list { max-height: 300px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.jn-list-item {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  border-bottom: 1px solid #efefef; padding: 14px 14px; cursor: pointer; border-radius: 10px;
  transition: background .15s ease;
}
.jn-list-item:hover { background: #f8f8f8; }
.jn-list-item.is-selected { background: #fdece9; }
.jn-list-main { display: block; font-size: 15px; font-weight: 600; color: #1a1a1a; }
.jn-list-sub { display: block; margin-top: 2px; font-size: 12px; color: #9a9a9a; }
.jn-group-head { position: sticky; top: 0; background: #fff; z-index: 1; font-size: 12px; font-weight: 700; color: #ef1a00; text-transform: uppercase; letter-spacing: .02em; padding: 12px 14px 6px; }
.jn-empty { padding: 26px 10px; text-align: center; color: #9a9a9a; }

/* Футер */
.jn-popup-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #f0f0f0; }
.jn-foot-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.jn-btn { border: 0; cursor: pointer; font-size: 15px; font-weight: 700; border-radius: 40px; transition: all .2s ease; }
.jn-btn-ghost { background: #fff; border: 1.5px solid #e2e2e2; color: #333; padding: 11px 20px; }
.jn-btn-ghost:hover { border-color: #bbb; }
.jn-btn-link { background: transparent; color: #333; text-decoration: underline; padding: 6px 4px; }
.jn-btn-link:hover { color: #ef1a00; }
.jn-btn-primary { background: #ef1a00; color: #fff; padding: 13px 26px; }
.jn-btn-primary:hover { background: #d11700; }
.jn-btn-primary[disabled] { background: #f3b3aa; cursor: not-allowed; }

@media (max-width: 560px) {
  .jn-popup { padding: 26px 18px 20px; border-radius: 18px; }
  .jn-type-grid { grid-template-columns: 1fr; }
  .jn-tab { font-size: 11px; padding: 8px 4px; }
  .jn-popup-foot { flex-wrap: wrap; }
  .jn-foot-right { width: 100%; justify-content: space-between; }
}

/* ============================================================
   Сторінка покриття (Task 2)
   ============================================================ */
.coverage-tools { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 24px 0 20px; }
.coverage-tech { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.coverage-tech-label { font-weight: 700; color: #333; font-size: 15px; }
.coverage-tech-badge { font-size: 13px; font-weight: 700; color: #fff; padding: 6px 14px; border-radius: 40px; }
.tech-eth { background: #6d4aff; }
.tech-gpon { background: #ef1a00; }
.tech-xgs { background: #1466c7; }
.tech-xpon { background: #e08600; }
.tech-backup { background: #2e9e4b; }
/* border 1px transparent у базовому стані — .custom-btn:hover додає рамку,
   і без нього кнопка на ховері росла на 2px і смикала карту нижче */
.coverage-check-btn { background: #ef1a00; color: #fff; border: 1px solid transparent; font-weight: 700; font-size: 15px; border-radius: 40px; padding: 13px 26px; cursor: pointer; transition: background .2s ease; }
.coverage-check-btn:hover, .coverage-check-btn:focus { background: #d11700; color: #fff; border-color: transparent; }

/* текстова альтернатива карти — під рамкою, а не всередині неї (обрізалось) */
.mapsec-alt { margin: 14px 0 0; color: #6f6f6f; font-size: 14px; line-height: 1.55; }

.coverage-list { margin-top: 40px; }
.coverage-list-title { font-family: "HelveticaNeueCyr-Black","Montserrat",sans-serif; font-size: clamp(24px,3vw,34px); letter-spacing: -0.02em; margin: 0 0 8px; }
.coverage-list-intro { color: #6f6f6f; margin: 0 0 26px; font-size: 16px; }
.coverage-group { margin-bottom: 28px; }
.coverage-group-title { font-size: 20px; font-weight: 800; color: #ef1a00; margin: 0 0 14px; letter-spacing: -0.01em; }
.coverage-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 24px; }
.coverage-links li { margin: 0; }
.coverage-links a { color: #1a1a1a; font-size: 15px; line-height: 1.5; text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease; }
.coverage-links a:hover { color: #ef1a00; border-color: #ef1a00; }

@media (max-width: 991px) { .coverage-links { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .coverage-links { grid-template-columns: repeat(2, 1fr); } .coverage-tools { flex-direction: column; align-items: flex-start; } }
@media (max-width: 420px) { .coverage-links { grid-template-columns: 1fr; } }

/* ---------- SEO-текст на сторінці нас. пункту ---------- */
.location-seo {
  margin-top: 40px; padding-top: 30px; border-top: 1px solid #ececec;
  color: #4a4a4a; font-size: 16px; line-height: 1.7;
}
.location-seo h2, .location-seo h3, .location-seo .h2, .location-seo .h3 {
  font-family: "HelveticaNeueCyr-Black", "Montserrat", sans-serif;
  letter-spacing: -0.02em; margin: 26px 0 14px; line-height: 1.15;
}
.location-seo h2, .location-seo .h2 { font-size: clamp(22px, 2.4vw, 30px); }
.location-seo h3, .location-seo .h3 { font-size: clamp(18px, 1.8vw, 22px); }
.location-seo p { margin: 0 0 14px; }
.location-seo a { color: #ef1a00; text-decoration: underline; }
.location-seo ul, .location-seo ol { margin: 0 0 16px; padding-left: 22px; }
.location-seo ul li { list-style: disc; margin-bottom: 8px; }
.location-seo ol li { list-style: decimal; margin-bottom: 8px; }

/* ---------- Sweet.TV блок ---------- */
.sttv { padding: 40px 0 60px; }
.sttv-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 28px;
}
.sttv-title {
  font-family: "HelveticaNeueCyr-Black", "Montserrat", sans-serif;
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: -0.03em; line-height: 1.05; margin: 0;
}
.sttv-subtitle { margin-top: 8px; color: #6b6b6b; font-size: clamp(14px, 1.4vw, 17px); }
.sttv-accent { color: #ef1a00; font-weight: 700; }
.sttv-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #ececec; border-radius: 40px;
  padding: 10px 18px; font-size: 13px; font-weight: 600; color: #333;
  box-shadow: 0 4px 20px rgba(0,0,0,.06); white-space: nowrap;
}

.sttv-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.sttv-card {
  position: relative; background: #fff; border: 1px solid #ececec;
  border-radius: 16px; padding: 26px 24px; display: flex; flex-direction: column;
  min-height: 100%;
  box-shadow: 0 4px 30px rgba(0,0,0,.06);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.sttv-card:hover { border-color: #ef1a00; }
.sttv-card.is-popular { border-color: #ef1a00; box-shadow: 0 8px 34px rgba(239,26,0,.14); }
.sttv-card-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: #ef1a00; color: #fff; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
  padding: 5px 16px; border-radius: 40px; white-space: nowrap;
}
.sttv-card-name { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.sttv-card-desc { margin-top: 6px; color: #8a8a8a; font-size: 13px; line-height: 1.35; min-height: 34px; }
.sttv-card-price { margin: 16px 0 14px; }
.sttv-price-old { display: inline-block; color: #b3b3b3; text-decoration: line-through; font-size: 15px; }
.sttv-price-new { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.sttv-price-num {
  font-family: "HelveticaNeueCyr-Black", sans-serif; color: #ef1a00;
  font-size: 40px; line-height: 1; font-weight: 900;
}
.sttv-price-unit { color: #333; font-size: 13px; font-weight: 600; }
.sttv-card-feats { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sttv-card-feats li { position: relative; padding-left: 24px; font-size: 14px; color: #333; }
.sttv-card-feats li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px;
  background: no-repeat center/contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef1a00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
/* Правки (3) п.1. Кнопка успадковує тему .custom-btn, а її :hover робить
   білий фон + червоний текст + рамку 1px. Наш :hover перебивав лише background —
   лишався червоний текст на темно-червоному (нечитабельно), а рамка додавала 2px
   висоти й уся сітка карток «пригала». Тримаємо рамку прозорою в обох станах. */
.sttv-connect {
  margin-top: auto; display: block; width: 100%; text-align: center;
  background: #ef1a00; color: #fff; font-weight: 700; font-size: 15px;
  border-radius: 40px; padding: 13px 19px; cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s ease;
}
.sttv-connect:hover, .sttv-connect:focus, .sttv-connect:active {
  background: #d11700; color: #fff; border: 1px solid transparent;
}
/* та сама історія в модалці ТБ */
.sttv-popup-order:hover, .sttv-popup-order:focus, .sttv-popup-order:active {
  color: #fff; border: 1px solid transparent;
}

@media (max-width: 991px) { .sttv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .sttv-grid { grid-template-columns: 1fr; }
  .sttv-head { flex-direction: column; }
}

/* ---------- Sweet.TV модалка ---------- */
.sttv-popup {
  max-width: 460px; width: 100%; background: #fff;
  border-radius: 20px; padding: 34px 34px 30px;
}
.sttv-popup-title { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; padding-right: 40px; }
.sttv-popup .sttv-popup-add { padding-right: 40px; } /* не наїжджати на хрестик закриття */
.sttv-popup-intro { margin-top: 12px; color: #6b6b6b; font-size: 15px; line-height: 1.5; }
/* Правки 13.08: контакти партнера Sweet.TV (телефон/регіон) з модалки прибрано. */
.sttv-popup-order {
  margin-top: 22px;
  display: block; width: 100%; text-align: center; background: #ef1a00; color: #fff;
  font-weight: 700; font-size: 16px; border-radius: 40px; padding: 14px 19px;
  cursor: pointer; border: 1px solid transparent; transition: background .2s ease;
}
.sttv-popup-order:hover { background: #d11700; }

@media (max-width: 560px) { .sttv-popup { padding: 26px 20px 22px; } .sttv-popup-title { font-size: 20px; } }

/* ==================== Sweet.TV: доплата до інтернет-тарифу (ТЗ п.4) ==================== */
.sttv-legal {
  margin-top: 26px; padding: 14px 18px; max-width: 900px;
  background: #fff7f5; border-left: 3px solid #ef1a00; border-radius: 8px;
  color: #6b6b6b; font-size: 13px; line-height: 1.5;
}
.sttv-channels-link {
  display: block; margin: 0 0 10px; padding: 0; background: none; border: 0;
  color: #ef1a00; font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer;
}
.sttv-channels-link:hover { text-decoration: none; }

.sttv-popup-add {
  margin-top: 10px; font-size: 15px; color: #333;
}
.sttv-popup-add b { color: #ef1a00; }
.sttv-popup-contract { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.sttv-popup-contract-label { font-size: 13px; color: #6b6b6b; }
.sttv-popup-contract-input {
  min-height: 44px; padding: 0 14px; border: 1px solid #ddd; border-radius: 10px;
  font-size: 15px; outline: none; transition: border-color .2s ease;
}
.sttv-popup-contract-input:focus { border-color: #ef1a00; }
.sttv-popup-contract-input.is-err { border-color: #ef1a00; background: #fff7f5; }
.sttv-popup-contract-err { color: #ef1a00; font-size: 13px; }

/* Модалка «Список каналів» */
.sttv-channels-popup {
  max-width: 760px; margin: 0 auto; padding: 32px 28px 26px;
  background: #fff; border-radius: 18px;
}

/* Правки 12.08 п.4 — таблиця порівняння каналів трьох пакетів.
   Шапка липка: 394 рядки, без неї не видно, до якого пакета належить колонка. */
.sttv-cmp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.sttv-cmp-search {
  flex: 1 1 220px; height: 40px; padding: 0 14px; border: 1px solid #e2e2e2;
  border-radius: 999px; font-size: 14px; color: #333; outline: none;
}
.sttv-cmp-search:focus { border-color: #ef1a00; }
.sttv-cmp-diff { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #6f6f6f; cursor: pointer; }
.sttv-cmp-diff input { width: 16px; height: 16px; accent-color: #ef1a00; cursor: pointer; }
.sttv-cmp-wrap { margin-top: 14px; max-height: 58vh; overflow: auto; border: 1px solid #ececec; border-radius: 12px; }
.sttv-cmp-loading { padding: 26px 18px; text-align: center; font-size: 14px; color: #9a9a9a; }
.sttv-cmp-loading a { color: #ef1a00; }
.sttv-cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
.sttv-cmp th, .sttv-cmp td { padding: 9px 10px; border-bottom: 1px solid #f0f0f0; }
.sttv-cmp thead th {
  position: sticky; top: 0; z-index: 2; background: #fff;
  border-bottom: 1px solid #e2e2e2; text-align: center; vertical-align: bottom;
}
.sttv-cmp thead th.sttv-cmp-ch { text-align: left; font-size: 13px; color: #8a8a8a; font-weight: 600; }
.sttv-cmp-pkg { width: 110px; }
.sttv-cmp-pkg-name { display: block; font-size: 14px; font-weight: 800; color: #1a1a1a; }
.sttv-cmp-pkg-num { display: block; font-size: 12px; color: #8a8a8a; }
.sttv-cmp-pkg-price { display: block; font-size: 12px; font-weight: 700; color: #ef1a00; }
/* Правки 07.09 п.19.1 — flex переїхав з <td> на внутрішній div: комірка з display:flex
   випадає з табличного контексту, і Safari домальовує анонімну комірку — колонки шапки
   й тіла зсуваються, у «Вільний» потрапляють відмітки сусіднього пакета. */
.sttv-cmp td.sttv-cmp-ch { color: #333; }
.sttv-cmp .sttv-cmp-ch-in { display: flex; align-items: center; gap: 10px; }
.sttv-cmp td.sttv-cmp-ch img { width: 28px; height: 28px; object-fit: contain; flex: 0 0 28px; }
.sttv-cmp-noicon { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 6px; background: #f2f2f2; }
.sttv-cmp tbody td:not(.sttv-cmp-ch) { text-align: center; }
.sttv-cmp tbody tr:nth-child(even) { background: #fbfbfb; }
.sttv-cmp-yes {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: #2e9e4b;
  position: relative;
}
.sttv-cmp-yes:after {
  content: ''; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.sttv-cmp-dash { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: #d9d9d9; vertical-align: middle; }
@media (max-width: 640px) {
  .sttv-cmp-pkg { width: 74px; }
  .sttv-cmp th, .sttv-cmp td { padding: 8px 6px; }
  .sttv-cmp td.sttv-cmp-ch { font-size: 13px; }
  .sttv-cmp .sttv-cmp-ch-in { gap: 7px; }
  .sttv-cmp td.sttv-cmp-ch img, .sttv-cmp-noicon { width: 22px; height: 22px; flex-basis: 22px; }
  .sttv-cmp-pkg-name { font-size: 12px; }
  .sttv-cmp-pkg-num, .sttv-cmp-pkg-price { font-size: 10px; }
  /* Правки 07.09 п.19.1 — на телефоні таблиця ширша за екран: колонку з назвою каналу
     і сусідню «Вільний» тримаємо на місці, щоб було видно, що входить у безкоштовний пакет. */
  .sttv-cmp th.sttv-cmp-ch, .sttv-cmp td.sttv-cmp-ch { position: sticky; left: 0; z-index: 1; background: inherit; }
  .sttv-cmp thead th.sttv-cmp-ch { z-index: 3; background: #fff; }
  .sttv-cmp tbody tr { background: #fff; }
  .sttv-cmp tbody tr:nth-child(even) { background: #fbfbfb; }
  .sttv-cmp-ch { min-width: 132px; }
}
/* Колонка «Вільний» — зеленою підкладкою, щоб не губилась серед платних пакетів */
.sttv-cmp th.is-freecol, .sttv-cmp td.is-freecol { background: #f2fbf4; }
.sttv-cmp thead th.is-freecol { box-shadow: inset 0 -2px 0 #2e9e4b; }
.sttv-cmp-diff--free input { accent-color: #2e9e4b; }
.sttv-ch-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sttv-ch-tab {
  display: flex; align-items: center; gap: 6px; padding: 9px 14px; min-height: 38px;
  background: #f5f5f5; border: 1px solid transparent; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: #333; cursor: pointer; transition: all .2s ease;
}
.sttv-ch-tab:hover { border-color: #ef1a00; }
.sttv-ch-tab.is-active { background: #ef1a00; color: #fff; }
.sttv-ch-tab-count { font-size: 12px; opacity: .7; }
.sttv-ch-tab-count:not(:empty)::after { content: ' кан.'; }
.sttv-ch-body { margin-top: 16px; max-height: 46vh; overflow-y: auto; }
.sttv-ch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.sttv-ch-list li { position: relative; padding-left: 22px; font-size: 14px; color: #333; }
.sttv-ch-list li::before {
  content: ''; position: absolute; left: 0; top: 4px; width: 12px; height: 12px;
  border-radius: 3px; background: #ef1a00; opacity: .15;
}
.sttv-ch-empty { color: #6b6b6b; font-size: 14px; line-height: 1.5; }
.sttv-ch-foot { margin-top: 16px; font-size: 13px; color: #9a9a9a; }
.sttv-ch-foot a { color: #ef1a00; }
@media (max-width: 560px) { .sttv-channels-popup { padding: 24px 18px 20px; } }

/* Правки 17.08 п.2 (iPhone/Safari): таблиця з трьома пакетами робила .fancybox-content
   ширшим за слайд. fancybox центрує контент через inline-block + ::before на 100% висоти,
   тож завеликий inline-block переносився на другий «рядок» — під екран. Візуально
   лишався тільки сірий блюр-оверлей. Ширину поп-апа фіксуємо по вікну, а таблиця
   скролиться всередині .sttv-cmp-wrap. */
.sttv-channels-popup {
  width: 100%; max-width: min(760px, calc(100vw - 24px)); box-sizing: border-box;
}
.sttv-channels-popup .sttv-cmp-wrap { max-width: 100%; -webkit-overflow-scrolling: touch; }
.sttv-channels-popup .sttv-cmp { min-width: 420px; }

/* Опція «Додати ТБ» в картці інтернет-тарифу */
/* z-index вище hover-блюр-оверлея картки (.plan-card:hover .plan-details:before, z-index:1) —
   інакше опція ТБ блюриться і не клікається; 10 = як у кнопки «Замовити» */
/* Умови акції з тарифної таблиці (правки (3) п.5) */
.plan-details .jn-promo {
  flex-basis: 100%; min-width: 100%; position: relative; z-index: 10;
  margin-top: 16px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  font-size: 13px; line-height: 1.45; color: #4a4a4a;
}
.jn-promo-badge {
  flex: 0 0 auto; background: #fff3f1; color: #ef1a00; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .02em; padding: 4px 10px; border-radius: 40px;
}
.jn-promo-text b { color: #2e9e4b; }
.jn-promo-text s { color: #9a9a9a; }

.jn-tv { margin-top: 18px; padding-top: 18px; padding-bottom: 2px; border-top: 1px dashed #e2e2e2; position: relative; z-index: 10; }
.jn-tv-title { font-size: 14px; font-weight: 700; color: #333; margin-bottom: 10px; }
.jn-tv-title-accent { color: #ef1a00; }
.jn-tv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jn-tv-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  flex: 1 1 165px; min-width: 0; max-width: 300px;
  padding: 8px 12px; min-height: 44px; background: #fff; border: 1px solid #ddd; border-radius: 12px;
  cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; text-align: left;
}
.jn-tv-chip--off { flex: 0 1 auto; max-width: none; justify-content: center; }
.jn-tv-chip:hover { border-color: #ef1a00; }
.jn-tv-chip.is-selected { border-color: #ef1a00; box-shadow: 0 0 0 1px #ef1a00 inset; }
.jn-tv-chip-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; }
.jn-tv-chip-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.jn-tv-chip-name { font-size: 13px; font-weight: 700; color: #333; }
.jn-tv-chip-add { font-size: 13px; font-weight: 800; color: #ef1a00; }
.jn-tv-chip-old { font-size: 12px; color: #b3b3b3; text-decoration: line-through; }
.jn-tv-chip-save { font-size: 11px; font-weight: 600; color: #2e9e4b; }
.jn-tv-chip-ch { font-size: 11px; color: #9a9a9a; }
.jn-tv-channels {
  display: block; margin: 10px 0 0; padding: 0; background: none; border: 0;
  color: #ef1a00; font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer;
}
.jn-tv-channels:hover { text-decoration: none; }
.jn-tv-total { margin-top: 10px; font-size: 14px; color: #333; }
.jn-tv-total b { color: #ef1a00; font-size: 16px; }
.jn-tv-total-split { color: #9a9a9a; font-size: 12px; }
.jn-tv-order-note {
  margin: -14px 0 20px; padding: 10px 14px; border-radius: 12px;
  background: #fff3f1; color: #333; font-size: 14px; line-height: 1.4;
}
.jn-tv-order-note b { color: #ef1a00; }

/* Десктоп: .plan-details — flex-row; опція ТБ займає повний рядок під інфо-колонками */
.plan-details:has(.jn-tv) { flex-wrap: wrap; }
.plan-details .jn-tv { flex-basis: 100%; min-width: 100%; }

/* Інфо-рядки тарифу + кнопка «Замовити» — у власній обгортці .jn-plan-rows.
   Кнопка absolute від .plan-details лягала поверх блоку ТБ і не клікалась,
   а hover-блюр глушив чіпи пакетів. Тепер і кнопка, і блюр обмежені рядками тарифу. */
.plan-details > .jn-plan-rows {
  position: relative; display: flex; justify-content: flex-start;
  flex-basis: 100%; min-width: 100%; max-width: 100%; padding: 0;
}
/* колонки вирівняні по лівому краю — в один рівень із блоками ТБ і передоплати */
.plan-details > .jn-plan-rows > div { flex: 0 0 33%; max-width: 33%; padding: 0 20px 0 0; }
.plan-details:has(.jn-plan-rows)::before { display: none; }
.plan-details > .jn-plan-rows::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0; z-index: 1; backdrop-filter: blur(3px); transition: opacity .3s;
}
.plan-card:hover .plan-details > .jn-plan-rows::before { opacity: 1; }
.plan-details > .jn-plan-rows > .custom-btn-arrow { z-index: 10; }

@media (max-width: 575.98px) {
  .plan-details > .jn-plan-rows { position: static; flex-wrap: wrap; justify-content: space-between; }
  /* width:50% не діяв — базовий flex-basis 33% сильніший, колонки виходили по 102px */
  .plan-details > .jn-plan-rows > div { flex: 0 0 50%; max-width: 50%; padding: 0 6px 0 0; order: 1; }
  /* на мобілці кнопка не absolute-пінована знизу — інакше накриває блок ТБ */
  .plan-card .plan-details:has(.jn-tv) .custom-btn-arrow {
    position: static; order: 2; margin-top: 14px; align-self: flex-start;
  }
  .plan-details:has(.jn-tv) { padding-bottom: 15px; }
}

/* Мапа покриття: SSR-тарифи під картою (ТЗ п.2) */
.coverage-tariffs { margin-top: 50px; }
.coverage-tariffs-title { font-size: clamp(24px, 3vw, 40px); letter-spacing: -0.03em; margin-bottom: 24px; }
/* Правки 17.08 п.3: 30px між червоними «хвилями» цін і блоком акцій читались
   як «відступу немає» — банер білий на білому тлі сторінки покриття. */
.coverage-tariffs .plan-banner { margin-top: 60px; }
.coverage-tariffs .jn-ng-banner { margin-top: 60px; }
.coverage-tariffs-more { margin-top: 24px; font-size: 15px; }
.coverage-tariffs-more a { color: #ef1a00; font-weight: 700; text-decoration: underline; }
.coverage-tariffs-more a:hover { text-decoration: none; }

/* GPS-поле у формі заявки (ТЗ п.5) */
.jn-gps-row .jn-gps-detect {
  margin-top: 8px; padding: 8px 14px; min-height: 36px; background: none;
  border: 1px solid #ef1a00; border-radius: 999px; color: #ef1a00;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s ease;
}
.jn-gps-row .jn-gps-detect:hover { background: #ef1a00; color: #fff; }
.jn-gps-row .jn-gps-detect:disabled { opacity: .5; cursor: wait; }
.jn-gps-hint { display: block; margin-top: 6px; font-size: 12px; color: #9a9a9a; line-height: 1.4; }
/* ТЗ п.16: на ПК координати часто визначаються по Wi-Fi/IP — підсвічуємо точність
   і даємо посилання на мапу, щоб абонент звірився перед відправкою заявки. */
.jn-gps-hint.is-warn { color: #ef1a00; }
.jn-gps-hint.is-ok { color: #1f8f4a; }
.jn-gps-hint .jn-gps-check { color: inherit; font-weight: 700; text-decoration: underline; }
.jn-gps-hint .jn-gps-check:hover { text-decoration: none; }

/* ТЗ п.5: партнери + підтримка + SEO-текст головної */
.jn-sec-title { font-size: clamp(26px, 3.4vw, 44px); letter-spacing: -0.03em; margin-bottom: 28px; font-family: "HelveticaNeueCyr-Black"; }
.jn-partners { padding: 50px 0 30px; }
/* Правки 24.08 п.7: сітка з однаковими клітинками — при flex-wrap ширина плитки
   залежала від розміру лого і ряд виглядав рваним. */
.jn-partners-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; align-items: stretch; }
.jn-partner {
  display: flex; align-items: center; justify-content: center; padding: 16px 20px; min-height: 96px;
  background: #fff; border: 1px solid #eee; border-radius: 14px; text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
@media (max-width: 1100px) { .jn-partners-row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px)  { .jn-partners-row { grid-template-columns: repeat(3, 1fr); gap: 10px; } .jn-partner { min-height: 74px; padding: 12px 10px; } }
@media (max-width: 480px)  { .jn-partners-row { grid-template-columns: repeat(2, 1fr); } }
a.jn-partner:hover { border-color: #ef1a00; box-shadow: 0 6px 24px rgba(0,0,0,.06); } /* hover лише на клікабельних (з url) */
.jn-partner-logo { max-height: 46px; max-width: 100%; width: auto; object-fit: contain; }
.jn-partner-name { font-size: 15px; font-weight: 800; color: #333; letter-spacing: -0.01em; text-align: center; line-height: 1.25; }
.jn-support { padding: 30px 0 50px; }
.jn-support-intro { max-width: 720px; color: #6b6b6b; font-size: 15px; margin-bottom: 22px; }
.jn-support-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.jn-support-card {
  display: flex; flex-direction: column; gap: 10px; padding: 22px; min-height: 150px;
  background: #fff; border: 1px solid #eee; border-radius: 16px; transition: border-color .2s ease;
}
.jn-support-card:hover { border-color: #ef1a00; }
.jn-support-card-title { font-size: 17px; font-weight: 800; color: #111; }
.jn-support-card-text { font-size: 14px; color: #6b6b6b; line-height: 1.5; flex-grow: 1; }
.jn-support-link {
  align-self: flex-start; padding: 0; background: none; border: 0; cursor: pointer;
  color: #ef1a00; font-size: 14px; font-weight: 700; text-decoration: underline;
}
.jn-support-link:hover { text-decoration: none; }
@media (max-width: 991px) { .jn-support-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .jn-support-grid { grid-template-columns: 1fr; } }
.jn-home-seo { padding: 10px 0 60px; }
.jn-home-seo-text { color: #555; font-size: 15px; line-height: 1.6; }
.jn-home-seo-text.is-collapsed { max-height: 180px; overflow: hidden; position: relative; }
.jn-home-seo-text.is-collapsed::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 70px;
  background: linear-gradient(transparent, #f8f8f8);
}
.jn-seo-toggle {
  margin-top: 12px; padding: 0; background: none; border: 0; cursor: pointer;
  color: #ef1a00; font-size: 14px; font-weight: 700; text-decoration: underline;
}
.jn-seo-toggle:hover { text-decoration: none; }

/* ============================================================
   Мапа покриття — вступний блок, технології, акції (в стилі сайту)
   ============================================================ */
.mapsec .coverage-intro { max-width: none; margin: 30px 0 0; text-align: left; }
.mapsec .coverage-intro h1 {
  text-align: left !important;
  font-family: "HelveticaNeueCyr-Black", "Montserrat", sans-serif;
  font-size: clamp(30px, 4vw, 56px);
  line-height: .98; letter-spacing: -.04em;
  margin: 0 0 20px; max-width: 15ch;
}
.mapsec .coverage-intro h1::after {
  content: ''; display: block; width: 78px; height: 5px;
  margin-top: 22px; background: #ef1a00; border-radius: 4px;
}
.mapsec .coverage-intro p {
  font-size: 17px; line-height: 1.65; letter-spacing: 0;
  color: #4a4a4a; margin: 0 0 16px; max-width: 900px;
}
.mapsec .coverage-intro p:last-child { margin-bottom: 0; }
.mapsec .coverage-intro p strong { color: #111; font-weight: 800; }

@media (min-width: 1200px) {
  .mapsec .coverage-intro {
    display: grid; grid-template-columns: minmax(300px, 36%) 1fr;
    column-gap: 60px; align-items: start;
  }
  .mapsec .coverage-intro > h1 { grid-column: 1; grid-row: 1 / span 20; margin-bottom: 0; }
  .mapsec .coverage-intro > p  { grid-column: 2; }
}

/* Технології — однорідні пігулки в картці, замість різнобарвних */
.coverage-tools {
  margin: 34px 0 24px; padding: 18px 24px;
  background: #fff; border: 1px solid #efefef; border-radius: 18px;
  box-shadow: 0 4px 30px rgba(0,0,0,.06);
}
.coverage-tech-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: #333; border: 1px solid #e6e6e6;
  font-size: 13px; font-weight: 600; padding: 7px 14px;
}
.coverage-tech-badge::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #ef1a00; flex: 0 0 auto;
}
.tech-eth, .tech-gpon, .tech-xgs, .tech-xpon, .tech-backup { background: #fff; }

/* Акції під тарифами — не заїжджають на робота, лінк у фірмовому стилі */
.coverage-tariffs .plan-banner {
  align-items: flex-start;
  padding: 34px 500px 34px 40px;
}
.coverage-tariffs .plan-banner .plan-banner-content {
  max-width: 100%; font-size: 17px; letter-spacing: 0; line-height: 1.5;
}
.coverage-tariffs .plan-banner-content .h2 { font-size: clamp(24px, 2.6vw, 34px); margin: 0; }
.coverage-tariffs .plan-banner-content ul { margin: 22px 0 0; }
.coverage-tariffs .plan-banner-content ul li { font-size: 17px; line-height: 1.5; }
.coverage-tariffs .plan-banner-content ul li:not(:last-child) { margin-bottom: 16px; }
.coverage-tariffs .plan-banner-content li p { display: inline; margin: 0; font-size: 17px; line-height: 1.5; }
.pricecut-more {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 10px;
  color: #ef1a00; font-size: 14px; font-weight: 700; text-decoration: none;
  white-space: nowrap; border-bottom: 1px solid rgba(239,26,0,.4);
}
.pricecut-more::after { content: '\2192'; font-size: 15px; line-height: 1; }
.pricecut-more:hover { border-bottom-color: transparent; }

@media (min-width: 769px) and (max-width: 1100px) {
  .coverage-tariffs .plan-banner { padding: 30px 320px 30px 30px; }
  .coverage-tariffs .plan-banner-img { max-width: 300px; }
}
@media (min-width: 576px) and (max-width: 768px) {
  .coverage-tariffs .plan-banner { padding: 26px 24px 220px; }
  .coverage-tariffs .plan-banner-img { max-width: 250px; }
}
@media (max-width: 575px) {
  /* нижче 575px тема сама відсуває контент (margin-bottom:310px) — свій padding-bottom не додаємо */
  .coverage-tariffs .plan-banner { padding: 20px 15px 30px; }
  .coverage-tools { padding: 16px; }
}

/* ============================================================
   Правки 28.07 — адресний пошук на мапі, передоплата, Next-Gen банер
   ============================================================ */

/* ---------- п.4: блок вибору адреси над картою ---------- */
.coverage-addr {
  margin: 24px 0 0; padding: 20px 22px; background: #fff;
  border: 1px solid #ececec; border-radius: 20px; box-shadow: 0 4px 30px rgba(0,0,0,.06);
}
.coverage-addr-title { font-size: 18px; font-weight: 800; color: #1a1a1a; margin-bottom: 14px; letter-spacing: -0.01em; }
.coverage-addr-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.coverage-addr-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; min-width: 0; }
.coverage-addr-field > span { font-size: 13px; font-weight: 600; color: #6f6f6f; }
.coverage-addr-select {
  width: 100%; height: 46px; padding: 0 34px 0 14px; border: 1px solid #ddd; border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-size: 15px; color: #1a1a1a; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.coverage-addr-select:disabled { background-color: #f6f6f6; color: #9a9a9a; cursor: default; }
.coverage-addr-select:focus { outline: none; border-color: #ef1a00; }
.coverage-addr-btn {
  flex: 0 0 auto; height: 46px; padding: 0 26px; background: #ef1a00; color: #fff;
  border: 1px solid transparent; border-radius: 40px; font-weight: 700; font-size: 15px; cursor: pointer;
  transition: background .2s ease;
}
.coverage-addr-btn:hover { background: #d11700; color: #fff; }
.coverage-addr-hint { margin-top: 12px; font-size: 14px; color: #6f6f6f; line-height: 1.5; min-height: 22px; }
.coverage-addr-hint b { color: #1a1a1a; }
@media (max-width: 767px) {
  .coverage-addr { padding: 16px; }
  .coverage-addr-hint { min-height: 66px; }
  .coverage-addr-field { flex: 1 1 100%; }
  .coverage-addr-btn { width: 100%; }
}

/* ---------- п.4: попап маркера ---------- */
.jn-mk-popup .leaflet-popup-content-wrapper { border-radius: 16px; padding: 4px; }
.jn-mk-popup .leaflet-popup-content { margin: 14px 16px; width: auto !important; min-width: 230px; }
.jn-mk-title { font-size: 15px; font-weight: 800; color: #1a1a1a; line-height: 1.35; margin-bottom: 10px; }
.jn-mk-tech { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.jn-mk-tech .coverage-tech-badge { font-size: 11px; padding: 4px 10px; }
.jn-mk-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: #6f6f6f; margin-bottom: 4px; }
.jn-mk-row b { color: #2e9e4b; }
.jn-mk-btns { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.jn-mk-connect {
  background: #ef1a00; color: #fff; border: 0; border-radius: 40px;
  padding: 10px 20px; font-weight: 700; font-size: 13px; cursor: pointer;
}
.jn-mk-connect:hover { background: #d11700; }
.jn-mk-link { font-size: 13px; color: #ef1a00; font-weight: 600; text-decoration: underline; }
.jn-mk-link:hover { text-decoration: none; }

/* ---------- п.6: передоплата за кілька місяців ---------- */
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 7px 12px; background: #fff; border: 1px solid #ddd; border-radius: 12px;
  cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; text-align: left;
}

/* ---------- п.6: банер переходу на XG(S)PON ---------- */
.jn-ng-banner {
  position: relative; overflow: hidden; margin-top: 30px; padding: 34px 40px;
  border-radius: 20px; background: linear-gradient(120deg, #1a1a1a 0%, #3a0d05 55%, #ef1a00 100%); color: #fff;
}
.jn-ng-banner-img { position: absolute; right: 0; top: 0; height: 100%; width: auto; object-fit: cover; opacity: .35; pointer-events: none; }
.jn-ng-banner-body { position: relative; z-index: 1; max-width: 720px; }
.jn-ng-badge {
  display: inline-block; margin-bottom: 12px; padding: 5px 14px; border-radius: 40px;
  background: rgba(255,255,255,.16); font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.jn-ng-title { font-family: "HelveticaNeueCyr-Black","Montserrat",sans-serif; font-size: clamp(24px, 3vw, 38px); letter-spacing: -0.03em; line-height: 1.05; }
.jn-ng-text { margin-top: 12px; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.86); }
.jn-ng-banner .jn-ng-btn { margin-top: 22px; }
@media (max-width: 767px) { .jn-ng-banner { padding: 24px 20px; } .jn-ng-banner-img { display: none; } }

/* ---------- п.5: сторінка району / масиву ---------- */
.area-hero { margin-top: 10px; }
.area-hero-title { font-family: "HelveticaNeueCyr-Black","Montserrat",sans-serif; font-size: clamp(28px, 4vw, 56px); letter-spacing: -0.04em; line-height: 1; margin-bottom: 16px; }
.area-intro { font-size: 17px; line-height: 1.65; color: #4a4a4a; max-width: 900px; }
.area-block { margin-top: 40px; }
.area-block-title { font-size: 20px; font-weight: 800; color: #ef1a00; margin-bottom: 14px; }
.area-cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.area-card {
  display: block; padding: 16px 18px; border: 1px solid #ececec; border-radius: 16px;
  background: #fff; color: #1a1a1a; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.area-card:hover { border-color: #ef1a00; box-shadow: 0 4px 20px rgba(0,0,0,.07); }
.area-card-name { font-size: 15px; font-weight: 700; line-height: 1.35; }
.area-card-sub { margin-top: 4px; font-size: 12px; color: #9a9a9a; }
.area-seo { margin-top: 44px; padding-top: 28px; border-top: 1px solid #ececec; color: #4a4a4a; font-size: 16px; line-height: 1.7; }
@media (max-width: 991px) { .area-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .area-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .area-cards { grid-template-columns: 1fr; } }

/* район у переліку покриття — посилання на власну SEO-сторінку */
.coverage-group-title a { color: inherit; text-decoration: none; border-bottom: 2px solid transparent; }
.coverage-group-title a:hover { border-color: currentColor; }
.coverage-links-areas { margin-bottom: 10px; }
.coverage-links-areas a { font-weight: 700; color: #1a1a1a; border-bottom: 1px solid #ddd; }

/* чіпи районів/масивів у поп-апі вибору адреси (п.5) */
.jn-areas { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.jn-areas-sub { margin-top: -6px; padding-left: 2px; }
.jn-area-chip {
  padding: 7px 14px; border: 1px solid #e4e4e4; border-radius: 40px; background: #fff;
  font-size: 13px; font-weight: 600; color: #555; cursor: pointer; transition: all .15s ease;
}
.jn-area-chip:hover { border-color: #ef1a00; color: #ef1a00; }
.jn-area-chip.is-active { background: #ef1a00; border-color: #ef1a00; color: #fff; }
.jn-areas-sub .jn-area-chip { font-size: 12px; padding: 5px 12px; }

/* сторінка району/масиву не має верхнього хедера — відсуваємо з-під фіксованого меню */
.tarifsec.area-tax { padding-top: 180px; }
@media (max-width: 991px) { .tarifsec.area-tax { padding-top: 120px; } }
@media (max-width: 575px) { .tarifsec.area-tax { padding-top: 100px; } }
.tarifsec.area-tax .breadcumbs { margin-top: 0; }
.area-map-box { margin-top: 20px; }
.area-map-box #map { height: 480px; border-radius: 20px; }

@media (max-width: 575.98px) {
  /* нижній рядок передоплати впритул до червоного блоку ціни — додаємо повітря */
}

/* підказка про зум колесом — карта більше не перехоплює скрол сторінки */
.mapsec-box { position: relative; }
.mapsec-box::marker { content: none; }
#map.is-zoomable { box-shadow: inset 0 0 0 2px rgba(239,26,0,.35); }

/* .plan-details>div{padding:0 10px} — шорткат із main.css. Він не тільки зсував
   тумблер ТБ і блок передоплати на 10px вправо, а й обнуляв їм padding-top,
   через що тумблер прилипав до верхньої пунктирної лінії. */
.plan-details > .jn-tv { padding-top: 18px; padding-bottom: 4px; }

/* ============================================================
 * Правки (2) 28.07 — пп. 1–7
 * ============================================================ */

/* п.1 + п.3: картка тарифу.
   Було: .jn-plan-rows > div { flex: 0 0 33% } — при 4 інфо-блоках сума 132%,
   четверта колонка («Діючим абонентам») заїжджала під червоний блок ціни.
   Плюс .label { margin-top: 44px } і широкі бокові колонки давали багато пустот. */
@media (min-width: 576px) {
  .plan-card { min-height: 0; margin: 14px 0; }
  .plan-card .plan-name { flex: 0 0 235px; font-size: 27px; padding: 18px 14px; }
  .plan-card .plan-details { flex: 1 1 auto; padding: 18px 24px; }
  .plan-card .plan-price { flex: 0 0 225px; padding: 22px 16px 22px 26px; }
  .plan-card .plan-price .current { font-size: 54px; padding: 0 8px; }
  .plan-card .plan-price .old { font-size: 26px; }
  .plan-card .plan-price .unit { font-size: 17px; margin-top: -6px; }

  /* колонки переносяться замість того щоб вилазити за межі, і не розтягуються
     на всю ширину: при 2 інфо-блоках картка не «розповзається», а вивільнене
     місце займає кнопка «Замовити» на ховері */
  .plan-details > .jn-plan-rows { flex-wrap: wrap; justify-content: flex-start; gap: 10px 18px; }
  .plan-details > .jn-plan-rows > div { flex: 1 1 150px; max-width: 215px; padding: 0; }
  .plan-details .label { margin-top: 0; font-size: 15px; color: #6f6f6f; line-height: 1.25; }
  .plan-details .value { font-size: 18px; margin-top: 3px; line-height: 1.3; }
}
@media (min-width: 576px) and (max-width: 1199.98px) {
  .plan-card .plan-name { flex: 0 0 150px; font-size: 20px; padding: 14px 10px; }
  .plan-card .plan-details { padding: 16px 14px; }
  .plan-card .plan-price { flex: 0 0 160px; padding: 18px 10px 18px 22px; }
  .plan-card .plan-price .current { font-size: 38px; padding: 0 6px; }
  .plan-details .label { font-size: 13px; }
  .plan-details .value { font-size: 15px; }
}

/* п.2: бейдж «Офіційний партнер SWEET.TV» висів окремою плашкою праворуч від
   заголовка. Тепер — лого партнера в рядку з підзаголовком, без рамки й фону. */
.sttv-head-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.sttv-head-meta .sttv-subtitle { margin-top: 0; }
.sttv-partner { display: inline-flex; align-items: center; gap: 9px; }
.sttv-partner::before { content: ''; width: 1px; height: 16px; background: #dedede; margin-right: 5px; }
.sttv-partner-logo { display: block; width: auto; height: 17px; }
.sttv-partner-text { font-size: 13px; color: #8a8a8a; white-space: nowrap; }
@media (max-width: 575.98px) {
  .sttv-partner::before { display: none; }
  .sttv-head-meta { gap: 10px; }
}

/* п.5–7: «Детальніше» — кнопка-пігулка, відкриває поп-ап акції (сторінки CPT порожні) */
.pricecut-more {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 12px;
  padding: 7px 16px; border: 1.5px solid #ef1a00; border-radius: 999px;
  color: #ef1a00; font-size: 13px; font-weight: 700; line-height: 1;
  white-space: nowrap; transition: background .2s, color .2s;
}
/* .custom-content a { text-decoration: underline } з main.css сильніший за
   .pricecut-more — усередині пігулки лишалося зайве підкреслення тексту */
.custom-content .pricecut-more, .pricecut-more { text-decoration: none; }
.custom-content .pricecut-more:hover { text-decoration: none; }
.pricecut-more::after { content: '→'; font-size: 14px; line-height: 1; }
.pricecut-more:hover { background: #ef1a00; color: #fff; }
.plan-banner-content ul li:has(.pricecut-more) { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.plan-banner-content ul li:has(.pricecut-more) p { flex: 0 1 auto; margin: 0; }

/* п.6: контент акції в поп-апі — коли сторінка CPT порожня */
.jn-pc-popup { display: none; }
.jn-pc-popup .pricecutsin-intro { margin-bottom: 24px; }

/* п.4: пошук по назві — комбобокс нас. пункту + фільтр переліку покриття */
/* Leaflet тримає свої пейни на z-index 400–1000 — випадайку треба вище,
   інакше список нас. пунктів ховається під картою. */
.coverage-addr { position: relative; z-index: 1100; }
.jn-ss { position: relative; width: 100%; }
.jn-ss > select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.jn-ss-input {
  width: 100%; height: 46px; padding: 0 34px 0 14px; border: 1px solid #ddd; border-radius: 12px;
  background: #fff; font-size: 15px; color: #1a1a1a; outline: none;
}
.jn-ss-input:focus { border-color: #ef1a00; }
.jn-ss::after {
  content: ''; position: absolute; right: 15px; top: 17px; width: 8px; height: 8px;
  border-right: 2px solid #888; border-bottom: 2px solid #888; transform: rotate(45deg);
  pointer-events: none;
}
.jn-ss-list {
  position: absolute; z-index: 1200; left: 0; right: 0; top: 100%; margin-top: 4px; max-height: 280px;
  overflow-y: auto; background: #fff; border: 1px solid #e6e6e6; border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0,0,0,.12); display: none;
}
.jn-ss.is-open .jn-ss-list { display: block; }
.jn-ss-opt { padding: 10px 14px; font-size: 14px; cursor: pointer; }
.jn-ss-opt:hover, .jn-ss-opt.is-active { background: #fdece9; color: #ef1a00; }
.jn-ss-empty { padding: 12px 14px; font-size: 14px; color: #8a8a8a; }

.coverage-search { position: relative; margin: 0 0 22px; max-width: 420px; }
.coverage-search input {
  width: 100%; height: 46px; padding: 0 14px; border: 1px solid #e0e0e0; border-radius: 10px;
  font-size: 15px; outline: none;
}
.coverage-search input:focus { border-color: #ef1a00; }
.coverage-group.is-hidden, .coverage-links li.is-hidden { display: none; }
.coverage-search-empty { color: #8a8a8a; font-size: 15px; margin-bottom: 18px; display: none; }

/* Правки (2) п.3 додавали на головній сітку 2 картки в ряд — тоді картка тарифу
   займала всю ширину контейнера і дві третини її площі лишалися порожніми.
   Правки (3): порожнього місця більше нема (пакети ТБ + умови акції видно одразу),
   а у вузькій колонці все це тіснилося — головна знову як сторінки нас. пунктів,
   одна картка в ряд. Правила лишаю закоментованими, щоб не шукати їх наново. */

/* ==========================================================================
   Правки 11.08 — плиткова сітка тарифів
   --------------------------------------------------------------------------
   Клієнт: «варіант з плиткою був би краще… бо зараз багато всього і важко
   на чомусь сконцентруватись і порівняти». Горизонтальна картка (інфо-рядки
   ліворуч + червоний клин праворуч) розтягувалась на 700+ px по висоті й
   порівнювати тарифи очима було нереально. Тепер — сітка вертикальних плиток;
   деталі відкриваються кнопкою «Детальніше».
   ========================================================================== */
.plan-cards.jn-tile {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  align-items: stretch;
}
.plan-cards.jn-tile .plan-card {
  position: relative;
  flex-direction: column;
  margin: 0;
  min-height: 0;
}
.plan-cards.jn-tile .plan-name {
  min-height: 0;
  padding: 22px 20px 18px;
  border: 0;
  border-bottom: 1px solid #ebebeb;
  font-size: 28px;
  justify-content: center;
  text-align: center;
}
.plan-cards.jn-tile .plan-details {
  position: static;
  display: block;
  flex-wrap: nowrap;
  padding: 18px 20px 20px;
  flex: 1 1 auto;
}
/* блюр-оверлей ховав інфо-рядки під ховер — у плитці нічого ховати не треба */
.plan-cards.jn-tile .plan-details:before,
.plan-cards.jn-tile .plan-details > .jn-plan-rows::before { display: none; }

/* інфо-рядки лишаються в DOM (з них будується поп-ап), але в плитці не показуються */
.plan-cards.jn-tile .jn-plan-rows { display: none; }

/* Червоний блок ціни — знизу плитки, як у мобільній версії */
.plan-cards.jn-tile .plan-price {
  position: relative;
  flex: 0 0 auto;
  align-items: flex-end;
  justify-content: center;
  padding: 10px 20px 18px;
  margin-top: auto;
}
.plan-cards.jn-tile .plan-price svg { display: none; }
.plan-cards.jn-tile .plan-price:after {
  content: ""; position: absolute; bottom: 100%; height: 30px; width: 100%; left: 0;
  background: url(../img/plan-svg-mob.svg) no-repeat center center/100% 100%;
}
.plan-cards.jn-tile .plan-price .price { justify-content: center; }
.plan-cards.jn-tile .plan-price .current { font-size: 60px; padding: 0; }
.plan-cards.jn-tile .plan-price .old {
  font-size: 20px; line-height: 20px; position: absolute; bottom: 100%;
  left: 50%; transform: translateX(-50%); margin-bottom: -7px; text-align: center;
}
.plan-cards.jn-tile .plan-price .old:after { height: 1px; }
.plan-cards.jn-tile .plan-price-inner { position: relative; z-index: 30; text-align: center; }
.plan-cards.jn-tile .plan-price-link { font-size: 12px; font-weight: 500; white-space: nowrap; }

/* --- вміст плитки --- */
.jn-tile-speed {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 12px; border-bottom: 1px dashed #e2e2e2;
}
.jn-tile-speed span { font-size: 13px; color: #8a8a8a; }
.jn-tile-speed b { font-size: 20px; font-weight: 800; color: #1a1a1a; }

/* Правки 12.08 п.10 — вартість підключення видно одразу на плитці, не тільки в поп-апі */
.jn-tile-conn {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px dashed #e2e2e2;
}
.jn-tile-conn span { font-size: 13px; color: #8a8a8a; }
.jn-tile-conn b { font-size: 14px; font-weight: 800; color: #2e9e4b; text-align: right; }

.jn-tile-bonus { margin-top: 14px; }
.jn-tile-term { display: block; margin-top: 6px; font-size: 13px; color: #6f6f6f; }

/* Тумблер ТБ — видно одразу, пакети розкриваються по кліку (правки 11.08 п.3) */
.jn-tv-switch { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.jn-sw { position: relative; display: inline-block; width: 44px; height: 24px; flex: 0 0 44px; cursor: pointer; }
.jn-sw-input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.jn-sw-track {
  position: absolute; inset: 0; background: #d9d9d9; border-radius: 24px; transition: background .2s ease;
}
.jn-sw-track:before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: transform .2s ease;
}
.jn-sw-input:checked + .jn-sw-track { background: #ef1a00; }
.jn-sw-input:checked + .jn-sw-track:before { transform: translateX(20px); }
.jn-sw-label { font-size: 14px; font-weight: 700; color: #333; }
.jn-sw-label i { color: #ef1a00; font-style: normal; }

.plan-cards.jn-tile .jn-tv { display: none; margin-top: 12px; padding-top: 12px; }
.plan-cards.jn-tile .plan-card.jn-tv-on .jn-tv { display: block; }
.plan-cards.jn-tile .jn-tv-title { display: none; }
.plan-cards.jn-tile .jn-tv-chips { flex-direction: column; gap: 6px; }
.plan-cards.jn-tile .jn-tv-chip { flex: 1 1 auto; max-width: none; }

/* Додаткові місяці (правки 11.08 п.6) */
.jn-xm { margin-top: 16px; padding-top: 14px; border-top: 1px dashed #e2e2e2; }
.jn-xm-title { font-size: 13px; font-weight: 700; color: #333; margin-bottom: 8px; }
.jn-xm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jn-xm-chip {
  background: #fff; border: 1px solid #e2e2e2; border-radius: 30px; padding: 6px 14px;
  font-size: 13px; font-weight: 700; color: #333; cursor: pointer; transition: .2s;
}
.jn-xm-chip:hover { border-color: #ef1a00; }
.jn-xm-chip.is-selected { border-color: #ef1a00; box-shadow: 0 0 0 1px #ef1a00 inset; color: #ef1a00; }
.jn-xm-note { margin-top: 7px; font-size: 12px; color: #9a9a9a; line-height: 1.4; }

/* Економія: окремо за тариф, окремо за дод. місяці, окремо загальна */
.jn-save { margin-top: 14px; }
.jn-save-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 13px; color: #6f6f6f; padding: 3px 0;
}
.jn-save-row b { font-size: 14px; font-weight: 800; color: #2e9e4b; white-space: nowrap; }
.jn-save-total { border-top: 1px solid #ececec; margin-top: 5px; padding-top: 7px; color: #333; font-weight: 700; }
.jn-save-total b { font-size: 16px; }
.jn-save-pay { margin-top: 6px; font-size: 13px; color: #333; }
.jn-save-pay b { color: #1a1a1a; font-size: 15px; }
/* Правки 12.08 п.1 — ТБ у суму не входить, підписуємо це прямо під підсумком */
.jn-save-pay-note { display: block; font-size: 11px; color: #9a9a9a; margin-top: 2px; }

.jn-tile-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.plan-cards.jn-tile .jn-tile-btns .custom-btn-arrow {
  position: static; opacity: 1; visibility: visible; transform: none;
  top: auto; right: auto; left: auto; bottom: auto;
  height: 44px; line-height: 42px; font-size: 13px; padding: 0 46px 0 20px;
  background-position: center right 16px; flex: 1 1 auto;
}
.jn-more {
  flex: 0 0 auto; background: none; border: 1px solid #e2e2e2; border-radius: 40px;
  padding: 0 20px; height: 44px; font-size: 13px; font-weight: 700; color: #333;
  cursor: pointer; transition: .2s;
}
/* .jn-more має класом ще й тематичний .btn-trans, чий :hover заливає кнопку
   червоним — тож текст мусить бути білим, інакше червоне на червоному. */
.jn-more:hover, .jn-more:focus { background: #ef1a00; border-color: #ef1a00; color: #fff; }

/* --- поп-ап «Детальніше» --- */
.jn-plan-popup {
  max-width: 620px; width: 100%; background: #fff; border-radius: 20px; padding: 30px;
}
.jn-pop-head {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding-bottom: 16px; border-bottom: 1px solid #ececec;
}
.jn-pop-name { font-family: "HelveticaNeueCyr-Black", sans-serif; font-size: 30px; line-height: 1; }
.jn-pop-price { font-size: 15px; color: #6f6f6f; }
.jn-pop-price b { font-size: 30px; color: #ef1a00; font-weight: 800; }
.jn-pop-price s { color: #b3b3b3; margin-left: 6px; }
.jn-pop-info { margin-top: 14px; }
.jn-pop-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 7px 0; border-bottom: 1px dashed #ececec; font-size: 14px; color: #6f6f6f;
}
.jn-pop-row b { color: #1a1a1a; font-weight: 700; text-align: right; }
.jn-pop-note { margin-top: 14px; font-size: 13px; color: #6f6f6f; line-height: 1.5; }
.jn-pop-note b { color: #1a1a1a; }
.jn-pop-save { margin-top: 14px; }
.jn-pop-tv { margin-top: 14px; font-size: 13px; color: #6f6f6f; line-height: 1.5; }
.jn-pop-btns { margin-top: 22px; }
.jn-pop-btns .custom-btn-arrow {
  position: static; opacity: 1; visibility: visible; transform: none;
  height: 48px; line-height: 46px; padding: 0 50px 0 22px; font-size: 14px;
  background-position: center right 18px;
}

@media (max-width: 575.98px) {
  .plan-cards.jn-tile { grid-template-columns: 1fr; gap: 18px; }
  .jn-plan-popup { padding: 20px; }
  .jn-pop-name { font-size: 24px; }
  .jn-pop-price b { font-size: 24px; }
}

/* main.css задає .plan-details>div{max-width:33%;padding:0 10px} під горизонтальну
   картку — у плитці це стискало кожен блок до третини ширини. */
.plan-cards.jn-tile .plan-details > div { max-width: none; width: auto; padding: 0; }
.plan-cards.jn-tile .plan-name { flex: 0 0 auto; align-items: center; }
/* fancybox малює хрестик у правому верхньому куті — лишаємо йому місце */
.jn-pop-head { padding-right: 44px; }
/* мобільні правила теми ставлять .custom-btn-arrow у кінець рядка — фіксуємо порядок */
.plan-cards.jn-tile .jn-tile-btns .custom-btn-arrow { order: 0; }
.plan-cards.jn-tile .jn-tile-btns .jn-more { order: 1; }

/* Хвиля над блоком ціни — це .plan-price:after (bottom:100%, height:30px), тобто
   вона малюється ПОВЕРХ низу .plan-details і накривала кнопки. Лишаємо їй місце
   й трохи стискаємо сам блок ціни, щоб не було порожнього червоного поля. */
.plan-cards.jn-tile .plan-details { padding-bottom: 38px; }
.plan-cards.jn-tile .plan-price { padding: 4px 20px 14px; }
.plan-cards.jn-tile .plan-price .current { font-size: 52px; line-height: 1; }
.plan-cards.jn-tile .plan-price .unit { font-size: 16px; margin-top: -4px; }
.plan-cards.jn-tile .plan-price { flex-direction: column; align-items: center; }

/* Блок ціни: акційна велика, перекреслена базова — маленьким «степенем»
   праворуч, по центру відносно великої цифри. */
.plan-cards.jn-tile .plan-price .price {
  flex-direction: row; align-items: center; justify-content: center; gap: 6px;
}
.plan-cards.jn-tile .plan-price .current { font-size: 64px; line-height: .95; }
.plan-cards.jn-tile .plan-price .old {
  position: relative; top: auto; bottom: auto; left: auto; transform: none;
  margin: 0; font-size: 20px; font-weight: 700; line-height: 1;
  color: rgba(255,255,255,.7); flex: 0 0 auto; width: auto; align-self: center;
}
.plan-cards.jn-tile .plan-price .old:after { height: 1px; background: rgba(255,255,255,.7); }
.plan-cards.jn-tile .plan-price .unit { font-size: 18px; margin-top: 0; }

/* ==========================================================================
   Правки 13.08 п.2 — другий номер у шапці. 0800 працює тільки по Україні,
   0773 — єдиний, куди можуть додзвонитись з-за кордону, тож його теж треба
   читати з першого погляду: те саме розрідження, що й у 0800, але дрібніше.
   ========================================================================== */
.operator-box-header { margin-top: 2px; }
.operator-box-header .operator-item {
  font-size: 22px; font-weight: 300; letter-spacing: .06em; color: #4b484d;
}
.operator-box-header .operator-item-num span { font-weight: 500; }
.operator-box-header .operator-item-img { display: none; }
/* лого оператора прибрано і в контактах футера */
.operator-box-contact .operator-item-img { display: none; }

@media (max-width: 1199px) {
  .operator-box-header .operator-item { font-size: 18px; }
}

/* ============================================================
   Правки 17.08 п.1 — значок «i» з умовами акційних тарифів
   ============================================================ */
.jn-info {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 8px; padding: 0;
  background: #fff; border: 1.5px solid #ef1a00; border-radius: 50%;
  color: #ef1a00; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 800;
  line-height: 1; cursor: pointer; vertical-align: middle;
  transition: background .2s ease, color .2s ease;
}
.jn-info:hover { background: #ef1a00; color: #fff; }
.plan-cards.jn-tile .plan-name { gap: 0; }
/* у поп-апі «Детальніше» примітки показуємо текстом, а не значком —
   модалка поверх модалки читалась як зламана верстка */
.jn-pop-notes {
  margin-top: 18px; padding: 16px 18px;
  background: #fff7f5; border-left: 3px solid #ef1a00; border-radius: 8px;
}
.jn-pop-notes-title { font-size: 14px; font-weight: 700; color: #1a1a1a; }
.jn-pop-notes .jn-notes-list { margin-top: 10px; }
.jn-pop-notes .jn-notes-list li { padding-left: 20px; font-size: 13px; line-height: 1.5; }
.jn-pop-notes .jn-notes-list li:not(:last-child) { margin-bottom: 9px; }
.jn-pop-notes .jn-notes-list li::before { top: 5px; width: 8px; height: 8px; }

.jn-notes-popup {
  width: 100%; max-width: min(560px, calc(100vw - 24px)); box-sizing: border-box;
  padding: 30px 28px 26px; background: #fff; border-radius: 18px;
}
.jn-notes-title {
  padding-right: 44px;
  font-family: "HelveticaNeueCyr-Black", sans-serif; font-size: 24px; line-height: 1.15;
}
/* main.css відсуває хрестик fancybox на top:50/right:54 — це під великі поп-апи теми
   з широкими полями. У наших компактних вікнах він падав на ціну/перший рядок тексту,
   тож повертаємо його в кут. */
.fancybox-slide--html .jn-notes-popup .fancybox-close-small,
.fancybox-slide--html .jn-plan-popup .fancybox-close-small,
.fancybox-slide--html .sttv-channels-popup .fancybox-close-small,
.jn-notes-popup .fancybox-close-small,
.jn-plan-popup .fancybox-close-small,
.sttv-channels-popup .fancybox-close-small {
  top: 4px !important; right: 4px !important;
  width: 40px !important; height: 40px !important;
}
.jn-notes-list { list-style: none; margin: 18px 0 0; padding: 0; }
.jn-notes-list li {
  position: relative; padding-left: 26px; font-size: 15px; line-height: 1.55; color: #4a4a4a;
}
.jn-notes-list li:not(:last-child) { margin-bottom: 14px; }
.jn-notes-list li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 10px; height: 10px;
  background: #ef1a00; transform: rotate(45deg);
}
@media (max-width: 560px) {
  .jn-notes-popup { padding: 24px 18px 20px; }
  .jn-notes-title { font-size: 20px; }
  .jn-notes-list li { font-size: 14px; }
}


/* ==========================================================================
   Правки 20.08 п.4 — підписи під номерами телефонів.
   У шапці висота рядка обмежена (номери + два підписи мають влізти в 96px),
   тож підпис дрібний і без відступів; у контактах — звичайний текст.
   ========================================================================== */
.main-nav-operator .operator-note {
  font-size: 11px; line-height: 1.15; color: #8c898f; letter-spacing: 0;
  margin-top: 1px; white-space: nowrap;
}
/* .operator-box-header — flex-рядок, тож підпис без width:100% стає в той самий
   рядок праворуч від номера і розсуває шапку */
.main-nav-operator .operator-box-header { flex-wrap: wrap; }
.main-nav-operator .operator-box-header .operator-note { width: 100%; margin-top: 1px; }
.main-nav-operator .operator-big { line-height: 1.05; }
.operator-box-contact .operator-note {
  font-size: 14px; line-height: 1.25; color: #6f6c71; margin: 2px 0 12px;
}
.operator-box-contact .operator-note:last-child { margin-bottom: 0; }

@media (max-width: 1199px) {
  .main-nav-operator .operator-note { font-size: 10px; }
}
@media (max-width: 767px) {
  .operator-box-contact .operator-note { font-size: 13px; }
}

/* Правки 20.08 п.4.1 — підписи під номерами в картці «Телефонна підтримка» */
.jn-support-card-text .jn-tel-num { display: block; }
.jn-support-card-text .jn-tel-note {
  display: block; font-size: 13px; line-height: 1.25; color: #8c898f; margin: 1px 0 8px;
}
.jn-support-card-text .jn-tel-note:last-child { margin-bottom: 0; }

/* ==========================================================================
   Правки 24.08 п.9 — «20 років разом» ховалось під шапкою.
   .main-header має жорсткий margin-top:150px, а .main-nav — absolute, тож
   після появи підписів під номерами (п.4) шапка виросла до ~180px і бейдж
   (::before у .header-slider-wrapper з top:-26px) заїжджав під неї.
   Висоту шапки міряє JS і кладе в --jn-nav-h; 150px — фолбек без JS.
   ========================================================================== */
@media (min-width: 576px) {
  .main-header { margin-top: var(--jn-nav-h, 150px); }
}

/* ==========================================================================
   Правки 24.08 п.8 — клік по нас. пункту веде одразу до тарифів. Рядок став
   двоколонковим: назва + окрема кнопка «Уточнити вулицю» там, де є адреси.
   Стрілка праворуч показує, що рядок клікабельний і кудись веде.
   ========================================================================== */
.jn-list-item {
  display: flex; align-items: center; gap: 10px;
}
.jn-list-item .jn-list-main { flex: 1 1 auto; }
.jn-list-item::after {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-left: 2px;
  border-right: 2px solid #c9c9c9; border-top: 2px solid #c9c9c9;
  transform: rotate(45deg);
}
.jn-list-item:hover::after { border-color: #ef1a00; }
.jn-list-refine {
  flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #6f6c71;
  border: 1px solid #e2e2e2; border-radius: 30px; padding: 5px 12px; white-space: nowrap;
}
.jn-list-refine:hover { border-color: #ef1a00; color: #ef1a00; }
@media (max-width: 480px) {
  .jn-list-refine { font-size: 11px; padding: 4px 9px; }
}

/* ==========================================================================
   Правки 27.08 п.9.1 — шапка накладалась на контент і на внутрішніх сторінках.
   `.breadcumbs` мали жорсткий margin-top:175px (=150 + 25), а реальна висота
   `.main-nav` після підписів під номерами — 180px. Відступ рахуємо від тієї ж
   змінної, що й `.main-header` (її міряє JS у jetnet-custom.js).
   ========================================================================== */
@media (max-width: 575.98px) {
  /* мобільна шапка виросла до 71px, а margin-top лишався 65px */
  .breadcumbs { margin-top: calc(var(--jn-nav-h, 65px) + 14px); }
}
@media (min-width: 576px) {
  .breadcumbs { margin-top: calc(var(--jn-nav-h, 150px) + 25px); }
  /* сторінки без хлібних крихт (архіви/каталог) */
  .jn-nav-offset { margin-top: calc(var(--jn-nav-h, 150px) + 25px); }
}

/* ==========================================================================
   Правки 27.08 п.13 — номери в шапці стояли впритул до «Для бізнесу».
   ========================================================================== */
@media (min-width: 1200px) {
  /* Правки 31.08 п.13.1 — вільне місце в шапці розподіляємо між усіма блоками:
     логотип і «Особистий кабінет» більше не впритул до сусідів, а номери
     центруються між «Для бізнесу» і «Консультацією». Проміжок росте разом із
     екраном (на 1200px вільного місця майже нема, на 1296+ — 22px). */
  .main-nav-bottom { gap: clamp(4px, calc((100vw - 1200px) / 4), 22px); }
  .main-nav-bottom > .logo,
  .main-nav-bottom > .main-nav-btns,
  .main-nav-bottom > .btn-ico-solid,
  .main-nav-bottom > .user-link { flex: 0 0 auto; }
  /* Правки 31.08 п.13.2 — контент "прилипає" до логічних меж сітки:
     блок з номерами більше не розтягується на весь надлишок (номер і два
     підписи були відцентровані кожен по-своєму й давали рвану ліву межу).
     Тепер він шириною по контенту, всі чотири рядки починаються з однієї
     вертикалі, а вільне місце space-between рівно ділить між усіма блоками. */
  .main-nav-bottom .main-nav-operator { flex: 0 0 auto; padding-left: 0; }
  /* wrap-рядок "номер + підпис" рахував max-content в один рядок і роздував
     блок до 381px — у блоковому потоці підпис завжди під номером */
  .main-nav-operator .operator-box-header { display: block; }
  .main-nav-operator .operator-big,
  .main-nav-operator .operator-note { text-align: left; }
  /* і сама шапка нижча: 22px паддінгів згори й знизу давали 180px висоти,
     через що вона "тиснула" на контент під нею */
  .main-nav-bottom { padding-top: 12px; padding-bottom: 12px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .main-nav-operator { padding-left: 20px; }
}

/* ==========================================================================
   Правки 27.08 п.10 — чекліст замовлення у формі заявки.
   Замість селекта «Тариф / послуга / акція» (його можна було перемкнути на
   будь-що і він нічого не пояснював) — статичний перелік за карткою, з якої
   натиснули «Замовити». Той самий текст їде в лист полем order-details.
   ========================================================================== */
.jn-order-sum {
  display: none;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid #ffd9d5;
  border-radius: 14px;
  background: #fff7f6;
}
.jn-os-title {
  font-family: "HelveticaNeueCyr-Bold", sans-serif;
  font-size: 15px; color: #ef1a00; margin-bottom: 8px;
}
.jn-os-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  font-size: 14px; line-height: 1.35; padding: 4px 0;
}
.jn-os-row + .jn-os-row { border-top: 1px dashed #f4dedc; }
.jn-os-row span { color: #6f6c71; flex: 0 1 auto; }
.jn-os-row b { color: #29262b; text-align: right; flex: 1 1 auto; }
@media (max-width: 575.98px) {
  .jn-order-sum { padding: 12px; margin-bottom: 14px; }
  .jn-os-row { flex-direction: column; gap: 0; padding: 5px 0; }
  .jn-os-row b { text-align: left; }
}


/* Правки 01.09 п.2 — індикатор переходу після вибору населеного пункту */
#jn-loading {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .82);
}
#jn-loading .jn-loading-box {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 26px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .15);
  font-size: 16px;
  color: #1a1a1a;
}
#jn-loading .jn-loading-spin {
  width: 26px;
  height: 26px;
  border: 3px solid #eceaec;
  border-top-color: #e31e24;
  border-radius: 50%;
  animation: jn-loading-spin .8s linear infinite;
}
@keyframes jn-loading-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Правки 02.09 п.19 — промо-пакет Sweet.TV «Вільний» (0 грн/міс)
   Він не продається, тож і не картка в сітці платних: окрема
   зелена смуга над сіткою — «це у вас уже є».
   ============================================================ */
.sttv-free {
  display: flex; align-items: center; justify-content: space-between; gap: 18px 24px;
  flex-wrap: wrap; margin: 0 0 20px;
  padding: 18px 24px; border: 1px solid #bfe3c8; border-radius: 16px;
  background: linear-gradient(90deg, #f2fbf4 0%, #fff 70%);
}
.sttv-free-name { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: #1f1f1f; }
.sttv-free-name span { font-weight: 600; font-size: 14px; color: #8a8a8a; }
.sttv-free-price { margin-top: 4px; font-size: 15px; font-weight: 800; color: #2e9e4b; }
.sttv-free-price em { font-style: normal; font-weight: 600; font-size: 13px; color: #6a6a6a; }
.sttv-free-side { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sttv-free-count {
  padding: 6px 14px; border-radius: 40px; background: #2e9e4b; color: #fff;
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.sttv-free .sttv-channels-link { margin: 0; }

@media (max-width: 575.98px) {
  .sttv-free { padding: 16px 18px; }
  .sttv-free-name { font-size: 16px; }
  .sttv-free-side { width: 100%; justify-content: space-between; }
}

/* Колонка «Вільний» у таблиці порівняння каналів */
.sttv-cmp-pkg-price.is-free { color: #2e9e4b; }

/* Той самий пакет у картці інтернет-тарифу */
.jn-tv-free {
  margin: -4px 0 10px; padding: 7px 11px; border-radius: 9px;
  background: #f2fbf4; border: 1px solid #cfe9d6;
  font-size: 12px; line-height: 1.45; color: #3b3b3b;
}
.jn-tv-free b { color: #2e9e4b; }
.jn-tv-chip--free .jn-tv-chip-add { color: #2e9e4b; }
.jn-tv-chip--free.is-selected { border-color: #2e9e4b; box-shadow: 0 0 0 1px #2e9e4b inset; }
.jn-tv-chip--free:hover { border-color: #2e9e4b; }
.jn-pop-free b { color: #2e9e4b; }

/* Рядок про безкоштовний пакет на самій плитці тарифу (видно без тумблера) */
.jn-tile-free {
  margin-top: 10px; padding: 9px 11px; border-radius: 9px;
  background: #f2fbf4; border: 1px solid #cfe9d6;
  font-size: 12px; line-height: 1.4; color: #3b3b3b;
}
.jn-tile-free-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.jn-tile-free b { color: #2e9e4b; }
.jn-tile-free-badge {
  padding: 3px 9px; border-radius: 40px; background: #2e9e4b; color: #fff;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  white-space: nowrap;
}
.jn-tile-free-note { margin-top: 4px; color: #7a7a7a; font-size: 11px; }

/* ==================== Правки 23.09 п.21 — ТБ: «Вільний» + партнери YouTV.ua і Sweet.TV ==================== */
.sttv-free--main { padding: 22px 26px; margin-bottom: 22px; }
.sttv-free--main .sttv-free-name { font-size: 22px; }
.sttv-free--main .sttv-free-name span { font-size: 15px; }
.sttv-free--main .sttv-free-price { font-size: 17px; }
.sttv-free--main .sttv-free-count { font-size: 15px; padding: 8px 18px; }

.tvp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.tvp-card {
  display: flex; flex-direction: column; gap: 18px;
  padding: 26px 26px 24px; background: #fff; border: 1px solid #ececec; border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0,0,0,.06); transition: border-color .25s ease;
}
.tvp-card:hover { border-color: #ef1a00; }
.tvp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.tvp-logo { height: 34px; width: auto; max-width: 170px; object-fit: contain; }
.tvp-name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.tvp-badge {
  padding: 5px 12px; border-radius: 40px; background: #f4f4f4; color: #6b6b6b;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.tvp-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tvp-feats li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.45; color: #444; }
.tvp-feats li b { color: #1f1f1f; }
.tvp-feats li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px;
  background: no-repeat center/contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef1a00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.tvp-link {
  margin-top: auto; align-self: flex-start;
  color: #ef1a00; font-size: 14px; font-weight: 600; text-decoration: underline;
}
.tvp-link:hover { text-decoration: none; color: #ef1a00; }
@media (max-width: 767px) {
  .tvp-grid { grid-template-columns: 1fr; gap: 14px; }
  .tvp-card { padding: 20px 18px; gap: 14px; }
  .sttv-free--main { padding: 16px 18px; }
  .sttv-free--main .sttv-free-name { font-size: 18px; }
}
@media (max-width: 400px) {
  .tvp-card-head { flex-wrap: wrap; }
}

/* кнопка «Список каналів» у рядку «Вільний» плитки тарифу */
.jn-tile-free-ch {
  display: block; margin-top: 3px; padding: 0; border: 0; background: none; color: #2e9e4b; font: inherit; font-weight: 700;
  text-decoration: underline; cursor: pointer;
}
.jn-tile-free-ch:hover { text-decoration: none; }

/* Правки 23.09 п.7.1 — партнерів 13: сітка 6×N лишала одне лого в останньому ряду.
   Флекс із центруванням: 7 + 6 на десктопі, неповний ряд — по центру. */
.jn-partners-row { display: flex; flex-wrap: wrap; justify-content: center; }
.jn-partners-row > .jn-partner { flex: 0 0 calc((100% - 6 * 16px) / 7); min-width: 0; }
@media (max-width: 1100px) { .jn-partners-row > .jn-partner { flex-basis: calc((100% - 4 * 16px) / 5); } }
@media (max-width: 767px)  { .jn-partners-row > .jn-partner { flex-basis: calc((100% - 3 * 10px) / 4); } }
@media (max-width: 480px)  { .jn-partners-row > .jn-partner { flex-basis: calc((100% - 10px) / 2); } }

/* Зелений рядок «Вільний» у плитці: загальне `.plan-cards.jn-tile .plan-details > div { padding: 0 }`
   сильніше за `.jn-tile-free` — вміст лип до рамки */
.plan-cards.jn-tile .plan-details > .jn-tile-free { padding: 9px 12px 10px; }
.jn-tile-free .jn-tile-free-badge { padding: 3px 9px; }

/* ==================== Правки 23.09 п.21 — вкладки операторів ТБ ==================== */
.tvo-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 18px; }
.tvo-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 170px; height: 58px; padding: 10px 24px;
  background: #fff; border: 1px solid #e3e3e3; border-radius: 14px; cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.tvo-tab:hover { border-color: #ef1a00; }
.tvo-tab.is-active { border-color: #ef1a00; box-shadow: 0 6px 24px rgba(239,26,0,.14); }
.tvo-tab-logo { height: 28px; width: auto; max-width: 150px; object-fit: contain; display: block; }
.tvo-tab-name { font-size: 18px; font-weight: 800; color: #1f1f1f; }
.tvo-panel[hidden] { display: none !important; }
.tvo-panel-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; margin-bottom: 18px; }
.tvo-panel-bar .sttv-channels-link { margin: 0; }
/* п'ять пакетів YouTV: сітка на 4 колонки лишала один пакет у другому ряду */
@media (min-width: 1200px) {
  #tvo-panel-youtv .sttv-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  #tvo-panel-youtv .sttv-card { padding: 24px 18px; }
  #tvo-panel-youtv .sttv-price-num { font-size: 34px; }
}
@media (max-width: 560px) {
  .tvo-tabs { gap: 8px; }
  .tvo-tab { flex: 1 1 0; min-width: 0; height: 52px; padding: 8px 12px; }
  .tvo-tab-logo { height: 24px; max-width: 100%; }
}

/* підзаголовок оператора в опції «Додати ТБ» плитки тарифу */
.jn-tv-op {
  grid-column: 1 / -1; width: 100%; margin: 6px 0 -2px;
  font-size: 11px; font-weight: 700; color: #8a8a8a; text-transform: uppercase; letter-spacing: .04em;
}

/* лендінг YouTV.ua у модалці */
.tvo-landing-popup { width: min(1100px, 94vw); max-width: none; padding: 0 !important; border-radius: 16px; overflow: hidden; }
.tvo-landing-frame { display: block; width: 100%; height: min(82vh, 900px); border: 0; }

/* перелік пакетів YouTV.ua — 6 колонок: модалка ширша, щоб таблиця не скролилась на ПК */
.sttv-channels-popup.is-wide { max-width: min(1040px, calc(100vw - 24px)); }
.sttv-channels-popup.is-wide .sttv-cmp-pkg { width: auto; min-width: 88px; }
/* 561–640px: дві колонки карток пакетів не влазили (мін. ширина вмісту) */
.sttv-card { min-width: 0; }
@media (max-width: 640px) { .sttv-grid { grid-template-columns: 1fr; } }

/* Правки 23.09 п.30 — кнопка швидкого скролу вгору. Знизу праворуч стоїть бейдж reCAPTCHA
   (60px заввишки, відступ 14px), тому кнопка над ним. */
.jn-to-top {
  position: fixed; right: 24px; bottom: 96px; z-index: 990;
  width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: #ef1a00; color: #fff; cursor: pointer;
  box-shadow: 0 8px 24px rgba(239,26,0,.32);
  transition: background .2s ease, transform .2s ease;
}
.jn-to-top[hidden] { display: none; }
.jn-to-top:hover { background: #d11700; transform: translateY(-2px); }
.jn-to-top:focus-visible { outline: 3px solid rgba(239,26,0,.35); outline-offset: 3px; }
@media (max-width: 767px) { .jn-to-top { right: 14px; bottom: 88px; width: 46px; height: 46px; } }

/* Правки 24.09 — знижка −50% червоним (ТБ, докупка місяців) і рамки пакетів операторів у «Додати ТБ» */
.jn-accent { color: #ef1a00; font-style: normal; font-weight: 800; }
.jn-tv-opbox { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 10px; border: 1px solid #e2e2e2; border-radius: 14px; }
.jn-tv-opbox .jn-tv-op { margin: 0 0 2px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jn-tv-op-disc { font-style: normal; color: #fff; background: #ef1a00; border-radius: 20px; padding: 2px 8px; letter-spacing: 0; }

/* ==================== п.37 (24.09) — MEGOGO замість YouTV.ua ==================== */
@media (min-width: 1200px) {
  #tvo-panel-megogo .sttv-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  #tvo-panel-megogo .sttv-card { padding: 24px 18px; }
  #tvo-panel-megogo .sttv-price-num { font-size: 34px; }
}
/* ціна за 12 міс. з копійками (+1942,20) — довша, одиниця під числом */
.sttv-price-new { flex-wrap: wrap; }
.sttv-price-num { white-space: nowrap; }

/* кнопка «i» з умовою знижки */
.tvo-info { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
.tvo-info-btn {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid #ef1a00; background: #fff; color: #ef1a00;
  font: italic 700 12px/18px Georgia, "Times New Roman", serif; text-align: center; padding: 0; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.tvo-info-btn:hover, .tvo-info.is-open .tvo-info-btn, .tvo-info-btn:focus-visible { background: #ef1a00; color: #fff; outline: none; }
.tvo-info-tip {
  position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
  width: 220px; padding: 10px 12px; border-radius: 10px; background: #1f1f1f; color: #fff;
  font-size: 13px; font-weight: 500; line-height: 1.35; text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, visibility .15s ease;
}
.tvo-info-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px;
  border: 6px solid transparent; border-top-color: #1f1f1f;
}
.tvo-info.is-open .tvo-info-tip { opacity: 1; visibility: visible; }
@media (hover: hover) {
  .tvo-info:hover .tvo-info-tip { opacity: 1; visibility: visible; }
}

/* посилання картки: «Список каналів» · «Про пакет» */
.tvo-card-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.tvo-card-links .sttv-channels-link { margin-left: 0; margin-right: 0; }

/* модалка «Про пакет» */
.tvo-about-popup { width: min(640px, 94vw); max-width: none; }
.tvo-about-price .sttv-card-price { margin: 4px 0 14px; }
.tvo-about-note { display: inline-block; margin-left: 8px; font-size: 13px; color: #8a8a8a; }
.tvo-about-body { font-size: 15px; line-height: 1.5; color: #333; }
.tvo-about-body p { margin: 0 0 10px; }
.tvo-about-body ul { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.tvo-about-body li { position: relative; padding-left: 24px; }
.tvo-about-body li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 15px; height: 15px; background: no-repeat center/contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef1a00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.tvo-about-connect { display: block; width: 100%; margin-top: 8px; text-align: center; border-radius: 40px; padding: 13px 19px; }

/* перелік MEGOGO: 8 колонок і опис каналу по кліку */
.sttv-channels-popup.is-xwide { max-width: min(1240px, calc(100vw - 24px)); }
.sttv-channels-popup.is-xwide .sttv-cmp-pkg { min-width: 84px; }
.sttv-cmp-ch-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sttv-cmp-ch-name {
  padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  text-decoration: underline dotted #b3b3b3; text-underline-offset: 3px;
}
.sttv-cmp-ch-name:hover, .sttv-cmp-ch-name[aria-expanded="true"] { color: #ef1a00; text-decoration-color: #ef1a00; }
.sttv-cmp-ch-desc { font-size: 12px; line-height: 1.4; color: #6f6f6f; font-weight: 400; max-width: 420px; }
.sttv-cmp-ch-desc[hidden] { display: none; }

/* умова знижки MEGOGO в опції «Додати ТБ» плитки тарифу */
.jn-tv-op-note { font-size: 11px; line-height: 1.3; color: #8a8a8a; margin: -2px 0 2px; }

/* ==================== п.37.1 (25.09) — «Інтернет + Телебачення» ==================== */
.tvb-offer {
  margin: 0 0 22px; padding: 28px 30px; background: #fff;
  border: 1px solid #ececec; border-radius: 20px; box-shadow: 0 4px 30px rgba(0,0,0,.06);
}
.tvb-offer-head { margin-bottom: 22px; max-width: 760px; }
.tvb-kicker { color: #ef1a00; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tvb-offer-title {
  margin: 4px 0 0; font-family: "HelveticaNeueCyr-Black", "Montserrat", sans-serif;
  font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em; line-height: 1.1; color: #1f1f1f;
}
.tvb-offer-text { margin: 8px 0 0; color: #6b6b6b; font-size: 15px; line-height: 1.5; }

.tvb-duo-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.tvb-steps { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.tvb-step-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 17px; font-weight: 800; color: #1f1f1f; }
.tvb-step-title span {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%; background: #ef1a00; color: #fff; font-size: 13px;
}
.tvb-types { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 12px; background: #f4f4f4; border-radius: 40px; }
.tvb-type {
  padding: 9px 20px; border: 0; border-radius: 40px; background: transparent;
  color: #333; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .2s ease, color .2s ease;
}
.tvb-type.is-active { background: #ef1a00; color: #fff; }
.tvb-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tvb-tariffs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tvb-opts[hidden], .tvb-op-panel[hidden] { display: none !important; }
.tvb-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 0; min-height: 52px; padding: 9px 14px;
  background: #fff; border: 1px solid #ddd; border-radius: 12px; cursor: pointer; text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.tvb-opt:hover { border-color: #ef1a00; }
.tvb-opt.is-selected { border-color: #ef1a00; box-shadow: 0 0 0 1px #ef1a00 inset; }
.tvb-opt-name { font-size: 14px; font-weight: 700; color: #333; }
.tvb-opt-sub { font-size: 12px; color: #9a9a9a; }
.tvb-ops { margin: 0 0 12px; }
.tvb-ops .tvo-tab { min-width: 150px; height: 50px; padding: 8px 20px; }
.tvb-ops .tvo-tab-logo { height: 24px; }
.tvb-cmp { margin: 12px 0 0; }

.tvb-sum {
  position: sticky; top: 170px; padding: 24px; border-radius: 16px;
  background: #fff7f5; border: 1px solid #ffd9d2;
}
.tvb-sum-label { font-size: 13px; font-weight: 700; color: #8a8a8a; text-transform: uppercase; letter-spacing: .03em; }
.tvb-sum-line { margin-top: 8px; font-size: 15px; font-weight: 700; color: #1f1f1f; line-height: 1.35; }
.tvb-sum-line + .tvb-sum-line { margin-top: 4px; }
.tvb-sum-price { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; }
.tvb-sum-num { font-family: "HelveticaNeueCyr-Black", sans-serif; color: #ef1a00; font-size: 48px; line-height: 1; font-weight: 900; }
.tvb-sum-unit { color: #333; font-size: 15px; font-weight: 700; }
.tvb-sum-note { margin: 4px 0 18px; color: #6b6b6b; font-size: 13px; }
.tvb-connect[disabled] { opacity: .5; cursor: default; }

.tvb-voyage { background: linear-gradient(90deg, #fff3f1 0%, #fff 75%); border-color: #ffd9d2; }
.tvb-voyage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.tvb-voyage-card {
  display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 20px;
  background: #fff; border: 1px solid #ececec; border-radius: 16px;
}
.tvb-voyage-logo { display: block; height: 20px; width: auto; max-width: 120px; object-fit: contain; margin-bottom: 10px; }
.tvb-voyage-desc { margin-top: 4px; color: #8a8a8a; font-size: 13px; }
.tvb-voyage-price { display: flex; align-items: baseline; gap: 8px; }
.tvb-voyage-actions { margin-top: auto; }
.tvb-voyage-actions .sttv-channels-link { margin: 0 0 12px; }

@media (max-width: 991px) {
  .tvb-duo-body { grid-template-columns: 1fr; }
  .tvb-sum { position: static; }
}
@media (max-width: 575.98px) {
  .tvb-offer { padding: 20px 16px; border-radius: 16px; }
  .tvb-opts, .tvb-tariffs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tvb-types { display: flex; }
  .tvb-type { flex: 1 1 0; padding: 9px 10px; }
  .tvb-ops .tvo-tab { flex: 1 1 0; min-width: 0; }
  .tvb-sum { padding: 20px 16px; }
  .tvb-sum-num { font-size: 40px; }
}

/* Правки 30.09 п.37.3 — «Порівняти пакети <оператор>» у рамці кожного оператора */
.jn-tv-opbox .jn-tv-opcmp { margin: 2px 0 0; align-self: flex-start; text-align: left; }
.jn-pop-cmps { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.jn-pop-cmps .jn-pop-ch { margin: 6px 0 0; }

/* Правки 08.10 п.41 — вибір оптичного терміналу в заявці на тариф */
.jn-term { margin: -4px 0 18px; }
/* як .input-label полів форми нижче */
.jn-term-title {
  font-family: Montserrat, sans-serif; font-size: 16px; font-weight: 600;
  color: #4b484d; margin-bottom: 10px;
}
.jn-term-title span { font-weight: 400; color: #6f6f6f; }
/* п.41.3 — варіант = назва + умова дрібніше, тож рядки на всю ширину */
.jn-term-opts { display: flex; flex-direction: column; gap: 8px; }
.jn-term-opt { position: relative; margin: 0; cursor: pointer; }
.jn-term-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.jn-term-opt > span {
  display: grid; grid-template-columns: 14px 1fr; column-gap: 10px; align-items: start;
  background: #fff; border: 1px solid #e2e2e2; border-radius: 12px; padding: 10px 16px;
  font-size: 14px; line-height: 1.35; color: #333; transition: .2s;
}
.jn-term-opt > span::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; margin-top: 2px; box-sizing: border-box;
  border: 1px solid #c9c6cb; background: #fff; transition: .2s; grid-row: 1 / span 2;
}
.jn-term-name { font-weight: 700; }
.jn-term-note { grid-column: 2; font-size: 12px; font-weight: 400; color: #6f6f6f; margin-top: 2px; }
.jn-pop-term { margin-top: 14px; }
.jn-pop-term ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: #333; }
.jn-pop-term li + li { margin-top: 4px; }
.jn-pop-term .jn-term-note { display: block; font-size: 13px; }
.jn-term-opt:hover > span { border-color: #ef1a00; }
.jn-term-opt input:checked + span { border-color: #ef1a00; box-shadow: 0 0 0 1px #ef1a00 inset; }
.jn-term-opt input:checked + span .jn-term-name { color: #ef1a00; }
.jn-term-opt input:checked + span::before { border: 4px solid #ef1a00; }
.jn-term-opt input:focus-visible + span { outline: 2px solid #ef1a00; outline-offset: 2px; }
@media (max-width: 575.98px) {
  .jn-term { margin: -2px 0 14px; }
}