/* share_v2.css — единый блок «Поделиться» (SHARE-1, 25.09.2026).

   Задача Владислава: «Единый шаблон „Поделиться“. Порядок: МАКС, ВК, Telegram,
   Instagram (только для фото), X (вместо твиттера).»
   Правка того же дня: «Но давай без надписей. Просто значки» — подписи сетей
   убраны ВЕЗДЕ, кнопка — это только значок. Подпись блока («Поделиться:»,
   «Поделиться фото:») осталась там, где была.

   Разметка одна на весь сайт — smarty/templates/__share_v2.tpl, список сетей и
   адреса шеринга — lib/sharelib.php (cb_share_services). Здесь только внешний
   вид, поэтому значки на всех страницах выглядят одинаково и правятся в одном
   файле.

   Значки — плитки 24x24 из assets/images/links/<код>.svg (тот же набор, что у
   «личных ресурсов», PAGE-LINKS-3): vk, telegram, instagram, x и перерисованный
   МАКС (max.svg — скруглённый квадрат с сине-фиолетовым градиентом и белым
   «пузырём» сообщения). Ни шрифтов, ни внешних загрузок — страницы в интернет
   за значками не ходят.

   Виды:
     .cb-shr            — обычный блок: подпись «Поделиться:» и ряд значков;
     .cb-shr-icononly   — тот же ряд значков (класс остался от прежнего вида с
                          названиями сетей; сейчас выглядит так же, как обычный,
                          потому что подписей нет нигде);
     .cb-shr-dark       — тёмный фон (просмотрщик фотографии).
   Набор кнопок от вида не зависит. */

/* --- блок ----------------------------------------------------------------- */

.cb-shr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 4px 0 10px;
}

.cb-shr-title {
  color: #8a949c;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cb-shr-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

/* --- кнопка: только значок ------------------------------------------------
   Ни рамки, ни фона, ни подписи: в ряду должны читаться сами значки. Размер
   кнопки равен размеру значка, поэтому ряд не разъезжается и на 375 px. */

.cb-shr-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  line-height: 0;
  text-decoration: none;
}

.cb-shr-item:hover { opacity: .82; }

/* --- значки --------------------------------------------------------------- */

.cb-shr-ico {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(20, 32, 40, .10);
}

.cb-shr-ico-max       { background-image: url(/assets/images/links/max.svg); }
.cb-shr-ico-vk        { background-image: url(/assets/images/links/vk.svg); }
.cb-shr-ico-telegram  { background-image: url(/assets/images/links/telegram.svg); }
.cb-shr-ico-instagram { background-image: url(/assets/images/links/instagram.svg); }
.cb-shr-ico-x         { background-image: url(/assets/images/links/x.svg); }
.cb-shr-ico-copy      { background-image: url(/assets/images/links/link.svg); }

/* --- кнопка «Скопировать ссылку» ------------------------------------------
   Это <button>, а не ссылка: новую вкладку она не открывает. Приводим её к
   общему виду .cb-shr-item (у браузера свои шрифт, рамка и фон). */

.cb-shr-item-copy {
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.cb-shr-item-copy:focus { outline: 2px solid #00aeef; outline-offset: 2px; }

/* --- всплывающая надпись о копировании ------------------------------------
   «Ссылка скопирована» внизу экрана, гаснет через пару секунд (alert не
   показываем). Элемент создаёт скрипт из __share_v2.tpl, поэтому на странице
   его нет, пока кнопку не нажали. */

.cb-shr-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 20000;
  max-width: calc(100% - 32px);
  padding: 11px 18px;
  border-radius: 6px;
  background: rgba(20, 32, 40, .94);
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.cb-shr-toast-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --- тёмный фон (просмотрщик фотографии) ----------------------------------
   Значки те же; на тёмном фоне тёмная плитка X сливалась бы с подложкой,
   поэтому у неё здесь светлый кант. */

.cb-shr-dark .cb-shr-title { color: #cfd8e3; }

.cb-shr-dark .cb-shr-ico { box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }

/* --- в боковой колонке альбома и в строке под фото ------------------------
   Раньше здесь стояли ссылки .album-side-share-link (float: left). Для нашего
   блока float не нужен: .cb-shr-list уже flex и переносится по строке. */

.album-side-share .cb-shr,
.pv-share .cb-shr { margin: 0; }

.pv-share .cb-shr { display: inline-flex; }

/* --- страница заведения: полоса «Поделиться» под «Ресурсами заведения» ----
   .place-links (place_links.css) даёт серый фон; рядом два одинаковых блока
   сливались бы в один, поэтому у полосы «Поделиться» фон белый. */

.place-share { background: #fff; }
.place-share .cb-shr { margin: 0; }

/* --- мобильная ширина -----------------------------------------------------
   Блок переносится (flex-wrap) и не вылезает за экран. Пять значков по 24 px
   с зазором 8 px — это 152 px, то есть на 375 px они помещаются в одну строку;
   на всякий случай уменьшаем зазор, а не значок: значки должны остаться
   читаемыми и удобными для пальца. */

@media (max-width: 480px) {
  .cb-shr { gap: 6px; }
  .cb-shr-list { gap: 6px; }
}