/* =================================================================
   STYLES.CSS - КАЛКМАН (FINAL FIX)
   ================================================================= */

:root {
    --bg: #fff;
    --bg-lighter: #f8f9fa;
    --bg-darker: #f0f2f5;
    --bg-black: #1a252f;
    --tt: #2c3e50;
    --tt-colored: #1a252f;
    --tt-lighter: #6c757d;
    --tt-lighter-2: #95a5a6;
    --tt-lightest: #adb5bd;
    --tt-lightest-2: #bdc3c7;
    --accent: #34495e;
    --accent-link: #5278b1;
    --bdc: #e9ecef;
    --bdc-darker: #dee2e6;
    --bsh: 0 2px 8px rgba(0,0,0,0.1);
    --bsh-2: 0 4px 16px rgba(0,0,0,0.15);
    --ui-bg: #fff;
    --ui-bg-darker: #f8f9fa;
    --max-width: 1480px;
    
    /* Стандартные отступы для ПК */
    --indent: 20px;
    --indent-negative: -20px;
}

/* === АДАПТИВНЫЕ ПЕРЕМЕННЫЕ (FIX ДЛЯ МОБИЛЬНЫХ) === */
@media screen and (max-width: 768px) {
    :root {
        --indent: 15px;
        --indent-negative: -15px;
    }
    body { overflow-x: hidden; }
}

/* === СБРОС И БАЗА === */
* {margin: 0; padding: 0; box-sizing: border-box;}
html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body {
    font-family: 'Arsenal', 'Roboto', sans-serif; font-size: 15px; line-height: 1.6; 
    color: var(--tt); background: var(--bg);
}
article, aside, footer, header, nav, section {display: block;}
img {max-width: 100%; height: auto; border: 0; vertical-align: middle;}
a {color: var(--accent); text-decoration: none; transition: all 0.3s ease;}
a:hover {color: var(--tt);}
button {font-family: inherit; cursor: pointer; border: 0; background: none;}
ul, ol {list-style: none;}
input, textarea, select {font-family: inherit; font-size: inherit;}
table {border-collapse: collapse; border-spacing: 0;}

/* === ТИПОГРАФИКА === */
h1, h2, h3, h4, h5, h6 {font-weight: 700; line-height: 1.3; color: var(--tt-colored); margin-bottom: 20px;}
h1 {font-size: 32px;}
h2 {font-size: 28px;}
h3 {font-size: 24px;}
h4 {font-size: 20px;}
h5 {font-size: 18px;}
h6 {font-size: 16px;}
p {margin-bottom: 15px;}
strong, b {font-weight: 700;}
em, i {font-style: italic;}

/* === УТИЛИТЫ === */
.d-flex {display: flex;}
.d-grid {display: grid;}
.d-block {display: block;}
.d-none {display: none;}
.ai-center {align-items: center;}
.jc-center {justify-content: center;}
.jc-space-between {justify-content: space-between;}
.flex-grow-1 {flex-grow: 1;}
.line-clamp {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.img-fit-cover {position: relative; overflow: hidden;}
.img-fit-cover img {width: 100%; height: 100%; object-fit: cover; display: block;}

/* =================================================================
   LAYOUT И ШАПКА
   ================================================================= */
.wrapper {min-width: 320px; position: relative; padding-top: 30px; background: url(../images/dbbg.webp) center top / cover no-repeat fixed; min-height: 100vh;}
.wrapper-container {max-width: var(--max-width); margin: 0 auto; position: relative; z-index: 20;}
.wrapper-main {
    padding: 0 var(--indent); 
    min-height: 100vh; background: var(--bg-lighter); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.05);
}
.content {margin: 40px 0 60px 0; min-height: 80vh;}

