.elementor-kit-7{--e-global-color-primary:#2845D6;--e-global-color-secondary:#62748E;--e-global-color-text:#314158;--e-global-color-accent:#F68048;--e-global-typography-primary-font-family:"OsnovaPro";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"OsnovaPro";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"OsnovaPro";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"OsnovaPro";--e-global-typography-accent-font-weight:600;color:#45556C;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a:hover{color:#1300E0;}.elementor-kit-7 h1{color:#0D1A63;font-family:"OsnovaPro", Sans-serif;font-size:60px;font-weight:700;}.elementor-kit-7 h2{color:#0D1A63;font-family:"OsnovaPro", Sans-serif;font-size:40px;font-weight:700;}.elementor-kit-7 h3{color:#0D1A63;font-size:20px;font-weight:700;}.elementor-kit-7 h4{color:#0D1A63;font-size:18px;}.elementor-kit-7 h5{color:#0D1A63;}.elementor-kit-7 h6{color:#0D1A63;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{color:#FFFFFF;}.elementor-kit-7 button:hover,.elementor-kit-7 button:focus,.elementor-kit-7 input[type="button"]:hover,.elementor-kit-7 input[type="button"]:focus,.elementor-kit-7 input[type="submit"]:hover,.elementor-kit-7 input[type="submit"]:focus,.elementor-kit-7 .elementor-button:hover,.elementor-kit-7 .elementor-button:focus{color:#FFFFFF;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1280px){.elementor-kit-7 h1{font-size:54px;}.elementor-kit-7 h2{font-size:36px;}.elementor-kit-7 h3{font-size:18px;}.elementor-kit-7 h4{font-size:16px;}}@media(max-width:1024px){.elementor-kit-7 h1{font-size:48px;}.elementor-kit-7 h2{font-size:32px;}.elementor-kit-7 h3{font-size:18px;}.elementor-kit-7 h4{font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7 h1{font-size:36px;}.elementor-kit-7 h2{font-size:26px;}.elementor-kit-7 h3{font-size:16px;}.elementor-kit-7 h4{font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */html {
  scroll-behavior: smooth;
}

/* =============================================================
   SKM — Типографіка: кастомний CSS
   WordPress керує: H1–H6, font-family, font-size body
   Цей файл: токени + utility-класи для Additional CSS class
   ============================================================= */

/* ── Токени — Desktop > 1280px ──────────────────────────── */
:root {
  --fs-display: 48px;
  --fs-price:   30px;
  --fs-lg:      18px;
  --fs-ui:      16px;
  --fs-sm:      14px;
  --fs-label:   12px;
}

/* ── Ноутбук ≤ 1280px ───────────────────────────────────── */
@media (max-width: 1280px) {
  :root {
    --fs-display: 44px;
    --fs-price:   28px;
    --fs-lg:      17px;
    --fs-ui:      15px;
    --fs-sm:      13px;
  }
}

/* ── Планшет ≤ 1024px ───────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --fs-display: 40px;
    --fs-price:   26px;
    --fs-lg:      16px;
  }
}

/* ── Телефон ≤ 767px ────────────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --fs-display: 36px;
    --fs-price:   22px;
    --fs-lg:      15px;
    --fs-ui:      14px;
    --fs-sm:      12px;
  }
}

/* ── Utility-класи (Additional CSS class у WP) ──────────── */
.skm-display {
  font-size: var(--fs-display);
  font-weight: 700;
}
.skm-price {
  font-size: var(--fs-price);
  font-weight: 700;
}
.skm-lg {
  font-size: var(--fs-lg);
  font-weight: 400;
}
.skm-ui {
  font-size: var(--fs-ui);
  font-weight: 500;
}
.skm-sm {
  font-size: var(--fs-sm);
  font-weight: 500;
}
.skm-label {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Картка з hover еффектом*/

.clickable-card {
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.clickable-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.clickable-card:active {
  transform: translateY(-2px);
}


/* ============================
   Карта
   ============================ */
.elementor-kit-7 .map-wrapper {
  width: 100%;
  max-width: 100%;
  border-radius: 0px;
  overflow: hidden;
  line-height: 0;
}

/* ============================
   Стилізація новин
   ============================ */

.news-card .elementor-post__card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
  padding-top: 0 !important;
}

.news-card .elementor-post__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.news-card .elementor-post__thumbnail__link {
  order: 1;
}

.news-card .elementor-post__meta-data {
  order: 2;
  padding: 20px 24px 0;
}

.news-card .elementor-post__text {
  order: 3;
  padding: 8px 24px 24px;
}

.news-card .elementor-post__read-more-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: auto;
  margin-top: auto;
}

