/* ═══════════════════════════════════════════════════════════════════
   GIFTS — модалка, gift wall, rarity-стили
   ═══════════════════════════════════════════════════════════════════ */

/* ── Кнопка «Подарок» на профиле ──────────────────────────────────── */
/* Стоит в одном ряду с Донатом (см. .prx-actions с flex-wrap).
   flex 1 1 calc(50% - 4px) — половина ширины, тот же базис что у Доната. */
.prx-btn--gift {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    background: linear-gradient(135deg, #ec4899, #f59e0b);
    color: #fff;
    border-color: transparent;
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.prx-btn--gift:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.35);
    color: #fff;
    filter: brightness(1.05);
}
/* Pulse-bait для привлечения внимания (только при первом mount, без усталости).
   Если хочешь убрать — закомментируй блок, ничего не сломается. */
@keyframes prxGiftPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.0); }
    50%      { box-shadow: 0 0 0 6px rgba(236, 72, 153, 0.18); }
}

/* ── Модалка дарения ──────────────────────────────────────────────── */
/* padding-top резервирует место под sticky-хедер: при body.modal-open
   .menu опускается до z-index: 99998 — выше всех gift-modal (9999/10000),
   поэтому без отступа верх __box заезжает под шапку. 72px = 56 min-height
   + 6*2 padding + buffer; env() — для iOS notch в landscape. */