.header {position: relative; z-index: 50;}
.header__one {
    position: relative; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap;
    background: linear-gradient(135deg, #1a1f2e 0%, #2c3e50 50%, #34495e 100%);
    margin: 0 var(--indent-negative); padding: 12px var(--indent); box-shadow: 0 2px 8px rgba(0,0,0,0.15); min-height: 70px;
}

.logo {display: flex; align-items: center; justify-content: center; height: 70px; margin-right: 15px; position: relative; transition: transform 0.3s ease;}
.logo:hover {transform: scale(1.02);}
.logo img {max-height: 100%; width: auto; max-width: 200px; object-fit: contain; display: block;}

/* === МЕНЮ ПК === */
.nav__list {gap: 8px; display: flex; align-items: center; padding: 0 10px; flex-wrap: wrap;}
.nav__list > li {position: relative;}
.nav__list > li > a {
    height: 70px; display: flex; align-items: center; justify-content: center;
    color: #fff; transition: all 0.3s ease; padding: 0 8px; font-size: 14.5px; font-weight: 500;
}
.nav__list > li > a:hover {color: rgba(255,255,255,0.7);}
.submenu > a::after {
    content: "\f107"; font-weight: 300; font-family: 'Font Awesome 5 Pro'; 
    margin-left: 5px; display: inline-block; font-size: 12px;
}
.nav__list-hidden {
    width: 260px; padding: 15px; border-radius: 0 0 8px 8px; position: absolute; left: 0; top: 100%; 
    background: var(--bg-lighter); box-shadow: var(--bsh-2); display: flex; flex-direction: column; gap: 4px; 
    visibility: hidden; opacity: 0; transform: translateY(20px); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.submenu:hover .nav__list-hidden {visibility: visible; opacity: 1; transform: translateY(0);}
.nav__list-hidden a {
    color: var(--tt); padding: 8px 12px; border-radius: 4px; transition: all 0.2s ease; font-size: 14px;
}
.nav__list-hidden a:hover {background: var(--bg-darker); color: var(--accent); padding-left: 16px;}

/* === МОБИЛЬНОЕ МЕНЮ === */
.header__btn-menu {display: none; width: 40px; height: 40px; padding: 0; font-size: 24px; color: #fff; background: rgba(255,255,255,0.1); border-radius: 4px; align-items: center; justify-content: center;}
.header__btn-menu:hover {background: rgba(255,255,255,0.2);}

.mobile-menu {
    width: 280px; height: 100%; overflow-x: hidden; overflow-y: auto; padding: 20px;
    z-index: 999; position: fixed; left: -320px; top: 0; transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--bg-lighter); color: var(--tt); box-shadow: 4px 0 16px rgba(0,0,0,0.1);
}
.mobile-menu.is-active {left: 0;}
.mobile-menu-close {
    cursor: pointer; display: block; left: 290px; top: -40px; position: fixed; z-index: 999;
    width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 18px; border-radius: 50%;
    background: #e84e36; color: #fff; transition: top 0.4s, opacity 0.4s; opacity: 0; box-shadow: 0 2px 8px rgba(232,78,54,0.4);
}
.mobile-menu-close.is-active {top: 20px; opacity: 1;}
body.mobile-menu-is-opened {overflow: hidden; width: 100%; height: 100%;}

.mobile-menu ul {display: flex; flex-direction: column; gap: 8px;}
.mobile-menu ul > li > a {
    display: block; padding: 12px 15px; border-radius: 8px; color: var(--tt); font-size: 16px; font-weight: 500;
    background: var(--ui-bg); border: 1px solid var(--bdc); transition: all 0.3s ease;
}
.mobile-menu ul > li > a:hover {color: var(--accent); border-color: var(--accent); transform: translateX(4px);}

.overlay {
    position: fixed; z-index: 998; left: 0; top: 0; width: 100%; height: 100%;
    opacity: 0.6; background: #000; cursor: pointer; display: none;
}

/* === ПОИСК === */
.header-search-module {position: relative; margin-left: auto; display: flex; align-items: center;}
.search-icon-btn {
    width: 44px; height: 44px; border-radius: 50%; background: transparent; 
    color: #fff; display: flex; align-items: center; justify-content: center; 
    transition: background 0.3s ease; padding: 0; border: none; cursor: pointer;
}
.search-icon-btn svg {
    width: 24px !important; height: 24px !important; min-width: 24px; stroke-width: 2.5; display: block;
}
.search-icon-btn:hover, .header-search-module.is-open .search-icon-btn {background: rgba(255, 255, 255, 0.15);}

.search-dropdown-panel {
    position: absolute; top: 100%; right: 0; margin-top: 12px; width: 340px;
    background: #fff; border-radius: 8px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); padding: 15px;
    visibility: hidden; opacity: 0; transform: translateY(-15px); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100;
}
.search-dropdown-panel::before {
    content: ''; position: absolute; top: -6px; right: 16px; width: 14px; height: 14px; 
    background: #fff; transform: rotate(45deg); border-radius: 2px;
}
.header-search-module.is-open .search-dropdown-panel {visibility: visible; opacity: 1; transform: translateY(0);}

.search-dropdown-inner {display: flex; gap: 10px;}
.search-dropdown-input {
    flex-grow: 1; height: 42px; padding: 0 15px; border: 1px solid var(--bdc); 
    border-radius: 6px; font-size: 15px; color: var(--tt-colored); transition: border-color 0.3s ease;
}
.search-dropdown-input:focus {outline: none; border-color: var(--accent-link); box-shadow: 0 0 0 3px rgba(82, 120, 177, 0.1);}
.search-dropdown-submit {
    height: 42px; padding: 0 20px; background: var(--accent); color: #fff; 
    border-radius: 6px; font-weight: 600; font-size: 14px; transition: all 0.3s ease;
}
.search-dropdown-submit:hover {background: var(--accent-link); transform: translateY(-1px);}

@media screen and (max-width: 1220px) {
    .header-search-module {margin-right: 15px;}
}
@media screen and (max-width: 590px) {
    .search-dropdown-panel {position: fixed; top: 75px; left: 15px; right: 15px; width: auto; margin-top: 0;}
    .search-dropdown-panel::before {display: none;}
}

/* === АДАПТИВНОСТЬ ШАПКИ === */
@media screen and (max-width: 1300px) {
    .nav__list > li > a {font-size: 13.5px; padding: 0 6px;}
}
@media screen and (max-width: 1220px) {
    .header .nav__list {display: none;}
    .header__btn-menu {display: inline-flex;}
}
@media screen and (max-width: 768px) {
    .logo {width: 56px; height: 56px; flex: 0 0 56px; margin-right: 8px;}
    .logo picture {width: 100%; height: 100%; display: block;}
    .logo img {width: 100% !important; height: 100% !important; object-fit: contain;}
}

/* =================================================================
   СЕТКА И КАРТОЧКИ (СТАРЫЕ И НОВЫЕ)
   ================================================================= */
.cols {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-bottom: 80px;}
.col-main {grid-column: span 3; padding-right: 60px;}
.col-side {margin: 0;}

@media screen and (max-width: 1220px) {
    .cols {grid-template-columns: repeat(2, minmax(0, 1fr));}
    .col-main {padding-right: 0;}
    .col-side {grid-column: 1 / -1; padding-top: 20px;}
}
@media screen and (max-width: 590px) { .cols {grid-template-columns: minmax(0, 1fr);} }

.item {position: relative; display: block; color: var(--tt); transition: all 0.3s ease;}
.item__img {margin-bottom: 20px; position: relative; overflow: hidden; border-radius: 6px;}
.item__img img {width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,.61,.36,1);}
.item:hover .item__img img {transform: scale(1.05);}
.item__title {margin-bottom: 10px; font-weight: 700;}
.item__title a {color: inherit;}
.item__title a:hover {color: var(--accent-link); text-decoration: underline;}
.item__meta {color: var(--tt-lighter); gap: 10px; margin-bottom: 10px; font-size: 12px;}

.grid-item {padding: 16px; background: #fff; border: 1px solid var(--bdc); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.04); transition: transform .12s ease;}
.grid-item:hover {transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08);}
.grid-item .item__title .line-clamp {font-size: 18px;}

/* Сетка карточек калькуляторов */
.calculators-list #dle-content {
    display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important; align-items: stretch !important;
}

