/* notifications.css — in-app player notifications (zabkabet.casino)
 *
 * Адаптивно ко всем разрешениям: ≤480 (мини-мобильные), ≤768 (мобильные),
 * ≤1024 (планшеты), >1024 (десктопы). На мобильных дропдаун занимает весь
 * экран; на больших — выпадающий по правому краю кнопки колокольчика.
 *
 * Используется фирменная палитра zabkabet: #161817 (фон), #222524 (карточки),
 * #1A8B22 (акцент), #e7e7e7 (текст), #6F7573 (приглушённый).
 */

:root {
    --ntf-bg-page:    #161817;
    --ntf-bg-card:    #222524;
    --ntf-bg-card-2:  #2c302f;
    --ntf-border:     rgba(255,255,255,.06);
    --ntf-border-2:   rgba(255,255,255,.10);
    --ntf-text:       #e7e7e7;
    --ntf-text-muted: #8a8f8d;
    --ntf-text-soft:  #c2c8c6;
    --ntf-accent:     #1A8B22;
    --ntf-accent-2:   #2db335;
    --ntf-accent-soft:rgba(26,139,34,.16);
    --ntf-danger:     #e53935;
    --ntf-radius-s:   10px;
    --ntf-radius-m:   16px;
    --ntf-radius-l:   20px;
    --ntf-shadow:     0 24px 64px rgba(0,0,0,.55);
    --ntf-shadow-sm:  0 6px 18px rgba(0,0,0,.35);
}

/* ── Bell button ─────────────────────────────────────────────────── */
.notifications-bell-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    margin: 0 8px;
    line-height: 40px;
}

.notifications-bell {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ntf-text) !important;
    border-radius: 50% !important;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .18s ease;
    -webkit-tap-highlight-color: transparent;
    font-size: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}
.notifications-bell:hover,
.notifications-bell:focus-visible {
    background: rgba(255,255,255,.06);
    color: var(--ntf-accent-2);
    outline: none;
}
.notifications-bell:active { transform: scale(.94); }
.notifications-bell__icon { display: block; pointer-events: none; }

.notifications-bell-wrap.has-unread .notifications-bell__icon {
    animation: ntf-bell-shake 2s ease 1;
    animation-delay: .1s;
    transform-origin: 50% 0;
}
@keyframes ntf-bell-shake {
    0%, 50%, 100% { transform: rotate(0); }
    8%  { transform: rotate(12deg); }
    16% { transform: rotate(-10deg); }
    24% { transform: rotate(8deg); }
    32% { transform: rotate(-6deg); }
    40% { transform: rotate(0); }
}

.notifications-bell__count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    background: var(--ntf-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    box-shadow: 0 2px 6px rgba(229,57,53,.45);
    pointer-events: none;
    letter-spacing: -.02em;
}

/* ── Dropdown container (desktop default) ────────────────────────── */
.notifications-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 320;
    width: min(520px, 92vw);
    max-height: min(640px, calc(100vh - 90px));
    background: var(--ntf-bg-card);
    border: 1px solid var(--ntf-border-2);
    border-radius: var(--ntf-radius-l);
    box-shadow: var(--ntf-shadow);
    overflow: hidden;
    color: var(--ntf-text);
    /* small entry animation */
    opacity: 0;
    transform: translateY(-6px) scale(.98);
    transform-origin: 100% 0;
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
}
.notifications-dropdown.is-open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.notifications-dropdown[hidden] { display: none; }

/* ── Panel internal layout ───────────────────────────────────────── */
.ntf-panel {
    display: flex;
    flex-direction: column;
    max-height: inherit;
    height: 100%;
    box-sizing: border-box;
    /* Дропдаун — потомок .notifications-bell-wrap (line-height: 40px для
       центрирования иконки колокольчика). Без сброса этот 40px наследуется
       заголовками панели (.ntf-panel__title-main/-sub не задают свой), и при
       переносе подзаголовка на 2 строки появляется огромный пустой промежуток.
       Изолируем содержимое панели нормальным line-height. */
    line-height: 1.4;
}

