/* Trending Coins Page
 * Aligned with .bs-dt card pattern (top-gainers) and .bs-lw- sidebar widgets (homepage)
 * Brand: #1DB0E1 (blue), #206389 (dark-blue), #111318 (dark text), #e4e7ed (border)
 * Voting: #047857 (bullish), #b91c1c (bearish) — matches .bs-change-up / .bs-change-down
 */

body.bs-trending-body .page-header { display: none; }

#bs-trending-page {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    color: #111318;
    line-height: 1.5;
}

#bs-trending-page { padding-bottom: 40px; }
#bs-trending-page a { color: #111318; text-decoration: none; }
#bs-trending-page a:hover { color: #3b82f6; }

.bs-trending-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ── Breadcrumb ─────────────────────────────────── */

.bs-trending-breadcrumb { font-size: 13px; margin: 16px 0 8px; color: #6b7280; }
.bs-trending-breadcrumb a { color: #6b7280; }
.bs-trending-breadcrumb a:hover { color: #3b82f6; }
.bs-trending-breadcrumb-sep { margin: 0 6px; }

/* ── H1 ─────────────────────────────────────────── */

.bs-trending-h1 {
    font-size: 20px;
    font-weight: 700;
    color: #111318;
    letter-spacing: -0.3px;
    margin: 0 0 16px;
}

/* ── Sentiment Banner (compact, inline) ──────────── */

.bs-trending-sentiment {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 20px;
    border: 1px solid #e4e7ed;
    border-radius: 12px;
    background: #fff;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.bs-trending-sentiment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.bs-trending-sentiment-title {
    font-size: 14px;
    font-weight: 600;
    color: #111318;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.bs-trending-sentiment-title svg { width: 16px; height: 16px; color: #1DB0E1; }

.bs-trending-sentiment-date { display: none; }

.bs-trending-sentiment-bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 200px;
}

.bs-trending-sentiment-bar {
    flex: 1;
    height: 8px;
    background: #fee2e2;
    border-radius: 4px;
    overflow: hidden;
}

.bs-trending-sentiment-bar-fill {
    height: 100%;
    background: #047857;
    border-radius: 4px;
    transition: width 0.6s ease;
}

.bs-trending-sentiment-pct {
    display: flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;
}

.bs-trending-sentiment-pct-val {
    font-size: 16px;
    font-weight: 700;
    color: #047857;
    font-family: 'Courier New', Courier, monospace;
}

.bs-trending-sentiment-pct-label {
    font-size: 12px;
    color: #047857;
    font-weight: 600;
}

.bs-trending-sentiment-stats {
    display: flex;
    gap: 20px;
}

.bs-trending-sentiment-stat {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.bs-trending-sentiment-stat-val {
    font-size: 14px;
    font-weight: 700;
    color: #111318;
    font-family: 'Courier New', Courier, monospace;
}

.bs-trending-sentiment-stat-label {
    font-size: 11px;
    color: #6b7280;
}

.bs-trending-sentiment-share {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

#bs-trending-page button.bs-trending-share-btn,
#bs-trending-page button.bs-trending-share-btn:visited,
#bs-trending-page button.bs-trending-share-btn:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    padding: 0;
    margin: 0;
    font-size: 0;
    line-height: 1;
    box-shadow: none;
    outline: none;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
}

#bs-trending-page button.bs-trending-share-btn svg { width: 14px; height: 14px; }

#bs-trending-page button.bs-trending-share-btn:hover,
#bs-trending-page button.bs-trending-share-btn:active {
    border-color: #d1d5db;
    background: #f3f4f6;
    color: #6b7280;
}

#bs-trending-page button.bs-trending-share-x:hover,
#bs-trending-page button.bs-trending-share-x:active { color: #000; }
#bs-trending-page button.bs-trending-share-tg:hover,
#bs-trending-page button.bs-trending-share-tg:active { color: #229ED9; }
#bs-trending-page button.bs-trending-share-wa:hover,
#bs-trending-page button.bs-trending-share-wa:active { color: #25D366; }
#bs-trending-page button.bs-trending-share-copy:hover,
#bs-trending-page button.bs-trending-share-copy:active { color: #1DB0E1; }

#bs-trending-page button.bs-trending-share-copy.bs-trending-share-btn--copied {
    background: #d1fae5;
    border-color: #047857;
    color: #047857;
}

/* ── Subtitle / Callout ─────────────────────────── */

.bs-trending-callout {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 16px;
}

html.bs-dark .bs-trending-callout { color: #a8a8be; }

/* ── Filter Tabs (match .bs-tm-tab from top-movers) ── */

.bs-trending-filters { margin-bottom: 0; }

.bs-trending-tab-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 12px;
    flex-wrap: wrap;
}

.bs-trending-time-tabs,
.bs-trending-direction-tabs {
    display: flex;
    gap: 6px;
}

.bs-trending-tab-sep {
    width: 1px;
    height: 24px;
    background: #e4e7ed;
    margin: 0 6px;
    flex-shrink: 0;
}

html.bs-dark .bs-trending-tab-sep { background: #2d2d48; }

#bs-trending-page button.bs-trending-tab,
#bs-trending-page button.bs-trending-tab:visited,
#bs-trending-page button.bs-trending-tab:focus {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 20px;
    border: 1.5px solid #e4e7ed;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.4;
    text-decoration: none;
    outline: none;
    box-shadow: none;
}

#bs-trending-page button.bs-trending-tab:hover {
    background: #f8f9fb;
    border-color: #c7cbd4;
    color: #111318;
}

#bs-trending-page button.bs-trending-tab.bs-trending-tab--active {
    background: #111318;
    border-color: #111318;
    color: #fff;
}

