/*
  css/style.css — стили сайта.

  Подход "mobile-first": сначала пишем стили для маленького экрана
  телефона (это то, что идёт первым в файле, без всяких @media), а
  затем через @media (min-width: ...) ДОБАВЛЯЕМ/меняем стили для
  планшетов и десктопа. Так телефон получает только то, что ему
  нужно, и ничего лишнего не тормозит загрузку на медленном интернете.
*/

/* ---------- Иконки (SVG вместо эмодзи, см. includes/icons.php) ---------- */
.icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    vertical-align: middle;
}
.icon--sm { width: 15px; height: 15px; }
.icon--lg { width: 26px; height: 26px; }
.icon--xl { width: 36px; height: 36px; }
/* Закрашенная версия — для "лайкнуто", "оценено звездой" и т.п. */
.icon--filled { fill: currentColor; }

/* ---------- Сброс базовых отступов и общие переменные ---------- */
* {
    box-sizing: border-box;
}

:root {
    --color-primary: #e76f51;
    --color-primary-dark: #d15a3d;
    --color-accent: #f59e0b;
    --color-text: #1f2937;
    --color-text-muted: #6b7280;
    --color-bg: #f9fafb;
    --color-surface: #ffffff;
    --color-border: #e5e7eb;
    --color-danger: #dc2626;
    --radius: 10px;
    --tabbar-height: 60px;
}

html, body {
    margin: 0;
    padding: 0;
}

/* Резервируем место под вертикальный скроллбар всегда, даже когда
   страница коротка и он не нужен — иначе центрированные блоки
   (например .cabinet-layout в личном кабинете) чуть сдвигаются
   влево/вправо в зависимости от того, появился скроллбар на этой
   странице или нет (страница длиннее/короче экрана). */
html {
    scrollbar-gutter: stable;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.45;
    /* Место внизу экрана, чтобы нижняя панель навигации на телефоне
       не перекрывала последний блок контента */
    padding-bottom: calc(var(--tabbar-height) + 12px);
    /* Страховка на случай будущих похожих ошибок вёрстки: если
       что-то случайно вылезет за ширину экрана, страница просто
       обрежет лишнее, а не расползётся горизонтальной прокруткой
       (которая на телефоне выглядит особенно плохо). */
    overflow-x: hidden;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1, h2, h3 {
    margin: 0 0 8px;
    line-height: 1.25;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 12px;
}

/* Кнопки и кликабельные элементы — минимум 44x44px под палец на телефоне */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: var(--radius);
    border: none;
    font-family: inherit; /* <button> в отличие от <a> не наследует шрифт страницы сам по себе — без этого "Продлить"/"Удалить" смотрелись иначе, чем "Редактировать"/"Управление" */
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
}
.btn-primary:hover { background: var(--color-primary-dark); }

.btn-outline {
    background: #fff;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn-block {
    width: 100%;
}

/* ---------- Шапка сайта ---------- */
.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    /* Было 20 — меньше, чем z-index:29 у .notif-overlay ниже. У position:sticky
       + z-index свой стек-контекст, поэтому z-index:30 у .notif-panel
       (он ЛЕЖИТ ВНУТРИ .site-header) сравнивался не с оверлеем напрямую, а
       со стек-контекстом самого .site-header — и проигрывал (20 < 29).
       Из-за этого невидимый на вид .notif-overlay физически перекрывал
       панель уведомлений сверху и перехватывал события внутри неё —
       прокрутка списка и клики по пунктам не доходили до самой панели.
       31 — с запасом выше 29, стек-контекст шапки (и всё, что внутри
       него, включая панель) теперь гарантированно выше оверлея. */
    z-index: 31;
}

/* Панель уведомлений — выпадает под колокольчиком справа сверху и на
   телефоне, и на десктопе, вместо перехода на отдельную страницу.
   .site-header уже position:sticky, поэтому top:100% всегда ставит
   панель точно под шапкой, какой бы высоты она ни была. Невидимый
   .notif-overlay — на весь экран, только чтобы ловить клик "мимо" и
   закрывать панель; сама страница за ним остаётся видна и кликабельна
   везде, кроме как раз в момент открытой панели. */
.notif-overlay {
    position: fixed;
    inset: 0;
    z-index: 29;
    display: none;
}
.notif-overlay.is-open { display: block; }

.notif-panel {
    display: none;
    position: absolute;
    top: 100%;
    right: 12px;
    width: 340px;
    max-width: calc(100vw - 24px);
    max-height: 70vh;
    overflow-y: auto;
    margin-top: 8px;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: 0 10px 34px rgba(16, 24, 40, 0.22);
    z-index: 30;
}
.notif-panel.is-open { display: block; }

.notif-panel__header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.notif-panel__close {
    background: none;
    border: none;
    padding: 4px;
    display: flex;
    color: var(--color-text-muted);
    cursor: pointer;
}
.notif-panel__close:hover { color: var(--color-text); }

.notif-panel__list { padding: 6px; }

.notif-panel__item {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
}
.notif-panel__item.is-unread { background: var(--color-bg); }
.notif-panel__item p { margin: 0; font-size: 14px; }
.notif-panel__item .muted { font-size: 12px; }

.notif-panel__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
}

/* Обёртка логотипа + переключателя "Найти мастера/Заявки" — вместе как
   одна группа слева, чтобы .site-header__inner (space-between) держал её
   единым блоком, а не растягивал переключатель на всю ширину середины. */
.site-header__left {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}
.mode-switch--header {
    margin-bottom: 0;
}

.logo {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-primary);
    white-space: nowrap;
    display: flex;
    align-items: center;
    /* min-width:0 разрешает логотипу сжиматься меньше своей "естественной"
       ширины внутри flex-строки — без этого на узких телефонах он выталкивал
       колокольчик и переключатель языка за пределы экрана (см. .logo__img
       ниже и flex-shrink:0 у .site-header__right — та группа не сжимается
       никогда, сжимается только логотип). */
    min-width: 0;
    overflow: hidden;
}
/* На телефоне логотип больше не ведёт на главную (см. секцию "10" в
   js/main.js — там же и объяснение, почему) — специально не похож на
   кликабельную ссылку, курсор обычный, а не "рука". На десктопе (там нет
   нижней панели с иконкой "Главная") логотип остаётся обычной ссылкой. */
@media (max-width: 767px) {
    .logo { cursor: default; }
}

/* Пока нет файла img/logo.svg — используется текстовый логотип выше.
   Как только файл появится, .logo__img подхватится автоматически
   (см. includes/header.php) и ограничится по высоте, чтобы не
   "распирало" шапку логотипом произвольного размера. */
.logo__img {
    max-height: 40px;
    height: auto;
    width: auto;
    max-width: 100%;
    display: block;
}

/* Правая группа шапки. На телефоне полное меню (профиль/выход и т.д.)
   прячется — оно живёт в нижней панели (tab bar) — но колокольчик
   уведомлений и переключатель языка остаются видны и там, и там. */
.site-header__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.site-header__nav {
    display: none;
}

/* Колокольчик-уведомления для мобильной шапки — отдельная кнопка от той,
   что внутри .site-header__nav, потому что последняя целиком скрыта на
   телефоне. На десктопе прячем именно эту, чтобы колокольчик не задвоился. */
.site-header__mobile-bell {
    display: inline-flex;
}
@media (min-width: 768px) {
    /* .icon-btn (ниже по каскаду) тоже задаёт display, и при равной
       специфичности выигрывает более позднее правило — поэтому здесь
       нужны ДВА класса в селекторе, а не один, иначе на десктопе
       колокольчик всё равно остаётся виден и их становится два. */
    .icon-btn.site-header__mobile-bell {
        display: none;
    }
}

.lang-switch {
    display: flex;
    gap: 4px;
}
.lang-switch a {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
}
.lang-switch a.active {
    background: var(--color-primary);
    color: #fff;
}

/* Круглые кнопки-иконки в шапке (колокольчик, профиль, выход) —
   единый стиль вместо текстовых ссылок, компактнее и современнее. */
.icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--color-text-muted);
}
.icon-btn:hover {
    background: var(--color-bg);
    color: var(--color-primary);
}

.icon-btn__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--color-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 5px;
    min-width: 15px;
    text-align: center;
}

/* Утилита: элемент нужен для SEO/скринридеров, но не должен быть
   виден на экране — используется для дежурного H1 на главной, где
   заголовок дублирует то, что и так понятно из логотипа и категорий. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Поиск ---------- */
