/* ============================================================
   ГАЙД ПО ПЕПТИДАМ — страница /guide
   Цвета переведены на общесайтовые --pb-*.
   ============================================================ */

/* Триплет основного акцента для rgba().
   Перенести в :root в style.css и удалить отсюда. */
:root {
    --pb-500-rgb: 47, 141, 99;
}

#mid-guide-tabs,.mid-guide-tab{width:100%;height:auto;display:table;table-layout:fixed}
.mid-guide-tab[data-active="0"]{display:none}




/* ===== АЛФАВИТНЫЙ ФИЛЬТР ===== */
.mid-guide-list-letters-wrap {
    width: 100%;
    margin: 0 0 28px;
}
.mid-guide-list-letters {
    width: 100%;
    height: auto;
	overflow:visible;
	margin-bottom: 40px;
}
.mid-guide-list-letters .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.mid-guide-list-letters .swiper-slide {
    width: auto;
    height: auto;
}

/* ---- Кнопка-буква ---- */
.mid-guide-list-letters__item {
    min-width: 52px;
    height: 52px;
    padding: 0 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--pb-line, #e2ece6);
    border-radius: 14px;
    background: var(--pb-surface, #fff);
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease,
                background .25s ease, border-color .25s ease;
    user-select: none;
    position: relative;
    overflow: hidden;
}
.mid-guide-list-letters__item > input { display: none; }

/* Заливка при наведении/выборе (псевдоэлемент) */
.mid-guide-list-letters__item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--pb-400, #5aab86), var(--pb-600, #237150));
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 0;
}