.ntf-panel__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px 8px;
    border-bottom: 1px solid var(--ntf-border);
    flex: 0 0 auto;
}
.ntf-panel__title { flex: 1; min-width: 0; }
.ntf-panel__title-main {
    font-size: 18px;
    font-weight: 700;
    color: var(--ntf-text);
    letter-spacing: -.01em;
}
.ntf-panel__title-sub {
    font-size: 12px;
    color: var(--ntf-text-muted);
    margin-top: 3px;
}
.ntf-panel__head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Шапка уведомлений: заголовок + иконочные кнопки (⚙ настройки, ✕ закрыть)
   в одной строке справа. Текстовые действия вынесены в .ntf-panel__toolbar
   (отдельная строка под шапкой) — там у кнопок ширина по тексту. ─────────── */
/* Компактный список — заголовок однострочный, центрируем иконки по его строке.
   В настройках и full-page (есть подзаголовок) заголовок двухстрочный — там
   оставляем выравнивание по верху (base .ntf-panel__head → align-items:flex-start). */
.ntf-panel--compact:not(.ntf-panel--settings) .ntf-panel__head { align-items: center; }
.ntf-panel__head-actions { flex: 0 0 auto; }
/* Разделитель под шапкой переносим под тулбар (если он есть), чтобы заголовок,
   иконки и кнопки действий читались как единый блок. В настройках тулбара нет —
   там нижняя граница остаётся на самой шапке (base). */
.ntf-panel__head:has(+ .ntf-panel__toolbar) { border-bottom: none; }

/* Тулбар текстовых действий: отдельная строка под шапкой. Кнопки авто-ширины
   (по тексту), слева, с переносом при нехватке места. Раскладка стабильна —
   не «прыгает» при появлении/исчезновении кнопки «отметить прочитанным». */
.ntf-panel__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 18px 12px;
    border-bottom: 1px solid var(--ntf-border);
    flex: 0 0 auto;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.ntf-btn {
    appearance: none;
    /* border теперь не 0, а прозрачная рамка 1px: варианты задают border-color,
       а размер кнопки при этом не «прыгает» (box-sizing: border-box). */
    border: 1px solid transparent;
    background: transparent;
    color: var(--ntf-text-soft);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    /* inline-flex + min-height: у всех кнопок шапки одинаковая высота (иконки 32px,
       текстовые тоже) и общая вертикальная ось — иначе ряд смотрелся криво. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    box-sizing: border-box;
    padding: 6px 12px;
    border-radius: 999px;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
    -webkit-tap-highlight-color: transparent;
}
.ntf-btn:hover { background: rgba(255,255,255,.08); color: var(--ntf-text); }
/* «Отметить все прочитанными» — лёгкая зелёная заливка + рамка, чтобы читалась
   как кнопка, а не как обычный текст. */
.ntf-btn--ghost {
    color: var(--ntf-accent-2);
    background: var(--ntf-accent-soft);
    border-color: rgba(26,139,34,.32);
}
.ntf-btn--ghost:hover {
    background: rgba(26,139,34,.24);
    color: var(--ntf-accent-2);
    border-color: rgba(26,139,34,.5);
}
.ntf-btn--icon {
    width: 32px;
    height: 32px;
    padding: 0;
    color: var(--ntf-text-muted);
    /* иконочные кнопки (⚙ настройки, ✕ закрыть) тоже оформляем как кнопки —
       нейтральная заливка + рамка. */
    background: rgba(255,255,255,.05);
    border-color: var(--ntf-border-2);
}
.ntf-btn--icon:hover { color: var(--ntf-text); background: rgba(255,255,255,.10); }
.ntf-btn--icon svg { display: block; flex: 0 0 auto; }

/* Toggle settings/back — текстовая кнопка с иконкой, используется в full-page,
   чтобы пользователь не путал её с пустым местом (а одинокая 16px-иконка
   терялась в большом контейнере кабинета). */
.ntf-btn--toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ntf-border);
    color: var(--ntf-text-soft);
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
}
.ntf-btn--toggle:hover {
    background: rgba(255,255,255,.08);
    color: var(--ntf-text);
}
.ntf-btn--toggle svg { flex-shrink: 0; }
.ntf-btn__label { display: inline-block; }