.search-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.search-bar input[type="text"] {
    /* На телефоне поле поиска — отдельная строка на всю ширину (100%),
       а кнопки (обёрнутые в .search-bar__buttons) переносятся под неё,
       во вторую строку. У .search-bar всего 2 дочерних элемента —
       input и .search-bar__buttons, оба по 100% ширины, поэтому перенос
       между ними однозначный и не зависит от арифметики трёх элементов
       сразу в одном ряду. */
    flex: 1 1 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 15px;
}

/* Строка 2 на телефоне: свой собственный, отдельный flex-ряд для двух
   кнопок — "Найти" занимает всё свободное место, иконка фильтров
   рядом с ней фиксированной ширины 44px (минимальный удобный размер
   для нажатия пальцем). */
.search-bar__buttons {
    display: flex;
    flex: 1 1 100%;
    gap: 8px;
}

.search-bar__buttons button[type="submit"] {
    flex: 1;
}

/* Кнопка "Фильтры" — только иконка (без текста), чтобы гарантированно
   помещаться рядом с кнопкой "Найти" даже на самых узких экранах
   (320-360px). Показывается только на телефоне — на десктопе вся
   панель фильтров видна сбоку постоянно, эта кнопка там не нужна
   (см. .filter-toggle { display:none } в блоке @media 768px ниже). */
.filter-toggle {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    flex: 0 0 44px;
    padding: 0;
    font-size: 18px;
}

/* ---------- Крупные карточки категорий с 3D-иллюстрациями (как на Avito) ----------
   Иллюстрации лежат в img/categories/{slug}.png — обрезаны точно по
   содержимому (прозрачный фон), поэтому картинка держится внутри
   .category-card__img с отступами от края и никогда не перекрывает
   рамку выделения активной карточки. */
.category-cards {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 14px 0;
}

.category-cards__grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.category-cards__grid::-webkit-scrollbar { display: none; }

.category-card {
    position: relative;
    flex: 0 0 auto;
    width: 152px;
    height: 132px;
    border-radius: 16px;
    overflow: hidden;
    background: #f2f2f4;
    color: var(--color-text);
    transition: transform .15s ease, box-shadow .15s ease;
}

.category-card:hover {
    box-shadow: 0 6px 16px rgba(16, 24, 40, 0.10);
    transform: translateY(-2px);
}

.category-card.active {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.category-card__label {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    z-index: 2;
}

.category-card__img {
    position: absolute;
    right: 8px;
    bottom: 6px;
    max-width: 58%;
    max-height: 62%;
    width: auto;
    height: auto;
    object-fit: contain;
    z-index: 1;
    pointer-events: none;
}

/* На широком экране карточки переносятся в несколько строк и
   центрируются как единый блок (в том числе неполная последняя строка —
   например 5 карточек во второй строке при 11 карточках всего). */
@media (min-width: 768px) {
    .category-cards__grid {
        flex-wrap: wrap;
        overflow-x: visible;
        justify-content: center;
    }
}

/* ---------- Панель фильтров ---------- */
.filters {
    scroll-margin-top: 64px; /* чтобы прилипающая шапка не перекрывала верх панели при переходе по /?open_filters=1#filters-panel */
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 12px;
    display: none; /* на телефоне скрыта, пока не нажали "Фильтры" */
}

.filters.is-open {
    display: block;
}

.filters__group {
    margin-bottom: 14px;
}

.filters__group label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--color-text-muted);
}

.filters select,
.filters input[type="number"] {
    width: 100%;
    min-height: 44px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 15px;
}

.filters__price-row {
    display: flex;
    gap: 8px;
}

.filters__checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    font-size: 14px;
}

/* Категории-аккордеон через <details>/<summary> — без единой строчки JS */
.category-tree details {
    border-bottom: 1px solid var(--color-border);
}

.category-tree summary {
    padding: 10px 4px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.category-tree summary::-webkit-details-marker { display: none; }
.category-tree summary::after {
    content: "▾";
    color: var(--color-text-muted);
    flex-shrink: 0;
    line-height: 1;
}

.category-tree .subcat-list {
    display: flex;
    flex-direction: column;
    padding: 0 4px 10px 12px;
    gap: 6px;
}

.category-tree .cat-link,
.category-tree .top-link {
    font-size: 14px;
    cursor: pointer;
    display: block;
}

/* Категория выбирается радиокнопкой, но не применяется сразу — только
   по кнопке "Показать" вместе с остальными фильтрами (см. filters-form
   в index.php). Сам radio прячем, а "выбрано" красим через JS-класс
   active на label (см. js/main.js) — переключается сразу, до отправки
   формы, чтобы было видно, что именно сейчас выбрано. */
.category-tree__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.category-tree a.active,
.category-tree label.active,
.filters a.active {
    color: var(--color-primary-dark);
    font-weight: 700;
}

.filters__actions {
    display: flex;
    gap: 8px;
}

/* ---------- Лента объявлений ---------- */
.listings-section {
    padding: 16px 12px 8px;
}

.listings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.listing-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Лёгкая тень вместо рамки — карточка выглядит легче на светлом фоне страницы */
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.06);
}

.listing-card.is-promoted {
    box-shadow: 0 0 0 2px var(--color-accent);
}

/* Если у объявления одновременно активны и ТОП, и "Выделение цветом" —
   показываем ТОЛЬКО градиентную рамку выделения, а не оранжевую рамку
   ТОПа поверх/рядом с ней (иначе получались бы сразу два разных
   кольца одновременно). Как только выделение закончится раньше ТОПа,
   класс is-highlighted у карточки пропадёт (см. index.php — обе даты
   проверяются независимо), и снова станет видна обычная оранжевая
   рамка ТОПа из правила выше — никакого отдельного кода для этого
   перехода не нужно. */
.listing-card.is-promoted.is-highlighted {
    box-shadow: none;
}

/* Платное "Выделение цветом" — намеренно НЕ бейдж "ТОП" и не влияет на
   порядок выдачи (см. includes/promotions.php): единственный сигнал —
   градиентная рамка по контуру карточки. Рисуется через маску (два
   слоя фона: сплошной внутри content-box, градиент снаружи, разница
   между ними даёт кольцо), а не через border/box-shadow — иначе не
   получить именно градиент, а не сплошной цвет. */
.listing-card.is-highlighted::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, #6366f1, #ec4899, #f59e0b);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.listing-card__promoted-tag {
    position: absolute;
    top: 6px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--color-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    z-index: 2;
}

/* --- "Супер-ТОП" — ступень ВЫШЕ обычного ТОПа (см. includes/promotions.php:
   is_super_promoted — отдельная колонка, поэтому и в сортировке на
   index.php такие объявления всегда идут раньше обычных ТОПов, сколько
   бы их ни было). Обводка — тот же оранжевый, что и у обычного ТОПа
   (var(--color-accent)), просто вдвое толще (4px вместо 2px); градиент —
   только у бейджа с короной, обводка нарочно одноцветная. Если у
   объявления одновременно и обычный ТОП, и/или "Выделение цветом" —
   показываем ТОЛЬКО кольцо супер-топа, чтобы на карточке не было сразу
   нескольких разных колец. */
