/* static/style.css */
/* --- 1. Основа и переменные --- */
:root {
    --primary-color: #2563eb;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --bg-body: #f1f5f9; /* Чуть темнее, чтобы карточки и шапка выделялись */
    --bg-white: #ffffff;
    --border-color: #e2e8f0;
    --container-width: 1200px;
    --header-height: 80px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
    background-color: var(--bg-body);
}

/* --- 2. Структура Хедера и Футера (на всю ширину) --- */
.site-header, .site-footer {
    width: 100%;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.site-footer {
    border-top: 1px solid var(--border-color);
    margin-top: 40px;
    padding: 40px 0 20px;
}

/* --- 2. Умное центрирование БЕЗ изменения HTML --- */
/* Этот метод вычисляет отступы так, чтобы контент всегда был в центре (1200px) */
.site-header, 
.site-footer, 
main {
    width: 100%;
    padding-left: max(20px, calc((100% - var(--container-width)) / 2));
    padding-right: max(20px, calc((100% - var(--container-width)) / 2));
}

/* --- 3. Хедер (Лого и Навигация) --- */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
}

.logo {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.logo-top {
    display: flex;
    align-items: baseline; 
    gap: 8px; 
}

.logo strong { font-size: 1.2rem; color: var(--primary-color); }

.logo small {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b; /* приглушенный серый, чтобы не спорил с логотипом */
    border-left: 1px solid #e2e8f0; /* тонкая вертикальная черта-разделитель */
    padding-left: 8px;
    white-space: nowrap; /* чтобы надпись не перепрыгнула на новую строку */
}

.logo span { font-size: 0.75rem; }


.site-header nav a {
    text-decoration: none;
    color: var(--primary-color);
    margin-left: 20px;
    font-weight: 500;
}

.site-header nav a:hover { text-decoration: underline; }

/* --- 4. Основной макет (Сайдбар + Контент) --- */
.page-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    padding-top: 30px;
	align-items: start;
}

/* Сайдбар */
.sidebar {
	position: sticky; /* Приклеиваем */
	top: calc(var(--header-height) + 20px); /* Не даём прилипнуть к хедеру */
    display: flex;
    flex-direction: column;
    gap: 20px;
	/* Ограничиваем высоту: 100% экрана минус высота хедера и отступы */
    max-height: calc(100vh - var(--header-height) - 40px); 
    overflow-y: auto; /* Включаем прокрутку, если контент не влезает */
    padding-right: 10px; /* Отступ, чтобы скроллбар не наезжал на текст */
}

/* Настройка полосы прокрутки для сайдбара (в стиле сайта) */
.sidebar::-webkit-scrollbar {
    width: 6px;
}
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

