/* =========================================================
   MUSIC FM — MOBILE APP FOUNDATION / STEP 1
   קובץ נפרד למובייל בלבד כדי לא לשבור דסקטופ
   מיקום: assets/css/mobile-app.css
========================================================= */

@media (max-width: 820px){
    :root{
        --mf-mobile-nav-height: 78px;
        --mf-mobile-player-space: 0px;
        --mf-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
        --mf-mobile-page-x: 12px;
    }

    html{
        scroll-padding-top: 88px;
        scroll-padding-bottom: calc(var(--mf-mobile-nav-height) + 26px);
    }

    body.mf-site-unified{
        padding-bottom: calc(var(--mf-mobile-nav-height) + var(--mf-mobile-player-space) + var(--mf-mobile-safe-bottom) + 18px) !important;
        background:
            radial-gradient(circle at 85% 6%, rgba(34,184,255,.20), transparent 28%),
            radial-gradient(circle at 12% 18%, rgba(20,124,255,.16), transparent 30%),
            linear-gradient(180deg,#f8fbff 0%,#eef5ff 50%,#ffffff 100%) !important;
    }

    /* HEADER — הופך לבר אפליקציה נקי */
    .topbar{
        min-height: 64px !important;
        margin: 0 0 12px !important;
        padding: 9px 12px !important;
        border-radius: 0 0 22px 22px !important;
        gap: 8px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 99990 !important;
    }

    .topbar .logo{
        flex: 1 1 auto !important;
        min-width: 0 !important;
        justify-content: flex-start !important;
    }

    .topbar .logo img{
        height: 38px !important;
        max-width: 138px !important;
    }

    .topbar .nav{
        display: none !important;
    }

    .topbar .icons{
        flex: 0 0 auto !important;
        gap: 4px !important;
        margin: 0 !important;
    }

    .topbar .icons > a,
    .topbar .icons > button,
    .topbar .icons > span,
    .topbar .icons > .notif-dropdown-wrap,
    .topbar .notif-toggle,
    .icons > a,
    .icons > span,
    .icons > button,
    .icons > .notif-dropdown-wrap,
    .icons > .notif-dropdown-wrap > .notif-toggle{
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        flex-basis: 36px !important;
    }

    .topbar .icons i,
    .topbar .notif-toggle i,
    .icons i{
        font-size: 17px !important;
    }

    .topbar .header-avatar,
    .topbar a.avatar{
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    /* APP BOTTOM NAV */
    .mf-mobile-app-nav{
        position: fixed !important;
        right: 10px !important;
        left: 10px !important;
        bottom: calc(8px + var(--mf-mobile-safe-bottom)) !important;
        z-index: 999999 !important;

        height: var(--mf-mobile-nav-height) !important;
        padding: 8px 8px !important;

        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 4px !important;

        direction: rtl !important;

        background: rgba(7, 13, 23, .92) !important;
        color: #fff !important;

        border: 1px solid rgba(255,255,255,.14) !important;
        border-radius: 26px !important;

        box-shadow:
            0 18px 55px rgba(15,23,42,.28),
            inset 0 1px 0 rgba(255,255,255,.12) !important;

        backdrop-filter: blur(22px) saturate(1.18) !important;
        -webkit-backdrop-filter: blur(22px) saturate(1.18) !important;
    }

    .mf-mobile-app-nav a{
        position: relative !important;
        min-width: 0 !important;
        height: 62px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;

        border-radius: 20px !important;
        color: rgba(255,255,255,.74) !important;
        text-decoration: none !important;

        font-family: inherit !important;
        transition: .22s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .mf-mobile-app-nav a.active,
    .mf-mobile-app-nav a:active{
        color: #fff !important;
        background: linear-gradient(135deg, rgba(34,184,255,.24), rgba(20,124,255,.18)) !important;
    }

    .mf-mobile-nav-icon{
        position: relative !important;
        width: 26px !important;
        height: 24px !important;
        display: grid !important;
        place-items: center !important;
    }

    .mf-mobile-nav-icon i{
        font-size: 19px !important;
        line-height: 1 !important;
    }

    .mf-mobile-nav-icon em{
        position: absolute !important;
        top: -7px !important;
        left: -10px !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 5px !important;
        border-radius: 999px !important;
        background: #ff3d6e !important;
        color: #fff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 10px !important;
        font-style: normal !important;
        font-weight: 900 !important;
        box-shadow: 0 0 0 3px rgba(255,61,110,.18) !important;
    }

    .mf-mobile-app-nav small{
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }

    /* HOME LAYOUT — דף הבית מרגיש כמו אפליקציה */
    .page{
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        padding: 0 var(--mf-mobile-page-x) 14px !important;
        direction: rtl !important;
    }

    .left,
    .main,
    .right{
        width: 100% !important;
        min-width: 0 !important;
    }

    .main,
    .right{
        gap: 14px !important;
    }

    .box,
    .card,
    .chart,
    .follow-card,
    .contact-section,
    .search-box,
    .site-alert,
    .trending,
    .event,
    .msg,
    .weekly-user-widget{
        border-radius: 22px !important;
    }


    .tag{
        padding: 8px 13px !important;
        margin-bottom: 16px !important;
        font-size: 12px !important;
        border-radius: 999px !important;
    }


    /* SONGS / CHART */
    .bottom-area{
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .chart-row,
    .trend{
        min-height: 78px !important;
        border-radius: 18px !important;
        padding: 10px !important;
        border-bottom: 0 !important;
        background: rgba(255,255,255,.55) !important;
        margin-bottom: 8px !important;
    }

    .trend{
        grid-template-columns: 34px 1fr 72px !important;
    }

    .trend-img{
        height: 58px !important;
        border-radius: 14px !important;
    }

    .event{
        min-height: 180px !important;
        height: auto !important;
        border-radius: 24px !important;
    }

    .event h2{
        font-size: 24px !important;
    }

    /* FORMS */
    .search-box{
        position: sticky !important;
        top: 74px !important;
        z-index: 50 !important;
        padding: 10px !important;
        gap: 8px !important;
    }

    .search-box input,
    .send-form input,
    .send-form textarea,
    .mf-input,
    .mf-textarea{
        font-size: 16px !important; /* מונע זום אוטומטי באייפון */
    }

    .mf-btn,
    a.mf-btn,
    button.mf-btn,
    .full-btn,
    .send-form button{
        min-height: 50px !important;
        border-radius: 15px !important;
    }

    /* FOOTER */
    .site-footer.mf-live-footer,
    .site-footer{
        margin-bottom: calc(var(--mf-mobile-nav-height) + 22px) !important;
    }

    .mf-footer-inner{
        padding: 34px 18px 28px !important;
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .mf-footer-bottom{
        padding: 18px !important;
    }

    /* PLAYER MODAL — התאמה זמנית עד שלב הנגן הקבוע */
    .player-box{
        width: calc(100vw - 22px) !important;
        max-height: calc(100vh - 120px) !important;
        border-radius: 24px !important;
        padding: 16px !important;
    }

    .player-box h2{
        font-size: 18px !important;
        padding-left: 44px !important;
        margin-bottom: 12px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .player-box iframe{
        height: 240px !important;
        border-radius: 18px !important;
    }

    .close-player{
        left: 14px !important;
        top: 12px !important;
        width: 36px !important;
        height: 36px !important;
    }
}

@media (min-width: 821px){
    .mf-mobile-app-nav{
        display: none !important;
    }
}


/* =========================================================
   MUSIC FM — MOBILE NAVIGATION SYSTEM / STEP 2
   Hamburger + Side Drawer
========================================================= */

@media (min-width: 821px){
    .mf-mobile-menu-button,
    .mf-mobile-drawer,
    .mf-mobile-drawer-backdrop{
        display:none !important;
    }
}

@media (max-width: 820px){
    html.mf-mobile-menu-open,
    html.mf-mobile-menu-open body{
        overflow:hidden !important;
    }

    .mf-mobile-menu-button{
        position:fixed !important;
        top:13px !important;
        right:12px !important;
        z-index:1000001 !important;

        width:40px !important;
        height:40px !important;
        min-width:40px !important;
        min-height:40px !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:5px !important;

        border:1px solid rgba(255,255,255,.16) !important;
        border-radius:15px !important;
        background:rgba(7,13,23,.88) !important;
        color:#fff !important;

        box-shadow:0 12px 32px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.12) !important;
        backdrop-filter:blur(16px) !important;
        -webkit-backdrop-filter:blur(16px) !important;

        cursor:pointer !important;
        -webkit-tap-highlight-color:transparent !important;
    }

    .mf-mobile-menu-button span{
        width:18px !important;
        height:2px !important;
        border-radius:999px !important;
        background:#fff !important;
        display:block !important;
        transition:transform .22s ease, opacity .22s ease !important;
    }

    .mf-mobile-menu-button.active span:nth-child(1){
        transform:translateY(7px) rotate(45deg) !important;
    }

    .mf-mobile-menu-button.active span:nth-child(2){
        opacity:0 !important;
    }

    .mf-mobile-menu-button.active span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg) !important;
    }

    .topbar{
        padding-right:58px !important;
    }

    .topbar .nav{
        display:none !important;
    }

    .mf-mobile-drawer-backdrop{
        position:fixed !important;
        inset:0 !important;
        z-index:1000000 !important;
        background:rgba(2,8,23,.54) !important;
        backdrop-filter:blur(6px) !important;
        -webkit-backdrop-filter:blur(6px) !important;
        opacity:0 !important;
        transition:opacity .22s ease !important;
    }

    .mf-mobile-drawer-backdrop.active{
        opacity:1 !important;
    }

    .mf-mobile-drawer{
        position:fixed !important;
        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        z-index:1000002 !important;

        width:min(86vw, 360px) !important;
        padding:20px 16px calc(110px + env(safe-area-inset-bottom, 0px)) !important;

        direction:rtl !important;
        color:#fff !important;
        background:
            radial-gradient(circle at 20% 0%, rgba(34,184,255,.22), transparent 32%),
            linear-gradient(180deg, rgba(7,13,23,.98), rgba(3,7,13,.98)) !important;

        border-left:1px solid rgba(255,255,255,.12) !important;
        box-shadow:-24px 0 70px rgba(15,23,42,.34) !important;

        transform:translateX(105%) !important;
        transition:transform .26s cubic-bezier(.2,.8,.2,1) !important;

        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch !important;
    }

    .mf-mobile-drawer.active{
        transform:translateX(0) !important;
    }

    .mf-mobile-drawer-head{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:12px !important;
        padding:6px 2px 18px !important;
        margin-bottom:10px !important;
        border-bottom:1px solid rgba(255,255,255,.10) !important;
    }

    .mf-mobile-drawer-head strong{
        display:block !important;
        font-size:24px !important;
        line-height:1.1 !important;
        font-weight:950 !important;
        letter-spacing:-.03em !important;
    }

    .mf-mobile-drawer-head small{
        display:block !important;
        margin-top:5px !important;
        color:rgba(255,255,255,.58) !important;
        font-size:13px !important;
        font-weight:800 !important;
    }

    .mf-mobile-drawer-close{
        width:40px !important;
        height:40px !important;
        border:0 !important;
        border-radius:15px !important;
        display:grid !important;
        place-items:center !important;
        background:rgba(255,255,255,.10) !important;
        color:#fff !important;
        cursor:pointer !important;
    }

    .mf-mobile-drawer-links{
        display:grid !important;
        gap:8px !important;
    }

    .mf-mobile-drawer-links a{
        min-height:54px !important;
        display:flex !important;
        align-items:center !important;
        gap:12px !important;
        padding:0 14px !important;
        border-radius:18px !important;
        color:rgba(255,255,255,.88) !important;
        text-decoration:none !important;
        background:rgba(255,255,255,.055) !important;
        border:1px solid rgba(255,255,255,.075) !important;
        font-size:15px !important;
        font-weight:900 !important;
        transition:.22s ease !important;
    }

    .mf-mobile-drawer-links a:active,
    .mf-mobile-drawer-links a:hover{
        background:linear-gradient(135deg, rgba(34,184,255,.22), rgba(20,124,255,.14)) !important;
        color:#fff !important;
        transform:translateX(-3px) !important;
    }

    .mf-mobile-drawer-links i{
        width:24px !important;
        text-align:center !important;
        color:#59c7ff !important;
        font-size:17px !important;
    }

    .mf-mobile-drawer-foot{
        margin-top:18px !important;
        padding-top:16px !important;
        border-top:1px solid rgba(255,255,255,.10) !important;
        display:flex !important;
        gap:10px !important;
    }

    .mf-mobile-drawer-foot a{
        flex:1 1 0 !important;
        min-height:46px !important;
        border-radius:16px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        background:#fff !important;
        color:#147cff !important;
        font-size:14px !important;
        font-weight:950 !important;
        text-decoration:none !important;
    }
}

/* =========================================================
   MUSIC FM — MOBILE HEADER CLEANUP / STEP 3
   מטרה: במובייל נשארים רק לוגו + כפתור 3 קווים.
   התפריט העליון והאייקונים מוסתרים כדי למנוע 3 תפריטים.
========================================================= */
@media (max-width: 820px){
    .topbar .nav,
    .topbar .icons{
        display:none !important;
        visibility:hidden !important;
        pointer-events:none !important;
    }

    .topbar{
        min-height:72px !important;
        height:72px !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:flex-start !important;
        padding:12px 66px 12px 14px !important;
        margin:0 0 14px !important;
        gap:0 !important;
        overflow:hidden !important;
    }

    .topbar .logo{
        flex:1 1 auto !important;
        width:100% !important;
        min-width:0 !important;
        justify-content:flex-start !important;
    }

    .topbar .logo img{
        height:36px !important;
        max-width:170px !important;
        object-fit:contain !important;
    }

    .mf-mobile-menu-button{
        top:16px !important;
        right:14px !important;
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
        min-height:44px !important;
        border-radius:16px !important;
    }
}
/* =========================================================
   MUSIC FM — MOBILE HOME CLEAN FIX / 2026-05-28
   תיקון נקודתי בלבד: HERO + חדשות חמות + ניווט תחתון במובייל.
   אין שינוי ל-PHP ואין קובץ CSS חדש.
========================================================= */
@media (max-width: 820px){
    :root{
        --mf-mobile-nav-height: 66px !important;
        --mf-mobile-page-x: 10px !important;
    }

    body.mf-site-unified{
        overflow-x:hidden !important;
        padding-bottom: calc(var(--mf-mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 22px) !important;
    }

    .page{
        gap: 12px !important;
        padding-inline: 10px !important;
    }

    /* HERO — פחות ענק, בלי חיתוך ובלי טקסט שנכנס במספרים */
    body .hero.hero-slider{
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        margin: 6px 0 14px !important;
        padding: 0 !important;
        border-radius: 26px !important;
        overflow: hidden !important;
    }

    body .hero-slider .hero-content{
        min-height: auto !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        padding: 22px 16px 70px !important;
        text-align: center !important;
    }

    body .hero-slider .hero-image{
        order: 1 !important;
        width: clamp(138px, 43vw, 178px) !important;
        height: clamp(138px, 43vw, 178px) !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 auto 4px !important;
        border-radius: 50% !important;
    }

    body .hero-slider .hero-image img{
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 50% !important;
    }

    body .hero-slider .hero-text{
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
    }

    body .hero-slider .hero-meta{
        position: static !important;
        transform: none !important;
        inset: auto !important;
        width: min(100%, 330px) !important;
        margin: 4px auto 12px !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    body .hero-slider .hero-meta .tag,
    body .hero-slider .tag{
        min-height: 34px !important;
        padding: 0 12px !important;
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body .hero-slider .hero-text h5{
        margin: 0 0 8px !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    body .hero-slider .hero-text h1{
        position: static !important;
        top: auto !important;
        margin: 0 auto 10px !important;
        max-width: 100% !important;
        font-size: clamp(24px, 7.1vw, 31px) !important;
        line-height: 1.14 !important;
        letter-spacing: -0.04em !important;
        text-wrap: balance !important;
    }

    body .hero-slider .hero-text p{
        margin: 0 auto !important;
        max-width: 96% !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    body .hero-slider .hero-text a{
        min-height: 42px !important;
        padding: 0 16px !important;
        margin-top: 12px !important;
        font-size: 13px !important;
    }

    body .hero-slider .hero-dots{
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        bottom: 16px !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        width: auto !important;
        max-width: calc(100% - 34px) !important;
        height: 46px !important;
        padding: 6px 10px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.74) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        z-index: 20 !important;
    }

    body .hero-slider .hero-dots span{
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        font-weight: 950 !important;
    }

    /* HOT NEWS — כותרת וכפתורים לא עולים אחד על השני */
    .mf-news-section{
        margin: 4px 0 12px !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .mf-news-header{
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 0 12px !important;
        padding: 0 4px !important;
    }

    .mf-news-title{
        order: 2 !important;
        justify-self: end !important;
        margin: 0 !important;
        font-size: 23px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }

    .mf-news-nav{
        order: 1 !important;
        justify-self: start !important;
        margin: 0 !important;
        display: flex !important;
        gap: 8px !important;
    }

    .mf-news-arrow{
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        border-radius: 16px !important;
    }

    .mf-news-carousel-wrapper{
        padding: 2px 0 14px !important;
        overflow: hidden !important;
    }

    .mf-news-card{
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        border-radius: 24px !important;
    }

    .mf-news-image{
        height: 158px !important;
        margin: 10px 10px 0 !important;
        border-radius: 19px !important;
    }

    .mf-news-content{
        padding: 13px 14px 14px !important;
    }

    .mf-news-card-title{
        font-size: 17px !important;
        line-height: 1.32 !important;
    }

    .mf-news-description{
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    /* BOTTOM APP NAV — פחות ענק ופחות מסתיר תוכן */
    .mf-mobile-app-nav{
        right: 12px !important;
        left: 12px !important;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        height: 66px !important;
        padding: 6px !important;
        gap: 3px !important;
        border-radius: 24px !important;
    }

    .mf-mobile-app-nav a{
        height: 54px !important;
        min-height: 54px !important;
        gap: 3px !important;
        border-radius: 18px !important;
    }

    .mf-mobile-nav-icon{
        width: 22px !important;
        height: 21px !important;
    }

    .mf-mobile-nav-icon i{
        font-size: 17px !important;
    }

    .mf-mobile-app-nav small{
        font-size: 10px !important;
        line-height: 1.05 !important;
    }

.site-footer.mf-live-footer,
.site-footer{
    margin-bottom: 0 !important;
    padding-bottom: 12px !important;
}
}

@media (max-width: 380px){
    body .hero-slider .hero-text h1{
        font-size: 23px !important;
    }

    body .hero-slider .hero-image{
        width: 132px !important;
        height: 132px !important;
    }

    .mf-news-title{
        font-size: 21px !important;
    }

    .mf-mobile-app-nav small{
        font-size: 9.5px !important;
    }
}

/* =========================================================
   MOBILE FIX — APP BOTTOM NAV COMPACT
   תיקון מובייל בלבד לתפריט התחתון כדי שלא יחנוק את המסך
========================================================= */
@media (max-width: 820px){
    :root{ --mf-mobile-nav-height:64px !important; }

    .mf-mobile-app-nav{
        right:12px !important;
        left:12px !important;
        bottom:calc(7px + env(safe-area-inset-bottom, 0px)) !important;
        height:64px !important;
        min-height:64px !important;
        padding:6px !important;
        gap:2px !important;
        border-radius:23px !important;
    }

    .mf-mobile-app-nav a{
        height:52px !important;
        min-height:52px !important;
        border-radius:17px !important;
        gap:3px !important;
    }

    .mf-mobile-nav-icon{
        width:21px !important;
        height:20px !important;
    }

    .mf-mobile-nav-icon i{
        font-size:16px !important;
    }

    .mf-mobile-app-nav small{
        font-size:9.5px !important;
        line-height:1 !important;
        font-weight:900 !important;
    }
}
@media (max-width: 820px){
    .mf-mobile-app-nav{
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 999999 !important;
    }

    .mf-mobile-app-nav a,
    .mf-mobile-app-nav *{
        pointer-events: auto !important;
    }

    .mf-player,
    .playlist-player,
    .music-player,
    .player-container,
    .floating-player{
        z-index: 99990 !important;
    }

    body.mf-site-unified{
        padding-bottom: 105px !important;
    }
}
/* Force desktop background on mobile */
@media (max-width: 820px){

    html,
    body,
    body.mf-site-unified,
    .mf-site-main,
    .site-shell,
    .page-shell{
        background: inherit !important;
        background-color: #f7f9fc !important;
    }


}

@media (max-width: 820px){
    body.mf-site-unified{
        padding-bottom: 0 !important;
    }

    .site-footer,
    .site-footer.mf-live-footer{
        margin-bottom: 0 !important;
        padding-bottom: 24px !important;
    }

    .mf-mobile-app-nav{
        bottom: calc(7px + env(safe-area-inset-bottom, 0px)) !important;
    }
}