/**
 * user.css — оформление площадки заявок (leadboard) поверх Cassiopeia.
 * Стиль: светлый минимал + акцент бирюза #12b5a5.
 * Грузится последним (asset template.user, weight 500) → переопределяет тему.
 * Правим ТОЛЬКО здесь, штатный механизм Cassiopeia. Ядро не трогаем.
 */

:root {
    /* Акцент */
    --lb-teal:        #12b5a5;
    --lb-teal-600:    #0e9487;
    --lb-teal-700:    #0b7d72;
    --lb-teal-050:    #e7f7f5;
    --lb-teal-100:    #cdeeea;

    /* Нейтраль (светлый минимал) */
    --lb-bg:          #ffffff;
    --lb-bg-soft:     #f6f8f8;
    --lb-ink:         #1a2b2a;   /* основной текст */
    --lb-ink-soft:    #5a6b6a;   /* вторичный текст */
    --lb-line:        #e3e9e8;   /* границы/разделители */
    --lb-radius:      12px;
    --lb-radius-sm:   8px;
    --lb-wrap:        1320px;   /* = .grid-child max-width Cassiopeia, чтобы шапка совпадала с контентом */
    --lb-shadow:      0 1px 2px rgba(16,40,38,.04), 0 8px 24px rgba(16,40,38,.06);
    --lb-shadow-sm:   0 1px 2px rgba(16,40,38,.06);

    /* Проброс в Bootstrap-переменные Cassiopeia */
    --cassiopeia-color-primary: var(--lb-teal);
    --link-color: var(--lb-teal-600);
    --link-hover-color: var(--lb-teal-700);
    --bs-primary: var(--lb-teal);
    --bs-primary-rgb: 18, 181, 165;
    --bs-link-color: var(--lb-teal-600);
    --bs-link-hover-color: var(--lb-teal-700);
    --bs-body-color: var(--lb-ink);
    --bs-border-color: var(--lb-line);
    --bs-border-radius: var(--lb-radius-sm);
}

/* ==================== БАЗА ==================== */

body {
    color: var(--lb-ink);
    background: var(--lb-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--lb-teal-600);
    text-underline-offset: 2px;
}
a:hover,
a:focus {
    color: var(--lb-teal-700);
}

h1, h2, h3, h4 {
    color: var(--lb-ink);
    font-weight: 700;
    letter-spacing: -0.01em;
}
h1 { line-height: 1.15; }

.container-component {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

.icon-arrow-up:before {
    content: "";
    color: white;
}

/* ==================== ШАПКА (светлая) ====================
   ВАЖНО: НЕ трогаем штатную РАСКЛАДКУ Cassiopeia (grid-child, flex меню, центрирование) —
   попытки переопределить её ломали шапку (лого/меню разъезжались, разная ширина с контентом).
   Здесь ТОЛЬКО косметика: белый фон, тёмный текст, компактные паддинги. Структура — как из коробки. */

.container-header.header {
    background: var(--lb-bg) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--lb-line);
    box-shadow: var(--lb-shadow-sm);
}
/* Ужимаем раздутые вертикальные паддинги grid-child (штатно 2.5rem) — шапка компактнее.
   Горизонтальный отступ шапки задаётся НЕ здесь, а в .container-topbar (см. ниже):
   бренд и бургер лежат именно в нём. */
.container-header.header > .grid-child { padding-block: .5rem; }

/* TOPBAR (мой контейнер, город+кнопка) — тонкая строка, свой grid-child.
   ⚠️ Бренд и бургер лежат ИМЕННО ЗДЕСЬ, а не в .grid-child. Без padding-inline
   они упираются прямо в края экрана, тогда как контент ниже (крошки, H1) имеет
   отступ — шапка выглядит «съехавшей». */
.container-topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding-block: .4rem;
    padding-inline: 1rem;
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}
.container-topbar .lb-mod-citypicker { margin-right: auto; }

/* Снять сдвиг меню вниз (ядро Cassiopeia: .container-header nav { margin-top:.5em })
   — иначе главное меню ниже города/кнопок, не по одной линии */
.container-header nav,
.container-topbar nav { margin-top: 0; }

/* CTA-кнопка в шапке */
.lb-header-cta {
    display: inline-block;
    background: var(--lb-teal);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    padding: .45rem 1.1rem;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(18, 181, 165, .28);
    transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
    white-space: nowrap;
}
.lb-header-cta:hover,
.lb-header-cta:focus {
    background: var(--lb-teal-700);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(18, 181, 165, .35);
}

/* ─── Модуль «Аккаунт» в шапке: иконка-триггер + выпадашка ─── */
.lb-account { position: relative; display: inline-block; }

/* Триггер: иконка + текст (+ шеврон) */
.lb-account__trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: .4rem .85rem;
    background: transparent;
    border: 1.5px solid var(--lb-teal);
    border-radius: 999px;
    color: var(--lb-teal-700);
    font: inherit;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.lb-account__trigger:hover,
.lb-account.is-open .lb-account__trigger {
    background: var(--lb-teal);
    color: #fff;
}
/* Иконка человечка (css-mask, наследует color) */
.lb-account__icon {
    width: 18px; height: 18px; flex: none;
    background: currentColor;
    -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.lb-account__label { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.lb-account__caret {
    width: 10px; height: 10px; flex: none;
    background: currentColor;
    -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    transition: transform .15s ease;
}
.lb-account.is-open .lb-account__caret { transform: rotate(180deg); }

/* Выпадающее меню */
.lb-account__menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 1050;
    min-width: 200px;
    list-style: none; margin: 0; padding: 6px;
    background: #fff;
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-radius);
    box-shadow: 0 12px 34px rgba(15, 30, 29, .16);
}
.lb-account__menu { display: block; }
.lb-account__menu[hidden] { display: none; }
.lb-account__item { margin: 0; display: block; width: 100%; }
.lb-account__menu .lb-account__item > a,
.container-header .lb-account__menu .lb-account__item > a {
    display: block;
    padding: 10px 14px;
    border-radius: var(--lb-radius-sm);
    color: var(--lb-ink) !important;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    white-space: nowrap;
    border: 0 !important;
    background: transparent;
}
.lb-account__menu .lb-account__item > a:hover,
.lb-account__menu .lb-account__item > a:focus,
.container-header .lb-account__menu .lb-account__item > a:hover {
    background: rgba(18, 181, 165, .12);
    color: var(--lb-teal-700) !important;
}
/* «Выйти» — отделить чертой сверху и приглушить */
.lb-account__item.item-245 { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--lb-line); }
.lb-account__item.item-245 > a { color: var(--lb-ink-soft); }

/* Логотип — только ЦВЕТ/шрифт/маркер, раскладку не трогаем (штатная inline-block) */
.container-header.header .navbar-brand,
.container-header.header .brand-logo {
    color: var(--lb-ink) !important;
    font-size: 1.35rem !important;
}
.brand-logo span {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--lb-ink);
    position: relative;
    padding-left: 1.1rem;
}
.brand-logo span::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: .75rem; height: .75rem;
    border-radius: 3px;
    background: var(--lb-teal);
    box-shadow: 0 0 0 3px var(--lb-teal-050);
}
.container-header.header .site-description {
    color: var(--lb-ink-soft) !important;
    font-size: .85rem;
}

/* ==================== МЕНЮ — только ЦВЕТ пунктов (раскладку не трогаем) ====================
   Разметка Cassiopeia: nav.mod-menu.mod-list > li.nav-item > a (БЕЗ .nav-link). */