.listing-card__promoted-tag--super {
    background: linear-gradient(135deg, #b91c1c, #f59e0b);
}

.listing-card.is-super-promoted {
    box-shadow: 0 0 0 4px var(--color-accent);
}
.listing-card.is-promoted.is-super-promoted {
    box-shadow: 0 0 0 4px var(--color-accent);
}

.listing-card.is-highlighted.is-super-promoted::before {
    content: none;
}

.listing-card__photo-wrap {
    position: relative;
}
.listing-card__photo-wrap > a { display: block; }

.listing-card__photo {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    /* Заполнитель на случай, если у объявления вообще нет фото. */
}

.listing-card__cover-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* Лайк — поверх фото, справа снизу (как на странице объявления,
   см. .gallery__like), а не рядом с заголовком — там его было легко
   промахнуться пальцем на телефоне вплотную к ссылке заголовка. */
.listing-card__like-form {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 2;
}

.listing-card__like {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.18);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.listing-card__like.is-liked { color: var(--color-danger); }

.listing-card__body {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.listing-card__path {
    font-size: 11px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.listing-card__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    /* Обрезаем длинный заголовок до 2 строк, чтобы карточки в ряду были одной высоты */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.listing-card__title a {
    color: inherit; /* иначе ссылка внутри h3 красится в акцентный цвет сайта, а не в чёрный текст заголовка */
}

.listing-card__city {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.listing-card__price {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
    background: #eef2ff;
    color: #3730a3;
    white-space: nowrap;
}

.badge--founding { background: #fef3c7; color: #92400e; }
.badge--recommended { background: #dcfce7; color: #166534; }
.badge--highlight { background: linear-gradient(135deg, #eef2ff, #fdf2f8); color: #6d28d9; }
.badge--super-top { background: linear-gradient(135deg, #fef2f2, #fffbeb); color: #b91c1c; }

.listing-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--color-border);
}

.listing-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.no-listings {
    text-align: center;
    padding: 40px 16px;
    color: var(--color-text-muted);
}

/* ---------- Страница объявления (listing.php) ---------- */
.breadcrumbs {
    font-size: 12px;
    color: var(--color-text-muted);
    padding: 10px 12px 0;
}
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-primary); }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-muted);
    /* Достаточная область нажатия, когда на телефоне остаётся одна
       иконка (см. .back-link__text ниже). */
    min-height: 38px;
}
.back-link:hover { color: var(--color-primary); }
/* На телефоне подпись рядом со стрелкой убираем — во всех этих местах
   (объявление, портфолио, переписка, кабинет) она и так объясняется тем,
   откуда открыли страницу; на десктопе, где это не так очевидно без
   верхнего меню под рукой, подпись остаётся. */
.back-link__text { display: none; }
@media (min-width: 768px) {
    .back-link__text { display: inline; }
}
@media (max-width: 767px) {
    .back-link .icon { width: 22px; height: 22px; }
}

.listing-detail {
    padding: 12px;
    max-width: 760px;
    margin: 0 auto;
}

.gallery__main-wrap {
    position: relative;
    overflow: hidden; /* чтобы фото не "выезжало" за скруглённые углы во время свайпа (см. js/main.js) */
    border-radius: var(--radius);
}

.gallery__main {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: #fff;
    /* Иначе на телефоне протягивание пальца по фото запускает встроенный
       в браузер "перетаскиваемый" призрак картинки поверх нашей же
       анимации свайпа (см. аналогичный фикс для карточек объявлений). */
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.gallery__main--zoomable { cursor: zoom-in; }

/* Лайтбокс — увеличенное фото на весь экран по клику (см. js/main.js,
   секция "Галерея"). Элемент создаётся один раз через JS и общий для
   любой галереи на странице. */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(17, 24, 39, 0.92);
    align-items: center;
    justify-content: center;
}
.lightbox.is-open { display: flex; }
.lightbox__img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 4px;
}
.lightbox__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.28); }
.lightbox__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.lightbox__arrow:hover { background: rgba(255, 255, 255, 0.28); }
.lightbox__arrow--prev { left: 12px; }
.lightbox__arrow--next { right: 12px; }
@media (min-width: 768px) {
    .lightbox__arrow--prev { left: 24px; }
    .lightbox__arrow--next { right: 24px; }
}

/* "Потяни вниз, чтобы обновить" — индикатор появляется из-под шапки по
   мере того, как палец тянет страницу вниз (см. js/main.js, секция 8).
   В покое стоит выше экрана (top: -50px), JS двигает его вниз через
   transform по мере свайпа. Только на телефоне — на десктопе такого
   жеста не бывает (мышью touch-события не сработают), но на всякий
   случай прячем и по ширине экрана тоже. */
.ptr-indicator {
    position: fixed;
    top: -50px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.2);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
    transition: transform 0.15s ease-out;
}
.ptr-indicator.is-ready { color: var(--color-primary); }
.ptr-indicator.is-loading { transition: transform 0.2s ease-out; }
.ptr-indicator.is-loading .icon { animation: ptr-spin 0.6s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
@media (min-width: 768px) {
    .ptr-indicator { display: none; }
}

/* Лайк теперь прямо на фото, справа снизу — как на Avito/Kaspi, а не
   рядом с заголовком (там раньше стоял <form style="display:contents">,
   из-за которого на некоторых мобильных браузерах, в первую очередь
   Safari/iOS, клик по кнопке не срабатывал — это известная особенность
   display:contents. Обычная позиционируемая форма этой проблемы лишена). */
.gallery__like-form {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
}

.gallery__like {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.18);
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
}

.gallery__share-wrap {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 2;
}
.gallery__share {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.18);
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
}
.gallery__share:hover { color: var(--color-primary); }

/* Всплывающая подсказка "Ссылка скопирована" — короткий тост снизу
   экрана (запасной путь для share, когда в браузере нет нативного
   системного окна "Поделиться", см. секцию share в js/main.js). */
.share-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--tabbar-height) + 16px);
    transform: translate(-50%, 8px);
    background: var(--color-text);
    color: #fff;
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.25);
    z-index: 200;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
.share-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Стрелки слайдера — поверх фото, слева и справа, по центру высоты.
   На телефоне помимо них можно ещё и свайпнуть — см. JS в конце файла. */
.gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.18);
    border: none;
    color: var(--color-text);
    cursor: pointer;
    padding: 0;
    z-index: 2;
}
.gallery__arrow:hover { background: #fff; }
.gallery__arrow--prev { left: 10px; }
.gallery__arrow--next { right: 10px; }
.gallery__like.is-liked { color: var(--color-danger); }

.gallery__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    overflow-x: auto;
}

.gallery__thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    opacity: .85;
}

.gallery__caption {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 6px;
}

.listing-header { margin-top: 18px; }

.listing-header__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.listing-header__top h1 { font-size: 20px; margin: 0; }

.listing-header__price {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-text);
    margin-top: 4px;
}

.listing-header__meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 6px;
}
.listing-header__meta span { display: inline-flex; align-items: center; gap: 4px; }