/* Hover */
.mid-guide-list-letters__item:hover {
    border-color: var(--pb-400, #5aab86);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(var(--pb-500-rgb, 47, 141, 99), 0.22);
}
.mid-guide-list-letters__item:hover::before { opacity: 0.08; }

/* Активная (выбранная) буква */
.mid-guide-list-letters__item:has(input:checked) {
    border-color: var(--pb-600, #237150);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(var(--pb-500-rgb, 47, 141, 99), 0.38);
}
.mid-guide-list-letters__item:has(input:checked)::before { opacity: 1; }

/* Текст поверх заливки */
.mid-guide-list-letters__item > * {
    position: relative;
    z-index: 1;
    line-height: 1;
    transition: color .25s ease;
}
.mid-guide-list-letters__item-lkey {
    color: var(--pb-ink, #16241d);
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 3px;
}
.mid-guide-list-letters__item-lnum {
    color: var(--pb-ink-mute, #7a9185);
    font-size: 11px;
    font-weight: 600;
}
/* Белый текст на активной */
.mid-guide-list-letters__item:has(input:checked) .mid-guide-list-letters__item-lkey { color: #fff; }
.mid-guide-list-letters__item:has(input:checked) .mid-guide-list-letters__item-lnum { color: rgba(255,255,255,0.85); }

/* ---- Стрелки навигации ---- */
.mid-guide-list-letters__nav {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 52px;
    padding: 0;
    border: 1.5px solid var(--pb-line, #e2ece6);
    border-radius: 14px;
    background: var(--pb-surface, #fff);
    cursor: pointer;
    transition: background-color .25s, border-color .25s, box-shadow .25s;
    user-select: none;
    position: relative;
}
/* Шеврон рисуем через ::before (чисто, без base64) */
.mid-guide-list-letters__nav::before {
    content: "";
    width: 11px;
    height: 11px;
    border-right: 2.5px solid var(--pb-500, #2f8d63);
    border-bottom: 2.5px solid var(--pb-500, #2f8d63);
    transition: border-color .25s;
}
.mid-guide-list-letters__nav--prev::before { transform: rotate(135deg); margin-left: 4px; }
.mid-guide-list-letters__nav--next::before { transform: rotate(-45deg); margin-right: 4px; }

.mid-guide-list-letters__nav:hover {
    background: var(--pb-500, #2f8d63);
    border-color: var(--pb-500, #2f8d63);
    box-shadow: 0 6px 16px rgba(var(--pb-500-rgb, 47, 141, 99), 0.30);
}
.mid-guide-list-letters__nav:hover::before { border-color: #fff; }

.mid-guide-list-letters__nav.swiper-button-disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}
.mid-guide-list-letters__nav.swiper-button-disabled:hover {
    background: var(--pb-surface, #fff);
    border-color: var(--pb-line, #e2ece6);
}
.mid-guide-list-letters__nav.swiper-button-disabled:hover::before { border-color: var(--pb-500, #2f8d63); }

/* ---- Мобилка: горизонтальный свайп ---- */
@media screen and (max-width: 479px) {
    .mid-guide-list-letters-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .mid-guide-list-letters__nav { display: flex; }
    .mid-guide-list-letters {
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }
    .mid-guide-list-letters .swiper-wrapper {
        flex-wrap: nowrap;
        gap: 0;
    }
    .mid-guide-list-letters .swiper-slide { width: 52px; }
}




/* ===== ПЕРЕКЛЮЧАТЕЛЬ «По категориям / По алфавиту» ===== */

#mid-guide-binary {
    display: inline-flex;
    gap: 5px;
    padding: 5px;
    margin: 0 0 30px;
    background: var(--pb-50, #f3f9f5);
    border: 1px solid var(--pb-200, #c6e0d1);
    border-radius: 14px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}

.mid-guide-binary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 700;
    color: var(--pb-ink-mute, #7a9185);   /* приглушённый — неактивный */
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    transition: all 0.25s ease;
    white-space: nowrap;
}

/* ---- Иконки ----
   Были эмодзи-символы: рисуются шрифтом системы, на Windows
   вместо второго выводится серый блок «abc». Теперь это маски —
   берут цвет текста и одинаково выглядят везде. */
.mid-guide-binary::before {
    content: "";
    display: inline-block;
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* По категориям — папка */
.mid-guide-binary[data-i="category"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}

/* По алфавиту — сортированный список */
.mid-guide-binary[data-i="alphabet"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9'/%3E%3Cpath d='M4 12h6'/%3E%3Cpath d='M4 17h4'/%3E%3Cpath d='M18 5v14'/%3E%3Cpath d='M15 16l3 3 3-3'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9'/%3E%3Cpath d='M4 12h6'/%3E%3Cpath d='M4 17h4'/%3E%3Cpath d='M18 5v14'/%3E%3Cpath d='M15 16l3 3 3-3'/%3E%3C/svg%3E");
}

/* Hover на неактивном */
.mid-guide-binary:hover {
    color: var(--pb-600, #237150);
    background: rgba(255,255,255,0.7);
}

/* АКТИВНЫЙ */
.mid-guide-binary[data-active="1"] {
    background: linear-gradient(135deg, var(--pb-400, #5aab86) 0%, var(--pb-600, #237150) 100%);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(var(--pb-500-rgb, 47, 141, 99), 0.32);
}
.mid-guide-binary[data-active="1"]:hover {
    color: #ffffff;
    background: linear-gradient(135deg, var(--pb-400, #5aab86) 0%, var(--pb-600, #237150) 100%);
}




a.mid-guide-list-default-block-instructions {
    display: block;
    text-decoration: none;
    color: inherit;
}
a.mid-guide-list-default-block-instructions .mid-guide-list-default-block-title {
    cursor: pointer;
}

.mid-guide-list-heading {
    grid-column: 1 / -1;
    margin: 18px 0 2px;
    padding: 0 4px 2px;
    color: var(--pb-ink, #16241d);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}
.mid-guide-list-heading:first-child {
    margin-top: 4px;
}

/* --- Пустое состояние кастомного тега --- */
#mid-guide-list-custom-tag:empty {
    display: none !important;
}
#mid-guide-list-custom-tag .guide-no-results {
    grid-column: 1 / -1;
    padding: 40px 24px;
    text-align: center;
    color: var(--pb-ink-mute, #7a9185);
    font-size: 16px;
    background: var(--pb-50, #f3f9f5);
    border: 1px dashed var(--pb-200, #c6e0d1);
    border-radius: 16px;
}

/* --- Плавное появление списка при переключении таба --- */
.mid-guide-tab[data-active="1"] {
    animation: guide-fade-in 0.35s ease;
}
@keyframes guide-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Плавное раскрытие тела аккордеона --- */
.mid-guide-list-default-block-list-inner {
    animation: guide-fade-in 0.3s ease;
}

/* --- Скроллбар алфавита --- */
#mid-guide-list-letters-swiper .swiper-scrollbar {
    background: var(--pb-50, #f3f9f5);
}
#mid-guide-list-letters-swiper .swiper-scrollbar-drag {
    background: var(--pb-500, #2f8d63);
}

/* --- Стрелки swiper: неактивное состояние (края списка) --- */
.mid-guide-list-letters__nav.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* --- Sticky-свитчер при скролле длинного списка (опционально) --- */
/*#mid-guide-binary {
    position: sticky;
    top: var(--pb-header-h, 64px);
    z-index: 40;
    background: #fff;
    padding: 6px;
}*/


/* --- Плавный скролл при переходе по букве --- */
html { scroll-behavior: smooth; }


/* ===== Стили скрытых тегов =====
   Теги временно не выводятся (см. page-guide.php).
   Правила ниже оставлены, чтобы при возврате ничего не собирать заново.

.mid-guide-tags-mob-item[data-tag="show-all"] {
    background: linear-gradient(135deg, var(--pb-400, #5aab86), var(--pb-600, #237150));
    color: #fff;
    border-color: transparent;
}
*/