/* ==========================================================================
   СТИЛИ КЕЛЕЙНОГО РЕЖИМА
   ========================================================================== */
                        
@font-face {
     font-family: 'Ponomar Unicode';
     src: url('/wp-content/uploads/fonts/PonomarUnicode.woff2') format('woff2'),
     url('/wp-content/uploads/fonts/PonomarUnicode.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
  }

@font-face {
     font-family: 'Irmologion';
     src: url('/wp-content/uploads/fonts/Irmologion.woff2') format('woff2'),
     url('/wp-content/uploads/fonts/Irmologion.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
 }
    @font-face {
     font-family: 'Blago';
     src: url('/wp-content/uploads/fonts/Blago.woff2') format('woff2'),
     url('/wp-content/uploads/fonts/Blago.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
  }

@font-face {
     font-family: 'Triod';
     src: url('/wp-content/uploads/fonts/Triod.woff2') format('woff2'),
     url('/wp-content/uploads/fonts/Triod.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
 }
 
@font-face {
     font-family: 'Tristan';
     src: url('/wp-content/uploads/fonts/Tristan.woff2') format('woff2'),
     url('/wp-content/uploads/fonts/Tristan.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
  }

@font-face {
     font-family: 'Karmen';
     src: url('/wp-content/uploads/fonts/Karmen.woff2') format('woff2'),
     url('/wp-content/uploads/fonts/Karmen.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
 }
@font-face {
     font-family: 'Journal';
     src: url('/wp-content/uploads/fonts/Journal.woff2') format('woff2'),
     url('/wp-content/uploads/fonts/Journal.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
  }

@font-face {
     font-family: 'Garamond';
     src: url('/wp-content/uploads/fonts/Garamond.woff2') format('woff2'),
     url('/wp-content/uploads/fonts/Garamond.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
 }
@font-face {
     font-family: 'ComicSans';
     src: url('/wp-content/uploads/fonts/ComicSans.woff2') format('woff2'),
     url('/wp-content/uploads/fonts/ComicSans.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
  }

/* CSS Переменные для цветовых тем */
.kelej-overlay[data-theme="dark"] {
    --k-bg: #121110;
    --k-text: #e6dfd5;
    --k-head: #f5eedc;
    --k-link: #d4af6e;
    --k-red: #d44d4d;
    --k-border: #2a2a2a;
    --k-btn-bg: transparent;
    --k-btn-border: #444;
    --k-btn-hover: #333;
}
.kelej-overlay[data-theme="cream"] {
    --k-bg: #fdfbf7;
    --k-text: #4a4541;
    --k-head: #2c2c2c;
    --k-link: #8c6a32;
    --k-red: #b22222;
    --k-border: #e8e2dc;
    --k-btn-bg: transparent;
    --k-btn-border: #dcd6ce;
    --k-btn-hover: #eae5df;
}
.kelej-overlay[data-theme="gray"] {
    --k-bg: #4b4b4d;
    --k-text: #e6e6e6;
    --k-head: #ffffff;
    --k-link: #d4af6e;
    --k-red: #ff7878;
    --k-border: #626262;
    --k-btn-bg: transparent;
    --k-btn-border: #777777;
    --k-btn-hover: #555555;
}
.kelej-overlay[data-theme="white"] {
    --k-bg: #ffffff;
    --k-text: #1a1a1a;
    --k-head: #000000;
    --k-link: #0056b3;
    --k-red: #cc0000;
    --k-border: #eeeeee;
    --k-btn-bg: transparent;
    --k-btn-border: #cccccc;
    --k-btn-hover: #f0f0f0;
}

/* Кнопка запуска: Справа, напротив меню, радиус 25 */
.kelej-launcher-btn {
    position: fixed;
    top: 65px;
    left: 20px;
    z-index: 99990; 
    background: #1a1a1a;
    color: #e6dfd5;
    border: 1px solid #333;
    padding: 10px 18px;
    border-radius: 25px; 
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    font-family: 'Lora', Georgia, serif;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}
.kelej-launcher-btn:hover {
    background: #2a2a2a;
    transform: translateY(-2px);
}

@media (max-width: 782px) { 
    .kelej-launcher-btn { 
        top: 80px; 
        right: 15px; 
        left: auto; 
        padding: 8px 14px; 
        font-size: 13px; 
        opacity: 0.65; /* Управляет прозрачностью (от 0 до 1, где 1 — полностью непрозрачная) */
    }
    /* Делаем полностью видимой при касании пальцем */
    .kelej-launcher-btn:active {
        opacity: 1; 
    }
}

/* Оверлей-контейнер и эффект свечения */
.kelej-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--k-bg); 
    z-index: 999999;
    overflow-y: auto;
    overflow-x: hidden; /* Запрещаем горизонтальный скролл всего экрана */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s, background-color 0.3s ease;
}

.kelej-overlay::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    box-shadow: inset 0 0 120px rgba(250, 160, 60, 0.12), inset 0 0 40px rgba(250, 160, 60, 0.08);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 9999999;
}
.kelej-overlay.glow-active::after {
    opacity: 1;
}

.kelej-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Панель управления */
.kelej-toolbar {
    position: sticky;
    top: 0;
    background: var(--k-bg);
    opacity: 0.97;
    box-sizing: border-box; 
    padding: 15px 30px;
    display: flex;
    justify-content: center; /* Центрируем весь блок инструментов на ПК */
    align-items: center;
    border-bottom: 1px solid var(--k-border);
    z-index: 10;
    transition: background-color 0.3s ease;
}

.kelej-toolbar-left {
    flex-shrink: 0; 
    position: absolute; /* Фиксируем строго слева на ПК */
    left: 30px;
}

.kelej-toolbar-right {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
}

@media (max-width: 768px) {
    .kelej-toolbar { 
        padding: 8px 15px; 
        justify-content: space-between; /* Возвращаем нормальное поведение на мобильных */
    } 
    
    .kelej-toolbar-left {
        position: static; /* Убираем абсолютное позиционирование на мобильных */
        margin-right: 15px;
    }

    .kelej-toolbar-right {
        overflow-x: auto; /* Скролл только на мобильных */
        scrollbar-width: none; /* Скрываем полосу прокрутки в Firefox */
        -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
    }
    .kelej-toolbar-right::-webkit-scrollbar {
        display: none; /* Скрываем полосу прокрутки в Chrome/Safari */
    }
}

/* Переключатель тем */
.kelej-theme-switcher {
    display: flex;
    gap: 8px;
    margin-right: 10px;
    align-items: center;
}
.kelej-theme-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid;
    cursor: pointer;
    transition: transform 0.2s;
}
.kelej-theme-btn:hover {
    transform: scale(1.15);
}
.kelej-theme-btn.active {
    outline: 2px solid var(--k-link);
    outline-offset: 2px;
}

/* Универсальные стили для ВСЕХ кнопок и списков (Одинаковый размер) */
.kelej-toolbar-btn {
    background: var(--k-btn-bg);
    color: var(--k-text);
    border: 1px solid var(--k-btn-border);
    padding: 0 14px;
    height: 34px; /* Жесткая высота для равенства элементов */
    line-height: 32px;
    box-sizing: border-box;
    vertical-align: middle;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Lora', Georgia, serif;
    font-size: 14px;
    transition: all 0.2s;
    flex-shrink: 0;
}
.kelej-toolbar-btn:hover { background: var(--k-btn-hover); }

.font-btn { font-weight: bold; width: 40px; padding: 0; text-align: center; }

/* Стилизация выпадающего списка шрифтов и языков */
.font-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 30px;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23888888" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    max-width: 180px; 
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Контейнер чтения */
.kelej-reader-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 50px 20px 120px 20px;
    font-family: 'Lora', Georgia, serif; 
}

.kelej-reader-title {
    color: var(--k-head) !important;
    font-family: inherit !important;
    font-size: 2.2em !important;
    margin-bottom: 40px;
    text-align: center;
    line-height: 1.3;
    border-bottom: 1px dashed var(--k-border);
    padding-bottom: 25px;
}

#kelej-reader-content {
    font-size: 22px; 
    line-height: 1.8;
    text-align: left;
    color: var(--k-text); 
}

/* Тотальное уничтожение фонов и рамок внутри контента, чтобы не оставалось артефактов верстки */
#kelej-reader-content * {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Адаптивные заголовки внутри контента */
#kelej-reader-content h2 { font-size: 1.6em !important; color: var(--k-head) !important; font-family: inherit !important; margin-top: 1.5em; margin-bottom: 0.8em; }
#kelej-reader-content h3 { font-size: 1.4em !important; color: var(--k-head) !important; font-family: inherit !important; margin-top: 1.5em; margin-bottom: 0.8em; }
#kelej-reader-content h4 { font-size: 1.2em !important; color: var(--k-head) !important; font-family: inherit !important; margin-top: 1.5em; margin-bottom: 0.8em; }

#kelej-reader-content p {
    margin-bottom: 1.5em;
}

/* Блокируем скролл на самом сайте при открытом оверлее */
body.kelej-no-scroll {
    overflow: hidden !important;
}