.listing-header__warranty {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.listing-header__warranty span {
    font-size: 14px;
    background: #eef2ff;
    color: #3730a3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 8px;
}

.master-card {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.master-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
    /* Без object-fit фото <img class="master-card__avatar"> просто
       растягивалось (сжималось) до 44x44 без учёта пропорций — на
       непропорциональных фото это выглядело как "размазанное" лицо.
       object-fit:cover обрезает лишнее по краям, но не искажает форму.
       На <div>-заглушке с буквой имени это свойство ни на что не влияет. */
    object-fit: cover;
}

.master-card__name { font-weight: 700; }

/* --- Публичный профиль мастера (master.php) — "шапка" профиля: цветная
   обложка, аватар поверх неё (частично перекрывает низ обложки), и в
   углу — QR-код на этот же профиль (см. includes/qrcode.php, свой
   уникальный SVG на каждого мастера, генерируется на лету, без внешних
   сервисов). Не путать с .master-card — тот используется как маленькая
   кликабельная карточка-ссылка НА master.php (на странице объявления,
   в переписке), а тут — сама "шапка" страницы профиля. */
.master-hero {
    margin-top: 4px;
}
.master-hero__cover {
    position: relative;
    height: 150px;
    border-radius: var(--radius) var(--radius) 0 0;
    background: linear-gradient(135deg, var(--color-primary), #f4a261);
}
.master-hero__qr {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #fff;
    padding: 5px;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.25);
    line-height: 0;
    display: block;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.master-hero__qr:hover { transform: scale(1.04); }
.master-hero__qr img { display: block; width: 64px; height: 64px; }

/* --- Всплывающая "визитка" мастера (открывается тапом по QR-коду в
   шапке профиля) — превью в стиле референса (тёмная карточка: логотип,
   имя, QR, подпись сайта), которую можно скачать целиком как картинку
   (см. data-qr-card-download в js/main.js — рисуется на <canvas>
   средствами браузера и уже ОТТУДА сохраняется, а не просто скачивает
   голый QR, как раньше). */
dialog.qr-card-dialog {
    border: none;
    border-radius: 24px;
    padding: 0;
    width: min(300px, 88vw);
    background: transparent;
}
dialog.qr-card-dialog::backdrop { background: rgba(15, 23, 42, 0.6); }
.qr-card {
    position: relative;
    background: #14181f;
    border-radius: 24px;
    padding: 28px 24px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.qr-card__close {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
}
.qr-card__download {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
}
.qr-card__close:hover, .qr-card__download:hover { background: rgba(255, 255, 255, 0.2); }
.qr-card__logo { height: 30px; margin-top: 6px; }
.qr-card__logo img { height: 100%; display: block; }
.qr-card__name {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    margin-top: 14px;
}
.qr-card__qr-wrap {
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    margin-top: 20px;
}
.qr-card__qr-wrap img { display: block; width: 160px; height: 160px; }
.qr-card__tagline {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    margin-top: 18px;
    line-height: 1.4;
}
.master-hero__body {
    position: relative;
    background: var(--color-surface);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 54px 16px 16px; /* 54 = половина высоты аватара (44) + отступ до имени */
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.06);
}
/* Аватар — ровно наполовину поверх обложки: лежит внутри .master-hero__cover
   (не .master-hero__body!), "bottom:0" ставит его нижний край точно на
   границу обложки, а translateY(50%) сдвигает вниз на половину СВОЕЙ
   высоты — так центр круга оказывается точно на стыке обложки и белой
   части, независимо от точной высоты обложки (никакого "магического"
   отрицательного margin, который раньше давал ненадёжный нахлёст). */
.master-hero__avatar {
    position: absolute;
    left: 16px;
    bottom: 0;
    transform: translateY(50%);
    z-index: 2;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 4px solid var(--color-surface);
    box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.06);
    object-fit: cover;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
}
/* Имя — слева, бейджики — справа, на одной строке (там, где у референса
   стояла кнопка "View profile"); на телефоне, если не влезает в одну
   строку, бейджики просто переносятся под имя (flex-wrap). */
.master-hero__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.master-hero__name { margin: 0; }
.master-hero__badges { justify-content: flex-end; }

/* Рейтинг/город/языки — не просто строка текста, а "плитки" в духе
   референса (маленькая серая подпись сверху, значение снизу), в ряд,
   с чертой-разделителем НАД всем рядом (как в референсе перед "First
   seen/...") и тонкими вертикальными разделителями МЕЖДУ плитками. */
.master-hero__stats {
    display: flex;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}
.master-hero__stat {
    padding: 0 20px;
}
.master-hero__stat:first-child { padding-left: 0; }
.master-hero__stat:not(:last-child) {
    border-right: 1px solid var(--color-border);
}
.master-hero__stat-label {
    font-size: 12px;
    color: var(--color-text-muted);
}
.master-hero__stat-value {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 2px;
}
/* Языки — списком, каждый на своей строке, а не через запятую в одну
   строку: на телефоне "Языки" — самая узкая колонка (после "Рейтинг" и
   "Город" места остаётся мало), и сплошная строка "казахский, русский,
   английский" некрасиво переносилась/съезжала. Список читается лучше и
   не ломает верстку независимо от ширины экрана. */
.master-hero__stat-value--list { align-items: flex-start; }
/* Без этого иконка глобуса стояла у самого верха, а текст первой строки
   визуально начинается чуть ниже (из-за line-height у текста) — на вид
   получалось "криво". margin-top у иконки + фиксированная line-height у
   строк списка выравнивают её точно по центру первой строки. */
.master-hero__stat-value--list > .icon { margin-top: 3px; flex-shrink: 0; }
.master-hero__lang-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 20px;
}

/* Телефон/"Написать" — отдельный ряд под рейтингом/городом/языками (не
   сбоку), с той же чертой-разделителем сверху, что и у .master-hero__stats. */
.master-hero__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

/* Секции "Объявления мастера" / "Портфолио" на публичном профиле — та
   же тень, что у шапки (.master-hero__body), чтобы весь профиль читался
   как набор одинаковых по весу карточек, а не шапка-карточка + голый
   список под ней. Это НАМЕРЕННО отдельный класс, а не правка
   .my-listing-row/.portfolio-project — те переиспользуются на других
   страницах (кабинет, админка) с их собственной, более лёгкой тенью,
   трогать которую тут не нужно. */
.master-section {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 16px;
    margin-top: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.06);
}
.master-section h2 { margin-top: 0; }
.master-section .my-listing-row:last-child,
.master-section .portfolio-project:last-child {
    margin-bottom: 0;
}
/* Карточки объявлений и портфолио на публичном профиле — та же тонкая
   рамка, что и у линий-разделителей Рейтинг/Город/Языки в шапке
   (var(--color-border)), в дополнение к обычной тени — чтобы границы
   карточек были виднее. */
.master-section .my-listing-row,
.master-section .portfolio-project {
    border: 1px solid var(--color-border);
}

.features { margin-top: 20px; }
.features h2 { font-size: 16px; }
.features__list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.features__list li { font-size: 14px; }

.listing-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}
@media (min-width: 480px) {
    .listing-actions { flex-direction: row; }
}

.reviews {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}
.reviews h2 { font-size: 16px; }
.review { padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.review:last-child { border-bottom: none; }
.review__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.review__stars { display: inline-flex; align-items: center; color: #f59e0b; white-space: nowrap; }
.review__date { font-size: 12px; color: var(--color-text-muted); }
.review p { margin: 6px 0 0; font-size: 14px; }
.review__listing-link { color: var(--color-text); font-weight: 600; }
.muted { color: var(--color-text-muted); }

/* Звёзды-кнопки для формы "Оставить отзыв" (см. listing.php). Пять
   настоящих <input type="radio"> (спрятаны через .visually-hidden, но
   остаются доступны с клавиатуры/скринридера и участвуют в required-
   валидации формы) + подписанные на них <label> с иконкой звезды —
   без единой строчки JS. Радиокнопки идут в ОБРАТНОМ порядке (5..1) и
   контейнер перевёрнут через row-reverse, чтобы на экране всё равно
   читалось слева направо 1→5, а комбинатор "~" (все ПОЗЖЕ идущие в DOM
   соседи) заодно закрашивал и "более ранние" по DOM звёзды — то есть
   визуально всё, что слева от выбранной/наведённой звезды. */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}
.star-rating__label {
    display: block;
    margin: 0;
    padding: 2px;
    line-height: 0;
    color: var(--color-text-muted);
    cursor: pointer;
}
.star-rating__icon {
    width: 30px;
    height: 30px;
    pointer-events: none;
}
.star-rating__input:checked ~ .star-rating__label,
.star-rating__label:hover,
.star-rating__label:hover ~ .star-rating__label {
    color: var(--color-accent);
}
.star-rating__input:checked ~ .star-rating__label .star-rating__icon,
.star-rating__label:hover .star-rating__icon,
.star-rating__label:hover ~ .star-rating__label .star-rating__icon {
    fill: currentColor;
}
.star-rating__input:focus-visible + .star-rating__label {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

dialog#report-dialog {
    border: none;
    border-radius: var(--radius);
    padding: 0;
    width: min(420px, 92vw);
}
dialog#report-dialog::backdrop { background: rgba(15, 23, 42, 0.5); }
.dialog-body { padding: 18px; }
.dialog-body h2 { margin-top: 0; font-size: 17px; }
.report-reason { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; }
.dialog-body textarea {
    width: 100%;
    min-height: 70px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px;
    font-family: inherit;
    font-size: 14px;
    margin-top: 6px;
}
.dialog-actions { display: flex; gap: 8px; margin-top: 14px; }

dialog#add-sheet-dialog {
    border: none;
    border-radius: var(--radius);
    padding: 0;
    width: min(360px, 92vw);
}
dialog#add-sheet-dialog::backdrop { background: rgba(15, 23, 42, 0.5); }
.add-sheet-options { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.add-sheet-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
}
.add-sheet-option:hover { background: var(--color-bg); }
.add-sheet-option .icon { flex: none; color: var(--color-primary); }

.not-found {
    text-align: center;
    padding: 60px 16px;
}
.not-found__emoji { font-size: 48px; }

/* ---------- Формы: регистрация / вход / восстановление пароля ---------- */
.auth-wrap { padding: 24px 12px 40px; }

.auth-card {
    max-width: 440px;
    margin: 0 auto;
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}
.auth-card h1 { font-size: 20px; margin-top: 0; }
.auth-card p.muted { margin-top: -8px; }

.form-group { margin-bottom: 14px; }
.form-group label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
}
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group select {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 15px;
}

/* Несъёмный префикс "+7" в поле телефона при регистрации — визуально
   закреплён, пользователь вводит только оставшиеся 10 цифр. Так на
   сайте регистрируются только казахстанские номера, это видно сразу,
   ещё до отправки формы (сервер и так это уже проверял через
   normalize_kz_phone(), но раньше это было заметно только через
   бледный placeholder, который пропадает при вводе). */