/* Специфичность .container-header .mod-menu>li>a (ядро Cassiopeia) высокая —
   перебиваем тем же корнем .container-header.header, иначе color:currentColor (белый) побеждает. */
.container-header.header .mod-menu > li > a,
.container-header.header .mod-menu .nav-item > a {
    display: inline-block;
    color: var(--lb-ink);
    font-weight: 600;
    text-decoration: none;
    padding: .45rem .8rem;
    border-radius: var(--lb-radius-sm);
    transition: background-color .15s ease, color .15s ease;
    white-space: nowrap;
}
.container-header.header .mod-menu > li > a:hover,
.container-header.header .mod-menu > li > a:focus {
    color: var(--lb-teal-700);
    background: var(--lb-teal-050);
}
.container-header.header .mod-menu > li.current > a,
.container-header.header .mod-menu > li.active > a {
    color: var(--lb-teal-700);
    background: var(--lb-teal-050);
}

/* ===== ГАМБУРГЕР (мобильная ширина <992px, layout collapse-metismenu) ===== */
/* Кнопка-тогглер: бирюзовая иконка на светлом фоне */
.container-header.header .navbar-toggler {
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-radius-sm);
    padding: .4rem .55rem;
    color: var(--lb-teal-700);
    background: var(--lb-bg);
}
.container-header.header .navbar-toggler:focus {
    box-shadow: 0 0 0 3px var(--lb-teal-050);
    outline: none;
}
/* Прячем штатную шрифтовую иконку — рисуем свою (гамбургер ↔ крестик) через mask */
.container-header.header .navbar-toggler .icon-menu {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--lb-teal-700);
    -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z'/%3E%3C/svg%3E");
    mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z'/%3E%3C/svg%3E");
    transition: background-color .15s ease;
}
.container-header.header .navbar-toggler .icon-menu::before { content: none; }  /* гасим шрифтовой глиф */
/* Открытое меню (Bootstrap ставит aria-expanded="true") → крестик */
.container-header.header .navbar-toggler[aria-expanded="true"] .icon-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z'/%3E%3C/svg%3E");
}
/* Мобильное меню (<992px) — ВЫЕЗЖАЕТ СЛЕВА (off-canvas слайд-панель).
   Панель всегда в DOM, спрятана за левым краем (translateX(-100%)); класс .show
   (его ставит Bootstrap collapse по клику на гамбургер) выдвигает её (translateX(0)).
   Фиксированная ширина, на всю высоту экрана, поверх контента. */
@media (max-width: 991.98px) {
    /* Bootstrap collapse прячет через display/height — переопределяем, чтобы работал transform-слайд */
    .container-header.header .navbar-collapse {
        display: block !important;   /* держим в DOM для анимации (не display:none) */
        position: fixed;
        top: 60px;
        left: 0;
        bottom: 0;
        z-index: 1040;
        width: min(300px, 82vw);
        height: 100dvh;
        background: var(--lb-bg);
        border-right: 1px solid var(--lb-line);
        box-shadow: 0 0 40px rgba(16, 40, 38, .18);
        padding: 1rem .75rem;
        overflow-y: auto;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .28s ease, visibility .28s ease;
    }
    .container-header.header .navbar-collapse.show,
    .container-header.header .navbar-collapse.collapsing {
        transform: translateX(0);
        visibility: visible;
    }
    /* Пункты — в столбик, крупнее для тача */
    .container-header.header .mod-menu { flex-direction: column; width: 100%; }
    .container-header.header .mod-menu > li { width: 100%; }
    .container-header.header .mod-menu > li > a {
        display: block;
        padding: .75rem .85rem;
        font-size: 1.05rem;
    }
    /* гамбургер поверх выехавшей панели */
    .container-header.header .navbar-toggler { position: relative; z-index: 1041; }
}

/* Затемняющий оверлей за off-canvas панелью (управляется user.js: body.lb-nav-open).
   Клик по нему закрывает меню. Только на мобиле. */
.lb-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(16, 40, 38, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
}
@media (max-width: 991.98px) {
    body.lb-nav-open .lb-nav-overlay {
        opacity: 1;
        visibility: visible;
    }
    /* не даём фону скроллиться при открытом меню */
    body.lb-nav-open { overflow: hidden; }
    /* ВАЖНО: .container-header создаёт stacking-context (ядро z-index:10), внутри него —
       панель меню. Оверлей (ребёнок body, z:1035) иначе перекрывает весь header вместе с
       панелью. Поднимаем header ВЫШЕ оверлея при открытом меню → панель над затемнением,
       затемнение — над остальным контентом. */
    body.lb-nav-open .container-header.header {
        z-index: 1045 !important;
        position: relative;
    }
}
@media (min-width: 992px) {
    .lb-nav-overlay { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .container-header.header .navbar-collapse,
    .lb-nav-overlay { transition: none; }
}
/* metismenu-item несёт тот же li — цвет пунктов уже задан через > li > a выше,
   но подстрахуемся явным классом на случай, если ядро перебьёт */
.container-header.header .mod-menu > li.metismenu-item > a {
    color: var(--lb-ink);
}
.container-header.header .mod-menu > li.metismenu-item.current > a,
.container-header.header .mod-menu > li.metismenu-item.active > a {
    color: var(--lb-teal-700);
}

/* ==================== CITYPICKER (в topbar шапки) ==================== */

.lb-mod-citypicker {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .9rem;
    color: var(--lb-ink-soft);
}
.lb-mod-prefix { color: var(--lb-ink-soft); }
/* Кнопка «город» с пин-иконкой геолокации 📍, без слова «изменить» */
.lb-mod-current {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 0;
    background: none;
    padding: .15rem .35rem;
    margin: 0;
    border-radius: var(--lb-radius-sm);
    cursor: pointer;
    font: inherit;
    color: var(--lb-ink);
    transition: background-color .15s ease;
}
.lb-mod-current::before {
    content: "";
    width: .95rem;
    height: .95rem;
    flex: 0 0 auto;
    background-color: var(--lb-teal);
    /* SVG-пин геолокации через mask (наследует цвет бирюзы) */
    -webkit-mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
    mask: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}
.lb-mod-current:hover { background: var(--lb-teal-050); }
.lb-mod-cityname {
    font-weight: 700;
    color: var(--lb-ink);
    border-bottom: 1px dashed var(--lb-line);
}
.lb-mod-hint {
    color: var(--lb-ink-soft);
    font-size: .85rem;
}

/* Модалка/поиск выбора города — стили в модуле (media/mod_leadboard_citypicker/css),
   тут НЕ дублируем (дубль перебивал padding-left под лупу и цвета). */

/* ==================== АВТОПОДСКАЗКА (citysuggest.js) ==================== */

.lb-mod-suggest,
.lb-suggest {
    list-style: none;
    margin: .25rem 0 0;
    padding: .25rem;
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-radius-sm);
    background: var(--lb-bg);
    box-shadow: var(--lb-shadow);
    max-height: 260px;
    overflow-y: auto;
}
.lb-mod-suggest li,
.lb-suggest li {
    padding: .5rem .65rem;
    border-radius: 6px;
    cursor: pointer;
    color: var(--lb-ink);
}
.lb-mod-suggest li:hover,
.lb-mod-suggest li.active,
.lb-suggest li:hover,
.lb-suggest li.active {
    background: var(--lb-teal-050);
    color: var(--lb-teal-700);
}

