/* =============================================
 * Blockspot Coin Voting Widget
 * Demo version — production + B/C variants + demo chrome
 * ============================================= */

/* ─────────────────────────────────────────────
   PRODUCTION WIDGET STYLES
───────────────────────────────────────────── */

.bscv-widget {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

/* ── Buttons ── */

.bscv-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bscv-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1;
    font-family: inherit;
    touch-action: manipulation;
}

.bscv-btn:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.bscv-btn svg {
    flex-shrink: 0;
}

/* Bullish — default pre-vote */
.bscv-btn-bullish {
    background: #ecfdf5;
    color: #059669;
}
.bscv-btn-bullish:hover:not(.bscv-btn-active):not(.bscv-loading) {
    background: #d1fae5;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
}

/* Bearish — default pre-vote */
.bscv-btn-bearish {
    background: #fef2f2;
    color: #ef4444;
}
.bscv-btn-bearish:hover:not(.bscv-btn-active):not(.bscv-loading) {
    background: #fee2e2;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

/* Active (current vote) */
.bscv-btn-bullish.bscv-btn-active {
    background: #10b981;
    color: #fff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.bscv-btn-bearish.bscv-btn-active {
    background: #ef4444;
    color: #fff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Inactive (the other button after voting — clickable to change vote) */
.bscv-btn-inactive {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: pointer;
}
.bscv-btn-inactive:hover {
    background: #e5e7eb;
    color: #6b7280;
}

/* Loading state */
.bscv-btn.bscv-loading {
    pointer-events: none;
    opacity: 0.7;
}

/* ── Pre-vote teaser (blurred bar) ── */

.bscv-teaser {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bscv-bar-blurred {
    position: relative;
    width: 144px;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
}

.bscv-bar-bullish-blurred {
    background: #10b981;
    height: 100%;
}

.bscv-bar-bearish-blurred {
    background: #f87171;
    height: 100%;
}

.bscv-blur-overlay {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(209, 213, 219, 0.5);
    border-radius: 999px;
}

.bscv-teaser-text {
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
}

/* ── Post-vote results (revealed bar) ── */

.bscv-results {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bscv-bar {
    width: 144px;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    background: #f3f4f6;
}

.bscv-bar-bullish-fill {
    background: #10b981;
    height: 100%;
    border-radius: 999px 0 0 999px;
    transition: width 0.7s ease;
}

.bscv-bar-bearish-fill {
    background: #f87171;
    height: 100%;
    border-radius: 0 999px 999px 0;
    transition: width 0.7s ease;
}

.bscv-results-text {
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
}

.bscv-results-text .bscv-pct {
    font-weight: 600;
    color: #374151;
}

/* ── Prevote layout: A stacked-reversed (buttons top, teaser below), B/C stacked ── */

.bscv-prevote {
    display: flex;
    align-items: end;
    gap: 8px;
    flex-direction: column-reverse;
}

.bscv-prevote[data-lure="b"],
.bscv-prevote[data-lure="c"] {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* ── Postvote: always inline ── */

.bscv-postvote {
    display: flex;
    align-items: end;
    gap: 8px;
    flex-flow: column;
}

/* ── Animations ── */

.bscv-postvote.bscv-reveal {
    animation: bscvFadeIn 0.4s ease forwards;
}

@keyframes bscvFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Responsive ── */

@media (max-width: 600px) {
    .bscv-widget {
        align-items: flex-start;
        width: 100%;
    }

    .bscv-btn {
        padding: 7px 12px;
        font-size: 12px;
    }

    .bscv-bar-blurred,
    .bscv-bar {
        width: 90px;
    }

    .bscv-postvote,
    .bscv-prevote {
        flex-wrap: wrap;
    }
}

/* ─────────────────────────────────────────────
   COIN CARD (widget wrapper)
───────────────────────────────────────────── */

.bscv-card {
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: 16px 20px;
    gap: 12px;
}

.bscv-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.bscv-coin-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bscv-coin-logo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    flex-shrink: 0;
}

img.bscv-coin-logo {
    object-fit: cover;
    background: transparent;
    display: block;
}

.bscv-coin-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bscv-coin-namewrap {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 3px;
    line-height: 1.3;
}

.bscv-coin-name {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    padding: 0;
    margin: 0;
}

.bscv-coin-pricewrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bscv-coin-price {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.bscv-coin-change {
    font-size: 12px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
}

.bscv-coin-change.neg {
    background: #fef2f2;
    color: #ef4444;
}

.bscv-coin-change.pos {
    background: #ecfdf5;
    color: #059669;
}

.bscv-visit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: none;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    color: #fff!important;
    background: #3b82f6;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
    font-family: inherit;
}

.bscv-visit-btn:hover {
    background: #2563eb;
}

.bscv-card-voting {
    /* padding-top: 12px;
    border-top: 1px solid #f3f4f6; */
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 520px) {
    .bscv-card-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .bscv-card-voting {
        justify-content: flex-start;
    }
}

/* ─────────────────────────────────────────────
   OPTION B — SOCIAL PROOF
───────────────────────────────────────────── */

.bscv-social-proof {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bscv-avatars {
    display: flex;
}

.bscv-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -6px;
    background: #d1d5db;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #6b7280;
    font-weight: 600;
}

.bscv-avatar:first-child {
    margin-left: 0;
}

.bscv-social-text {
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────
   OPTION C — QUESTION + COUNT
───────────────────────────────────────────── */

.bscv-question {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.bscv-question-text {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    font-style: italic;
}

.bscv-question-count {
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────
   ACCESSIBILITY
───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .bscv-postvote.bscv-reveal {
        animation: none;
    }

    .bscv-bar-bullish-fill,
    .bscv-bar-bearish-fill {
        transition: none;
    }
}

.bscv-noscript {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 8px;
}

.bscv-error-msg {
    font-size: 12px;
    color: #ef4444;
    margin: 6px 0 0;
    text-align: center;
}