/* css/redesign-notifications.css
   Фаза 5.3 редизайна — модалка уведомлений (#notificationsModal) не входила
   ни в одну из фаз 0–4. Использует переиспользуемый .rd-modal (см.
   css/redesign-settings.css, Фаза 4.10) + .rd-btn-* для кнопок "Очистить
   прочитанные"/"Закрыть" (js/core/notifications/notifications-core.js
   переведён с инлайн-хексов на классы). Плюс мобильный bottom-sheet для
   этой модалки и для #cartPage — по референсу (README: "Cart and
   notification 'sheets' slide up from the bottom") на мобильной ширине они
   должны выезжать снизу, а не центрироваться как обычная модалка/страница. */

.notification-card {
  background: var(--rd-panel);
  border: 1px solid var(--rd-border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.notification-card-unread {
  border-left: 3px solid var(--rd-gold);
}
.notification-date {
  font-size: 0.78em;
  color: var(--rd-text-muted);
  margin-bottom: 3px;
}
.notification-subject {
  font-weight: 700;
  color: var(--rd-gold);
  margin-bottom: 3px;
}
.notification-message {
  color: var(--rd-text);
  font-size: 0.9em;
}
.notification-empty {
  text-align: center;
  color: var(--rd-text-muted);
}

/* ===== Bottom-sheet на мобильной ширине ===== */
@media (max-width: 600px) {
  #notificationsModal.rd-modal.modal.active {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: none;
    width: 100%;
    max-width: none;
    max-height: 80vh;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    animation: rd-sheet-in 0.25s ease-out;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }

  #cartPage.page.active {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-height: 85vh;
    overflow-y: auto;
    margin: 0;
    background: var(--rd-panel-header);
    border: 1px solid var(--rd-border);
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
    z-index: 60;
    animation: rd-sheet-in 0.25s ease-out;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  /* Затемнение фона позади шита — без изменений в JS-навигации
     (js/shared/navigation.js по-прежнему просто переключает .page.active),
     :has() достаточно, чтобы показать дим только пока активна именно
     страница корзины. */
  body:has(#cartPage.page.active)::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 55;
    pointer-events: none;
  }
}