.calc-card {
    display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--bdc);
    border-radius: 12px; padding: 20px; position: relative; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 2px 8px rgba(0,0,0,0.02); height: 100%; box-sizing: border-box;
}
.calc-card:hover {transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); border-color: #bdc3c7;}
.calc-card__icon {
    width: 56px; height: 56px; flex-shrink: 0; background: linear-gradient(135deg, rgba(82, 120, 177, 0.1) 0%, rgba(82, 120, 177, 0.05) 100%);
    color: var(--accent-link); border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;
}
.calc-card__icon svg {width: 28px; height: 28px; display: block;}
.calc-card:hover .calc-card__icon {background: var(--accent-link); color: #fff; transform: scale(1.05) rotate(-3deg);}
.calc-card__body {display: flex; flex-direction: column; justify-content: center; gap: 6px; flex-grow: 1;}
.calc-card__category {display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tt-lighter); position: relative; z-index: 2;}
.calc-card__category a {color: var(--tt-lighter); transition: color 0.2s ease;}
.calc-card__category a:hover {color: var(--accent-link); text-decoration: underline;}
.calc-card__title {margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3;}
.calc-card__link {color: var(--tt-colored); text-decoration: none;}
.calc-card__link::after {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;}
.calc-card:hover .calc-card__link {color: var(--accent-link);}