.filter-group {
    background: var(--bg-white);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.filter-group .filter-name { 
    display: block; 
    margin-bottom: 6px; 
    font-size: 0.9rem; 
    font-weight: bold;
}

.filter-group small {
    display: inline-block;
    line-height: 1.6;
}

.filter-group strong { 
    display: block; 
    font-size: 0.9rem; 
}

.filter-group label { 
    display: flex; 
    gap: 10px; 
    font-size: 0.85rem; 
    /* margin-bottom: 8px;  */
    padding: 4px 0;
    /* border-bottom: dotted 1px #64748b; */
    cursor: pointer; 
}
.filter-group select { width: 100%; margin: 8px 0; padding: 8px; border-radius: 4px; border: 1px solid var(--border-color); }
.search-box input { width: 100%; padding: 8px; border-radius: 4px; border: 1px solid var(--border-color); }

/* --- 5. Сетка результатов и карточки --- */
.back-navigation-bar {
    cursor: pointer;
}

.results-header {
    background: var(--bg-white); /* Подложка под "Результаты" */
    padding: 15px 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.agency-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.agency-card:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.agency-card h2 {margin-bottom: 10px; }
.agency-card h2 a { display: block; color: black; font-size: 1.1rem; margin-bottom: 10px; }
.agency-card h3 {margin-bottom: 10px; }
.agency-card h3 a { display: block; color: black; font-size: 1.1rem; margin-bottom: 10px; }
.agency-card a { color: var(--primary-color); text-decoration: none; font-size: 0.85rem; }

.meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0; }
.meta li { font-size: 0.75rem; padding: 4px 8px; border-radius: 4px; background: #f1f5f9; color: var(--text-light); }
.tag-badge { background: #dcfce7 !important; color: #166534 !important; }

.services { font-size: 0.8rem; color: var(--text-light); padding-left: 15px; }

/* --- 6. Кнопки и Утилиты --- */
.btn-emails, .btn-load, .btn-copy {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
}

.pagination-box {
    grid-column: 1 / -1; /* Растягиваем на всю ширину сетки */
    text-align: center;
    margin-top: 40px;
}

.btn-clear { background: none; border: 1px solid var(--border-color); padding: 5px 10px; font-size: 0.8rem; cursor: pointer; width: 100%; margin-top: 10px; }

/* --- 7. Модальное окно --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.modal-content {
    background: white;
    padding: 25px;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

/* --- 8. Футер --- */

.site-footer {
    background: var(--bg-white);
    border-top: 1px solid var(--border-color);
    padding-top: 60px;
    padding-bottom: 30px;
    
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr; /* Колонки */
    gap: 40px;
}

.footer-section-main p {
    font-size: 0.9rem;
    margin-top: 10px;
}

.footer-nav strong {
    display: block;
    margin-bottom: 15px;
    font-size: 0.9rem;
    text-transform: uppercase;

}

.footer-nav { margin-bottom: 20px; }
.footer-title { display: block; margin-bottom: 10px; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; }
.footer-nav ul { list-style: none; }
.footer-nav li { margin-bottom: 8px; }
.footer-nav a { text-decoration: none; color: black; font-size: 0.85rem; }
.footer-nav a:hover { color: var(--primary-color); text-decoration: underline;}
.footer-bottom { grid-column: 1 / -1; border-top: 1px solid var(--border-color); padding-top: 20px; text-align: center; font-size: 0.8rem; }

/* --- 9. Вспомогательные элементы --- */
#cookie-notice {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: #1e293b;
    color: white;
    padding: 15px;
    border-radius: 8px;
    display: none;
    z-index: 3000;
    text-align: center;
}
#cookie-notice button { margin-left: 10px; padding: 5px 10px; cursor: pointer; }

#toTopBtn {
    position: fixed;
    bottom: 80px;
    right: 20px;
    display: none;
    background: var(--primary-color);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

[x-cloak] { display: none !important; }


/* --- 10. Стили модального окна (Детализация) --- */

/* Шапка модалки: разносим заголовок и крестик */
.modal-content header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.modal-content header strong {
    font-size: 1.2rem;
    color: var(--text-dark);
}

/* Кнопка закрытия */
.btn-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-light);
    line-height: 1;
    padding: 5px;
    transition: color 0.2s;
}

.btn-close:hover {
    color: var(--text-dark);
}

/* Тело модалки и кнопка копирования */
.modal-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.btn-copy {
    align-self: flex-start; /* Кнопка не на всю ширину */
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-copy--success {
    background: #10b981; /* Зеленый при успехе */
}

/* Список имейлов */
.email-list {
    list-style: none;
    max-height: 400px; /* Чтобы модалка не уходила за край экрана */
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.email-list li {
    padding: 10px 15px;
    font-family: monospace; /* Имейлы лучше читаются моноширинным шрифтом */
    font-size: 0.9rem;
    color: var(--text-dark);
}

/* Полосатый эффект (чередование цветов) */
.email-list li:nth-child(odd) {
    background-color: var(--bg-white);
}

.email-list li:nth-child(even) {
    background-color: #f8fafc; /* Очень светлый серый */
}

.email-list li:hover {
    background-color: #f1f5f9; /* Подсветка при наведении */
}

/* Скроллбар для списка (опционально, для красоты) */
.email-list::-webkit-scrollbar {
    width: 8px;
}
.email-list::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.email-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}



/* СТИЛИ ДЛЯ СТРАНИЦЫ КОМПАНИЙ ДОЛЖНЫ ИДТИ НИЖЕ*/


/* --- СТИЛИ ЗА СТРАНИЦА НА КОМПАНИЯ (company-page) --- */

/* Основен контейнер за страницата на компанията */
.company-page {
    background-color: var(--bg-white);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px -2px rgba(0,0,0,0.05);
}

/* Обобщен преглед (company-and-permits-summary) */
.company-and-permits-summary {
    margin-bottom: 30px;
}

.company-and-permits-summary h2 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    border-left: 4px solid var(--primary-color);
    padding-left: 15px;
}