.news-card .elementor-post__read-more::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  background: url("/wp-content/uploads/2026/04/icon-next.svg") no-repeat center / contain;
  vertical-align: middle;
}


/* ============================
   CKM Tariffs Tabs — Tab Titles
   ============================ */

/* Контейнер кнопок табів: пілюля з фоном — ВСІ БРЕЙКПОІНТИ */
.ckm-tariffs-tabs .e-n-tabs-heading,
.ckm-tariffs-tabs.e-n-tabs-mobile .e-n-tabs-heading,
.ckm-tariffs-tabs .e-n-tabs.e-activated .e-n-tabs-heading {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  background: #f1f5f9 !important;
  border-radius: 14px !important;
  padding: 8px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  border: none !important;
  order: unset !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ckm-tariffs-tabs .e-n-tabs-heading::-webkit-scrollbar {
  display: none;
}

/* Кнопка таба — базові стилі (неактивна) */
.ckm-tariffs-tabs .e-n-tab-title,
.ckm-tariffs-tabs .e-n-tab-title.e-normal,
.ckm-tariffs-tabs .e-n-tabs-heading > .e-n-tab-title {
  font-family: 'OsnovaPro', 'Osnova Pro', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: normal !important;
  color: #45556c !important;
  background: transparent !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 32px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap !important;
  box-shadow: none !important;
  outline: none !important;
  flex-shrink: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Кнопка таба — ховер */
.ckm-tariffs-tabs .e-n-tab-title:hover {
  color: #0d1a63 !important;
  background: transparent !important;
}

/* Кнопка таба — активна */
.ckm-tariffs-tabs .e-n-tab-title.e-active,
.ckm-tariffs-tabs .e-n-tab-title[aria-selected="true"],
.ckm-tariffs-tabs .e-n-tab-title.e-active.e-normal,
.ckm-tariffs-tabs .e-n-tab-title[aria-selected="true"].e-normal {
  background: #ffffff !important;
  color: #0d1a63 !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow:
    0 0 0 0 #e2e8f0,
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Прибираємо дефолтний індикатор Elementor */
.ckm-tariffs-tabs .e-n-tab-title::after,
.ckm-tariffs-tabs .e-n-tab-title::before,
.ckm-tariffs-tabs .e-n-tab-title .e-n-tab-title-text::after,
.ckm-tariffs-tabs .e-n-tab-title .e-n-tab-title-text::before {
  display: none !important;
  content: none !important;
}

.ckm-tariffs-tabs .e-n-tabs-heading::before,
.ckm-tariffs-tabs .e-n-tabs-heading::after {
  display: none !important;
  content: none !important;
}

.ckm-tariffs-tabs .e-n-tab-title .e-n-tab-title-text {
  color: inherit !important;
  font-family: inherit !important;
}

/* ============================
   Структура віджету
   ============================ */

.ckm-tariffs-tabs .e-n-tabs,
.ckm-tariffs-tabs.elementor-widget > .elementor-widget-container > .e-n-tabs {
  display: flex !important;
  flex-direction: column !important;
}

/* Ховаємо неактивний контент */
.ckm-tariffs-tabs .e-n-tabs-content > .e-con:not(.e-active) {
  display: none !important;
}

/* Активний контент — flex */
.ckm-tariffs-tabs .e-n-tabs-content > .e-con.e-active {
  display: flex !important;
}

/* Elementor аккордеон: ховаємо дубльовані кнопки */
.ckm-tariffs-tabs .e-n-tabs-content > .e-n-tab-title,
.ckm-tariffs-tabs .e-n-tabs-content > button.e-n-tab-title {
  display: none !important;
}

/* Контент вкладок */
.ckm-tariffs-tabs .e-n-tabs-content {
  width: 100% !important;
  max-width: 100% !important;
}

/* ============================
   Ряд карточок — ДЕСКТОП (>1024px)
   ============================ */

.ckm-tariffs-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  column-gap: 32px !important;
  row-gap: 0 !important;
  padding-top: 24px !important;
  justify-content: center !important;
}

/* Карточки на десктопі — фіксована ширина 405px */
.ckm-tariffs-row > .e-con {
  flex: 0 0 405px !important;
  width: 405px !important;
  max-width: 405px !important;
  min-width: 0 !important;
}

/* Прибрати нижній margin у всіх карток тарифів */
.ckm-tariffs-tabs .clickable-card,
.ckm-tariffs-row > .e-con.clickable-card,
.ckm-tariffs-row > .clickable-card {
  margin-bottom: 0 !important;
}

/* ============================
   ПЛАНШЕТ + ТЕЛЕФОН (до 1024px): горизонтальний скрол
   Підхід: панель вкладки = скрол-контейнер
   ============================ */

@media (max-width: 1024px) {
  /* ПАНЕЛЬ ВКЛАДКИ — звичайний блок, без власного скролу */
  .ckm-tariffs-tabs .e-n-tabs-content > .e-con.e-active {
    overflow: visible !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    max-width: 100% !important;
  }

  /* Ряд карточок — сам є скрол-контейнером.
     Дублюємо селектор з .e-n-tabs-content, щоб перебити specificity від Elementor. */
  .ckm-tariffs-row,
  .ckm-tariffs-tabs .e-n-tabs-content .ckm-tariffs-row,
  .ckm-tariffs-tabs .e-n-tabs-content > .e-con.e-active .ckm-tariffs-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    column-gap: 24px !important;
    row-gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: clip !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    /* Висота — строго по контенту, скидаємо flex-basis і --min-height від Elementor */
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    --min-height: 0 !important;
    padding: 24px 16px 16px !important;
    justify-content: flex-start !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain;
  }

  /* Картки — не блокуємо touch на свайпі: дозволяємо обидва напрямки */
  .ckm-tariffs-tabs .clickable-card,
  .ckm-tariffs-row > .clickable-card,
  .ckm-tariffs-row > .e-con.clickable-card {
    touch-action: pan-x pan-y !important;
  }

  /* Активна панель — жорстко обмежуємо шириною вьюпорту, щоб cards дійсно оверфлоїли ряд.
     Висота — автоматична, скидаємо всі обмеження від Elementor (--min-height, flex-basis).
     Gap — 0, щоб між рядом і скрол-індикатором не було зайвого відступу. */
  .ckm-tariffs-tabs .e-n-tabs-content > .e-con.e-active {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    flex-basis: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    --min-height: 0 !important;
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
  }
  .ckm-tariffs-tabs .e-n-tabs-content > .e-con.e-active > .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .ckm-tariffs-row::-webkit-scrollbar {
    display: none;
  }

  /* Картки — фіксовані 405px на планшеті */
  .ckm-tariffs-row > .e-con {
    flex: 0 0 405px !important;
    width: 405px !important;
    max-width: 405px !important;
    min-width: 0 !important;
    scroll-snap-align: start;
  }

  /* Wrapper (.e-con-boxed) з текстом "Безлімітний трафік..." — прямий син панелі.
     Elementor на ≤1024 має правило ".elementor-element-<panel-id> > .e-con" із
     width: 300px !important, що призначалось для карток (коли вони ще були прямі
     діти панелі). Зараз картки всередині .ckm-tariffs-row, тож 300px-ліміт
     помилково зачіпає наш wrapper. Перебиваємо більш специфічним селектором.
     Має бути в 1024-медіа-запиті (а не 767), бо Elementor-артефакт живе на ≤1024. */
  .ckm-tariffs-tabs .e-n-tabs-content > .e-con.e-active > .e-con-boxed,
  .ckm-tariffs-tabs .e-n-tabs-content > .e-con.e-active > .e-con-boxed.e-con {
    flex: 0 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    --width: 100% !important;
  }
}

/* ============================
   ТЕЛЕФОН (до 767px)
   ============================ */

@media (max-width: 767px) {
  .ckm-tariffs-tabs .e-n-tab-title,
  .ckm-tariffs-tabs .e-n-tab-title.e-normal,
  .ckm-tariffs-tabs .e-n-tabs-heading > .e-n-tab-title {
    font-size: 14px !important;
    padding: 12px 16px !important;
  }

  /* Зовнішня обгортка — horizontal scroll viewport для pill-заголовка.
     Негативний margin-right перебиває 16px падінг батьківського контейнера,
     щоб pill і ряд карточок простягались до самого правого краю екрана. */
  .ckm-tariffs-tabs .ckm-tabs-heading-scroll {
    width: auto;
    max-width: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-left: 16px;
    padding-right: 0;
    margin: 0 -16px 0 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }

  /* Ряд карточок — той же трюк: margin-right: -16px щоб виходив за правий край батька */
  .ckm-tariffs-tabs .e-n-tabs-content > .e-con.e-active .ckm-tariffs-row {
    margin-right: -16px !important;
  }

  .ckm-tariffs-tabs .ckm-tabs-heading-scroll::-webkit-scrollbar {
    display: none;
  }

  /* Pill — рівно по контенту, не обмежений вьюпортом, без власного скролу.
     Повторюємо compound-селектори базового правила, щоб перебити його specificity. */
  .ckm-tariffs-tabs .e-n-tabs-heading,
  .ckm-tariffs-tabs.e-n-tabs-mobile .e-n-tabs-heading,
  .ckm-tariffs-tabs .e-n-tabs.e-activated .e-n-tabs-heading {
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  /* Таби — натуральна ширина, без stretch */
  .ckm-tariffs-tabs .e-n-tab-title,
  .ckm-tariffs-tabs .e-n-tabs-heading > .e-n-tab-title {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    text-align: center !important;
  }

  .ckm-tariffs-row {
    column-gap: 24px !important;
  }

  /* Картки — фіксовані 328px на телефоні */
  .ckm-tariffs-row > .e-con {
    flex: 0 0 328px !important;
    width: 328px !important;
    max-width: 328px !important;
    min-width: 0 !important;
  }
}

/* ============================
   Скрол-індикатор під рядом карточок
   ============================ */
.ckm-scroll-indicator {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 8px;
}

.ckm-scroll-indicator__dot {
  width: 24px;
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.25s ease, background-color 0.25s ease;
  flex-shrink: 0;
}

.ckm-scroll-indicator__dot.is-active {
  width: 48px;
  background: #0d1a63;
}

@media (max-width: 1024px) {
  .ckm-scroll-indicator {
    display: flex;
  }
}


/* ============================
   logo-gray
   ============================ */
   
/* Только для блока способов оплаты */
.payment-cards .clickable-card .card-icon svg,
.payment-cards .clickable-card .card-icon img {
  filter: grayscale(100%);
  opacity: 0.65;
  transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

/* При hover на карточку */
.payment-cards .clickable-card:hover .card-icon svg,
.payment-cards .clickable-card:hover .card-icon img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

.logo-gray img {
  filter: grayscale(100%);
  opacity: 0.6;
  transform: scale(1);
  transition: all 0.3s ease;
}

.logo-gray img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}


/* ============================
   card-icon-animation
   ============================ */
   
/* Контейнер */
.feature-card {
  transition: box-shadow 0.25s ease;
  border-radius: 16px; /* если нет */
}

/* Тень при hover (без движения) */
.feature-card:hover {
  box-shadow: 0 4px 8px rgba(13, 26, 99, 0.05);
}

/* Иконка */
.feature-icon {
  transition: transform 0.35s ease;
}

/* Микроанимация при hover */
.feature-card:hover .feature-icon {
  transform: scale(1.08);
}

/* Доп. subtle animation (очень лёгкое "дыхание") */
.feature-card:hover .feature-icon svg {
  animation: icon-breathe 1.6s ease-in-out infinite;
}

/* Keyframes */
@keyframes icon-breathe {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'OsnovaPro';
	font-style: normal;
	font-weight: 100;
	font-display: auto;
	src: url('https://new.skm.com.ua/wp-content/uploads/2026/04/osnovaprothin.woff2') format('woff2'),
		url('https://new.skm.com.ua/wp-content/uploads/2026/04/osnovaprothin.woff') format('woff');
}
@font-face {
	font-family: 'OsnovaPro';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://new.skm.com.ua/wp-content/uploads/2026/04/osnovaprolight.woff2') format('woff2'),
		url('https://new.skm.com.ua/wp-content/uploads/2026/04/osnovaprolight.woff') format('woff');
}
@font-face {
	font-family: 'OsnovaPro';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://new.skm.com.ua/wp-content/uploads/2026/04/osnovapro.woff2') format('woff2'),
		url('https://new.skm.com.ua/wp-content/uploads/2026/04/osnovapro.woff') format('woff');
}
@font-face {
	font-family: 'OsnovaPro';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://new.skm.com.ua/wp-content/uploads/2026/04/osnovapromedium.woff2') format('woff2'),
		url('https://new.skm.com.ua/wp-content/uploads/2026/04/osnovapromedium.woff') format('woff');
}
@font-face {
	font-family: 'OsnovaPro';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://new.skm.com.ua/wp-content/uploads/2026/04/osnovapro-bold.woff2') format('woff2'),
		url('https://new.skm.com.ua/wp-content/uploads/2026/04/osnovapro-bold.woff') format('woff');
}
@font-face {
	font-family: 'OsnovaPro';
	font-style: normal;
	font-weight: 900;
	font-display: auto;
	src: url('https://new.skm.com.ua/wp-content/uploads/2026/04/osnovaproheavy.woff2') format('woff2'),
		url('https://new.skm.com.ua/wp-content/uploads/2026/04/osnovaproheavy.woff') format('woff');
}
/* End Custom Fonts CSS */