/* ── Category Filters (pill style) ────────────────── */

.bs-trending-cat-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding-bottom: 16px;
}

.bs-trending-type-filters { display: flex; gap: 4px; }

.bs-trending-chain-sep { width: 1px; height: 20px; background: #e4e7ed; margin: 0 6px; }

.bs-trending-chain-filters { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }

#bs-trending-page button.bs-trending-filter,
#bs-trending-page button.bs-trending-filter:visited,
#bs-trending-page button.bs-trending-filter:focus {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid #e4e7ed;
    background: #f9fafb;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    line-height: 1.4;
    outline: none;
    box-shadow: none;
}

#bs-trending-page button.bs-trending-filter:hover {
    color: #111318;
    border-color: #c7cbd4;
}

#bs-trending-page button.bs-trending-filter.bs-trending-filter--active {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
    font-weight: 600;
}

.bs-trending-chain-more { position: relative; }

.bs-trending-chain-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    background: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
    flex-direction: column;
    gap: 2px;
    min-width: 160px;
    max-height: 240px;
    overflow-y: auto;
}

.bs-trending-chain-dropdown.bs-trending-chain-dropdown--open { display: flex; }

.bs-trending-chain-more-btn svg { width: 12px; height: 12px; vertical-align: middle; margin-left: 2px; }

#bs-trending-page button.bs-trending-clear-btn,
#bs-trending-page button.bs-trending-clear-btn:visited,
#bs-trending-page button.bs-trending-clear-btn:focus {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border: 1.5px solid #e4e7ed;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    line-height: 1.4;
    outline: none;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
}
#bs-trending-page button.bs-trending-clear-btn svg { width: 12px; height: 12px; }
#bs-trending-page button.bs-trending-clear-btn:hover { background: #111318; color: #fff; border-color: #111318; }
#bs-trending-page button.bs-trending-clear-btn:hover svg { stroke: #fff; }

html.bs-dark #bs-trending-page button.bs-trending-clear-btn { background: #1c1c30; border-color: #2d2d48; color: #e4e4ed; }
html.bs-dark #bs-trending-page button.bs-trending-clear-btn:hover { background: #e4e4ed; color: #1c1c30; border-color: #e4e4ed; }

/* ── 3 Info Cards Row ───────────────────────────── */

.bs-trending-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.bs-trending-card {
    padding: 16px;
    min-width: 0;
}