/* ── Tabs ────────────────────────────────────────────────────────── */
.ntf-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 12px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
    flex: 0 0 auto;
    /* fade-right indicator чтобы было видно что есть скрытые табы */
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.ntf-tabs::-webkit-scrollbar { height: 4px; }
.ntf-tabs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }
.ntf-tabs::-webkit-scrollbar-track { background: transparent; }
.ntf-tab {
    appearance: none;
    border: 0;
    background: rgba(255,255,255,.04);
    color: var(--ntf-text-soft);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.ntf-tab:hover { background: rgba(255,255,255,.08); color: var(--ntf-text); }
.ntf-tab.is-active {
    background: var(--ntf-accent);
    color: #fff;
    box-shadow: 0 6px 18px rgba(26,139,34,.35);
}
.ntf-tab.is-active .ntf-tab__badge {
    background: rgba(255,255,255,.22);
    color: #fff;
}
.ntf-tab__badge {
    background: rgba(255,255,255,.08);
    color: var(--ntf-text-muted);
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    text-align: center;
    box-sizing: border-box;
}

/* ── List ────────────────────────────────────────────────────────── */
.ntf-list {
    padding: 8px 10px 12px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* скролл списка не «протекает» на фон страницы при достижении краёв */
    overscroll-behavior: contain;
    flex: 1 1 auto;
    /* min-height: 0 обязателен для flex-потомка-скроллера: без него implicit
       min-height:auto не даёт списку сжаться ниже высоты контента, и в
       полноэкранной панели (height:100dvh) внутренний overflow-y не включается —
       на Android весь список «выпадал» за пределы, а низ был недостижим. */
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.16) transparent;
}
.ntf-list::-webkit-scrollbar { width: 8px; }
.ntf-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 8px; }

/* ── Cards ───────────────────────────────────────────────────────── */
.ntf-card {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: flex-start;
    background: var(--ntf-bg-page);
    border: 1px solid var(--ntf-border);
    border-radius: var(--ntf-radius-m);
    padding: 12px 14px;
    margin: 6px 4px;
    transition: border-color .18s ease, transform .18s ease;
    cursor: pointer;
}
.ntf-card:hover { border-color: var(--ntf-border-2); }
.ntf-card.is-unread {
    border-color: rgba(26,139,34,.35);
    background: linear-gradient(90deg, rgba(26,139,34,.10), var(--ntf-bg-page) 24%);
}
.ntf-card.is-unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    background: var(--ntf-accent);
    border-radius: 0 3px 3px 0;
}

