/* ================================
   Popup Multi-Level Menu – pmlm-style.css
   ================================ */

/* 1) Kontener całego menu – wrapper (wrapper ma height:100vh, ale width:0 aż do otwarcia) */
.pmlm_nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 0; /* domyślnie ukryty - zero szerokości */
  height: 100vh;
  overflow: hidden; /* wszystko wewnątrz jest schowane */
  z-index: 9999;
  transition: width 0.3s ease;
}

/* Gdy wrapper otrzyma klasę .pmlm-open, pokażemy menu (np. 280px szerokości) */
.pmlm_nav.pmlm-open {
  width: 280px; /* szerokość menu, można zmienić wg uznania */
}

/* 2) Główne <ul> top-level */
.pmlm_nav .pmlm-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%; /* w ramach wrappera – zawsze 100% (280px) */
  height: 100vh;
  background-color: #fff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
  position: relative; /* by sub-menu mogło być absolutne */
}

/* Pozycje top-level */
.pmlm_nav .pmlm-menu > li {
  border-bottom: 1px solid #e0e0e0;
}

/* Linki top-level – wyświetlamy je jako flex, by zmieścić strzałkę po prawej */
.pmlm_nav .pmlm-menu > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  text-decoration: none;
  color: #333;
  font-size: 16px;
}

/* Ukryj strzałkę, jeśli w <li> nie ma dzieci */
.pmlm_nav .pmlm-menu > li:not(.pmlm-has-children) > a .pmlm-arrow {
  display: none;
}

/* 3) Podmenu: każdy <ul class="pmlm-submenu"> – absolutnie pozycjonowany, poza wrapperem (left:100%) */
.pmlm_nav .pmlm-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 100%; /* poza wrapperem, zupełnie w prawo */
  width: 280px; /* szerokość identyczna jak wrapper */
  height: 100vh;
  background-color: #fff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
  transition: left 0.3s ease, visibility 0s linear 0.3s, opacity 0.3s ease;
  visibility: hidden;
  opacity: 0;
}

/* Gdy sub-menu ma klasę .pmlm-open – wsuń je od prawej, ustaw widoczność i opacity */
.pmlm_nav .pmlm-submenu.pmlm-open {
  left: 280px; /* „na wierzch” głównego panelu (szer.280px) */
  visibility: visible; /* usuń ukrycie */
  opacity: 1; /* widoczne */
  transition-delay: 0s; /* natychmiast pokaż */
}

/* Pozycje w sub-menu (wszystkie poziomy) */
.pmlm_nav .pmlm-submenu li {
  border-bottom: 1px solid #e0e0e0;
}

/* Linki w sub-menu */
.pmlm_nav .pmlm-submenu li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  text-decoration: none;
  color: #333;
  font-size: 15px;
}

/* Ukryj strzałkę, jeśli w li nie ma dzieci */
.pmlm_nav .pmlm-submenu li:not(.pmlm-has-children) > a .pmlm-arrow {
  display: none;
}

/* Styl elementu „← Powrót” */
.pmlm_nav .pmlm-back a {
  display: block;
  padding: 12px 16px;
  color: #555;
  font-size: 14px;
  text-decoration: none;
}

/* Hover nad powrotem */
.pmlm_nav .pmlm-back a:hover {
  color: #222;
}

/* 4) Przycisk otwierający menu (.pmlm-button-toggle) */
.pmlm-button-toggle {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 10000;
  cursor: pointer;
  background-color: #333;
  color: #fff;
  border: none;
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 4px;
}

.pmlm-button-toggle:hover {
  background-color: #555;
}