@media screen and (max-width: 950px) {
    .calculators-list #dle-content {grid-template-columns: 1fr !important; gap: 15px !important;}
}
@media screen and (max-width: 480px) {
    .calc-card {padding: 15px; gap: 15px;}
    .calc-card__icon {width: 48px; height: 48px;}
    .calc-card__icon svg {width: 24px; height: 24px;}
    .calc-card__title {font-size: 16px;}
}

/* =================================================================
   СТРАНИЦА МАТЕРИАЛА (FULLSTORY) - ОБЪЕДИНЕННАЯ ЛОГИКА
   ================================================================= */
/* Сетка для страницы калькулятора (контент слева, сайдбар справа) */
.page--cols {
    display: grid;
    gap: 30px;
    grid-template-columns: minmax(0, 1fr) 280px; /* Сайдбар 280px */
}
.page__col-main {padding-right: 0;}
.page__col-right {margin: 0; height: 100%;}

/* Липкий сайдбар на ПК */
.sidebar__inner {
    position: sticky;
    top: 20px; /* Отступ от верхнего края экрана при скролле */
    display: flex; 
    flex-direction: column; 
    gap: 30px;
    height: max-content;
}

/* Стили заголовков и крошек */
.calc-page {display: flex; flex-direction: column; gap: 10px;}
.calc-page__header {margin-bottom: -10px;}
.calc-page__title {font-size: 32px; color: var(--tt-colored); font-weight: 700; margin: 0; line-height: 1.2;}
.calc-page__breadcrumbs {
    font-size: 14px; color: var(--tt-lighter); background: var(--bg-lighter);
    padding: 10px 10px; border-radius: 8px; border: 1px solid var(--bdc);
}
.calc-page__breadcrumbs a {color: var(--accent-link);}
.calc-page__breadcrumbs a:hover {text-decoration: underline;}

/* Контейнер самого приложения (калькулятора) */
.calc-page__app-container {
    background: var(--ui-bg); border: 1px solid var(--bdc); border-radius: 12px;
    padding: 30px; box-shadow: var(--bsh); position: relative; overflow: hidden;
}