.phone-input-group {
    display: flex;
    align-items: center;
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0 12px;
    gap: 6px;
}
.phone-input-group__prefix {
    display: flex;
    align-items: center;
    height: 42px;
    line-height: 1;
    font-size: 15px;
    font-family: inherit;
    font-weight: 600;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.form-group .phone-input-group input[type="tel"] {
    flex: 1;
    width: auto;
    height: 42px;
    min-height: 42px;
    line-height: 1;
    border: none;
    padding: 0;
    font-size: 15px;
}
.form-group .phone-input-group input[type="tel"]:focus {
    outline: none;
}
.phone-input-group:focus-within {
    border-color: var(--color-primary);
}

.radio-group, .checkbox-group-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.radio-option, .checkbox-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
}

.form-errors {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 14px;
}
.form-errors ul { margin: 0; padding-left: 18px; }

.form-info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 14px;
}

.code-display {
    background: #fffbeb;
    border: 1px dashed #f59e0b;
    color: #92400e;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 800;
    text-align: center;
    letter-spacing: 6px;
    margin-bottom: 14px;
}

.auth-links { margin-top: 14px; font-size: 14px; text-align: center; }
.auth-links + .auth-links { margin-top: 4px; }

.consent-row { display: flex; gap: 8px; font-size: 13px; align-items: flex-start; }
.consent-row input { margin-top: 3px; flex-shrink: 0; }

.link-btn {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 14px;
    cursor: pointer;
    padding: 0;
}

/* ---------- Личный кабинет ---------- */
.cabinet-nav {
    /* На телефоне навигация по кабинету теперь идёт через мобильный хаб
       профиля (dashboard-profile.php, см. человечка в нижней панели) и
       иконку "назад" на каждой странице (.cabinet-back) — эта горизонтальная
       строка вкладок больше не нужна и не показывается. На десктопе (см.
       @media ниже) она возвращается уже в виде вертикального меню слева. */
    display: none;
    justify-content: safe center; /* центр, если вкладки помещаются; если нет —
        не обрезает первую вкладку слева, просто становится прокручиваемым
        списком от начала, как обычно */
    gap: 8px;
    overflow-x: auto;
    padding: 12px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    -webkit-overflow-scrolling: touch;
}
.cabinet-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 20px;
    background: var(--color-bg);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.cabinet-nav a.active { background: var(--color-primary); color: #fff; }

/* Кнопка "На главную" над меню — только для десктопа (на телефоне уже
   есть иконка "Главная" в нижней панели, дублировать незачем). */
.cabinet-home-link { display: none; }

/* Иконка и стрелка внутри пункта меню — только для десктопного
   вертикального меню слева (см. @media ниже), на телефоне в горизонтальных
   "таблетках" их не было и не должно появиться. */
.cabinet-nav__icon, .cabinet-nav__arrow { display: none; }

/* "Понравившиеся" и "Сообщения" дублируют нижнюю панель на телефоне —
   прячем их тут именно на мобильном, на десктопе (нижней панели нет)
   показываем как обычно, см. @media(min-width:768px) ниже.
   Селектор "a.cabinet-nav__item--desktop-only" (а не просто класс) —
   иначе специфичность проигрывает правилу ".cabinet-nav a { display:flex }"
   выше, и display:none тут ни на что бы не повлиял. */
.cabinet-nav a.cabinet-nav__item--desktop-only { display: none; }
@media (min-width: 768px) {
    .cabinet-nav a.cabinet-nav__item--desktop-only { display: flex; }
}

/* Некоторые страницы прячут меню кабинета целиком на телефоне (см.
   $cabinetNavMobileHidden в includes/cabinet_nav.php) — на десктопе
   меню всё равно нужно, там нижней панели нет. */
.cabinet-nav--mobile-hidden { display: none; }
@media (min-width: 768px) {
    .cabinet-nav--mobile-hidden { display: flex; }
}

/* ---------- Личный кабинет: фиксированное меню слева (десктоп) ----------
   На телефоне .cabinet-layout ничем не отличается от обычного блока —
   .cabinet-nav (горизонтальные "таблетки") и .cabinet-main просто идут
   друг за другом сверху вниз, как и раньше. С 768px .cabinet-nav
   становится вертикальным списком слева, .cabinet-main — колонкой
   действий справа, см. includes/cabinet_nav.php. */
@media (min-width: 768px) {
    .cabinet-layout {
        display: flex;
        /* stretch (по умолчанию для flex), а не flex-start — иначе, когда
           контент справа короче меню слева (например, 1-2 карточки в
           "Избранных"), разделительная линия обрывалась бы вместе с ним,
           не доходя до низа меню. Со stretch обе колонки всегда равны по
           высоте более высокой из них — линия .cabinet-main (border-left)
           тянется минимум до конца меню, а если контент, наоборот, длиннее
           меню — просто немного увеличивает пустую высоту .cabinet-sidebar,
           у него самого нет фона/рамки, поэтому это никак не видно. */
        gap: 28px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 24px 24px 40px;
    }
    .cabinet-sidebar {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 240px;
        flex-shrink: 0;
    }
    .cabinet-home-link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 11px 14px;
        border-radius: var(--radius);
        background: var(--color-surface);
        color: var(--color-text);
        font-size: 14px;
        font-weight: 600;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.06);
    }
    .cabinet-home-link:hover { color: var(--color-primary); }
    .cabinet-home-link__icon { width: 18px; height: 18px; flex-shrink: 0; }
    .cabinet-nav {
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow-x: visible;
        padding: 10px;
        border-radius: var(--radius);
        border-bottom: none;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.06);
        gap: 2px;
    }
    .cabinet-nav a {
        justify-content: flex-start;
        width: 100%;
        border-radius: 8px;
        padding: 11px 12px;
        font-size: 14px;
        color: var(--color-text);
        background: none;
        /* Длинные пункты (например "Мои активные продвижения" или казахские
           варианты покороче) переносятся на вторую строку, а не вылезают
           за край карточки меню — на телефоне это по-прежнему "таблетка"
           в одну строку, там это ни на что не влияет. */
        white-space: normal;
    }
    .cabinet-nav a:hover { background: var(--color-bg); }
    .cabinet-nav a.active { background: var(--color-primary); color: #fff; }
    .cabinet-nav__icon {
        display: block;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }
    .cabinet-nav__arrow {
        display: block;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        margin-left: auto;
        opacity: 0.55;
    }
    .cabinet-nav a.active .cabinet-nav__arrow { opacity: 1; }
    .cabinet-main {
        flex: 1;
        min-width: 0;
        transition: opacity 0.12s ease;
        /* Простая разделительная линия между меню слева и страницей справа —
           тот же цвет и толщина, что у разделителей Рейтинг/Город/Языки в
           профиле мастера (см. .master-hero__stat), без рамки/тени вокруг
           самого контента. */
        border-left: 1px solid var(--color-border);
        padding-left: 24px;
    }
    /* Пока грузится следующая страница кабинета (переход по меню слева
       без полной перезагрузки, см. секцию 9 в js/main.js) — лёгкое
       затемнение вместо резкого "исчезновения" контента. */
    .cabinet-main.is-loading { opacity: 0.5; }
}

/* Иконка "назад" в верхнем левом углу страниц кабинета — только на
   телефоне (см. includes/cabinet_nav.php), без подписи: на телефоне
   меню кабинета больше нет (см. .cabinet-nav выше), это единственный
   способ вернуться в хаб профиля (dashboard-profile.php), кроме кнопки
   "назад" самого браузера/приложения. */
.cabinet-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 12px 0 0 12px;
    border-radius: 50%;
    color: var(--color-text);
}
.cabinet-back:active { background: var(--color-bg); }
.cabinet-back__icon { width: 22px; height: 22px; }

/* Утилита: показать элемент только на телефоне (см. @media ниже). */
.mobile-only { display: block; }
@media (min-width: 768px) {
    .mobile-only { display: none; }
}

/* Утилита: обратное — показать элемент только на десктопе (см. @media ниже). */
.desktop-only { display: none; }
@media (min-width: 768px) {
    .desktop-only { display: block; }
}

/* ---------- Мобильный хаб профиля (dashboard-profile.php) ----------
   Экран, который открывается по нажатию на человечка в нижней панели на
   телефоне: карточка с фото/именем сверху (ведёт в публичный профиль
   мастера, если пользователь — мастер) и список разделов кабинета ниже.
   На десктопе эта страница не используется (см. dashboard-profile.php),
   поэтому стили не завёрнуты в @media — сама разметка уже .mobile-only. */
