/* ============================================================
   mak-lib.share — стили модалки «Поделиться»
   Baseline: iOS 12+ / ES2018. Без полифилов.

   Что внутри:
   - CSS-переменные --mak-share-* (переопределяются в :root)
   - .mak-share-modal — расширение .mak-modal из core.css
   - .mak-share-grid — сетка сервисов (7 провайдеров)
   - .mak-share-item — кнопка сервиса
   - Цвета брендов через data-service
   - .mak-share-empty — заглушка когда нет сервисов
   - Responsive: 768px, 480px
   - prefers-reduced-motion

   Зависимости: core.css (.mak-modal, .mak-toast)

   Примечание: z-index dialog'а уже исправлен в core.css
   (.mak-modal-dialog { z-index: calc(var(--mak-z-overlay) + 1) })

   Версия: 1.0.0
   Лицензия: GNU GPL v2 or later
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1. CSS-переменные
   ──────────────────────────────────────────────────────────── */
:root {
    /* Item */
    --mak-share-item-bg:       #f1f5f9;
    --mak-share-item-bg-hover: #e2e8f0;
    --mak-share-item-color:    #334155;
    --mak-share-item-radius:   12px;
    --mak-share-item-padding:  14px 8px;
    --mak-share-grid-gap:      10px;
    --mak-share-grid-min:      88px;

    /* Icon */
    --mak-share-icon-size:     26px;

    /* Цвета брендов */
    --mak-share-telegram:      #229ed9;
    --mak-share-whatsapp:      #25d366;
    --mak-share-vk:            #0077ff;
    --mak-share-ok:            #ee8208;
    --mak-share-viber:         #7360f2;
    --mak-share-email:         #64748b;
    --mak-share-copy:          #0f172a;
}

/* ────────────────────────────────────────────────────────────
   2. Модалка — расширение .mak-modal из core.css
   ──────────────────────────────────────────────────────────── */
.mak-share-modal .mak-modal-dialog {
    max-width: 440px;
}

/* ────────────────────────────────────────────────────────────
   3. Grid сервисов
   ──────────────────────────────────────────────────────────── */
.mak-share-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--mak-share-grid-min), 1fr));
    gap: var(--mak-share-grid-gap);
    margin-top: 4px;
}

/* ────────────────────────────────────────────────────────────
   4. Кнопка сервиса
   ──────────────────────────────────────────────────────────── */
.mak-share-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--mak-share-item-padding);
    border-radius: var(--mak-share-item-radius);
    background: var(--mak-share-item-bg);
    color: var(--mak-share-item-color);
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    transition: background 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    min-height: 84px;
}

.mak-share-item:hover {
    background: var(--mak-share-item-bg-hover);
    transform: translateY(-2px);
}

.mak-share-item:active {
    transform: translateY(0);
}

.mak-share-item:focus-visible {
    outline: 2px solid var(--mak-color-primary, #4f46e5);
    outline-offset: 2px;
}

/* ────────────────────────────────────────────────────────────
   5. Иконка внутри кнопки
   ──────────────────────────────────────────────────────────── */
.mak-share-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--mak-share-icon-size);
    height: var(--mak-share-icon-size);
    flex-shrink: 0;
}

.mak-share-item-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    color: var(--mak-share-item-color);
}

.mak-share-item-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ────────────────────────────────────────────────────────────
   6. Цвета брендов сервисов
   ──────────────────────────────────────────────────────────── */
.mak-share-item[data-service="telegram"] .mak-share-item-icon svg {
    color: var(--mak-share-telegram);
}
.mak-share-item[data-service="whatsapp"] .mak-share-item-icon svg {
    color: var(--mak-share-whatsapp);
}
.mak-share-item[data-service="vk"] .mak-share-item-icon svg {
    color: var(--mak-share-vk);
}
.mak-share-item[data-service="ok"] .mak-share-item-icon svg {
    color: var(--mak-share-ok);
}
.mak-share-item[data-service="viber"] .mak-share-item-icon svg {
    color: var(--mak-share-viber);
}
.mak-share-item[data-service="email"] .mak-share-item-icon svg {
    color: var(--mak-share-email);
}
.mak-share-item[data-service="copy"] .mak-share-item-icon svg {
    color: var(--mak-share-copy);
}

/* ────────────────────────────────────────────────────────────
   7. Заглушка когда нет доступных сервисов
   ──────────────────────────────────────────────────────────── */
.mak-share-empty {
    padding: 24px 12px;
    text-align: center;
    color: var(--mak-color-muted, #64748b);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ────────────────────────────────────────────────────────────
   8. Responsive
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .mak-share-modal .mak-modal-dialog {
        max-width: 100%;
    }
    .mak-share-grid {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 8px;
    }
    .mak-share-item {
        padding: 12px 6px;
        min-height: 76px;
        font-size: 0.7rem;
    }
    .mak-share-item-icon {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 480px) {
    .mak-share-grid {
        grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
        gap: 6px;
    }
    .mak-share-item {
        padding: 10px 4px;
        min-height: 70px;
        font-size: 0.65rem;
    }
    .mak-share-item-icon {
        width: 22px;
        height: 22px;
    }
}

/* ────────────────────────────────────────────────────────────
   9. prefers-reduced-motion
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mak-share-item,
    .mak-share-item:hover,
    .mak-share-item:active {
        transition: none !important;
        transform: none !important;
    }
}