/* Статья Wiki и текст */
.article-meta-modern {background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border: 1px solid #dee2e6; border-radius: 12px; padding: 18px 20px; margin-bottom: 25px;}
.full-text {line-height: 1.6; font-size: 17px; word-wrap: break-word;}
.full-text a {text-decoration: underline; color: #5278b1;}
.full-text img, .full-text p, .full-text h2, .full-text h3 {margin-bottom: 20px;}

/* Баннеры */
.calc-page__banner {display: flex; justify-content: center; align-items: center; background: var(--bg-lighter); border-radius: 8px; overflow: hidden;}
.calc-page__related {margin-top: 5px; border-top: 1px solid var(--bdc); padding-top: 40px;}

/* === ГЛАВНЫЙ АДАПТИВ (ПЛАНШЕТЫ И МОБИЛЬНЫЕ) === */
@media screen and (max-width: 1024px) {
    .page--cols {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    
    /* FIX: Заставляем основную колонку сжиматься, если контент широкий */
    .page__col-main {
        width: 100%;
        min-width: 0; /* Критично для Flex-элементов */
        padding-right: 0;
    }

    .page__col-right {
        width: 100%;
        margin-top: 20px;
        border-top: 1px solid var(--bdc);
        padding-top: 30px;
    }
    .sidebar__inner {
        position: static; /* Отключаем липкость */
    }
    .calc-page__title { font-size: 24px; }
    .calc-page__app-container { padding: 15px; }
    .calc-page__breadcrumbs { font-size: 13px; padding: 10px 15px; }
}

@media screen and (max-width: 1220px) {
    .wrapper {padding: 0; background-image: none;}
    /* Здесь компенсируем отступы для всего сайта */
    .wrapper-container {max-width: 100%; padding: 0 var(--indent);}
}

/* =================================================================
   WIKI БЛОК (СТАТЬЯ ИЗ НЕЙРОСЕТИ) - ОФОРМЛЕНИЕ
   ================================================================= */
.calc-page__wiki {
    background: var(--ui-bg); border: 1px solid var(--bdc); border-radius: 12px;
    padding: 30px; box-shadow: var(--bsh); overflow: hidden; max-width: 100%;
}
.calc-page__wiki .cm-body {overflow-wrap: break-word; word-wrap: break-word; word-break: break-word;}

/* Быстрый ответ */
.calc-page__wiki .cm-quick-answer {
    background: var(--bg-lighter); border-left: 4px solid var(--accent);
    padding: 15px 20px; margin-bottom: 25px; border-radius: 0 8px 8px 0; font-size: 16px;
}
/* Адаптивные таблицы */
.calc-page__wiki .cm-body table {
    width: 100%; margin-bottom: 20px; border: 1px solid var(--bdc);
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
}
.calc-page__wiki .cm-body th {
    background: var(--bg-lighter); padding: 12px 15px; text-align: left;
    border-bottom: 2px solid var(--bdc-darker); color: var(--tt-colored); font-weight: 700;
}
.calc-page__wiki .cm-body td {padding: 12px 15px; border-bottom: 1px solid var(--bdc);}
/* Списки */
.calc-page__wiki .cm-body ul {padding-left: 20px; list-style-type: disc; margin-bottom: 20px;}
.calc-page__wiki .cm-body ul li {margin-bottom: 8px;}

@media screen and (max-width: 768px) {
    .calc-page__wiki {padding: 15px;}
    .calc-page__wiki .cm-quick-answer {padding: 15px; font-size: 14px;}
}

/* =================================================================
   САЙДБАР ЭЛЕМЕНТЫ
   ================================================================= */
.sect:not(:last-child) {margin-bottom: 80px;}
.sect__title {font-size: 28px; color: var(--tt-colored); font-weight: 700; margin-bottom: 30px;}
.side-block:not(:last-child) {margin-bottom: 40px;}
.side-block__title {font-size: 20px; font-weight: 700; color: var(--tt-colored); margin-bottom: 15px;}
.side-block__content {display: flex; flex-direction: column; gap: 12px;}

/* Баннер в сайдбаре */
.sidebar__banner {
    display: flex; justify-content: center; align-items: center; background: #fff;
    border: 1px solid var(--bdc); border-radius: 12px; padding: 15px;
    min-height: 200px; box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.sidebar__banner img, .sidebar__banner ins {max-width: 100%; display: block;}

/* Пункты популярных калькуляторов */
.side-calc {
    display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px;
    background: #fff; border: 1px solid var(--bdc); transition: all 0.2s ease;
    text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,0.01);
}
.side-calc:hover {border-color: var(--accent-link); transform: translateX(4px); box-shadow: 0 4px 12px rgba(0,0,0,0.05);}
.side-calc__icon {
    width: 38px; height: 38px; flex-shrink: 0; background: linear-gradient(135deg, rgba(82, 120, 177, 0.1) 0%, rgba(82, 120, 177, 0.05) 100%);
    color: var(--accent-link); border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;
}
.side-calc:hover .side-calc__icon {background: var(--accent-link); color: #fff;}
.side-calc__icon svg {width: 20px; height: 20px; display: block;}
.side-calc__info {display: flex; flex-direction: column; gap: 3px; overflow: hidden;}
.side-calc__title {
    font-size: 14px; font-weight: 600; color: var(--tt-colored); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s;
}
.side-calc:hover .side-calc__title {color: var(--accent-link);}
.side-calc__category {font-size: 11.5px; color: var(--tt-lighter); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

/* =================================================================
   FOOTER
   ================================================================= */
.modern-footer {background: linear-gradient(135deg, #1a252f 0%, #2c3e50 100%); color: #ecf0f1; padding: 60px 0 20px; margin: 0 var(--indent-negative);}
.modern-footer__container {max-width: var(--max-width); margin: 0 auto; padding: 0 40px;}
.modern-footer__grid {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px;}
.modern-footer__logo-img {width: 180px;}
.modern-footer__info {font-size: 13px; line-height: 1.6; color: #95a5a6; background: rgba(255, 255, 255, 0.03); padding: 20px; border-radius: 6px; border-left: 3px solid #5278b1;}
.modern-footer__section-title {font-size: 17px; color: #fff; font-weight: 600; margin-bottom: 20px; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px;}
.modern-footer__nav-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.modern-footer__nav-column {display: flex; flex-direction: column; gap: 8px;}
.modern-footer__nav-link {color: #95a5a6; font-size: 14px; transition: color 0.3s ease;}
.modern-footer__nav-link:hover {color: #fff;}

.modern-footer__contacts {display: flex; flex-direction: column; gap: 12px;}
.modern-footer__contact-item {
    display: flex; align-items: center; gap: 15px; background: rgba(255, 255, 255, 0.03); 
    padding: 15px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.05);
}
.modern-footer__contact-icon {width: 24px !important; height: 24px !important; flex-shrink: 0; fill: #95a5a6; display: block;}
.modern-footer__contact-item span, .modern-footer__contact-item a {font-size: 14px; line-height: 1.4; color: #bdc3c7; text-decoration: none;}
.modern-footer__contact-item a:hover {color: #fff;}
.footer-telegram-cta {background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 10px;}
.header-telegram-link--wide {display: flex; justify-content: space-between; align-items: center; padding: 8px; color: #fff;}
.modern-footer__bottom {border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 25px; display: flex; justify-content: space-between; align-items: center;}
.modern-footer__privacy-link {color: #95a5a6; font-size: 13px;}

@media (max-width: 768px) {
  .modern-footer__grid {grid-template-columns: 1fr; gap: 30px;}
  .modern-footer__bottom {flex-direction: column; gap: 20px;}
}
@media (max-width: 480px) {
  .modern-footer__container {padding: 0 20px;}
}

/* === ПАГИНАЦИЯ === */
.pagination {text-align: center; margin: 40px 0;}
.pagination__pages {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;}
.pagination__pages a, .pagination__pages span {display: inline-block; padding: 0 15px; line-height: 38px; border: 1px solid var(--bdc-darker); border-radius: 20px;}
.pagination__pages span:not(.nav_ext) {background: var(--accent); color: #fff;}

/* =================================================================
   ПОХОЖИЕ КАЛЬКУЛЯТОРЫ (СЕТКА И УЛУЧШЕНИЕ КАРТОЧЕК)
   ================================================================= */

/* 1. Сетка строго в 2 колонки */
.related-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* 2. Адаптивность: на планшетах и телефонах делаем 1 колонку */
@media screen and (max-width: 850px) {
    .related-cards-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* 3. Эстетика самой карточки (применяется и к каталогу, и к похожим) */
.calc-card {
    /* Меняем выравнивание: если текст длинный, иконка будет стоять по верхнему краю, а не по центру */
    align-items: flex-start !important; 
}

.calc-card__icon {
    /* Сдвигаем иконку чуть вниз, чтобы она визуально была на одной линии с началом текста */
    margin-top: 2px; 
}

.calc-card__body {
    gap: 8px; /* Чуть увеличиваем расстояние между рубрикой и заголовком */
}

/* 4. Причесываем шрифты и ограничиваем длинные тексты */
.calc-card__category {
    font-size: 12px;
    opacity: 0.8;
}

.calc-card__title {
    font-size: 17px !important; /* Уменьшаем шрифт, чтобы влезло больше смысла */
    line-height: 1.4 !important;
    
    /* Магия: ограничиваем заголовок 3 строками, остальное скроется за троеточием ... */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   Блок портального поиска на главной странице (Hero Search) - ВЕРСИЯ 2
   ========================================================================== */
.hero-search {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02); /* Сделал тень чуть мягче */
    text-align: center;
    border: 1px solid #eaeaec; /* Цвет рамки как у карточек ниже */
}

.hero-search__title {
    font-size: 26px;
    font-weight: 800;
    color: #222;
    margin: 0 0 10px 0;
    line-height: 1.2;
    font-family: inherit; /* Подхватываем шрифт сайта */
}

.hero-search__subtitle {
    font-size: 15px;
    color: #777;
    margin: 0 0 30px 0;
    font-family: inherit;
}

.hero-search__form {
    display: flex;
    gap: 12px;
    max-width: 650px;
    margin: 0 auto;
}

.hero-search__input-wrapper {
    position: relative;
    flex: 1;
}

.hero-search__icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #95a5a6; /* Спокойный серый цвет иконки */
    pointer-events: none;
    width: 20px; /* Чуть уменьшил лупу для аккуратности */
    height: 20px;
}

.hero-search__input {
    width: 100%;
    /* Жестко задаем отступ слева в 50px, чтобы текст никогда не налезал на лупу */
    padding: 16px 20px 16px 50px !important; 
    font-size: 16px;
    font-family: inherit !important; /* Подхватываем шрифт сайта */
    color: #333;
    background: #ffffff;
    border: 1px solid #dcdde1; /* Спокойная серая рамка */
    border-radius: 10px;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Эффект при клике в поле ввода */
.hero-search__input:focus {
    border-color: #34495e; /* Фирменный цвет сайта */
    box-shadow: 0 0 0 3px rgba(52, 73, 94, 0.15); /* Мягкое свечение в тон сайта */
}

.hero-search__input::placeholder {
    color: #a4b0be;
}

.hero-search__button {
    padding: 0 35px;
    background: #34495e; /* Фирменный цвет сайта */
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit !important; /* Подхватываем шрифт сайта */
    text-transform: uppercase; /* Сделал буквы заглавными, как обычно делают на таких кнопках */
    letter-spacing: 0.5px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.3s ease;
    height: 54px; /* Фиксируем высоту, чтобы кнопка и поле были ровными */
}

.hero-search__button:hover {
    background: #2c3e50; /* Чуть более темный оттенок при наведении */
    transform: translateY(-2px);
}

/* Адаптация под смартфоны */
@media (max-width: 600px) {
    .hero-search {
        padding: 30px 20px;
    }
    
    .hero-search__title {
        font-size: 22px;
    }
    
    .hero-search__form {
        flex-direction: column;
    }
    
    .hero-search__button {
        padding: 16px 20px;
        width: 100%;
        height: auto;
    }
}