/* ==================== ФОРМЫ КОМПОНЕНТА (ЕДИНЫЙ СТИЛЬ) ====================
   ОДИН источник стиля для ВСЕХ форм com_leadboard: форма заявки (.leadboard-form),
   регистрация (.leadboard-register), ЛК (.leadboard-cabinet) и любые будущие.
   Хук — обёртки форм компонента. Меняешь ЗДЕСЬ → меняется на всех страницах компонента.
   Токены полей вынесены в переменные (--lb-field-*), чтобы крутить в одном месте. */

:root {
    --lb-field-pad-y: .7rem;
    --lb-field-pad-x: .85rem;
    --lb-field-fs: 1rem;
}

/* Обёртка-карточка формы */
.leadboard-form,
.leadboard-register,
.leadboard-cabinet {
    max-width: 560px;
    margin: 1.5rem auto;
    padding: clamp(1.25rem, 4vw, 2rem);
    background: var(--lb-bg);
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-radius);
    box-shadow: var(--lb-shadow);
}
/* ЛК может быть шире (вкладки/списки) */
.leadboard-cabinet { max-width: 860px; }

.leadboard-form h1, .leadboard-form h2,
.leadboard-register h1, .leadboard-register h2,
.leadboard-cabinet h1, .leadboard-cabinet h2 {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    margin-bottom: .35rem;
}
.leadboard-form > h1, .leadboard-form > h2,
.leadboard-register > h1, .leadboard-register > h2 { text-align: center; }
.leadboard-form > p,
.leadboard-register > p {
    text-align: center;
    color: var(--lb-ink-soft);
    margin-bottom: 1.5rem;
}

/* Группа поля */
.leadboard-form .control-group,
.leadboard-register .control-group,
.leadboard-cabinet .control-group {
    margin-bottom: 1rem;
}
.leadboard-form label,
.leadboard-register label,
.leadboard-cabinet label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    color: var(--lb-ink);
    margin-bottom: .35rem;
}
/* Поля ввода — все типы + select + textarea */
.leadboard-form input[type="text"],
.leadboard-form input[type="tel"],
.leadboard-form input[type="email"],
.leadboard-form input[type="password"],
.leadboard-form input[type="number"],
.leadboard-form select,
.leadboard-form textarea,
.leadboard-register input[type="text"],
.leadboard-register input[type="tel"],
.leadboard-register input[type="email"],
.leadboard-register input[type="password"],
.leadboard-register input[type="number"],
.leadboard-register select,
.leadboard-register textarea,
.leadboard-cabinet input[type="text"],
.leadboard-cabinet input[type="tel"],
.leadboard-cabinet input[type="email"],
.leadboard-cabinet input[type="password"],
.leadboard-cabinet input[type="number"],
.leadboard-cabinet select,
.leadboard-cabinet textarea {
    width: 100%;
    padding: var(--lb-field-pad-y) var(--lb-field-pad-x);
    font-size: var(--lb-field-fs);
    color: var(--lb-ink);
    background: var(--lb-bg);
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
/* Кастомная стрелка select */
.leadboard-form select,
.leadboard-register select,
.leadboard-cabinet select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%235a6b6a' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    padding-right: 2.25rem;
}
.leadboard-form textarea,
.leadboard-register textarea,
.leadboard-cabinet textarea {
    min-height: 110px;
    resize: vertical;
}
/* Фокус — бирюзовая рамка */
.leadboard-form :is(input, select, textarea):focus,
.leadboard-register :is(input, select, textarea):focus,
.leadboard-cabinet :is(input, select, textarea):focus {
    outline: none;
    border-color: var(--lb-teal);
    box-shadow: 0 0 0 3px var(--lb-teal-050);
}
.leadboard-form ::placeholder,
.leadboard-register ::placeholder,
.leadboard-cabinet ::placeholder {
    color: #9aa8a7;
}

/* Чекбокс */
.leadboard-form input[type="checkbox"],
.leadboard-register input[type="checkbox"],
.leadboard-cabinet input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin-right: .5rem;
    accent-color: var(--lb-teal);
    vertical-align: -2px;
}
.leadboard-form .control-group:has(input[type="checkbox"]) label,
.leadboard-register .control-group:has(input[type="checkbox"]) label,
.leadboard-cabinet .control-group:has(input[type="checkbox"]) label {
    font-weight: 400;
    font-size: .85rem;
    color: var(--lb-ink-soft);
}

/* Кнопка submit — на всю ширину в формах */
.leadboard-form .btn-primary,
.leadboard-register .btn-primary,
.leadboard-cabinet .btn-primary {
    width: 100%;
    padding: .8rem 1rem;
    font-size: 1.05rem;
    border-radius: var(--lb-radius-sm);
    margin-top: .5rem;
}

/* Bootstrap primary → бирюза (глобально, единый акцент) */
.btn-primary {
    --bs-btn-bg: var(--lb-teal);
    --bs-btn-border-color: var(--lb-teal);
    --bs-btn-hover-bg: var(--lb-teal-700);
    --bs-btn-hover-border-color: var(--lb-teal-700);
    --bs-btn-active-bg: var(--lb-teal-700);
    --bs-btn-active-border-color: var(--lb-teal-700);
    --bs-btn-disabled-bg: var(--lb-teal-100);
    --bs-btn-disabled-border-color: var(--lb-teal-100);
    background-color: var(--lb-teal);
    border-color: var(--lb-teal);
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--lb-teal-700);
    border-color: var(--lb-teal-700);
}

/* Прочие акцентные кнопки/бейджи */
.btn-outline-primary {
    --bs-btn-color: var(--lb-teal-700);
    --bs-btn-border-color: var(--lb-teal);
    --bs-btn-hover-bg: var(--lb-teal);
    --bs-btn-hover-border-color: var(--lb-teal);
}
.badge.bg-primary { background-color: var(--lb-teal) !important; }

/* ==================== КАРТОЧКИ ЗАЯВОК / ГОРОДОВ ==================== */

.leadboard-request,
.leadboard-card,
.lb-card {
    background: var(--lb-bg);
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-radius);
    box-shadow: var(--lb-shadow-sm);
    padding: 1.1rem 1.25rem;
    transition: box-shadow .15s ease, transform .15s ease;
}
.leadboard-request:hover,
.leadboard-card:hover,
.lb-card:hover {
    box-shadow: var(--lb-shadow);
}

/* ==================== ФУТЕР ==================== */

.container-footer {
    background: var(--lb-bg-soft);
    border-top: 1px solid var(--lb-line);
    color: var(--lb-ink-soft);
}
.mod-footer {
    font-size: .85rem;
    color: var(--lb-ink-soft);
    text-align: center;
}
.mod-footer a {
    color: var(--lb-teal-600);
}

/* Кнопка «наверх» */
#back-top .back-to-top-link,
.back-to-top-link {
    background: var(--lb-teal);
    border-radius: 50%;
}

/* ============================================================
   ЛЕНДИНГ ГЛАВНОЙ (статья id6): hero с двумя дверями + секции
   ============================================================ */

/* HERO */
.lb-hero {
    position: relative;
    background:
        radial-gradient(60% 80% at 50% -10%, var(--lb-teal-050), transparent 70%),
        linear-gradient(180deg, var(--lb-bg-soft), var(--lb-bg));
    border-bottom: 1px solid var(--lb-line);
    padding: clamp(2.5rem, 7vw, 5rem) 1rem clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 3rem;
    text-align: center;
}
.lb-hero__inner { max-width: 980px; margin: 0 auto; }