.company-and-permits-summary h3 {
    font-size: 1.2rem;

    margin: 25px 0 12px;
}

.company-and-permits-summary p {

    margin-bottom: 15px;
}

.company-and-permits-summary ol {
    padding-left: 25px;
    margin-bottom: 20px;

}

.company-and-permits-summary li {
    margin-bottom: 8px;
}

/* Брой разрешителни (permits-counter) */
.permits-counter {
    background: #f8fafc;
    padding: 10px 15px;
    border-radius: 30px;
    display: inline-block;
    font-size: 0.9rem;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
}

/* Навигация с бейджове (разрешителни) */
.permits-summary nav {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 20px 0 30px;
}

/* Бейдж за разрешително – карта */
.permit-badge-card {
    flex: 1 1 280px;
    max-width: 100%;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px 16px 16px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    display: block;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    position: relative;
    overflow: hidden;
}

.permit-badge-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px -10px rgba(0,0,0,0.1);
    border-color: var(--primary-color);
}

/* Статус (активно/неактивно) */
.badge-status-label {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 20px;
    background: #e6f7e6;
    color: #0a5c0a;
    letter-spacing: 0.3px;
}

.status-active .badge-status-label {
    background: #dcfce7;
    color: #166534;
}

/* Ако има неактивни */
.status-inactive .badge-status-label {
    background: #fee2e2;
    color: #991b1b;
}

/* Заглавие на бейджа (тип и номер) */
.badge-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 10px 0 8px;
    padding-right: 70px; /* място за статуса */
}

.permit-type {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
}

.permit-number {
    font-size: 1rem;
    color: var(--text-light);
    font-weight: 400;
}

/* Мета информация (територия, година) */
.badge-meta {
    font-size: 0.85rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.badge-meta span[title] {
    cursor: help;
    border-bottom: 1px dotted var(--border-color);
}

/* Преглед на услуги (тагове) */
.badge-services-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 10px;
}

.service_tag {
    background: #f1f5f9;
    color: var(--text-dark);
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    white-space: nowrap;
}

/* Долен колонтитул на бейджа (локации) */
.badge-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-light);
    border-top: 1px dashed var(--border-color);
    padding-top: 12px;
    margin-top: 8px;
}

.loc-icon {
    font-size: 1rem;
}

.locations-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.loc-tag {
    background: white;
    border: 1px solid var(--border-color);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    color: var(--text-dark);
}

/* Блок за проверка в регистър */
.registry-check {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    margin: 30px 0 20px;
    border-left: 4px solid var(--primary-color);
}

.btn-external {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-color);
    color: white;
    padding: 12px 20px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 500;
    margin-top: 10px;
    transition: background 0.2s;
    border: none;
    cursor: pointer;
}

.btn-external:hover {
    background: #1d4ed8; /* по-тъмен вариант на primary */
}

/* Присъствие в Google Search */
.search-presence {
    margin: 30px 0;
}

.search-links {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.search-links li a {
    display: block;
    padding: 12px 15px;
    background: #f8fafc;
    border-radius: 30px;
    text-decoration: none;
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    transition: all 0.2s;
    font-size: 0.9rem;
}

.search-links li a:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: translateX(5px);
}

/* --- Пълна карта за разрешително (permit-full-card) --- */
.permit-full-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 25px;
    margin: 30px 0;
    box-shadow: 0 6px 12px -6px rgba(0,0,0,0.1);
    scroll-margin-top: calc(var(--header-height) + 20px); /* за якорни навигации */
}

/* Хедър на картата */
.permit-full-card .card-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--border-color);
}

.card-header h2 {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin: 0;
}

.territory-tag {
    background: #e2e8f0;
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-dark);
}

