/* Лента «Рекомендуемые каналы» (платный слайдер) — functions/promo_strip.php · v2 02.11.2026
   Одна карточка на весь сайт (каталог, главная, кабинет). Светлая и тёмная тема. */
.pst { --pst-a: #10b981; --pst-b: #06b6d4; --pst-c: #8b5cf6;
    position: relative; margin: 0 0 14px; padding: 11px 0 2px; border-radius: 18px; overflow: hidden; isolation: isolate;
    font-family: 'Inter', system-ui, sans-serif;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e6ebf2; box-shadow: 0 14px 30px -26px rgba(15,23,42,.35); }
/* тонкая фирменная полоска сверху — вместо цветных «пятен», которые выглядели как вылезший фон */
.pst::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--pst-c), var(--pst-b), var(--pst-a)); opacity: .85; }
.pst * { box-sizing: border-box; }
.pst-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px 8px; }
.pst-h b { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
.pst-h b i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--pst-c), var(--pst-b)); }
.pst-h b i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(139,92,246,.35); animation: pstPing 2.4s ease-out infinite; }
@keyframes pstPing { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.pst-h a { font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; padding: 5px 10px; border-radius: 999px;
    color: #6d28d9; background: rgba(139,92,246,.08); border: 1px solid rgba(139,92,246,.18); transition: background .2s, transform .2s; }
.pst-h a:hover { background: rgba(139,92,246,.14); transform: translateX(2px); }
.pst-vp { overflow: hidden; padding: 4px 0 11px; -webkit-mask: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent); mask: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent); }
.pst-track { display: flex; gap: 10px; width: 100%; padding: 0 14px; }
/* пока лента стоит — карточки тянутся на всю ширину; когда едет — фиксированной ширины */
.pst-track:not(.run) > .pst-c { flex: 1 1 0; min-width: 290px; max-width: 430px; }
.pst-track.run { width: max-content; }
.pst-track.run { animation: pstMarq var(--dur, 40s) linear infinite; }
.pst:hover .pst-track.run, .pst-track.run:focus-within { animation-play-state: paused; }
@keyframes pstMarq { to { transform: translateX(-50%); } }

/* ---- карточка (компактная: 3 строки) ---- */
.pst-c { position: relative; isolation: isolate; overflow: hidden; flex: 0 0 292px; display: flex; flex-direction: column; gap: 6px; padding: 10px 11px 10px;
    border-radius: 14px; background: #fff; color: #334155; text-decoration: none !important;
    border: 1px solid #e6ebf2; box-shadow: 0 8px 20px -16px rgba(15,23,42,.45);
    transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, border-color .22s; }
.pst-c::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none; z-index: 2;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-18deg);
    animation: pstShine 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .9s); width: 28%; }
@keyframes pstShine { 0%, 72% { left: -60%; } 100% { left: 140%; } }
.pst-c:hover { transform: translateY(-3px); border-color: rgba(139,92,246,.45); box-shadow: 0 0 0 3px rgba(139,92,246,.10), 0 16px 28px -20px rgba(109,40,217,.55); }
.pst-c:hover::after { animation-play-state: paused; opacity: 0; }