.ntf-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ntf-accent-2);
    background: var(--ntf-accent-soft);
    flex: 0 0 40px;
    text-transform: uppercase;
}
/* Type-based default palettes (fallback if no accent_color from backend) */
.ntf-card__icon[data-type="payment"]    { background: rgba(26,139,34,.16);  color: #2db335; }
.ntf-card__icon[data-type="bonus"]      { background: rgba(26,139,34,.16);  color: #1A8B22; }
.ntf-card__icon[data-type="cashback"]   { background: rgba(252,196,93,.16); color: #ffcd5b; }
.ntf-card__icon[data-type="promotion"]  { background: rgba(255,124,154,.16);color: #ff7c9a; }
.ntf-card__icon[data-type="tournament"] { background: rgba(255,158,84,.16); color: #ff9e54; }
.ntf-card__icon[data-type="security"]   { background: rgba(255,255,255,.10);color: #cfd6d4; }
.ntf-card__icon[data-type="system"]     { background: rgba(86,148,255,.16); color: #6fa3ff; }
/* points (обмен поинтов / PT) — фиолетовый, чтобы не сливаться с зелёными
   payment/bonus. */
.ntf-card__icon[data-type="points"]     { background: rgba(168,130,255,.16);color: #b58cff; }

.ntf-card__body { min-width: 0; }
.ntf-card__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    justify-content: space-between;
}
.ntf-card__title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ntf-text);
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}
.ntf-card__time {
    font-size: 11.5px;
    color: var(--ntf-text-muted);
    white-space: nowrap;
    flex: 0 0 auto;
}
.ntf-card__text {
    font-size: 13px;
    color: var(--ntf-text-soft);
    margin-top: 4px;
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.ntf-card__footer {
    margin-top: 8px;
}
.ntf-card__action {
    display: inline-flex;
    align-items: center;
    color: var(--ntf-accent-2);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .18s ease, color .18s ease;
}
.ntf-card__action:hover {
    color: var(--ntf-accent-2);
    border-bottom-color: var(--ntf-accent-2);
}
.ntf-card__delete {
    align-self: start;
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.7);
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
    opacity: 1;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.ntf-card__delete-x {
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    margin-top: -2px;   /* визуально центрируем × в круге */
    pointer-events: none;
}
.ntf-card__delete:hover {
    background: rgba(229,57,53,.18);
    border-color: rgba(229,57,53,.4);
    color: #ff6b6b;
    transform: scale(1.05);
}

/* "Clear all" — кнопка с тревожным (красным) акцентом: заливка + рамка,
   чтобы читалась как отдельная кнопка, а не как обычный текст. */
.ntf-btn--danger {
    color: #ff6b6b;
    background: rgba(229,57,53,.12);
    border-color: rgba(229,57,53,.30);
}
.ntf-btn--danger:hover {
    background: rgba(229,57,53,.20);
    color: #ff8080;
    border-color: rgba(229,57,53,.5);
}
.ntf-btn--clear {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.ntf-btn--clear[disabled],
.ntf-btn--clear[aria-disabled="true"] {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.ntf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 20px 28px;
    color: var(--ntf-text-muted);
}
.ntf-empty__icon {
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ntf-text-muted);
    opacity: .7;
}
.ntf-empty__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ntf-text);
}
.ntf-empty__text {
    font-size: 13px;
    color: var(--ntf-text-muted);
    margin-top: 6px;
    max-width: 280px;
}

/* ── Mobile (≤768) — full-screen overlay ─────────────────────────── */
@media (max-width: 768px) {
    .notifications-dropdown {
        position: fixed;
        inset: 0;
        right: 0;
        top: 0;
        width: 100vw;
        max-width: 100vw;
        /* 100dvh (dynamic viewport height) учитывает показ/скрытие адресной строки и
           нижней панели мобильного браузера. С обычным 100vh низ фиксированного оверлея
           (и последние карточки списка) уходил под хром браузера и был недостижим
           скроллом. vh оставлен фолбэком для старых браузеров без поддержки dvh. */
        max-height: 100vh;
        max-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        border: 0;
        z-index: 9999;
        transform-origin: 50% 0;
        transform: translateY(8px);
    }
    .notifications-dropdown.is-open {
        transform: none;
    }
    /* overflow:hidden + min-height:0 делают панель жёсткой границей прокрутки:
       шапка/табы фиксированы, скроллится только .ntf-list внутри. Без клиппинга
       на Android контент перерастал панель и низ списка был недостижим. */
    .ntf-panel { height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; overflow: hidden; min-height: 0; }
    .ntf-panel__head {
        padding: 14px 16px 8px;
        position: sticky;
        top: 0;
        background: var(--ntf-bg-card);
        z-index: 2;
    }
    .ntf-tabs {
        padding: 8px 12px;
        position: sticky;
        top: 64px;
        background: var(--ntf-bg-card);
        z-index: 1;
    }
    /* Раскладка компактной шапки вынесена в общий блок (см. выше,
       .ntf-panel--compact .ntf-panel__head) — работает на всех ширинах. */
    /* Тулбар выравниваем по гориз. паддингу мобильной шапки (16px). */
    .ntf-panel__toolbar { padding: 2px 16px 12px; }
    .ntf-list { padding-bottom: 32px; }
    .ntf-card__delete { opacity: 1; }
    body.notifications-open-mobile { overflow: hidden; }
}

/* ── Mini-mobile (≤480) ──────────────────────────────────────────── */
@media (max-width: 480px) {
    .ntf-panel__title-main { font-size: 16px; }
    .ntf-card { grid-template-columns: 38px 1fr auto; padding: 10px 12px; }
    .ntf-card__icon { width: 36px; height: 36px; flex-basis: 36px; font-size: 12px; border-radius: 10px; }
    .ntf-card__title { font-size: 13.5px; }
    .ntf-card__text  { font-size: 12.5px; }
    .ntf-tab { padding: 6px 10px; font-size: 12px; }
    /* На узких экранах прячем текстовый label у toggle-кнопки,
       оставляем только иконку — иначе шапка переполняется в столбец. */
    .ntf-btn--toggle {
        padding: 0;
        width: 32px;
        height: 32px;
        justify-content: center;
        background: transparent;
        border: 0;
    }
    .ntf-btn--toggle .ntf-btn__label { display: none; }
    /* На узких — даём шапке возможность переноса актов на новую строку, */
    /* чтобы заголовок не схлопывался в "..." */
    .ntf-panel__head { flex-wrap: wrap; }
    .ntf-panel__head-actions { flex-wrap: wrap; gap: 4px; }
    .ntf-btn--clear { padding: 6px 10px; font-size: 11.5px; }
}

/* ── Small desktop / tablets (769–1024) ──────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    .notifications-dropdown {
        width: min(440px, calc(100vw - 32px));
    }
}

/* ── Wide screens (≥1440) ────────────────────────────────────────── */
@media (min-width: 1440px) {
    .notifications-dropdown {
        width: min(560px, 40vw);
    }
}

/* ── Full-page (cabinet tab) variant ─────────────────────────────── */
.ntf-cabinet { color: var(--ntf-text); }
.ntf-cabinet__head { margin: 0 0 14px; }
.ntf-cabinet__head h3 {
    margin: 0;
    color: var(--ntf-text);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.01em;
}
.ntf-cabinet__sub {
    margin: 6px 0 0;
    color: var(--ntf-text-muted);
    font-size: 13px;
}
[data-notifications-fullpage] { display: block; }
[data-notifications-fullpage] .ntf-panel--full {
    background: var(--ntf-bg-card);
    border: 1px solid var(--ntf-border-2);
    border-radius: var(--ntf-radius-l);
    box-shadow: var(--ntf-shadow-sm);
    overflow: hidden;
    height: auto;
    max-height: none;
}
[data-notifications-fullpage] .ntf-list {
    max-height: none;
    padding-bottom: 16px;
}
[data-notifications-fullpage] .ntf-card { margin: 8px 8px; }

/* Full-page (кабинет) на мобильном: список получает СОБСТВЕННЫЙ скролл-контейнер.
   Раньше в full-page .ntf-list рос без ограничения (max-height:none), а прокрутка
   делегировалась слайду Fancybox. На iOS слайд скроллит нормально, а на Android он
   тянул страницу под собой (тач-скролл уходил на контент за модалкой) и низ списка
   был недостижим. Ограничиваем высоту и включаем внутренний momentum-скролл —
   поведение перестаёт зависеть от Fancybox-слайда и одинаково на iOS/Android. */
@media (max-width: 768px) {
    [data-notifications-fullpage] .ntf-panel--full { overflow: visible; }
    [data-notifications-fullpage] .ntf-list {
        /* 340px ≈ шапка кабинета (аватар/статус) + табы + заголовок раздела над
           списком; отнимаем их от высоты вьюпорта, чтобы список целиком вписывался
           в экран и скроллился внутри, а не уходил под нижний край. min-height —
           страховка на очень низких вьюпортах (ландшафт). */
        max-height: calc(100dvh - 340px);
        min-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        min-height: 0;
    }
}

/* Cabinet-nav notifications badge */
.cabinet-nav--notifications {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cabinet-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    background: var(--ntf-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    border-radius: 9px;
    box-sizing: border-box;
    box-shadow: 0 2px 6px rgba(229,57,53,.35);
}

/* ── Settings panel (preferences) ────────────────────────────────── */
.ntf-settings {
    padding: 8px 14px 16px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.16) transparent;
}
.ntf-settings::-webkit-scrollbar { width: 8px; }
.ntf-settings::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 8px; }

.ntf-pref {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    gap: 12px;
    align-items: center;
    padding: 12px 6px;
    border-bottom: 1px solid var(--ntf-border);
}
.ntf-pref:last-child { border-bottom: none; }
.ntf-pref--locked .ntf-pref__title { color: var(--ntf-text-soft); }
/* Раньше тут был ::after с content: ' · ' attr(data-lock-hint), но
   data-lock-hint нигде не задаётся → в конце описания висела одинокая «·»
   (middle dot, по центру строки, читается как сбитая точка). Сам текст
   описания уже сообщает «нельзя отключить», поэтому псевдоэлемент убран. */

.ntf-pref__icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    background: var(--ntf-accent-soft); color: var(--ntf-accent-2);
}
.ntf-pref__icon[data-type="payment"]    { background: rgba(26,139,34,.16);  color: #2db335; }
/* Зелёный (#1A8B22) — фирменный accent бонусов: уведомления типа bonus создаются
   с accent_color #1A8B22, и в карточке иконка зелёная. В настройках accent_color
   нет, поэтому раньше тут бралась палитра-fallback (жёлтый) — отсюда рассинхрон.
   Держим зелёный в обоих местах. */
.ntf-pref__icon[data-type="bonus"]      { background: rgba(26,139,34,.16);  color: #1A8B22; }
.ntf-pref__icon[data-type="cashback"]   { background: rgba(252,196,93,.16); color: #ffcd5b; }
.ntf-pref__icon[data-type="promotion"]  { background: rgba(255,124,154,.16);color: #ff7c9a; }
.ntf-pref__icon[data-type="tournament"] { background: rgba(255,158,84,.16); color: #ff9e54; }
.ntf-pref__icon[data-type="security"]   { background: rgba(255,255,255,.10);color: #cfd6d4; }
.ntf-pref__icon[data-type="system"]     { background: rgba(86,148,255,.16); color: #6fa3ff; }
.ntf-pref__icon[data-type="points"]     { background: rgba(168,130,255,.16);color: #b58cff; }

.ntf-pref__body { min-width: 0; }
.ntf-pref__title {
    font-size: 14px; font-weight: 700; color: var(--ntf-text);
}
.ntf-pref__desc {
    font-size: 12px; color: var(--ntf-text-muted);
    margin-top: 2px;
    line-height: 1.45;
    word-wrap: break-word;
}

/* iOS-style toggle */
.ntf-switch {
    position: relative;
    width: 44px; height: 24px;
    display: inline-block;
    cursor: pointer;
}
.ntf-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ntf-switch__slider {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.16);
    border-radius: 999px;
    transition: background .18s ease;
}
.ntf-switch__slider::before {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    top: 3px; left: 3px;
    transition: left .18s ease, background .18s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.ntf-switch input:checked + .ntf-switch__slider {
    background: var(--ntf-accent);
}
.ntf-switch input:checked + .ntf-switch__slider::before {
    left: 23px;
}
.ntf-switch--locked .ntf-switch__slider { opacity: .5; cursor: not-allowed; }
.ntf-switch--locked { cursor: not-allowed; }

/* В режиме настроек tabs не рендерятся, list-padding не нужен */
.ntf-panel--settings .ntf-tabs { display: none; }

/* Mobile-fit для preferences */
@media (max-width: 480px) {
    .ntf-pref { grid-template-columns: 38px 1fr 44px; padding: 10px 4px; }
    .ntf-pref__icon { width: 36px; height: 36px; border-radius: 10px; font-size: 12px; }
    .ntf-pref__title { font-size: 13.5px; }
    .ntf-pref__desc  { font-size: 11.5px; }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .notifications-bell-wrap.has-unread .notifications-bell__icon { animation: none; }
    .notifications-dropdown { transition: opacity .12s linear; transform: none !important; }
    .ntf-switch__slider, .ntf-switch__slider::before { transition: none; }
}