/* Рут темної теми */



:root {
  --backpatch-bl-1: #e3c88e1c;
  --backpatch-bl-2: #e7dfccab;
  --backpatch-bl-3: #ffffff78;
  --patch-border-bg: #c89b3c;
  --pagin-hov-bg: #d4d4d4;

}

[data-theme="dark"] {
  --backpatch-bl-1: #e3c88e0d;
  --backpatch-bl-2: #85785a21;
  --backpatch-bl-3: #2f2d26;
  --patch-border-bg: #8f733c;
  --pagin-hov-bg: #695c42;

}





:root {
    --controlpanel-color: #c8aa6e38;
    }
    [data-theme="dark"] {
    --controlpanel-color: #0909099c;
    }

:root {
    --controlpanel-icon-color: #c89b3c;
    }
    [data-theme="dark"] {
    --controlpanel-icon-color: #8f733c;
    }

/* Секції сторінки */
:root {
    --home-section-block-background: #fff;
    }
    [data-theme="dark"] {
    --home-section-block-background: #181818;
    }

:root {
    --homegray-section-block-background: #f2f2f3;
    }
    [data-theme="dark"] {
    --homegray-section-block-background: #1f2223;
    }

    
/* Текст */

:root {
    --pcolor-background: #0a1428;
    }
    [data-theme="dark"] {
    --pcolor-background: #aaaab1;
    }

:root {
    --textbold1-background: #444;
    }
    [data-theme="dark"] {
    --textbold1-background: #aaaab1;
    }

:root {
    --textbthwhite-background: #fff;
    }
    [data-theme="dark"] {
    --textbthwhite-background: #cbcbcb;
    }


/* Блоки */
:root {
    --side-block-background: #fff;
    }
    [data-theme="dark"] {
    --side-block-background: #181818;
    }

:root {
    --menu-point-background: #f2f2f2;
    }
    [data-theme="dark"] {
    --menu-point-background: #1f2223;
    }

:root {
    --menuhover-point-background: #f7f2e8;
    }
    [data-theme="dark"] {
    --menuhover-point-background: #242729;
    }


/* Блоки Контенту*/

:root {
    --postwhite-background: #fff;
    }
    [data-theme="dark"] {
    --postwhite-background: #181818;
    }

:root {
    --postgray-background: #f2f2f3;
    }
    [data-theme="dark"] {
    --postgray-background: #1f2223;
    }

/* Кнопки*/
:root {
    --bth-background: #C8AA6E;
    }
    [data-theme="dark"] {
    --bth-background: #695c42;
    }

:root {
    --bth-hover-background: #d4b981;
    }
    [data-theme="dark"] {
    --bth-hover-background: #83765d;
    }



/* Іконки*/
:root {
    --gamelogo-color: #ab8d52;
    }
    [data-theme="dark"] {
    --gamelogo-color: #937d51;
    }

:root {
    --metaicons-color: #565656;
    }
    [data-theme="dark"] {
    --metaicons-color: #878787;
    }




/* Змінні для кольорів теми */
:root {
    --golden-sand-odd: #e3c88e69;
    --forest-mist-even: #8ebee347;
    --royal-parchment-header: #e3c88e;
    --charcoal-ink-text: #494949;
}

[data-theme="dark"] {
    --golden-sand-odd: #202427;
    --forest-mist-even: #503b2559;
    --royal-parchment-header: #bc933b;
    --charcoal-ink-text: #1a1d20;
}

/* Стилізація таблиці */
.wp-block-table table {
    border-collapse: separate;
    border-spacing: 10px; /* Простір між клітинками */
    width: 100%;
}

/* Стилізація заголовка */
.wp-block-table th {
    background-color: var(--royal-parchment-header);
    color: var(--charcoal-ink-text);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    border: none; /* Прибирає обведення */
}

/* Стилізація рядків */
.wp-block-table tr:nth-child(odd) td {
    background-color: var(--golden-sand-odd); /* Перший рядок */
}

.wp-block-table tr:nth-child(even) td {
    background-color: var(--forest-mist-even); /* Другий рядок */
}

/* Стилізація клітинок */
.wp-block-table td {
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    border: none; /* Прибирає обведення */
    overflow: hidden; /* Запобігає виходу зображення за межі */
    position: relative;
}

