/* ============================================================
   betside-homepage.css v6 — [betside_homepage]
   Uses Manrope (loaded by Elementor globally)
   Site bg: #161B22 · Text: #C9D1D9 · Accent: #FBAF08

   v6: High-contrast rewrite – cards lifted from page bg,
       visible borders, buttons stand out, clear visual hierarchy
   ============================================================ */

/* ── Elementor isolation ──────────────────────────────────── */

/* Force the widget to take full width inside Elementor flex container */
.elementor-widget-shortcode {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    flex-shrink: 0 !important;
}

.elementor-widget-shortcode > .elementor-widget-container,
.elementor-widget-shortcode .elementor-shortcode {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Kill ALL inherited Elementor CSS custom properties inside our widget.
   Elementor's container sets --gap, --row-gap, --column-gap, --flex-direction etc.
   and these cascade to descendants, overriding our explicit values via var(). */
.bh-wrapper,
.bh-wrapper * {
    --display: initial !important;
    --flex-direction: initial !important;
    --flex-wrap: initial !important;
    --gap: initial !important;
    --row-gap: initial !important;
    --column-gap: initial !important;
    --align-items: initial !important;
    --align-content: initial !important;
    --justify-content: initial !important;
    --justify-items: initial !important;
    --container-widget-width: initial !important;
    --container-widget-height: initial !important;
    --container-widget-flex-grow: initial !important;
    --container-widget-align-self: initial !important;
    --min-height: initial !important;
    --overflow: initial !important;
    --text-align: initial !important;
}

/* ── Reset ────────────────────────────────────────────────── */
.bh-wrapper,
.bh-wrapper *,
.bh-wrapper *::before,
.bh-wrapper *::after {
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased;
    font-style: normal !important;
}

.bh-wrapper {
    display: block !important;
    font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
    color: #C9D1D9 !important;
    line-height: 1.5 !important;
    width: 100% !important;
    font-style: normal !important;
}

.bh-wrapper h1,
.bh-wrapper h2,
.bh-wrapper h3,
.bh-wrapper p,
.bh-wrapper div,
.bh-wrapper span,
.bh-wrapper a {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Manrope', system-ui, -apple-system, sans-serif !important;
    font-style: normal !important;
}

.bh-wrapper a {
    text-decoration: none !important;
    color: inherit !important;
}

/* ── HERO ─────────────────────────────────────────────────── */
.bh-hero {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    align-items: center !important;
    margin-bottom: 24px !important;
}

.bh-hero-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.bh-headline {
    font-size: clamp(26px, 3.4vw, 42px) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
    font-style: normal !important;
}

.bh-subtext {
    font-size: 14px !important;
    color: #9BA4AE !important;
    line-height: 1.7 !important;
    max-width: 520px !important;
    border-left: 3px solid #FBAF08 !important;
    padding-left: 16px !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

/* Hero cards */
.bh-hero-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

/* ── CARD BASE ────────────────────────────────────────────── */
.bh-tip-card,
.bh-ranking-card {
    background: #1C2333 !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    color: #C9D1D9 !important;
    min-height: 200px !important;
}

/* ── TYP NA DZIŚ ──────────────────────────────────────────── */
.bh-tip-card {
    border-color: rgba(251,175,8,.3) !important;
    background: linear-gradient(170deg, #1C2333 0%, #1A1F2E 100%) !important;
}

.bh-tip-badge {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(251,175,8,.12) !important;
    border: 1px solid rgba(251,175,8,.3) !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #FBAF08 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    align-self: flex-start !important;
}

.bh-tip-matches {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 !important;
}

.bh-tip-match {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #E6EDF3 !important;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 6px !important;
    padding: 7px 10px !important;
    line-height: 1.3 !important;
}

.bh-tip-placeholder {
    color: #586069 !important;
    font-style: italic !important;
    font-weight: 400 !important;
}

.bh-tip-odds {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(251,175,8,.08) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
}

.bh-tip-odds-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #8B949E !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
}

.bh-tip-odds-value {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #FBAF08 !important;
    line-height: 1 !important;
    letter-spacing: -.02em !important;
}

.bh-tip-actions {
    display: flex !important;
    gap: 6px !important;
}

/* ── RANKING ──────────────────────────────────────────────── */
.bh-ranking-card {
    justify-content: space-between !important;
    background: #1C2333 !important;
}

.bh-ranking-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

.bh-ranking-badge {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #8B949E !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.bh-ranking-month {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -.02em !important;
    line-height: 1.1 !important;
}

.bh-ranking-desc {
    font-size: 12px !important;
    color: #8B949E !important;
    line-height: 1.5 !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.bh-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 9px 14px !important;
    border-radius: 8px !important;
    font-family: 'Manrope', system-ui, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transition: background .15s, border-color .15s !important;
    font-style: normal !important;
}

.bh-btn:hover {
    text-decoration: none !important;
    color: inherit !important;
}

.bh-btn-play {
    background: #FBAF08 !important;
    color: #0D1117 !important;
    flex: 1 !important;
}

.bh-btn-play:hover {
    background: #E8A007 !important;
    color: #0D1117 !important;
}

.bh-btn-analyze {
    background: rgba(255,255,255,.08) !important;
    color: #C9D1D9 !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    flex: 1 !important;
}

.bh-btn-analyze:hover {
    background: rgba(255,255,255,.14) !important;
    border-color: rgba(255,255,255,.25) !important;
    color: #fff !important;
}

.bh-btn-ranking {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    color: #C9D1D9 !important;
    width: 100% !important;
}

.bh-btn-ranking:hover {
    background: rgba(255,255,255,.14) !important;
    border-color: rgba(255,255,255,.25) !important;
    color: #fff !important;
}

/* ── BOTTOM SECTION ───────────────────────────────────────── */
.bh-bottom {
    display: grid !important;
    grid-template-columns: 1fr 320px !important;
    gap: 20px !important;
    align-items: start !important;
}

/* ── 4-TILE GRID ──────────────────────────────────────────── */
.bh-tiles {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 220px !important;
    gap: 12px !important;
}

/* Tile base */
.bh-tile {
    background: #1C2333 !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    transition: border-color .2s, box-shadow .3s !important;
}

.bh-tile:hover {
    border-color: rgba(251,175,8,.35) !important;
    box-shadow: 0 4px 24px rgba(251,175,8,.08) !important;
}

.bh-tile-inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    text-decoration: none !important;
    color: #C9D1D9 !important;
    position: relative !important;
}

.bh-tile-inner:hover,
.bh-tile-inner:focus {
    color: #C9D1D9 !important;
    text-decoration: none !important;
}

.bh-tile-empty {
    background: rgba(255,255,255,.02) !important;
    border-style: dashed !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.bh-tile-empty-label {
    font-size: 12px !important;
    color: #586069 !important;
}

/* ── ARTICLE TILE (overlay) ───────────────────────────────── */
.bh-tile-overlay {
    position: relative !important;
    overflow: hidden !important;
}

.bh-tile-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform .5s ease !important;
}

.bh-tile-article:hover .bh-tile-bg {
    transform: scale(1.06) !important;
}

.bh-tile-overlay-content {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    height: 100% !important;
    padding: 16px !important;
    background: linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.5) 40%, rgba(0,0,0,.05) 100%) !important;
}

