:root {
    --bp-mobile-nav-height: 74px;
    --bp-mobile-nav-green: #07966f;
    --bp-mobile-nav-text: #758391;
    --bp-mobile-nav-border: #e6ebef;
    --bp-mobile-nav-bg: rgba(255,255,255,.97);
}

.bp-mobile-sticky { display: none; }

@media (max-width: 1024px) {
    html { scroll-padding-bottom: calc(var(--bp-mobile-nav-height) + 18px); }
    body { padding-bottom: calc(var(--bp-mobile-nav-height) + env(safe-area-inset-bottom, 0px)) !important; }

    .bp-mobile-sticky {
        position: fixed;
        z-index: 99990;
        inset-inline: 0;
        bottom: 0;
        display: block;
        padding: 0 8px max(6px, env(safe-area-inset-bottom, 0px));
        pointer-events: none;
        direction: rtl;
        font-family: 'YekanBakh', Tahoma, sans-serif !important;
    }

    .bp-mobile-sticky__inner {
        width: min(100%, 760px);
        min-height: var(--bp-mobile-nav-height);
        margin: 0 auto;
        padding: 7px 7px 6px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(98px, 1.38fr);
        gap: 4px;
        align-items: stretch;
        background: var(--bp-mobile-nav-bg);
        border: 1px solid var(--bp-mobile-nav-border);
        border-bottom: 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 26px rgba(22, 35, 48, .12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        pointer-events: auto;
    }

    .bp-mobile-sticky__item {
        min-width: 0;
        min-height: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        position: relative;
        border-radius: 13px;
        text-decoration: none !important;
        color: var(--bp-mobile-nav-text) !important;
        background: transparent;
        transition: background .18s ease, color .18s ease, transform .18s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .bp-mobile-sticky__item:active { transform: scale(.97); }

    .bp-mobile-sticky__icon {
        width: 23px;
        height: 23px;
        display: grid;
        place-items: center;
        line-height: 1;
    }

    .bp-mobile-sticky__icon svg {
        width: 22px;
        height: 22px;
        fill: currentColor;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .bp-mobile-sticky__label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11.5px;
        font-weight: 700;
        line-height: 1.2;
    }

    .bp-mobile-sticky__item.bp-is-active {
        color: var(--bp-mobile-nav-green) !important;
        background: #f0faf6;
    }

    /*
     * Login/Register CTA intentionally mimics BetProfa's mobile "Prediction"
     * control: a wide capsule with a round counter bubble, not a square tile.
     */
    .bp-mobile-sticky__item--cta {
        align-self: center;
        min-height: 54px;
        height: 54px;
        flex-direction: row;
        justify-content: center;
        padding: 0 32px 0 10px;
        margin: 2px 0;
        overflow: visible;
        color: #fff !important;
        background: var(--bp-mobile-nav-green);
        border: 3px solid #dff4ec;
        border-radius: 999px;
        box-shadow: 0 3px 10px rgba(7, 150, 111, .18);
    }

    .bp-mobile-sticky__item--cta .bp-mobile-sticky__icon {
        display: none;
    }

    .bp-mobile-sticky__item--cta .bp-mobile-sticky__label {
        display: block;
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap;
        font-size: 10.6px;
        font-weight: 800;
        line-height: 1.15;
    }

    .bp-mobile-sticky__item--cta.bp-is-active {
        color: #fff !important;
        background: var(--bp-mobile-nav-green);
    }

    .bp-mobile-sticky__badge {
        position: absolute;
        top: 50%;
        inset-inline-start: 7px;
        transform: translateY(-50%);
        width: 26px;
        min-width: 26px;
        height: 26px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 2px solid #fff;
        background: #fff;
        color: var(--bp-mobile-nav-green);
        font-size: 9px;
        font-weight: 900;
        line-height: 1;
        box-shadow: 0 1px 4px rgba(0,0,0,.08);
    }

    /* Generic view containers that future in-play shortcodes can use. */
    [data-bp-inplay-view][hidden] { display: none !important; }
}

@media (max-width: 420px) {
    :root { --bp-mobile-nav-height: 70px; }

    .bp-mobile-sticky { padding-inline: 4px; }
    .bp-mobile-sticky__inner {
        padding-inline: 4px;
        grid-template-columns: repeat(4, minmax(0, .88fr)) minmax(102px, 1.48fr);
        gap: 1px;
        border-radius: 15px 15px 0 0;
    }
    .bp-mobile-sticky__item { min-height: 57px; border-radius: 10px; }
    .bp-mobile-sticky__label { font-size: 10.5px; }
    .bp-mobile-sticky__item--cta { min-height: 52px; height: 52px; padding-inline: 30px 8px; }
    .bp-mobile-sticky__item--cta .bp-mobile-sticky__label { font-size: 10px; }
    .bp-mobile-sticky__badge { width: 24px; min-width: 24px; height: 24px; inset-inline-start: 6px; font-size: 8.5px; }
}

@media (min-width: 1025px) {
    .bp-mobile-sticky { display: none !important; }
}