/*
|--------------------------------------------------------------------------
| STUDIO FINDER — MOBILE WEB = PWA PARITY
| Build: SF_MOBILE_WEB_PWA_PARITY_V1_20260819
|--------------------------------------------------------------------------
| Quando la shell telefono V2/V3 è attiva, Safari/Chrome mobile usa la stessa
| UI interna della PWA: topbar, tabbar, contenuto, overlay e navigazione.
| Il browser chrome esterno (URL bar/status UI) resta naturalmente del browser.
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    html.sf-mode-mobile-web.sf-iphone-app-v2,
    html.sf-mode-mobile-web.sf-iphone-app-v2 body {
        min-height: 100%;
        background: var(--sf-iphone-bg, #F6F6F6) !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Disattiva il vecchio drawer browser-mobile.
    |--------------------------------------------------------------------------
    */
    html.sf-mode-mobile-web.sf-iphone-app-v2 .sf-artist-sidebar,
    html.sf-mode-mobile-web.sf-iphone-app-v2 .sf-studio-sidebar,
    html.sf-mode-mobile-web.sf-iphone-app-v2 .sidebar.sf-artist-sidebar,
    html.sf-mode-mobile-web.sf-iphone-app-v2 .sf-artist-menu-button,
    html.sf-mode-mobile-web.sf-iphone-app-v2 .sf-studio-menu-button,
    html.sf-mode-mobile-web.sf-iphone-app-v2 .sf-artist-menu-overlay,
    html.sf-mode-mobile-web.sf-iphone-app-v2 .sf-studio-menu-overlay,
    html.sf-mode-mobile-web.sf-iphone-app-v2 .sf-studio-pwa-more-backdrop,
    html.sf-mode-mobile-web.sf-iphone-app-v2 .sf-studio-pwa-more-sheet,
    html.sf-mode-mobile-web.sf-iphone-app-v2 .mobile-menu-toggle,
    html.sf-mode-mobile-web.sf-iphone-app-v2 [data-mobile-menu-toggle] {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Stessi spazi e stessa viewport contenuto della PWA.
    |--------------------------------------------------------------------------
    */
    html.sf-mode-mobile-web.sf-iphone-app-v2 .app,
    html.sf-mode-mobile-web.sf-iphone-app-v2 .app-layout,
    html.sf-mode-mobile-web.sf-iphone-app-v2 .dashboard-layout {
        display: block !important;
        min-height: 100dvh !important;
    }

    html.sf-mode-mobile-web.sf-iphone-app-v2 .content,
    html.sf-mode-mobile-web.sf-iphone-app-v2 .main-content,
    html.sf-mode-mobile-web.sf-iphone-app-v2 main.content,
    html.sf-mode-mobile-web.sf-iphone-app-v2 .sf-studio-main,
    html.sf-mode-mobile-web.sf-iphone-app-v2 .app-layout > main.content,
    html.sf-mode-mobile-web.sf-iphone-app-v2 .app > main.content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding:
            calc(var(--sf-iphone-topbar-height, 58px) + 13px)
            var(--sf-iphone-page-x, 14px)
            calc(
                var(--sf-iphone-tabbar-height, 62px)
                + var(--sf-pwa-safe-bottom, 0px)
                + 24px
            )
            !important;
        overflow: visible !important;
    }

    /*
    |--------------------------------------------------------------------------
    | La topbar e la bottom tab bar generate da pwa-app.js sono authoritative.
    |--------------------------------------------------------------------------
    */
    html.sf-mode-mobile-web.sf-iphone-app-v2 .sf-iphone-topbar,
    html.sf-mode-mobile-web.sf-iphone-app-v2 .sf-iphone-tabbar {
        display: grid !important;
    }

    html.sf-mode-mobile-web.sf-iphone-app-v2 .sf-iphone-more-backdrop,
    html.sf-mode-mobile-web.sf-iphone-app-v2 .sf-iphone-more-sheet {
        visibility: visible;
    }

    /*
    |--------------------------------------------------------------------------
    | Input/touch come PWA.
    |--------------------------------------------------------------------------
    */
    html.sf-mode-mobile-web.sf-iphone-app-v2 input,
    html.sf-mode-mobile-web.sf-iphone-app-v2 select,
    html.sf-mode-mobile-web.sf-iphone-app-v2 textarea,
    html.sf-mode-mobile-web.sf-iphone-app-v2 .form-control {
        min-height: 46px;
        border-radius: 13px !important;
        font-size: 16px !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Non mostriamo il launcher flottante "Installa app" sopra la tabbar.
    | L'installazione resta possibile dal browser.
    |--------------------------------------------------------------------------
    */
    html.sf-mode-mobile-web.sf-iphone-app-v2 .sf-pwa-launcher {
        display: none !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Evita padding browser-mobile legacy sulle pagine Hub / News.
    |--------------------------------------------------------------------------
    */
    html.sf-mode-mobile-web.sf-iphone-app-v2 .hub-main:not(.public),
    html.sf-mode-mobile-web.sf-iphone-app-v2 .sf-news-main {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding:
            calc(var(--sf-iphone-topbar-height, 58px) + 13px)
            var(--sf-iphone-page-x, 14px)
            calc(
                var(--sf-iphone-tabbar-height, 62px)
                + var(--sf-pwa-safe-bottom, 0px)
                + 24px
            )
            !important;
    }
}