/* ═══════════════════════════════════════════════════════════════════════
   Карточки заказов в drawer'е уведомлений — для ВСЕХ страниц, КРОМЕ каталога.
   Каталог рендерит их собственным catalog.js/catalog.css. Здесь — те же стили,
   чтобы notif-shared.js отрисовал идентичный вид в drawer'е из header.ejs.
   Подключается через head.ejs только когда pageCss !== 'catalog'.
   ═══════════════════════════════════════════════════════════════════════ */
.notif-drawer .notif-list {
  overflow-y: auto; padding: 0 16px 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.notif-card {
  display: flex; flex-direction: column; gap: 12px;
}
.notif-card-top {
  display: flex; align-items: center; justify-content: space-between;
}
.notif-offer-id {
  font-family: var(--font2); font-size: 15px; font-weight: 700; color: var(--text);
}
.notif-offer-date {
  font-size: 12px; color: var(--text3); margin-top: 2px;
}
.notif-timer {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(234, 179, 8, 0.15);
  color: #EAB308;
  padding: 6px 10px; border-radius: 8px;
  font-family: var(--font2); font-size: 14px; font-weight: 700;
  letter-spacing: 0.5px;
}
.notif-timer.urgent {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}
.notif-timer.expired {
  background: rgba(107, 114, 128, 0.15);
  color: var(--text3);
}
.notif-timer svg { width: 14px; height: 14px; flex-shrink: 0; }
.notif-text {
  font-size: 13px; color: var(--text2); line-height: 1.5;
}
.notif-items {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.notif-item {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px;
  display: flex; flex-direction: column;
  position: relative; min-width: 0;
}
.notif-item-img {
  width: 100%; height: 56px; background: var(--bg4); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  border-left: 3px solid var(--rarity-color, #4B69FF);
  overflow: hidden; margin-bottom: 6px;
}
.notif-item-img img { width: 100%; height: 100%; object-fit: contain; }
.notif-item-name {
  font-size: 10px; color: var(--text); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px; line-height: 1.2;
}
.notif-item-price {
  font-family: var(--font2); font-size: 12px; font-weight: 700; color: var(--text);
}