.bs-trending-card .bs-lw-list { margin: 0; padding: 0; list-style: none; }

.bs-trending-cta-body p { margin: 8px 0 0; }

/* ── DataTable: reset any DT wrapper borders/lines ── */

#bs-trending-page .dt-layout-row,
#bs-trending-page .dt-layout-cell,
#bs-trending-page .dt-container {
    border: none;
    box-shadow: none;
    background: transparent;
}

#bs-trending-page .dt-layout-row:first-child {
    border-top: none;
}

#bs-trending-table thead th {
    border-top: none;
    border-bottom: none;
}

/* ── DataTable: uses global .bs-dt styles, only add trending-specific ── */

/* Sentiment mini bar */
.bs-trending-sentiment-mini { display: flex; align-items: center; gap: 6px; }
.bs-trending-mini-bar { width: 50px; height: 6px; background: #fee2e2; border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.bs-trending-mini-bar-fill { height: 100%; background: #047857; border-radius: 3px; }
.bs-trending-mini-pct { font-size: 12px; font-weight: 600; font-family: 'Courier New', Courier, monospace; white-space: nowrap; }

/* Vote count */
.bs-trending-votes {
    font-weight: 700;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    color: #111318;
}

.bs-trending-votes-split {
    font-weight: 600;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    white-space: nowrap;
}

/* Inline vote buttons (explicit overrides to beat Elementor) */
.bs-trending-vote-cell { display: flex; gap: 4px; justify-content: flex-end; }

#bs-trending-page button.bs-trending-vote-btn,
#bs-trending-page button.bs-trending-vote-btn:visited,
#bs-trending-page button.bs-trending-vote-btn:focus {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    line-height: 1.4;
    outline: none;
    box-shadow: none;
    text-decoration: none;
}

#bs-trending-page button.bs-trending-vote-btn svg { width: 12px; height: 12px; }

#bs-trending-page button.bs-trending-vote-btn--bullish {
    border: 1.5px solid #d1fae5;
    background: #fff;
    color: #047857;
}
#bs-trending-page button.bs-trending-vote-btn--bullish:hover {
    background: #d1fae5;
    border-color: #047857;
}

#bs-trending-page button.bs-trending-vote-btn--bearish {
    border: 1.5px solid #fee2e2;
    background: #fff;
    color: #b91c1c;
}
#bs-trending-page button.bs-trending-vote-btn--bearish:hover {
    background: #fee2e2;
    border-color: #b91c1c;
}

#bs-trending-page button.bs-trending-vote-btn--active-bullish {
    background: #047857;
    color: #fff;
    border-color: #047857;
}

#bs-trending-page button.bs-trending-vote-btn--active-bearish {
    background: #b91c1c;
    color: #fff;
    border-color: #b91c1c;
}

#bs-trending-page button.bs-trending-vote-btn--inactive {
    opacity: 0.4;
    border-color: #e4e7ed;
    color: #6b7280;
    background: #fff;
}

