/* =====================================================================
   TGRank — «Скидочные каналы» v3 (02.11.2026): список-строки в стиле таблицы каталога.
   Одна строка = один канал: название целиком · метрики · цены форматов · скидка с таймером · кнопка.
   Подключается после discounts.css. Разметка прежняя (discounts.php), таймер — data-end + discounts-pro.js
   ===================================================================== */
@media (min-width: 993px) {
    html body:not(#tpx) .discounts-grid { grid-template-columns: 1fr !important; gap: 0 !important; border-radius: 16px; overflow: hidden;
        border: 1px solid #e6ebf2; background: #fff; box-shadow: 0 16px 34px -28px rgba(15,23,42,.45); }

    html body:not(#tpx) .discounts-grid .d-card {
        display: grid !important; align-items: center; column-gap: 16px; row-gap: 0;
        grid-template-columns: 44px minmax(200px, 1.5fr) minmax(190px, 1fr) minmax(200px, 1fr) 104px 150px;
        grid-template-areas: "a . m p b c" "a h m p b c" "a q m p b c" "a . m p b c"; grid-template-rows: auto auto auto auto;
        padding: 12px 16px !important; border: 0 !important; border-bottom: 1px solid #eef2f6 !important; border-radius: 0 !important;
        background: #fff !important; box-shadow: none !important; transform: none !important; position: relative; overflow: visible !important;
        transition: background .2s !important;
    }
    html body:not(#tpx) .discounts-grid .d-card:last-child { border-bottom: 0 !important; }
    html body:not(#tpx) .discounts-grid .d-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(#f43f5e, #f97316); opacity: 0; transition: opacity .2s; }
    html body:not(#tpx) .discounts-grid .d-card:hover { background: #fbfcfe !important; transform: none !important; box-shadow: none !important; }
    html body:not(#tpx) .discounts-grid .d-card:hover::before { opacity: 1; }

    /* обёртка левой части «растворяется» — её дети встают в общую сетку строки */
    html body:not(#tpx) .discounts-grid .d-card > div:not(.d-badge):not(.d-prices) { display: contents !important; }

    /* ---- канал ---- */
    html body:not(#tpx) .discounts-grid .d-head { display: contents !important; }   /* аватарка — по центру строки на обе строки, текст справа */
    html body:not(#tpx) .discounts-grid .d-avatar { grid-area: a; align-self: center; cursor: pointer; }
    html body:not(#tpx) .discounts-grid .d-name { grid-area: h; align-self: center; min-width: 0; min-height: 0 !important; cursor: pointer; margin: 0 0 0 -4px !important; padding: 0 !important; line-height: 1.25; }
    html body:not(#tpx) .discounts-grid .d-avatar { width: 44px !important; height: 44px !important; border: 2px solid #34d27a !important; }
    html body:not(#tpx) .discounts-grid .d-title { font-size: 14px !important; font-weight: 800 !important; color: #0f172a !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html body:not(#tpx) .discounts-grid .d-username { font-size: 12px !important; color: #64748b !important; }
    html body:not(#tpx) .discounts-grid .d-category { display: none !important; }
    html body:not(#tpx) .discounts-grid .d-quote {
        grid-area: q; align-self: center; min-height: 0 !important; height: auto !important; line-height: 1.35 !important; margin: 3px 0 0 -4px !important; padding: 0 !important; border: 0 !important; background: none !important;
        font-size: 12px !important; font-style: italic; color: #64748b !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
    }

    /* ---- метрики: 2×2 ---- */
    html body:not(#tpx) .discounts-grid .d-metrics { grid-area: m; margin: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px !important; }
    html body:not(#tpx) .discounts-grid .d-metric.m-rating, html body:not(#tpx) .discounts-grid .d-metric.m-iv { display: none !important; }
    html body:not(#tpx) .discounts-grid .d-metric { justify-content: flex-start; font-size: 12px !important; padding: 3px 7px !important; min-width: 0; }

    /* ---- цены ---- */
    html body:not(#tpx) .discounts-grid .d-prices { grid-area: p; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; display: flex; flex-direction: column; gap: 2px; }
    html body:not(#tpx) .discounts-grid .d-price-row { display: flex !important; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 !important; padding: 0 !important; }
    html body:not(#tpx) .discounts-grid .d-price-row .lbl { font-size: 11px !important; color: #94a3b8 !important; font-weight: 600; white-space: nowrap; }
    html body:not(#tpx) .discounts-grid .d-price-row > div { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
    html body:not(#tpx) .discounts-grid .d-price-old { font-size: 10.5px !important; }
    html body:not(#tpx) .discounts-grid .d-price-new { font-size: 13px !important; color: #0f172a !important; font-weight: 800 !important; }
    html body:not(#tpx) .discounts-grid .d-price-max .d-price-new { color: #059669 !important; }

    /* ---- скидка + таймер ---- */
    html body:not(#tpx) .discounts-grid .d-badge {
        grid-area: b; position: relative !important; top: auto !important; right: auto !important; justify-self: center;
        display: flex !important; flex-direction: column; align-items: center; gap: 3px !important; padding: 6px 10px !important; border-radius: 12px !important;
        font-size: 15px !important; font-weight: 900 !important; line-height: 1; min-width: 78px;
        background: linear-gradient(135deg, #f43f5e, #f97316) !important; box-shadow: 0 8px 16px -10px rgba(244,63,94,.9) !important; overflow: hidden;
    }
    html body:not(#tpx) .discounts-grid .d-badge svg { display: none; }
    html body:not(#tpx) .discounts-grid .d-badge::after {
        content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; transform: skewX(-18deg);
        background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); animation: dpShine 5s ease-in-out infinite;
    }
    @keyframes dpShine { 0%, 70% { left: -80%; } 100% { left: 160%; } }
    html body:not(#tpx) .discounts-grid .d-timer { display: flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 700; white-space: nowrap; opacity: .95; }
    html body:not(#tpx) .discounts-grid .d-timer::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: dpBlink 1.2s ease-in-out infinite; }
    @keyframes dpBlink { 50% { opacity: .25; } }

    /* ---- кнопка ---- */
    html body:not(#tpx) .discounts-grid .d-cta {
        grid-area: c; margin: 0 !important; padding: 9px 10px !important; border-radius: 10px !important; font-size: 12.5px !important; font-weight: 800 !important; text-align: center;
        background: linear-gradient(135deg, #10b981, #06b6d4) !important; color: #fff !important; box-shadow: 0 6px 14px -8px rgba(6,182,212,.8) !important;
        transition: transform .2s, filter .2s !important;
    }
    html body:not(#tpx) .discounts-grid .d-cta:hover { transform: translateY(-1px); filter: saturate(1.15) brightness(1.05); }

    /* ---- тёмная тема ---- */
    html[data-theme="dark"] body:not(#tpx) .discounts-grid { background: #111d33; border-color: rgba(125,165,220,.16); }
    html[data-theme="dark"] body:not(#tpx) .discounts-grid .d-card { background: #111d33 !important; border-bottom-color: rgba(125,165,220,.12) !important; }
    html[data-theme="dark"] body:not(#tpx) .discounts-grid .d-card:hover { background: #14223b !important; }
    html[data-theme="dark"] body:not(#tpx) .discounts-grid :is(.d-title, .d-price-new) { color: #e6edf7 !important; }
    html[data-theme="dark"] body:not(#tpx) .discounts-grid .d-price-max .d-price-new { color: #34d399 !important; }
    html[data-theme="dark"] body:not(#tpx) .discounts-grid .d-quote { color: #8ea3bf !important; }
}

/* телефон: компактная карточка — канал и скидка в шапке, метрики одной строкой, цены тремя «ячейками» */
@media (max-width: 992px) {
    html body:not(#tpx) .discounts-grid { gap: 8px !important; }
    html body:not(#tpx) .discounts-grid .d-card { padding: 12px !important; border-radius: 16px !important; gap: 0; }
    html body:not(#tpx) .discounts-grid .d-head { align-items: center !important; margin-bottom: 8px !important; padding-right: 92px !important; }
    html body:not(#tpx) .discounts-grid .d-avatar { width: 42px !important; height: 42px !important; border: 2px solid #34d27a !important; }
    html body:not(#tpx) .discounts-grid .d-title { font-size: 14px !important; font-weight: 800 !important; }
    html body:not(#tpx) .discounts-grid .d-username { font-size: 12px !important; color: #64748b !important; }
    html body:not(#tpx) .discounts-grid .d-category, html body:not(#tpx) .discounts-grid .d-metric.m-rating, html body:not(#tpx) .discounts-grid .d-metric.m-iv { display: none !important; }
    html body:not(#tpx) .discounts-grid .d-metrics { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px !important; margin: 0 0 8px !important; }
    html body:not(#tpx) .discounts-grid .d-metric { justify-content: center; font-size: 11.5px !important; padding: 4px 3px !important; min-width: 0; }
    html body:not(#tpx) .discounts-grid .d-quote { margin: 0 0 9px !important; padding: 0 0 0 9px !important; background: none !important; border-left: 2px solid #fb7185 !important;
        font-size: 12px !important; color: #64748b !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html body:not(#tpx) .discounts-grid .d-prices { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 0 0 9px !important; padding: 0 !important; border: 0 !important; }
    html body:not(#tpx) .discounts-grid .d-price-row { display: flex !important; flex-direction: column; align-items: center; gap: 1px; margin: 0 !important; padding: 6px 4px !important;
        border-radius: 10px; background: #f6f8fb; border: 1px solid #edf1f6; }
    html body:not(#tpx) .discounts-grid .d-price-row .lbl { font-size: 10px !important; color: #94a3b8 !important; font-weight: 700; }
    html body:not(#tpx) .discounts-grid .d-price-row > div { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
    html body:not(#tpx) .discounts-grid .d-price-old { font-size: 10px !important; }
    html body:not(#tpx) .discounts-grid .d-price-new { font-size: 13px !important; font-weight: 800 !important; color: #0f172a !important; }
    html body:not(#tpx) .discounts-grid .d-price-max { background: rgba(16,185,129,.07) !important; border-color: rgba(16,185,129,.22) !important; }
    html body:not(#tpx) .discounts-grid .d-price-max .d-price-new { color: #059669 !important; }
    html body:not(#tpx) .discounts-grid .d-badge { top: 12px !important; right: 12px !important; flex-direction: column; align-items: center; gap: 2px !important; padding: 5px 9px !important;
        border-radius: 11px !important; font-size: 14px !important; font-weight: 900 !important; line-height: 1; background: linear-gradient(135deg, #f43f5e, #f97316) !important; }
    html body:not(#tpx) .discounts-grid .d-badge svg { display: none; }
    html body:not(#tpx) .discounts-grid .d-timer { display: flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; white-space: nowrap; }
    html body:not(#tpx) .discounts-grid .d-timer::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: dpBlink 1.2s ease-in-out infinite; }
    html body:not(#tpx) .discounts-grid .d-cta { padding: 10px !important; border-radius: 11px !important; font-size: 13px !important; font-weight: 800 !important;
        background: linear-gradient(135deg, #10b981, #06b6d4) !important; color: #fff !important; }
    html[data-theme="dark"] body:not(#tpx) .discounts-grid .d-price-row { background: rgba(255,255,255,.04); border-color: rgba(125,165,220,.14); }
    html[data-theme="dark"] body:not(#tpx) .discounts-grid .d-price-new { color: #e6edf7 !important; }
    html[data-theme="dark"] body:not(#tpx) .discounts-grid .d-price-max .d-price-new { color: #34d399 !important; }
}
@keyframes dpBlink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
    html body:not(#tpx) .discounts-grid .d-badge::after, html body:not(#tpx) .discounts-grid .d-timer::before { animation: none; }
}