/* Две колонки в картата (информация и услуги) */
.card-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 30px;
}

@media (max-width: 700px) {
    .card-content-grid {
        grid-template-columns: 1fr;
    }
}

.info-group h3 {
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 15px;
    padding-bottom: 5px;
    border-bottom: 1px dashed var(--border-color);
}

/* Списък данни (dl) */
.data-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 15px;
    align-items: baseline;
}

.data-list dt {
    font-weight: 600;
    color: var(--text-light);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.data-list dd {
    color: var(--text-dark);
    font-size: 0.95rem;
}

.data-list .raw-label {
    color: var(--text-light);
    font-style: italic;
}

.data-list .raw-value {
    font-family: monospace;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
}

.status-termination-box {
    margin-top: 20px;           /* Отстояние от списъка с данни */
    padding: 16px 18px;
    background-color: #fef2f2;  /* Много светъл червен фон – сигнал за неактивност, но ненатрапчив */
    border-left: 4px solid #dc2626; /* Ярка червена лента отляво – акцент върху прекратяването */
    border-radius: 0 10px 10px 0;    /* Само десните ъгли са заоблени, за да не се счупи лявата линия */
    font-size: 0.9rem;
    color: #7f1d1d;             /* Тъмно червено за текста – добра четимост на светлия фон */
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    position: relative;
}

/* Списък услуги */
.services-list {
    list-style: none;
    padding: 0;
}

.services-list li {
    padding: 8px 0 8px 24px;
    position: relative;
    border-bottom: 1px dotted var(--border-color);
}

.services-list li:last-child {
    border-bottom: none;
}

.services-list li::before {
    content: "✓";
    color: var(--primary-color);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Контейнер за офиси */
.offices-container {
    margin-top: 25px;
}

.office-detail-block {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
}

.office-detail-block h3 {
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.office-detail-block h3::before {
    content: "🏢";
    font-size: 1.2rem;
}

/* Подофис (за обслужващи офиси) */
.sub-office {
    background: white;
    border-radius: 10px;
    padding: 18px;
    margin: 15px 0;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.sub-office h4 {
    font-size: 1rem;
    color: var(--text-dark);
    margin-bottom: 12px;
    padding-bottom: 5px;
    border-bottom: 1px dashed var(--border-color);
}

/* Съдържание на офис (адрес + карта) */
.office-info-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 800px) {
    .office-info-content {
        grid-template-columns: 1fr;
    }
}

.address-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.address-text {
    background: white;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.address-text p {
    margin-bottom: 10px;
    word-break: break-word;
}

.parsed-data-list {
    list-style: none;
    padding: 0;
    margin-top: 8px;
    font-size: 0.85rem;
}

.parsed-data-list li {
    padding: 4px 0;
    border-bottom: 1px dashed #e2e8f0;
    display: flex;
    flex-wrap: wrap;
}

.parsed-data-list li strong {
    min-width: 80px;
    color: var(--text-light);
}

.contacts-text {
    background: white;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.contacts-text p {
    margin: 8px 0;
    word-break: break-word;
}

/* Карта (iframe) */
.map-wrapper {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: #f1f5f9;
    height: 200px;
}

.map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Бутон за връщане назад (ако се използва) */
.back-navigation-bar {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 20px;
    padding: 8px 16px;
    background: #f1f5f9;
    border-radius: 30px;
    border: 1px solid var(--border-color);
    transition: background 0.2s;
}

.back-navigation-bar:hover {
    background: #e2e8f0;
}

.back-navigation-bar::before {
    content: "←";
    font-size: 1.2rem;
    line-height: 1;
}

/* --- Малки адаптации за мобилни --- */
@media (max-width: 600px) {
    .company-page {
        padding: 15px;
    }

    .permit-badge-card {
        flex: 1 1 100%;
    }

    .badge-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .badge-status-label {
        position: static;
        display: inline-block;
        margin-bottom: 8px;
    }

    .card-header {
        flex-direction: column;
        gap: 10px;
    }

    .data-list {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .data-list dt {
        margin-top: 8px;
    }

    .data-list dd {
        margin-left: 10px;
    }

    .office-detail-block {
        padding: 15px;
    }

    .map-wrapper {
        height: 180px;
    }
}


/* --- СТИЛИ ДЛЯ КОНТЕНТНЫХ СТРАНИЦ (За проекта, За мен и т.д.) --- */

.content-page {
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
}

.page-body {
    background: var(--bg-white);
    padding: 25px; /* Больше отступов для удобства чтения лонгридов */
    border-radius: 12px;
    border: 1px solid var(--border-color);
    line-height: 1.7; /* Увеличенный межстрочный интервал для текста */
}

/* Заголовки внутри текста */
.page-body h2 {
    font-size: 1.5rem;
    padding-bottom: 0.7rem;
}

.page-body h3 {
    font-size: 1.2rem;
    margin: 25px 0 12px;
}

/* Абзацы и списки */
.page-body p {
    margin-bottom: 1.2rem;
}

.page-body ul, .page-body ol {
    margin-bottom: 1.5rem;
    padding-left: 25px;
}

.page-body li {
    margin-bottom: 8px;
}

/* Стили для кода (фишки проекта) */
.page-body code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
    color: #e11d48; /* Акцентный цвет для кода, чтобы выделялся */
}

/* Разделитель */
.page-body hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 40px 0;
}

/* Стили для ссылок внутри текста */
.page-body a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    transition: opacity 0.2s;
}

.page-body a:hover {
    opacity: 0.7;
}

/* Адаптивность для мобильных */
@media (max-width: 600px) {
    .page-body {
        padding: 20px; /* Уменьшаем внутренние отступы на мобилках */
    }
}

@media (max-width: 900px) {
    .page-layout { grid-template-columns: 1fr; }
	.sidebar { 
        position: static; /* ОТМЕНЯЕМ sticky на маленьком экране */
		max-height: none; /* Убираем ограничение высоты */
        overflow-y: visible; /* Убираем внутреннюю прокрутку */
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-right: 0;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .site-header { 
        height: auto; 
        padding-top: 15px;
        padding-bottom: 15px;
        flex-direction: column; 
        gap: 15px; 
    }
    nav { 
        margin-left: 0; display: flex; flex-wrap: wrap; justify-content: center;
    }

}

@media (max-width: 600px) {

    .page-layout {
        gap: 18px;
    }

    .site-header { height: auto; padding-top: 15px; padding-bottom: 10px; flex-direction: column; gap: 5px; }

    nav { gap: 15px; }
    
    .site-header nav a {
        font-size: 0.8rem;
    }

    .sidebar {
        padding-bottom: 0; 
        margin-bottom: 0;
    }

    .results-header {
        background: var(--bg-white);
        padding: 15px 20px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }

    .results-header h1 {
        line-height: 1.8rem;
        font-size: 1.2rem;
    }

    .results-header h2 {
        line-height: 1.4rem;
        font-size: 1.0rem;
    }

    .btn-emails {
        padding: 6px 6px;
    }

    .page-body h2 {
        font-size: 1.2rem;
        line-height: 1.6rem;
        padding-bottom: 0.7rem;

    }

    .site-footer { 
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 30px;
        padding-bottom: 0px;  
        text-align: center;
     }
    .footer-nav {
        display: flex;
        flex-direction: column;
        gap: 0px;
        margin-bottom: 0px;
    }

    .footer-nav li {
        margin-bottom: 4px;
    }
    .footer-nav strong {
        margin-bottom: 8px;
    }
}

/* Состояние по умолчанию (Десктоп) */
.filters_toggle {
    display: none; /* Скрыто на ПК */
    background: #f0f0f0;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-weight: bold;
}

#sidebarWrapper {
    display: block; /* Всегда видно на ПК */
}


/* Мобильная логика (меньше 900px) */
@media (max-width: 900px) {
    .filters_toggle {
        display: block; /* Показываем кнопку */
    }

    #sidebar_wrapped {
        display: none; /* Скрываем сайдбар по умолчанию */
    }

    /* Класс, который мы будем добавлять через JS */
    .sidebar-opened #sidebar_wrapped {
        display: block;
        margin-bottom: 20px;
    }
}