/* Стилізація зображень у клітинках */
.wp-block-table td img {
    max-width: 100%; /* Обмеження по ширині клітинки */
    max-height: 50px; /* Обмеження по висоті */
    height: auto; /* Збереження пропорцій */
    border-radius: 10px; /* Скруглення кутів */
    display: block;
    margin: auto; /* Вирівнювання по центру */
}




















/* Публікації категорій */
.categicon-page-entry {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease-in-out; /* Додаємо плавний перехід */
    border-radius: 10px 0px 10px 0px;
    
}

.categicon-page-entry:hover {
    transform: scale(1.03); /* Збільшення на 3% */
}



.categicon-page-entry .img-link {
    display: block;
    width: 100%;
    padding-top: 56%; /* Це співвідношення 16:9 */
    background-size: cover; /* Це допомагає фону покривати весь блок */
    background-position: center; /* Використовується для початкового позиціювання, якщо `background-position` не працює */
    background-repeat: no-repeat; /* Запобігає повторенню фону */
    transition: background-position 0.3s ease; /* Анімація зміни позиції фону */
    position: relative;
}



/* Публікації чемпіонів Кінець*/




/* Сторінка чемпіонів */


.row_publchamp {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Центрування елементів по горизонталі */
    gap: var(--bs-gutter-x); /* Відступи між елементами */
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}



.col-lg-champ {
flex: 0 0 auto;
width: 100%;
padding: 0 12px 12px;
border-radius: 12px;
}





.col-md-categpost {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto; /* Забороняє зростання елемента */
    flex-basis: 17%;
    max-width: 17%;
    margin: 3.5px 7.75px 12px 7.75px;
    text-transform: uppercase;
    border-radius: 10px;
    padding: 0px;
}


/* Для великих екранів (1200px і більше) */
@media (min-width: 1400px) {
    .col-md-categpost {
        flex-basis: 17%;
        max-width: 14%;

    }
}


/* Для великих екранів (1200px і більше) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .col-md-categpost {
        flex-basis: 16%;
        max-width: 16%;

    }
}

/* Для середніх екранів (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .col-md-categpost {
        flex-basis: 21%;
        max-width: 21%;

    }
}

/* Для малих екранів (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .col-md-categpost {
        flex-basis: 28%;
        max-width: 28%;

    }
}

/* Для дуже малих екранів (до 767px) */
@media (max-width: 767px) {
    .col-md-categpost {
        flex-basis: 45%;
        max-width: 45%;

    }
}

/* Для дуже малих екранів (до 508px) */
@media (max-width: 508px) {
    .col-md-categpost {
        flex-basis: 42%;
        max-width: 42%;

    }
}



/* Публікації категорій кінець */







































:root {
    --lol-classic-info-block-background: #c29d4d8a;
    }
    [data-theme="dark"] {
    --lol-classic-info-block-background: #c29d4d8a;
    }



:root {
    --lol-arena-info-block-background: #ff40402e;
    }
    [data-theme="dark"] {
    --lol-arena-info-block-background: #ff40402e;
    }



:root {
    --lol-aram-info-block-background: #53c2f98a;
    }
    [data-theme="dark"] {
    --lol-aram-info-block-background: #53c2f98a;
    }




.lol-classic-info-block {
    position: relative;
    padding: 10px;
    margin: 0 0 10px 0;
    border: 2px solid var(--lol-classic-info-block-background);
}


.lol-aram-info-block {
    position: relative;
    padding: 10px;
    margin: 0 0 10px 0;
    border: 2px solid var(--lol-aram-info-block-background);
}



.lol-arena-info-block {
    position: relative;
    padding: 10px;
    margin: 0 0 10px 0;
    border: 2px solid var(--lol-arena-info-block-background);
}












/* Уніфікований бордер радіус*/
.rounding-bl {
border-radius: 5px;
}











.icon-image-lolcharact {
	font-family: "Segoe UI", sans-serif !important;
    padding-left: 25px; /* Відступ для іконки */
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 15px 15px; /* Розмір іконки */
    margin-bottom: 0rem;
}

.icon-image-lolcharact.icon-game-mode {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/game-mode.svg');
}

.icon-image-lolcharact.icon-type-item {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/armor.svg');
}

.icon-image-lolcharact.icon-eng-item-name {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/armor.svg');
}

.icon-image-lolcharact.icon-vartist-v-zoloti {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/gold.svg');
}