/* Эйброу-плашка над заголовком */
.lb-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--lb-bg);
    border: 1px solid var(--lb-teal-100);
    color: var(--lb-teal-700);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .35rem .85rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
    box-shadow: var(--lb-shadow-sm);
}
.lb-hero__eyebrow::before {
    content: "";
    width: .5rem; height: .5rem;
    border-radius: 50%;
    background: var(--lb-teal);
}

.lb-hero__title {
    font-size: clamp(2rem, 5.5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-wrap: balance;
    margin-bottom: 1rem;
}
/* Акцентное слово в заголовке (как в референсах) */
.lb-hero__accent {
    color: var(--lb-teal);
    position: relative;
    white-space: nowrap;
}
.lb-hero__lead {
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    color: var(--lb-ink-soft);
    max-width: 62ch;
    margin: 0 auto 2.25rem;
    line-height: 1.55;
}

/* ДВЕ ДВЕРИ (равнозначные карточки-входа) */
.lb-doors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    max-width: 820px;
    margin: 0 auto;
    text-align: left;
}

@media (width>=992px) {
    .container-header .mod-menu {
        justify-content: center;
    }
}




@media (max-width: 767px) {
    .lb-doors { grid-template-columns: 1fr; }
}
.lb-door {
    display: flex;
    flex-direction: column;
    background: var(--lb-bg);
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-radius);
    box-shadow: var(--lb-shadow-sm);
    padding: 1.5rem;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.lb-door:hover {
    box-shadow: var(--lb-shadow);
    transform: translateY(-2px);
}
.lb-door__icon {
    font-size: 1.9rem;
    line-height: 1;
    margin-bottom: .5rem;
}
.lb-door h2 {
    font-size: 1.3rem;
    margin-bottom: .4rem;
}
.lb-door p {
    color: var(--lb-ink-soft);
    margin-bottom: 1.25rem;
    flex: 1 1 auto;
}
.lb-door--client { border-top: 3px solid var(--lb-teal); }
.lb-door--exec   { border-top: 3px solid var(--lb-ink); }
.lb-door .lb-btn { align-self: flex-start; }

/* CTA-КНОПКИ (в статье, голый HTML).
   ВНИМАНИЕ: .lb-btn ТАКЖЕ определён в media/com_leadboard/css/leadboard.css (синий #2563eb),
   и тот файл грузится ПОСЛЕ user.css → перебивает по каскаду при равной специфичности.
   Поэтому все правила ниже с ПОВЫШЕННОЙ специфичностью (.lb-doors .lb-btn / двойной класс). */
.lb-doors .lb-btn,
.lb-section .lb-btn,
.lb-hero__actions .lb-btn,
.lb-exec-band .lb-btn,
.leadboard-cities .lb-btn,
.leadboard-city .lb-btn,
.leadboard-cabinet .lb-btn,
.leadboard-register .lb-btn {
    display: inline-block;
    padding: .8rem 1.5rem;
    border-radius: var(--lb-radius-sm);
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.lb-doors .lb-btn.lb-cta-client,
.lb-section .lb-btn.lb-cta-client,
.lb-btn.lb-cta-client {
    background: var(--lb-teal);
    color: #fff;
    border: 0;
    box-shadow: var(--lb-shadow-sm);
}
.lb-btn.lb-cta-client:hover,
.lb-btn.lb-cta-client:focus { background: var(--lb-teal-700); color: #fff; }

.lb-doors .lb-btn.lb-cta-exec,
.lb-section .lb-btn.lb-cta-exec,
.lb-exec-band .lb-btn.lb-cta-exec,
.leadboard-city .lb-btn.lb-cta-exec,
.leadboard-cabinet .lb-btn.lb-cta-exec,
.lb-btn.lb-cta-exec {
    background: var(--lb-bg);
    color: var(--lb-ink);
    border: 2px solid var(--lb-ink);
    padding: calc(.8rem - 2px) calc(1.5rem - 2px);
}
.lb-btn.lb-cta-exec:hover,
.lb-btn.lb-cta-exec:focus { background: var(--lb-ink); color: #fff; }
/* Гостевой ЛК: кнопки Войти / Стать исполнителем в ряд с воздухом */
.lb-cabinet-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
/* внутри тёмной полосы исполнителей — светлая рамка */
.lb-exec-band .lb-btn.lb-cta-exec {
    background: transparent;
    color: #fff;
    border-color: #fff;
}
.lb-exec-band .lb-btn.lb-cta-exec:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* СЕКЦИИ */
.lb-section {
    max-width: 900px;
    margin: 0 auto 2.5rem;
}
.lb-section > h2 {
    text-align: center;
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin-bottom: .35rem;
}
.lb-section__sub {
    text-align: center;
    color: var(--lb-ink-soft);
    margin-bottom: 1.5rem;
}
.lb-section--form { max-width: 640px; }

/* FEATURES (карточки) */
.lb-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}
.lb-features--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .lb-features--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
    .lb-features,
    .lb-features--4 { grid-template-columns: 1fr; }
}
.lb-feature {
    background: var(--lb-bg);
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-radius);
    box-shadow: var(--lb-shadow-sm);
    padding: 1.1rem 1.25rem;
}
.lb-feature h3 {
    font-size: 1.05rem;
    margin-bottom: .35rem;
    color: var(--lb-teal-700);
}
.lb-feature p { color: var(--lb-ink-soft); margin: 0; }

/* STEPS (как это работает) */
.lb-steps {
    list-style: none;
    padding: 0;
    max-width: 640px;
    margin: 1rem auto 0;
}
.lb-steps li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 0;
    border-bottom: 1px solid var(--lb-line);
    color: var(--lb-ink);
}
.lb-steps li:last-child { border-bottom: 0; }
.lb-steps__n {
    flex: 0 0 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--lb-teal);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* НИЖНЯЯ ПОЛОСА ИСПОЛНИТЕЛЕЙ */
.lb-exec-band {
    background: var(--lb-ink);
    color: #fff;
    border-radius: var(--lb-radius);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    text-align: center;
    margin: 2.5rem auto;
    max-width: 900px;
}
.lb-exec-band h2 { color: #fff; }
.lb-exec-band p {
    color: rgba(255, 255, 255, .8);
    max-width: 620px;
    margin: .5rem auto 1.25rem;
}
.lb-exec-band .lb-cta-exec {
    background: transparent;
    color: #fff;
    border-color: #fff;
}
.lb-exec-band .lb-cta-exec:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════
   Страницы услуги (cities /klining) и города (city /klining/kazan)
   ═══════════════════════════════════════════════════════════════════ */

.leadboard-cities,
.leadboard-city {
  max-width: 900px;
  margin: 0 auto;
  padding: 8px 0 40px;
}

/* ─── Витрина услуги (cities) ─── */
.lb-service-hero,
.lb-city-hero { margin-bottom: 28px; }
.lb-service-hero h1,
.lb-city-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.12;
  color: var(--lb-ink); margin: 0 0 12px;
}
.lb-service-hero__lead,
.lb-city-hero__lead {
  font-size: 1.12rem; color: var(--lb-ink-soft);
  max-width: 640px; margin: 0 0 18px;
}
.lb-service-hero__cta { margin: 0; }