.profile-hub { padding: 16px 12px 40px; max-width: 480px; margin: 0 auto; }
.profile-hub__title { font-size: 20px; margin: 0 0 12px; }

.profile-hub__header {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    color: inherit;
    margin-bottom: 20px;
}
.profile-hub__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
}
.profile-hub__header-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 2px;
    min-width: 0;
}
.profile-hub__header-text strong { font-size: 16px; }
.profile-hub__header-text .muted {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-hub__header-arrow {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-left: auto;
    color: var(--color-text-muted);
}

.profile-hub__card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    overflow: hidden;
}
.profile-hub__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
}
.profile-hub__row:last-child { border-bottom: none; }
.profile-hub__row:active { background: var(--color-bg); }
.profile-hub__row-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--color-text-muted);
}
.profile-hub__row > span {
    flex: 1;
    min-width: 0;
}
.profile-hub__row-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

/* Сердечко в списке "Избранные" — справа от строки объявления, чтобы
   можно было убрать из избранного, не заходя внутрь объявления. */
.favorites-like-form {
    margin-left: auto;
    align-self: center;
    flex-shrink: 0;
}
.favorites-like {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--color-bg);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}
.favorites-like.is-liked { color: var(--color-danger); }

/* ---------- Заявки заказчиков (requests.php) ---------- */

/* Переключатель "Объявления/Заявки" над категориями — только на
   десктопе (на телефоне это разные вкладки нижней панели, см.
   includes/footer.php, переключатель там не нужен). */
.mode-switch {
    /* display управляется через .desktop-only (см. style.css выше) —
       тут только gap/фон/т.д., без display, иначе оно бы перебивало
       .desktop-only { display: none } на телефоне (одинаковая
       специфичность, а это правило ниже по каскаду). */
    gap: 2px;
    background: var(--color-bg);
    border-radius: 999px;
    padding: 3px;
    margin-bottom: 12px;
}
@media (min-width: 768px) {
    .mode-switch.desktop-only { display: inline-flex; }
}
.mode-switch__option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-muted);
}
.mode-switch__option.is-active {
    background: var(--color-surface);
    color: var(--color-primary);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

/* Иконка "FAQ" в шапке на телефоне — соразмерна переключателю RU/KZ
   и стоит в одном ряду слева от него (см. includes/header.php). На
   десктопе вместо неё третьим пунктом в переключателе "Найти мастера /
   Заявки" показывается обычный .mode-switch__option — своя разметка
   там не нужна, стиль уже даёт нужный вид сама эта общая клетка.
   display НЕ задаём вне @media — иначе на равной специфичности с
   .mobile-only (см. выше по каскаду) код ниже мог бы перебить
   display:none на десктопе (та же ошибка, что уже была здесь раньше, —
   исправлена сужением правила только на диапазон телефона). */
.header-faq-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}
.header-faq-icon:hover {
    background: var(--color-bg);
    color: var(--color-primary);
}
/* Активная (мы сейчас на faq.php) — красим только линии самой иконки,
   БЕЗ закрашенного квадрата/фона позади неё (специально просили не
   как у активного .mode-switch__option на десктопе). */
.header-faq-icon.is-active {
    color: var(--color-primary);
}
.header-faq-icon .icon {
    width: 22px;
    height: 22px;
}
/* Иконка FAQ внутри десктопного переключателя (см. .mode-switch__option
   в includes/header.php) — крупнее, чем у "Найти мастера"/"Заявки"
   (там icon--sm, 15px) специально по просьбе: сам значок "?" мельче
   читается на этом размере, чем плоские иконки соседних пунктов. */
.header-faq-icon-desktop {
    width: 20px;
    height: 20px;
}
@media (max-width: 767px) {
    .header-faq-icon.mobile-only { display: inline-flex; }
    /* Иконка FAQ заметно меньше колокольчика (32px против 38px), и её
       "?" сидит ближе к своему правому краю, чем колокольчик — при
       одинаковом gap в .site-header__right видимый промежуток до
       колокольчика получался шире, чем от колокольчика до RU (замерено
       через getBoundingClientRect: 24px против 19px). Подтягиваем на
       разницу, чтобы визуально расстояния совпадали. */
    .header-faq-icon.mobile-only { margin-right: -5px; }
}

/* Список заявок — компактные строки, не карточки с фото (у заявки нет
   фото), см. requests.php. Структура строки повторяет .my-listing-row
   (та же сетка flex + сердечко "в избранное" справа), но без фото слева. */
.request-row {
    display: flex;
    gap: 12px;
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    align-items: flex-start;
}
.request-row__body {
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    display: block;
}
.request-row__title {
    font-weight: 700;
    font-size: 15px;
    margin-top: 2px;
}

/* Кнопка "Выйти" в настройках — только на телефоне (см. dashboard-settings.php),
   на десктопе выход и так есть в шапке. */
.mobile-only-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-bottom: 16px;
}
@media (min-width: 768px) {
    .mobile-only-logout { display: none; }
}

.cabinet-content {
    padding: 16px 12px 40px;
    max-width: 900px;
    margin: 0 auto;
}
.cabinet-content h1 { font-size: 20px; }
.cabinet-content h2 { font-size: 16px; }
.cabinet-content__subheading {
    margin-top: 24px;
}
.cabinet-content__subheading:first-of-type {
    margin-top: 0;
}
/* На десктопе центрирование и внешние отступы уже делает .cabinet-layout —
   .cabinet-content внутри .cabinet-main (страницы кабинета с меню слева)
   просто занимает всю колонку справа. Важно: именно ".cabinet-main
   .cabinet-content", а не просто ".cabinet-content" — иначе тот же класс
   на master.php (публичный профиль, без меню слева, свой центрированный
   max-width:900px) тоже терял бы ограничение ширины и растягивался на
   весь экран. */
@media (min-width: 768px) {
    .cabinet-main .cabinet-content {
        padding: 0 0 40px;
        max-width: none;
        margin: 0;
    }
}