.icon-image-lolcharact.icon-zoloto-pry-prodazhi {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/gold.svg');
}

.icon-image-lolcharact.icon-ability-power {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/ability_power.svg');
}

.icon-image-lolcharact.icon-attack-damage {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/attack_damage.svg');
}

.icon-image-lolcharact.icon-critical-strike-chance {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/critical_strike.svg');
}

.icon-image-lolcharact.icon-critical-strike-damage {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/armor.svg');
}

.icon-image-lolcharact.icon-life-steal {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/life_steal.svg');
}

.icon-image-lolcharact.icon-attack-speed {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/attack_speed.svg');
}

.icon-image-lolcharact.icon-health {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/health.svg');
}

.icon-image-lolcharact.icon-ability-haste {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/ability_haste.svg');
}

.icon-image-lolcharact.icon-magic-resist {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/magic_resist.svg');
}

.icon-image-lolcharact.icon-lethality {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/armor_penetration.svg');
}

.icon-image-lolcharact.icon-armor {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/armor.svg');
}

.icon-image-lolcharact.icon-tenacity {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/tenacity.svg');
}

.icon-image-lolcharact.icon-magic-penetration {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/magic_penetration.svg');
}

.icon-image-lolcharact.icon-move-speed {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/move_speed.svg');
}

.icon-image-lolcharact.icon-base-health-regen {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/health_regeneration.svg');
}

.icon-image-lolcharact.icon-armor-penetration {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/armor_penetration.svg');
}

.icon-image-lolcharact.icon-mana {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/mana.svg');
}

.icon-image-lolcharact.icon-heal-and-shield-power {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/armor.svg');
}

.icon-image-lolcharact.icon-base-mana-regen {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/mana_regeneration.svg');
}

.icon-image-lolcharact.icon-gold-per-10-seconds {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/gold-per-10.svg');
}

.icon-image-lolcharact.icon-omnivamp {
    background-image: url('/wp-content/themes/CatOwl/assets/images/content/lol/svg_icon/omnivamp.svg');
}















/* Стиль для всіх пристроїв */
.sidebar-box-publish {
  margin-bottom: 1em;
  font-size: 15px;
  width: 100%;
  background: var(--col-md-6-background); 
  padding: 20px;
}

/* Приховуємо блок, якщо ширина екрану менше ніж 992px */
@media (max-width: 991px) {
  .sidebar-box-publish {
    display: none;
  }
}





/* Стиль для мобільних пристроїв (до 991px включно) */
.box-mobile-info-block {
  margin-bottom: 1em;
  font-size: 15px;
  padding: 20px;
  border-radius: 12px;
  display: flex;
}








/* Блок крафту предметів */

.item-combination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.item {
    text-align: center;
    margin: 10px;
    max-width: 20%; /* Додаємо максимальну ширину для блоків item */
}

.item img {
    max-width: 75px;
    height: auto;
    border: 2px solid var(--lol-info-block-background);
    border-radius: 10px;
    padding: 4px;
}

.item p {
    margin: 5px 0 0;
    font-size: 14px;
    word-wrap: break-word; /* Забезпечуємо перенесення тексту */
    word-break: break-word;
    white-space: normal; /* Дозволяємо переносити текст на наступний рядок */
}

.plus img, .arrow img {
    width: 20px; /* Розмір іконок плюсу та стрілки */
    height: 20px;
    display: block;
    margin: 0 auto;
}

.plus, .arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
}

@media (max-width: 767px) {
    .item img {
        max-width: 65px;
    }

    .plus, .arrow {
        margin: 10px 0;
    }
}








.wp-block-embed.is-type-video.is-provider-youtube {
    max-width: 100%; /* Забезпечує, що контейнер займає всю доступну ширину */
    margin: 0 auto;  /* Центрує контейнер */
}

.wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Співвідношення 16:9 */
    height: 0;
    overflow: hidden;
}

.wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}










.boxlolchamptitleuni {
    padding: 20px;
    flex: 60%;
    box-sizing: border-box;
    background-color: var(--col-md-6-background);
    border-radius: 10px;
    margin: 4px;
    text-align: center !important;
}


.boxlolchamppageuni {
    padding: 20px;
    margin: 4px;
    flex: 15%;
    box-sizing: border-box;
    background-color: var(--col-md-6-background);
    border-radius: 10px;
}