/* ==========================================================================
   1. GŁÓWNY PASEK NAWIGACJI & KOLORY TŁA
   ========================================================================== */

/* Bazowy wygląd paska z czerwonym kolorem startowym */
.navbar-custom {
  height: 100px;
  position: relative;
  z-index: 1030 !important;
  background-color: var(--WIT);
  box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.25);
  transition: background-color 0.35s ease; /* Płynna zmiana koloru tła */
}

/* Stan po otwarciu dowolnego menu lub hamburgera - zmiana na ciemny kolor */
.navbar-custom.menu-open {
  background-color: #0b0c10 !important; 
}

.navbar-collapse {
    flex-grow: 0;
}

/* Stabilizacja scrolla - zapobiega przesuwaniu/skakaniu strony w bok na desktopie */
body.menu-open.overflow-hidden {
  /*padding-right: var(--bs-scrollbar-width, 15px);*/
}
body.menu-open.overflow-hidden .navbar-custom {
  padding-right: var(--bs-scrollbar-width, 0px) !important;
}


/* ==========================================================================
   2. AKORDEON POZIOM 1
   ========================================================================== */

.main-accordion-toggle {
  position: relative;
  cursor: pointer;
  padding-right: 25px !important;
}

/* Wnętrze rozwijanego panelu Mega Menu */
.level-1 {
  position: absolute;
  left: 0;
  width: 100%;
  background-color: #0b0c10;
  z-index: 1025;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* --- [DESKTOP]: Tradycyjna strzałka ▼ dla Poziomu 1 --- */
@media (min-width: 992px) {
  .main-accordion-toggle:not(.no-toggle)::after {
    content: "▼";
    font-size: 0.65rem;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
  }
  .main-accordion-toggle:not(.collapsed)::after {
    transform: translateY(-50%) rotate(180deg);
  }
}

/* --- [MOBILE]: Animowany Plus i Minus dla Poziomu 1 --- */
@media (max-width: 991.98px) {
  .main-accordion-toggle:not(.no-toggle)::before,
  .main-accordion-toggle:not(.no-toggle)::after {
    content: "";
    position: absolute;
    top: 50%;
    background-color: var(--szary-80);
    transition: transform 0.25s ease-in-out, opacity 0.2s ease-in-out;
  }

  /* Pozioma linia (stały minus) */
  .main-accordion-toggle:not(.no-toggle)::before {
    right: 10px;
    width: 14px;
    height: 2px;
    margin-top: -1px;
    z-index: 2;
  }

  /* Pionowa linia (tworzy plus) */
  .main-accordion-toggle:not(.no-toggle)::after {
    right: 16px;
    width: 2px;
    height: 14px;
    margin-top: -7px;
    z-index: 2;
  }
  
  /* Animacja ukrywania pionowej linii */
  .main-accordion-toggle:not(.collapsed)::after {
    transform: rotate(90deg);
    opacity: 0;
  }
  .main-accordion-toggle:not(.collapsed)::before {
    transform: rotate(180deg);
  }
}


/* ==========================================================================
   3. GLOBALNE STYLE AKORDEONU POZIOMU 2 (Nagłówki class="menu-header")
   ========================================================================== */

.dropdown-header-accordion {
  margin-bottom: 6px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s;
  user-select: none;
  position: relative;
}

.dropdown-header-accordion {
  font-size: 14px;
  color: var(--szary-30);
  border-top: 1px solid var(--szary-10);
  margin: 5px 0 0;
  padding: 10px 0 8px;
}

.desktop .dropdown-header-accordion {
  border-top: 0;
}

#studia .dropdown-header-accordion {
  font-size: 14px;
  color: var(--szary-30);
  border-top: 0px solid var(--szary-10);
  margin: 5px 0 8px;
  padding: 10px 0 8px;
}

#studia .panel_header {
  margin: 8px 0;
  padding: 8px 0;
}
.desktop #studia .panel_header {
  margin: 0;
}