.bh-tile-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.7) !important;
    font-family: 'Manrope', sans-serif !important;
}

.bh-tile-date {
    font-size: 11px !important;
    color: rgba(255,255,255,.5) !important;
    margin-top: 4px !important;
    font-family: 'Manrope', sans-serif !important;
}

/* ── TWITTER TILE ─────────────────────────────────────────── */
.bh-tile-twitter {
    background: #1C2333 !important;
    border-color: rgba(255,255,255,.1) !important;
}

.bh-tile-twitter:hover {
    border-color: rgba(255,255,255,.25) !important;
    box-shadow: 0 4px 24px rgba(255,255,255,.04) !important;
}

.bh-twitter-inner {
    padding: 20px 18px !important;
    gap: 0 !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    z-index: 1 !important;
}

.bh-twitter-watermark {
    position: absolute !important;
    bottom: -15px !important;
    right: -15px !important;
    width: 130px !important;
    height: 130px !important;
    color: rgba(255,255,255,.04) !important;
    display: block !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.bh-twitter-top {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.bh-twitter-logo {
    width: 18px !important;
    height: 18px !important;
    color: #ffffff !important;
    display: block !important;
    flex-shrink: 0 !important;
}

.bh-twitter-handle-top {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #586069 !important;
    display: block !important;
}

.bh-twitter-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 14px 0 !important;
}

.bh-twitter-heading {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.15 !important;
    display: block !important;
    letter-spacing: -.02em !important;
}

.bh-twitter-sub {
    font-size: 12px !important;
    color: #8B949E !important;
    line-height: 1.5 !important;
    display: block !important;
}

.bh-twitter-follow-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    color: #0D1117 !important;
    border-radius: 9999px !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    transition: background .15s !important;
    position: relative !important;
    z-index: 1 !important;
}

.bh-tile-twitter:hover .bh-twitter-follow-btn {
    background: #E6EDF3 !important;
}

