/* ==========================================================================
   «Поделиться» — общие кнопки соцсетей и попап (common/helpers/ShareLinks).
   Подключают сами партиалы: publication/_share.php (строка под публикацией)
   и layouts/_share_modal.php (попап на карточке товара). Поведение — js/gs-share.js.
   ========================================================================== */

/* Круг фирменного цвета сети, иконка белая (fill=currentColor из ShareLinks). */
.gs-share-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; color: #fff !important; text-decoration: none !important; cursor: pointer; transition: transform .15s, opacity .15s, background .15s; }
.gs-share-btn:hover { opacity: .88; transform: translateY(-1px); }
.gs-share-btn:focus-visible { outline: 2px solid #359966; outline-offset: 2px; }
.gs-share-btn svg { width: 20px; height: 20px; display: block; flex-shrink: 0; }
.gs-share-btn--vk { background: #0077FF; }
.gs-share-btn--tg { background: #2AABEE; }
.gs-share-btn--wa { background: #25D366; }
/* Градиент — как у кнопок на max.ru (снят с их страницы :share). */
.gs-share-btn--max { background: radial-gradient(136% 141% at 100% 99%, #8D28C8 0%, #7C42FA 20%, #007AFF 80%, #609CEB 100%); }
.gs-share-btn--ok { background: #EE8208; }
/* «Скопировать ссылку» кругом (строка под публикацией): иконка ссылки ↔ галочка. */
.gs-share-btn--copy { background: #F3F4F6; color: #374151 !important; }
.gs-share-btn--copy:hover { background: #E5E7EB; opacity: 1; }
.gs-share-btn--copy .gs-share-ico-done { display: none; }
.gs-share-btn--copy.is-done { background: #EAF7F1; color: #1B7F56 !important; }
.gs-share-btn--copy.is-done .gs-share-ico-link { display: none; }
.gs-share-btn--copy.is-done .gs-share-ico-done { display: block; }

/* ─── Попап (layouts/_share_modal.php). Вид — как у соседней «Пожаловаться»
   (.rd-complain в redesign.css): затемнение, белая панель, зелёная шапка;
   на мобайле — шторка снизу. ──────────────────────────────────────────── */
.gs-share-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10050; display: flex; align-items: flex-start; justify-content: center; padding: 44px 24px; background: rgba(16, 24, 21, .55); overflow-y: auto; }
.gs-share-modal[hidden] { display: none; }
.gs-share-modal__panel { width: 480px; max-width: 100%; margin: auto 0; background: #fff; border-radius: 18px; box-shadow: 0 30px 70px -30px rgba(22, 19, 15, .55); overflow: hidden; outline: 0; }
.gs-share-modal__head { background: #ECF5F0; padding: 20px 22px; display: flex; align-items: flex-start; gap: 14px; }
.gs-share-modal__head-main { min-width: 0; flex: 1; }
.gs-share-modal__title { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: #16130F; }
.gs-share-modal__sub { display: block; font-size: 13.5px; color: #6B635A; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-share-modal__close { flex: none; width: 34px; height: 34px; border: 0; padding: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: transparent; color: #6B635A; cursor: pointer; transition: background .15s; }
.gs-share-modal__close:hover { background: #F4F1EC; }
.gs-share-modal__close:focus-visible { outline: 2px solid #359966; outline-offset: 2px; }
.gs-share-modal__body { padding: 20px 22px 22px; }

/* Сети — плитки «круг + подпись». 5 колонок на ПК; на узком экране «Одноклассники»
   в пятую часть ширины не влезают — там 3 колонки (3 + 2). */
.gs-share-modal__nets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px 6px; margin: 0; padding: 0; list-style: none; }
.gs-share-modal__net { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 2px; border-radius: 12px; color: #4A443D !important; text-decoration: none !important; font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: center; transition: background .15s; }
.gs-share-modal__net:hover { background: #F4F1EC; }
.gs-share-modal__net:hover .gs-share-btn { opacity: 1; transform: none; }
.gs-share-modal__net:focus-visible { outline: 2px solid #359966; outline-offset: 1px; }
.gs-share-modal__net .gs-share-btn { width: 48px; height: 48px; }
.gs-share-modal__net .gs-share-btn svg { width: 24px; height: 24px; }

/* Ссылка + «Копировать». */
.gs-share-modal__link { margin-top: 20px; }
.gs-share-modal__label { display: block; font-size: 13px; font-weight: 600; color: #4A443D; margin-bottom: 7px; }
.gs-share-modal__row { display: flex; gap: 8px; }
.gs-share-modal__input { flex: 1; min-width: 0; height: 44px; border: 1.5px solid #DCEAE0; background: #F4FAF7; border-radius: 11px; padding: 0 13px; font-size: 14px; font-family: inherit; color: #16130F; outline: 0; text-overflow: ellipsis; }
.gs-share-modal__input:focus { border-color: var(--accent, #359966); background: #fff; }
.gs-share-modal__copy { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 16px; border: 0; border-radius: 11px; background: var(--accent, #359966); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s; }
.gs-share-modal__copy:hover { background: var(--accent-d, #2c7f55); }
.gs-share-modal__copy:focus-visible { outline: 2px solid #16130F; outline-offset: 2px; }
.gs-share-modal__copy .gs-share-copy-done { display: none; }
.gs-share-modal__copy.is-done { background: #1F7A50; }
.gs-share-modal__copy.is-done .gs-share-copy-idle { display: none; }
.gs-share-modal__copy.is-done .gs-share-copy-done { display: inline; }

@media (max-width: 600px) {
    .gs-share-modal { padding: 0; align-items: flex-end; }
    .gs-share-modal__panel { margin: 0; max-height: 92vh; overflow-y: auto; border-radius: 18px 18px 0 0; }
    .gs-share-modal__head { position: sticky; top: 0; z-index: 2; border-radius: 18px 18px 0 0; }
    .gs-share-modal__body { padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
    /* 16px — iOS не зумит страницу при фокусе в поле. */
    .gs-share-modal__input { font-size: 16px; }
}
@media (max-width: 480px) {
    .gs-share-modal__nets { grid-template-columns: repeat(3, 1fr); }
}