@charset "utf-8";



@media (max-width: 480px) {

    /* blokada przewijania strony pod otwartym menu */
    body.menu_mobile_bez_scrolla {
        overflow: hidden !important;
        touch-action: none;
    }

    /* pełnoekranowy panel – top i height ustawia JS */
    .menu_mobile_panel {
        position: fixed;
        left: 0;
        width: 100vw;
        height: 0;
        z-index: 99990;

        background-color: #FFFFFF;

        visibility: hidden;
        opacity: 0;
        pointer-events: none;

        transform: translateY(10px);

        transition:
            opacity 0.25s ease,
            transform 0.25s ease,
            visibility 0.25s ease;

        box-sizing: border-box;
        overflow: hidden;
    }

    .menu_mobile_panel.otwarte {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* przewijanie tylko wnętrza menu, jeżeli ekran jest niski */
    .menu_mobile_panel_scroll {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

        box-sizing: border-box;

        padding: 30px 30px 40px;
    }

    /* =====================================================
       GÓRNY WIERSZ – E-LEARNING + KOSZYK
    ===================================================== */

    .menu_mobile_panel_gora {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .menu_mobile_panel_platforma {
        min-width: 0;
        flex: 1;

        display: flex;
        align-items: center;
        gap: 10px;

        min-height: 52px;
        padding: 10px;

        border-radius: 20px;
        background-color: #EFEFEF;

        color: #000000 !important;
        text-decoration: none !important;

        font-size: 14px;
        line-height: 1.15;
        font-weight: 500;

        box-sizing: border-box;
    }

    .menu_mobile_panel_platforma img {
        width: 20px;
        height: 20px;
        object-fit: contain;
        flex: 0 0 auto;
    }

    .menu_mobile_panel_koszyk {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;

        display: flex;
        align-items: center;
        justify-content: center;

        text-decoration: none !important;
        box-sizing: border-box;
    }

    .menu_mobile_panel_koszyk img {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

    /* =====================================================
       LINIA
    ===================================================== */

    .menu_mobile_panel_linia {
        width: 100%;
        height: 1px;
        background-color: #D8D8D8;
        margin: 70px 0 48px;
    }

    /* =====================================================
       GŁÓWNE LINKI
    ===================================================== */

    .menu_mobile_panel_oferta {
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 12px 20px;

        background-color: #F1F1F1;
        border-radius: 34px;

        color: #071E86 !important;
        text-decoration: none !important;

        font-family: "Roc Grotesk Medium";
        font-size: 18px;
        line-height: 1.1;

        box-sizing: border-box;
    }
    .menu_mobile_panel_oferta:hover {
        background-color: #071E86;
        color: #F1F1F1 !important;
    }
    
    .menu_mobile_panel_oferta:hover .menu_mobile_panel_oferta_strzalka {
        border-top: 3px solid #F1F1F1;
        border-right: 3px solid #F1F1F1;        
    }

    .menu_mobile_panel_oferta_strzalka {
        width: 14px;
        height: 14px;

        border-top: 3px solid #33468F;
        border-right: 3px solid #33468F;

        transform: rotate(45deg);

        margin-right: 8px;
        flex: 0 0 14px;
    }
    
    .menu_mobile_panel_oferta_strzalka:hover {
        border-top: 3px solid #F1F1F1;
        border-right: 3px solid #F1F1F1;        
    }

    .menu_mobile_panel_linki {
        width: 100%;
        margin-top: 34px;
    }

    .menu_mobile_panel_link {
        display: block;
        width: 100%;

        padding: 5px 0;
        margin-bottom: 8px;

        color: #071E86 !important;
        text-decoration: none !important;

        font-family: "Roc Grotesk Medium";
        font-size: 18px;
        line-height: 1.2;
    }

    .menu_mobile_panel_link:hover,
    .menu_mobile_panel_link:focus {
        text-decoration: underline !important;
    }

    /* =====================================================
       CTA
    ===================================================== */

    .menu_mobile_panel_cta {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-height: 48px;

        margin-top: 28px;
        padding: 12px 10px;

        border-radius: 20px;

        background: linear-gradient(90deg, #041899 0%, #2E60D5 100%);

        color: #FFFFFF !important;
        text-decoration: none !important;

        font-size: 16px;
        line-height: 1.2;
        font-weight: bold;

        box-sizing: border-box;
    }

    .menu_mobile_panel_cta:hover,
    .menu_mobile_panel_cta:focus {
        background: linear-gradient(90deg, #DBB36B 0%, #F7CD80 100%);
        color: #000000 !important;
    }

    /* =====================================================
       DOLNE LINKI
    ===================================================== */

    .menu_mobile_panel_dol {
        width: 100%;
        margin-top: 55px;
    }

    .menu_mobile_panel_link_maly {
        display: block;

        padding: 12px 0;

        color: #000000 !important;
        text-decoration: none !important;

        font-size: 16px;
        line-height: 1.2;
        font-weight: 400;
    }

    .menu_mobile_panel_link_maly + .menu_mobile_panel_link_maly {
        margin-top: 12px;
    }

    .menu_mobile_panel_link_maly:hover,
    .menu_mobile_panel_link_maly:focus {
        text-decoration: underline !important;
    }

    /* =====================================================
       SOCIAL MEDIA
    ===================================================== */

    .menu_mobile_panel_social {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 24px;

        width: 100%;
        margin-top: 60px;
        padding-bottom: 10px;
    }

    .menu_mobile_panel_social a {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 38px;
        height: 38px;

        text-decoration: none !important;
    }

    .menu_mobile_panel_social img {
        display: block;
        max-width: 28px;
        max-height: 28px;
        object-fit: contain;
    }


    .menu_mobile_4_button {
        position: relative;
        cursor: pointer;
    }

    .menu_mobile_4_button_linia1,
    .menu_mobile_4_button_linia2,
    .menu_mobile_4_button_linia3 {
        transform-origin: center;
        transition:
            transform 0.25s ease,
            opacity 0.20s ease;
    }

    .menu_mobile_4_button.otwarte .menu_mobile_4_button_linia1 {
        transform: translateY(11px) rotate(45deg);
    }

    .menu_mobile_4_button.otwarte .menu_mobile_4_button_linia2 {
        opacity: 0;
    }

    .menu_mobile_4_button.otwarte .menu_mobile_4_button_linia3 {
        transform: translateY(-11px) rotate(-45deg);
    }

}

/* =========================================================
   ROZWIJANA OFERTA EDUKACYJNA
========================================================= */

.menu_mobile_panel_oferta_submenu {
    display: grid;
    grid-template-rows: 0fr;

    width: 100%;

    opacity: 0;

    transition:
        grid-template-rows 0.3s ease,
        opacity 0.25s ease;
}


/* otwarte submenu */

.menu_mobile_panel_oferta_submenu.otwarte {
    grid-template-rows: 1fr;
    opacity: 1;
}


/* wewnętrzny kontener */

.menu_mobile_panel_oferta_submenu_srodek {
    min-height: 0;
    overflow: hidden;

    padding-left: 20px;
    padding-right: 20px;

    transition:
        padding-top 0.3s ease,
        padding-bottom 0.3s ease;
}


.menu_mobile_panel_oferta_submenu.otwarte
.menu_mobile_panel_oferta_submenu_srodek {
    padding-top: 20px;
    padding-bottom: 10px;
}


/* pojedynczy link */

.menu_mobile_panel_oferta_link {
    display: flex;
    align-items: center;

    width: 100%;

    padding: 11px 0;

    color: #071E86 !important;
    text-decoration: none !important;

    font-size: 18px;
    line-height: 1.25;

    box-sizing: border-box;
}


.menu_mobile_panel_oferta_link:hover,
.menu_mobile_panel_oferta_link:focus {
    color: #000 !important;
}


/* strzałka przy linku */

.menu_mobile_panel_oferta_link .glyphicon {
    margin-right: 12px;

    color: #DBB36B !important;

    font-size: 12px;
}


/* =========================================================
   STRZAŁKA GŁÓWNEGO BUTTONA
========================================================= */

.menu_mobile_panel_oferta_strzalka {
    transition: transform 0.3s ease;
}


/* po otwarciu strzałka skierowana w dół */

.menu_mobile_panel_oferta.otwarte
.menu_mobile_panel_oferta_strzalka {
    transform: rotate(135deg);
}



@media (min-width: 481px) {

    .menu_mobile_panel {
        display: none !important;
    }

}