/* ============================================================
   Menu mobile/tablet strefy klienta (/klient/* poza logowaniem i /klient/form):
   szuflada #ep-drawer z header.php (Bootstrap 5.1 offcanvas). Plik ładowany tylko na tych stronach.
   Desktop (>= 992px) bez zmian: nawigację panelu daje lewa kolumna (partials/account/redesign/sidebar.php).
   Pozycje menu: partials/account/redesign/nav-list.php (jedno źródło dla sidebara i szuflady).
   ============================================================ */

/* navbar nad tłem offcanvas (1040) i nad szufladą (1045): widać logo, Czat i X jak na makiecie.
   Szuflada stoi w header.php ZA navbarem — gdyby była w nim, tło trafiłoby do środka navbara i przykryło przyciski. */
.ep-nav-drawer { z-index: 1046; }
/* po otwarciu navbar przyklejony do góry, żeby był widoczny nad szufladą także po przewinięciu strony */
body.ep-drawer-open .ep-nav-drawer { position: sticky; top: 0; }

/* szuflada zaczyna się pod navbarem (top nadpisuje js/panel-nav.js wysokością navbara) */
.ep-drawer.offcanvas-start { top: 86px; width: 100%; border-right: 0; background: #fff; }
.ep-drawer .offcanvas-body { padding: 24px 16px; }

/* hamburger: po otwarciu (X) jasnofioletowe tło jak na makiecie */
.ep-nav-drawer .ep-drawer-toggler { padding: 12px; margin-left: 8px; border-radius: 12px; }
.ep-nav-drawer .ep-drawer-toggler.is-open { background: #F3E4F7; }

/* zalogowany: powitanie + pozycje panelu (te same klasy co sidebar, tu nieco większe pod palec) */
.ep-drawer .update-hello { font-size: 20px; font-weight: 600; color: #1a1a1a; margin-bottom: 20px; }
.ep-drawer .update-nav { list-style: none; padding: 0; margin: 0; }
.ep-drawer .update-nav a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--base-50);
    font-weight: 500;
    font-size: 17px;
}
.ep-drawer .update-nav a:hover { background: #F5F0F7; }
.ep-drawer .update-nav .is-active a { background: #F3E4F7; color: var(--color-primary-dark); }
.ep-drawer .update-nav .update-nav-logout { margin-top: 32px; }

/* gość (np. /klient/form/pakiet): publiczne menu WP „Header Menu" jako lista ze strzałkami */
.ep-drawer .ep-drawer-public { list-style: none; padding: 0; margin: 0; }
.ep-drawer .ep-drawer-public a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--base-50);
    font-weight: 600;
    font-size: 17px;
}
.ep-drawer .ep-drawer-public a::after {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid #8A94A0;
    border-bottom: 2px solid #8A94A0;
    transform: rotate(-45deg);
}
.ep-drawer .ep-drawer-public a:hover { background: #F5F0F7; }

/* tablet (768–991px): szuflada z lewej na ok. 40% szerokości, reszta strony pod backdropem (makieta) */
@media (min-width: 768px) {
    .ep-drawer.offcanvas-start { width: 40%; min-width: 340px; max-width: 440px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); }
    .ep-drawer .offcanvas-body { padding: 32px 24px; }
}

/* desktop: szuflady nie ma (Bootstrap navbar-expand-lg pokazałby offcanvas w linii), nawigacja w sidebarze */
@media (min-width: 992px) {
    .ep-drawer { display: none !important; }
}