/* Mobile controls share the same navigation and safe-area offsets. */
@media (max-width: 700px) {
    :root {
        --zb-nav-height: 74px;
        --zb-safe-bottom: env(safe-area-inset-bottom, 0px);
        --zb-controls-bottom: calc(var(--zb-nav-height) + var(--zb-safe-bottom) + 12px);
    }

    html { scroll-padding-bottom: calc(var(--zb-nav-height) + var(--zb-safe-bottom) + 80px); }
    body { padding-bottom: calc(var(--zb-nav-height) + var(--zb-safe-bottom) + 80px); }
    body .navbar { z-index: 9998 !important; }

    body .mobile-sport-nav {
        height: calc(var(--zb-nav-height) + var(--zb-safe-bottom));
        padding: 6px max(4px, env(safe-area-inset-right, 0px)) calc(6px + var(--zb-safe-bottom)) max(4px, env(safe-area-inset-left, 0px));
        grid-template-columns: repeat(6, minmax(0, 1fr));
        align-items: stretch;
    }
    body .mobile-sport-nav a {
        justify-content: center;
        min-height: 60px;
        gap: 5px;
        font-size: clamp(10px, 2.9vw, 12px);
        line-height: 1.25;
        border-radius: 10px;
        touch-action: manipulation;
    }
    body .mobile-sport-nav a span { white-space: nowrap; }
    body .mobile-sport-nav i { font-size: 22px; line-height: 1; }
    body .mobile-sport-nav a.active { background: rgba(255, 200, 61, .09); }
    body .mobile-sport-nav a:focus-visible { outline: 2px solid var(--mc-yellow); outline-offset: -2px; }

    #callbackButton {
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        bottom: var(--zb-controls-bottom) !important;
        z-index: 10010 !important;
        width: 54px;
        height: 54px;
        animation: none;
        transition: box-shadow .2s;
        touch-action: manipulation;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
    }
    #callbackButton i { font-size: 24px !important; }
    #callbackButton:hover { transform: none; }

    body .mc-mobile-slip {
        right: max(12px, env(safe-area-inset-right, 0px));
        bottom: var(--zb-controls-bottom);
        min-height: 50px;
        transition: background-color .2s;
        touch-action: manipulation;
    }
    body .zeusbet-support-launcher {
        top: auto;
        right: max(12px, env(safe-area-inset-right, 0px));
        bottom: calc(var(--zb-controls-bottom) + 64px);
        z-index: 10010;
        min-height: 48px;
        padding: 7px 10px;
        gap: 8px;
        border: 1px solid rgba(246, 195, 74, .42);
        border-radius: 14px;
        touch-action: manipulation;
    }
    body .zeusbet-support-launcher span { display: block; }
    body .zeusbet-support-launcher small { display: none; }
    body .zeusbet-support-launcher strong { font-size: 11px; }
    body .zeusbet-support-launcher:hover { transform: none; }

    body .mc-bet-slip {
        bottom: calc(var(--zb-nav-height) + var(--zb-safe-bottom) + 8px);
        max-height: calc(100vh - var(--zb-nav-height) - var(--zb-safe-bottom) - 24px);
        max-height: calc(100dvh - var(--zb-nav-height) - var(--zb-safe-bottom) - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    body.bet-slip-open #callbackButton,
    body.bet-slip-open .zeusbet-support-launcher,
    body.modal-open #callbackButton,
    body.modal-open .zeusbet-support-launcher,
    body.modal-open .mc-mobile-slip,
    body.zb-support-open #callbackButton,
    body.zb-support-open .zeusbet-support-launcher,
    body.zb-support-open .mc-mobile-slip {
        visibility: hidden;
        pointer-events: none !important;
    }
    body .callback-modal { padding: 12px; overflow-y: auto; }
    body .callback-box {
        padding: 26px 20px;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    body .callback-form input,
    body .callback-form textarea { font-size: 16px; }
    body .callback-close { min-width: 44px; min-height: 44px; top: 5px; right: 5px; }
    body .mc-hero h1 { font-size: clamp(32px, 10.5vw, 42px); }
    body .mc-hero-copy { min-width: 0; max-width: 100%; }
    body main > .mc-hero,
    body main > .mc-page-head { margin-top: 106px; }
}