/* Вводный текст услуги + произвольные поля статьи */
.lb-service-intro {
  margin: 0 0 32px; color: var(--lb-ink); line-height: 1.65;
}
.lb-service-intro h2 { font-size: 1.5rem; font-weight: 700; margin: 28px 0 12px; }
.lb-service-intro h3 { font-size: 1.2rem; font-weight: 700; margin: 22px 0 10px; }
.lb-service-intro p  { margin: 0 0 14px; }
.lb-service-intro ul { margin: 0 0 14px; padding-left: 1.2em; }
.lb-service-intro li { margin: 6px 0; }
/* Произвольные поля Joomla (com_fields) — аккуратный список */
.lb-service-intro .fields-container { margin: 20px 0; }
.lb-service-intro .field-entry { margin: 10px 0; }
.lb-service-intro .field-label { font-weight: 700; color: var(--lb-ink); }

/* ─── Список городов ─── */
.lb-service-cities { margin: 0 0 34px; }
.lb-service-cities h2,
.lb-city-requests h2 {
  font-size: 1.4rem; font-weight: 700; color: var(--lb-ink); margin: 0 0 16px;
}
.lb-city-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;
}
.lb-city-list li { margin: 0; }
.lb-city-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px; border: 1px solid var(--lb-line); border-radius: var(--lb-radius);
  background: #fff; color: var(--lb-ink); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.lb-city-list a:hover {
  border-color: var(--lb-teal); box-shadow: 0 4px 14px rgba(18,181,165,.12); transform: translateY(-1px);
}
.lb-city-list .lb-city-name { font-weight: 600; }
.lb-city-list .lb-counter {
  flex: none; min-width: 26px; height: 24px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lb-teal-050); color: var(--lb-teal-700);
  border-radius: 999px; font-size: 0.82rem; font-weight: 700;
}

/* ─── Город: бейдж активных заявок ─── */
.lb-city-hero__meta { margin: 0; }
.lb-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--lb-teal-050); color: var(--lb-teal-700);
  font-weight: 700; font-size: 0.92rem;
}

/* SEO-текст города */
.lb-seo-text { margin: 0 0 30px; color: var(--lb-ink); line-height: 1.65; }
.lb-seo-text h2 { font-size: 1.5rem; font-weight: 700; margin: 28px 0 12px; }
.lb-seo-text h3 { font-size: 1.2rem; font-weight: 700; margin: 22px 0 10px; }
.lb-seo-text p  { margin: 0 0 14px; }

/* ─── Заявки карточками ─── */
.lb-city-requests { margin: 0 0 34px; }
.lb-req-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
.lb-card {
  border: 1px solid var(--lb-line); border-radius: var(--lb-radius);
  background: #fff; padding: 16px 18px;
}
.lb-card--notice { background: #fff7ed; border-color: #fed7aa; margin: 0 0 24px; }
.lb-req { display: flex; flex-direction: column; gap: 8px; }
.lb-req__head { font-size: 1.02rem; }
.lb-req__body { color: var(--lb-ink); line-height: 1.5; }
.lb-req__foot { margin-top: 4px; }
.lb-muted { color: var(--lb-ink-soft); font-size: 0.88rem; }
.lb-empty { color: var(--lb-ink-soft); }

/* ─── CTA-полосы (кнопки .lb-cta-* уже стилизованы выше) ─── */
.lb-service-cta,
.lb-city-cta {
  margin: 8px 0 0; padding: 28px; border-radius: var(--lb-radius);
  background: var(--lb-teal-050); border: 1px solid var(--lb-teal-100);
}
.lb-service-cta { text-align: center; }
.lb-service-cta h2 { font-size: 1.4rem; font-weight: 700; margin: 0 0 8px; }
.lb-service-cta p  { color: var(--lb-ink-soft); margin: 0 0 16px; }

/* Город: CTA заказчика (исполнителю — отдельная строка-подсказка ниже) */
.lb-city-cta { text-align: center; }
.lb-city-cta h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 8px; }
.lb-city-cta p  { color: var(--lb-ink-soft); margin: 0 auto 16px; max-width: 46em; }

