/* ============================================
   Siam Blockchain — Ticker Bar
   Proven marquee pattern: two content wrappers
   each animated translateX(-100%)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    --sbc-accent: #4ac5db;
    --sbc-accent-dark: #2da8bd;
    --sbc-accent-light: #c9f0f7;
    --sbc-accent-bg: rgba(74, 197, 219, 0.06);
    --sbc-bg: #ffffff;
    --sbc-bg-subtle: #f7fafb;
    --sbc-bg-muted: #f0f4f5;
    --sbc-text: #1a2b3c;
    --sbc-text-secondary: #506478;
    --sbc-muted: #8da0b0;
    --sbc-border: #e2e8ed;
    --sbc-up: #16a34a;
    --sbc-down: #dc2626;
    --sbc-font-th: 'Sukhumvit Set', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, sans-serif;
    --sbc-font-mono: 'JetBrains Mono', monospace;
}

/* ─── Marquee Container ─── */
.sbc-ticker-wrap {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 42px;
    background: #fafcfd;
    border-bottom: 1px solid #e2e8ed;
    position: relative;
    z-index: 9999;
    font-family: var(--sbc-font-th);
}

/* Edge fade */
.sbc-ticker-wrap::before,
.sbc-ticker-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 40px;
    z-index: 2;
    pointer-events: none;
}
.sbc-ticker-wrap::before { left: 0; background: linear-gradient(90deg, #fafcfd, transparent); }
.sbc-ticker-wrap::after { right: 0; background: linear-gradient(270deg, #fafcfd, transparent); }

/* ─── Each content wrapper ─── */
.sbc-ticker-content {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    animation: sbc-marquee 45s linear infinite;
}
.sbc-ticker-wrap:hover .sbc-ticker-content {
    animation-play-state: paused;
}

@keyframes sbc-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* ─── Ticker Items ─── */
.sbc-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 20px;
    height: 42px;
    white-space: nowrap;
    text-decoration: none;
    color: #1a2b3c;
    font-size: 12.5px;
    font-family: var(--sbc-font-th);
    border-right: 1px solid #e2e8ed;
    transition: background 0.15s;
    flex-shrink: 0;
    box-sizing: border-box;
}
.sbc-ticker-item:hover { background: rgba(74, 197, 219, 0.06); }

.sbc-ticker-logo { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }

.sbc-ticker-symbol {
    font-family: var(--sbc-font-mono);
    font-weight: 700;
    font-size: 11px;
    color: #2da8bd;
}

.sbc-ticker-price {
    font-family: var(--sbc-font-mono);
    font-size: 12px;
    font-weight: 600;
    color: #1a2b3c;
}

.sbc-ticker-change {
    font-family: var(--sbc-font-mono);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}
.sbc-ticker-change.sbc-up { color: #16a34a; background: rgba(22,163,74,0.08); }
.sbc-ticker-change.sbc-down { color: #dc2626; background: rgba(220,38,38,0.08); }

/* ─── Other shortcode styles ─── */
.sbc-inline-price { font-family: var(--sbc-font-mono); font-weight: 600; }
.sbc-inline-price.sbc-up { color: var(--sbc-up); }
.sbc-inline-price.sbc-down { color: var(--sbc-down); }

.sbc-coin-table-wrap { font-family: var(--sbc-font-th); overflow-x: auto; }
.sbc-coin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sbc-coin-table th {
    background: var(--sbc-bg-subtle);
    color: var(--sbc-text-secondary);
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--sbc-accent);
}
.sbc-coin-table td { padding: 12px 16px; border-bottom: 1px solid var(--sbc-border); }
.sbc-coin-table tbody tr:hover { background: var(--sbc-accent-bg); }
.sbc-coin-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.sbc-coin-link img { border-radius: 50%; }
.sbc-coin-link span { color: var(--sbc-muted); font-family: var(--sbc-font-mono); font-size: 12px; }
.sbc-coin-table .sbc-up { color: var(--sbc-up); }
.sbc-coin-table .sbc-down { color: var(--sbc-down); }