/* ──────────────────────────────────────────────────────────────────────────
   Vice Neon (.vn) — етап 4a: знижки й історія знижок (/discounts, /discounts/history, /discounts/history/:key)
   за SalesB.dc.html і SalesHistoryB.dc.html. Шаблони, фільтри й дані ті самі (routes/discounts.rb) — лише вигляд,
   поверх косметики етапу 3b (vn-catalog.css). Прогноз (/discounts/forecast) має свої .df-* — тут не зачіпається.
   ────────────────────────────────────────────────────────────────────────── */

html.vn[data-section="discounts"] {
  --accent-fg: var(--vn-pink-soft);
  --accent-bg: rgba(255, 79, 163, .16);
  --text-muted: var(--vn-muted);
  --text-dim: var(--vn-muted);
  --med: var(--vn-yellow);
  --primary: var(--vn-pink);
  --primary-hover: var(--vn-pink-soft);
  --on-primary: var(--vn-ink);
  --accent: var(--vn-pink);
}

/* заголовки */
html.vn[data-section="discounts"] .catalog-head__title,
html.vn[data-section="discounts"] .page-header .page-title {
  margin: 0; font-family: var(--vn-font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(36px, 5.4vw, 72px); line-height: .98; letter-spacing: -.04em; padding-bottom: 4px;
  background: linear-gradient(90deg, var(--vn-text) 40%, var(--vn-pink), var(--vn-orange), var(--vn-cyan));
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: bHue 8s ease-in-out infinite;
}
html.vn[data-section="discounts"] .catalog-head__sub,
html.vn[data-section="discounts"] .page-header .page-sub { color: var(--vn-muted); font-size: 15px; }
html.vn[data-section="discounts"] .catalog-crumbs a { display: inline-block; padding: 3px 0; }
html.vn[data-section="discounts"] .catalog-stat { border-radius: 20px; }
html.vn[data-section="discounts"] .catalog-stat__num { font-family: var(--vn-font-display); font-weight: 800; color: var(--vn-pink-soft); }

/* посилання-«пігулки» в шапці й категорії */
html.vn[data-section="discounts"] .dc-tg-btn,
html.vn[data-section="discounts"] .cat-btn--sub,
html.vn[data-section="discounts"] .cat-pills .pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; box-sizing: border-box;
  border-radius: var(--vn-radius-pill); border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04);
  color: var(--vn-text); font-size: 13px; font-weight: 700; text-decoration: none;
}
html.vn[data-section="discounts"] .dc-tg-btn { border-color: rgba(46, 230, 214, .4); color: var(--vn-cyan); }
html.vn[data-section="discounts"] .cat-pills .pill--active {
  border-color: var(--vn-pink); background: rgba(255, 79, 163, .16); color: var(--vn-pink-soft); box-shadow: 0 0 0 2px rgba(255, 79, 163, .35);
}
html.vn[data-section="discounts"] .stat-pill { border-radius: var(--vn-radius-pill); font-family: var(--vn-font-mono); }

/* фільтри */
html.vn[data-section="discounts"] .dc-slider { height: 28px; accent-color: var(--vn-pink); }
html.vn[data-section="discounts"] .dc-quick-chip { min-height: 36px; border-radius: var(--vn-radius-pill); font-weight: 700; }
html.vn[data-section="discounts"] .dc-quick-chip--active { color: var(--vn-pink-soft); background: rgba(255, 79, 163, .16); border-color: var(--vn-pink); }
html.vn[data-section="discounts"] select { max-width: 100%; }
html.vn[data-section="discounts"] .map-filters .search-input,
html.vn[data-section="discounts"] .map-filters .filter-select { min-height: 40px; border-radius: var(--vn-radius-pill); }

/* картки */
html.vn[data-section="discounts"] .dc-card { border-radius: 22px; background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .08); transition: transform .25s var(--vn-ease), border-color .25s; }
@media (hover: hover) { html.vn[data-section="discounts"] .dc-card:hover { transform: translateY(-3px); border-color: rgba(255, 79, 163, .45); } }
html.vn[data-section="discounts"] .dc-icon { border-radius: 16px; }
html.vn[data-section="discounts"] .dc-name { font-weight: 800; }
html.vn[data-section="discounts"] .dc-badge {
  border-radius: var(--vn-radius-pill); background: var(--vn-grad-brand); color: var(--vn-ink); font: 800 13px var(--vn-font-display);
}
html.vn[data-section="discounts"] .dc-price-new { color: var(--vn-cyan); font-family: var(--vn-font-mono); }
html.vn[data-section="discounts"] .dc-price-old { color: var(--vn-muted); }
html.vn[data-section="discounts"] .dc-savings { color: var(--vn-orange); font-weight: 700; }
html.vn[data-section="discounts"] .item-cat-badge,
html.vn[data-section="discounts"] .dc-servers__label,
html.vn[data-section="discounts"] .dc-server-pill,
html.vn[data-section="discounts"] .dc-server-pill__name,
html.vn[data-section="discounts"] .dc-servers__more,
html.vn[data-section="discounts"] .dc-until,
html.vn[data-section="discounts"] .dc-action-btn,
html.vn[data-section="discounts"] .dc-group-toggle,
html.vn[data-section="discounts"] .dc-vc__item,
html.vn[data-section="discounts"] .dc-card [class*="dc-hist"] { font-size: 12px; }
html.vn[data-section="discounts"] .dc-server-pill { border-radius: var(--vn-radius-pill); background: rgba(255, 255, 255, .06); color: var(--vn-text); }
html.vn[data-section="discounts"] .item-cat-badge { border-radius: var(--vn-radius-pill); }
html.vn[data-section="discounts"] .dc-until--dated { color: var(--vn-orange); font-weight: 700; }
html.vn[data-section="discounts"] .dc-action-btn { min-height: 28px; border-radius: var(--vn-radius-pill); }
html.vn[data-section="discounts"] .dc-fav-btn { min-width: 32px; min-height: 32px; }

@media (max-width: 760px) {
  html.vn[data-section="discounts"] input, html.vn[data-section="discounts"] select { font-size: 16px; }
  html.vn[data-section="discounts"] .dc-tg-btn, html.vn[data-section="discounts"] .cat-btn--sub, html.vn[data-section="discounts"] .cat-pills .pill { min-height: 40px; }
}

/* ряд пошуку/сортування/вигляду не переносився й вилазив за екран на телефоні */
html.vn[data-section="discounts"] .discounts-page .catalog-filters__row { flex-wrap: wrap; min-width: 0; }
html.vn[data-section="discounts"] .discounts-page .catalog-filters__row .iselect { flex: 1 1 160px; }
html.vn[data-section="discounts"] .discounts-page .catalog-filters { min-width: 0; max-width: 100%; box-sizing: border-box; }
html.vn[data-section="discounts"] .discounts-page .catalog-filters > *,
html.vn[data-section="discounts"] .discounts-page .ffield { min-width: 0; max-width: 100%; }
html.vn[data-section="discounts"] .discounts-page .isegmented,
html.vn[data-section="discounts"] .discounts-page .seg { flex-wrap: wrap; max-width: 100%; }