/* ══════════════════════════════════════════════════════════════
   Coin Hero — blockspot.io
   Shared by main coin page and price-prediction sub-page.
   Renders via [bs_coin_hero] shortcode.
   ══════════════════════════════════════════════════════════════ */

/* ── Outer section wrapper (view-transition-name lives here) ── */
.bs-coin-hero-section {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* ── Breadcrumb inside hero section ── */
.bs-coin-hero-section .bs-breadcrumb {
    margin: 0 0 12px;
    font-size: 13px;
    color: #6b7280;
}

.bs-coin-hero-section .bs-breadcrumb a {
    color: #6b7280;
    text-decoration: none;
}

.bs-coin-hero-section .bs-breadcrumb a:hover {
    color: #111318;
    text-decoration: underline;
}

.bs-coin-hero-section .bs-breadcrumb .bs-breadcrumb-sep {
    margin: 0 6px;
    color: #d1d5db;
}

/* ── Hero row (logo + title column + voting) ── */
.bs-coin-hero {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    /* nowrap keeps the voting card beside the title on desktop (the long price-
       prediction H1 wraps within its own column); mobile @media resets to wrap. */
    flex-wrap: nowrap;
}

.bs-pp-coin-logo {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: contain;
}

.bs-pp-hero-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 1 auto;
    min-width: 0;
}

.bs-coin-hero h1 {
    font-size: 34px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    color: #111318;
}

/* Ticker and date spans inherit H1 font-size so every variant reads as a
   single uniform 34 px heading. Keep spacing only. */
.bs-pp-ticker,
.bs-coin-hero-ticker {
    margin-left: 4px;
}

.bs-pp-h1-date {
    margin-left: 4px;
}

.bs-coin-hero-ticker-badge {
    white-space: nowrap;
}

.bs-coin-hero-verified {
    display: inline-block;
    vertical-align: top;
    margin-left: 6px;
    position: relative;
    top: -6px;
}

.bs-coin-hero-verified .bs-ef,
.bs-coin-hero-verified .bs-ef a {
    display: inline-block;
    line-height: 0;
}

.bs-coin-hero-verified img {
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: auto;
}

.bs-pp-hero-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bs-pp-price {
    font-size: 32px;
    font-weight: 700;
    color: #111318;
}

.bs-pp-change {
    font-size: 13px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}

