* {
	margin: 0;
	padding: 0;
}

/* === Page layout (moved from layout.html) === */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
#page { flex: 1 0 auto; padding-top: 56px; padding-bottom: 24px; }
.site-footer { flex-shrink: 0; margin-top: auto; }

body {
    background-color: #7a7a91;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	line-height: 1.75;
}


.logo {
	margin: auto 0;
	padding-right: 10%;
	
	font-size: 1.6em;
	font-weight: bold;
	color: #f36d00;
	text-align: center;
}

.logo-img {
    size: 25%;
}
  /* Add a black background color to the top navigation */
.topnav {
    background-color: #373d3d;
    overflow: hidden;
    height: 56px;
    min-height: 56px;
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Сдвигаем верхний рекламный блок ниже липкой шапки */
.ads-top { position: relative; z-index: 1; margin-top: 56px; min-height: 80px; }
@media (max-width: 992px) { .ads-top { position: relative; z-index: 1; margin-top: 56px; min-height: 100px; } }
/* Ensure logo image in nav never overflows */
.topnav a img {
    max-height: 45px;
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f5c800;
    text-align: center;
    padding: 14px 16px; /* keep constant to avoid height change on hover */

    text-decoration: none;
    text-shadow: #fc0 1px 0 10px;
    font-size: 16px;
}
/* Force burger to the right on desktop */
.topnav a.icon {
    float: right;
}

/* Add an active class to highlight the current page */
.active {
    background-color: #373d3d;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}
/* Container for collapsible links */
.topnav .topnav-links { display: flex; gap: 8px; align-items: center; }
.auth-btn-wrap { margin-left: auto; margin-right: 2px; display: flex; align-items: center; }
.auth-btn {
  background: #2563eb;
  color: #fff !important;
  border-radius: 12px;
  padding: 3px 5px !important;
  font-size: 0.85rem;
  line-height: 1.1;
  text-shadow: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.auth-btn:hover { background: #1d4ed8; color: #fff !important; }
.auth-btn.logout { background: #ef4444; }
.auth-btn.logout:hover { background: #dc2626; }

/* Dropdown container - needed to position the dropdown content */
.dropdown {
    float: left;
    overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    color: #f5c800;
    padding: 14px 16px;
    text-shadow: #fc0 1px 0 10px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: relative;
    background-color: #555555;
    min-width: 100%; /* Изменено на 100% */
    box-shadow: 0px 16px 32px 0px rgba(0,0,0,0.2);
    z-index: 1;
    
}

/* Style the links inside the dropdown */
.dropdown-content a {
    float: none;
    color: #f5c800;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #000000;
    color: rgb(250, 151, 2);
    /* do not change padding on hover to keep bar height stable */
}
/* Prevent global hover from affecting mobile expanded container */
@media screen and (max-width: 992px) {
  .topnav.responsive { z-index: 1; }
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
    background-color: #9092bd;
    color: black;
    transform: scale(1.05);
    transition: all 0.6s;
    
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Collapse menu for tablet and below */
@media screen and (max-width: 992px) {
  /* фиксируем саму строку навбара, чтобы не пропадала и не налезала на контент */
  .topnav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    height: 56px; /* фикс высота строки */
    min-height: 56px;
  }
  .logo-link { display: none !important; }
  .topnav .topnav-links { display: none; }
  .topnav a.icon {
    display: block !important;
    position: static !important; /* слева, вместо логотипа */
    margin-left: 8px;
    z-index: 3;
    grid-column: 1;
  }
  .auth-btn-wrap {
    grid-column: 3;
    display: flex; justify-content: flex-end; align-items: center;
    margin-left: 0 !important; padding-right: 8px; z-index: 3; width: auto;
  }
  .topnav .topnav-links a.auth-btn { align-self: flex-end; }
}

/* Expanded state for tablet and below */
@media screen and (max-width: 992px) {
  .topnav { position: sticky; top: 0; z-index: 100; }
  .topnav a.icon { display: block; position: static; margin-left: 8px; z-index: 3; }
  .topnav.responsive { position: relative; height: auto; padding-top: 8px; }
  /* бургер остаётся слева, не позиционируем его вправо */
  .auth-btn-wrap { order: 2; width: 100%; display: flex; justify-content: flex-end; padding: 6px 12px 0; z-index: 3; }
  .topnav.responsive .topnav-links {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #373d3d;
    border-top: 1px solid #555;
    padding-left: 12px; /* offset links from left edge */
  }
  .topnav.responsive .topnav-links a {
    display: block;
    width: 100%;
    padding: 12px 20px; /* extra left padding for nicer alignment */
    text-align: left;
  }
  .topnav.responsive a img { max-width: 160px; max-height: 48px; }
  .topnav.responsive .dropdown { width: 100%; }
  .topnav.responsive .dropdown-content { display: block; position: static; width: 100%; box-shadow: none; }
} 

/* Ротатор: показывать только активный баннер (<a>), JS ставит .active на <a> */
/* Ротатор: область показа 1200x400, центрирование и обрезка переполнений */
/* Rotator responsive sizes: mobile 300x100, desktop 450x150 */
.ad-rotator {
  display: block;
  text-align: center;
  width: 100%;
  max-width: 300px; /* mobile */
  height: 100px;     /* mobile */
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: transparent; /* при необходимости можно задать фон */
  padding: 0; /* исключаем внутренние отступы */
  border-radius: 10px; /* скруглённые углы ротатора */
}
@media (min-width: 992px) {
  .ad-rotator {
    max-width: 450px; /* desktop */
    height: 150px;    /* desktop */
  }
}
.ad-rotator a { display: none; }
/* Активный баннер занимает весь фрейм и центрируется */
.ad-rotator a.active {
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  line-height: 0; /* убираем межстрочные зазоры */
  font-size: 0;   /* исключаем влияние текстовых узлов */
  margin: 0;
  padding: 0;
}
/* Баннеры масштабируются внутрь 1200x400 без искажений */
.ad-rotator img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover; /* заполняем всю область баннера */
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: none !important;
}

/* === Text ad bar under nav === */
.ads-textbar {
  position: relative; /* обычный поток, без прилипания */
  z-index: 1;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 6px 12px;
  background: #33332e;
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
  box-sizing: border-box;
  min-height: 36px;             /* гарантируем высоту */
  display: flex;                 /* вертикальное центрирование */
  align-items: center;
  justify-content: center;       /* горизонтальное центрирование */
}
/* локальные настройки ротатора внутри текстовой полосы */
.ads-textbar.ad-rotator { max-width: 100%; height: auto; min-height: 46px; border-radius: 0; }
.ads-textbar.ad-rotator a { display: none; }
.ads-textbar.ad-rotator a.active {
  display: inline-block !important;
  position: static !important;   /* отменяем absolute у баннерного ротатора */
  width: auto !important;
  height: auto !important;
  line-height: 1.6 !important;
  font-size: 1rem !important;    /* отме��яем font-size:0 у баннерного ротатора */
  text-align: center !important;  /* центрирование текста */
  white-space: normal !important; /* перенос текста */
  overflow-wrap: anywhere !important; /* перенос длинных слов */
  word-break: normal !important;  /* стандартный перенос */
}
/* показываем только активную ссылку; остальным display:none даёт локальное правило выше */
.ads-textbar a {
  display: none;
  color: #02f791;
  text-decoration: none;
  font-size: 0.98rem;
  line-height: 1.6;
}
.ads-textbar a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .ads-textbar {
    padding: 10px 16px;        /* больше вертикальных и горизонтальных отступов */
    min-height: 60px;          /* гарантированная высота для 2 строк */
    overflow: hidden;          /* не позволяем выходить за фон */
    /* flex-wrap отключён: один флекс-ряд */
  }
  .ads-textbar a.active {
    display: inline-block !important; /* компактнее, чем block, не выпирает за паддинги */
    font-size: 0.95rem;
    line-height: 1.4;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;                        /* убираем внешние отступы */
    padding: 0;                       /* и внутренние на всякий случай */
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-align: center !important;
    vertical-align: middle;
  }
}

/* === External ad service slots (320x100 like Google) === */
.ad-service { width:100%; display:flex; justify-content:center; align-items:center; margin:12px auto; }
.ad-service-top { width:100%; margin-top:12px; }
.ad-service-bottom { width:100%; margin:16px 0; }
.ad-service .ad-box { width:320px; height:100px; overflow:hidden; position:relative; display:block; background: transparent; border-radius: 10px; }
/* Force common embed types to the exact size */
.ad-service .ad-box iframe,
.ad-service .ad-box img,
.ad-service .ad-box ins,
.ad-service .ad-box div { width:320px !important; height:100px !important; max-width:320px !important; max-height:100px !important; display:block; margin:0 auto; object-fit: contain; border-radius: 10px; }

.button {
	margin: auto 0;
	
	text-decoration: none;
	color: #0071f1;
}
.nav-hidden-seach {
	display: none;	
}

	

@media screen and (max-width: 960px) {
	.container {
		flex-direction: column;
		align-items: center;
		width: 100%;
	}
	header {
		height: 100%;
	}
	.logo {
		padding-right: 0;
	}
	.nav-hidden-seach {
		display: initial;
	}
	.nav-visible-seach {
		display: none;
		padding: 10px 0;
	}
}
@media screen and (max-width: 510px) {
	nav ul {
		display: flex;
		flex-direction: column;
	}
	nav ul li {
		padding: 10px 0;
	}
}

.contentblock {
    overflow: hidden;
    width: 100%;
    height: 100%;
    text-align: center;
    
}

.contentblock h1 {
    font-size: 2em;
    color: #000000;
    margin: 2% 0;
    text-shadow: 2px 2px 2px rgba(240, 139, 6, 0.521);
    font-weight: bold;
}

.contentblock h2 {
    font-size: 1.5em;
    color: #000000;
    margin: 2% 0;
    font-style: italic;
}

.contentblock p {
    font-size: 1.2em;
    color: #000000;
    margin: 2% 0;
}

.contentblock p.warning {
    font-size: 1.2em;
    color: #fa0101;
    margin: 2% 0;
}

.contentblock a.content {
    color: #ff9100;
    background-color: #373d3d;
    border: double 2px #2f00ff;
    text-decoration: none;
    
}

.list ul {
    list-style-type: none;
    padding: 2px;
    margin: 2px;
}

.list ul li {
    font-size: 1.2em;
    color: #000000;
    margin: 5px 0;
}

.list ul li a {
    color: #381180;
    text-decoration: none;
    text-shadow: #000000 1px 0 1px;
}

.list ul li a:hover {
    color: #ff9100;
    text-decoration: underline;
    scale: 1.05;
    text-shadow: #000000 1px 0 1px;
}


.imgblock {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    width: 100%;
    flex-wrap: wrap;
    gap: 5px;
    padding: 5px;
    
}

.imgblock img {
    width: 150px;
    height: 100px;
    margin: 0 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

form {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #373d3d;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    font-family: 'Arial', sans-serif;
    color: #f5c800;
}

form input[type="number"], form input[type="text"],
form select {
    width: 90%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #0206f7;
    border-radius: 4px;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
}

form button {
    width: 100%;
    padding: 10px;
    background-color: #0206f7;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-family: 'Arial', sans-serif;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

form button:hover {
    background-color: #0674e9;
}

.error {
    color: red;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

.buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.buttons form {
    flex: 1;
}

.buttons button {
    width: 100%;
}

span.green-text {
    color: green;
}

span.red-text {
    color: red;
}

span.date {
    color:#000000
}

footer, .site-footer {
    background-color: #373d3d;
    color: #f5c800;
    text-align: center;
    padding: 20px 0;
    position: relative;
    bottom: 0;
    width: 100%;
    margin-top: 10px;
}

/* Static navigation buttons above footer */
.navigation-buttons{
    position: static;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 8px 12px;
    margin: 20px 0 8px 0;
}

.btn-home {
    display: inline-block;
    padding: 10px 15px;
    background-color: #0056b3;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
}

.btn-home:hover {
    background-color: #0056b3;
    color: #000000;
}


.btn-back {
    display: inline-block;
    padding: 10px 15px;
    background-color: #0056b3 !important;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
}

.btn-back:hover {
    background-color: #0056b3;
    color: #000000;
}

/* Миниатюра изображения */
.thumbnail {
    width: 300px;
    height: auto;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

.thumbnail:hover {
    transform: scale(1.05);
}


.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}


.modal-content {
    max-width: 90%;
    max-height: 90%;
    border-radius: 5px;
}


.close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}

.ad-block {
    overflow: hidden;
    width: 100%;
    text-align: center;
    margin: 20px 0;
}

.ad img {
    width: 300px;
    height: auto;
    margin: 10px;
    display: none; /* Скрываем все изображения по умолчанию */
}

.ad img.active {
    display: inline-block; /* Показываем активное изображение */
}


/* ===== СТИЛИ ДЛЯ СПРАВОЧНИКА БОЛЕЗНЕЙ ===== */

/* Контейнер для сетки болезней */
.diseases-container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 20px;
}

.diseases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.disease-card {
    background-color: #33332e;
    border: 2px solid #0206f7;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
}

.disease-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.disease-card h3 {
    color: #f7b602;
    margin-bottom: 10px;
    font-size: 1.3em;
}

.disease-card p {
    color: #f85b00;
    margin-bottom: 15px;
    font-size: 0.95em;
    line-height: 1.5;
}

.btn-disease {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0206f7;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-disease:hover {
    background-color: #0674e9;
}

/* Раздел поиска */
.search-section {
    background-color: #33332e;
    border: 4px solid #0206f7;
    padding: 20px;
    margin: 30px auto;
    max-width: 1200px;
    border-radius: 5px;
    text-align: center;
}

.search-section h2 {
    color: #f7b602;
    margin-bottom: 10px;
}

.search-section p {
    color: #f85b00;
    margin-bottom: 15px;
}

.btn-search {
    display: inline-block;
    padding: 12px 30px;
    background-color: #0206f7;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.05em;
    transition: background-color 0.3s ease;
}

.btn-search:hover {
    background-color: #0674e9;
}

/* Список болезней по категориям */
.diseases-list-container {
    max-width: 1000px;
    margin: 30px auto;
    padding: 20px;
}

.disease-category {
    margin-bottom: 40px;
    background-color: #33332e;
    padding: 20px;
    border-radius: 8px;
    border: 4px solid #0206f7;
}

.disease-category h2 {
    color: #f7b602;
    margin-bottom: 10px;
    font-size: 1.4em;
}

.category-description {
    color: #f85b00;
    margin-bottom: 15px;
    font-style: italic;
}

.disease-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.disease-list li {
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
}

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

.disease-list a {
    color: #02f791;
    text-decoration: none;
    font-size: 1.05em;
    transition: color 0.3s ease;
}

.disease-list a:hover {
    color: #0674e9;
    text-decoration: underline;
}

.no-diseases {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    padding: 20px;
    border-radius: 5px;
    color: #856404;
    text-align: center;
}

/* Страница деталей болезни */
.disease-detail-container {
    max-width: 900px;
    margin: 30px auto;
    padding: 20px;
}

.disease-section {
    background-color: #33332e;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 4px solid #0206f7;
}

.disease-section h2 {
    color: #f85b00;
    margin-bottom: 15px;
    font-size: 1.3em;
}

.disease-content {
    color: #ffc107;
    line-height: 1.8;
    font-size: 1em;
}

.disease-category,
.disease-fish-type {
    color: #ffc107 !important;
    margin: 10px 0;
    font-size: 1.05em;
}


.symptoms-tags {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
    box-sizing: border-box;
    margin-left: 0;   /* не смещаем блок внутри карточки */
    margin-right: 0;  /* не смещаем блок внутри карточки */
    padding-left: 0;  /* паддинги определяются у .disease-section */
    padding-right: 0; /* паддинги определяются у .disease-section */
    overflow: visible; /* показываем правый радиус тегов */
    min-width: 0;     /* позволяет корректное сжатие внутри flex/grid */
}

.symptoms-tags strong {
    display: block;
    margin-bottom: 10px;
    color: #333;
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;      /* выключаем любые внешние отступы */
    padding: 0;     /* не добавляем внутренних горизонтальных отступов */
    min-width: 0;   /* позволяет корректное сжатие дочерних */
    overflow: visible; /* не обрезаем скругления пузырьков */
}

.symptom-tag {
    display: inline-block;
    background-color: #0206f7;
    color: white;
    padding: 6px 10px;        /* базовый горизонтальный паддинг */
    padding-left: 8px;        /* ближе к левому краю */
    padding-right: 10px;      /* уменьшаем, добавим прозрачный бордер */
    border-right: 6px solid transparent; /* буфер под правый радиус */
    border-radius: 20px;
    font-size: 0.9em;
    margin: 0;                /* отступы между тегами задаёт gap у .tags-list */
    max-width: 100%;
    min-width: 0;             /* разрешаем сжатие внутри flex */
    white-space: nowrap;      /* не переносим одно слово */
    overflow: hidden;         /* обрезаем слишком длинное */
    text-overflow: ellipsis;  /* троеточие для очень длинных */
    box-sizing: border-box;   /* чтобы бордер входил в расчёт ширины */
}

.disease-image-wrapper {
    text-align: center;
}

.image-caption {
    font-size: 0.9em;
    color: #666;
    margin-top: 8px;
}

.warning-box {
    background-color: #fff3cd;
    border: 2px solid #ffc107;
    padding: 20px;
    border-radius: 8px;
    margin: 30px 0;
}

.warning-box p {
    color: #856404;
    margin: 0;
    line-height: 1.6;
}

.related-diseases {
    background-color: #33332e;
    padding: 20px;
    border-radius: 8px;
    margin-top: 30px;
    width: 100%;                 /* занимает всю доступную ширину до max */
    max-width: 900px;            /* ограничение ширины блока */
    margin: 30px auto 0 auto !important;    /* центрирование по горизонтали */
    box-sizing: border-box;      /* корректный учёт паддингов/границ */
    flex: 0 0 auto;              /* не растягивать во флекс-родителе */
    align-self: center;          /* центрирование во флекс-родителе */
    justify-self: center;        /* центрирование в грид-родите��е */
    place-self: center;          /* универсальный шорткат для grid */
}

.related-diseases h2 {
    color: #f85b00;
    margin-bottom: 15px;
}

/* Адаптивность */
@media screen and (max-width: 768px) {
    .diseases-grid {
        grid-template-columns: 1fr;
    }
    
    .disease-section {
        padding: 15px;
    }
    
    .tags-list {
        flex-direction: column;
    }
    
    .symptom-tag {
        width: 100%;
        text-align: center;
    }
}

/* ===== СТИЛИ ДЛЯ СПРАВОЧНИКА ПО РЫБОВОДСТВУ ===== */

/* Контейнер для справочника */
.breeding-container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 20px;
}

/* Основные секции */
.breeding-section {
    margin-bottom: 40px;
}

.breeding-section h2 {
    color: #f7b602;
    margin-bottom: 10px;
    font-size: 1.4em;
}

.breeding-section p {
    color: #000000 !important;
    margin-bottom: 20px;
}

/* Сетка карточек */
.articles-grid, .sections-grid, .farm-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

/* Карточки статей и разделов */
.article-card, .section-card, .farm-type-card {
    background-color: #33332e !important;
    border: 2px solid #0206f7 !important;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.article-card:hover, .section-card:hover, .farm-type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.article-card h3, .section-card h3, .farm-type-card h3 {
    color: #f7b602 !important;
    margin-bottom: 10px;
    font-size: 1.3em;
}

.article-card p, .section-card p, .farm-type-card p {
    color: #f85b00;
    margin-bottom: 15px;
    font-size: 0.95em;
    line-height: 1.5;
}

/* Уровень сложности */
.level {
    display: inline-block;
    padding: 4px 8px;
    background: #aeafdf !important;
    border-radius: 4px;
    color: #f7b602;
    font-size: 12px;
    margin-bottom: 10px;
}

/* Время чтения */
.time {
    color: #f85b00;
    font-size: 14px;
    margin: 10px 0;
}

.article-count {
    color: #f85b00;
    font-size: 14px;
    margin: 10px 0;
}

/* Иконки */
.section-icon, .farm-type-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

/* Кнопки */
/* Общие отступы для всех кнопок вида .btn (bootstrap-совместимо) */
.btn { display: inline-block; margin: 6px; }
.btn-primary { margin: 3px auto 3px auto; }

.btn-constr {
    display: inline-block;
    background-color: #0206f7 !important;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin: 3px auto 3px auto;
    width: 100%;
}

.btn-ind {
    display: inline-block;
    background-color: #373d3d !important;
    color: #f5c800;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin: 3px auto 3px auto;
    width: 50%;
}
.btn-constr:hover { 
    transition: background-color 0.3s ease !important;
    background-color: #0674e9 !important;
}

.btn-ind:hover { 
    transition: background-color 0.3s ease !important;
    background-color: #000000 !important;
}



.btn-read, .btn-read-full {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0206f7 !important;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

.btn-read:hover, .btn-read-full:hover {
    background-color: #0674e9;
}

/* Список статей */
.articles-list {
    margin-bottom: 40px;
}

.article-body {
    color: #000000 !important;
}

.article-item {
    background-color: #33332e !important;
    border: 2px solid #0206f7 !important;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.article-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.article-header {
    margin-bottom: 15px;
    background-color: #33332e;
}

.article-header h2 {
    margin: 0 0 10px 0;
    color: #f7b602 !important;
}

.article-meta {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* Краткое резюме */
.quick-summary {
    background: #2a2a25;
    padding: 15px;
    border-left: 4px solid #0206f7;
    margin: 15px 0;
    border-radius: 4px;
    color: #f85b00;
}

.quick-summary strong {
    color: #f7b602;
}

.quick-summary p {
    margin: 10px 0 0 0;
    color: #f85b00;
}

/* Информация о типе хозяйства */
.farm-type-info {
    background-color: #33332e !important;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 2px solid #0206f7;
}

.farm-type-info h2 {
    margin-top: 0;
    color: #f7b602;
}

.farm-type-info p {
    color: #f85b00;
}

/* Связанные разделы */
.related-sections {
    margin-bottom: 30px;
}

.related-sections h2 {
    margin-bottom: 20px;
    color: #f7b602;
}

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

.section-item {
    background-color: #33332e !important;
    border: 2px solid #0206f7 !important;
    border-radius: 8px;
    padding: 20px;
    transition: all 0.3s ease;
}

.section-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.section-item h3 {
    margin-top: 0;
    color: #f7b602;
}

.section-item p {
    color: #f85b00;
    margin: 10px 0;
}

/* Навигация */
.section-navigation, .navigation {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.btn-nav {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0206f7 !important;
    color: white !important;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.btn-nav:hover {
    background-color: #0674e9;
}

/* Отсутствие контента */
.no-articles, .no-sections {
    text-align: center;
    padding: 40px 20px;
    color: #f85b00;
    background-color: #33332e;
    border-radius: 8px;
    border: 2px solid #0206f7;
}

/* Содержание статьи */
.article-content {
    background-color: #33332e !important;
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 2px solid #0206f7;
}
/* Ensure article text doesn't touch edges */
.article-content, .article-body, .disease-section, .diseases-container, .breeding-container, .disease-detail-container {
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .article-content { padding: 16px; }
    .article-body { padding-left: 6px; padding-right: 6px; }
    .disease-section { padding: 12px; }
    .diseases-container, .breeding-container, .disease-detail-container { padding-left: 12px; padding-right: 12px; }
    /* горизонтальные паддинги у symptoms-tags не задаём, чтобы не было асимметрии */
    .symptoms-tags { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
    .symptom-tag { max-width: 100%; }
}

.article-body {
    line-height: 1.8;
    color: #f85b00;
    margin-bottom: 20px;
}

.article-body p {
    margin-bottom: 15px;
}

/* Отсутствие контента */
.no-content {
    text-align: center;
    padding: 40px 20px;
    color: #f85b00 !important;
    background-color: #33332e !important;
    border-radius: 8px;
    border: 2px solid #0206f7;
}

/* Ключевые моменты */
.key-points {
    background: #2a2a25;
    padding: 15px;
    border-left: 4px solid #0206f7;
    margin-bottom: 20px;
    border-radius: 4px;
    color: #f85b00;
}

.key-points strong {
    color: #f7b602;
}

.key-points ul, .checklist ul {
    margin: 10px 0 0 20px;
    padding: 0;
}

.key-points li, .checklist li {
    margin: 8px 0;
    color: #f85b00;
}

/* Чек-лист */
.checklist {
    background: #2a2a25;
    padding: 15px;
    border-left: 4px solid #0206f7;
    margin: 20px 0;
    border-radius: 4px;
    color: #f85b00;
}

.checklist strong {
    color: #f7b602;
}

.checklist ul {
    list-style: none;
}

.checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checklist input[type="checkbox"] {
    cursor: pointer;
}

/* Связанные болезни и статьи */
.related-diseases, .related-articles {
    background-color: #33332e;
    padding: 15px;
    border-radius: 4px;
    margin: 20px 0;
    border: 2px solid #0206f7;
}

.related-diseases h3, .related-articles h3 {
    margin-top: 0;
    color: #f7b602;
}

.related-diseases ul, .related-articles ul {
    margin: 10px 0 0 20px;
    padding: 0;
}

.related-diseases a, .related-articles a {
    color: #02f791;
    text-decoration: none;
}

.related-diseases a:hover, .related-articles a:hover {
    color: #0674e9;
    text-decoration: underline;
}

/* Изображения */
.article-images {
    margin: 30px 0;
}

.article-images h3 {
    margin-bottom: 15px;
    color: #f7b602;
}

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

.image-item {
    border: 2px solid #0206f7;
    border-radius: 4px;
    overflow: hidden;
    background-color: #33332e;
}

.image-item img {
    width: 100%;
    height: auto;
    display: block;
}

.image-caption {
    padding: 10px;
    background: #2a2a25;
    font-size: 12px;
    color: #f85b00;
    margin: 0;
}

/* Навигация по статьям */
.article-navigation {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    margin: 30px 0;
    padding: 20px;
    background-color: #33332e !important;
    border-radius: 8px;
    border: 2px solid #0206f7;
}

.btn-prev {
    justify-self: start;
}

.btn-next {
    justify-self: end;
}

.btn-up {
    justify-self: center;
}

.back-to-main {
    text-align: center;
    margin-top: 20px;
}

.btn-home {
    background: #0206f7;
}

.btn-home:hover {
    background: #0674e9;
}

/* Адаптивность для справочника */
@media (max-width: 768px) {
    .article-navigation {
        grid-template-columns: 1fr;
    }

    .btn-prev, .btn-next, .btn-up {
        justify-self: auto;
    }

    .article-content {
        padding: 15px;
    }

    .articles-grid, .sections-grid, .farm-types-grid {
        grid-template-columns: 1fr;
    }
}

/* === MOBILE NAV FIX OVERRIDE (should be last) === */
@media screen and (max-width: 992px) {
  .topnav {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center !important;
  }
  .logo-link { display: none !important; }
  .topnav a.icon {
    display: block !important;
    position: static !important;
    grid-column: 1;
    margin-left: 8px;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    z-index: 3;
  }
  .auth-btn-wrap {
    grid-column: 3;
    display: flex !important;
    justify-content: flex-end;
    align-items: center !important;
    width: auto !important;
    margin-left: 0 !important;
    padding-right: 8px;
    z-index: 2;
  }
  .topnav .topnav-links {
    grid-column: 1 / -1;
    display: none !important;
    flex-direction: column;
    gap: 0;
    padding: 6px 6px 6px 6px;
    background: #373d3d;
    border-top: 1px solid #555;
  }
  .topnav.responsive .topnav-links { display: flex !important; }

  /* Force burger dropdown to overlay everything */
  .topnav { position: sticky !important; top: 0 !important; z-index: 5000 !important; }
  .topnav a.icon { position: relative !important; z-index: 5002 !important; }
  .topnav.responsive { position: relative !important; z-index: 5000 !important; }
  .topnav.responsive .topnav-links {
    position: fixed !important;
    top: 56px !important;   /* under the navbar */
    left: 0 !important;
    width: 100% !important;
    z-index: 5001 !important;
    background: #373d3d !important;
    border-top: 1px solid #555 !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100vh - 56px) !important;
    overflow-y: auto !important;
  }
  /* Keep ads textbar below nav/menu */
  .ads-textbar { position: relative !important; z-index: 100 !important; }
}

/* === Feed constructor results === */
.feed-custom-card { max-width: 720px; width: 100%; }
.feed-results { display:flex; flex-direction:column; align-items:center; width:100%; gap:18px; }
.feed-card-header {
  font-size: 1.1rem; background:#f8f9fa; border-bottom:1px solid #e9ecef; letter-spacing:.2px;
}
.feed-card-elevated { border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.06); }

/* === Unified card styles (based on feedcalc) === */
.card-container { max-width: 900px; margin: 0 auto; padding: 16px; }
.card-title { margin: 0; }

/* Contacts page card */
.contacts-card {
  background-color: #33332e;
  border: 2px solid #0206f7;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  padding: 20px;
  color: #f5c800;
}
.contacts-card h1 {
  color: #f7b602;
  margin-bottom: 10px;
}
.contacts-card p { color: #f85b00; }
.contacts-card a { color: #02f791; text-decoration: none; }
.contacts-card a:hover { color: #0674e9; text-decoration: underline; }

/* Primary card container for forms/content (no bg/border by default) */
.card-stack {
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  text-align: left;
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
  word-break: break-word;
}
/* Optional solid variant if needed elsewhere */
.card-stack--solid { background:#33332e; border:2px solid #0206f7; }

/* Reusable result/info card */
.card-box { max-width: 720px; width: 100%; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.06); box-sizing: border-box; margin-left: auto; margin-right: auto;}
.card-box-header { font-size: 1.1rem; background:#f8f9fa; border-bottom:1px solid #e9ecef; letter-spacing:.2px; }
.card-box-elevated { border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.06); }

/* Form grid and fields inside card */
.builder-vertical { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 16px; }
.card-stack .builder-field { padding-right: 4px; }
.builder-field label { display:block; font-weight:600; margin-bottom:6px; color: #f5c800; }
.builder-field input, .builder-field select {
  width: 100%; padding: 10px 12px;
  border:1px solid #cbd5e1; border-radius:6px; box-sizing: border-box; min-width: 0;
}
.builder-field button { padding: 10px 14px; background:#2563eb; color:#fff; border:none; border-radius:6px; cursor:pointer; }
.builder-field button:hover { background:#1d4ed8; }

/* Neutralize global form limits inside cards */
.card-stack form { box-sizing: border-box; }

/* Utilities */
.muted { color:#000000; }
.small { font-size: 0.9em; }
.plain { list-style:none; padding-left:0; }

/* Unified form base */
.form-primary { width: 100%; box-sizing: border-box; }
.form-primary .builder-vertical { width: 100%; box-sizing: border-box; }
.form-primary .builder-field { padding-right: 4px; }
.form-primary .builder-field label { display:block; font-weight:600; margin-bottom:6px; color: #f5c800; }
.form-primary .builder-field input,
.form-primary .builder-field select { width:100%; padding:10px 12px; border:1px solid #cbd5e1; border-radius:6px; box-sizing:border-box; min-width:0; }
.form-primary .builder-field button { padding:10px 14px; background:#2563eb; color:#fff; border:none; border-radius:6px; cursor:pointer; }
.form-primary .builder-field button:hover { background:#1d4ed8; }

@media (max-width: 600px) {
  .card-stack, .card-box { padding-left: 12px; padding-right: 12px; }
}


/* Two-column spacing and row rhythm for tables */
.table-two-col { border-collapse: separate; border-spacing: 0 8px; }
.table-two-col tbody tr td:first-child { padding: 8px 16px 8px 8px; }
.table-two-col tbody tr td:last-child { padding: 8px 8px 8px 16px; }
.table-two-col tbody tr { background: #555; }


/* Numeric column alignment utility (in addition to .text-end) */
.td-num { text-align: right; }

/* Optional subtle row separators for contrast on dark bg */
.table-two-col tbody tr td { border-bottom: 1px dashed rgba(0,0,0,0.08); }
.table-two-col tbody tr:last-child td { border-bottom: none; }