/* Исполнителю — неброская строка, не конкурирует с заявкой заказчика */
.lb-exec-hint {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--lb-ink-soft);
}
.lb-exec-hint a { color: inherit; text-decoration: underline; }
.lb-exec-hint a:hover { color: var(--lb-teal-600, #0f766e); }

@media (max-width: 640px) {
  .lb-req-list,
  .lb-city-list { grid-template-columns: 1fr; }
}

/* ═══ Страница входа com_users (view-login) — карточка в стиле проекта ═══ */
.view-login .com-users-login,
.view-login .com-users-logout {
    max-width: 420px;
    margin: 24px auto 48px;
    padding: 32px 30px;
    background: #fff;
    border: 1px solid var(--lb-line);
    border-radius: 18px;
    box-shadow: var(--lb-shadow);
}
.view-login .page-header h1,
.view-login .com-users-login h1 {
    font-size: 1.6rem; font-weight: 800; color: var(--lb-ink);
    margin: 0 0 20px; text-align: center;
}
/* Поля */
.view-login .control-group { margin: 0 0 20px; }
.view-login .control-label label {
    display: block; margin-bottom: 8px;
    font-weight: 600; font-size: .9rem; color: var(--lb-ink);
}
/* Сообщение валидации — не прилипать к лейблу, мягкий вид */
.view-login .control-label #username-desc,
.view-login .control-group label + .form-control-feedback,
.view-login span.form-control-feedback {
    display: block; margin: 4px 0 0; font-size: .82rem; color: #b91c1c;
}
.view-login .control-label label .star,
.view-login .control-label label .required { color: var(--lb-teal); }
.view-login .controls input[type="text"],
.view-login .controls input[type="password"],
.view-login .controls input[type="email"] {
    width: 100%; box-sizing: border-box;
    padding: 11px 14px;
    border: 1.5px solid var(--lb-line); border-radius: 12px;
    font-size: 1rem; background: var(--lb-bg-soft); color: var(--lb-ink);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.view-login .controls input:focus {
    outline: none; background: #fff;
    border-color: var(--lb-teal);
    box-shadow: 0 0 0 3px rgba(18,181,165,.15);
}
/* Пароль с кнопкой-глаз: .password-group > .input-group > input + button */
.view-login .password-group,
.view-login .controls .input-group {
    display: flex; align-items: stretch; width: 100%;
}
.view-login .controls .input-group input {
    flex: 1 1 auto; width: auto;
    border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0;
}
.view-login .controls .input-group button {
    flex: none;
    border: 1.5px solid var(--lb-line); border-left: 0;
    border-radius: 0 12px 12px 0;
    background: var(--lb-bg-soft); color: var(--lb-ink-soft);
    padding: 0 14px; cursor: pointer;
}
.view-login .controls .input-group button:hover { background: var(--lb-teal-050); color: var(--lb-teal-700); }
/* «Запомнить меня» — воздух сверху и снизу */
.view-login .control-group.form-check,
.view-login .form-check {
    display: flex; align-items: center; gap: 8px;
    margin: 4px 0 24px;
}
.view-login .form-check label { margin: 0; font-size: .9rem; color: var(--lb-ink-soft); }
.view-login .form-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: none; }
/* Кнопка «Войти» */
.view-login .com-users-login__submit button,
.view-login button.btn-primary,
.view-login .btn-primary {
    display: inline-block; width: 100%;
    padding: .8rem 1.5rem;
    background: var(--lb-teal); color: #fff;
    border: 0; border-radius: var(--lb-radius-sm);
    font-weight: 700; font-size: 1.02rem; cursor: pointer;
    transition: background-color .15s;
}
.view-login .com-users-login__submit button:hover,
.view-login .btn-primary:hover { background: var(--lb-teal-700); color: #fff; }
/* Ссылки «Забыли пароль/логин» — аккуратным списком */
.view-login ul.nav,
.view-login .com-users-login__links {
    list-style: none; margin: 20px 0 0; padding: 16px 0 0;
    border-top: 1px solid var(--lb-line);
}
.view-login ul.nav li,
.view-login .com-users-login__links li { border: 0; }
.view-login ul.nav a,
.view-login .com-users-login__links a {
    display: block; padding: 8px 0; color: var(--lb-teal-700);
    text-decoration: none; font-size: .92rem; font-weight: 600;
}
.view-login ul.nav a:hover { color: var(--lb-ink); }

/* ═══ Перелинковка на странице города (.lb-linkbox) ═══ */
.lb-linkbox { margin: 0 0 28px; }
.lb-linkbox h2 { font-size: 1.2rem; font-weight: 700; color: var(--lb-ink); margin: 0 0 12px; }
.lb-linklist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lb-linklist li { margin: 0; }
.lb-linklist a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border: 1px solid var(--lb-line); border-radius: 999px;
    background: #fff; color: var(--lb-ink); text-decoration: none; font-size: .9rem;
    transition: border-color .15s, background .15s, color .15s;
}
.lb-linklist a:hover { border-color: var(--lb-teal); background: var(--lb-teal-050); color: var(--lb-teal-700); }
.lb-linklist__cnt {
    background: var(--lb-teal-050); color: var(--lb-teal-700);
    border-radius: 999px; padding: 0 7px; font-size: .78rem; font-weight: 700;
}

/* ═══ Подвал площадки (.lb-footer) ═══ */
/* Ядро Cassiopeia: .footer .grid-child { display:flex; justify-content:space-between }
   → мой блок был flex-элементом и прижимался влево. Растягиваем на всю ширину. */
.container-footer .grid-child { display: block; }
.lb-footer { width: 100%; flex: 1 1 100%; padding: 40px 0 24px; }
.lb-footer__cols {
    display: flex; flex-wrap: wrap;
    justify-content: center;      /* группа колонок по центру */
    align-items: flex-start;
    gap: 32px 64px;
    max-width: var(--lb-wrap); margin: 0 auto; padding: 0 2em;
    text-align: center;           /* заголовки и ссылки по центру колонки */
}
.lb-footer__col { min-width: 150px; }
.lb-footer__col h4 {
    font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--lb-ink-soft); margin: 0 0 12px;
}
.lb-footer__col ul { list-style: none; margin: 0; padding: 0; }
.lb-footer__col li { margin: 0 0 8px; }
.lb-footer .lb-footer__col a,
.lb-footer__col a {
    color: var(--lb-ink); text-decoration: none; font-size: .92rem;
    opacity: 1;
    transition: color .15s;
}
/* Перебиваем ядро Cassiopeia/Bootstrap (footer{color:#6d757e} + a:hover) — на hover
   ссылка должна ТЕМНЕТЬ в бирюзу, а не бледнеть. */
.lb-footer .lb-footer__col a:hover,
.lb-footer .lb-footer__col a:focus,
.lb-footer__col a:hover,
.lb-footer__col a:focus {
    color: var(--lb-teal-700) !important;
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.lb-footer__bottom {
    max-width: var(--lb-wrap); margin: 28px auto 0; padding: 20px 2em 0;
    border-top: 1px solid var(--lb-line);
    color: var(--lb-ink-soft); font-size: .85rem;
    text-align: center;
}
@media (max-width: 575px) {
    .lb-footer__cols { gap: 24px 32px; }
    .lb-footer__col { min-width: 130px; }
}

/* ЛК: плашка «Заявки в городе X» (фильтр по шапке) */
.lb-city-filter {
    margin: 0 0 14px; padding: 10px 14px;
    background: var(--lb-teal-050); border: 1px solid var(--lb-teal-100);
    border-radius: var(--lb-radius-sm); font-size: .95rem; color: var(--lb-ink);
}
.lb-city-filter strong { color: var(--lb-teal-700); }

/* Якорная навигация (#zayavka и др.): плавная прокрутка + отступ под липкую шапку,
   иначе цель якоря уезжает под header (position:sticky). */
html { scroll-behavior: smooth; }
:target,
#zayavka { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ─────────────────────────────────────────────────────────────
   ОБЛОЖКИ СТАТЕЙ (article-cover)

   Проблема, которую чиним: ядро com_content берёт класс обтекания из
   глобального параметра `float_fulltext` (= left), и <figure class="left">
   без ограничения размеров выдавливает текст в узкую колонку справа.
   В статьях float снят (float=none в поле images), здесь — задаём геометрию:
   обложка сверху, во всю ширину, с фиксированными пропорциями.
   ───────────────────────────────────────────────────────────── */

/* карточка в списке категории + шапка статьи */
.blog-item .item-image,
.item-page .item-image {
    float: none !important;      /* перебиваем возможный .left из ядра */
    width: 100%;
    margin: 0 0 20px;
    border-radius: var(--lb-radius);
    overflow: hidden;
    background: var(--lb-bg-soft);
}

/* Пропорция вместо жёсткой высоты: обложки нарисованы 3:1, поэтому cover
   ничего не режет (при height:220px он срезал низ SVG вместе с подписью).
   Настоящее фото любых пропорций впишется в ту же рамку — cover его подрежет,
   но композиция обложек держится в центре, так что это безопасно. */
.blog-item .item-image img,
.item-page .item-image img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* в статье обложка крупнее — это заглавный кадр */
.item-page .item-image img {
    aspect-ratio: 3 / 1;
    max-height: 300px;
}

/* карточка списка: картинка сверху, текст под ней (а не сбоку) */
.blog-item {
    display: block;
}

.blog-item .item-content {
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 575.98px) {
    .blog-item .item-image img { height: 170px; }
    .item-page .item-image img { height: 190px; }
}

/* ─────────────────────────────────────────────────────────────
   ГЛАВНАЯ В КОНТЕНТ-РЕЖИМЕ
   Две кнопки в hero (вместо «дверей» сервиса) + кликабельные плитки разделов.
   ───────────────────────────────────────────────────────────── */

.lb-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
    justify-content: center;   /* hero центрированный (text-align:center) */
}

/* ⚠️ hero у нас СВЕТЛЫЙ (градиент из --lb-bg-soft), а не тёмный.
   Первая версия ghost была белой по белому — кнопка исчезала. */
.lb-hero__actions .lb-btn--ghost {
    background: #fff;
    color: var(--lb-teal-700);
    border: 1.5px solid var(--lb-teal);
    box-shadow: var(--lb-shadow-sm);
}

.lb-hero__actions .lb-btn--ghost:hover,
.lb-hero__actions .lb-btn--ghost:focus {
    background: var(--lb-teal);
    border-color: var(--lb-teal);
    color: #fff;
}

/* плитки разделов: заголовок — ссылка, но выглядит как заголовок */
.lb-feature h3 a {
    color: inherit;
    text-decoration: none;
}

.lb-feature h3 a:hover,
.lb-feature h3 a:focus {
    color: var(--lb-teal-700);
    text-decoration: underline;
}

/* вся плитка реагирует на курсор — сигнал, что это ссылка */
.lb-feature:has(h3 a) {
    transition: border-color .15s ease, box-shadow .15s ease;
}

.lb-feature:has(h3 a):hover {
    border-color: var(--lb-teal-100);
    box-shadow: 0 2px 12px rgba(18, 181, 165, .10);
}

/* «Три вещи, которые стоит знать» — акценты внутри шагов */
.lb-steps strong {
    color: var(--lb-ink);
}

/* ─────────────────────────────────────────────────────────────
   ПЛАШКА «ОТКУДА ЭТИ ЦИФРЫ» — перед прайсами в статьях.
   Дисклеймер внизу статьи читатель может не увидеть, а цены видит сразу.
   Человек, знающий реальные цены своего города, ловит расхождение и теряет
   доверие ко ВСЕМУ тексту — включая проверенную юридическую часть.
   ───────────────────────────────────────────────────────────── */

.lb-price-note {
    margin: 28px 0;
    padding: 18px 20px 14px;
    background: var(--lb-teal-050);
    border: 1px solid var(--lb-teal-100);
    border-left: 4px solid var(--lb-teal);
    border-radius: var(--lb-radius-sm);
    font-size: .95rem;
    color: var(--lb-ink);
}

.lb-price-note__title {
    margin: 0 0 8px;
    font-weight: 700;
    color: var(--lb-teal-700);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* иконка «инфо» — без картинки, чистый CSS */
.lb-price-note__title::before {
    content: "i";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 50%;
    background: var(--lb-teal);
    color: #fff;
    font-style: italic;
    font-weight: 700;
    font-size: .8rem;
    line-height: 1;
}

.lb-price-note p {
    margin: 0 0 8px;
    line-height: 1.55;
}

.lb-price-note p:last-child {
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════
   КАТЕГОРИИ: сетка карточек, подкатегории, пагинация, стрелка меню
   ═══════════════════════════════════════════════════════════════ */

/* ─── 2. Сетка карточек ──────────────────────────────────────────*/

.blog-items.masonry-1,
.blog-items.masonry-2,
.blog-items.masonry-3,
.blog-items.masonry-4 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 26px;
    columns: unset;
}

.blog-items .blog-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-radius);
    overflow: hidden;
    break-inside: avoid;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.blog-items .blog-item:hover {
    border-color: var(--lb-teal-100);
    box-shadow: 0 6px 24px rgba(16, 40, 38, .09);
    transform: translateY(-2px);
}

.blog-items .blog-item .item-image {
    margin: 0;
    border-radius: 0;
}

.blog-items .blog-item .item-image img {
    aspect-ratio: 3 / 1;
    height: auto;
}

.blog-items .blog-item .item-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 20px 20px;
}