.stat-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.stat-tile {
    flex: 1 1 140px;
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.stat-tile__value { font-size: 22px; font-weight: 800; color: var(--color-primary-dark); }
.stat-tile__label { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }

/* Тайлы пакетов продвижения (dashboard-listing.php) — заголовки у пакетов
   разной длины ("Топ 24 часа" против "Годовая публикация (365 дней, без
   архивации)"), из-за чего цена и кнопка "Оплатить" уезжали на разную
   высоту в разных карточках одного ряда. flex-column + margin-top:auto
   на форме прижимает кнопку к низу каждой карточки, а .stat-row (flex,
   align-items стандартно stretch) уравнивает высоту самих карточек —
   в итоге все кнопки в ряду стоят на одной линии независимо от длины
   заголовка. Рамка — чтобы границы карточек были видны, не только тень. */
.promo-tile {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
}
/* Заголовок пакета получает фиксированную высоту (с запасом на 3 строки
   при самом длинном названии — "Годовая публикация (365 дней, без
   архивации)"), поэтому цена под ним стартует на одной и той же высоте
   во всех карточках ряда, даже если короткие названия занимают 1 строку. */
.promo-tile__title { min-height: 62px; line-height: 1.3; }
/* Та же идея, что и у заголовка выше: у самого длинного описания
   (Супер-ТОП, два предложения) получается 4-5 строк — фиксированная
   высота с запасом под них выравнивает цену под всеми карточками по
   одной горизонтали, даже если у соседней карточки описание короче. */
.promo-tile__description {
    min-height: 92px;
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-bottom: 8px;
}
.promo-tile form { margin-top: auto; padding-top: 8px; }

.empty-state {
    text-align: center;
    padding: 40px 16px;
    color: var(--color-text-muted);
}

.my-listing-row {
    display: flex;
    gap: 12px;
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    align-items: flex-start;
    flex-wrap: wrap;
}
.my-listing-row__photo {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
}
.my-listing-row__body { flex: 1; min-width: 160px; }
.my-listing-row__title { font-weight: 700; font-size: 15px; }
.my-listing-row__title a { color: var(--color-text); }
.my-listing-row__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.my-listing-row__actions > a,
.my-listing-row__actions > form { flex: 1 1 120px; }
.my-listing-row__actions > form .btn { width: 100%; }

.status-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}
.status-pill--pending { background: #fef3c7; color: #92400e; }
.status-pill--approved { background: #dcfce7; color: #166534; }
.status-pill--rejected { background: #fee2e2; color: #991b1b; }
.status-pill--revision { background: #fed7aa; color: #9a3412; }
.status-pill--expired { background: #e5e7eb; color: #4b5563; }

.portfolio-project {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.portfolio-project strong a {
    color: var(--color-text); /* название проекта — чёрным, а не акцентным цветом ссылок */
}
.portfolio-project__photos {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-top: 8px;
}

.portfolio-project__photos img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.avatar-preview {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
}

.settings-section {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.settings-section--danger { border: 1px solid #fecaca; }
.settings-section--danger h2 { color: #991b1b; }

/* ---------- Пагинация ---------- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 20px 12px 8px;
    flex-wrap: wrap;
}

.pagination a,
.pagination span {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: 14px;
}

.pagination a.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ---------- Нижняя панель навигации (tab bar), только на телефоне ---------- */
.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--tabbar-height);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    display: flex;
    z-index: 30;
}

.tabbar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 11px;
    color: var(--color-text-muted);
    min-width: 44px;
    min-height: 44px;
}
/* Кнопка "+" у роли "both" — это <button>, а не <a> (открывает диалог
   выбора вместо прямого перехода), сбрасываем стандартные стили браузера. */
button.tabbar__item {
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

.tabbar__item .tabbar__icon {
    font-size: 20px;
}

.tabbar__item.is-active {
    color: var(--color-primary);
    font-weight: 700;
}

/* Акцентная кнопка "Добавить объявление" по центру панели */
.tabbar__item--add .tabbar__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -14px;
    box-shadow: 0 2px 6px rgba(231,111,81,0.4);
}
.tabbar__item--add .tabbar__icon .icon {
    width: 22px;
    height: 22px;
}
/* Пока открыта сама форма размещения объявления (listing-form.php,
   $activeTab = 'add') — кольцо вокруг круглой кнопки "+", чтобы было
   видно, какой именно раздел сейчас открыт (обычная подсветка цветом
   текста, как у остальных пунктов панели, тут не сработала бы — кнопка
   и так уже акцентного цвета). */
.tabbar__item--add.is-active .tabbar__icon {
    box-shadow: 0 0 0 3px rgba(231, 111, 81, 0.35), 0 2px 6px rgba(231, 111, 81, 0.4);
}

.tabbar__badge {
    position: absolute;
    background: var(--color-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 5px;
    transform: translate(10px, -8px);
}

/* ---------- Подвал ---------- */
.site-footer {
    /* На телефоне подвал только зря съедал место над нижней панелью
       (.tabbar) — на десктопе (там нижней панели нет) он остаётся как
       обычно, см. @media(min-width:768px) ниже. */
    display: none;
    margin-top: 72px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    font-size: 13px;
    color: var(--color-text-muted);
}
.site-footer a { color: var(--color-text-muted); text-decoration: underline; }
@media (min-width: 768px) {
    .site-footer { display: block; }
}

/* Верхняя часть подвала: логотип+описание слева, три колонки контактов
   справа (см. includes/footer.php) — по образцу подвалов других
   маркетплейсов (например naimi.kz). */
.site-footer__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 28px;
    padding: 32px 12px;
}
.site-footer__brand { max-width: 320px; }
.logo--footer {
    font-size: 32px;
    margin-bottom: 12px;
}
.logo--footer .logo__img { max-height: 40px; }
.site-footer__tagline {
    margin: 0;
    line-height: 1.5;
}
.site-footer__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
}
.site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 170px;
}
.site-footer__contact a {
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
}
.site-footer__contact a:hover { color: var(--color-primary); }
.site-footer__contact span { font-size: 12px; }

/* Нижняя полоса: ссылки на политику/соглашение мелким шрифтом рядом
   с копирайтом (как в примере) — на отдельной строке под верхней
   частью, с разделительной линией. */
.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 20px;
    padding: 14px 12px;
    border-top: 1px solid var(--color-border);
}
.site-footer__bottom p { margin: 0; }
.site-footer__legal {
    display: flex;
    gap: 20px;
}
.site-footer__legal a { text-decoration: none; }
.site-footer__legal a:hover { text-decoration: underline; }

/* =====================================================================
   ПЛАНШЕТЫ (от 768px) — с этой ширины показываем 3 карточки в ряд
   (на телефоне уже было 2, здесь на ступень больше), и прячем нижнюю
   панель навигации, потому что на экране становится достаточно места
   для обычного верхнего меню.
   ===================================================================== */
@media (min-width: 768px) {
    .tabbar { display: none; }
    body { padding-bottom: 0; }

    .listings-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .listing-card__photo { font-size: 42px; }
    .listing-card__like { width: 36px; height: 36px; font-size: 18px; }
    .listing-card__body { padding: 12px; gap: 6px; }
    .listing-card__path { font-size: 12px; }
    .listing-card__title { font-size: 16px; }
    .listing-card__city { font-size: 13px; }
    .listing-card__price { font-size: 17px; }
    .badge { font-size: 11px; padding: 3px 8px; }

    .category-card { width: 187px; height: 158px; }
    .category-card__label { font-size: 14px; }


    .site-header__nav {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    /* Панель фильтров на планшете/десктопе — всегда видна сбоку,
       кнопка "Фильтры" (которая нужна только на телефоне) прячется */
    .filter-toggle { display: none; }

    /* На широком экране места достаточно — поле поиска и кнопка
       "Найти" возвращаются в одну строку (двухрядная раскладка была
       нужна только на телефоне, чтобы гарантированно поместилось) */
    .search-bar { flex-wrap: nowrap; }
    .search-bar input[type="text"] { flex: 1 1 auto; }
    .search-bar__buttons { flex: 0 0 auto; }

    .page-layout {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        padding: 16px 12px;
    }

    .filters {
        display: block;
        width: 260px;
        flex-shrink: 0;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        position: sticky;
        top: 76px;
    }

    .listings-section {
        flex: 1;
        padding: 0;
    }
}

/* =====================================================================
   ДЕСКТОП (от 1024px) — 4 карточки в ряд, шире контейнер.
   ===================================================================== */
@media (min-width: 1024px) {
    .listings-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* =====================================================================
   АДМИН-ПАНЕЛЬ — отдельный, простой набор стилей. Админка не двуязычная
   и не оптимизируется под телефон так тщательно, как публичный сайт —
   ей пользуется команда площадки за компьютером, а не посетители.
   ===================================================================== */
.admin-topbar {
    background: #111827;
    color: #fff;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
}
.admin-topbar a { color: #fff; }
.admin-topbar .logo { font-weight: 800; }

.admin-nav {
    background: #1f2937;
    padding: 0 12px;
    display: flex;
    align-items: stretch;
    gap: 2px;
    /* Было overflow-x:auto (горизонтальная прокрутка на узких окнах) —
       заменено на перенос строк: выпадающему меню "Модерация" ниже нужно
       вылезать ЗА пределы этой панели, а overflow:auto (по любой оси)
       обрезал бы его так же, как и горизонтальный. */
    flex-wrap: wrap;
}
.admin-nav a {
    display: flex;
    align-items: center;
    color: #d1d5db;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.admin-nav a.active, .admin-nav a:hover { color: #fff; background: #374151; }

/* Пункт меню "Модерация" — при наведении (или фокусе с клавиатуры)
   раскрывается в список из нескольких связанных страниц вместо того,
   чтобы каждая занимала свою отдельную вкладку в общем ряду. */
.admin-nav__dropdown {
    position: relative;
}
.admin-nav__dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    background: none;
    border: none;
    color: #d1d5db;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
}
.admin-nav__dropdown-trigger.active,
.admin-nav__dropdown:hover .admin-nav__dropdown-trigger,
.admin-nav__dropdown-trigger:focus {
    color: #fff;
    background: #374151;
}
.admin-nav__dropdown-arrow { width: 14px; height: 14px; flex-shrink: 0; }

.admin-nav__dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #1f2937;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    z-index: 40;
    flex-direction: column;
    padding: 4px;
}
.admin-nav__dropdown:hover .admin-nav__dropdown-menu,
.admin-nav__dropdown:focus-within .admin-nav__dropdown-menu {
    display: flex;
}
.admin-nav__dropdown-menu a {
    padding: 10px 12px;
    border-radius: 6px;
    white-space: normal;
}

.admin-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 16px 60px;
}
.admin-content h1 { font-size: 20px; }
.admin-content h2 { font-size: 16px; margin-top: 24px; }

.admin-table-wrap {
    overflow-x: auto;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap;
}
.admin-table th, .admin-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.admin-table th {
    background: #f9fafb;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table td.wrap { white-space: normal; }

.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-actions form { display: inline; }

.admin-empty {
    padding: 30px 16px;
    text-align: center;
    color: var(--color-text-muted);
}

/* Трекер изменений в очереди модерации — что поменялось при повторной
   подаче отредактированного объявления/проекта портфолио (см.
   admin/moderation.php, admin/portfolio.php). */
.mod-diff {
    margin-top: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 8px 10px;
}
.mod-diff__summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mod-diff__table {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    font-size: 13px;
}
.mod-diff__table th {
    text-align: left;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 4px 8px 4px 0;
    white-space: nowrap;
    vertical-align: top;
}
.mod-diff__table td {
    padding: 4px 6px;
    vertical-align: top;
}
.mod-diff__old { color: #991b1b; text-decoration: line-through; }
.mod-diff__new { color: #166534; font-weight: 600; }
.mod-diff__arrow { color: var(--color-text-muted); padding: 0 !important; }

.mod-diff__photos { display: flex; flex-wrap: wrap; gap: 8px; }
.mod-diff__photo {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.mod-diff__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mod-diff__photo--added { outline: 2px solid #16a34a; }
.mod-diff__photo--removed { outline: 2px solid #dc2626; }
.mod-diff__photo--removed img { opacity: 0.55; }
.mod-diff__photo-tag {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    padding: 2px 0;
    color: #fff;
}
.mod-diff__photo-tag--added { background: rgba(22, 163, 74, 0.85); }
.mod-diff__photo-tag--removed { background: rgba(220, 38, 38, 0.85); }

/* ---------- Чат (переписка по объявлению) ---------- */
/* Видимая рамка вокруг всей переписки (шапка собеседника + карточка
   объявления + сообщения + поле ввода) — раньше всё это лежало прямо на
   сером фоне страницы без единой границы, самого чата было не видно. */
.chat-panel {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.06);
    padding: 16px;
}

.chat-conversation-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 12px;
}

/* Полоска-подсказка над полем ввода: "вот с этим поводом уйдёт следующее
   сообщение" — показывается, только если только что пришли сюда через
   "Написать" с объявления/заявки (см. $pendingRef в conversation.php).
   Историю уже отправленных сообщений со своим поводом у каждого — см.
   .chat-message__ref ниже, это другое (там повод внутри самого пузыря). */
.chat-listing-ref {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    margin-bottom: 8px;
}
.chat-listing-ref:hover { background: var(--color-border); }
.chat-listing-ref__photo {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* Карточка-повод ВНУТРИ конкретного сообщения (см. $message['ref_listing_title']/
   ref_request_title в conversation.php) — компактнее .chat-listing-ref
   выше, потому что живёт внутри пузыря сообщения, а не отдельной строкой
   над всей перепиской. Обе — ссылки (можно перейти к объявлению/заявке). */
.chat-message__ref {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text);
    margin-bottom: 8px;
}
.chat-message__ref:hover { background: var(--color-bg); }
.chat-message__ref-photo {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.chat-message__ref-title {
    font-size: 13px;
    font-weight: 600;
}

/* Прокручивается САМА лента сообщений (см. js/main.js — прокрутка вниз к
   последнему сообщению при открытии), а не вся страница целиком — как в
   обычном мессенджере: шапка собеседника и поле ввода всегда на виду. */
.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 4px 16px;
    max-height: 55vh;
    overflow-y: auto;
}

.chat-message {
    max-width: 78%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
}
.chat-message p { margin: 0; white-space: pre-wrap; }
/* На широком экране 78% от колонки контента — это всё равно очень
   широкий "пузырь" сообщения, совсем не похоже на обычный чат. Сверху
   ограничиваем ещё и абсолютной шириной в пикселях. */
@media (min-width: 768px) {
    .chat-message { max-width: 480px; }
}

.chat-message--theirs {
    /* Белый — подходит там, где пузыри лежат прямо на сером фоне страницы
       (например dashboard-support.php). Внутри белой карточки .chat-panel
       (conversation.php) это переопределяется ниже — там у обеих сторон
       общения один и тот же цвет (тот, что раньше был только у "своих"
       сообщений), не выделяем "своё" другим оттенком. */
    background: var(--color-surface);
    align-self: flex-start;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    border-bottom-left-radius: 4px;
}
.chat-message--mine {
    background: #B7C9D5;
    color: var(--color-text);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}
/* Внутри .chat-panel (сообщения на conversation.php) — свои и чужие
   сообщения одного цвета, различаются только выравниванием (слева/справа). */
.chat-panel .chat-message--theirs,
.chat-panel .chat-message--mine {
    background: #B7C9D5;
    color: var(--color-text);
}

.chat-message__meta {
    font-size: 11px;
    opacity: .7;
    margin-top: 4px;
}

.chat-input-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    background: var(--color-bg);
    padding-top: 8px;
}
.chat-input-row textarea {
    flex: 1;
    min-height: 44px;
    max-height: 140px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-family: inherit;
    font-size: 15px;
    resize: vertical;
}

/* Обёртка textarea + скрепка — скрепка лежит ВНУТРИ поля ввода, справа,
   без квадратной рамки кнопки (как в обычных мессенджерах), а не
   отдельной кнопкой рядом с полем. */
.chat-input-textwrap {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.chat-input-textwrap textarea {
    padding-right: 56px; /* место под скрепку, чтобы текст не заезжал под неё */
}
.chat-attach-btn {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    color: var(--color-text-muted);
    background: none;
    border: none;
}
.chat-attach-btn:hover { color: var(--color-primary); }
.chat-attach-btn .icon { width: 30px; height: 30px; stroke-width: 1.4; }

/* Имя выбранного файла — показывается зелёным над полем ввода, только
   пока файл реально выбран (см. js/main.js), в остальное время пусто и
   места не занимает. */
.chat-attach-name {
    display: none;
    color: #166534;
    font-weight: 600;
    font-size: 13px;
    padding: 0 2px 4px;
}
.chat-attach-name.is-visible { display: block; }

/* --- Страница FAQ (faq.php) ---
   .faq-toc — на телефоне НЕ переносится на несколько строк (flex-wrap:
   wrap там ломал 5 длинных названий разделов в неровные 3 строки прямо
   над самым первым экраном — выглядело как "прыжок" при заходе на
   страницу), вместо переноса — одна строка с горизонтальной прокруткой.
   На десктопе, наоборот, места достаточно и обычный перенос на 1-2
   строки выглядит нормально (так было изначально) — прокрутка там
   только мешает: активная вкладка при клике могла обрезаться по краю
   контейнера, не докручиваясь до видимой области. */
.faq-toc {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 12px 0 28px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.faq-toc::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
    .faq-toc {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}
.faq-toc a {
    flex-shrink: 0;
    white-space: nowrap;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}
.faq-toc a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.faq-toc a.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* По умолчанию (до того как отработает JS в faq.php) виден только первый
   раздел — вопросы должны показываться строго по выбранной теме, а не
   все сразу. Если JS выключен, ссылки на #faq-section-N всё равно "как
   есть" ведут к разделу браузерным скроллом, поэтому :target на всякий
   случай тоже показываем — так работает даже совсем без JS. */
.faq-section { display: none; margin-bottom: 32px; }
.faq-section:first-of-type,
.faq-section:target {
    display: block;
}
.faq-section h2 {
    font-size: 19px;
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--color-border);
}

.faq-item {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.faq-item__q {
    font-weight: 700;
    margin: 0 0 6px;
}
.faq-item__a { color: var(--color-text-muted); }
.faq-item__a p { margin: 0 0 8px; }
.faq-item__a p:last-child { margin-bottom: 0; }
.faq-list { margin: 0 0 8px; padding-left: 20px; }
.faq-list li { margin-bottom: 2px; }

/* --- Юридические страницы (privacy-policy.php, terms-of-service.php) --- */
.legal-page h2 {
    font-size: 17px;
    margin-top: 28px;
    margin-bottom: 8px;
}
.legal-page p { margin: 0 0 10px; line-height: 1.5; }
.legal-meta {
    color: var(--color-text-muted);
    font-size: 13px;
    margin-bottom: 8px;
}