@keyframes bs-vote-bump { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
.bs-trending-votes--bump { animation: bs-vote-bump 0.3s ease; }

/* ── Vote CTA (inside info-card) ──────────────────── */

.bs-trending-cta-body { margin-top: 4px; }

.bs-trending-cta-votes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.bs-trending-cta-vote-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 6px;
    font-size: 12px; font-weight: 600;
    white-space: nowrap;
}
.bs-trending-cta-vote-pill img { flex-shrink: 0; }
.bs-trending-cta-vote-pill--bullish { background: #d1fae5; color: #047857; }
.bs-trending-cta-vote-pill--bearish { background: #fee2e2; color: #b91c1c; }

.bs-trending-cta-reset { font-size: 11px; color: #9ca3af; margin-top: 8px; }

/* Pagination/search handled by global bs-datatable.css */

/* ── Responsive ─────────────────────────────────── */

@media (max-width: 1024px) {
    .bs-trending-cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .bs-trending-cards { grid-template-columns: 1fr; }
    .bs-trending-h1 { font-size: 18px; }
    .bs-trending-sentiment { flex-direction: column; gap: 10px; padding: 12px 16px; }
    .bs-trending-sentiment-stats { gap: 12px; }
    .bs-trending-time-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    #bs-trending-table thead th:nth-child(3),
    #bs-trending-table tbody td:nth-child(3),
    #bs-trending-table thead th:nth-child(4),
    #bs-trending-table tbody td:nth-child(4),
    #bs-trending-table thead th:nth-child(5),
    #bs-trending-table tbody td:nth-child(5) { display: none; }
}

@media (max-width: 480px) {
    .bs-trending-vote-btn span.bs-trending-vote-label { display: none; }
    .bs-trending-coin-name { max-width: 100px; }
}

/* ── Dark Mode ──────────────────────────────────── */

html.bs-dark #bs-trending-page { color: #e4e4ed; }
html.bs-dark #bs-trending-page a { color: #e4e4ed; }
html.bs-dark #bs-trending-page a:hover { color: #5fa8e0; }

html.bs-dark .bs-trending-sentiment { background: #1c1c30; border-color: #2d2d48; }
html.bs-dark .bs-trending-h1 { color: #e4e4ed; }

/* Dark mode for .bs-dt handled globally by bs-datatable.css */

html.bs-dark #bs-trending-page button.bs-trending-tab { background: #1c1c30; border-color: #2d2d48; color: #e4e4ed; }
html.bs-dark #bs-trending-page button.bs-trending-tab:hover { background: #242440; border-color: #3d3d58; }
html.bs-dark #bs-trending-page button.bs-trending-tab.bs-trending-tab--active { background: #e4e4ed; border-color: #e4e4ed; color: #1c1c30; }

html.bs-dark #bs-trending-page button.bs-trending-filter { background: #1c1c30; border-color: #2d2d48; color: #a8a8be; }
html.bs-dark #bs-trending-page button.bs-trending-filter:hover { color: #e4e4ed; border-color: #3d3d58; }
html.bs-dark #bs-trending-page button.bs-trending-filter.bs-trending-filter--active { background: #1e3a5f; color: #93c5fd; border-color: #2563eb; }

html.bs-dark .bs-trending-chain-dropdown { background: #1c1c30; border-color: #2d2d48; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }

html.bs-dark #bs-trending-page button.bs-trending-share-btn { background: #242440; border-color: #2d2d48; color: #a8a8be; }
html.bs-dark #bs-trending-page button.bs-trending-share-btn:hover { background: #2d2d48; border-color: #3d3d58; }

html.bs-dark #bs-trending-page button.bs-trending-vote-btn--bullish { background: transparent; border-color: #065f46; color: #4ade80; }
html.bs-dark #bs-trending-page button.bs-trending-vote-btn--bearish { background: transparent; border-color: #7f1d1d; color: #f87171; }
html.bs-dark #bs-trending-page button.bs-trending-vote-btn--inactive { background: transparent; border-color: #2d2d48; color: #6e6e88; }

html.bs-dark .bs-trending-card.info-card { background-color: #1c1c30; box-shadow: rgb(0 0 0 / 20%) 0px 0px 0.25em, rgb(0 0 0 / 10%) 0px 0.25em 1em; }

html.bs-dark .bs-trending-coin-name { color: #e4e4ed; }
html.bs-dark .bs-trending-coin-name:hover { color: #5fa8e0; }
html.bs-dark .bs-trending-votes { color: #e4e4ed; }
html.bs-dark .bs-trending-sentiment-pct-val { color: #4ade80; }
html.bs-dark .bs-trending-sentiment-pct-label { color: #4ade80; }
html.bs-dark .bs-trending-sentiment-stat-val { color: #e4e4ed; }
html.bs-dark .bs-trending-sentiment-bar { background: rgba(185,28,28,0.2); }
html.bs-dark .bs-trending-sentiment-bar-fill { background: #4ade80; }
html.bs-dark .bs-trending-mini-bar { background: rgba(185,28,28,0.2); }
html.bs-dark .bs-trending-mini-bar-fill { background: #4ade80; }

/* DT pagination dark mode handled globally */