@charset "UTF-8";

* {background: transparent;margin:0;padding:0;outline:none;border: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
table {border-collapse:collapse;border-spacing:0;}
input, select {vertical-align:middle;}
article, aside, figure, figure img, hgroup, footer, header, nav, section, main {display: block;}
body {font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; font-size: 18px; line-height:normal; padding:0; margin:0; color: #444; background-color: #f5f5f5; height:100%; width:100%; font-weight:normal;}
.clr {clear: both;}
.clearfix:after {content: ""; display: table; clear: both;}
a {color: #54afda; text-decoration: none;}
a:hover, a:focus {text-decoration: underline;}
h1, h2, h3, h4, h5 {font-weight:400; font-size:18px;}
.sub-title h1 {margin-bottom:15px; font-size:24px; font-weight:700;}

/*--- SET ---*/
select {height:40px; border:1px solid #111; background-color:#CCCCCC; color:#FFF;}
.bb-editor textarea{width:100%;background:#faf8f8;font-size:16px;border:1px solid #9ac55d;border-radius:3px;padding:7px 5px 5px;margin:0 0 15px;}
.bb-editor textarea:hover, .bb-editor textarea:focus, .bb-editor input:hover, .bb-editor input:focus {border:1px solid #ed6663;}

.img-box, .img-wide, .img-resp-h, .img-resp-v {overflow:hidden; position:relative; background-color:#000;}
.img-resp-h {padding-top:55%;}
.img-resp-v {padding-top:130%;}
.img-box img, .img-resp-h img, .img-resp-v img {width:100%; min-height:100%; display:block;}
.img-resp-h img, .img-resp-v img {position:absolute; left:0; top:0;}
.img-wide img {width:100%; display:block;}
.img-square img {width:150%; max-width:150%; margin-left:-25%;}
.nowrap {white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fx-row {display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}
.fx-center{-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}
.fx-between{-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}
.fx-stretch{-ms-flex-align:stretch;-webkit-align-items:stretch;align-items:stretch}
.fx-top{-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start}
.fx-middle{-ms-flex-align:center;-webkit-align-items:center;align-items:center}
.fx-bottom{-ms-flex-align:end;-webkit-align-items:flex-end;align-items:flex-end}
.fx-col{display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}
.fx-wrap{-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}
.pages {padding:20px;}

/* BASIC GRID
----------------------------------------------- */
header {width:100%;max-width:1280px;padding:0;top:0;z-index:150;}
.wrap {min-width:320px; overflow:hidden;}
.center {max-width:1280px; margin:0 auto; position:relative; z-index:20;}
.cols {margin:10px 0 20px 0; padding:0 10px;}
.main {width:calc(100% - 260px); width:-webkit-calc(100% - 260px); padding-right:20px; margin:20px 0 0 0; min-width: 0;}
footer {background-color:#252932; padding:10px 2010px; margin:0 -2000px; color:#fff; text-align:center; position:relative;}
main {display:flex;flex-direction: column;width:100%;}
main .catdesc {order:3;}
main .catcontent {order:1;}
main .main-additives {order:2;background:#FFFFFF;}

/* HEADER
----------------------------------------------- */
/* Ваш текущий контейнер (оставляем без изменений) */
.toplogo {
    display: block; 
    float: left; 
    padding-right: 20px;
}

/* Новое правило специально для SVG-логотипа */
.toplogo img {
    display: block;
    max-width: 100%;
    height: auto; /* Позволяет логотипу пропорционально уменьшаться на мобильных */
    object-fit: contain; /* Защищает SVG от сплющивания */
}

.lang-select {display: flex; flex-direction: column; justify-content: center;float:right; height:40px;width:40px; margin:20px 5px 0 5px; font-size:18px;text-transform: uppercase;border-radius:20px; border:#ed6663 solid 2px;}
.lang-select .ru{display:block;color:#ed6663;text-decoration:none;text-align:center;}
.lang-select .lv{display:block;color:#ed6663;text-decoration:none;text-align:center;}

/* ==========================================================================
   HEADER & TOP NAVIGATION (Анимированное слайд-меню)
   ========================================================================== */
.menuline-first {
    /* ВОЗВРАЩАЕМ ОРИГИНАЛЬНЫЙ ТРЮК для ширины на 100% экрана */
    background-color: #FFFFFF;
    height: 90px;
    padding: 0 2010px;
    margin: 0 -2000px;
    box-shadow: 0 5px 5px -5px rgba(0,0,0,0.3);
    position: relative;
    z-index: 150;
}

.toplogo {
    float: left; /* Прибиваем логотип к левому краю */
    display: flex;
    align-items: center;
    height: 90px;
    position: relative;
    z-index: 10;
}

.header-login, .mobmenu {
    float: right; /* Прибиваем логин/профиль к правому краю */
    display: flex;
    align-items: center;
    height: 90px;
    position: relative;
    z-index: 10;
}

/* МАГИЯ ЦЕНТРОВКИ: Меню висит в абсолютном центре шапки */
.topmenu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 90px;
    display: flex;
    align-items: center;
    z-index: 5;
}

.topmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    background: #ffffff;
}

/* Разделительные линии между пунктами */
.topmenu ul li {
    list-style: none;
    text-align: center;
    display: block;
    border-right: 1px solid rgba(0,0,0,0.06); 
}

.topmenu ul li:last-child {
    border-right: none;
}

/* Контейнеры кнопок */
.topmenu ul li a,
.topmenu ul li label {
    text-decoration: none;
    padding: 0 30px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 90px; 
    cursor: pointer;
    box-sizing: border-box;
}

/* =========================================
   ИКОНКИ (Эффект слайдера)
   ========================================= */
.topmenu ul li .icon {
    width: 36px;
    height: 36px;
    text-align: center;
    overflow: hidden;
    margin: 0 auto 6px auto; 
}

.topmenu ul li .icon i {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 40px; 
    font-size: 30px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* БАЗОВЫЙ ЦВЕТ: Фирменный зеленый */
    color: #80b435; 
    margin: 0 !important;
    padding: 0 !important;
}

/* Вторая (спрятанная) иконка */
.topmenu ul li .icon i:last-child {
    /* ЦВЕТ ПРИ НАВЕДЕНИИ: Фирменный красный */
    color: #ed6663; 
}

/* При наведении блок с иконками уезжает вверх ровно на 100% */
.topmenu ul li a:hover .icon i,
.topmenu ul li label:hover .icon i {
    transform: translateY(-100%);
}

/* =========================================
   ТЕКСТ (Эффект слайдера)
   ========================================= */
.topmenu ul li .name {
    position: relative;
    height: 16px; 
    width: 100%;
    display: block;
    overflow: hidden;
}

.topmenu ul li .name span {
    display: block;
    position: relative;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 16px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* БАЗОВЫЙ ЦВЕТ: Фирменный зеленый */
    color: #80b435; 
}

/* Второй (спрятанный) текст берется из data-text */
.topmenu ul li .name span::before {
    content: attr(data-text);
    position: absolute;
    top: -100%; 
    left: 0;
    width: 100%;
    height: 100%;
    
    /* ЦВЕТ ПРИ НАВЕДЕНИИ: Фирменный красный */
    color: #ed6663; 
}

/* При наведении блок с текстом уезжает вниз ровно на 16px */
.topmenu ul li a:hover .name span,
.topmenu ul li label:hover .name span {
    transform: translateY(16px);
}


/* TOP NAVIGATION
----------------------------------------------- */
.loginmenu {color:#80b435;cursor:pointer;height:32px;width:31px;margin:22px 5px 0 0; border: 2px solid #80b435;}
.loginmenu i {color:#80b435;font-size:19px;}

/* ==========================================================================
   MOBILE TOP NAVIGATION (УЛУЧШЕННЫЙ UX)
   ========================================================================== */
.menu_container { position: relative; }

.mobile_menu_overlay, 
.mobile_menu_container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Оверлей (затемнение фона) */
.mobile_menu_overlay {
    display: none;
    cursor: pointer;
    z-index: 10200;
    background: rgba(0, 0, 0, 0.6); /* Чуть темнее для контраста */
    backdrop-filter: blur(2px); /* Эффект матового стекла для фона */
    -webkit-backdrop-filter: blur(2px);
}

/* Основной контейнер меню */
.mobile_menu_container {
    transform: translateX(-320px);
    width: 300px; /* Чуть шире, 290px бывает маловато для длинных слов */
    overflow: hidden;
    z-index: 10201;
    background: #54afda;
    opacity: 1;
    /* МАГИЯ UX: Дорогая "пружинистая" анимация выезда вместо линейной */
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.15); /* Тень для отрыва от фона */
}

.mobile_menu_container.loaded {
    transform: translateX(0px);
}

/* Списки и пункты меню */
.mobile_menu_container ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile_menu_container ul li ul {
    transform: translateX(300px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #54afda;
    z-index: 2;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.mobile_menu_container ul li ul.loaded {
    transform: translateX(0px);
}

/* Плавный скролл для iOS */
.mobile_menu_container .mobile_menu_content,
.mobile_menu_container ul li ul.activity {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch; 
}

.mobile_menu_container .mobile_menu_content {
    max-height: 100%;
    padding-bottom: 30px;
}

/* Ссылки внутри меню (Увеличена зона клика) */
.mobile_menu_container ul li a {
    display: block;
    padding: 13px 20px; /* Увеличили отступы по высоте */
    line-height: 20px;
    font-size: 17px;
    background: #54afda;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.2s;
    -webkit-tap-highlight-color: transparent; /* Убираем синий квадрат при тапе на Android */
}

.mobile_menu_container ul li a:hover,
.mobile_menu_container ul li a:active {
    background: #469bc4; /* Цвет нажатия стал чуть темнее основного */
}

.mobile_menu_container ul i {
    margin: 0 10px 0 0;
    width: 20px;
    text-align: center;
    color: #ffffff !important; /* Принудительно красим все иконки в белый */
}

/* Линии-разделители */
.mobile_menu_container_line {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Полупрозрачные стильные линии */
}

/* Кнопка с подменю (со стрелкой вправо) */
.mobile_menu_container ul li a.parent {
    padding-right: 50px;
    background: #54afda url("../images/arrow_right.svg") right 20px center no-repeat;
    background-size: 18px;
}

.mobile_menu_container ul li a.parent:hover,
.mobile_menu_container ul li a.parent:active {
    background: #469bc4 url("../images/arrow_right.svg") right 20px center no-repeat;
    background-size: 18px;
}

/* =========================================
   КНОПКА НАЗАД (ЛИПКИЙ ЗАГОЛОВОК)
   ========================================= */
.mobile_menu_container ul li a.back {
    padding: 15px 20px 15px 45px;
    background: #3d8bb2 url("../images/arrow_left.svg") left 15px center no-repeat;
    background-size: 24px;
    box-sizing: border-box;
    min-height: 50px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    
    /* Липкое позиционирование: всегда сверху при скролле списка! */
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* МАГИЯ: Добавляем текст "Atgal" без редактирования HTML-шаблона */
.mobile_menu_container ul li a.back::after {
    content: "Atgal";
}

/* Блок профиля пользователя */
.mobile_menu_topmain { margin-top: 0; }
.mobile_menu_username {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    padding: 15px 0; /* Чуть больше "воздуха" */
    margin: 0;
}
.mobile_menu_username .user-icon-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #54afda;
    margin-right: 12px;
}
.mobile_menu_username .user-icon-bg i {
    font-size: 22px;
    color: #ffffff;
    margin: 0;
}
.mobile_menu_username .avatar img {
    border: 3px solid #85d5fa;
    border-radius: 50%;
    margin-right: 12px;
}
.mobile_menu_username .username a {
    color: #54afda;
    font-size: 18px;
    font-weight: 600;
    background: none;
    padding: 0;
    margin: 0;
}

/* Мелкие подпункты (Оформляем счетчик новостей как красивый бейдж) */
.mobile_menu_icon { font-size: 24px; }
.mobile_menu_subitem_small {
    display: flex;
    align-items: center;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
    padding-bottom: 8px;
}
.mobile_menu_subitem_small_1 { flex-grow: 1; }

.mobile_menu_subitem_small_2 {
    background: rgba(255, 255, 255, 0.2); /* Полупрозрачный фон */
    padding: 2px 10px;
    border-radius: 12px; /* Форма таблетки */
    font-size: 12px;
    font-weight: 600;
    margin-left: 10px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

/* ==========================================================================
   НАВИГАЦИЯ ПО КАТЕГОРИЯМ (Объединенные стили)
   ========================================================================== */
.categories-nav { margin-bottom: 20px; }

/* Общая сетка для обоих блоков (ровно 2 колонки на ПК) */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px; /* Ровные отступы между карточками */
}

/* --------------------------------------------------------------------------
   БЛОК 1: Детальный список (с подкатегориями и счетчиками)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   БЛОК 1: Детальный список (с подкатегориями и счетчиками)
   -------------------------------------------------------------------------- */
.dirsection {
    position: relative; /* Обязательно для привязки ножниц */
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    border: 2px dashed #eaeaea;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
}

/* Эффект ножниц, разрезающих пунктирную линию (С идеальным слиянием фонов) */
.dirsection::after {
    content: "\f0c4"; 
    font-family: "iconfont", "Font Awesome 5 Free", "FontAwesome", sans-serif;
    position: absolute;
    top: -13px; /* Поднимаем ровно на половину высоты иконки (24px / 2) */
    right: 20px; 
    font-size: 18px; 
    color: #cccccc; 
    
    /* Задаем жесткую высоту для точного расчета половин фона */
    height: 24px;
    line-height: 24px;
    padding: 0 8px; 
    
    /* МАГИЯ СЛИЯНИЯ: верхняя половина серая (как сайт), нижняя белая (как сам блок) */
    background: linear-gradient(to bottom, #ffffff 50%, #f5f5f5 50%); 
    
    transform: rotate(-180deg); 
}

.dirtitle {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #eaeaea;
}

.dirtitle i {
    font-size: 24px;
    color: #80b435;
    margin-right: 10px;
}

.dir-subitems {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* UX-дизайн: ВЫРАЗИТЕЛЬНЫЕ МИНИ-ЦЕННИКИ */
.subitem-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #333; /* Текст стал темнее и контрастнее */
    font-size: 12px;
    text-decoration: none !important;
    padding: 2px 8px 3px 16px;
    border: none;
    /* МАГИЯ ОБВОДКИ: первая тень (0 0 1px) создает четкий контур-бордер, вторая дает легкий объем */
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.15)) drop-shadow(0 2px 3px rgba(0,0,0,0.06)); 
    transition: all 0.2s ease;
    z-index: 1;
}

/* Фоновая подложка (сам ярлычок) */
.subitem-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #e6e6e6; /* Фон стал немного темнее (выразительный серый) */
    clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 10px 100%, 0% 50%);
    z-index: -1;
    transition: background 0.2s ease;
}

/* Эффекты при наведении на ярлык */
.subitem-link:hover {
    color: #ffffff;
    /* Усиливаем тень и делаем обводку слегка зеленоватой */
    filter: drop-shadow(0 0 1px rgba(128,180,53,0.5)) drop-shadow(0 3px 5px rgba(0,0,0,0.12));
    transform: translateY(-1px);
}

/* Классическая крошечная дырочка на самом "острие" носика */
.subitem-link::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    background: #ffffff; /* Сливается с белым фоном сайта */
    border-radius: 50%;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
    z-index: -1;
}

.subitem-link:hover::before {
    background: #80b435; /* Окрашивается в фирменный зеленый */
}

/* МАГИЯ: Счетчик в виде сквозной вдавленной дырочки */
.subitem-link .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    /* Делаем фон белым, а внутреннюю тень темной — это создает иллюзию пробитой "насквозь" дырки */
    background: #ffffff; 
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.18);
    color: #CCCCCC; /* Блеклый цвет цифры по умолчанию */
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px; /* Идеально круглые края */
    margin-left: 6px;
    padding: 0 5px;
    transition: color 0.2s ease, box-shadow 0.2s ease;
}

/* При наведении: ярлык зеленый, "дырочка" остается белой, а цифра внутри вспыхивает зеленым */
.subitem-link:hover .count {
    color: #80b435;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); /* Тень внутри дырочки становится чуть глубже */
}

/* --------------------------------------------------------------------------
   БЛОК 2: Карточки-ценники (Главные категории)
   -------------------------------------------------------------------------- */
.category-card {
    position: relative;
    display: flex;
    align-items: center;
    padding: 20px 25px 20px 45px; /* Увеличили отступ слева для "носика" ценника */
    text-decoration: none !important;
    /* Вместо обычного box-shadow используем drop-shadow, чтобы тень повторяла контур вырезанного ценника */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
    transition: all 0.3s ease;
    z-index: 1; /* Гарантируем, что текст будет поверх фона */
}

/* Фоновая подложка, из которой мы вырезаем форму ценника */
.category-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffffff;
    /* МАГИЯ: Вырезаем форму ценника с острием слева (на 25px от края) */
    clip-path: polygon(25px 0%, 100% 0%, 100% 100%, 25px 100%, 0% 50%);
    z-index: -1; /* Прячем фон под текст */
    transition: background 0.3s ease;
}

/* Имитация пробитой дырочки */
.category-card::after {
    content: "";
    position: absolute;
    left: 10px; /* Центрируем внутри 25-пиксельного острия */
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: #f5f5f5; /* Цвет фона вашего сайта (создает иллюзию насквозь пробитой дырки) */
    border-radius: 50%;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.15); /* Добавляем легкий внутренний объем дырочке */
    z-index: -1;
}

.category-card i {
    font-size: 28px;
    color: #80b435;
    margin-right: 15px;
    transition: transform 0.3s ease;
}

.category-card span {
    font-size: 20px;
    font-weight: 600;
    color: #444444;
    transition: color 0.3s ease;
}

/* Эффекты при наведении: ценник приподнимается */
.category-card:hover {
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.08));
    transform: translateY(-3px);
    text-decoration: none !important;
}

.category-card:hover i { transform: scale(1.15); }
.category-card:hover span { color: #80b435; }



/* MAIN ADDITIVES 
----------------------------------------------- */
.main-atitle {display:flex;line-height:24px;margin:20px 20px 0 20px;}
.main-atitle h1 {font-size:24px; padding-bottom:5px; color: #444;}
.main-atitle i {font-size:24px;margin-right:10px;}
.main-arows {display:flex;flex-wrap:wrap;justify-content: space-between;margin:10px 0 10px 0;padding:10px;}
.short-additive {width:30%;margin:10px;padding:10px;color:#444444;border: 2px dashed #eaeaea;}
.short-additive a{color:#444444;}
.short-additive a:hover{text-decoration:underline;}
.short-additive-title {font-size:14px;padding:0;font-weight:bold;}
.short-additive-title-center {font-size:16px;padding:0;font-weight:bold;text-align:center;}
.short-additive-img {display:block;cursor:pointer;text-align:center;}
.short-additive-img img {width:100%;}
.short-additive-date {font-size:14px;color:#ed6663;text-align:center;}
  

/* ==========================================================================
   MODERN "LOAD MORE" BUTTON (AJAX)
   ========================================================================== */
.custom-ajax-nav {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 30px 0;
    padding: 0;
}

.custom-ajax-nav .nav-load a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Цветовая схема: прозрачный фон, зеленая рамка и текст */
    color: #80b435;
    background: transparent;
    border: 2px solid #80b435;
    border-radius: 50px; /* Элегантная форма таблетки */
    text-decoration: none !important;
    cursor: pointer;
    
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 10px rgba(128, 180, 53, 0.05);
}

.custom-ajax-nav .nav-load a i {
    margin-right: 10px;
    font-size: 20px;
    transition: transform 0.3s ease;
}

/* Эффект наведения: заливается цветом, кнопка приподнимается */
.custom-ajax-nav .nav-load a:hover {
    background: #80b435;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(128, 180, 53, 0.3);
    transform: translateY(-3px);
}

/* МАГИЯ UX: Стрелочка "вправо" поворачивается "вниз", приглашая скроллить! */
.custom-ajax-nav .nav-load a:hover i {
    transform: rotate(90deg);
}

/* Состояние при клике */
.custom-ajax-nav .nav-load a:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(128, 180, 53, 0.2);
}

/* Анимация крутящегося спиннера при загрузке */
@keyframes spin { 
    100% { transform: rotate(360deg); } 
}
/* Отключаем автоматические прыжки браузера (Scroll Anchoring) при AJAX подгрузке */
.catcontent, 
.custom-ajax-nav {
    overflow-anchor: none;
}

/* ==========================================================================
   MAIN SOC BUTTONS
   ========================================================================== */

/* Инициализация иконок */
.icon-facebook-f:before { content: "\e91a"; font-family: "iconfont", sans-serif; }
.icon-rss:before { content: "\f09e"; font-family: "iconfont", sans-serif; }

/* Контейнер кнопок */
.main-social {
    display: flex;
    justify-content: center;
    gap: 20px; /* Отступ между кнопками */
    padding: 15px 0 0 0;
    margin: 0;
    list-style: none;
    flex-wrap: wrap;
}

.main-social li {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 1. Базовый стиль кнопки */
.social-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    width: 70px;
    height: 70px;
    text-decoration: none !important;
    background: transparent;
    padding: 0 !important;
    box-sizing: border-box;
    transition: 0.5s;
}

/* 2. Иконка внутри (Ультимативная центровка "Полный квадрат") */
.social-btn i {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    /* Растягиваем иконку на всю кнопку и центрируем внутри неё */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    font-size: 36px !important;
    color: #999999; 
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0 !important; /* Убиваем любые возможные текстовые отступы DLE */
    line-height: normal !important;
    transition: color 0.5s;
    z-index: 2;
}

/* Оптическая компенсация для асимметричной буквы 'f' */
.facebook-btn i::before {
    margin-left: 2px; /* Искусственно сдвигаем саму букву вправо, чтобы визуально выровнять по центру */
}

/* 3. Анимация четырех линий (span) */
.social-btn span {
    position: absolute;
    transition: transform 0.5s;
    background: #999999; /* Базовый цвет рамки до наведения */
}

/* Верхняя и нижняя линии */
.social-btn span:nth-child(1),
.social-btn span:nth-child(3) {
    width: 100%;
    height: 2px;
}

.social-btn span:nth-child(1) {
    top: 0;
    left: 0;
    transform-origin: right;
}

.social-btn span:nth-child(3) {
    bottom: 0;
    left: 0;
    transform-origin: left;
}

/* Левая и правая линии */
.social-btn span:nth-child(2),
.social-btn span:nth-child(4) {
    width: 2px;
    height: 100%;
}

.social-btn span:nth-child(2) {
    top: 0;
    left: 0;
    transform: scale(0);
    transform-origin: bottom;
}

.social-btn span:nth-child(4) {
    top: 0;
    right: 0;
    transform: scale(0);
    transform-origin: top;
}

/* 4. Поведение линий при наведении (Перерисовка рамки) */
.social-btn:hover span:nth-child(1) {
    transform: scaleX(0);
    transform-origin: left;
}

.social-btn:hover span:nth-child(3) {
    transform: scaleX(0);
    transform-origin: right;
}

.social-btn:hover span:nth-child(2) {
    transform: scale(1);
    transform-origin: top;
}

.social-btn:hover span:nth-child(4) {
    transform: scale(1);
    transform-origin: bottom;
}

/* 5. Цвета для каждой соцсети (При наведении) */

/* Facebook */
.facebook-btn:hover i { color: #3b5998 !important; }
.facebook-btn:hover span { background: #3b5998; }

/* RSS */
.rss-btn:hover i { color: #f26522 !important; }
.rss-btn:hover span { background: #f26522; }

/* Адаптивность для мобильных */
@media screen and (max-width: 480px) {
    .social-btn {
        width: 46px;
        height: 46px;
    }
}

/* LOGIN
----------------------------------------------- */
/* ==========================================================================
   MODAL WINDOW BASE (Clean & Prefix-free)
   ========================================================================== */
.header-login { position: relative; }

/* Обертка и затемнение фона */
.modal-wrap::before {
    content: "";
    display: none;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    inset: 0;
    z-index: 101;
}
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 102;
    cursor: pointer;
}

/* Логика открытия (CSS-only) */
.modal-open:checked ~ .modal-wrap::before,
.modal-open:checked ~ .modal-wrap .modal-overlay {
    display: block;
}
.modal-open:checked ~ .modal-wrap .modal-dialog {
    transform: translate(-50%, 0);
    top: 80px;
}

/* Само модальное окно */
.modal-dialog {
    background: #ffffff;
    border-radius: 5px;
    position: fixed;
    width: 90%;
    max-width: 360px;
    left: 50%;
    top: -100%;
    transform: translate(-50%, -500%);
    box-shadow: 0 15px 20px rgba(0,0,0,.22), 0 19px 60px rgba(0,0,0,.3);
    transition: transform 0.3s ease-out;
    z-index: 103;
    /* overflow: hidden; <--- УДАЛИТЬ ЭТО */
}

/* ==========================================================================
   MODAL HEADER & CLOSE BUTTON
   ========================================================================== */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    background: #9ac55d;
    border-bottom: 1px solid #80b435;
    position: relative;
    
    /* ДОБАВИТЬ ЭТИ ДВЕ СТРОКИ: */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.modal-header span { font-size: 20px; margin: 0; padding-left: 10px; color: #ffffff; font-weight: 500; }
.modal-header i { font-size: 24px; color: #ffffff; }

.modal-header .login-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.modal .btn-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -9px;
    top: -10px;
    width: 36px;
    height: 36px;
    background: #9ac55d;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.modal .btn-close i { font-size: 26px; }

/* ==========================================================================
   LOGIN FORM FIELDS
   ========================================================================== */
.modal-body { padding: 25px; }
.modal-body-profile { padding: 0; }

.login-field { margin-bottom: 15px; }
.login-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.login-input-wrap { position: relative; }
.login-input-wrap input {
    width: 100%;
    height: 42px;
    padding: 0 40px 0 12px; /* Оставляем место справа для глазика */
    border: 1px solid #9ac55d;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.login-input-wrap input:focus {
    outline: none;
    border-color: #80b435;
    box-shadow: 0 0 0 3px rgba(128, 180, 53, 0.2);
}

/* Кнопка показа пароля (Синхронизировано с мобильной версией) */
.password-control {
    position: absolute;
    top: 50%;
    right: 12px; /* Сделали 12px, как в мобильной форме */
    transform: translateY(-50%);
    display: block;
    margin: 0;
    padding: 0;
    width: 20px; 
    height: 20px;
    border: none; /* Обязательно для <button>, чтобы убрать системную рамку */
    background: url(../images/view.svg) center no-repeat;
    cursor: pointer;
    z-index: 5;
    filter: invert(100%) sepia(21%) saturate(6501%) hue-rotate(26deg) brightness(104%) contrast(54%);
}

.password-control.view { 
    background: url(../images/view-no.svg) center no-repeat;
    filter: invert(100%) sepia(21%) saturate(6501%) hue-rotate(26deg) brightness(104%) contrast(54%);
}


/* ВАЖНО: Защита текста пароля от наезда на иконку */
#login_password, #login_password_2 {
    padding-right: 40px; 
}


/* =========================================
   МОБИЛЬНАЯ ФОРМА АВТОРИЗАЦИИ
   ========================================= */
.form-mobile { display: flex; justify-content: center; }
.form-width-mobile { width: 300px; }

.main-login-fields-mobile .login-input-mobile,
.main-login-fields .login-input {
    width: 100%;
    margin: 5px auto 15px auto; /* Сделал отступы аккуратнее */
    position: relative;
}

.main-login-fields-mobile .login_label label, 
.main-login-fields .login_label label {
    display: block;
    margin: 0 0 5px 0;
    font-size: 14px;
    color: #444;
}

/* Поля ввода */
#login_password, #login_password_2, 
#login_name, #login_name_2 {
    width: 100%;
    padding: 0;
    height: 40px;
    line-height: 40px;
    text-indent: 10px;
    margin: 0;
    border-radius: 3px;
    border: 1px solid #9ac55d;
    font-size: 16px; /* Чуть уменьшил для мобильных, чтобы не было зума в iOS */
    box-sizing: border-box; /* Чтобы padding не ломал ширину 100% */
}

#login_password:focus, #login_password_2:focus, 
#login_name:focus, #login_name_2:focus {
    outline: none; /* Убираем стандартную грубую рамку браузера */
    border-color: #80b435; /* Делаем границу чуть более насыщенной зеленой */
    box-shadow: 0 0 8px rgba(154, 197, 93, 0.6); /* Мягкое светло-зеленое свечение */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Плавное включение эффекта */
}

/* Также добавим плавность изначальным полям, чтобы они "затухали" красиво */
#login_password, #login_password_2, 
#login_name, #login_name_2 {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Делаем новую обертку точкой отсчета координат */
.pass-wrapper {
    position: relative;
    width: 100%;
    display: block;
}

/* Идеально центрируем иконку внутри обертки */
.main-login-fields-mobile .login-input-mobile .password-control, 
.main-login-fields .login-input .password-control {
    position: absolute;
    top: 50% !important; /* Опускаем ровно на 50% высоты обертки */
    transform: translateY(-50%) !important; /* Поднимаем ровно на половину самой иконки (идеальный центр) */
    bottom: auto !important; /* Убиваем все старые правила */
    right: 12px;
    display: block; 
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    z-index: 5; 
    background: url(../images/view.svg) center no-repeat; 
    filter: invert(100%) sepia(21%) saturate(6501%) hue-rotate(26deg) brightness(104%) contrast(54%);
}

.main-login-fields-mobile .login-input-mobile .password-control.view, 
.main-login-fields .login-input .password-control.view {
    background: url(../images/view-no.svg) center no-repeat;
    filter: invert(100%) sepia(21%) saturate(6501%) hue-rotate(26deg) brightness(104%) contrast(54%);
}

/* ВАЖНО: Защита текста пароля от наезда на иконку */
#login_password, #login_password_2 {
    padding-right: 40px; 
}

/* Основная кнопка входа */
.main-login-submit-mobile .darkbutton {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    padding: 12px;
    border: none;
    border-radius: 3px;
    background: #ed6663;
    box-shadow: 0 -3px #c65351 inset;
    transition: background-color 0.2s;
}
.main-login-submit-mobile .darkbutton i { font-size: 18px; margin-right: 8px; }
.main-login-submit-mobile .darkbutton:hover { background: #c65351; }

/* Текст "arba" (или) */
.logintips {
    text-align: center;
    margin: 15px 0;
    color: #888;
    font-size: 14px;
}

/* ==========================================================================
   BUTTONS & LINKS
   ========================================================================== */

/* Главная кнопка логина (стиль синхронизирован с голосованием) */
.darkbutton {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    padding: 12px;
    color: #ffffff;
    font-size: 16px; font-weight: 700;
    border: none; border-radius: 4px;
    background: #ed6663;
    box-shadow: inset 0 -4px rgba(0,0,0,0.15); /* Темный инсет-эффект без жесткого цвета */
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}
.darkbutton i { margin-right: 8px; font-size: 18px; }
.darkbutton:hover { background: #e05552; }
.darkbutton:active { box-shadow: inset 0 -2px rgba(0,0,0,0.15); transform: translateY(2px); }

/* Соц. сети */
.logintips { display: flex; align-items: center; text-align: center; color: #999; margin: 20px 0; font-size: 14px; }
.logintips::before, .logintips::after { content: ''; flex: 1; border-bottom: 1px solid #eee; }
.logintips::before { margin-right: 10px; } .logintips::after { margin-left: 10px; }

/* Блок восстановления пароля */
.main-links-passrecover { 
    text-align: right; /* Логичнее всего смотрится справа под полем пароля */
    margin: 5px 0 20px 0; /* Придвигаем ближе к инпуту, отодвигаем от кнопки входа */
    font-size: 14px; /* Увеличил на 1px для читаемости */
}

/* Ссылка восстановления */
.main-links-passrecover a { 
    color: #80b435; 
    text-decoration: none; 
    display: inline-block; 
    padding: 5px 0 5px 10px; /* UX-хак: увеличиваем невидимую зону клика для толстых пальцев */
    transition: color 0.2s ease;
}

.main-links-passrecover a:hover { 
    color: #6a962c; /* Плавно чуть темнеет при наведении */
    text-decoration: underline; 
}

/* Блок регистрации нового пользователя */
.main-links-registration { 
    text-align: center; 
    margin: 20px 0 0 0; /* Отделяем от кнопок соцсетей */
    font-size: 15px; /* Чуть крупнее, чтобы вопрос легко читался */
    color: #666666; 
}

/* Ссылка на регистрацию */
.main-links-registration a { 
    color: #ed6663; 
    font-weight: 600; 
    text-decoration: none; 
    display: inline-block;
    padding: 5px; /* UX-хак: расширяем зону клика вокруг ссылки */
    transition: color 0.2s ease;
}

.main-links-registration a i { 
    margin-right: 4px; 
}

.main-links-registration a:hover { 
    color: #c65351; /* Более темный, сочный красный при наведении */
    text-decoration: underline; 
}
/* ==========================================================================
   USER MENU (LOGGED IN)
   ========================================================================== */
.main-login-usermenu { list-style: none; margin: 0; padding: 0; }
.main-login-usermenu li { border-bottom: 1px solid #f0f0f0; transition: background 0.2s; }
.main-login-usermenu li:last-child { border-bottom: none; }
.main-login-usermenu li:hover { background: #f9f9f9; }

.main-login-usermenu a {
    display: flex; align-items: center;
    padding: 15px 20px;
    color: #333e48;
    font-size: 16px; font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}
.main-login-usermenu li:hover a { color: #80b435; }
.main-login-usermenu i { font-size: 20px; color: #80b435; margin-right: 15px; width: 24px; text-align: center; }


/* ==========================================================================
   USER PROFILE (VARTOTOJO PROFILIS)
   ========================================================================== */
.userwrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap; /* Позволяет блокам перестроиться на смартфонах */
    background-color: #ffffff;
    border-radius: 8px; /* Мягкие углы карточки */
    overflow: hidden;
    margin-bottom: 20px;
}

/* ---------------- Левая часть: Аватар ---------------- */
.useravatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; 
    width: 290px;
    flex-grow: 1; /* На смартфонах растянется на всю ширину */
    background-color: #f9fbfe; /* Легчайший голубой оттенок для контраста */
    color: #54afda;
    padding: 30px 20px;
    border-right: 1px solid #f0f0f0; /* Визуальный разделитель */
}

.useravatar .username {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
}

/* Делаем аватар круглым и красивым */
.useravatar .avatar-img img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%; /* Идеальный круг */
    border: 4px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ---------------- Правая часть: Информация ---------------- */
.userinfo {
    flex: 1; /* Занимает всё оставшееся свободное пространство */
    min-width: 300px; /* Чтобы не сжималось слишком сильно */
    padding: 30px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Список статистики пользователя */
.userinfo .user-stats {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

/* Распределяем текст: Название слева, Значение справа */
.userinfo .user-stats li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed #eeeeee;
    font-size: 16px;
    color: #555555;
}

.userinfo .user-stats li:last-child { border-bottom: none; }
.userinfo .user-stats li strong { color: #333333; font-weight: 500; }

/* ---------------- Кнопки управления ---------------- */
.userinfo-buttons {
    display: flex;
    gap: 15px; /* Отступ между кнопками */
    flex-wrap: wrap; /* Если экран узкий, кнопки встанут друг под другом */
}

/* Общий стиль кнопок */
.profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none !important;
    border-radius: 5px;
    transition: all 0.2s ease;
    flex: 1; /* Кнопки будут одинаковой ширины */
    min-width: 180px;
}

.profile-btn i { font-size: 18px; margin-right: 8px; }

/* Кнопка "Редактировать профиль" (Фирменный синий) */
.profile-edit {
    background-color: #eaf5fa;
    color: #54afda;
    border: 1px solid #d0ebf7;
}
.profile-edit:hover { background-color: #54afda; color: #ffffff; }

/* Кнопка "Выйти" (Красная, акцентная) */
.profile-logout {
    background-color: #fcedec;
    color: #ed6663;
    border: 1px solid #fad3d2;
}
.profile-logout:hover { background-color: #ed6663; color: #ffffff; }

/* ---------------- Адаптивность для смартфонов ---------------- */
@media (max-width: 650px) {
    .useravatar { width: 100%; border-right: none; border-bottom: 1px solid #f0f0f0; }
    .userinfo { min-width: 100%; padding: 20px; }
    .userinfo .user-stats li { flex-direction: column; gap: 5px; } /* Лейбл будет над значением */
}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-wrap { background-color: #ffffff; padding: 25px 20px; margin-top: 15px; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.form-bottom-space { width: 100%; height: 5px; }

.form-text p { margin: 0 0 10px 0; line-height: 1.5; color: #444; }
.form-text a { color: #80b435; text-decoration: none; font-weight: 500; }
.form-text a:hover { text-decoration: underline; }

.form-title h1 { font-size: 22px; text-transform: uppercase; line-height: 30px; margin: 0 0 5px 0; padding-left: 5px; }
.form-title h1 i { color: #ed6663; margin-right: 8px; font-size: 24px; }

/* Grid / Flexbox Layout (Mobile First) */
.form-item { display: flex; flex-direction: column; margin-bottom: 20px; }
.form-item:last-child { margin-bottom: 0; }

.form-item .firstcol { 
    font-weight: 600; color: #333; margin-bottom: 8px; cursor: pointer;
}
.form-item .secondcol { position: relative; width: 100%; }

/* Desktop View (Адаптация для экранов от 768px и больше) */
@media (min-width: 768px) {
    .form-item { flex-direction: row; align-items: center; }
    .form-item .firstcol { width: 220px; flex-shrink: 0; padding-right: 20px; text-align: right; margin-bottom: 0; }
    .form-item .secondcol { flex-grow: 1; }
}

/* ==========================================================================
   INPUTS & BUTTONS
   ========================================================================== */
.form-item .secondcol input[type="text"],
.form-item .secondcol input[type="password"],
.form-item .secondcol input[type="email"],
.form-item .secondcol textarea {
    width: 100%; padding: 10px 15px; font-size: 16px;
    background: #faf8f8; border: 1px solid #9ac55d; border-radius: 4px; box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-item .secondcol input:focus, 
.form-item .secondcol textarea:focus {
    outline: none; border-color: #80b435; box-shadow: 0 0 0 3px rgba(128,180,53,0.2);
}

/* Submit Button */
.form-item .secondcol button[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 24px; font-size: 16px; font-weight: 700; color: #ffffff;
    background: #ed6663; border: none; border-radius: 4px; cursor: pointer;
    box-shadow: inset 0 -4px rgba(0,0,0,0.15); transition: background 0.2s, transform 0.1s;
}
.form-item .secondcol button[type="submit"]:hover { background: #e05552; }
.form-item .secondcol button[type="submit"]:active { box-shadow: inset 0 -2px rgba(0,0,0,0.15); transform: translateY(2px); }
.form-item .secondcol button i { margin-right: 8px; font-size: 18px; }


/* ==========================================================================
   H1: ГРАДИЕНТНЫЙ ТЕКСТ (Modern / High-Tech)
   ========================================================================== */
.content-title {
    display: flex;
    align-items: center;
    margin: 20px 0 30px 0;
}

.content-title i {
    font-size: 34px;
    color: #ed6663;
    margin-right: 15px;
    flex-shrink: 0;
    /* Неоновое свечение в цвет иконки */
    filter: drop-shadow(0 0 10px rgba(237, 102, 99, 0.4));
}

.content-title h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    /* Создаем градиент */
    background: linear-gradient(90deg, #ed6663 20%, #80b435 80%);
    /* Применяем градиент только к тексту */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* Фолбэк */
}

/* Адаптивность */
@media screen and (max-width: 768px) {
    .content-title h1 { font-size: 22px; }
    .content-title i { font-size: 28px; margin-right: 12px; }
}

/* SPEEDBAR
----------------------------------------------- */
.speedbar {margin:0 5px 15px 0;font-size:14px;}


/* КНОПКА ДЛЯ ПАРТНЕРСКОЙ ССЫЛКИ */
/* Контейнер для выравнивания */
.button-container {
    text-align: center;
    margin: 30px 0;
}

/* Основные стили кнопки */
.btn-pulse-round {
    display: inline-block;
    padding: 18px 35px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background-color: #4CAF50; /* Фирменный зеленый цвет */
    border-radius: 50px; /* Полностью закругленные края */
    text-decoration: none; 
    cursor: pointer;
    
    /* Фиксы для рендеринга шрифтов (убирают рябь текста) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    transform: translateZ(0); /* Аппаратное ускорение */
    
    /* Начальная тень для анимации */
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    
    /* Запускаем анимацию ТОЛЬКО для тени */
    animation: pulse-shadow-only 2s infinite;
    
    /* Плавность для ховера (наведения) */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

/* Принудительно отключаем подчеркивание */
.btn-pulse-round:hover,
.btn-pulse-round:focus,
.btn-pulse-round:active {
    text-decoration: none;
    color: #ffffff;
}

/* Эффекты при наведении мыши */
.btn-pulse-round:hover {
    animation: none; /* Останавливаем пульсацию */
    background-color: #388E3C; /* Цвет становится чуть темнее */
    transform: scale(1.03); /* Единоразовое легкое увеличение при наведении */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Статичная тень */
}

/* Эффект прожатия при клике */
.btn-pulse-round:active {
    transform: scale(0.98); /* Кнопка слегка "вжимается" */
}

/* Измененная анимация пульсации (без scale, только тень) */
@keyframes pulse-shadow-only {
    0% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(76, 175, 80, 0); /* Тень расходится и исчезает */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}

/* ==========================================================================
   СЕТКА КАТАЛОГОВ (FLEXBOX ДЛЯ ОДИНАКОВОЙ ВЫСОТЫ)
   ========================================================================== */

/* 1. Родительский контейнер */
.catcontent {
    display: flex;
    flex-wrap: wrap;
}


/* ==========================================================================
   КОНТЕЙНЕР ДЛЯ ПОЛНЫХ СТРАНИЦ И БУКЛЕТОВ
   ========================================================================== */
.fullcontent {
    display: block; /* Выключаем Flexbox, включаем обычный блочный режим */
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Заставляем обертку буклета гарантированно заполнять всё пространство */
.fullcontent > article,
.fullcontent > div {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
    box-sizing: border-box;
}

/* Защита навигации и пагинации */
.bottom-nav, .navigation {
    width: 100%;
}

/* 2. Колонка карточки (строго без float) */
.short-thumb {
    display: flex;
    width: 33.333%;
    padding: 0 10px 20px 10px;
    box-sizing: border-box;
}

/* 3. Сама карточка (гибкая высота) */
.short-box {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Карточка растягивается до самого высокого соседа */
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    padding-bottom: 45px; /* Резерв места под теги-ценники */
}

/* Плавное всплытие карточки */
.short-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    border-color: #dcdcdc;
    z-index: 100;
}

/* Ссылка-обертка всей карточки */
.short-link {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-decoration: none !important;
    outline: none;
}

/* ==========================================================================
   IMAGE & SCROLL EFFECT (Картинки каталогов)
   ========================================================================== */
.short-img {
    height: 260px;
    position: relative;
    overflow: hidden;
    border-radius: 8px 8px 0 0;
    background: #f9f9f9;
    border-bottom: 1px solid #f0f0f0;
}

/* Эффект плавной прокрутки */
.image-scroll {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    transition: background-position 3s ease-out, transform 0.4s ease;
}

.image-scroll.gray_image {
    filter: sepia(80%) grayscale(100%) blur(1px);
    opacity: 0.7;
}

/* Анимация при наведении: Скролл + Зум */
.short-box:hover .image-scroll {
    background-position: center bottom;
    transform: scale(1.05);
}

/* ==========================================================================
   DATES & TEXT LABELS (Даты акций с матовым стеклом)
   ========================================================================== */
.akcijas-date, .akcijas-date-stop {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px 5px;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    z-index: 4;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.akcijas-date { 
    background-color: rgba(128, 180, 53, 0.85); 
} 

.akcijas-date-stop { 
    background-color: rgba(68, 68, 68, 0.85); 
    text-transform: uppercase; 
    letter-spacing: 1px;
}

/* ==========================================================================
   BOTTOM CONTENT (Текст под картинкой)
   ========================================================================== */
.short-more {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.short-title {
    width: 100%;
    font-size: 15px;
    font-weight: 700;
    color: #444444;
    text-align: center;
    line-height: 1.4;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px; /* Базовый отступ, который больше НЕ МЕНЯЕТСЯ при наведении */
    transition: color 0.3s ease, text-shadow 0.3s ease; /* Плавность для нового эффекта тени */
    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ЖЕЛЕЗОБЕТОННЫЙ СБРОС ПОДЧЕРКИВАНИЯ ДЛЯ ТЕГА <a> */
.short-box a,
.short-box a:hover,
.short-box a:focus,
.short-box a:active {
    text-decoration: none !important;
    outline: none;
}

/* НОВЫЙ ЭФФЕКТ: Свечение и изменение цвета (текст не прыгает!) */
.short-box:hover .short-title {
    color: #80b435 !important; /* Убиваем синий цвет глобальной ссылки */
    text-shadow: 0 4px 10px rgba(128, 180, 53, 0.25); /* Мягкое, премиальное зеленое свечение */
}


/* ==========================================================================
   КНОПКА РЕДАКТИРОВАНИЯ (Растягивающаяся капсула - Бронебойная центровка)
   ========================================================================== */
.short-edit {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 36px;  
    height: 36px;
    border-radius: 18px; 
    background: #333e48; 
    z-index: 10;
    text-decoration: none;
    overflow: hidden; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Анимация ширины и цвета */
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, transform 0.1s ease;
}

/* Идеальная центровка иконки через line-height */
.short-edit i {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    line-height: 36px; /* Выравнивает ровно по вертикали */
    text-align: center; /* Выравнивает ровно по горизонтали */
    font-size: 16px;
    color: #ffffff;
    margin: 0;
    padding: 0;
}

/* Скрытый текст выстраивается сразу после иконки (left: 36px) */
.short-edit::after {
    content: "Редактировать";
    position: absolute;
    top: 0;
    left: 36px; 
    height: 36px;
    line-height: 36px; /* Выравнивает текст по вертикали */
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-10px); 
    transition: all 0.3s ease;
}

/*  ЭФФЕКТЫ ПРИ НАВЕДЕНИИ (HOVER) */

.short-edit:hover {
    width: 135px; /* Растягиваем фон */
    background: #ed6663; 
    box-shadow: 0 6px 12px rgba(237, 102, 99, 0.3);
}

.short-edit:hover::after {
    opacity: 1;
    transform: translateX(0); /* Текст плавно выезжает на место */
}

.short-edit:active {
    transform: translateY(1px); 
}

/* ==========================================================================
   ЗНАЧОК "НОВИНКА" (Объемная лента, огибающая правый край)
   ========================================================================== */
.short-status {
    position: absolute;
    top: 20px;       /* Смещаем аккуратно вниз от верхнего края */
    right: -8px;     /* МАГИЯ: Слегка выдвигаем за правый край карточки */
    z-index: 20;
    
    /* Сочный огненный градиент для привлечения внимания */
    background: linear-gradient(90deg, #f73434 0%, #ed6663 100%);
    
    /* Закругляем только левую часть, правая остается плоской */
    padding: 6px 12px 6px 15px;
    border-radius: 20px 0 0 20px; 
    
    /* Тень для объема самой плашки */
    box-shadow: -3px 4px 8px rgba(237, 102, 99, 0.3);
}

/* МАГИЯ 3D: Темный "загиб" ленты, уходящий под карточку */
.short-status::after {
    content: "";
    position: absolute;
    top: 100%;       /* Прилипает сразу под плашкой */
    right: 0;        /* Выравнивается по правому краю плашки */
    width: 0;
    height: 0;
    /* Рисуем маленький треугольник темно-красного цвета (тень загиба) */
    border-top: 8px solid #a82323; 
    border-right: 8px solid transparent;
}

/* Контейнер для текста и иконки */
.short-status-txt {
    display: flex;
    flex-direction: row-reverse; /* Огонек слева, текст справа */
    align-items: center;
    gap: 6px;
}

/* Текст "Naujas" */
.short-status-txt span {
    display: block;
    margin: 0;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 
    white-space: nowrap;
}

/* Иконка огонька */
.short-status-txt i {
    font-size: 16px; 
    color: #ffffff;
    margin: 0;
    line-height: 1;
    animation: firePulse 1.5s infinite alternate ease-in-out;
}

/* Ваша отличная анимация пульсации (оставляем без изменений) */
@keyframes firePulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    100% { transform: scale(1.15); opacity: 1; text-shadow: 0 0 8px rgba(255, 255, 255, 0.9); }
}

/* SHORTSTORY ADDITIVES
----------------------------------------------- */
.short-additives {width:100%; margin:15px 0 15px 0;}
.short-additives a {display:block;text-decoration:none;}
.short-additives .sa-box {display:flex;justify-content: flex-start;align-items: stretch;min-height:40px;border-radius: 3px;overflow:hidden;box-shadow:0 1px 2px 1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);-webkit-transition:all 300ms ease-out 0s;-moz-transition:all 300ms ease-out 0s;-ms-transition:all 300ms ease-out 0s;-o-transition:all 300ms ease-out 0s;transition:all 300ms ease-out 0s;}
.short-additives:nth-child(even) .sa-box {background-color:#faf9f9;}
.short-additives:nth-child(odd) .sa-box {background-color:#FFFFFF;}
.short-additives .sa-box:hover{box-shadow:0 4px 8px rgba(0, 0, 0, 0.08), 0 4px 4px rgba(0, 0, 0, 0.12);z-index:100;cursor:pointer;}
.short-additives .sa-box .sa-first {display:flex;justify-content: center;align-content: stretch; align-items: stretch; font-size:26px;color:#FFF; font-family: 'Fredericka+the+Great', sans-serif;width:100px;padding:0 10px 0 2px;position: relative;z-index: 1;}
.short-additives .sa-box .sa-first .sa-number {display:flex;justify-content: center;align-items: center;}
.short-additives .sa-box .sa-green {background-color:#80b435;position: relative;}
.short-additives:nth-child(even) .sa-box .sa-green:after {border-right: 20px solid #faf9f9;}
.short-additives:nth-child(odd) .sa-box .sa-green:after {border-right: 20px solid #FFF;}
.short-additives .sa-box .sa-green:after{
  content: '';
  position: absolute;
  right: 0;
  bottom:0;
  border: 100px solid transparent;
  border-right: 20px solid #FFF;
}
.short-additives .sa-box .sa-red {background-color:#ed6663;position: relative;}
.short-additives:nth-child(even) .sa-box .sa-red:after {border-right: 20px solid #faf9f9;}
.short-additives:nth-child(odd) .sa-box .sa-red:after {border-right: 20px solid #FFF;}
.short-additives .sa-box .sa-red:after{
  content: '';
  position: absolute;
  right: 0;
  bottom:0;
  border: 100px solid transparent;
  border-right: 20px solid #FFF;
}
.short-additives .sa-box .sa-orange {background-color:#f6a601;position: relative;}
.short-additives:nth-child(even) .sa-box .sa-orange:after {border-right: 20px solid #faf9f9;}
.short-additives:nth-child(odd) .sa-box .sa-orange:after {border-right: 20px solid #FFF;}
.short-additives .sa-box .sa-orange:after{
  content: '';
  position: absolute;
  right: 0;
  bottom:0;
  border: 100px solid transparent;
  border-right: 20px solid #FFF;
}
.short-additives .sa-box .sa-title{display:flex;align-items: center;width:50%;font-size:16px;text-decoration:none;padding:0 5px 0 10px;}
.short-additives .sa-box .sa-cat {display:flex;justify-content: flex-start;align-items: center;font-size:14px;width:30%;color:#8c9196;margin:0 5px 0 5px;}
.short-additives .sa-box .sa-cat i {font-size:16px;padding-right:5px;}


/* ==========================================================================
   ARTICLE CARDS GRID (Список статей в категории)
   ========================================================================== */

.article-card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    overflow: hidden; /* Обрезает углы картинки под радиус карточки */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eaeaea;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

/* Эффект наведения на всю карточку */
.article-card:hover {
    transform: translateY(-5px); /* Карточка слегка "всплывает" */
    box-shadow: 0 10px 25px rgba(0,0,0,0.08); /* Тень становится глубже */
    border-color: #dcdcdc;
}

/* Главная ссылка, растянутая на всю карточку */
.article-card-link {
    display: flex;
    flex-direction: column;
    height: 100%; 
    text-decoration: none !important; /* Убиваем глобальное подчеркивание */
    color: inherit;
}

/* 1. Картинка по всей ширине */
.article-card-image {
    width: 100%;
    height: 220px; /* Фиксируем высоту, чтобы сетка не ломалась */
    overflow: hidden;
    background: #f5f5f5; 
    position: relative;
}

.article-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* МАГИЯ UX: картинка не сплющивается, а идеально заполняет блок */
    transition: transform 0.5s ease;
    display: block;
}

/* Zoom картинки при наведении на карточку */
.article-card:hover .article-card-image img {
    transform: scale(1.08);
}

/* 2. Тело карточки */
.article-card-body {
    padding: 20px;
    flex-grow: 1; /* Растягивает блок, выталкивая "Skaityti toliau" в самый низ */
    display: flex;
    flex-direction: column;
}

/* Заголовок статьи */
.article-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 12px 0;
    line-height: 1.3;
    transition: color 0.2s ease;
    
    /* Ограничение заголовка 2-мя строками */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-card:hover .article-card-title {
    color: #80b435; /* Ваш фирменный зеленый */
}

/* Метаданные (Дата, Просмотры) */
.article-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 13px;
    color: #999999;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.article-card-meta i {
    color: #ccccca;
    margin-right: 5px;
}

/* 3. Улучшенный анонс текста (Короткое описание) */
.article-card-desc {
    font-size: 14px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 15px;
    
    /* МАГИЯ UX: Ограничение анонса ровно 3-мя строками с красивым троеточием в конце */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 4. Кнопка-индикатор внизу карточки */
.article-card-more {
    font-size: 13px;
    font-weight: 700;
    color: #80b435;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 15px 20px;
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
    margin-top: auto; /* Прижимает блок к самому низу карточки */
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s ease;
}

.article-card:hover .article-card-more {
    background: #f5faef; /* Очень светлый зеленый фон при наведении */
}

.article-card-more i {
    font-size: 16px;
    transition: transform 0.2s ease;
}

/* Стрелочка дергается вправо при наведении */
.article-card:hover .article-card-more i {
    transform: translateX(4px); 
}


/* SHORTSTORY RELATED 
----------------------------------------------- */
.short-preview {width:240px; margin:0 0 20px 0;padding:0 0 10px 0;color:#444444;border-bottom: 2px dashed #eaeaea;}
.short-preview:last-child {margin:0 0 20px 0;color:#444444;border-bottom: 0;}
.short-preview a{color:#444444;}
.short-preview a:hover{text-decoration:underline;}
.short-preview-title {font-size:16px;padding:0;font-weight:bold;}
.short-preview-title-center {font-size:16px;padding:0;font-weight:bold;text-align:center;}

.short-preview-date {font-size:14px;color:#ed6663;text-align:center;}

/* Базовый контейнер */
.short-preview-main-img {
    text-align: center;
}
/* Базовый контейнер */
.short-preview-img {
    display: block;
    cursor: pointer;
    text-align: center;
    position: relative;
    width: 180px;
    margin: 10px auto; /* Добавили отступ сверху для наглядности */
}

/* Стили самой картинки под "бумагу" */
.short-preview-img img {
    width: 180px; 
    height: 240px; 
    border: 1px solid #f5f5f5;
    padding: 10px;
    object-fit: cover; 
    object-position: top;
    display: block;
    /* Легкий кремовый оттенок бумаги и текстурный градиент */
    background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%);
    position: relative;
    z-index: 2;
}

/* Эффект приподнятых углов (тени под листом) */
.paper-effect::before, 
.paper-effect::after {
    content: "";
    position: absolute;
    width: 45%;
    height: 10px;
    bottom: 15px; /* Спрятаны под картинкой */
    background: transparent;
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3); /* Мягкая глубокая тень */
    z-index: 1;
    transition: all 0.3s ease-in-out;
}

/* Левый нижний угол тени */
.paper-effect::before {
    left: 10px;
    transform: rotate(-3deg);
}

/* Правый нижний угол тени */
.paper-effect::after {
    right: 10px;
    transform: rotate(3deg);
}

/* Эффект при наведении — лист "оживает" */
.paper-effect:hover::before {
    box-shadow: 0 15px 15px rgba(0, 0, 0, 0.4);
    transform: rotate(-5deg) scale(1.02);
}

.paper-effect:hover::after {
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.4);
    transform: rotate(5deg) scale(1.02);
}

/* Дополнительная тонкая рамка для ощущения стопки страниц */
.paper-effect img {
    box-shadow: 
        0 1px 1px rgba(0,0,0,0.1), 
        0 2px 2px rgba(0,0,0,0.05), 
        0 4px 4px rgba(0,0,0,0.05);
}

/* SHORTSTORY ADS
----------------------------------------------- */
.short-thumb-ads {width:33.333%; float:left; padding:0 15px 20px 15px;}
.short-box-ads {position:relative; background-color:#FFFFFF;border-radius:5px;}


/* ==========================================================================
   СОВРЕМЕННЫЕ ЯРЛЫКИ TAGS (Clip-Path & Flexbox)
   ========================================================================== */
.tags {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box; /* Защищает от вылезания за края на мобильных */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px; /* Аккуратный отступ между тегами */
    
    /* Пропускаем клики сквозь прозрачный контейнер, чтобы карточка товара оставалась кликабельной */
    pointer-events: none; 
}

/* Тело современного ярлыка */
.tags a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 4px 8px 4px 16px; /* 16px слева дают место под "носик" и дырочку */
    background: #ed6663;
    color: #ffffff;
    font-size: 9px;
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 2px;
    
    /* МАГИЯ: Идеально вырезает форму ценника. Щелей больше не будет! */
    clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 10px 100%, 0% 50%);
    transition: background 0.3s ease;
    
    /* Респонсивность: если тег ОЧЕНЬ длинный, он обрежется троеточием, а не сломает верстку */
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* Включаем кликабельность обратно только для самих кнопок-тегов */
    pointer-events: auto; 
}

/* "Дырочка" на ярлыке */
.tags a::before {
    content: "";
    position: absolute;
    left: 5px; /* Размещаем ровно внутри носика */
    top: 50%;
    transform: translateY(-50%); /* Идеальное центрирование по вертикали при любой высоте текста */
    width: 4px;
    height: 4px;
    background: #ffffff;
    border-radius: 50%;
}

/* Эффект при наведении */
.tags a:hover {
    background: #787a7d;
}

.alltags{	
	display:inline-block;
	width:100%;
	margin:0;
	padding:0;	
	}	
.alltags a{
	display:inline-block;
	height:24px;
	line-height:24px;
	margin:5px 0 5px 0;
	position:relative;
	font-size:14px;
	text-transform: uppercase;
	}	
.alltags a{
	margin-left:16px;
	padding:0 8px 0 10px;
	background:#80b435;
	color:#fff;
	text-decoration:none;
	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;	
	border-bottom-right-radius:4px;
	-moz-border-radius-topright:4px;
	-webkit-border-top-right-radius:4px;	
	border-top-right-radius:4px;	
	}	
.alltags a:before{
	content:"";
	float:left;
	position:absolute;
	top:0;
	left:-12px;
	width:0;
	height:0;
	border-color:transparent #80b435 transparent transparent;
	border-style:solid;
	border-width:12px 12px 12px 0;		
	}	
.alltags a:after{
	content:"";
	position:absolute;
	top:9px;
	left:0;
	float:left;
	width:6px;
	height:6px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	background:#f5f5f5;
	-moz-box-shadow:-1px -1px 2px #80b435;
	-webkit-box-shadow:-1px -1px 2px #80b435;
	box-shadow:-1px -1px 2px #80b435;
	}
.alltags a:hover{background:#787a7d;-webkit-transition:all 300ms ease-out 0s;-moz-transition:all 300ms ease-out 0s;-ms-transition:all 300ms ease-out 0s;-o-transition:all 300ms ease-out 0s;transition:all 300ms ease-out 0s;}	
.alltags a:hover:before{border-color:transparent #787a7d transparent transparent;-webkit-transition:all 300ms ease-out 0s;-moz-transition:all 300ms ease-out 0s;-ms-transition:all 300ms ease-out 0s;-o-transition:all 300ms ease-out 0s;transition:all 300ms ease-out 0s;}	

/* SIDE
----------------------------------------------- */
.side-box {width:260px; background: #fff; margin-bottom: 10px;}
.side-box-widget {width:260px; background: #fff;margin: 10px 0 10px 0;}
.side-top {font-size:22px; padding:10px; margin-bottom:10px; border-bottom:2px solid #f5f5f5; border-left:2px solid #80b435; color:#333e48;background-color:#FFF;position:relative;}
.side-body {display: flex;  flex-direction: column;justify-content: center;width:100%;padding:0 10px 10px 10px;}
.side-body-vote {padding:10px;}
.side-body ul li, .side-body-vote ul li {display: flex;margin:0 10px 10px 10px;min-height:18px;}
.side-body i {display: inline-block;font-size:40px;margin:0 10px 0 0;}
.side-body .side-align {text-align:center;}
.color-green {color: #80b435;}
.color-red {color: #ed6663;}

/* FOOTER
----------------------------------------------- */
.ft-copyright {margin:10px 0 0 0;padding:10px 0 0 0; font-size:14px;color:#666666;border-top:1px solid #3b3f47;}
/* 1. Контейнер ссылки: Flexbox для идеального выравнивания по центру */
.ft-menu a {
    color: #ccc;
    display: inline-flex;
    align-items: center;  
    gap: 6px;             /* Отступ между иконкой и текстом */
    padding: 1px 10px;
    text-decoration: none; /* Убираем стандартное подчеркивание со всей ссылки */
}

/* 2. Вертикальная линия между ссылками */
.ft-menu a + a {
    border-left: 1px solid #666;
}

/* 3. Иконка: убираем лишние отступы и выравниваем по необходимости */
.ft-menu a i {
    display: flex;
    align-items: center;
    line-height: 1;
    /* transform: translateY(-1px);  Раскомментируйте, если иконка все еще кажется смещенной */
}

/* 4. Цвет при наведении на всю ссылку */
.ft-menu a:hover {
    color: #FFF;
}

/* 5. Подчеркиваем ТОЛЬКО текст (span) при наведении на ссылку */
.ft-menu a:hover span {
    text-decoration: underline;
}

.counter {display:inline-block; height:31px; background-color:#111; position:absolute; right:0; bottom:20px; margin-right:2010px;}

/* ==========================================================================
   BOTTOM NAVIGATION (ПАГИНАЦИЯ) - СТИЛЬ CODEPEN (СКОШЕННАЯ ЛЕНТА)
   ========================================================================== */
.bottom-nav {
    display: flex;
    justify-content: center;
    padding: 2em 0;
    width: 100%;
    clear: both;
    margin-top: 1em;
}

.pagi-nav {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 15px; /* Идеальный отступ между стрелками и лентой */
}

/* --------------------------------------------------------------------------
   ЦЕНТРАЛЬНЫЕ ЦИФРЫ (Скошенные блоки)
   -------------------------------------------------------------------------- */
.navigation {
    display: flex;
    align-items: stretch;
}

.navigation a,
.navigation span {
    position: relative;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 50px !important;
    height: 50px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    color: #8b969c !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1;
    background: transparent !important;
    border: none !important;
    transition: color 0.3s ease;
}

/* Создаем скошенный фон ленты */
.navigation a::before,
.navigation span::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: transparent;
    border-right: 1px solid #d7dadb;
    transform: skewX(-20deg);
    transition: all 0.2s ease;
}

.navigation > *:first-child::before {
    border-left: 1px solid #d7dadb;
}

/* Эффекты наведения и активной страницы */
.navigation a:hover { color: #ffffff !important; }
.navigation a:hover::before { background-color: #80b435; border-right-color: #ffffff; }

.navigation span:not(.nav_ext) { color: #ffffff !important; cursor: default; }
.navigation span:not(.nav_ext)::before { background-color: #80b435; border-right-color: #ffffff; }

/* Троеточие */
.navigation span.nav_ext { width: 30px !important; letter-spacing: 2px; }
.navigation span.nav_ext::before { display: none; }


/* --------------------------------------------------------------------------
   КНОПКИ НАЗАД / ВПЕРЕД (Оптическая центровка и старый цвет)
   -------------------------------------------------------------------------- */
.pagi-nav .pprev,
.pagi-nav .pnext {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

/* Обертка (активная ссылка или неактивный спан) */
.pagi-nav .pprev a,
.pagi-nav .pnext a,
.pagi-nav .pprev span,
.pagi-nav .pnext span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    color: #8b969c !important; /* ВОЗВРАЩАЕМ СТАРЫЙ СЕРЫЙ ЦВЕТ */
    text-decoration: none !important;
    transition: transform 0.2s ease !important;
}

/* Сама иконка (с бронебойным выравниванием) */
.pagi-nav .pprev i,
.pagi-nav .pnext i {
    display: inline-block !important; 
    font-size: 26px !important;
    color: #8b969c !important; 
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* МАГИЯ ЦЕНТРОВКИ: Увеличили с 2px до 4px */
    transform: translateY(4px) !important; 
}

/* Эффекты при наведении */
.pagi-nav .pprev a:hover,
.pagi-nav .pnext a:hover {
    transform: scale(1.15) !important; /* Кнопка слегка увеличивается */
}

/* При наведении иконки становятся зелеными (для красоты и отклика) */
.pagi-nav .pprev a:hover i,
.pagi-nav .pnext a:hover i {
    color: #80b435 !important; 
}

/* ==========================================================================
   ЗАГОЛОВОК СТАТЬИ И МЕТА-ДАННЫЕ (fulltitle2)
   ========================================================================== */
.titlehead { 
    width: 100%; 
}

.fulltitle2 { 
    width: 100%; 
}

/* Главный заголовок (H1) */
.fulltitle2 h1 {
    font-size: 26px;
    text-transform: uppercase;
    line-height: 1.3;
    margin: 0 0 5px 0;
    color: #333;
    font-weight: 700;
}

/* Контейнер для мета-данных и кнопок "Поделиться" */
.fulltitleline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Позволит блокам красиво перенестись на мобильных */
    padding: 10px 0;
    margin-bottom: 10px;
}

/* Блок с датой, комментариями и просмотрами */
.fa-middleline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px; /* Современная замена старым padding-right для span */
    color: #a699a6;
    font-size: 14px;
}

/* Элементы мета-данных */
.fa-middleline span {
    display: inline-flex;
    align-items: center;
}

/* Иконки возле мета-данных (календарь, глаз, комментарии) */
.fa-middleline span i {
    color: #c0c6c9; /* Сделал чуть более контрастным, чем старый #dae1e4, для лучшей читаемости */
    font-size: 18px;
    margin-right: 6px;
}

/* Если в этот блок вернутся иконки "Поделиться" */
.shareline {
    margin-top: 5px;
}
/* FULL BOOKLET
----------------------------------------------- */

.fullbooklet { margin-bottom: 20px; width: 100%; min-width: 0; overflow-wrap: break-word; }
/* Защита контейнера полной статьи от схлопывания в 0 пикселей */
.full-article {
    width: 100%;
    min-width: 0;
    display: block;
}
.titlehead { display: flex; justify-content: space-between; width: 100%; }
.fulltitle { width: 100%; }

/* Заголовок статьи */
.full-h1 { 
    display: flex; 
    align-items: center; /* Центрируем иконку относительно текста */
    font-size: 28px; 
    text-transform: uppercase; 
    line-height: 1.2; 
    margin: 0 0 15px 0; 
    color: #333;
}
.full-h1 i { 
    color: #ed6663; 
    font-size: 28px; 
    margin-right: 10px; 
}

/* =========================================
   БЛОК С ДАТАМИ И ТАБАМИ
   ========================================= */

.topinfo, .topinfo-onlycurrent { margin: 0 0 15px 0; }

/* Сброс стилей для списков */
.tabs-nav { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; /* Отступ между текущим и прошлым каталогом */
}

/* Ссылки и текст внутри табов */
.tabs-nav a, .tabs-nav div { 
    display: inline-flex; 
    align-items: center; 
    font-size: 15px; 
    text-decoration: none; 
    color: #444; 
    transition: opacity 0.2s;
}
.tabs-nav a:hover { opacity: 0.8; }

/* Бейдж для "Galioja" (Текущий каталог) */
.date span { 
    background-color: #80b435; 
    color: #ffffff; 
    padding: 4px 10px; 
    border-radius: 4px; 
    margin-left: 8px; 
    font-weight: 600; 
}

/* Бейдж для "Ankstesnis leidimas" (Прошлый каталог) */
.previous-date { color: #888; }
.previous-date i { 
    color: #80b435; 
    font-size: 18px; 
    margin-right: 8px; 
}
.previous-date span { 
    background-color: #f0f0f0; 
    color: #666; 
    padding: 4px 10px; 
    border-radius: 4px; 
    margin-left: 8px; 
    font-weight: 500;
}

/* =========================================
   ТАБЫ (ПЕРЕКЛЮЧАТЕЛИ КАТАЛОГОВ)
   ========================================= */
.tabs-nav { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}

/* Общий стиль для ссылок табов */
.tab-link { 
    display: inline-flex; 
    align-items: center; 
    font-size: 15px; 
    text-decoration: none; 
    color: #444; 
}
.tab-link i { 
    color: #80b435; 
    font-size: 18px; 
    margin-right: 8px; 
}

/* БАЗОВЫЙ СТИЛЬ БЕЙДЖА (с плавной анимацией) */
.tab-link span { 
    padding: 4px 10px; 
    border-radius: 4px; 
    margin-left: 8px; 
    font-weight: 600; 
    transition: background-color 0.3s ease, color 0.3s ease; /* Магия плавности */
}

/* ❌ НЕАКТИВНЫЙ ТАБ (Серый бейдж) */
.tab-link:not(.active) span { 
    background-color: #f0f0f0; 
    color: #666; 
}

/* ✅ АКТИВНЫЙ ТАБ (Зеленый бейдж) */
.tab-link.active span { 
    background-color: #80b435; 
    color: #ffffff; 
}

/* =========================================
   ГАЛЕРЕЯ КАТАЛОГА (Оставлено, как вы просили)
   ========================================= */
.booklet-gallery { 
    order: 2; 
    background-color: #ffffff; 
    text-align: center; 
    padding: 0 0 20px 0; 
}
.booklet-gallery ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}
.booklet-gallery ul li { margin: 0 0 15px 0; }
.booklet-gallery ul li img { 
    max-width: 100%; 
    height: auto; /* Делаем картинки адаптивными */
    border: 1px solid #f5f5f5; 
    border-radius: 4px; /* Легкое современное скругление */
    margin-bottom: 20px;
}

/*--- RATING STARS ---*/
.rating, .unit-rating { width: 165px; height: 33px; padding:0 0 0 10px;}
	.rating { font-size: 11px;}
	.unit-rating, .unit-rating li a:hover, .unit-rating li.current-rating {
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAACKBAMAAAAnGmX8AAAALVBMVEX///+RkZH+12L/w0//7cP/5aj+24X/+u7/9d2tra3Jycne3t7/zGn5+fnx8fHkdmbhAAACEUlEQVRIx+2UuUsDQRTGF+8bp4yiyKDRUhiNFikW73LxwsIiRETL4F2KilpYmFYQklIE0VYbIQQsY2kjWkbwfzDjzvhm3rzCJiCSr1p+SfY7HsT7w2rYp3ltQPO6HpqPDdA8GSVxPeckr+HcJ205T1D8gHPSeJbzPopz7hrvnk4sSL4wcboLdIpb6v0ZxuY+LGB/HRY2ubn2MeB1a5ukxtEUGkEp4bSVchtvhLzfORaE/NV7VCDnlFzJPSKPJmEcczpffhg4x13zvB2nVxXvDdP2oKNHU+FOAyi+r/xRgWn9sOVVRKv8/ycJmlc/0nx8iOYrMRLXC5EibYUIKN4iBGl8KMQoaSsEaZwTIo7Z3tHkoihpdX7mBOiysJSHhJYCWMDExho1JjfXPgP8ZG2T0zhub7SjecJpK+U23gz5iHMsHRJpLuTDzmoqjnNEJRXTbByTv/Gd48YD+WHgHHddtsMnrhb5MO0gih/b/7ZfQQWWA+WPCizph22vojKr7Y3mTec0L7bT/K6T5ukIbctYgbRlLEPxRsbOSVvGuimeZYw0ZiVh9vpwfyX5xfXDJ1CJDHVAQlOQtvXOxMYazSa/9UDvGqIOrWmNI/ZxXjS/xCOrjHjSZ3g7Wg1CmsZZ6Eq9P1LAR1RCXDaOpKGtOV2mGUaD48pGRXliFL8jTNuF4odB2tKoQDaj/FGBG/3w4f0LfQHtX5JXyZBVcwAAAABJRU5ErkJggg==);
		-webkit-background-size: 33px auto; background-size:  33px auto;border-radius:3px;
	}
	.unit-rating {
		list-style: none;
		margin: 0; padding: 0;
		position: relative;
		background-position: 0 -66px;
	}
	.unit-rating li {
		text-indent: -90000px;
		padding: 0; margin: 0;
		float: left;
	}
	.unit-rating li a {
		display: block;
		width: 33px; height: 33px;
		text-decoration: none;
		border: 0 none !important;
		text-indent: -9000px;
		z-index: 17;
		position: absolute;
		padding: 0;
	}
	.unit-rating li a:hover {
		background-position: 0 -33px;
		z-index: 2;
		left: 0;
	}
	.unit-rating a.r1-unit { left: 0; }
	.unit-rating a.r1-unit:hover { width: 33px; }
	.unit-rating a.r2-unit { left: 33px; }
	.unit-rating a.r2-unit:hover { width: 66px; }
	.unit-rating a.r3-unit { left: 66px; }
	.unit-rating a.r3-unit:hover { width: 99px; }
	.unit-rating a.r4-unit { left: 99px; }
	.unit-rating a.r4-unit:hover { width: 132px; }
	.unit-rating a.r5-unit { left: 132px; }
	.unit-rating a.r5-unit:hover { width: 165px; }
	.unit-rating li.current-rating {
		background-position: 0 0;
		position: absolute;
		height: 33px;
		display: block;
		text-indent: -9000px;
		z-index: 1;
		padding: 0px;
	}

	.ratingplus {
		color: #70bb39;
	}

	.ratingminus {
		color: red;
	}

	.ratingzero {
		color: #6c838e;
	}
		

.buklet_adv {display:block; text-align: center; padding: 20px 0 20px 0;}
.booklet-content {display:flex;flex-direction: column;}
.booklet-content .infograph {width:100%;text-align:center;padding-bottom:10px;}
.booklet-content .infograph img{width:100%;}
.booklet-txt {order: 4;margin: 0;}
.booklet-txt .booklet-block  {display:block;}
.booklet-txt .booklet-block .add-desc {overflow:hidden;}
/* ==========================================================================
   ТИПОГРАФИКА СТАТЕЙ И ОПИСАНИЙ (SEO & UX Оптимизация)
   ========================================================================== */
.booklet-txt .booklet-block .desc,
.booklet-txt .booklet-block .add-desc {
    color: #444444;
    font-size: 16px;
    line-height: 1.65; /* Идеальная высота строки для чтения длинных текстов */
    word-wrap: break-word;
}

/* ==========================================================================
   КАРТОЧКА ОПИСАНИЯ БУКЛЕТА (SEO + PageSpeed + Адаптивность)
   ========================================================================== */
.booklet-txt .booklet-block .desc {
    background: #ffffff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); /* Мягкая современная тень */
    border: 1px solid #eaeaea;
    margin-bottom: 25px;
    display: block; /* Убиваем flex, чтобы заработало обтекание текстом */
}

/* Обертка картинки (выравнивание слева) */
.booklet-txt .booklet-block .desc .booklet-thumb {
    float: left; /* Включаем обтекание текстом справа */
    width: 240px; /* Фиксируем ширину (защита от скачков CLS для PageSpeed) */
    margin: 0 25px 15px 0; /* Отступы справа и снизу от текста */
    padding: 0;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Красивая тень под картинкой */
    background: #f5f5f5;
    z-index: 2;
}

/* Сама картинка */
.booklet-txt .booklet-block .desc .booklet-thumb img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Обертка текста */
.booklet-txt .booklet-block .desc .booklet-description {
    color: #444444;
    font-size: 18px;
    line-height: 1.6;
}

/* Основной стиль абзаца */
.booklet-txt .booklet-block .desc .booklet-description > p:first-child {
    background: #ffffff;
    
    /* Тонкие рамки сверху и снизу, толстые зеленые по бокам */
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    border-left: 10px solid #80b435; 
    border-right: 10px solid #80b435;
    
    border-radius: 0; /* Строгие прямые (прямоугольные) углы */
    padding: 16px 20px;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 30px;
    display: flow-root;
    
    /* Начальная легкая тень (блок лежит на плоскости) */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

}


/* Стили для акцентного жирного текста */
.booklet-txt .booklet-block .desc .booklet-description > p:first-child b {
    color: #ed6663;
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    background: rgba(237, 102, 99, 0.1); 
    padding: 2px 6px;
    border-radius: 4px;
}

/* АДАПТИВНОСТЬ: Мобильные устройства */
@media screen and (max-width: 768px) {
    .booklet-txt .booklet-block .desc {
        padding: 20px 15px;
    }
    
    /* Отключаем обтекание, ставим картинку по центру над текстом */
    .booklet-txt .booklet-block .desc .booklet-thumb {
        float: none;
        display: block;
        margin: 0 auto 20px auto;
        width: 200px; /* Немного уменьшаем саму картинку на смартфонах */
    }
    
}

/* --- ЗАГОЛОВКИ (Иерархия и правило близости) --- */
.booklet-txt .booklet-block .desc h2,
.booklet-txt .booklet-block .add-desc h2 {
    color: #ed6663;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    margin: 40px 0 15px 0; /* Большой отступ сверху, чтобы отделиться от прошлого блока */
}

.booklet-txt .booklet-block .desc h3,
.booklet-txt .booklet-block .add-desc h3 {
    color: #333333;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin: 35px 0 12px 0;
}

/* Убираем огромный отступ, если заголовок идет самым первым в тексте */
.booklet-txt .booklet-block .desc h2:first-child,
.booklet-txt .booklet-block .add-desc h2:first-child,
.booklet-txt .booklet-block .desc h3:first-child,
.booklet-txt .booklet-block .add-desc h3:first-child {
    margin-top: 0;
}

/* --- АБЗАЦЫ --- */
.booklet-txt .booklet-block .desc p,
.booklet-txt .booklet-block .add-desc p {
    margin: 0 0 20px 0; /* Четкий ритм: отступы делаем только снизу */
}

.booklet-txt .booklet-block .desc p:last-child,
.booklet-txt .booklet-block .add-desc p:last-child {
    margin-bottom: 0;
}

/* --- ЦИТАТЫ (Blockquote) --- */
.booklet-txt .booklet-block .quote,
.booklet-txt .booklet-block blockquote { 
    margin: 25px 0;
    padding: 20px 25px;
    background: #f9fbfe; /* Очень легкий голубой оттенок для свежести */
    border-left: 4px solid #54afda; /* Аккуратная линия вместо "жирной" 8px */
    border-radius: 0 8px 8px 0;
    color: #555555;
    font-size: 17px;
    font-style: italic;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02); /* Едва заметная современная тень */
}

.booklet-txt .booklet-block .quote p,
.booklet-txt .booklet-block blockquote p {
    margin-bottom: 0; /* Внутри цитаты отступы берет на себя padding */
}

/* Водяной знак кавычек на фоне цитаты */
.booklet-txt .booklet-block .quote::before,
.booklet-txt .booklet-block blockquote::before {
    content: "\e977"; /* Иконка кавычек из вашего шрифта iconfont */
    font-family: "iconfont";
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    color: rgba(84, 175, 218, 0.15); /* Полупрозрачные большие кавычки */
    font-style: normal;
}

/* --- НЕНУМЕРОВАННЫЕ СПИСКИ (UL) --- */
.booklet-txt .booklet-block .desc ul,
.booklet-txt .booklet-block .add-desc ul { 
    margin: 0 0 20px 0;
    padding: 0;
    display: flow-root;
}

.booklet-txt .booklet-block .desc ul li,
.booklet-txt .booklet-block .add-desc ul li {
    list-style: none;
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
    line-height: 1.6;
}

/* Элегантный зеленый маркер с легким ореолом */
.booklet-txt .booklet-block .desc ul li::before,
.booklet-txt .booklet-block .add-desc ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px; /* Центрируем строго по первой строке текста */
    width: 7px;
    height: 7px;
    background-color: #80b435;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(128, 180, 53, 0.2);
}

/* --- НУМЕРОВАННЫЕ СПИСКИ (OL) --- */
.booklet-txt .booklet-block .desc ol,
.booklet-txt .booklet-block .add-desc ol {
    list-style: none; 
    counter-reset: custom-counter;
    margin: 0 0 20px 0;
    padding: 0;
    display: flow-root;
}

.booklet-txt .booklet-block .desc ol li,
.booklet-txt .booklet-block .add-desc ol li {
    position: relative;	
    padding-left: 36px;
    margin-bottom: 12px;
    line-height: 1.6;
}

/* Красивые кружочки с цифрами */
.booklet-txt .booklet-block .desc ol li::before,
.booklet-txt .booklet-block .add-desc ol li::before {
    counter-increment: custom-counter;
    content: counter(custom-counter); 
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    background: #54afda;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    line-height: 24px;
    border-radius: 50%;
}

.booklet-txt .booklet-block .add-desc {border:3px dashed #FFF;padding: 20px;}
.booklet-txt .booklet-block .add-desc2 {margin: 10px 0 20px 0;line-height:36px;}
.table-wrap h2 {font-size:26px;font-weight: 700;line-height:26px;padding: 0 0 20px 0;}
.table-wrap {
  text-align: center;
  display: inline-block;
  background-color: #e7e7e7;
  padding: 1rem 2rem 2rem 2rem;
  margin:10px 0 0 0;
  color: #444;
  width: 100%;
}

.article-table,
.article-table tr,
.article-table td {
    height: auto !important;
}
 
.booklet-txt .booklet-block .desc table {
    display: block; /* МАГИЯ: разрешает таблице скроллиться внутри себя */
    width: 100%;
    max-width: 100%;
    overflow-x: auto; /* Появится горизонтальный скролл на мобильных */
    -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
    border-collapse: collapse;
    margin: 25px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #dae1e4;
}

/* Защита огромных картинок от разрыва макета статьи */
.booklet-txt .booklet-block .desc img {
    max-width: 100% !important;
    height: auto !important;
}

  /* Стили для ячеек */
.booklet-txt .booklet-block .desc table td {
    padding: 16px 20px;
    border-bottom: 1px solid #dae1e4;
    border-right: 1px solid #dae1e4;
    vertical-align: middle;
    line-height: 1.5;
  }
  
  /* Убираем рамку у последних ячеек, чтобы не двоилась с обводкой таблицы */
.booklet-txt .booklet-block .desc table td:last-child {
    border-right: none;
  }
.booklet-txt .booklet-block .desc table tr:last-child td {
    border-bottom: none;
  }

  /* Стилизация первой строки (заголовка) */
.booklet-txt .booklet-block .desc table tr:first-child {
    background-color: #f8f9fa; /* Светло-серый фон для шапки */
  }
  
.booklet-txt .booklet-block .desc table tr:first-child td {
    border-bottom: 2px solid #dae1e4; /* Более четкая линия под шапкой */
    text-transform: uppercase;
    font-size: 14px !important;
    letter-spacing: 0.5px;
  }

  /* Зебра (чередование цветов строк для удобства чтения) */
.booklet-txt .booklet-block .desc table tr:nth-child(even) {
    background-color: #fcfcfc;
  }

  /* Эффект при наведении курсора на строку */
.booklet-txt .booklet-block .desc table tr:not(:first-child):hover {
    background-color: #f1f5f9;
    transition: background-color 0.2s ease;
  }


/* 1. Блокируем прыжки кнопок при загрузке шрифта иконок */
ul#gallery-tabs-nav {
    min-height: 40px; 
}
i[class^="icon-"] {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    vertical-align: middle;
}

/* 2. Удерживаем контейнер при переключении AJAX-вкладок */
.gallery-tabs-container {
    min-height: 600px; 
}

/* 3. Элементы списка */
.xfieldimagegallery li {
    width: 100%; 
    position: relative; /* Обязательно! Чтобы лупа привязалась к картинке */
    display: block;
    margin-bottom: 10px;
    overflow: hidden; /* Чтобы пульсация не вылезала за пределы рамки */
    margin-bottom: 10px;
}

/* 4. ФИКС ОБЛОЖКИ (CLS = 0) */
img[itemprop="contentUrl url"] {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.41; 
    display: block;
    background-color: #f4f4f4;
}

/* 5. ФИКС ГАЛЕРЕИ (Броня от скриптов ленивой загрузки) */
.xfieldimagegallery li img.zoom {
    width: 100%;
    height: auto;
    /* Волшебное свойство: держит каркас, даже если JS удалил width и height */
    aspect-ratio: auto 1 / 1.41; 
    display: block;
    background-color: #f4f4f4;
}


/* 2. Стили самой иконки-лупы (создаем псевдоэлемент) */
.xfieldimagegallery li::after {
    /* Используем иконку из вашего шрифта. В FontAwesome лупа часто имеет код '\f002'.
       Если у вас другой шрифт, замените код в content или используйте картинку. */
    content: "\e93b"; /* Код лупы (search) для FontAwesome. Попробуйте подобрать свой. */
    font-family: "iconfont"; /* Укажите ваш шрифт иконок */
    font-weight: 900;
    
position: absolute;
    top: 15px; 
    
    /* МАГИЯ ЗДЕСЬ: Убрали right, добавили точное центрирование по left */
    left: calc(50% - 22px); 
    
    z-index: 10;
    
    /* Размеры (если будете их менять, не забудьте поменять и цифру 22px выше) */
    width: 50px;
    height: 50px;
    
    background-color: rgba(0, 0, 0, 0.4);
    color: rgba(255, 255, 255, 0.5); /* Белый цвет с прозрачностью 70% */
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    cursor: pointer;
    pointer-events: none;
    
    animation: zoom-pulse 2s infinite;
}

/* 3. Описание анимации пульсации (Pulse effect) */
@keyframes zoom-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
        transform: scale(1);
    }
    70% {
        /* Создаем расширяющееся кольцо вокруг */
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
        transform: scale(1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        transform: scale(1);
    }
}

/* 4. Необязательно: Скрываем лупу на больших экранах, если там это не преимущество */
@media (min-width: 1024px) {
    .xfieldimagegallery li::after {
        display: none;
    }
}

/* ==========================================================================
   СЕКЦИЯ ВОПРОСОВ И ОТВЕТОВ / FAQ (Современный SEO/UX дизайн)
   ========================================================================== */
.faq-section {
    margin: 40px 0 20px 0;
    padding-top: 25px;
    border-top: 2px dashed #eaeaea; /* Пунктирная линия, отделяющая FAQ от верхнего текста */
}

/* Главный заголовок блока (H2) */
.faq-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 25px;
    position: relative;
}

/* Карточка конкретного вопроса-ответа */
.faq-item {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-left: 4px solid #80b435; /* Фирменная зеленая полоска слева */
    border-radius: 6px;
    padding: 20px 25px;
    margin-bottom: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02); /* Очень легкая, современная тень */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-left-color 0.2s ease;
}

/* Эффект при наведении курсора (карточка "всплывает") */
.faq-item:hover {
    transform: translateY(-2px); /* Приподнимаем на 2 пикселя вверх */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.06); /* Усиливаем тень */
    border-left-color: #ed6663; /* Зеленая полоска меняет цвет на акцентный красный */
}

/* Сам вопрос (H3) внутри карточки */
.faq-item h3 {
    font-size: 18px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 12px 0;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
}

/* Круглая иконка со знаком вопроса (?) перед текстом вопроса */
.faq-item h3::before {
    content: "?";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Запрещаем иконке сплющиваться */
    width: 28px;
    height: 28px;
    background: #f5faef; /* Бледно-зеленый фон кружочка */
    color: #80b435;
    font-size: 18px;
    font-weight: 900;
    border-radius: 50%;
    margin-right: 12px;
    margin-top: -2px; /* Легкая корректировка по высоте */
}

/* Текст ответа (абзац) */
.faq-item p {
    margin: 0 0 0 40px; /* Смещаем текст вправо, чтобы он выровнялся с текстом вопроса, а не с иконкой */
    color: #555555;
    font-size: 15px;
    line-height: 1.65;
}

/* Адаптация для смартфонов */
@media screen and (max-width: 576px) {
    .faq-item {
        padding: 15px; /* Немного уменьшаем внутренние отступы карточки */
    }
    .faq-item p {
        margin-left: 0; /* На мобилках текст ответа будет занимать всю ширину для удобства чтения */
        margin-top: 10px;
    }
}

/* ==========================================================================
   АВТОМАТИЧЕСКИЙ FAQ ДЛЯ СТАТЕЙ ИЗ РЕДАКТОРА (<dl> списки)
   ========================================================================== */
.fulldescription dl {
    margin: 30px 0;
    padding: 0;
}

/* Карточка Вопроса */
.fulldescription dt {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-left: 4px solid #80b435;
    border-radius: 6px;
    padding: 18px 45px 18px 20px; /* 45px справа под плюсик */
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    cursor: pointer;
    position: relative;
    font-size: 18px;
    font-weight: 700;
    color: #333333;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

/* Очищаем лишнюю жирность, если редактор добавил <strong> */
.fulldescription dt strong, 
.fulldescription dt b { font-weight: inherit; }

/* Эффект при наведении (всплытие) */
.fulldescription dt:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.06);
    border-left-color: #ed6663;
}

/* Круглая иконка (?) перед вопросом */
.fulldescription dt::before {
    content: "?";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: #f5faef;
    color: #80b435;
    font-size: 18px;
    font-weight: 900;
    border-radius: 50%;
    margin-right: 15px;
}

/* Плюсик (+) справа */
.fulldescription dt::after {
    content: "+";
    position: absolute;
    right: 20px;
    font-size: 24px;
    color: #80b435;
    transition: transform 0.3s ease;
}

/* АКТИВНОЕ СОСТОЯНИЕ ВОПРОСА (Когда открыт) */
.fulldescription dt.active {
    border-left-color: #ed6663;
    border-bottom-color: transparent;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
    transform: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

/* Меняем плюсик на минус (-) */
.fulldescription dt.active::after {
    content: "-";
    color: #ed6663;
    transform: rotate(180deg);
}

/* Карточка Ответа */
.fulldescription dd {
    display: none; /* Скрыт по умолчанию */
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-top: none;
    border-left: 4px solid #ed6663;
    border-radius: 0 0 6px 6px;
    padding: 0 25px 20px 63px; /* Выравниваем текст под вопросом */
    margin: 0 0 15px 0;
    color: #555555;
    font-size: 15px;
    line-height: 1.65;
    animation: fadeInFaq 0.3s ease;
}

/* Открываем ответ, если вопрос активен */
.fulldescription dt.active + dd {
    display: block;
}

/* Адаптивность для смартфонов */
@media screen and (max-width: 576px) {
    .fulldescription dd { padding: 0 15px 20px 15px; }
}

/* ==========================================================================
   ЭФФЕКТЫ РАЗВОРАЧИВАНИЯ (АККОРДЕОН)
   ========================================================================== */

/* Указываем, что на заголовок можно кликать */
.faq-item h3 {
    cursor: pointer; 
    align-items: center;
}

/* Добавляем плюсик (+) в правой части карточки */
.faq-item h3::after {
    content: "+";
    margin-left: auto; /* Прижимает плюсик к правому краю */
    font-size: 24px;
    color: #80b435;
    transition: transform 0.3s ease; /* Плавная анимация вращения */
}

/* Когда карточка открыта (active), меняем плюсик на минус (-) и красим в красный */
.faq-item.active h3::after {
    content: "-";
    color: #ed6663;
    transform: rotate(180deg); /* Крутим иконку при открытии */
}

/* Скрываем текст ответа по умолчанию */
.faq-item p {
    display: none;
    animation: fadeInFaq 0.3s ease; /* Плавное появление текста */
}

/* Показываем текст ответа, если у карточки есть класс active */
.faq-item.active p {
    display: block;
}

/* Анимация выплывания текста ответа сверху вниз */
@keyframes fadeInFaq {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.redlink a {color:#ed6663;}
.additives-country-top {margin: 30px 0 0 0;}
.additives-flag div {display: inline-block;background:url(../images/additives/flags.png) no-repeat;}
.additives-flag .eu {width:50px;height:38px;background-position:0 0;}
.additives-flag .usa {width:50px;height:38px;background-position: -50px 0;}
.additives-flag .rus {width:50px;height:38px;background-position: -100px 0;}
.additives-flag .au {width:50px;height:38px;background-position: -150px 0px;}
.additives-flag .ca {width:50px;height:38px;background-position: -200px 0;}
.additives-eu-ban {padding-top:5px;color:#ed6677; font-size:12px;}
.additives-rating {display:flex;align-items:center;justify-content:center;}
.screenshot {margin-top: 15px;}
.screenshot i {margin: 0 10px 0 0;color:#ed6663;}
.screenshot h2 {font-size:26px;font-weight: 700;line-height:32px;padding: 10px 0 10px 0;}
.screenshot ul {list-style-type:none; display: flex; flex-flow: row wrap; justify-content:center;}
.screenshot ul li { margin: 5px; padding: 5px;  align-items: center; cursor:pointer;}
.buklet-rating {display:flex;justify-content:center;align-items:center;margin: 20px 0 0 0;}
.buklet-rating .vote-num {padding: 0 0 0 20px;}
.embed-link {margin-top: 15px;}
.screenshot h3 {font-size:24px;font-weight: 700;line-height:32px;padding: 10px 0 10px 0;}




/* ---- ZOOM ---*/

.glass {
  width: 175px;
  height: 175px;
  position: absolute;
  border-radius: 50%;
  cursor: crosshair;
  
  /* Создание эффекта стекла */
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25), 
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  
  /* Изначально скрыто */
  display: none;
}

/*--- ADDITIVES CATEGORIES  ---*/

.additives-category a{text-decoration:none;color:#444444;}
.additives-category .ac-box {
  width: 100%;
  border-radius:3px;
  height: 100px;
  margin: 20px auto;
  background: linear-gradient( 160deg, #FFF 50%, transparent 50.2%), url(../images/additives/catbg.jpg) no-repeat right top / cover;box-shadow:0 1px 2px 1px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.16);-webkit-transition:all 300ms ease-out 0s;-moz-transition:all 300ms ease-out 0s;-ms-transition:all 300ms ease-out 0s;-o-transition:all 300ms ease-out 0s;transition:all 300ms ease-out 0s;}
.additives-category .ac-green {border-bottom:6px solid #80b435;}
.additives-category .ac-orange {border-bottom:6px solid #ffba38;}
.additives-category .ac-red {border-bottom:6px solid #ed6663;}
.additives-category .ac-blue {border-bottom:6px solid #54b0df;}
.additives-category .ac-box:hover{box-shadow:0 4px 8px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.25);z-index:100;cursor:pointer;}
.additives-category .ac-box .ac-title {display: flex; justify-content: space-between; align-content: center; align-items: center;height: 100px;}
.additives-category .ac-box .ac-title .ac-txt {background: #FFF;color:#54b0df;opacity: 0.9;font-size: calc(0.6em + 2vw); white-space: nowrap;font-family: 'Fredericka the Great', sans-serif;font-weight:700;padding:0 7px;margin: 0 5%;box-shadow: 1px 1px 2px rgba(0,0,0,0.3);}
.additives-category .ac-box .ac-title .ac-txt2 {margin: 0 5%;font-size: calc(0.3em + 1vw);}

	

/* TOC ----------------------------------------------- */
.toc {order: 1;position:relative;opacity:0.9;}
.tocpages {display:inline-block;position:absolute;top:0px;background:#FFF;width: 100%;z-index: 9999;border-bottom:1px solid #e5e5e5;}
.tocpages-fix {position: fixed;z-index: 9999;top: 0;}
.tocpages ul {list-style-type:none;text-align:center;}
.tocpages li {display:inline-block;margin:5px 5px 5px 5px;}
.tocpages li a {display:inline-block;color:#FFF;background:#54afda;font-size:14px;width:24px; height:24px;border:2px solid #54afda;border-radius:2px;}
.tocpages li a:hover {color:#54afda;background:#FFF;-moz-transition:all 0.2s linear 0s;-ms-transition:all 0.2s linear 0s;-o-transition:all 0.2s linear 0s;-webkit-transition:all 0.2s linear 0s;transition:all 0.2s linear 0s;text-decoration:none;}

/* ==========================================================================
   COMMENTS BLOCK
   ========================================================================== */
.full-comments { padding: 20px 0 0 0; }

/* Линия с рейтингом и кнопкой комментариев */
.comm-tline { 
    display: flex; 
    align-items: center; 
    padding: 0 0 15px 0; 
    border-bottom: 1px solid #eaeaea; 
}

/* МАГИЯ: Заставляем кнопку всегда отталкиваться вправо */
.comm-tline .addcomments-btn {
    margin-left: auto;
}

/* Кнопка "Komentuoti" */
.addcomments-btn button {
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; color: #ffffff; font-size: 14px;
    padding: 10px 20px; border: none; border-radius: 4px;
    background: #ed6663; box-shadow: inset 0 -4px rgba(0,0,0,0.15);
    cursor: pointer; transition: background 0.2s, transform 0.1s;
}
.addcomments-btn button:hover { background: #e05552; }
.addcomments-btn button:active { box-shadow: inset 0 -2px rgba(0,0,0,0.15); transform: translateY(2px); }
.addcomments-btn button i { font-size: 20px; margin-right: 8px; }

/* ==========================================================================
   ADD COMMENT FORM
   ========================================================================== */
.addcomm-form { margin: 20px 0; }

/* Соцсети и разделитель */

/* =========================================
   КНОПКА АВТОРИЗАЦИИ GOOGLE
   ========================================= */

/* Контейнер кнопки занимает всю доступную ширину */
.button-social-links {
    width: 100%;
    margin: 10px 0;
}

/* Сама ссылка (Делаем кликабельной на 100% ширины и высоты) */
.button-social-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 15px; /* Внутренние отступы задают высоту кликабельной зоны */
    background-color: #ffffff; /* Белый фон */
    color: #444444; /* Темно-серый текст */
    font-size: 16px;
    font-weight: 500;
    text-decoration: none !important; /* Убираем подчеркивание жестко */
    border: 1px solid #dcdcdc; /* Легкая серая обводка, чтобы белая кнопка не сливалась с белым фоном сайта */
    border-radius: 4px; /* Небольшой радиус скругления */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Иконка внутри кнопки */
.button-social-links a i {
    font-size: 20px;
    margin-right: 10px;
    color: #ea4335; /* Фирменный цвет Google для иконки (по желанию можно поменять на #444) */
}

/* Эффект при наведении (hover) и нажатии (active) */
.button-social-links a:hover,
.button-social-links a:active {
    background-color: #f2f2f2; /* Светло-серый фон */
    border-color: #cccccc; /* Чуть темнеет рамка */
}

.desktop-google-btn {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto; /* Центрируем кнопку, если она находится в широком блоке */
}

.logintips { display: flex; align-items: center; text-align: center; color: #999; margin: 15px 0; }
.logintips::before, .logintips::after { content: ''; flex: 1; border-bottom: 1px solid #eee; }
.logintips::before { margin-right: 10px; } .logintips::after { margin-left: 10px; }

/* Инпуты для неавторизованных (Flexbox Grid) */
.addcomments-inputs { display: flex; flex-direction: column; gap: 15px; margin-bottom: 15px; }
.input-wrap { width: 100%; }

@media (min-width: 576px) {
    .addcomments-inputs { flex-direction: row; }
}

.addcomments-inputs input, .addcomments-textarea textarea {
    width: 100%; background: #faf8f8; color: #333; font-size: 16px;
    border: 1px solid #9ac55d; border-radius: 4px; padding: 12px 15px; 
    box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}
.addcomments-textarea textarea { resize: vertical; min-height: 100px; margin-bottom: 15px; }
.addcomments-inputs input:focus, .addcomments-textarea textarea:focus {
    outline: none; border-color: #80b435; box-shadow: 0 0 0 3px rgba(128,180,53,0.2);
}

/* Кнопка "Siųsti" */
.addcomments-send button {
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; color: #ffffff; font-size: 15px;
    padding: 12px 25px; border: none; border-radius: 4px;
    background: #72c8f1; box-shadow: inset 0 -4px rgba(0,0,0,0.15);
    cursor: pointer; transition: background 0.2s, transform 0.1s;
}
.addcomments-send button:hover { background: #54afda; }
.addcomments-send button:active { box-shadow: inset 0 -2px rgba(0,0,0,0.15); transform: translateY(2px); }
.addcomments-send button i { font-size: 20px; margin-right: 8px; }

/* Подключение специфичных иконок для комментариев */
.icon-feather-pointed:before {
    content: "\e92c";
}

.icon-paper-plane:before {
    content: "\e926";
}

/* Небольшая корректировка отступов, чтобы иконка не прилипала к тексту */
.addcomments-btn button i,
.addcomments-send button i {
    font-size: 20px;
    margin-right: 8px;
    font-style: normal; /* На всякий случай сбрасываем курсив браузера */
}
/* ==========================================================================
   COMMENT ITEM
   ========================================================================== */
.comments { 
    display: flex; margin: 20px 0 0 0; padding: 15px; 
    border-radius: 4px; border-left: 5px solid #80b435; 
    background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
}
.comm-avatar { margin-right: 20px; flex-shrink: 0; }
.comm-avatar img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }

.comm-body { width: 100%; }
.comm-logindate { display: flex; justify-content: space-between; margin-bottom: 5px; }
.comm-author { color: #999; font-size: 14px; }
.comm-author .login { color: #54afda; font-weight: 600; font-size: 16px; margin-right: 5px; text-decoration: none;}
.comm-date { display: flex; align-items: center; color: #999; font-size: 13px; margin-bottom: 10px; }
.comm-date i { margin-right: 5px; }

.comm-text { font-size: 15px; line-height: 1.6; color: #333; margin-bottom: 10px; }

.comm-navi { display: flex; gap: 15px; justify-content: flex-end; padding-top: 10px; border-top: 1px dashed #eee; }
.comm-navi a { color: #54afda; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; transition: 0.2s; }
.comm-navi a:hover { color: #ed6663; }
.comm-navi a i { font-size: 16px; margin-right: 5px; }

/* Вложенные комментарии (Ответы) */
#dle-comments-list { width: 100%; }
#dle-comments-list > .comments-tree-list > li .comments-tree-list > li { padding-left: 40px; }
@media (max-width: 576px) {
    #dle-comments-list > .comments-tree-list > li .comments-tree-list > li { padding-left: 20px; }
}


/* INPUTS STYLE
----------------------------------------------- */
.checkbox{vertical-align:top;width:17px;height:17px;margin:0 3px 0 0;}
.checkbox + label{cursor:pointer;}
.checkbox input{position:absolute;z-index:-1;opacity:0;margin:10px 0 0 20px;}
.checkbox_text{position:relative;padding:0 0 0 60px;cursor:pointer;}
.checkbox_text:before{content:'';position:absolute;top:-4px;left:-1px;width:50px;height:26px;border-radius:13px;background:#eaeaea;box-shadow:inset 0 2px 3px rgba(0,0,0,.2);transition:.2s;}
.checkbox_text:after{content:'';position:absolute;top:-1px;left:2px;width:20px;height:20px;border-radius:10px;background:#f5efe5;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:.2s;}
.checkbox input:checked + .checkbox_text:before{background:#80b435;}
.checkbox input:checked + .checkbox_text:after{left:26px;}

/* ==========================================================================
   FILE UPLOAD CUSTOMIZATION
   ========================================================================== */
.upload-file .file-upload-wrap { display: flex; align-items: center; width: 100%; cursor: pointer; }
.upload-file .main-input-file { display: none; }

.upload-file .btn-file { 
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 15px; background: #9ac55d; color: #fff; 
    border-radius: 4px 0 0 4px; font-weight: 500; transition: background 0.2s;
    border: 1px solid #9ac55d; white-space: nowrap;
}
.upload-file .btn-file i { margin-right: 8px; font-size: 18px; }
.upload-file .file-upload-wrap:hover .btn-file { background: #80b435; border-color: #80b435; }

.upload-file #file_name { 
    border-radius: 0 4px 4px 0 !important; 
    border-left: none !important; 
    background: #fff !important; 
    color: #666; cursor: pointer; margin-bottom: 0 !important;
}

.bbcodes[type=submit], .bbcodes[type=button] {font-weight:700;color:#FFFFFF;font-size:14px;line-height:22px;cursor:pointer;text-decoration:none;margin:0;padding:.7em;border-radius:3px;background:#ed6663;box-shadow:0 -4px #c65351 inset;transition:.2s;}
.bbcodes[type=submit]:hover, .bbcodes[type=button]:hover{background:#c65351;}

/* VOTE
----------------------------------------------- */

/* Базовые отступы контейнера */
.vote-box { margin-bottom: 20px; }
.vote-title {font-weight:700;}
.vote-list { margin-top: 15px; font-size: 16px;}
.vote-count { margin-top: 15px; font-size: 14px; }

/* Оптимизация радио-кнопок: Скрываем визуально, оставляем для клавиатуры */
.vote label input[type="radio"] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

/* Контейнер каждого пункта опроса (класс .vote генерируется PHP) */
.vote label {
    display: block;
    position: relative;
    cursor: pointer;
    padding: 3px 0 10px 35px;
    line-height: 26px;
    transition: color 0.2s ease;
}

/* Эффект при наведении на текст ответа */
.vote label:hover {
    color: #80b435;
}

/* Кастомный кружок для радио-кнопки */
.vote label input[type="radio"] ~ span::before {
    content: "";
    position: absolute;
    display: block;
    width: 26px;
    height: 26px;
    background: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 50%;
    left: 0;
    top: 4px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}

/* Состояние: Вариант выбран */
.vote label input[type="radio"]:checked ~ span::before {
    border: 5px solid #80b435;
    background: #ffffff;	
}

/* Состояние: Навигация с клавиатуры (фокус) */
.vote label input[type="radio"]:focus-visible ~ span::before {
    outline: 2px solid #80b435;
    outline-offset: 2px;
}

/* --- СТИЛИ ДЛЯ РЕЗУЛЬТАТОВ (генерируются PHP) --- */
.vote { margin-bottom: 5px; }
.voteprogress {
    background: #f0f0f0;
    border-radius: 4px;
    height: 18px;
    margin: 5px 0 15px 0;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
.voteprogress span {
    display: block;
    height: 100%;
    background: #80b435; /* Фирменный зеленый цвет шкалы */
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: right;
    padding-right: 5px;
    box-sizing: border-box;
    transition: width 0.5s ease;
}

/* Блок с кнопками */
.vote-btn {
    display: flex;
    justify-content: center;
    gap: 10px; /* Современный метод отступов между кнопками */
    padding-top: 15px;
}

/* Стилизация кнопок */
.vote-btn button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #ffffff;
    font-size: 14px;
    line-height: 22px;
    cursor: pointer;
    text-decoration: none;
    padding: 0.6em 1.2em;
    border: none; /* Убираем дефолтные рамки */
    border-radius: 3px;
    background: #80b435;
    box-shadow: inset 0 -4px #669933;
    transition: background 0.2s ease;
}

.vote-btn button:hover {
    background: #669933;
}

.vote-btn button i {
    font-size: 16px;
}





/* FULLSTORY POLL */
.poll h2 {line-height:22px; font-size:22px; padding:20px 0 20px 0; border-top: 45px solid transparent; margin-top: -45px;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;}
.poll i {color:#2779c1;margin-right: 10px;}
.poll h2 span{color:#2779c1;font-size:22px;text-transform: uppercase;margin-right: 10px;}
.pollanswer {margin: 5px 0 10px 35px;}
.fullstory-poll {font-size:18px;line-height:10px;margin: 10px 0 0 0;}
.fullstory-poll:after {content: ""; display: inline-block; clear: both;}
.fullstory-poll input {margin:2px 8px 0 0; float:left; display:none;}
.fullstory-poll label {position:relative;height:26px;}
.fullstory-poll label:before { content:""; float:left; position:relative;margin:0 8px 0 0; cursor:pointer; width:26px; height:26px; border-radius:20%; background: #e6e6e6; box-shadow: inset 0 1px 2px rgba(0,0,0,.3); transition: .2s;}
.fullstory-poll input:checked + label:after{content:'';position:absolute;top:4px;left:-30px;width:18px;height:18px;border-radius:20%;background:#ffffff;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:.2s;}
 @-moz-document url-prefix(){.fullstory-poll input:checked + label:after {top:23px;}}
.fullstory-poll input:checked + label:before { background-color:#54b0db;}
.fullstory-poll label:hover { cursor:pointer;}
.allpoll {text-align:right;margin:5px 0 15px 0;}
.poll-btn {display:flex;justify-content: center;padding:10px 0 0 0;}
.poll-btn button {display:flex;justify-content: center;font-weight:700;color:#FFFFFF;font-size:14px;line-height:22px;cursor:pointer;text-decoration:none;margin: 0 3px 0 3px;padding:.6em 1.8em;border-radius:3px;background:#80b435;box-shadow:0 -4px #669933 inset;transition:.2s;}
.poll-btn button:hover{background:#669933;}
.poll-count {margin-top:10px;}

/*--- VOTE BARS ---*/
.voteprogress {overflow:hidden;height:26px;margin-bottom:10px;background-color:#f5f5f5;box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1);border-radius:4px;}
.voteprogress span{color:#ffffff;text-align:center;text-indent:-2000em;height:26px;display:block;overflow:hidden;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background:#0e90d2;background:linear-gradient(to bottom, #149bdf, #0480be);}
.pollprogress {overflow:hidden;height:25px;background-color:#e6e6e6;display:block;box-shadow: inset 0 1px 2px rgba(0,0,0,.2);border-radius:4px;}
.pollprogress span{color:#ffffff;text-align:center;text-indent:-2000em;height:26px;display:block;overflow:hidden;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);background:#0e90d2;background:linear-gradient(to bottom, #54b0db, #5ab5e0);}
.pollprogress span span{color:#f9f5ed;font-size:14px;display:block;text-indent:0;line-height:23px;}
.voteprogress .vote1 {background-color:#dd514c;background:linear-gradient(to bottom, #ed6663, #f06f6c)}
.voteprogress .vote2 {background-color:#dd514c;background:linear-gradient(to bottom, #54b0db, #5ab5e0)}
.voteprogress .vote3 {background-color:#5eb95e;background:linear-gradient(to bottom, #80b435, #85ba3a)}
.voteprogress .vote4 {background-color:#4bb1cf;background:linear-gradient(to bottom, #c196ff, #c7a1fe)}
.voteprogress .vote5 {background-color:#faa732;background:linear-gradient(to bottom, #fbb450, #fbbd65)}
		
/*---Диалоговые и всплывающие окна jQuery UI---*/
.ui-widget-overlay {
	background: #000;
	opacity: 0.5;
	left: 0; top: 0; right: 0; bottom: 0;
	position: fixed;
	}
	.ui-helper-clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden }
	.ui-helper-clearfix { display: inline-block }
	* html .ui-helper-clearfix { height: 1% }
	.ui-helper-clearfix { display: block }
	.ui-dialog {
		text-align: left;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 370px;
		border-radius: 2px;
		box-shadow: 0 8px 40px -10px rgba(0,0,0,0.3);
		border: 1px solid #e6e6e6; border-color: rgba(0,0,0,0.1);
		background-color: #f7f7f7;
		background-clip: padding-box;
	}
	.ui-dialog-titlebar { padding: 20px 20px; position: relative; }
	.ui-dialog-title { float: left; font-weight: bold; font-size: 1.15em; }
	.ui-dialog-titlebar-close {
		position: absolute;
		right: 10px; top: 50%;
		margin-top: -16px;
		height: 32px; width: 32px;
		border: 0 none !important;
	}
	.ui-dialog-titlebar-close .ui-icon {
		display: block;
		margin: 10px auto 0 auto;
		width: 12px; height: 12px;
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAG1BMVEUAAAA1NTU1NTU1NTU1NTU1NTU1NTU1NTU1NTW7eCkWAAAACHRSTlMA8DiyCsELwNb3saQAAABlSURBVBjTY2AxYoACZQcG10YFCJtJooTBokMIwlHsaAZioBRYAigKJoAAJAghoRIQCiYEoSEiUCmIBFQKLAGTAkvApCASCA6GMoQBGEYjLEV1DopDUbyA4jlUb6ciAiSMgQ0pqAB4linXHtbaoQAAAABJRU5ErkJggg==);
		-webkit-background-size: 12px auto; background-size: 12px auto;
		opacity: .5;
	}
	.ui-button {
		float: right;
		border: 0 none;
		display: inline-block;
		vertical-align: middle;
		cursor: pointer;
		height: 36px;
		border-radius: 18px;
		line-height: 22px;
		outline: none;
		background-color: #3394e6;
		color: #fff;
		border: 0 none;
		padding: 7px 22px;
		text-decoration: none !important;
		box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
		-webkit-transition: all ease .1s; transition: all ease .1s;
	}
	.ui-dialog-titlebar-close:hover .ui-icon { opacity: 1; }
	.ui-icon { overflow: hidden; text-indent: -9999px; }
	.ui-dialog label { color: #575757; }
	.ui-dialog-content { padding: 20px; border: 1px solid #fff; overflow: auto; position: relative; zoom: 1; }
	.loginbox.ui-dialog, .loginbox .ui-dialog-content { overflow: visible !important; }
	.ui-dialog-content h2 { display: inline; font-size: 1em; font-weight: bold }
	.ui-dialog .ui-dialog-buttonpane { padding: 20px; text-align: center; }
	.ui-dialog .ui-resizable-se { bottom: 3px; height: 14px; right: 3px; width: 14px; }
	.ui-draggable .ui-dialog-titlebar { cursor: move; }
	.ui-state-error { background: #fef1ec 50% 50% repeat-x !important; border: 1px solid #cd0a0a; color: #cd0a0a; }
	.ui-button { margin: 0 3px; }
	.ui-helper-hidden-accessible{display: none;}

/* GO TOP BUTTON */
/* Базовые стили для кнопки (оставляем как было) */
#gotop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background-color: #80b435;
    color: #fff;
    border-radius: 4px;
    
    /* Идеальное центрирование содержимого через Flexbox */
    display: flex !important; /* !important на всякий случай, если другой CSS мешает */
    align-items: center;    /* По вертикали */
    justify-content: center; /* По горизонтали */
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s;
}

#gotop.show {
    opacity: 1;
    visibility: visible;
}

#gotop:hover {
    background-color: #6a962c;
}

/* --- МАГИЯ ВЫРАВНИВАНИЯ ЗДЕСЬ --- */
#gotop i {
    /* 1. Превращаем иконку в блок, чтобы она слушалась Flexbox, а не text-align */
    display: block !important;
    
    /* 2. Жестко убиваем все отступы и наследуемую высоту строки */
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important; /* На всякий случай */

    font-size: 24px;
}

/* COOKIE BAR */
.cookie-bar__inner {
  background-color: #000;
  color: #fff;
  font-size: 12px;
  padding: 10px 20px;
  opacity: .9;
}

.cookie-bar__buttons {
  display: block;
  margin-top: 5px;
  text-align: center;
}

.cookie-bar__btn {
  background-color: #0275d8;
  color: #fff;
  border-radius:2px;
  padding: 3px 13px;
  -webkit-transition: background-color .3s;
  -o-transition: background-color .3s;
  transition: background-color .3s;
  cursor: pointer;
}

.cookie-bar__btn:hover {
  background-color: #0267bf;
}

.cookie-bar__link {
  margin: 0 .5rem;
}

.cookie-bar a {
  color: #fff;
  text-decoration: underline;
}

.cookie-bar a:hover {
  text-decoration: none;
}

.cookie-bar--bottom {
  z-index: 100;
  position: fixed;
}

.cookie-bar--bottom {
  right: 0;
  bottom: 0;
  left: 0;
}

.catbuttons * {
  transition: all .5s ease;
}

.catbuttons {
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.butFrame {
  position: relative;
  overflow: hidden;
  margin: 5px;
  width: 24%;
  background: #111;
  font-family: inherit;
  font-size: 1em;
  text-align: center;
  cursor: pointer;
}

.butFrame img {
  position: relative;
  display: block;
  max-width: 100%;
  opacity: 0.8;
  position: absolute;
}

.catbuttons > .butHeading {
  clear: both;
  margin: 0;
  padding: 4em 1% 0;
  color: #484B54;
  font-weight: 800;
  font-size: 1.5em;
}

#buttons > .butHeading:first-child {
  padding-top: 0em;
}

.butFrame .butTextWrap {
  font-family: inherit;
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.butFrame .butTextWrap::before,
.butFrame .butTextWrap::after {
  pointer-events: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.butFrame .butTextWrap,
.butFrame .butTextWrap > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Anchor will cover the whole item by default */

.butFrame .butTextWrap > a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}

.butFrame .butHeading {
  word-spacing: -0.15em;
  font-weight: 800;
  font-size: 18px;
  font-family: inherit;
}

.butFrame .butHeading .butText {
  font-weight: 300;
}

.butFrame .butHeading,
.butFrame p {
  margin: 0;
  color: #fff;
}

.butFrame p {
  letter-spacing: 1px;
  font-size: 68.5%;
  font-family: inherit;
}

/* EFFECT */

.butFrame img {
  opacity: 0.9;
  transition: opacity 0.35s;
  width: 100%;
  height: auto;
}

.butFrame .butTextWrap::before,
.butFrame .butTextWrap::after {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
}
.butFrame .butTextWrap::before {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
}
.butFrame .butTextWrap::after {
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  -webkit-transform: scale(1, 0);
  transform: scale(1, 0);
  box-sizing: border-box;
}
.butFrame .butHeading {
  padding-top: 10%;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0, -20px, 0);
  transform: translate3d(0, -20px, 0);
}
.butFrame p {
  padding: 10px 2.5em;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0, 20px, 0);
  transform: translate3d(0, 20px, 0);
}

/* HOVER STYLES */

.butFrame:hover img {
  opacity: 0.4;
}

.butFrame:hover .butTextWrap::before,
.butFrame:hover .butTextWrap::after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.butFrame:hover .butHeading,
.butFrame:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}


/* ==========================================================================
   DLE PUSH NOTIFICATIONS (Фирменные уведомления)
   ========================================================================== */
.DLEPush { z-index: 10500; position: fixed; right: 20px; top: 20px; }
@keyframes DLEPush-show { 0% { transform: translateY(-20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

.DLEPush-notification.wrapper {
	animation: DLEPush-show 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center;
	margin-bottom: 10px; width: 100%; max-width: 400px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.1); border-radius: 8px; border: 1px solid rgba(0,0,0,0.05);
	overflow: hidden;
}

.DLEPush-notification .DLEPush-icon {
	grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center;
	color: #fff; width: 50px; height: 100%; text-align: center;
}
.DLEPush-notification .DLEPush-icon svg { scale: 0.9; }

.DLEPush-notification .DLEPush-header { font-weight: 700; grid-column: 2; grid-row: 1; font-size: 15px; margin: 12px 15px 0 15px; }
.DLEPush-notification .DLEPush-header:empty { margin-top: 0; }
.DLEPush-notification .DLEPush-message { grid-column: 2; grid-row: 2; font-size: 13px; margin: 5px 15px 15px 15px; line-height: 1.4; }
.DLEPush-notification .DLEPush-close { position: absolute; top: 10px; right: 10px; background: none; border: 0; font-size: 18px; cursor: pointer; opacity: 0.5; transition: opacity 0.2s; }
.DLEPush-notification .DLEPush-close:hover { opacity: 1; }

/* Фирменные цвета статусов */
.DLEPush-notification.wrapper.push-success { background-color: #f5faef; color: #333; }
.DLEPush-notification.wrapper.push-success .DLEPush-icon { background-color: #80b435; } /* Зеленый Maza Kaina */

.DLEPush-notification.wrapper.push-warning { background-color: #fff9e6; color: #333; }
.DLEPush-notification.wrapper.push-warning .DLEPush-icon { background-color: #f6a601; } /* Оранжевый */

.DLEPush-notification.wrapper.push-error { background-color: #fcedec; color: #333; }
.DLEPush-notification.wrapper.push-error .DLEPush-icon { background-color: #ed6663; } /* Красный Maza Kaina */

/* ==========================================================================
   PERSONAL MESSAGES (Asmeninės žinutės)
   ========================================================================== */
.pm-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background: #f9f9f9; padding: 15px 20px; border-radius: 6px; margin-bottom: 20px; border: 1px solid #eaeaea; }

/* Навигация (вкладки) */
#pm-menu { display: flex; gap: 10px; flex-wrap: wrap; }
#pm-menu a { display: inline-flex; align-items: center; padding: 8px 16px; background: #ffffff; border: 1px solid #dcdcdc; border-radius: 4px; color: #444; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.2s ease; }
#pm-menu a:hover { background: #eaf5fa; border-color: #54afda; color: #54afda; }
#pm-menu a.active { background: #80b435; border-color: #80b435; color: #ffffff; }
#pm-menu a i { margin-right: 6px; font-size: 16px; }

/* Шкала лимита */
.pm_status { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; color: #888; }
.pm_status .pm-progress-wrap { width: 150px; margin-bottom: 5px; }
.pm-limit-text { font-weight: 500; }

/* Стилизация таблицы писем от DLE */
.pmlist-wrap { overflow-x: auto; }
.pm { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 600px; }
.pm th { background: #f5f5f5; padding: 12px 15px; font-size: 13px; color: #666; text-transform: uppercase; font-weight: 600; text-align: left; }
.pm th:first-child { border-radius: 6px 0 0 0; } .pm th:last-child { border-radius: 0 6px 0 0; }
.pm td { padding: 15px; border-bottom: 1px solid #eaeaea; vertical-align: middle; background: #ffffff; transition: background 0.2s ease; }
.pm tbody tr:hover td { background: #fdfdfd; cursor: pointer; }

/* Иконки статуса писем */
.pm td.pm_list.pm_icon { width: 50px; text-align: center; }
.pm_list.pm_icon svg { width: 22px; height: 22px; vertical-align: middle; }
.pm_list.pm_icon.pm-unread-image { color: #ed6663; } /* Непрочитанное - красное */
.pm_list.pm_icon.pm-read-image { color: #cccccc; }   /* Прочитанное - серое */
.pm_list.pm_icon.pm-reply-image { color: #80b435; }  /* Отвеченное - зеленое */

/* Заголовок письма и данные в таблице */
.pm_list.pm_subj a { font-size: 16px; font-weight: 600; color: #333; text-decoration: none; transition: color 0.2s; }
.pm_list.pm_subj a:hover { color: #54afda; }
.pm_list .pm_last_message, .pm_list .pm_last_date { display: block; color: #999; font-size: 12px; margin-top: 4px; }
.pm_list .pm_with_user { font-weight: 600; color: #54afda; }

/* Пагинация внутри PM */
.pm_navigation { margin-top: 20px; display: flex; justify-content: center; }
.pm_navigation .navigation { display: flex; gap: 5px; }
.pm_navigation .navigation a, .pm_navigation .navigation span { display: inline-flex; justify-content: center; align-items: center; min-width: 36px; height: 36px; border-radius: 4px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.2s ease; }
.pm_navigation .navigation a { background-color: #f5f5f5; color: #444; }
.pm_navigation .navigation a:hover { background-color: #54afda; color: #ffffff; }
.pm_navigation .navigation span { background-color: #80b435; color: #ffffff; cursor: default; box-shadow: 0 2px 5px rgba(128,180,53,0.3); }

/* ==========================================================================
   ИДЕАЛЬНЫЙ ФОКУС ДЛЯ РЕДАКТОРА ПИСЕМ (Зеленая рамка)
   ========================================================================== */
.pm-editor-wrap .bb-editor,
.pm-editor-wrap .tox-tinymce,
.pm-editor-wrap .fr-box {
    border: 1px solid #9ac55d !important;
    border-radius: 4px !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pm-editor-wrap .bb-editor:focus-within,
.pm-editor-wrap .tox-tinymce.tox-edit-focus,
.pm-editor-wrap .fr-box.fr-focus {
    border-color: #80b435 !important;
    box-shadow: 0 0 0 3px rgba(128,180,53,0.2) !important;
}

/* ==========================================================================
   УДАЛЕНИЕ УРОДЛИВЫХ ТОЧЕК ИЗ PUSH-УВЕДОМЛЕНИЙ DLE
   ========================================================================== */
.DLEPush-notification ul, 
.DLEPush-notification li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.DLEPush-notification a {
    color: #80b435;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    margin-top: 5px;
}
.DLEPush-notification a:hover { text-decoration: underline; }

/* ==========================================================================
   JQUERY UI DIALOG (Полная переработка всплывающих окон профиля)
   ========================================================================== */
/* Затемнение фона и вывод ПОВЕРХ личных сообщений */
.ui-widget-overlay { 
    background: rgba(0,0,0,0.6) !important; 
    opacity: 1 !important; 
    backdrop-filter: blur(2px); 
    z-index: 10400 !important; 
}

/* Само всплывающее окно */
.ui-dialog {
    z-index: 10500 !important; /* МАГИЯ: Окно больше никогда не спрячется под контентом! */
    border-radius: 8px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important;
    border: none !important;
    background: #ffffff !important;
    padding: 0 !important;
    font-family: inherit !important;
    max-width: 400px !important;
}

/* Зеленая шапка окна */
.ui-dialog-titlebar {
    background: #80b435 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 15px 20px !important;
}
.ui-dialog-title { font-size: 16px !important; font-weight: 700 !important; }

/* Кнопка закрытия окна (Крестик) */
.ui-dialog-titlebar-close {
    background: rgba(255,255,255,0.2) !important;
    border: none !important;
    border-radius: 50% !important;
    right: 15px !important;
    top: 50% !important;
    margin-top: -16px !important;
    box-shadow: none !important;
    transition: background 0.2s ease;
}
.ui-dialog-titlebar-close:hover { background: rgba(255,255,255,0.4) !important; }

/* Содержимое профиля */
.ui-dialog-content { padding: 20px !important; color: #444 !important; font-size: 14px !important; }
.ui-dialog-content ul { list-style: none; padding: 0; margin: 0; }
.ui-dialog-content ul li { padding: 10px 0; border-bottom: 1px dashed #eee; display: flex; justify-content: space-between; }
.ui-dialog-content ul li a { color: #54afda; font-weight: 600; text-decoration: none; }
.ui-dialog-content ul li a:hover { color: #ed6663; }

/* Нижняя панель с кнопками */
.ui-dialog-buttonpane { 
    border-top: 1px solid #eee !important; 
    background: #fafafa !important; 
    padding: 15px 20px !important; 
    border-radius: 0 0 8px 8px !important;
}

/* Красивые фирменные кнопки вместо старых синих */
.ui-dialog .ui-button {
    background: #80b435 !important; /* Ваш зеленый */
    border: none !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    text-shadow: none !important;
    box-shadow: inset 0 -3px rgba(0,0,0,0.15) !important;
    transition: background 0.2s ease, transform 0.1s ease !important;
}
.ui-dialog .ui-button:hover { background: #6a962c !important; }
.ui-dialog .ui-button:active { transform: translateY(2px) !important; box-shadow: inset 0 -1px rgba(0,0,0,0.15) !important; }

/* Кнопка удаления/отмены (Красная) */
.ui-dialog .ui-button.ui-button-delete { background: #ed6663 !important; }
.ui-dialog .ui-button.ui-button-delete:hover { background: #d95653 !important; }

/* ==========================================================================
   ФОРСИРОВАННАЯ ШИРИНА 100% ДЛЯ ФОРМЫ НОВОГО ПИСЬМА И РЕДАКТОРА
   ========================================================================== */
.pm-editor-wrap {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

/* Перебиваем любые встроенные стили DLE для таблиц и iframe внутри редактора */
.pm-editor-wrap #comment-editor,
.pm-editor-wrap #comment-editor table,
.pm-editor-wrap #comment-editor iframe,
.pm-editor-wrap .bb-editor,
.pm-editor-wrap .tox-tinymce,
.pm-editor-wrap .fr-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Если браузер сжимает поля ввода на мобильных */
.addcomments-inputs input {
    min-width: 0; 
}
@media (max-width: 576px) {
    .addcomments-inputs {
        flex-direction: column !important;
    }
}


.mce-accordion summary {
	cursor: pointer;
}

.self_delete_link {
	border: 0 none;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	padding: 12px 27px;
	border-radius: 10px;
	outline: none;
	background-color: #f44336;
	color: #fff;
	text-shadow: 0 1px #333;
	text-decoration: none !important;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
	box-sizing: border-box;
	transition: all ease .1s; transition: all ease .1s;
}

input[type="text"].comments_author_field {
	width: 100%;
	margin-bottom: 10px;
}
.ui-dialog-buttonset button.ui-button-delete {
    background-color: #f44336;
    border-color: #f44336;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(51, 51, 51, .5);
}
.ui-dialog-buttonset button.ui-button-delete:hover {
    background-color: #db3a2f;
    border-color: #db3a2f;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(51, 51, 51, .5);
}


.quote_link {
	float: right;
}
.quote_link svg {
	color: #6c838e;
	vertical-align: middle;
}

.title_spoiler svg{
	vertical-align: middle;
	margin-top: -4px;
	margin-right: 7px;
	height: 16px;
	width: 16px;
}

.image-bordered {
	border: 1px solid #ddd;
}

.image-shadows {
	box-shadow: rgb(9 30 66 / 25%) 0px 4px 8px -2px, rgb(9 30 66 / 8%) 0px 0px 0px 1px;
}

.image-padded {
	padding: 0.5rem;
}

.comments-user-profile {
  font-weight: bold;
  cursor: pointer;
  color: #3394e6;
}

.comments-image-gallery {
  margin: 0;
  padding: 0;  
  list-style: none;
  clear: both;
}

.comments-image-gallery li{
	list-style: none;
	margin: 0;
	padding: 0;  
}

.comments-image-gallery li img{
  float: left;
  margin-right: 5px;
  border: 5px solid #fff;
  width: 100px;
  height: 100px;
  transition: box-shadow 0.5s ease;
}

.comments-image-gallery li img:hover {
  box-shadow: 0px 0px 7px rgba(0,0,0,0.4);
}

.mce-toc {
  border: 1px solid #dbdada;
  margin: 0 0 .7rem 0;
}

.mce-toc h2 {
  margin: 4px;
}

.mce-toc ul {
  padding-left: 20px;
  list-style: none;
  margin-top: 0;
  margin-bottom: 0;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

.mce-toc ul ul {
  padding-left: 20px;
  margin-block-start: 0;
  margin-block-end: 0;
}

.mce-toc li {
  list-style-type: none;
}

/* MEDIA QUERIES */

@media all and (max-width: 950px) and (min-width: 701px){

  .butFrame {
    display:block;
    width:47%;
  }

}

@media all and (max-width: 700px) and (min-width: 0px){

  .butFrame {
    display:block;
    width:100%;
  }

}



/* ADAPTIVE ----------------------------------------------- */
.btn-menu {display:none;}
.side-panel {width:260px; height:100%; overflow-x:hidden; overflow-y:auto; background-color:#80b435; padding:0 10px; z-index:888; position:fixed; left:-260px; top:0; transition:left .4s; -webkit-transition:left .4s;opacity:0.8;}
.side-panel.active {left:0;}
.close-overlay {width:100%; height:100%; background-color:rgba(0,0,0,0.8); position:fixed; left:0; top:0; z-index:887; display:none;}
.side-panel a {display:block; padding:10px 0 10px 0; color:#FFF; font-size:16px; border-bottom:1px dashed #FFF;}
.side-panel i {font-size:24px;}
.side-panel li {position:relative;}
.side-panel li span {position:absolute; right:10px; top:10px;}

@media screen and (max-width: 1220px) {
.center {max-width:1000px;}
.short-thumb, .short-thumb-ads {width:50%;}
}
@media screen and (min-width: 950px) {
.modal-body-profile .main-login-usermenu .for-mobile {display:none;}
.mobmenu {display:none;}
.loginmenu {display:none;}

}
@media screen and (max-width: 950px) {
.booklet-gallery ul li img{width:100%;}
aside {margin-top:10px;}
.center {max-width:768px;}
.topmenu {display:none;}
.mobmenu {display:block;}
.categorymenu {display:none;}
.lang-select {display:none;}
.fx-row {flex-direction:column;}
.side-box {width:100%;}
.short-preview {display:flex;flex-direction: column;justify-content: center;width:100%;}
.short-article-main {display:inline-block;margin:0 20px 20px 20px;border-bottom: 0;}
.short-article-main:last-child {display:inline-block;margin:0 20px 20px 20px;border-bottom: 0;}
.dirsection {width:50%;}
.topmenu-act a i {color:#FFFFFF !important;}
.topmenu-act a span {color:#FFFFFF !important;}
.topmenu-act a:hover{background-color:#80b435;border-color:#FFFFFF;}
.topmenu-act a:hover i{color:#FFFFFF !important;background-color:#80b435;}
.sorter {float:right; margin-right:0;}
.main {width:100%; padding-right:0;}
.counter {position:static; margin:10px 0 0 0;}
.btn-mob-menu {display:block;color:#80b435;position:absolute;top:12px;right:30px; cursor:pointer;font-size:40px;}
.btn-mob-menu span {cursor:pointer;}
.main-login-btn{cursor:pointer;font-size:14px;color:#ed6663;text-decoration:none;text-align:center;position:absolute;top:0;right:10px;border-left:1px solid #e5e5e5;height:80px;line-height:40px;}
.main-login-btn .login-avatar{margin:5px 0 0 30px;width:30px;height:30px;}
.main-login-btn i{font-size:30px;margin:10px 0 0 30px;}
.vote input:checked + label:after{top:1px;}
}

@media screen and (max-width: 768px) {
.booklet-gallery ul li img{width:100%;}
.center {max-width:640px;}
.short-thumb, .short-thumb-ads {width:50%;}
.site-desc h1, .site-desc h2, .site-desc h3 {font-size:18px;}
.ac-protect {margin-top:0px;}
.comments-tree-list .comments-tree-list {padding-left:0px !important;}
.comments-tree-list .comments-tree-list:before {display:none;}
.mass_comments_action {display:none;}
.sub-title h1 {font-size:18px; line-height:24px;}
.userwrap {justify-content: center;}
.booklet-txt .booklet-block .desc table td {
      padding: 12px 10px;
      font-size: 14px !important;
    }
}

@media screen and (max-width: 590px) {
.booklet-txt .booklet-block .flex  {display:block;}
.booklet-gallery ul li img{width:100%;}
.akcijas-date, .akcijas-date-stop { font-size: 12px; height: auto; padding: 6px 4px; }
.short-img {height: 170px;}
.short-title {font-size: 0.7rem;}
.short-more {min-height: 70px;    padding: 5px 5px 10px 5px;}




.center {max-width:480px;}
.full-in h1, .rels-t {font-size:18px;}
.full-meta {text-align:center;}
.dirsection {width:100%;}
.ac-inputs input {width:100%; margin-top:10px;}
.ac-protect {width:100%; float:none; margin:0;}
.ui-dialog {width:100% !important;}
.upop-left, .upop-right {float:none !important; width:100% !important; margin:0; padding:0 20px;}
.upop-left {margin-bottom:10px; text-align:center;}
.ui-dialog-buttonset button {display:block; margin:0 0 5px 0; width:100%;}
#dofullsearch, #searchsuggestions span.seperator {display:none !important;}
.attach .download-link {margin:0 -15px 0 0; float:none; display:block; padding:0 10px;}
.attach-info {float:none;}
.fullbooklet .titlehead .fulltitle .topinfo .date {font-size:14px;}
.fullbooklet .titlehead .fulltitle .topinfo .previous-date {font-size: 12px;}
.fulltitleline {display:flex;flex-direction: column;}
.shareblock {justify-content: center;margin: 10px 0 5px 0;}  
}

@media screen and (max-width: 470px) {
.booklet-gallery ul li img{width:100%;}
.akcijas-date, .akcijas-date-stop { font-size: 11px; height: auto; padding: 5px 2px; }
.show-login {padding:0 5px; font-size:12px; max-width:60px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.logo {width:200px; overflow:hidden; margin:0;}
.comms-title2 {text-align:center; display:block !important;}
.booklet-txt .category-block img {float:none;display:block;margin:auto;}
.booklet-txt .booklet-block .add-desc .thumb {float:none;display:block;text-align:center;padding: 0;}
.short-additive {width:40%;}
.dirtitle-main {font-size:16px;}
.userinfo {font-size:14px;}

}
@media (max-width: 320px){
.booklet-gallery ul li img{width:100%;}
	.mobile_menu_container{
		width: 240px;
	}
}

/* Стили для кнопок (можете настроить под свой дизайн) */
.js-tab-btn {
    display: inline-block;
    padding: 10px 20px;
    margin: 0 5px 5px 0;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.js-tab-btn:hover {
    background: #e9ecef;
}

/* Активная кнопка */
.js-tab-btn.active {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

/* Скрываем контент табов по умолчанию */
.js-tab-content {
    display: none;
    animation: fadeInTab 0.4s ease;
}

/* Показываем активный таб */
.js-tab-content.active {
    display: block;
}

/* Анимация плавного появления */
@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   USER PROFILE POPUP (Всплывающая карточка пользователя)
   ========================================================================== */
.user-popup-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 10px 0;
}

/* Шапка попапа (Аватар и статус) */
.upop-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

/* Компактный аватар (наследует стиль основного профиля, но меньше размером) */
.upop-header .avatar-img img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #ffffff;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    margin-bottom: 12px;
}

/* Бейджи статуса (Prisijungęs / Atsijungęs) */
.upop-status span {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.upop-status span i { margin-right: 5px; font-size: 14px; }

.status-online { background-color: #80b435; } /* Фирменный зеленый */
.status-offline { background-color: #a699a6; } /* Нейтральный серый */

/* Блок информации */
.upop-info {
    width: 100%;
}

/* Переиспользуем .user-stats, но делаем текст чуть компактнее для попапа */
.upop-info .user-stats li {
    padding: 8px 0;
    font-size: 14px; /* Чуть меньше, чем на основной странице */
}

/* Выделение ссылок (чтобы [ скобки ] и ссылки на все новости выглядели аккуратно) */
.upop-info .user-stats li a {
    color: #54afda;
    font-weight: 600;
    text-decoration: none;
    margin-left: 5px;
}
.upop-info .user-stats li a:hover {
    color: #ed6663;
    text-decoration: underline;
}


/* ==========================================================================
   ADD NEWS FORM (Вертикальный макет и стилизация элементов)
   ========================================================================== */

/* 1. Вертикальный макет */
.addnews-wrap .form-item {
    flex-direction: column !important;
    align-items: flex-start !important;
}

.addnews-wrap .form-item .firstcol {
    width: 100% !important;
    text-align: left !important;
    padding-right: 0 !important;
    margin-bottom: 8px !important;
    font-size: 15px;
}

.addnews-wrap .form-item .secondcol {
    width: 100% !important;
}

/* 2. Поля: Заголовок, Краткое описание и Категории */
.addnews-wrap input[type="text"],
.addnews-wrap #short_story,
.addnews-wrap select {
    width: 100%;
    padding: 10px 15px;
    font-size: 16px;
    background-color: #faf8f8;
    border: 1px solid #9ac55d !important;
    border-radius: 4px !important;
    color: #333;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}

/* Эффект фокуса для обычных полей */
.addnews-wrap input[type="text"]:focus,
.addnews-wrap #short_story:focus,
.addnews-wrap select:focus {
    outline: none !important;
    border-color: #80b435 !important;
    box-shadow: 0 0 0 3px rgba(128,180,53,0.2) !important;
}

/* 3. Улучшение панели BB-редактора и WYSIWYG */
.addnews-wrap .bb-editor,
.addnews-wrap .tox-tinymce,
.addnews-wrap .mce-tinymce,
.addnews-wrap .fr-box {
    border: 1px solid #9ac55d !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    background: #f9f9f9;
    box-shadow: none !important;
    transition: border-color 0.2s, box-shadow 0.2s; /* Плавность для рамки */
}

/* МАГИЯ UX: Если кликнуть в поле внутри редактора, светится сама рамка редактора! */
.addnews-wrap .bb-editor:focus-within {
    border-color: #80b435 !important;
    box-shadow: 0 0 0 3px rgba(128,180,53,0.2) !important;
}

/* Текстовое поле только внутри BB-редактора (теперь не трогает короткую новость) */
.addnews-wrap .bb-editor textarea {
    border: none !important;
    border-top: 1px solid #e5e5e5 !important;
    margin: 0 !important;
    border-radius: 0 0 4px 4px !important;
    background: #ffffff !important;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: inherit;
}

/* Внутреннее поле редактора не светится (светится внешняя рамка) */
.addnews-wrap .bb-editor textarea:focus {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
    outline: none !important;
}

/* 1. Для стандартного BB-редактора */
.addnews-wrap .bb-editor:focus-within,
/* 2. Для редактора TinyMCE (DLE добавляет класс tox-edit-focus) */
.addnews-wrap .tox-tinymce.tox-edit-focus,
/* 3. Для старых версий TinyMCE */
.addnews-wrap .mce-tinymce.mce-focused,
/* 4. Для редактора Froala */
.addnews-wrap .fr-box.fr-basic.fr-active,
.addnews-wrap .fr-box.fr-focus {
    border-color: #80b435 !important;
    box-shadow: 0 0 0 3px rgba(128,180,53,0.2) !important;
}

/* ==========================================================================
   ATTACHMENTS (Прикрепленные файлы)
   ========================================================================== */

/* Карточка доступного файла */
.attachment-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background: #fcfcfc;
    border: 1px solid #eaeaea;
    border-left: 4px solid #80b435; /* Фирменный зеленый акцент */
    border-radius: 4px;
    padding: 12px 18px;
    margin: 15px 0;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.attachment-box:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    border-color: #dcdcdc;
}

/* Название и иконка файла */
.attachment-link {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.attachment-link i {
    font-size: 22px;
    color: #80b435;
    margin-right: 12px;
    transition: transform 0.2s ease;
}

.attachment-link:hover { color: #80b435; }
.attachment-link:hover i { transform: translateY(-2px); }

/* Блок информации (размер и счетчик) */
.attachment-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
    color: #888888;
}

.attachment-size {
    background: #eef5e5; /* Очень светлый зеленый фон */
    color: #6a962c;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
}

/* Кнопка онлайн-просмотра (если файл можно открыть в браузере) */
.attachment-online {
    margin: 10px 0 20px 0;
}

.attachment-online-link {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    color: #54afda; /* Фирменный синий */
    text-decoration: none !important;
    background: #eaf5fa;
    padding: 8px 15px;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.attachment-online-link i {
    margin-right: 8px;
    font-size: 18px;
}

.attachment-online-link b {
    margin-left: 5px;
    font-weight: 600;
}

.attachment-online-link:hover {
    background: #54afda;
    color: #ffffff;
}

/* Блок ошибки (нет прав на скачивание) */
.attachment-error {
    display: flex;
    align-items: center;
    background: #fcedec; /* Очень светлый красный */
    color: #ed6663;      /* Ваш красный акцентный цвет */
    border-left: 4px solid #ed6663;
    padding: 12px 18px;
    border-radius: 4px;
    margin: 15px 0;
    font-size: 14px;
    font-weight: 500;
}

.attachment-error i {
    font-size: 20px;
    margin-right: 12px;
}

/* Адаптивность для мобильных телефонов */
@media screen and (max-width: 576px) {
    .attachment-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ==========================================================================
   АДАПТИВНОСТЬ ДЛЯ КАРТОЧЕК-ЦЕННИКОВ (Мобильная версия - 2 в ряд)
   ========================================================================== */
@media screen and (max-width: 768px) {
    .categories-grid {
        gap: 10px; /* Уменьшаем пропасть между карточками на смартфонах */
    }
    
    .category-card {
        padding: 12px 10px 12px 25px; /* Существенно уменьшаем внутренние отступы */
        min-width: 0; /* МАГИЯ CSS GRID: жестко разрешаем карточке сжиматься */
    }
    
    /* Пропорционально уменьшаем вырез ценника */
    .category-card::before {
        clip-path: polygon(15px 0%, 100% 0%, 100% 100%, 15px 100%, 0% 50%);
    }
    
    /* Сдвигаем и уменьшаем пробитую дырочку */
    .category-card::after {
        left: 5px; 
        width: 6px;
        height: 6px;
    }

    .category-card i {
        font-size: 18px; /* Иконка становится компактнее */
        margin-right: 8px;
        flex-shrink: 0; /* Запрещаем иконке сплющиваться в овал */
    }

    .category-card span {
        font-size: 13px; /* Уменьшаем шрифт, чтобы влезли длинные названия */
        line-height: 1.2;
        word-wrap: break-word; /* Разрешаем длинным словам переноситься на новую строку */
        overflow-wrap: break-word;
    }
/* Адаптация детального списка (Блок 1) */
    .dirsection {
        padding: 15px; /* Уменьшаем "воздух" вокруг блоков для экономии места */
    }
    .subitem-link {
        font-size: 12px;
        padding: 6px 8px 6px 16px; /* Чуть увеличиваем ВЕРТИКАЛЬНЫЕ отступы, чтобы было удобно нажимать пальцем */
    }	
}
/* ==========================================================================
   ПРОМО-БЛОК В САЙДБАРЕ (Анимированный Рупор)
   ========================================================================== */
.promo-banner-block {
    padding: 0 15px 15px 15px !important;
}

.promo-icon-wrap {
    padding: 15px 0 25px 0;
}

/* Контейнер рупора */
.promo-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    background: #eaf5fa; 
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(84, 175, 218, 0.2);
    position: relative;
}

/* Расходящиеся звуковые волны (эфир) */
.promo-icon-circle::before,
.promo-icon-circle::after {
    content: "";
    position: absolute;
    inset: -10px;
    border: 2px solid rgba(84, 175, 218, 0.4);
    border-radius: 50%;
    animation: soundWave 2s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

.promo-icon-circle::after {
    animation-delay: 1s; /* Вторая волна идет с задержкой для объема */
}

/* Настройки иконки рупора */
.promo-icon-circle i {
    margin: 0 !important; 
    padding: 0 !important;
    line-height: 1;
    font-size: 50px;
    color: #54afda;
    transform-origin: left bottom; /* Рупор "вещает" из левого нижнего угла */
    animation: bullhornShout 2s infinite ease-in-out; 
}

/* Анимация вибрации рупора при крике */
@keyframes bullhornShout {
    0%, 20%, 100% { transform: scale(1) rotate(0deg); }
    5%  { transform: scale(1.1) rotate(-5deg); }
    10% { transform: scale(1.1) rotate(5deg); }
    15% { transform: scale(1.1) rotate(-5deg); }
}

/* Анимация расходящихся волн */
@keyframes soundWave {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(1.3); opacity: 0; }
}

/* --- Текстовый блок --- */
.promo-text {
    font-size: 15px;
    line-height: 1.5;
    color: #444444;
    margin-bottom: 20px;
}

.promo-text strong {
    color: #333333;
}

/* --- Кнопка-ссылка (Улучшенный UX) --- */
.promo-action {
    margin-top: 10px;
}

.promo-btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Расстояние между иконкой и текстом */
    background: #80b435;
    color: #fff !important;
    padding: 10px 22px;
    border-radius: 30px;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 6px 15px rgba(128, 180, 53, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Иконка внутри кнопки */
.promo-btn-link i {
    font-size: 26px;
    margin: 0 !important;
}

.promo-btn-link:hover {
    background: #6a962c;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(106, 150, 44, 0.4);
}

.promo-btn-link:active {
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(106, 150, 44, 0.3);
}

/* Текст "Бесплатно" */
.promo-free-text {
    color: #ed6663;
    font-weight: 700;
    font-size: 14px;
    margin-top: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* ==========================================================================
   SISTER SITES SPRITE (Баннеры Латвии и Эстонии - Без теней)
   ========================================================================== */
.sister-site-link {
    display: inline-block;
    width: 240px;
    height: 226px;
    background-image: url('../images/maza-kaina-sprite.webp'); 
    background-repeat: no-repeat;
    
    /* Убрали все тени и рамки. Оставили только плавность для новых эффектов */
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease;
}

/* Эффект при наведении: легкий зум + максимальная сочность цветов */
.sister-site-link:hover {
    transform: scale(1.04); /* Чуть более аккуратный зум */
    filter: saturate(1.40) contrast(1.20); /* МАГИЯ: +35% к насыщенности и +5% к контрасту */
}

/* Эффект при нажатии мышки (возвращаем в норму и слегка вдавливаем) */
.sister-site-link:active {
    transform: scale(0.98);
    filter: saturate(1) contrast(1); 
}

/* Позиционирование спрайта */
.site-lv {
    background-position: 0 0; 
}

.site-ee {
    background-position: -240px 0; 
}



/* Плавный скролл для якоря */
html { scroll-behavior: smooth; }

/* ==========================================================================
   BOOKLET ACTION BAR (Единый блок кнопок)
   ========================================================================== */
.booklet-like {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; 
    gap: 10px;       
    background-color: #FFFFFF;
    padding: 10px 0;
    margin: 10px 0;
}

/* Базовый стиль для кнопок (Шаринг, Инфо, Комменты, Избранное) */
.action-btn,
.favorite a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background-color: #80b435; 
    color: #ffffff !important;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none !important;
    box-sizing: border-box;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
    padding: 0 !important;
}

.action-btn:hover,
.favorite a:hover {
    background-color: #6a962c; 
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(106, 150, 44, 0.2);
}

.action-btn:active,
.favorite a:active { 
    transform: translateY(0); 
}

/* Идеальная центровка иконок внутри кнопок (Бронебойно убиваем смещение влево!) */
.action-btn i, .action-btn svg,
.favorite a i, .favorite a svg {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 20px;
    fill: #ffffff;
    text-indent: 0 !important;
}

/* Фикс для шрифтовых иконок :before */
.action-btn i::before,
.favorite a i::before {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- 1. РЕЙТИНГ (Фикс для ссылок DLE) --- */
.rate-actions {
    display: inline-flex;
    align-items: center;
    height: 36px;
    background: #f9f9f9;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    overflow: hidden;
}

/* DLE оборачивает кнопки в теги <a>, стилизуем именно их, задавая четкие размеры 36x36px! */
.rate-actions > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
}

/* Внутренние спаны кнопок рейтинга, которые получают цвет при наведении */
.rate-actions .rate-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent;
    transition: background-color 0.2s ease;
}

.rate-actions .rate-btn svg {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: fill 0.2s ease;
}

/* Лайк (Зеленый) */
.rate-actions .plus-btn svg { fill: #80b435; }
.rate-actions > a:hover .plus-btn { background: #80b435; }
.rate-actions > a:hover .plus-btn svg { fill: #ffffff; }

/* Дизлайк (Красный) */
.rate-actions .minus-btn svg { fill: #ed6663; }
.rate-actions > a:hover .minus-btn { background: #ed6663; }
.rate-actions > a:hover .minus-btn svg { fill: #ffffff; }

/* Цифра рейтинга */
.rate-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 100%;
    padding: 0 5px;
    font-size: 15px;
    font-weight: 700;
    color: #444444;
}


/* --- 2. ИЗБРАННОЕ (Единый размер для обоих состояний!) --- */

/* Контейнер DLE делаем прозрачным для Flexbox выравнивания */
.favorite { 
    display: contents; 
}

/* Базовый стиль иконки: ОДИНАКОВЫЙ для Outline и Filled состояний */
.favorite a i {
    font-size: 24px !important; /* Устанавливаем единый базовый размер */
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    -webkit-text-stroke: 0px transparent; /* В базе обводки нет */
    transform: scale(1) translateZ(0); /* В базе размер 100% */
}

/* АКТИВНОЕ СОСТОЯНИЕ: Товар УЖЕ в избранном (с обводкой) */
.favorite a i.icon-bookmark {
    color: #ed6663 !important; /* Фирменный красный */
    font-size: 24px !important; /* РАЗМЕР ШРИФТА ТОТ ЖЕ */

    /* Добавляем белую обводку в 1.5px */
    -webkit-text-stroke: 1.5px #ffffff;
    
    /* Добавляем тень для сглаживания обводки и объема */
    text-shadow: 
        -1px -1px 0 #ffffff,  
         1px -1px 0 #ffffff,
        -1px  1px 0 #ffffff,
         1px  1px 0 #ffffff,
         0px  4px 8px rgba(237, 102, 99, 0.4); 

    /* МАГИЯ КОМПЕНСАЦИИ: Мы уменьшаем иконку на ~10%,
       чтобы компенсировать размер обводки, и она казалась такой же, как outline. */
    transform: scale(0.9) translateZ(0); 
}

/* --- 3. ИНФО-КНОПКА --- */
.icon-circle-info:before { content: "\e90e"; font-family: 'iconfont'; }

/* --- 4. КОММЕНТАРИИ (Увеличенная иконка и цифра) --- */
.com-link-wrap,
.com-link-wrap > a {
    display: contents; 
    text-decoration: none !important;
}

.comm-btn { 
    position: relative; 
}

/* Точечно увеличиваем только иконку комментария */
.comm-btn i {
    font-size: 28px !important; /* Увеличили с 20px до 28px */
}

/* Цифра внутри иконки */
.comm-num {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px; 
    font-weight: bold;
    color: #80b435; 
    line-height: 1; /* Жестко фиксируем высоту строки */
    pointer-events: none;
    margin-top: -2px; /* Оптическая компенсация для ПК */
}

/* ФИКС ДЛЯ ANDROID / IOS: Сброс смещения шрифта на смартфонах */
@media screen and (max-width: 768px) {
    .comm-num {
        margin-top: 0; /* Убираем подъем вверх для мобильных браузеров */
        /* padding-top: 1px; <-- Раскомментируй эту строку, если на Android нужно будет опустить цифру еще на 1 пиксель ниже */
    }
}

/* Эффект наведения для цифры */
.comm-btn:hover .comm-num { 
    color: #6a962c; 
}