.pst-ch { display: flex; align-items: center; gap: 9px; min-width: 0; padding-right: 46px; }
.pst-av { position: relative; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; padding: 1.5px; background: #e2e8f0; }
.pst-av.v { background: linear-gradient(135deg, #22c55e, #06b6d4); }
.pst-av img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #f1f5f9; border: 1.5px solid #fff; }
.pst-nm { min-width: 0; display: flex; flex-direction: column; }
.pst-nm b { font-size: 13.5px; font-weight: 800; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.pst-nm small { font-size: 11px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pst-nm small i { font-style: normal; color: #0f9f78; font-weight: 600; }
.pst-ds { font-size: 12px; line-height: 1.35; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pst-ds.e { color: #94a3b8; font-style: italic; }

.pst-f { display: flex; align-items: center; gap: 8px; padding-top: 7px; border-top: 1px dashed #e6ebf2; }
.pst-st { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; font-size: 11.5px; font-weight: 700; color: #334155; white-space: nowrap; overflow: hidden; }
.pst-st > span { display: inline-flex; align-items: center; gap: 3px; }
.pst-st > span svg { color: #94a3b8; }
.pst-st .er.g { color: #059669; } .pst-st .er.y { color: #d97706; } .pst-st .er.r { color: #e11d48; }
.pst-st .er svg { color: currentColor; opacity: .7; }
.pst-p { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; white-space: nowrap; }
.pst-p b { font-size: 14px; font-weight: 800; color: #0f172a; letter-spacing: -.01em; }
.pst-p s { font-size: 10.5px; font-weight: 600; color: #94a3b8; }
.pst-p em { font-size: 11px; font-style: normal; color: #94a3b8; }
.pst-w { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: #fff;
    background: linear-gradient(135deg, #10b981, #06b6d4); box-shadow: 0 6px 14px -6px rgba(6,182,212,.75), inset 0 1px 0 rgba(255,255,255,.3); transition: transform .2s, filter .2s; }
.pst-c:hover .pst-w { filter: saturate(1.15) brightness(1.05); transform: rotate(-8deg) scale(1.06); }
.pst-d { position: absolute; top: 10px; right: 10px; z-index: 3; font-size: 11px; font-weight: 800; color: #fff; padding: 3px 7px; border-radius: 8px;
    background: linear-gradient(135deg, #f43f5e, #f97316); box-shadow: 0 6px 14px -6px rgba(244,63,94,.8); animation: pstPulse 2.2s ease-in-out infinite; }
@keyframes pstPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* ---- свободное место (в одну строку) ---- */
.pst-free { flex-direction: row; align-items: center; gap: 10px; background: rgba(255,255,255,.6); border: 1.5px dashed rgba(139,92,246,.32); box-shadow: none; }
.pst-free::after { display: none; }
.pst-free-ic { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--pst-c), var(--pst-b)); box-shadow: 0 8px 18px -10px rgba(139,92,246,.8); transition: transform .25s; }
.pst-free-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pst-free-t b { font-size: 13px; font-weight: 800; color: #0f172a; white-space: nowrap; }
.pst-free-t small { font-size: 11.5px; color: #64748b; line-height: 1.3; }
.pst-free-b { flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: #6d28d9; padding: 6px 11px; border-radius: 999px; background: rgba(139,92,246,.1); border: 1px solid rgba(139,92,246,.22); }
.pst-free:hover { border-style: dashed; border-color: rgba(139,92,246,.6); box-shadow: none; }
.pst-free:hover .pst-free-ic { transform: rotate(90deg) scale(1.05); }

@media (max-width: 992px) { .pst { border-radius: 16px; } .pst-c { flex-basis: 272px; } .pst-h b { font-size: 13.5px; } .pst-h a { font-size: 11px; padding: 4px 9px; } }
@media (prefers-reduced-motion: reduce) { .pst-track.run { animation: none; } .pst-vp { overflow-x: auto; } .pst-c::after, .pst-d, .pst-h b i::after { animation: none; } }

/* ---- тёмная тема ---- */
html[data-theme="dark"] .pst { background: linear-gradient(180deg, #0f1a2e, #0c1526); border-color: rgba(125,165,220,.16); }
html[data-theme="dark"] .pst-h b { color: #e6edf7; }
html[data-theme="dark"] .pst-h a { color: #c4b5fd; background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.3); }
html[data-theme="dark"] .pst-c { background: #111d33; border-color: rgba(125,165,220,.16); color: #c6d4e6; }
html[data-theme="dark"] .pst-c::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.08), transparent); }
html[data-theme="dark"] .pst-nm b, html[data-theme="dark"] .pst-p b, html[data-theme="dark"] .pst-st b, html[data-theme="dark"] .pst-free b { color: #e6edf7; }
html[data-theme="dark"] .pst-ds { color: #9fb2cb; }
html[data-theme="dark"] .pst-st { color: #c6d4e6; } html[data-theme="dark"] .pst-free-t b { color: #e6edf7; }
html[data-theme="dark"] .pst-f { border-color: rgba(125,165,220,.16); }
html[data-theme="dark"] .pst-nm small i { color: #6ee7b7; }
html[data-theme="dark"] .pst-av img { border-color: #111d33; }
html[data-theme="dark"] .pst-free { background: rgba(255,255,255,.03); border-color: rgba(139,92,246,.4); }
html[data-theme="dark"] .pst-free-b { color: #c4b5fd; }

/* главная (index.php): по ширине блоков страницы */
.pst-ix { width: calc(100% - 18px); max-width: calc(var(--page-max, 1400px) - 18px); margin: 0 auto 10px; }
.pst-ix .pst { margin: 0; }
@media (max-width: 992px) { .pst-ix { width: auto; margin: 0 10px 10px; } }
/* главная кабинета (account.php): на месте старого слайдера */
.pst-acc { margin: 0 0 14px; }
.pst-acc .pst { margin: 0; }