.bs-pp-change-up   { color: #1D9E75; background: #e6f7f2; }
.bs-pp-change-down { color: #E24B4A; background: #fef2f2; }

/* Live ticker box (populated by bs-coin-hero.js) */
.bs-coin-hero-price-box {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    line-height: 1.2;
}

.bs-coin-hero-price-box .sp-price,
.bs-coin-hero-price-box .bs-coin-hero-price-ssr {
    font-size: 32px;
    font-weight: 700;
    color: #111318;
}

.bs-coin-hero-price-box .sp-percentage,
.bs-coin-hero-price-box .bs-coin-hero-pct-ssr {
    font-size: 22px;
    font-weight: 700;
    /* Inline color is set by bs-coin-hero.js per direction */
}

/* SSR placeholder: occupies space but is invisible so the box width matches
   its post-hydration width. bs-coin-hero.js replaces box.innerHTML on fetch. */
.bs-coin-hero-price-box .bs-coin-hero-pct-ssr {
    visibility: hidden;
}

/* ── Voting block — sits immediately next to the title column, matching the
   main-coin-page Elementor layout where voting hugs the hero text rather than
   being flex-pushed to the far right of the container. ── */
.bs-coin-hero-voting {
    flex-shrink: 0;
    margin-left: 0;
}

/* Bullish/Bearish button Elementor-theme reset. Same rationale as the share
   buttons: Elementor's global `button` / `.elementor-button` theming can
   override the voting widget's pill styling on Elementor-rendered pages.
   Re-assert the values from coin-voting.css with higher specificity. */
.bs-coin-hero-voting .bscv-card .bscv-btn {
    padding: 8px 14px;
    border: none;
    border-radius: 15px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
}

.bs-coin-hero-voting .bscv-card .bscv-btn-bullish              { background: #ecfdf5; color: #16a34a; }
.bs-coin-hero-voting .bscv-card .bscv-btn-bearish              { background: #fef2f2; color: #ef4444; }
.bs-coin-hero-voting .bscv-card .bscv-btn-bullish.bscv-btn-active { background: #10b981; color: #fff; }
.bs-coin-hero-voting .bscv-card .bscv-btn-bearish.bscv-btn-active { background: #ef4444; color: #fff; }
.bs-coin-hero-voting .bscv-card .bscv-btn-inactive             { background: #f3f4f6; color: #9ca3af; }

/* Share-row Elementor-button reset. Elementor Pro's global button theming
   (typically a purple fill + white text inherited via Post-NNN.css rules
   targeting `<button>` inside `.elementor-widget-container`) can leak onto
   our `.bscv-share-btn` elements on Elementor-rendered pages. Re-assert the
   original coin-voting.css values with higher specificity so neither side
   needs !important. Values here must match coin-voting.css exactly. */
.bs-coin-hero-voting .bscv-card .bscv-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #6b7280;
    box-shadow: none;
    cursor: pointer;
}

.bs-coin-hero-voting .bscv-card .bscv-share-btn:hover,
.bs-coin-hero-voting .bscv-card .bscv-share-btn:focus,
.bs-coin-hero-voting .bscv-card .bscv-share-btn:active {
    border-color: #d1d5db;
    background: #f3f4f6;
    color: #6b7280;
    outline: none;
    box-shadow: none;
}

.bs-coin-hero-voting .bscv-card .bscv-share-x:hover,
.bs-coin-hero-voting .bscv-card .bscv-share-x:active   { color: #000; background: #f3f4f6; }
.bs-coin-hero-voting .bscv-card .bscv-share-tg:hover,
.bs-coin-hero-voting .bscv-card .bscv-share-tg:active  { color: #229ED9; background: #f3f4f6; }
.bs-coin-hero-voting .bscv-card .bscv-share-wa:hover,
.bs-coin-hero-voting .bscv-card .bscv-share-wa:active  { color: #25D366; background: #f3f4f6; }
.bs-coin-hero-voting .bscv-card .bscv-share-copy:hover,
.bs-coin-hero-voting .bscv-card .bscv-share-copy:active { color: #1DB0E1; background: #f3f4f6; }

/* ── Desktop ≥1024px: prevent vote-time vertical shift.
   Lock the voting card width so prevote and postvote occupy the same
   horizontal footprint, and lay out postvote details in a 2-row grid
   (row 1: results bar + featured-bar; row 2: share row) so the card's
   total height matches prevote within ~3px instead of growing ~24px.
   Below 1024px: stays single-column to avoid wrapping in narrow heros. */
@media (min-width: 1024px) {
    .bs-coin-hero-voting .bscv-card-voting {
        min-width: 460px;
        min-height: 76px;
        align-items: flex-start;
    }

    .bs-coin-hero-voting .bscv-postvote {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 16px;
        row-gap: 6px;
        align-items: center;
    }

    .bs-coin-hero-voting .bscv-postvote .bscv-results {
        grid-column: 1;
        grid-row: 1;
    }

    .bs-coin-hero-voting .bscv-postvote .bscv-featured-bar {
        grid-column: 2;
        grid-row: 1;
    }

    .bs-coin-hero-voting .bscv-postvote .bscv-hint-row {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-left: 0;
        min-height: 28px;
    }
}

/* ── Mobile ── */
@media (max-width: 767px) {
    /* Re-enable wrapping so the voting card stacks below the title on phones. */
    .bs-coin-hero { flex-wrap: wrap; }

    /* Small horizontal inset so breadcrumb + logo don't touch the viewport
       edge. Applied on the section so both the main coin page and the
       prediction sub-page inherit the same gutter. */
    .bs-coin-hero-section {
        padding-left: 10px;
        padding-right: 10px;
    }

    .bs-coin-hero h1 {
        font-size: 24px;
    }

    .bs-pp-coin-logo {
        width: 56px;
        height: 56px;
    }

    .bs-pp-price,
    .bs-coin-hero-price-box .sp-price,
    .bs-coin-hero-price-box .bs-coin-hero-price-ssr {
        font-size: 22px;
    }

    .bs-coin-hero-price-box .sp-percentage,
    .bs-coin-hero-price-box .bs-coin-hero-pct-ssr {
        font-size: 16px;
    }

    .bs-coin-hero-verified {
        margin-left: 4px;
        top: -3px;
    }

    .bs-coin-hero-verified img {
        width: 18px;
    }

    .bs-coin-hero-voting {
        margin-left: 0;
        flex-basis: 100%;
    }

    /* Keep logo + H1 column on the same row even when the H1 is long
       (e.g. "Bitcoin (BTC) Price Prediction 2026, 2027-2040"). flex:1 1 0
       makes the text column grow into remaining space and wrap H1 internally
       instead of dropping to its own row below the logo. */
    .bs-pp-hero-text {
        flex: 1 1 0;
    }
}

/* ── Dark mode ── */
html.bs-dark .bs-coin-hero-section .bs-breadcrumb,
html.bs-dark .bs-coin-hero-section .bs-breadcrumb a {
    color: #a8a8be;
}

html.bs-dark .bs-coin-hero-section .bs-breadcrumb a:hover {
    color: #e4e4ed;
}

html.bs-dark .bs-coin-hero-section .bs-breadcrumb .bs-breadcrumb-sep {
    color: #4a4a5e;
}

html.bs-dark .bs-coin-hero h1,
html.bs-dark .bs-pp-price,
html.bs-dark .bs-coin-hero-price-box .sp-price,
html.bs-dark .bs-coin-hero-price-box .bs-coin-hero-price-ssr {
    color: #e4e4ed;
}

html.bs-dark .bs-pp-ticker,
html.bs-dark .bs-pp-h1-date {
    color: #a8a8be;
}

html.bs-dark .bs-pp-change-up   { background: #102a1c; color: #6ee7b7; }
html.bs-dark .bs-pp-change-down { background: #2a1414; color: #fca5a5; }