#studia #Grafika .dropdown-header-accordion {
    color: var(--GRAFIKA, #FE8F07);
    border-bottom: 1px solid var(--GRAFIKA, #FE8F07);
}

#studia #Informatyka .dropdown-header-accordion {
    color: var(--INFORMATYKA, #00A23D);
    border-bottom: 1px solid var(--INFORMATYKA);
}

#studia #ITZ .dropdown-header-accordion {
    color: var(--ITZ, #0255DE);
    border-bottom: 1px solid var(--ITZ);
}

#studia #Zarzadzanie .dropdown-header-accordion {
    color: var(--ZARZADZANIE, #8A42D4);
    border-bottom: 1px solid var(--ZARZADZANIE);
}

#studia #Podyplomowe .dropdown-header-accordion {
    color: var(--PODYPLOMOWE, #808080);
    border-bottom: 1px solid var(--PODYPLOMOWE);
}



/* Konstrukcja kontenera na animowane linie +/- dla h6 */
.dropdown-header-accordion::after {
  content: "";
  position: relative;
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
}

/* Pozioma linia (stały minus) */
.dropdown-header-accordion::before {
  content: "";
  position: absolute;
  right: 10px;
  width: 14px;
  height: 2px;
  background-color: var(--szary-90);
  transition: transform 0.25s ease-in-out;
  z-index: 2;
}

/* Pionowa linia (tworzy plus) */
.dropdown-header-accordion::after {
  content: "";
  position: absolute;
  right: 16px;
  width: 2px;
  height: 14px;
  background-color: var(--szary-90);
  transition: transform 0.25s ease-in-out, opacity 0.2s ease-in-out;
  z-index: 2;
}

/* Animacja mikrointerakcji +/- przy otwieraniu podkategorii h6 */
.dropdown-header-accordion:not(.collapsed)::after {
  transform: rotate(90deg);
  opacity: 0;
}
.dropdown-header-accordion:not(.collapsed)::before {
  transform: rotate(180deg);
}

/* ==========================================================================
   4. LINKI TRZECIEGO POZIOMU (Elementy listy końcowej)
   ========================================================================== */

.level-1 .menu-item {
  white-space: normal;
  transition: color 0.2s ease;
  font-size: 14px;
  font-weight: 400;
  padding: 3px 0;
}

.level-1 .menu-item:hover {
  background-color: transparent;
  color: var(--WIT);
}


/* ==========================================================================
   5. WARSTWA PRZYCIEMNIAJĄCA STRONĘ (Backdrop Overlay)
   ========================================================================== */

.nav-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6); /* 60% przezroczystości czerni */
  z-index: 1020; /* Pod menu, nad resztą strony */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

body.menu-open .nav-backdrop {
  opacity: 1;
  pointer-events: auto; /* Aktywne kliknięcie do zamknięcia menu */
}


/* ==========================================================================
   6. DESKTOP (od 992px)
   ========================================================================== */

@media (min-width: 992px) {
  /* Wymuszenie wyświetlania i zablokowanie chowania poziomu drugiego */
  .level-2.collapse {
    display: block !important;
    height: auto !important;
  }

  /* Stylizacja nagłówków jako stałe, statyczne tytuły kolumn */
  .dropdown-header-accordion {
    pointer-events: none; 
    background-color: transparent; 
    padding: 0 0 10px 0;
    margin-bottom: 10px;
  }
  
  /* Całkowite ukrycie linii plus/minus na desktopie */
  .dropdown-header-accordion::before,
  .dropdown-header-accordion::after {
    display: none !important;
  }
}


/* ==========================================================================
   7. MOBILE (do 992px)
   ========================================================================== */

@media (max-width: 991.98px) {
  .navbar-collapse {
    position: absolute;
    top: 100%; /* Rozwija się idealnie od dolnej krawędzi paska nawigacji */
    left: 0;
    width: 100%;
    background-color: #0b0c10; /* Kolor tła dopasowany do otwartego paska */
    max-height: calc(100vh - 100%); /* Dopasowanie wysokości do ekranu telefonu */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1025;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); /* Estetyczny cień pod menu */
  }

  /* Przełączenie paneli Mega Menu w standardowy przepływ dokumentu */
  .level-1 {
    position: static;
    box-shadow: none;
    background-color: var(--szary-5);
	padding-left: 20px;
  }

}


/* ==========================================================================
   8. ANIMOWANA IKONA HAMBURGERA (Przekształcenie w znak X)
   ========================================================================== */