.gift-modal,
.gift-wall-modal {
    padding-top: calc(72px + env(safe-area-inset-top, 0px));
    padding-bottom: 12px;
    box-sizing: border-box;
}
.gift-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.gift-modal[hidden] { display: none; }
.gift-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    cursor: pointer;
}
.gift-modal__box {
    position: relative;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    width: min(560px, calc(100vw - 32px));
    /* 96px = padding-top 72 + padding-bottom 12 + buffer 12 у враппёра. */
    max-height: calc(100vh - 96px - env(safe-area-inset-top, 0px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: giftModalIn 0.2s ease-out;
}
@keyframes giftModalIn {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.gift-modal__close {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px;
    border: 0; background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: #64748b;
    transition: background .15s;
    z-index: 1;
}
.gift-modal__close:hover { background: rgba(0, 0, 0, 0.1); }

.gift-modal__header { padding: 20px 24px 12px; border-bottom: 1px solid #f1f5f9; }
.gift-modal__title { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #0f172a; }
.gift-modal__recipient { color: var(--color-primary, #0a43ff); }
.gift-modal__subtitle { margin: 0; font-size: 13px; color: #64748b; }

/* Баланс в шапке. Пилюля повторяет .dropdown-points-pill (хедер): тёмный
   фон + молния #ffd700 + цифра. Видна сразу — юзер ориентируется до выбора
   подарка, а не после нажатия «Подарить». */
.gift-modal__balance-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 13px;
}
.gift-modal__balance-label { color: #64748b; }
.gift-modal__balance-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: #0f172a;
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}
.gift-modal__balance-pill i { font-size: 11px; color: #ffd700; }

/* Подарок выше баланса — приглушённый, но кликабельный (откроет confirm
   с topup-CTA вместо send'а). Полностью disable не делаем, чтобы юзер
   видел что есть в каталоге. */
.gift-card.gift-card--insufficient {
    opacity: 0.55;
    filter: grayscale(0.3);
    transition: opacity 0.15s, filter 0.15s;
}
.gift-card.gift-card--insufficient:hover {
    opacity: 0.85;
    filter: grayscale(0.1);
}
.gift-card.gift-card--insufficient .gift-card__price {
    color: #dc2626;
}

.gift-modal__body { padding: 16px 24px; overflow-y: auto; flex: 1 1 auto; }
.gift-modal__loading,
.gift-modal__empty {
    text-align: center; padding: 40px 16px;
    color: #94a3b8; font-size: 14px;
}

.gift-modal__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

/* ── Карточка подарка (используется и в модалке, и на gift wall) ── */
.gift-card {
    border: 0;
    background: #f8faff;
    border-radius: 12px;
    padding: 14px 8px;
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: transform .15s, box-shadow .15s, background .15s;
    position: relative;
    overflow: hidden;
}
.gift-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); }
.gift-card__img,
.gift-card__img-fallback {
    width: 72px; height: 72px;
    object-fit: contain;
    pointer-events: none;
}
.gift-card__img-fallback {
    background: rgba(15, 23, 42, 0.06);
    border-radius: 12px;
}
.gift-card__title {
    font-size: 13px; font-weight: 600; color: #0f172a;
    line-height: 1.2;
}
.gift-card__price {
    font-size: 13px; font-weight: 700;
    color: var(--color-primary, #0a43ff);
}
.gift-card__rarity {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    margin-top: -2px;
}

/* Rarity tints */
.gift-card--rare      { background: linear-gradient(135deg, #dbeafe, #f8faff); }
.gift-card--rare      .gift-card__rarity { color: #1d4ed8; }
.gift-card--epic      { background: linear-gradient(135deg, #fef3c7, #fdf4ff); }
.gift-card--epic      .gift-card__rarity { color: #b45309; }
.gift-card--legendary { background: linear-gradient(135deg, #fce7f3, #fef3c7); }
.gift-card--legendary .gift-card__rarity { color: #be185d; }
.gift-card--legendary::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
    background-size: 300% 100%;
    animation: gift-shimmer 3.5s linear infinite;
    pointer-events: none;
}
@keyframes gift-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── Confirm-step в модалке ──────────────────────────────────────── */
.gift-modal__confirm { padding: 16px 24px 20px; }
.gift-modal__confirm-preview {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    background: #f8faff;
    border-radius: 12px;
    margin-bottom: 12px;
}
.gift-modal__confirm-preview img {
    width: 56px; height: 56px; object-fit: contain;
}
.gift-modal__confirm-title { font-weight: 700; color: #0f172a; }
.gift-modal__confirm-price { font-size: 13px; color: var(--color-primary, #0a43ff); margin-top: 2px; }
.gift-modal__message {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    resize: vertical;
    min-height: 70px;
    margin-bottom: 8px;
    font-family: inherit;
}
.gift-modal__message:focus { outline: none; border-color: var(--color-primary, #0a43ff); }
.gift-modal__anon {
    font-size: 13px; color: #475569;
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 12px; cursor: pointer;
}
.gift-modal__actions {
    display: flex; gap: 8px; justify-content: flex-end;
}
.gift-modal__btn {
    border: 0;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: opacity .15s, transform .15s;
}
.gift-modal__btn--cancel {
    background: #f1f5f9; color: #475569;
}
.gift-modal__btn--cancel:hover { background: #e2e8f0; }
.gift-modal__btn--primary {
    background: var(--color-primary, #0a43ff); color: #fff;
}
.gift-modal__btn--primary:hover { transform: translateY(-1px); }
.gift-modal__btn:disabled { opacity: .55; cursor: progress; }
.gift-modal__error {
    color: #dc2626; font-size: 13px; margin-top: 8px;
}

/* Success-step и .gift-modal__btn--topup удалены 2026-05-10 — handoff
   в payment_modal заменил оба flow (success рендерит payment_modal). */

/* ── Mobile: gift-modal + gift-wall-modal ─────────────────────────
   600px — типовой брейкпоинт проекта. Сжимаем паддинги и грид,
   кнопки confirm-шага растягиваем в полный ряд (а не flex-end). */
@media (max-width: 600px) {
    /* На мобильном хедер тот же — 56 min-height + 12 padding ≈ 68px;
       padding wrapper'а уменьшаем чуть-чуть до 64+12. */
    .gift-modal,
    .gift-wall-modal {
        padding-top: calc(64px + env(safe-area-inset-top, 0px));
        padding-bottom: 8px;
    }
    .gift-modal__box,
    .gift-wall-modal__box {
        width: calc(100vw - 16px);
        /* dvh учитывает iOS Safari URL-bar — без него modal обрезается клавиатурой. */
        max-height: calc(100dvh - 80px - env(safe-area-inset-top, 0px));
        border-radius: 14px;
    }

    .gift-modal__close { top: 8px; right: 8px; }
    .gift-modal__header { padding: 18px 16px 10px; }
    .gift-modal__title { font-size: 16px; }
    .gift-modal__subtitle { font-size: 12px; }

    .gift-modal__body,
    .gift-wall-modal .gift-modal__body { padding: 12px 14px; }

    /* 100px — три карточки на 360px (16+14*2 padding + 12*2 gap). */
    .gift-modal__grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }
    .gift-card { padding: 10px 6px; gap: 4px; }
    .gift-card__img,
    .gift-card__img-fallback { width: 56px; height: 56px; }
    .gift-card__title { font-size: 12px; }
    .gift-card__price { font-size: 12px; }

    /* Грид полученных подарков (используется и на главной, и в gift-wall-modal). */
    .gift-wall__grid {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
        gap: 8px;
    }
    .gift-wall__grid .gift-card { padding: 10px 6px; }
    .gift-wall__grid .gift-card__img,
    .gift-wall__grid .gift-card__img-fallback { width: 52px; height: 52px; }
    .gift-wall__grid .gift-card__title,
    .gift-wall__grid .gift-card__msg,
    .gift-wall__grid .gift-card__meta { font-size: 11px; }

    /* Заголовок «Подарки N» в шапке wall-модалки на узких экранах. */
    .gift-wall-modal .gift-modal__title { font-size: 15px; }

    .gift-modal__confirm { padding: 12px 14px 16px; }
    .gift-modal__confirm-preview { padding: 10px; gap: 10px; margin-bottom: 10px; }
    .gift-modal__confirm-preview img { width: 48px; height: 48px; }
    .gift-modal__message { min-height: 60px; font-size: 13.5px; }

    /* Кнопки в ряд во всю ширину — prímary должен быть справа (порядок DOM:
       cancel, primary). На большом экране они flex-end справа налево;
       на мобильном растягиваем равномерно. */
    .gift-modal__actions {
        gap: 8px;
        justify-content: stretch;
    }
    .gift-modal__actions .gift-modal__btn {
        flex: 1 1 auto;
        padding: 12px 14px;
    }
}

/* ═══ GIFT WALL MINI (sidebar) ═══════════════════════════════════ */
/* Компактный блок прямо под кнопками действий: иконка + счётчик +
   4 миниатюры подарков. Клик → модалка с полным списком. */
.gift-wall-mini {
    margin-top: 14px;
}
.gift-wall-mini[hidden] { display: none; }

.gift-wall-mini__btn {
    width: 100%;
    border: 1px solid #e2e8f0;
    background: linear-gradient(135deg, #fce7f3, #fef3c7);
    border-radius: 14px;
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    box-sizing: border-box;
}
.gift-wall-mini__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(236, 72, 153, 0.18);
    border-color: #f9a8d4;
}
.gift-wall-mini__title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 6px;
}
.gift-wall-mini__title i { color: #ec4899; }
.gift-wall-mini__count {
    margin-left: auto;
    background: rgba(15, 23, 42, 0.08);
    color: #475569;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 999px;
}

.gift-wall-mini__previews {
    display: flex;
    gap: 6px;
}
.gift-wall-mini__preview {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    min-height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 36px;
    box-sizing: border-box;
}
.gift-wall-mini .gift-wall-mini__preview img {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
    display: block;
}
.gift-wall-mini__preview--more {
    background: rgba(15, 23, 42, 0.06);
    color: #475569;
    font-size: 11px;
    font-weight: 700;
}

/* Rarity-окантовка миниатюры (пастельная) */
.gift-wall-mini__preview--rare      { box-shadow: inset 0 0 0 2px rgba(29, 78, 216, 0.35); }
.gift-wall-mini__preview--epic      { box-shadow: inset 0 0 0 2px rgba(180, 83, 9, 0.4); }
.gift-wall-mini__preview--legendary { box-shadow: inset 0 0 0 2px rgba(190, 24, 93, 0.45); }

/* ═══ GIFT WALL MODAL (полный список) ════════════════════════════ */
.gift-wall-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.gift-wall-modal[hidden] { display: none; }
.gift-wall-modal__box {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 96px - env(safe-area-inset-top, 0px));
}
.gift-wall-modal .gift-modal__body { padding: 16px 24px; }

/* ═══ GIFT WALL (legacy блок на главной — оставлен для обратной совместимости) ═══ */
.gift-wall { margin-top: 32px; }
.gift-wall__header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.gift-wall__title {
    font-size: 16px; font-weight: 700; color: #0f172a;
    margin: 0;
    display: flex; align-items: center; gap: 8px;
}
.gift-wall__title i { color: #ec4899; }
.gift-wall__count { font-size: 13px; color: #94a3b8; font-weight: 500; }
.gift-wall__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}
.gift-wall__grid .gift-card {
    /* В стене показываем sender + дату — нужно меньше padding */
    padding: 12px 8px;
}
.gift-wall__grid .gift-card__msg {
    font-size: 11px; color: #64748b;
    font-style: italic;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.gift-wall__grid .gift-card__meta {
    display: flex; flex-direction: column; gap: 2px;
    align-items: center;
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}
.gift-wall__grid .gift-card__sender {
    color: #475569;
    text-decoration: none;
    font-weight: 500;
}
.gift-wall__grid .gift-card__sender:hover { color: var(--color-primary, #0a43ff); }
.gift-wall__grid .gift-card__sender--anon { font-style: italic; }
.gift-wall__more {
    text-align: center;
    margin-top: 12px;
}
.gift-wall__more button {
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 999px;
    padding: 8px 20px;
    cursor: pointer;
    font-size: 13px;
    color: #475569;
    transition: border-color .15s, color .15s;
}
.gift-wall__more button:hover {
    border-color: var(--color-primary, #0a43ff);
    color: var(--color-primary, #0a43ff);
}

/* ─────────────────────────────────────────────────────────────────
   Gift detail modal — открывается кликом по карточке в карусели
   home-блока «Подарки». Показывает один подарок крупно: hero-зону
   с превью + редкостью, отправителя, сообщение и дату.
   Базовые классы (.gift-modal / .gift-modal__backdrop / __close /
   __btn) переиспользуются — здесь только специфика layout'а.
   ───────────────────────────────────────────────────────────────── */

/* Detail-модалка может открываться поверх gift-wall (z-index 9999) — клик
   по карточке в общем списке. Поэтому повышаем над всеми другими gift-modal'ками. */
.gift-detail-modal { z-index: 10000; }

.gift-detail-modal__box {
    width: min(420px, calc(100vw - 32px));
}

.gift-detail-modal__hero {
    position: relative;
    padding: 36px 24px 24px;
    background: linear-gradient(180deg, #f8faff 0%, #fff 100%);
    display: flex; align-items: center; justify-content: center;
}
.gift-detail-modal__media {
    width: 160px; height: 160px;
    display: flex; align-items: center; justify-content: center;
    color: #cbd5e1; font-size: 80px;
    /* drop-shadow ложится по реальной форме APNG/WebP с прозрачностью. */
    filter: drop-shadow(0 12px 24px rgba(15, 23, 42, .12));
}
.gift-detail-modal__media img {
    width: 100%; height: 100%; object-fit: contain; display: block;
}

/* Rarity-плашка в углу hero-зоны. Цвет по rarity, иначе — neutral. */
.gift-detail-modal__rarity {
    position: absolute; top: 14px; left: 14px;
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em;
    padding: 4px 9px; border-radius: 999px;
    background: #f1f5f9; color: #64748b;
    z-index: 1;
}
.gift-detail-modal__rarity[data-rarity="rare"]      { background: #dbeafe; color: #1d4ed8; }
.gift-detail-modal__rarity[data-rarity="epic"]      { background: #fef3c7; color: #b45309; }
.gift-detail-modal__rarity[data-rarity="legendary"] {
    background: linear-gradient(135deg, #fce7f3, #fef3c7);
    color: #be185d;
}

/* Hero-фон тоже tinted под rarity — мягко, без шум-shimmer'а. */
.gift-detail-modal[data-rarity="rare"]      .gift-detail-modal__hero { background: linear-gradient(180deg, #eff6ff 0%, #fff 100%); }
.gift-detail-modal[data-rarity="epic"]      .gift-detail-modal__hero { background: linear-gradient(180deg, #fffbeb 0%, #fff 100%); }
.gift-detail-modal[data-rarity="legendary"] .gift-detail-modal__hero { background: linear-gradient(180deg, #fdf2f8 0%, #fff 100%); }

.gift-detail-modal__body {
    padding: 4px 24px 20px;
    display: flex; flex-direction: column; gap: 14px;
}
.gift-detail-modal__title {
    margin: 0;
    font-size: 20px; font-weight: 700; color: #0f172a;
    text-align: center;
    line-height: 1.25;
}

/* Отправитель: clickable-строка → ссылка на @profile (или div для Анонима). */
.gift-detail-modal__sender {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
a.gift-detail-modal__sender:hover { background: #f1f5f9; }
.gift-detail-modal__sender--anon { cursor: default; pointer-events: none; }
.gift-detail-modal__sender-ava {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #e0e7ff; color: #4338ca;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 16px;
    overflow: hidden;
}
.gift-detail-modal__sender-ava img { width: 100%; height: 100%; object-fit: cover; }
.gift-detail-modal__sender-info {
    display: flex; flex-direction: column; min-width: 0;
}
.gift-detail-modal__sender-label {
    font-size: 11px; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .06em;
}
.gift-detail-modal__sender-name {
    font-size: 14px; font-weight: 700; color: #0f172a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.gift-detail-modal__message {
    margin: 0;
    padding: 12px 14px;
    border-left: 3px solid var(--color-primary, #0a43ff);
    background: #f8faff;
    border-radius: 0 10px 10px 0;
    font-size: 13.5px;
    color: #334155;
    line-height: 1.5;
    word-break: break-word;
}

.gift-detail-modal__date {
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
}

.gift-detail-modal__foot {
    display: flex; gap: 10px;
    padding: 14px 20px 20px;
    border-top: 1px solid #f1f5f9;
}
.gift-detail-modal__foot .gift-modal__btn { flex: 1; }

@media (max-width: 480px) {
    .gift-detail-modal__hero  { padding: 28px 20px 20px; }
    .gift-detail-modal__media { width: 132px; height: 132px; font-size: 64px; }
    .gift-detail-modal__title { font-size: 18px; }
    .gift-detail-modal__body  { padding: 4px 20px 18px; gap: 12px; }
    .gift-detail-modal__foot  { padding: 12px 16px 16px; }
}