.blog-items .blog-item .page-header {
    margin: 0 0 8px;
    padding: 0;
    border: 0;
}

.blog-items .blog-item .page-header h2 {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.35;
}

.blog-items .blog-item .page-header h2 a {
    color: var(--lb-ink);
    text-decoration: none;
}

.blog-items .blog-item .page-header h2 a:hover {
    color: var(--lb-teal-700);
}

.blog-items .blog-item .article-info {
    margin: 0 0 10px;
    font-size: .8rem;
    color: var(--lb-ink-soft);
}

.blog-items .blog-item .article-info dd {
    margin: 0;
}

.blog-items .blog-item .lb-lead,
.blog-items .blog-item .item-content p {
    margin: 0 0 12px;
    font-size: .93rem;
    line-height: 1.55;
    color: var(--lb-ink-soft);
}

.blog-items .blog-item .readmore {
    margin: auto 0 0;
    padding-top: 6px;
}

.blog-items .blog-item .readmore .btn {
    display: inline-block;
    padding: .5rem 1rem;
    font-size: .88rem;
    font-weight: 700;
    background: transparent;
    color: var(--lb-teal-700);
    border: 1.5px solid var(--lb-teal);
    border-radius: var(--lb-radius-sm);
    text-decoration: none;
}

.blog-items .blog-item .readmore .btn:hover {
    background: var(--lb-teal);
    color: #fff;
}

/* ─── 3. Подкатегории — плитки ───────────────────────────────────
   Разметка своя: templates/cassiopeia/html/com_content/category/blog_children.php
   (ядро выводило «Кол-во материалов: 7» и <h3 class="page-header"> — не годилось). */

.cat-children {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 12px;
    margin: 0 0 34px;
}

/* Заголовок «Подкатегории».
   Раньше он лежал ВНУТРИ .cat-children (как в ядре) и держался только за счёт
   grid-column: 1/-1 — то есть был ячейкой сетки, растянутой на всю ширину.
   Стоило сменить тег h3→h2, селектор перестал совпадать, растяжка отвалилась —
   и заголовок встал ячейкой СЛЕВА ОТ ПЛИТОК.
   Теперь он вынесен из грида в шаблоне, и никакие grid-хаки ему не нужны. */
.lb-subcat-heading {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--lb-ink-soft);
}

.lb-subcat {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 13px 16px;
    background: var(--lb-bg-soft);
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-radius-sm);
    color: var(--lb-ink);
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.lb-subcat:hover,
.lb-subcat:focus {
    background: var(--lb-teal-050);
    border-color: var(--lb-teal-100);
    color: var(--lb-teal-700);
}

.lb-subcat__title {
    font-weight: 600;
    line-height: 1.3;
}

.lb-subcat__count {
    margin-left: auto;
    min-width: 26px;
    padding: 2px 8px;
    background: var(--lb-teal-100);
    color: var(--lb-teal-700);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    border-radius: 999px;
}

.lb-subcat__desc {
    flex-basis: 100%;
    font-size: .85rem;
    line-height: 1.45;
    color: var(--lb-ink-soft);
}

/* ─── 4. Пагинация — по центру ───────────────────────────────────*/

.com-content-category-blog__navigation,
.pagination-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 36px;
    padding-top: 26px;
    border-top: 1px solid var(--lb-line);
}

.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination .page-item {
    margin: 0;
}

.pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-radius-sm);
    color: var(--lb-ink);
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.pagination .page-link:hover {
    background: var(--lb-teal-050);
    border-color: var(--lb-teal-100);
    color: var(--lb-teal-700);
}

.pagination .page-item.active .page-link,
.pagination .active .page-link {
    background: var(--lb-teal);
    border-color: var(--lb-teal);
    color: #fff;
}

.pagination .page-item.disabled .page-link,
.pagination .disabled .page-link {
    opacity: .45;
    pointer-events: none;
}

.counter,
.pagination-counter {
    order: 2;
    margin: 0;
    font-size: .88rem;
    color: var(--lb-ink-soft);
    text-align: center;
}

/* ─── 5. Мобильные ───────────────────────────────────────────────*/

