/* =========================================================
   PAMIĘTAMY APP
   GLOBALNE MENU MOBILE - GLASS
   + PWA
   + SOFT GLASS PRESS
   ========================================================= */


/* =========================================================
   MOBILE - MENU GLASS
   ========================================================= */

@media only screen and (max-width: 768px) {

    /* =====================================================
       1. ZEWNĘTRZNY DRAWER APEX
       ===================================================== */

    .t-Body-nav {
        width: 160px !important;
        max-width: calc(100vw - 16px) !important;

        background: transparent !important;
        background-color: transparent !important;

        border: none !important;
        box-shadow: none !important;

        overflow: visible !important;

        pointer-events: none !important;

        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }


    /* =====================================================
       2. MENU ZAMKNIĘTE
       ===================================================== */

    body:not(.js-navExpanded)
    .t-Body-nav
    .t-TreeNav {
        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;

        transition: none !important;
    }


    /* =====================================================
       3. MENU OTWARTE
       ===================================================== */

    body.js-navExpanded
    .t-Body-nav
    .t-TreeNav {
        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;
    }


    /* =====================================================
       4. SZKLANA KARTA
       ===================================================== */

    .t-Body-nav .t-TreeNav {
        width: 200px !important;

        max-width:
            calc(100vw - 34px) !important;

        height: auto !important;
        min-height: 0 !important;

        margin:
            8px 0 8px 8px !important;

        padding:
            7px !important;

        box-sizing:
            border-box !important;


        background:
            rgba(18,18,18,0.48) !important;

        backdrop-filter:
            blur(18px)
            saturate(150%) !important;

        -webkit-backdrop-filter:
            blur(18px)
            saturate(150%) !important;


        border:
            1px solid rgba(255,255,255,0.13) !important;

        border-radius:
            18px !important;


        box-shadow:
            0 12px 32px rgba(0,0,0,0.32),
            inset 0 1px 0 rgba(255,255,255,0.07) !important;


        /*
         * Karta pozostaje przycięta do swojego kształtu.
         * Nie ustawiamy tu overflow:visible.
         */
        overflow:
            hidden !important;
    }


    /* =====================================================
       5. LISTA
       ===================================================== */

    .t-Body-nav .t-TreeNav-list {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        background:
            transparent !important;

        pointer-events:
            auto !important;
    }


    .t-Body-nav
    .t-TreeNav-list > li {
        position: relative !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        background:
            transparent !important;

        z-index:
            1 !important;
    }


    /* =====================================================
       6. POZYCJE MENU
       ===================================================== */

    .t-Body-nav .t-TreeNav-a {
        width: 100% !important;

        min-height:
            46px !important;

        margin:
            2px 0 !important;

        padding:
            0 12px !important;

        box-sizing:
            border-box !important;

        display:
            flex !important;

        align-items:
            center !important;

        background:
            rgba(255,255,255,0.025) !important;

        border:
            1px solid transparent !important;

        border-radius:
            12px !important;

        color:
            rgba(255,255,255,0.90) !important;

        text-decoration:
            none !important;

        pointer-events:
            auto !important;
    }


    /* =====================================================
       7. AKTYWNA POZYCJA
       ===================================================== */

    .t-Body-nav
    .is-current > .t-TreeNav-a,

    .t-Body-nav
    .is-selected > .t-TreeNav-a {
        color:
            #C2A55E !important;

        background:
            rgba(194,165,94,0.13) !important;

        border-color:
            rgba(194,165,94,0.22) !important;
    }


    /* =====================================================
       8. IKONY
       ===================================================== */

    .t-Body-nav
    .t-TreeNav-icon {
        flex:
            0 0 auto !important;

        color:
            rgba(255,255,255,0.68) !important;
    }


    .t-Body-nav
    .is-current > .t-TreeNav-a
    .t-TreeNav-icon,

    .t-Body-nav
    .is-selected > .t-TreeNav-a
    .t-TreeNav-icon {
        color:
            #C2A55E !important;
    }


    /* =====================================================
       9. TEKST
       ===================================================== */

    .t-Body-nav
    .t-TreeNav-label {
        min-width:
            0 !important;

        color:
            inherit !important;

        font-weight:
            500 !important;

        white-space:
            normal !important;

        overflow:
            visible !important;

        text-overflow:
            clip !important;
    }


    /* =====================================================
       10. TAP MENU
       ===================================================== */

    .t-Body-nav
    .t-TreeNav-a:active {
        background:
            rgba(255,255,255,0.12) !important;

        border-color:
            rgba(255,255,255,0.15) !important;
    }
}