/* ── PROMO DNIA TILE ──────────────────────────────────────── */
.bh-tile-promo {
    border-color: rgba(34,197,94,.25) !important;
    background: linear-gradient(170deg, #1C2333 0%, #172228 100%) !important;
}

.bh-tile-promo:hover {
    border-color: rgba(34,197,94,.45) !important;
    box-shadow: 0 4px 24px rgba(34,197,94,.08) !important;
}

.bh-promo-inner {
    padding: 16px !important;
    gap: 8px !important;
    justify-content: center !important;
    align-items: flex-start !important;
    cursor: default !important;
}

a.bh-promo-inner {
    cursor: pointer !important;
}

.bh-promo-badge {
    display: inline-block !important;
    background: rgba(34,197,94,.1) !important;
    border: 1px solid rgba(34,197,94,.3) !important;
    border-radius: 4px !important;
    padding: 2px 8px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #22c55e !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    font-family: 'Manrope', sans-serif !important;
}

.bh-promo-bm {
    display: flex !important;
    align-items: center !important;
}

.bh-promo-bm-logo {
    max-height: 32px !important;
    max-width: 100px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

.bh-promo-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    font-family: 'Manrope', sans-serif !important;
}

.bh-promo-cta-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 10px 16px !important;
    background: #22c55e !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-top: auto !important;
    font-family: 'Manrope', sans-serif !important;
    transition: background .15s !important;
    font-style: normal !important;
}

.bh-tile-promo:hover .bh-promo-cta-btn {
    background: #16a34a !important;
}

/* ── PROMOTIONS SIDEBAR ───────────────────────────────────── */
.bh-promos {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.bh-promos-heading {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #586069 !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    margin-bottom: 2px !important;
    font-family: 'Manrope', sans-serif !important;
}

.bh-promo-item {
    background: #1C2333 !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-left: 3px solid rgba(251,175,8,.4) !important;
    border-radius: 10px !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    transition: border-color .2s, box-shadow .2s !important;
}

.bh-promo-item:hover {
    border-color: rgba(255,255,255,.15) !important;
    border-left-color: #FBAF08 !important;
    box-shadow: 0 2px 12px rgba(251,175,8,.08) !important;
}

.bh-pi-top {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.bh-pi-logo {
    height: 26px !important;
    width: 44px !important;
    object-fit: contain !important;
    object-position: left center !important;
    flex-shrink: 0 !important;
    display: block !important;
}

.bh-pi-logo-placeholder {
    width: 44px !important;
    height: 26px !important;
    background: rgba(255,255,255,.08) !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    color: #586069 !important;
    flex-shrink: 0 !important;
    font-family: 'Manrope', sans-serif !important;
}

.bh-pi-text {
    flex: 1 !important;
    min-width: 0 !important;
}

.bh-pi-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #E6EDF3 !important;
    line-height: 1.3 !important;
    font-family: 'Manrope', sans-serif !important;
}

.bh-pi-desc {
    font-size: 11px !important;
    color: #8B949E !important;
    line-height: 1.4 !important;
    margin-top: 1px !important;
    font-family: 'Manrope', sans-serif !important;
}

.bh-pi-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(251,175,8,.08) !important;
    border: 1px solid rgba(251,175,8,.25) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #FBAF08 !important;
    text-decoration: none !important;
    transition: background .15s, border-color .15s !important;
    font-family: 'Manrope', sans-serif !important;
    font-style: normal !important;
}

.bh-pi-cta:hover {
    background: rgba(251,175,8,.15) !important;
    border-color: rgba(251,175,8,.4) !important;
    color: #FBAF08 !important;
    text-decoration: none !important;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1100px) {
    .bh-bottom {
        grid-template-columns: 1fr !important;
    }

    .bh-promos {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    .bh-promos-heading {
        width: 100% !important;
    }

    .bh-promo-item {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 240px !important;
    }
}

@media (max-width: 880px) {
    .bh-hero {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }
}

@media (max-width: 768px) {
    .bh-tip-card,
    .bh-ranking-card {
        border-radius: 10px !important;
        padding: 14px !important;
        min-height: auto !important;
    }

    .bh-tile {
        border-radius: 10px !important;
    }

    .bh-tiles {
        grid-auto-rows: 200px !important;
    }
}

@media (max-width: 640px) {
    .bh-tiles {
        grid-template-columns: 1fr !important;
        grid-auto-rows: 200px !important;
    }

    .bh-promo-item {
        flex: 1 1 100% !important;
    }
}

@media (max-width: 560px) {
    .bh-hero-cards {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .bh-tip-actions {
        flex-direction: column !important;
    }

    .bh-btn-play,
    .bh-btn-analyze {
        width: 100% !important;
        text-align: center !important;
    }
}

/* === BH shield (fix Hello Elementor / Elementor resets) === */
.bh-wrapper, .bh-wrapper * { box-sizing: border-box; }
.bh-wrapper { font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.5; color: #C9D1D9; }
.bh-wrapper h1, .bh-wrapper h2, .bh-wrapper h3, .bh-wrapper p { margin: 0; }
.bh-wrapper a { color: inherit; text-decoration: none; }
.bh-wrapper img, .bh-wrapper svg { display: block; max-width: 100%; height: auto; }
.bh-wrapper button, .bh-wrapper input, .bh-wrapper select, .bh-wrapper textarea { font: inherit; }
.bh-wrapper ul, .bh-wrapper ol { margin: 0; padding: 0; list-style: none; }
/* keep overlays visible */
.bh-wrapper { overflow: visible; }
/* === end BH shield === */