@media (max-width: 575.98px) {
    .blog-items.masonry-1,
    .blog-items.masonry-2,
    .blog-items.masonry-3,
    .blog-items.masonry-4 {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .cat-children {
        grid-template-columns: 1fr;
    }

    .pagination .page-link {
        min-width: 36px;
        height: 36px;
        padding: 0 9px;
    }
}

/* ─── ФИКС: кнопка к низу карточки + стрелка подменю ─────────────

   Проблема 1: .readmore — это <p>, и правило `.item-content p { margin: 0 0 12px }`
   перебивало `margin: auto 0 0`. Кнопка не прижималась.
   Решение: анонс растягиваем (flex:1), у .readmore margin-top:auto повышенной
   специфичностью.

   Проблема 2: стрелка подменю не рисовалась — селектор не цеплялся.
   Метка кнопки у Joomla: <button class="mm-collapsed mm-toggler mm-toggler-link">. */

/* анонс занимает всё свободное место → кнопка уезжает вниз */
.blog-items .blog-item .item-content > p.lb-lead,
.blog-items .blog-item .item-content > p:not(.readmore) {
    flex: 1 1 auto;
    margin: 0 0 14px;
}

/* кнопка — всегда у нижнего края */
.blog-items .blog-item .item-content > p.readmore {
    flex: 0 0 auto;
    margin: auto 0 0 !important;
    padding: 0;
}

.blog-items .blog-item .readmore .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* ─── Стрелка подменю ────────────────────────────────────────────
   ⚠️ Cassiopeia УЖЕ рисует треугольник:
      .metismenu.mod-menu .mm-toggler:after { border-top: .5em solid; ... }
   Своё правило (шеврон из двух границ) накладывалось поверх и давало РОМБ.
   Поэтому здесь — только косметика штатного: размер и цвет. */

.container-header .metismenu.mod-menu .mm-toggler {
    padding-inline: 2px;
}

.container-header .metismenu.mod-menu .mm-toggler:after {
    border-top-width: .34em;
    border-left-width: .28em;
    border-right-width: .28em;
    margin-inline-start: .3em;
    color: var(--lb-ink-soft);
    opacity: .75;
    transition: transform .2s ease, color .2s ease, opacity .2s ease;
}

/* родитель активен или под курсором — стрелка в акцент */
.container-header .metismenu > li:hover > .mm-toggler:after,
.container-header .metismenu > li.active > .mm-toggler:after,
.container-header .metismenu .mm-toggler[aria-expanded="true"]:after {
    color: var(--lb-teal);
    opacity: 1;
}

/* ─── ФОКУС: рамка на стрелке подменю ────────────────────────────
   Chrome рисует пунктирный outline на <button> при клике. Прошлый селектор
   (.container-header .mm-toggler) не добивал — кнопка живёт внутри
   .metismenu.mod-menu, и специфичности не хватало.

   Гасим outline на кнопке-стрелке полностью, а клавиатурную доступность
   возвращаем своей обводкой на :focus-visible. */

.mm-toggler,
.mm-toggler:focus,
.mm-toggler:active,
.metismenu .mm-toggler:focus,
.metismenu.mod-menu .mm-toggler:focus,
.container-header .metismenu .mm-toggler:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* клавиатурный фокус (Tab) — аккуратная бирюзовая обводка, а не пунктир */
.mm-toggler:focus-visible,
.metismenu.mod-menu .mm-toggler:focus-visible {
    outline: 2px solid var(--lb-teal) !important;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==================== ШАПКА НА МОБИЛЬНЫХ ====================
   Проблема: бренд («До заказа») и слоган («Проверь перед заказом») были
   свёрстаны под десктоп — шрифт 1.35rem и слоган в отдельной строке.
   На узком экране они жмутся к бургеру и разъезжаются.

   Решение: бренд и бургер — в одну строку по краям (space-between),
   слоган ужимается, а на совсем узких прячется: он декоративный,
   а не навигационный, и место дороже. */

@media (max-width: 991.98px) {

    /* топбар: бренд слева, бургер справа, ничего не переносится */
    .container-topbar {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: .5rem;
        padding-block: .5rem;
    }

    /* бренд — колонкой (название + слоган под ним), прижат влево,
       min-width:0 обязателен: иначе flex-элемент не даст тексту ужаться */
    .container-header.header .navbar-brand {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    .container-header.header .brand-logo {
        font-size: 1.15rem !important;   /* было 1.35 — на мобиле великовато */
        line-height: 1.2;
    }

    .brand-logo span {
        padding-left: .95rem;            /* маркер тоже ужимаем */
        white-space: nowrap;
    }
    .brand-logo span::before {
        width: .62rem; height: .62rem;
        box-shadow: 0 0 0 2px var(--lb-teal-050);
    }

    .container-header.header .site-description {
        font-size: .72rem;
        line-height: 1.15;
        margin: 0;
        padding-left: .95rem;            /* по левому краю с названием, а не с маркером */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* бургер не сжимается и не уезжает */
    .container-header.header .navbar-toggler {
        flex: 0 0 auto;
        margin-left: auto;
    }

    /* nav не должен растягиваться и толкать бренд */
    .container-topbar nav,
    .container-header.header .navbar {
        flex: 0 0 auto;
        padding: 0;
    }
}

/* Совсем узкие экраны: слоган убираем — он не несёт навигации,
   а из-за него бренд ломается на две строки и лезет на бургер. */
@media (max-width: 400px) {
    .container-header.header .site-description { display: none; }
    .container-header.header .brand-logo { font-size: 1.05rem !important; }
}

/* ==================== МОДУЛИ СТАТЕЙ ====================
   «Свежие статьи» (mod_articles_news) — на главной.
   «Читайте также» (mod_articles_category) — под каждой статьёй. */

/* Общий вид карточки модуля: убираем бутстраповскую рамку, даём воздух */
.lb-mod-news,
.lb-mod-related {
    border: 0;
    background: transparent;
    margin-top: 2.5rem;
}

.lb-mod-news > .card-header,
.lb-mod-related > .card-header {
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--lb-teal);
    padding: 0 0 .6rem;
    margin-bottom: 1.1rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--lb-ink);
}

.lb-mod-news > .card-body,
.lb-mod-related > .card-body {
    padding: 0;
}

/* ─── «Читайте также» — список ссылок ─── */

.lb-mod-related .mod-articlescategory {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}

.lb-mod-related .mod-articlescategory > li {
    margin: 0;
}

.lb-mod-related .mod-articles-category-title {
    display: block;
    padding: .8rem .9rem;
    background: var(--lb-teal-050);
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-radius-sm);
    color: var(--lb-ink);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.lb-mod-related .mod-articles-category-title:hover,
.lb-mod-related .mod-articles-category-title:focus {
    background: #fff;
    border-color: var(--lb-teal);
    color: var(--lb-teal-700);
}

/* ⚠️ Текущая статья в своём же списке «Читайте также».
   Модуль её НЕ исключает — helper только вешает класс .active (строка 263
   ArticlesCategoryHelper). Штатной галочки «не показывать текущую» нет,
   поэтому прячем пункт целиком: li, внутри которого лежит .active. */
.lb-mod-related .mod-articlescategory > li:has(.mod-articles-category-title.active) {
    display: none;
}

/* ─── «Свежие статьи» на главной ─── */

.lb-mod-news .newsflash {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 18px;
}

.lb-mod-news .newsflash-item {
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid var(--lb-line);
    border-radius: var(--lb-radius);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.lb-mod-news .newsflash-title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.35;
}

.lb-mod-news .newsflash-title a {
    color: var(--lb-ink);
    text-decoration: none;
}
.lb-mod-news .newsflash-title a:hover { color: var(--lb-teal-700); }

.lb-mod-news .newsflash-item p {
    margin: 0;
    font-size: .92rem;
    color: var(--lb-ink-soft);
    line-height: 1.5;
    /* обрезаем анонс до трёх строк — карточки должны быть одной высоты */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* кнопку «Подробнее» прижимаем к низу карточки */
.lb-mod-news .newsflash-item .readmore {
    margin-top: auto;
    padding-top: .4rem;
}

.lb-mod-news .readmore .btn {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--lb-teal-700);
    font-weight: 600;
    font-size: .9rem;
}