/* =========================================================
   MOBILE - BRAK NIEBIESKICH RAMEK
   ========================================================= */

@media only screen and (max-width: 768px) {

    #t_Button_navControl,
    #t_Button_navControl:hover,
    #t_Button_navControl:active,
    #t_Button_navControl:focus,
    #t_Button_navControl:focus-visible,

    .t-Header button,
    .t-Header button:hover,
    .t-Header button:active,
    .t-Header button:focus,
    .t-Header button:focus-visible,

    .t-Header a,
    .t-Header a:hover,
    .t-Header a:active,
    .t-Header a:focus,
    .t-Header a:focus-visible,

    .t-TreeNav a,
    .t-TreeNav a:hover,
    .t-TreeNav a:active,
    .t-TreeNav a:focus,
    .t-TreeNav a:focus-visible,

    .t-TreeNav
    .a-TreeView-content,
    .t-TreeNav
    .a-TreeView-content:hover,
    .t-TreeNav
    .a-TreeView-content:active,
    .t-TreeNav
    .a-TreeView-content:focus,
    .t-TreeNav
    .a-TreeView-content:focus-visible {
        outline:
            none !important;

        box-shadow:
            none !important;

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


    .t-Body-nav,
    .t-Body-nav *,
    .t-TreeNav,
    .t-TreeNav *,
    .a-TreeView,
    .a-TreeView * {
        -webkit-tap-highlight-color:
            transparent !important;
    }


    .t-TreeNav
    .a-TreeView-row,
    .t-TreeNav
    .a-TreeView-row:active,
    .t-TreeNav
    .a-TreeView-row:focus,
    .t-TreeNav
    .a-TreeView-row:focus-visible {
        outline:
            none !important;

        box-shadow:
            none !important;
    }
}


/* =========================================================
   MOBILE - HEADER + DIALOG PWA
   ========================================================= */

@media only screen and (max-width: 768px) {

    .t-Header button,
    .t-Header a,
    .t-Header .t-Button {
        -webkit-tap-highlight-color:
            transparent !important;
    }


    .t-Header button:focus,
    .t-Header button:focus-visible,
    .t-Header a:focus,
    .t-Header a:focus-visible,
    .t-Header .t-Button:focus,
    .t-Header .t-Button:focus-visible {
        outline:
            none !important;

        box-shadow:
            none !important;
    }


    .ui-dialog,
    .ui-dialog *,
    .a-Dialog,
    .a-Dialog * {
        -webkit-tap-highlight-color:
            transparent !important;
    }


    .ui-dialog
    .ui-dialog-titlebar-close,

    .ui-dialog
    .ui-dialog-titlebar-close:hover,

    .ui-dialog
    .ui-dialog-titlebar-close:active,

    .ui-dialog
    .ui-dialog-titlebar-close:focus,

    .ui-dialog
    .ui-dialog-titlebar-close:focus-visible,

    .a-Dialog
    .ui-dialog-titlebar-close,

    .a-Dialog
    .ui-dialog-titlebar-close:hover,

    .a-Dialog
    .ui-dialog-titlebar-close:active,

    .a-Dialog
    .ui-dialog-titlebar-close:focus,

    .a-Dialog
    .ui-dialog-titlebar-close:focus-visible {
        outline:
            none !important;

        outline-width:
            0 !important;

        box-shadow:
            none !important;

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


    .ui-dialog button:focus,
    .ui-dialog button:focus-visible,
    .ui-dialog a:focus,
    .ui-dialog a:focus-visible,
    .a-Dialog button:focus,
    .a-Dialog button:focus-visible,
    .a-Dialog a:focus,
    .a-Dialog a:focus-visible {
        outline:
            none !important;

        box-shadow:
            none !important;
    }
}


/* =========================================================
   PWA - OVERLAY
   ========================================================= */

.ui-widget-overlay {
    position:
        fixed !important;

    inset:
        0 !important;

    width:
        100vw !important;

    height:
        100dvh !important;

    background:
        rgba(0,0,0,0.68) !important;

    opacity:
        1 !important;

    backdrop-filter:
        blur(2px) !important;

    -webkit-backdrop-filter:
        blur(2px) !important;

    z-index:
        10000 !important;
}


/* =========================================================
   DIALOG PWA
   ========================================================= */

.ui-dialog {
    position:
        fixed !important;

    z-index:
        10001 !important;
}


/* =========================================================
   X DIALOGU
   ========================================================= */

.ui-dialog
.ui-dialog-titlebar-close,

.ui-dialog
.ui-dialog-titlebar-close:focus,

.ui-dialog
.ui-dialog-titlebar-close:focus-visible,

.ui-dialog
.ui-dialog-titlebar-close:active {
    outline:
        none !important;

    box-shadow:
        none !important;

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


/* =========================================================
   MOBILE - SOFT GLASS PRESS
   MENU + DOLNY PASEK + MODALE
   ========================================================= */

@media only screen and (max-width: 768px) {

    /* =====================================================
       ELEMENTY OBSŁUGIWANE
       ===================================================== */

    .t-TreeNav
    .a-TreeView-content,

    #memActions #SAVE,
    #memActions #VIEW_PROFILE,
    #memActions #DELETE,

    #graveMapSearchButton,

    .mem-delete-cancel,
    .mem-delete-confirm,

    .mem-required-ok {
        position:
            relative !important;

        -webkit-tap-highlight-color:
            transparent !important;

        outline:
            none !important;

        transform:
            translate3d(0,0,0);

        transition:
            transform
            110ms
            cubic-bezier(.2,.8,.2,1),

            filter
            110ms
            ease !important;
    }


    /* =====================================================
       AKTYWNY TAP
       ===================================================== */

    .pam-press-active {
        transform:
            translate3d(0,0,0)
            scale(0.965) !important;

        filter:
            brightness(1.08) !important;
    }


    /* =====================================================
       SZKLANA WARSTWA
       ===================================================== */

    .pam-press-glass {
        position:
            absolute !important;

        left:
            50% !important;

        top:
            50% !important;

        width:
            108% !important;

        height:
            130% !important;

        transform:
            translate3d(-50%, -50%, 0)
            scale(0.86);

        transform-origin:
            center center;

        border-radius:
            999px;

        pointer-events:
            none !important;

        z-index:
            50 !important;

        opacity:
            0;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,0.17),
                rgba(255,255,255,0.07) 48%,
                rgba(255,255,255,0.035)
            );

        border:
            1px solid
            rgba(255,255,255,0.16);

        box-shadow:
            inset 0 1px 0
            rgba(255,255,255,0.24),

            0 4px 14px
            rgba(0,0,0,0.10);

        will-change:
            transform,
            opacity;

        animation:
            pamPressGlassIn
            260ms
            cubic-bezier(.16,1,.3,1)
            forwards;
    }


    /* =====================================================
       ZANIKANIE
       ===================================================== */

    .pam-press-glass.pam-press-out {
        animation:
            pamPressGlassOut
            220ms
            cubic-bezier(.16,1,.3,1)
            forwards !important;
    }


    /* =====================================================
       MENU - WNĘTRZE NIE PRZYCINA EFEKTU
       ===================================================== */

    .t-TreeNav ul,
    .t-TreeNav li,
    .a-TreeView,
    .a-TreeView-row,
    .a-TreeView-content {
        overflow:
            visible !important;
    }


    /* =====================================================
       MENU - NORMALNE WARSTWY
       ===================================================== */

    .t-TreeNav li {
        position:
            relative !important;

        z-index:
            1 !important;
    }


    /* =====================================================
       MENU - TAPNIĘTY WIERSZ NAD SĄSIADAMI
       ===================================================== */

    .t-TreeNav
    li.pam-press-row-active {
        z-index:
            100 !important;
    }


    .t-TreeNav
    li.pam-press-row-active
    .a-TreeView-content {
        z-index:
            101 !important;
    }


    .t-TreeNav
    li.pam-press-row-active
    .pam-press-glass {
        z-index:
            102 !important;
    }


    /* =====================================================
       DOLNY PASEK
       ===================================================== */

    #memActions {
        overflow:
            visible !important;
    }


    /* =====================================================
       MODALE
       ===================================================== */

    #memDeleteOverlay,
    .mem-delete-dialog,
    .mem-delete-actions,

    #memRequiredOverlay,
    .mem-required-dialog,
    .mem-required-actions {
        overflow:
            visible !important;
    }


    /* =====================================================
       BRAK FOCUSÓW
       ===================================================== */

    .t-TreeNav
    .a-TreeView-content:focus,

    .t-TreeNav
    .a-TreeView-content:focus-visible,

    #memActions #SAVE:focus,
    #memActions #SAVE:focus-visible,

    #memActions #VIEW_PROFILE:focus,
    #memActions #VIEW_PROFILE:focus-visible,

    #memActions #DELETE:focus,
    #memActions #DELETE:focus-visible,

    .mem-delete-cancel:focus,
    .mem-delete-cancel:focus-visible,

    .mem-delete-confirm:focus,
    .mem-delete-confirm:focus-visible,

#graveMapSearchButton:focus,
#graveMapSearchButton:focus-visible,

    .mem-required-ok:focus,
    .mem-required-ok:focus-visible {
        outline:
            none !important;

        box-shadow:
            none !important;

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


/* =========================================================
   ANIMACJA WEJŚCIA
   ========================================================= */

@keyframes pamPressGlassIn {

    0% {
        opacity:
            0;

        transform:
            translate3d(-50%, -50%, 0)
            scale(0.86);
    }


    60% {
        opacity:
            1;

        transform:
            translate3d(-50%, -50%, 0)
            scale(1.025);
    }


    100% {
        opacity:
            0.92;

        transform:
            translate3d(-50%, -50%, 0)
            scale(1);
    }
}


/* =========================================================
   ANIMACJA WYJŚCIA
   ========================================================= */

@keyframes pamPressGlassOut {

    from {
        opacity:
            0.92;

        transform:
            translate3d(-50%, -50%, 0)
            scale(1);
    }


    to {
        opacity:
            0;

        transform:
            translate3d(-50%, -50%, 0)
            scale(1.08);
    }
}


/* =========================================================
   APP 100 - GLOBALNY HEADER
   CZARNA GÓRA -> PRZEZROCZYSTY DÓŁ
   ========================================================= */

.t-Header-branding {
    position:
        relative !important;

    background:
        linear-gradient(
            to bottom,
            rgba(10, 10, 10, 1.00) 0%,
            rgba(10, 10, 10, 0.92) 20%,
            rgba(10, 10, 10, 0.72) 42%,
            rgba(10, 10, 10, 0.45) 62%,
            rgba(10, 10, 10, 0.20) 80%,
            rgba(10, 10, 10, 0.06) 92%,
            rgba(10, 10, 10, 0.00) 100%
        ) !important;

    border:
        none !important;

    border-bottom:
        none !important;

    box-shadow:
        none !important;

    overflow:
        visible !important;

    z-index:
        2 !important;
}


/* =========================================================
   BEZ DODATKOWEGO FADE POD BELKĄ
   ========================================================= */

.t-Header-branding::after {
    content:
        none !important;

    display:
        none !important;
}


/* =========================================================
   ZEWNĘTRZNY HEADER APEX
   ========================================================= */

.t-Header {
    background:
        transparent !important;

    background-color:
        transparent !important;

    border:
        none !important;

    box-shadow:
        none !important;
}


/* =========================================================
   NAV POD HEADEREM
   ========================================================= */

.t-Header-nav {
    background:
        transparent !important;

    background-color:
        transparent !important;

    border:
        none !important;

    box-shadow:
        none !important;
}