.navbar-toggler {
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 24px;
  padding: 0;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.toggler-icon {
  display: block;
  width: 30px;
  height: 3px;
  background-color: #ffffff;
  border-radius: 1px;
  transition: all 0.3s ease-in-out;
}

/* Transformacja linii w znak X (gdy przycisk traci klasę .collapsed) */
.navbar-toggler:not(.collapsed) .top-bar {
  transform: rotate(45deg) translate(5px, 5px);
}

.navbar-toggler:not(.collapsed) .middle-bar {
  opacity: 0;
  transform: translateX(-10px);
}

.navbar-toggler:not(.collapsed) .bottom-bar {
  transform: rotate(-45deg) translate(5px, -6px);
}

/* ==========================================================================
   Dodatkowe
   ========================================================================== */

	#mainNavbar .nav-link {
	   white-space: nowrap;
	}

@media (max-width: 991px) {
	
	#mainNavbar .megaMenu-container {
		margin-top: 20px;
		border-radius: 20px;
		background-color: var(--szary-3, #F7F7F7);
		box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);
	}
	#mainNavbar .megaMenu {
		padding: 20px;;
	}
	#mainNavbar .menu-container .menu-glowne-content {
		padding: 0;
		gap: 0;
	}
	
	#mainNavbar .menu-container .menu-glowne-content {
		padding: 0;
		gap: 0;
	}
	#mainNavbar li.nav-item:not(:first-child) {
	  border-top: 1px solid #B3B3B3;
	}
	#mainNavbar li.nav-item {
		padding: 5px 0;
	}
	#mainNavbar li.nav-item a.nav-link {
		font-weight: 600;
	}
	
}
@media (min-width: 992px) {

	#mainNavbar .megaMenu-container {
		margin-top: 0;
		border-radius: unset;
		background-color: unset;
		box-shadow: unset;
	}
	#mainNavbar .megaMenu {
		padding: 0;
	}
	#mainNavbar .menu-container .menu-glowne-content {
		padding: 20px;
		gap: 20px;
	}
	
	.level-1 {
		margin-top: 20px;
	}
	
	#mainNavbar>div>ul>li>a {
		color: #EFEFEF;
	}
	#mainNavbar>div>ul>li>a:hover {
		color: #FFFFFF;
	}
	
}

    .menu-top {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 10px;

        background: var(--WIT, #910000);
    }

    .kontener-top {
        display: flex;
        flex-shrink: 1;
        /* padding: 20px 0px; */
        height: 44px;
        width: 1460px;
        padding: 7px 20px;
        justify-content: flex-end;
        align-items: flex-end;
        gap: 10px;
        align-self: stretch;
    }

    .top-menu {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 5px;
    }

    .pasek-top-link {
        display: flex;
        padding: 5px 10px;
        justify-content: center;
        align-items: center;
        gap: 10px;

        border-radius: 5px;
        color: var(--szary-3, #F7F7F7);
        text-align: center;
        transition: 0.3s ease;

        /* top-pasek-narzedzi/btn-top-pasek-narzedzi */
        color: rgba(255, 255, 255, 0.50);
        text-align: center;
        
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .pasek-top-link:hover {
        cursor: pointer;
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
    }

    #UBI:hover {
        background: var(--UBI, #05B);
        color: var(--szary-3, #F7F7F7);
    }

    #UBIA:hover {
        background: var(--szary-50, #808080);
        color: var(--szary-3, #F7F7F7);
    }

    #Poczta:hover {
        background: var(--szary-90, #1a1a1a);
        color: var(--szary-3, #F7F7F7);
    }

    #Pomoc:hover {
        background: var(--szary-10, #e6e6e6);
        color: var(--szary-90, #1a1a1a);
    }

    .pasek-top-divider {
        display: flex;
        padding: 5px;
        justify-content: center;
        align-items: center;
        gap: 10px;

        color: rgba(255, 255, 255, 0.50);
        
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .pasek-top-controler {
        display: flex;
        padding: 5px;
        justify-content: center;
        align-items: center;
        gap: 10px;

        transition: 0.3s ease;
        color: rgba(255, 255, 255, 0.50);
        
        font-size: 12px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .pasek-top-controler:hover {
        cursor: pointer;
        color: var(--szary-3, #F7F7F7);
    }

    #dark-mode {
        display: flex;
        padding: 5px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        height: 17px;
        width: 17px;
        background: url(/images/svg/nav/dark_mode.svg);
        opacity: 0.5;
        transition: 0.3s ease;
    }

    #dark-mode:hover {
        cursor: pointer;
        opacity: 1;
    }

    .menu-glowne {
        position: sticky;
        top: 0;
        z-index: 999;

        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 20px 0;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;

        user-select: none;
        background: var(--WIT-main, #910000);
        box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.25);
    }

    .kontener-menu-glowne {
        display: flex;
        flex-shrink: 1;
        width: 100%;
        max-width: 1460px;
        padding: 0 20px;
        height: 60px;
        justify-content: space-between;
        align-items: center;
    }

    .menu-lista {
        display: flex;
    }

    .menu-lista-item {
        display: flex;
        align-items: center;
        gap: 10px;

        color: var(--biay, #FFF);
        text-align: center;
        cursor: pointer;
        opacity: 0.7;

        /* main menu */
        
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .menu-lista-item:hover {
        opacity: 1;
    }

    .menu-lista-item-arrow {
        transition: 1s ease;
    }

    .menu-lista-item:hover .menu-lista-item-arrow {
        transform: rotate(180deg);
        fill: var(--biay, #FFF);
    }

/* WYSZUKIWARKA */
    .search-container {
        position: relative;
        display: flex;
        align-items: center;
        width: 45px;
        height: 45px;
        background-color: transparent;
        border-radius: 10px;
        transition: width 0.4s ease, background-color 0.4s ease;
        overflow: hidden;
    }
    .search-container:hover,
    .search-container:focus-within {
        width: 250px;
        background-color: #ffffff;
    }
    .search-container form {
        display: flex;
        flex-direction: row;
        height: 45px;
        width: 100%;
        margin: 0;
    }
    .search-container button {
        transition: 0.3s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        border-radius: 0px 10px 10px 0px;
        background: var(--WIT-ciemny, #640000);
        border: none;
        outline: none;
        width: 45px;
    }
    .search-input {

        height: 45px;
        background: transparent;
        border: none;
        outline: none;
        padding: 0 0 0 20px;
        font-size: 16px;
        color: #333;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .search-input::placeholder {
        color: var(--szary-30, #B3B3B3);
        
        font-size: 16px;
        font-style: italic;
        font-weight: 300;
        line-height: normal;
    }
    .search-container:hover .search-input,
    .search-container:focus-within .search-input {
        opacity: 1;
        transition-delay: 0.1s;
    }
    .search-icon {
        position: absolute;
        right: 12px;
        width: 20px;
        height: 20px;
        color: #ffffff;
        pointer-events: none;
        /* Allows user to click "through" the icon to focus the input */
        transition: color 0.4s ease;
    }
    /* Change icon color to red when expanded */
    .search-container:hover .search-icon,
    .search-container:focus-within .search-icon {
        color: var(--WIT-main, #910000);
    }
    .search-container:hover button {
        background-color: #ffffff;
    }
    .search-container:focus-within button {
        background-color: #ffffff;
    }


    .menu-kierunki {
        display: flex;
        width: 100%;
        height: 50px;
        /* padding: 0 290px; */
        justify-content: center;
        align-items: center;

        transition: 0.3s ease;
        background: var(--pasek-transparen-dark, rgba(26, 26, 26, 0.30));

        /* pasek kierunki menu */
        box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.25) inset;
        backdrop-filter: blur(10px);
		
		position: absolute;
		z-index: 100;
    }

    .kontener-menu-kierunki {
        cursor: pointer;
        transition: 0.3s ease;
        display: flex;
        flex-shrink: 1;
        width: 100%;
        max-width: 1460px;
        padding: 0 20px;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
        align-self: stretch;
    }

    .menu-kierunki-tekst {
        transition: 0.3s ease;
        color: var(--biay, #FFF);
        
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;

        opacity: 0.5;
    }

    .menu-kierunki-lista {
        transition: 0.3s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: stretch;
    }

    .menu-kierunki-lista-item {
        transition: 0.3s ease;
        display: flex;
        width: 200px;
        padding: 10px 20px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        align-self: stretch;

        color: var(--biay, #FFF);
        opacity: 0.5;

        text-align: center;
        
        font-size: 14px;
        font-style: normal;
        font-weight: 900;
        line-height: normal;
        text-transform: uppercase;
    }

    #kafelek-grafika {
        border-top: 6px solid var(--GRAFIKA, #FE8F07);
    }

    #kafelek-informatyka {
        border-top: 6px solid var(--INFORMATYKA, #00A23D);
    }

    #kafelek-itz {
        border-top: 6px solid var(--ITZ, #0255DE);
    }

    #kafelek-zarzadzanie {
        border-top: 6px solid var(--ZARZADZANIE, #8A42D4);
    }

    #kafelek-podyplomowe {
        border-top: 6px solid var(--PODYPLOMOWE, #B3B3B3);
    }


    .menu-kierunki:hover {
        height: 70px;
        color: var(--biay, #FFF);
    }

    .menu-kierunki:hover>.kontener-menu-kierunki>.menu-kierunki-tekst {
        opacity: 1;
    }

    .menu-kierunki:hover>.kontener-menu-kierunki>.menu-kierunki-lista>.menu-kierunki-lista-item {
        opacity: 1;
    }


    #kafelek-grafika:hover {
        background: var(--GRAFIKA, #FE8F07);
    }

    #kafelek-informatyka:hover {
        background: var(--INFORMATYKA, #00A23D);
    }


    #kafelek-itz:hover {
        background: var(--ITZ, #0255DE);
    }

    #kafelek-zarzadzanie:hover {
        background: var(--ZARZADZANIE, #8A42D4);
    }

    #kafelek-podyplomowe:hover {
        background: var(--PODYPLOMOWE, #B3B3B3);
    }


    @media all and (max-width: 991.98px) {

        /* MOBILE */

        hr {
            height: 1px;
            border: none;
            background: rgba(255, 255, 255, 0.20);
            margin: 0;
        }


/* WYSZUKIWARKA */
        .wyszukiwarka_mobile {
            order: 2;
            width: 100%;
            max-width: 400px;
        }
        .search_container_mobile {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            width: 100%;
            height: 40px;
        }
        .wyszukiwarka_mobile form {
            display: flex;
            flex-direction: row;
            height: 100%;
            width: 100%;
            margin: 0;
        }

        .menu_mobile_links {
            display: flex;
            justify-content: center;
            padding: 0 20px;
            align-self: stretch;
            width: 100%;
        }

        .menu_mobile_links_container {
            display: flex;
            justify-content: center;
            width: 100%;
        }

        .menu_mobile_links a {
            display: flex;
            padding: 12px;
            justify-content: center;
            align-items: center;
            gap: 10px;

            color: var(--biay, #FFF);
            
            font-size: 12px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }

        .pasek-top-divider {
            display: flex;
            padding: 12px;
            justify-content: center;
            align-items: center;
            gap: 10px;

            color: rgba(255, 255, 255, 0.50);
            
            font-size: 12px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }

        .menu_mobile_controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 5px;
        }

        .menu_mobile_controls .controler {
            display: flex;
            padding: 12px;
            justify-content: center;
            align-items: center;
            gap: 10px;

            color: rgb(255, 255, 255);
            
            font-size: 12px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
        }

        #dark-mode-mobile {
            display: flex;
            padding: 5px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            height: 17px;
            width: 17px;
            background: url(/images/svg/nav/dark_mode.svg);

        }

        #dark-mode-mobile:hover {
            cursor: pointer;
            opacity: 1;
        }

        .menu_mobile_socials {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            padding: 10px;

        }

        .menu_mobile_socials_container {
            display: flex;
            flex-direction: row;
            width: 100%;
            max-width: 350px;
            padding: 0 10px;
            justify-content: space-between;
            align-items: center;
            align-self: stretch;
        }

        .menu_mobile_socials_container a {
            display: flex;
            width: 40px;
            height: 40px;
            min-width: 40px;
            min-height: 40px;
            padding: 10px;
            justify-content: center;
            align-items: center;
            gap: 10px;

            border-radius: 10px;
            background: var(--biay, #FFF);
        }

        .social-icon {
            transition: 0.3s ease;
            display: flex;
            width: 20px;
            height: 20px;
            background-size: contain;
            background-repeat: no-repeat;
        }

        #instagram-icon {
            background: url(/images/svg/nav/instagram.svg);
            background-size: contain;
            background-repeat: no-repeat;
            height: 14px;
            width: 14px;
        }

        #discord-icon {
            background: url(/images/svg/nav/discord.svg);
            background-size: contain;
            background-repeat: no-repeat;
            height: 14px;
            width: 19px;
        }

        #tiktok-icon {
            background: url(/images/svg/nav/tiktok.svg);
            background-size: contain;
            background-repeat: no-repeat;
            height: 17px;
            width: 15px;
        }

        #linkedin-icon {
            background: url(/images/svg/nav/linkedin.svg);
            background-size: contain;
            background-repeat: no-repeat;
            height: 18px;
            width: 18px;
        }

        #facebook-icon {
            background: url(/images/svg/nav/facebook.svg);
            background-size: contain;
            background-repeat: no-repeat;
            height: 16px;
            width: 8px;
        }
    }

    @media all and (min-width: 992px) {
		.menu-lista {
			display: flex;
			align-items: center;
			gap: 35px;
		}
    }

    @media all and (max-width: 991.98px) {
        .wyszukiwarka_mobile {
            order: 3;
            width: 100%;
            max-width: none;
        }
    }

/***************/
	.desktop .megaMenu-container .menu-container {
		display: flex;
		justify-content: center;
		height: fit-content;
		padding: 20px;
	}

    .desktop .menu-glowne-content {
        display: flex;
        flex-direction: row;
        max-width: 1440px;
        gap: 20px;
        padding: 20px;
        border-radius: 20px;
        background: var(--szary-3, #F7F7F7);
        box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);
    }

    .desktop .menu-glowne-content-left {
        display: flex;
        width: 230px;
        min-width: 200px;
        max-width: 300px;
        padding-top: 10px;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        flex-shrink: 0;
        align-self: stretch;
    }

    .desktop .menu-glowne-content-left h5 {
        color: var(--szary-90, #1A1A1A);
        margin: 0;
        /* main-menu/drop-down/h5-drop-down */
        
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .desktop .menu-glowne-content-left hr {
        width: 230px;
        height: 1px;
        background: #E6E6E6;
        margin: 0;
        border: 0;
    }

    .desktop .menu-glowne-content-left p {
        color: var(--szary-50, #808080);

        margin: 0;
        /* main-menu/drop-down/p-drop-down */
        
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 140%;
        /* 19.6px */
    }

    .desktop .menu_button {
        cursor: pointer;
        user-select: none;

        display: flex;
        width: 100%;
        /* height: 58px; */
        /*change later*/
        padding: 21px 20px;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;

        transition: 0.3s;
        border-radius: 10px;
    }

    .desktop .button_label {
        transition: 0.3s;
        
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .desktop .button_arrow {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 13px;
        width: 14px;
        /* background: url(/images/svg/arrow_white.svg); */
        position: relative;
    }

    .desktop #menu_button_red {
        background: var(--WIT, #910000);
    }

    .desktop #menu_button_red>.button_label {
        color: var(--to, #FFF);
    }

    .desktop #menu_button_red .button_arrow {
        background: url(/images/svg/arrow_white.svg);
    }

    .desktop #menu_button_red:hover {
        background: var(--szary-90, #1A1A1A);
    }

    .desktop .menu-glowne-content-right {
        display: flex;
        flex-wrap: wrap;
        width: fit-content;
        min-width: 400px;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;

    }

    .desktop .menu-glowne-content-right-panel {
		display: flex;
		min-width: 200px;
		width: 300px;
		
		line-height: normal;
		flex-direction: column;
		align-items: flex-start;
		
		flex: 1 0 0;
		align-self: stretch;
		border-radius: 10px;
		background: #FFF;
    }
	
	.desktop .menu-glowne-content-right-panel-cdk {
		border-radius: 10px;
		background: #FFF;
		max-height: fit-content;
		flex-grow: 0;
	}
	
	.desktop .menu-glowne-content-right-panel-special {
		display: flex;
		min-width: 200px;
		/*width: 260px;*/
		flex-direction: column;
		justify-content: space-between;
		gap: 10px;
		align-self: stretch;
	}
	.desktop .menu-glowne-right-panel-buttons-container {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
.desktop .menu-glowne-content-right-panel-button {
    display: flex;
    min-width: 200px;
    max-width: 300px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}
.desktop .menu-glowne-content-right-panel-button h4 {
    color: var(--biay, #FFF);
    margin: 0;
    border-radius: 10px;
    font-family: Roboto;
    font-size: 22px;
    font-style: normal;
    font-weight: 800;
    line-height: 140%;
}
#button_ubi {
    border-radius: 10px;
    background: var(--UBI, #05B);
}
#button_poczta {
    border-radius: 10px;
    background: var(--szary-90, #1A1A1A);
}	
#button_pomoc {
    border-radius: 10px;
    background: var(--szary-50, #808080);
}
.desktop .menu-glowne-socials {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    width: 100%;
}
.desktop .menu-glowne-socials-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

.desktop .menu-glowne-socials-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: space-between;
	gap: 5px;
}

.desktop .menu-glowne-socials-container a {
    transition: 0.3s ease;
    display: flex;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;

    border-radius: 10px;
    background: var(--biay, #FFF);
}

.desktop .menu-glowne-socials-container a:hover {
    border-radius: 10px;
    background: var(--szary-80, #333);

    /* cien btn */
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
}

.social-icon {
    transition: 0.3s ease;
    display: flex;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
}

.desktop .menu-glowne-socials-container a:hover>.social-icon {
    filter: invert(1);
}

#instagram-icon {
    background: url(/images/svg/nav/instagram.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height: 14px;
    width: 14px;
}

#discord-icon {
    background: url(/images/svg/nav/discord.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height: 14px;
    width: 19px;
}

#youtube-icon {
    background: url(/images/svg/nav/youtube.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height: 14px;
    width: 19px;
}

#tiktok-icon {
    background: url(/images/svg/nav/tiktok.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height: 17px;
    width: 15px;
}

#linkedin-icon {
    background: url(/images/svg/nav/linkedin.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height: 18px;
    width: 18px;
}

#facebook-icon {
    background: url(/images/svg/nav/facebook.svg);
    background-size: contain;
    background-repeat: no-repeat;
    height: 16px;
    width: 8px;
}




    .desktop .menu-glowne-content-right h6 {
        color: var(--szary-90, #1A1A1A);
        margin: 0;
        padding: 0;

        /* main-menu/drop-down/h6-drop-down */
        
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 110%;
        /* 17.6px */
    }

    .desktop .menu-glowne-content-right-panel hr {
        width: 100%;
        height: 1px;
        background: #E6E6E6;
        margin: 0;
        border: 0;
    }
	
	
	
	/* #######################   */
	
	
	
	
	
	
	
	
.desktop .menu_button {
    cursor: pointer;
    user-select: none;

    display: flex;
    width: 100%;
    padding: 21px 20px;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;

    transition: 0.3s;
    border-radius: 10px;
}

.desktop .button_label {
    transition: 0.3s;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.desktop .button_arrow {
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 13px;
    width: 14px;
    background: url(/images/svg/arrow_dark.svg);
    position: relative;
}

/* Wariant czerwony (Rekrutacja) - używany we wszystkich trzech panelach */
.desktop #menu_button_red {
    background: var(--WIT-GWNY, #900000);
}

.desktop #menu_button_red>.button_label {
    color: var(--biay, #FFF);
}

.desktop #menu_button_red .button_arrow {
    background: url(/images/svg/arrow_white.svg);
}

.desktop #menu_button_red:hover {
    background: var(--szary-90, #1A1A1A);
}

.desktop #menu_button_white {
    background: var(--szary-3, #F7F7F7);
}

.desktop #menu_button_white>.button_label {
    color: var(--szary-85-tekst, #262626);
}

.desktop #menu_button_white:hover {
    background: var(--szary-90, #1A1A1A);
}

.desktop #menu_button_white:hover .button_label {
    color: var(--biay, #FFF);
}

.desktop #menu_button_white:hover .button_arrow {
    filter: invert(1);
}




.desktop .menu-header {
	color: #000000;
	font-size: 16px;
	font-weight: 600;
    line-height: 110%;
    padding: 10px 0;
    margin: 0;
}


.desktop .panel_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    align-self: stretch;
    flex-wrap: wrap;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
    transition: 0.3s;
    padding: 10px 12px 0;
    gap: 8px;
    border-radius: 10px 10px 0px 0px;
}

.desktop .panel_content {
    display: flex;
    padding: 10px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}
.level-2 ul {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 8px;
}

/* ### STUDIA ### */

.desktop #studia .menu-header {
	font-size: 14px;
    padding: 0;
}

.desktop #studia .panel_header {
    display: flex;
    min-height: 55px;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    align-self: stretch;
    flex-wrap: wrap;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
    transition: 0.3s;
    padding: 10px 16px;
    gap: 8px;
    border-radius: 10px 10px 0px 0px;
}

.desktop #studia .panel_content {
    display: flex;
    padding: 10px 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.desktop #studia .panel_tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

/* --------------------------------------------------------------------------
   5.7 Kafelki kierunków (tylko panel Studia)
   -------------------------------------------------------------------------- */

/* Panel Studia nie wyśrodkowuje kart tak jak O uczelni/Student - własny layout */
.desktop #studia .menu-glowne-content-right {
    justify-content: center;
    min-width: 0;
}

/* Pojedynczy kafelek kierunku (styl "kolorowa karta z ikoną") */
.desktop #studia .menu-glowne-content-right-panel {
    transition: 0.3s ease;
    display: flex;
    flex-shrink: 1;
    width: 219px;

    flex-direction: column;
    align-items: center;
    justify-items: center;
    gap: 5px;

    border-radius: 10px;
    background: #FFF;
}

.desktop #studia .menu-glowne-content-right-panel:hover {
    gap: 10px;
}


.panel_header_icon_n_title {
    display: flex;
    align-items: center;
    gap: 8px;
}
.panel_header_title {
    font-weight:600;
}
.desktop .panel_header_title span {
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
}
.desktop .panel_header_title {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.desktop .panel_header p {
    margin: 0;
    font-family: Roboto;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 110%;
}

.desktop .panel_header svg {
    fill: var(--biay, #FFF);
}


#Grafika .panel_header {
    color: var(--GRAFIKA, #FE8F07);
}

#Informatyka .panel_header {
    color: var(--INFORMATYKA, #00A23D);
}

#ITZ .panel_header {
    color: var(--ITZ, #0255DE);
}

#Zarzadzanie .panel_header {
    color: var(--ZARZADZANIE, #8A42D4);
}

#Podyplomowe .panel_header {
    color: var(--PODYPLOMOWE, #808080);
}

/* Stan hover kafelka - wypełnienie kolorem kierunku */
.desktop #Grafika:hover>.panel_header {
    color: var(--biay, #FFF);
    background: var(--GRAFIKA, #FE8F07);
}

.desktop #Informatyka:hover>.panel_header {
    color: var(--biay, #FFF);
    background: var(--INFORMATYKA, #00A23D);
}

.desktop #ITZ:hover>.panel_header {
    color: var(--biay, #FFF);
    background: var(--ITZ, #0255DE);
}

.desktop #Zarzadzanie:hover>.panel_header {
    color: var(--biay, #FFF);
    background: var(--ZARZADZANIE, #8A42D4);
}

.desktop #Podyplomowe:hover>.panel_header {
    color: var(--biay, #FFF);
    background: var(--PODYPLOMOWE, #808080);
}

.desktop #Grafika:hover hr,
.desktop #Informatyka:hover hr,
.desktop #ITZ:hover hr,
.desktop #Zarzadzanie:hover hr,
.desktop #Podyplomowe:hover hr {
    background: #B3B3B3;
}

/* Kolor linii oddzielającej pod nagłówkiem (stan spoczynku) */
.desktop #Grafika hr {
    background: var(--GRAFIKA, #FE8F07);
}

.desktop #Informatyka hr {
    background: #00A23D;
}

.desktop #ITZ hr {
    background: #0255DE;
}

.desktop #Zarzadzanie hr {
    background: #8A42D4;
}

.desktop #Podyplomowe hr {
    background: #808080;
}

/* Zawartość kafelka: podpisy poziomów studiów + linki */


.desktop #studia .dropdown-header-accordion {
    font-size: 14px;
    padding: 0;
}


.desktop #studia #Grafika .dropdown-header-accordion, 
.desktop #studia #Informatyka .dropdown-header-accordion, 
.desktop #studia #ITZ .dropdown-header-accordion, 
.desktop #studia #Zarzadzanie .dropdown-header-accordion, 
.desktop #studia #Podyplomowe .dropdown-header-accordion {
    border-bottom:0;
}

.desktop #studia .menu-glowne-content a {
    transition: 0.3s;
    color: var(--szary-85-tekst, #262626);

    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.desktop #studia .menu-glowne-content a:hover {
    color: var(--WIT-GWNY, #900000);
    transition: 0.3s;
}