/**
 * Nawigacja "Mojego konta" - ikony i zwijanie na waskich ekranach.
 *
 * Granica zwijania jest ustawieniem elementu, a `@media` nie czyta zmiennych CSS, wiec
 * przelacza ja skrypt klasa `is-collapsed` na `<nav>` (ten sam wzorzec, co `data-breakpoint`
 * w szufladzie nawigacji). Stan domyslny arkusza to uklad szeroki: bez skryptu lista jest
 * widoczna, a pasek z przyciskiem ukryty. Dzieki temu brak JS-u odbiera animacje, a nie
 * dostep do zakladek.
 *
 * Kolory ida na sloty `--lukuro-color-*` z fallbackiem hex, wiec arkusz dziala takze na
 * witrynie bez warstwy semantycznej. Skale (odstepy, promienie) na zmienne AT, tez
 * z fallbackiem - Advanced Themera u klienta byc nie musi.
 *
 * @package lukuro
 */

/**
 * Sama nawigacja nie wnosi tla ani przycinania. Selektor jest celowo ciezki
 * (element + dwie klasy), bo witryny stylujace nawigacje z poziomu sekcji pisza reguly
 * pokroju `.moja-sekcja .woocommerce-MyAccount-navigation` - lzejszy zapis przegralby
 * z nimi. Kontrolki stylu SAMEGO elementu Bricks generuja regule z identyfikatorem
 * (`#brxe-... .woocommerce-MyAccount-navigation`) i sa nadal silniejsze, wiec autor
 * ustawia tlo dokladnie tam, gdzie go szuka.
 *
 * `overflow` wraca do `visible`, bo kontener, ktory ma wysuwac panel, nie moze jednoczesnie
 * przycinac swojej zawartosci. Objawem byly scinane narozniki przycisku zwijania - dotyka on
 * krawedzi kontenera, wiec zaokraglenie zjadalo mu rogi.
 */
nav.woocommerce-MyAccount-navigation.lukuro-account-nav {
	overflow: visible;
	background: transparent;
}

.lukuro-account-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lukuro-account-nav__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/**
 * Selektor bez `:where()` przegralby z kontrolkami stylu elementu Bricks, ktore celuja
 * w `.woocommerce-MyAccount-navigation a`. Autor ma miec pierwszenstwo, wiec caly wyglad
 * odnosnika stoi na zerowej specyficznosci.
 */
.lukuro-account-nav :where(.lukuro-account-nav__list a) {
	display: flex;
	align-items: center;
	gap: var(--at-space--xs, 10px);
	padding: var(--at-space--xs, 10px) var(--at-space--s, 14px);
	border-radius: var(--at-radius--xs, 9px);
	color: var(--lukuro-color-text, #1f2937);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lukuro-account-nav :where(.lukuro-account-nav__list a:hover) {
	background: var(--lukuro-color-surface-subtle, #f3f4f6);
	color: var(--lukuro-color-primary, #0ba1bf);
}

.lukuro-account-nav :where(.is-active > a) {
	background: var(--lukuro-color-surface-subtle, #f3f4f6);
	color: var(--lukuro-color-primary, #0ba1bf);
	font-weight: 600;
}

/* Ikona nie skaluje sie z tekstem pozycji: rzad ikon ma stac w jednej osi. */
.lukuro-account-nav__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	opacity: 0.65;
}

.lukuro-account-nav :where(a:hover) .lukuro-account-nav__icon,
.lukuro-account-nav :where(.is-active > a) .lukuro-account-nav__icon {
	opacity: 1;
}

/* Ikona z biblioteki Bricks przychodzi jako <i>, a nie <svg> - rozmiar bierze z fontu. */
i.lukuro-account-nav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
}

.lukuro-account-nav__label {
	min-width: 0;
}

/* ---------------------------------------------------------------------
 * Pasek zwijania
 * ------------------------------------------------------------------ */

.lukuro-account-nav__bar {
	display: none;
}

.lukuro-account-nav__toggle {
	display: flex;
	align-items: center;
	gap: var(--at-space--xs, 10px);
	width: 100%;
	margin: 0;
	padding: var(--at-space--xs, 10px) var(--at-space--s, 14px);
	border: 1px solid var(--lukuro-color-primary, #0ba1bf);
	border-radius: var(--at-radius--xs, 9px);
	background: var(--lukuro-color-surface, #fff);
	/* Kolor niesie tez strzalke - rysuje sie na `currentColor`. */
	color: var(--lukuro-color-primary, #0ba1bf);
	font: inherit;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
}

.lukuro-account-nav__toggle-label {
	flex: 1 1 auto;
	min-width: 0;
}

.lukuro-account-nav__toggle-caret {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}

.lukuro-account-nav.is-open .lukuro-account-nav__toggle-caret {
	transform: rotate(180deg);
}

/* ---------------------------------------------------------------------
 * Stan zwiniety - wspolny dla obu trybow
 * ------------------------------------------------------------------ */

.lukuro-account-nav.is-collapsed .lukuro-account-nav__bar {
	display: block;
}

/* Tryb "rozwijana lista": panel wchodzi w uklad i spycha tresc w dol. */
.lukuro-account-nav.is-collapsed[data-mode="accordion"] .lukuro-account-nav__panel {
	display: none;
}

.lukuro-account-nav.is-collapsed[data-mode="accordion"].is-open .lukuro-account-nav__panel {
	display: block;
	margin-top: var(--at-space--xs, 10px);
}

/* Naglowek panelu nalezy wylacznie do trybu wysuwanego. */
.lukuro-account-nav__panel-head {
	display: none;
}

/* ---------------------------------------------------------------------
 * Tryb "panel wysuwany"
 *
 * Zachowanie odtwarza offcanvas Bricks (ten sam, na ktorym stoi mini koszyk): panel na
 * `position: fixed` przez cala wysokosc okna, wjazd `transform`-em, nakladka gasnaca
 * przezroczystoscia. Dzieki temu panel konta i panel koszyka reaguja tak samo, zamiast
 * wygladac jak dwa rozne mechanizmy w jednym sklepie.
 *
 * Panel zostaje w drzewie takze zamkniety - `display: none` uciąłby przejscie - dlatego
 * chowa go `visibility`, ktora zabiera go rowniez czytnikom i klawiaturze.
 *
 * `position: fixed` zaklada, ze zaden przodek nawigacji nie niesie `transform` ani
 * `filter`: taki przodek tworzy dla `fixed` wlasny kontekst i panel przypialby sie do
 * niego zamiast do okna. Nawigacja zdejmuje z siebie `overflow`, ale cudzego transformu
 * wyzej znies nie moze - tam wlasciwym trybem jest "rozwijana lista".
 * ------------------------------------------------------------------ */

.lukuro-account-nav.is-collapsed[data-mode="offcanvas"] .lukuro-account-nav__panel {
	position: fixed;
	z-index: 999;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(320px, 86vw);
	/* `dvh` liczy sie z paskami przegladarki na telefonie; `vh` zostaje dla starszych. */
	height: 100vh;
	height: 100dvh;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	visibility: hidden;
	background: var(--lukuro-color-surface, #fff);
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
	transform: translateX(100%);
	transition: transform 0.22s cubic-bezier(0.25, 0, 0.25, 1), visibility 0.22s;
}

.lukuro-account-nav.is-collapsed[data-mode="offcanvas"].is-open .lukuro-account-nav__panel {
	visibility: visible;
	transform: translateX(0);
}

.lukuro-account-nav.is-collapsed[data-mode="offcanvas"] .lukuro-account-nav__panel-head {
	display: flex;
	position: sticky;
	top: 0;
	align-items: center;
	justify-content: space-between;
	gap: var(--at-space--xs, 10px);
	padding: var(--at-space--s, 14px);
	border-bottom: 1px solid var(--lukuro-color-hairline, #e0e0e0);
	background: inherit;
}

.lukuro-account-nav__panel-title {
	font-weight: 500;
	color: var(--lukuro-color-primary, #0ba1bf);
}

.lukuro-account-nav__close {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: var(--at-radius--xs, 9px);
	background: transparent;
	color: var(--lukuro-color-primary, #0ba1bf);
	cursor: pointer;
}

.lukuro-account-nav__close:hover {
	background: var(--lukuro-color-surface-subtle, #f3f4f6);
}

.lukuro-account-nav__close svg {
	width: 16px;
	height: 16px;
}

.lukuro-account-nav.is-collapsed[data-mode="offcanvas"] .lukuro-account-nav__list {
	padding: var(--at-space--s, 14px);
}

/**
 * Nakladka istnieje tylko w trybie wysuwanym. Zamknieta nie lapie klikniec i lezy pod
 * trescia, wiec nie trzeba jej chowac `display`-em - i przejscie ma co animowac.
 */
.lukuro-account-nav__backdrop {
	position: fixed;
	z-index: -1;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.5);
	transition: opacity 0.22s cubic-bezier(0.25, 0, 0.25, 1);
}

.lukuro-account-nav.is-collapsed[data-mode="offcanvas"].is-open .lukuro-account-nav__backdrop {
	z-index: 998;
	opacity: 1;
	pointer-events: auto;
}

/* Panel zaslania strone, wiec tlo pod nim nie ma sie przewijac. */
body.lukuro-account-nav-open {
	overflow: hidden;
}

/* ---------------------------------------------------------------------
 * Szyna z ikonami - zwijanie na SZEROKICH ekranach
 *
 * Odwrotnosc reszty tego arkusza: tam zwijanie ratuje waski ekran, tutaj oszczedza
 * szerokosc na duzym. Dlatego kazda regula ponizej gasnie przy `is-collapsed` - ponizej
 * granicy nawigacja ma zawsze pelne etykiety, bez wzgledu na zapamietany stan.
 *
 * Dwie klasy opisuja dwie rozne rzeczy. `--rail-enabled` znaczy "ta nawigacja ma wlasna
 * szerokosc i umie sie zwijac" i tylko przy niej arkusz przejmuje szerokosc od Bricksa.
 * `--rail` znaczy "jest zwinieta teraz" i przychodzi juz z serwera, z ciasteczka, wiec
 * wejscie na strone w tym stanie nie miga pelna lista.
 *
 * Selektor szerokosci jest ciezki (element + dwie klasy) z tego samego powodu, co przy
 * `overflow` wyzej: arkusz Bricksa daje nawigacji `min-width: 25%`, a witryna moze miec
 * warstwy kaskady wylaczone (`disableBricksCascadeLayer`) - wtedy o wyniku decyduje juz
 * sama specyficznosc.
 * ------------------------------------------------------------------ */

nav.woocommerce-MyAccount-navigation.lukuro-account-nav--rail-enabled:not(.is-collapsed) {
	--lukuro-account-nav-w: var(--lukuro-account-nav-w-expanded, 260px);

	flex: 0 0 auto;
	/* Procent od Bricksa musi zejsc: oba konce przejscia maja byc pikselami, inaczej
	   interpolacja procent-piksel potrafi skoczyc w pierwszej klatce. */
	min-width: 0;
	width: var(--lukuro-account-nav-w);
	transition: width 0.25s cubic-bezier(0.25, 0, 0.25, 1);
}

nav.woocommerce-MyAccount-navigation.lukuro-account-nav--rail:not(.is-collapsed) {
	--lukuro-account-nav-w: var(--lukuro-account-nav-w-rail, 64px);
}

/* ---------------------------------------------------------------------
 * Przycisk
 * ------------------------------------------------------------------ */

/* Przycisk NIE wchodzi w uklad. Wiersz listy spychalby zakladki w dol o cala swoja
   wysokosc, a w rogu karty jest miejsce, ktore i tak stoi puste. Kotwica to lista, bo to
   ona rysuje karte na tej witrynie; tam, gdzie karte rysuje `<nav>`, rog wypada w tym
   samym miejscu. Dlaczego przycisk siedzi w `<ul>` - patrz `render_rail_bar()`. */
.lukuro-account-nav--rail-enabled:not(.is-collapsed) .lukuro-account-nav__list {
	position: relative;
	transition: padding-top 0.25s cubic-bezier(0.25, 0, 0.25, 1);
}

.lukuro-account-nav__rail-bar {
	display: none;
}

.lukuro-account-nav--rail-enabled:not(.is-collapsed) .lukuro-account-nav__rail-bar {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	left: 0;
	/* 2 px od gory i od prawej: kolko ma stac w rogu, ale nie na obwodce karty (wartosc
	   przyjeta przez usera 2026-08-26). Odsuwa je wypelnienie, a nie `right`: wiersz jest
	   pozycjonowanym bezwzglednie potomkiem pojemnika flex i tam przesuniecie krawedzia
	   przepada - rozciagniecie wygrywa. */
	padding-top: 2px;
	padding-right: 2px;
	/* Pozycjonowany bezwzglednie potomek pojemnika flex i tak dostaje szerokosc calego
	   wiersza, wiec nie walczymy z tym: przycisk dosuwa do rogu `justify-content`. */
	display: flex;
	justify-content: flex-end;
	transition: padding-right 0.25s cubic-bezier(0.25, 0, 0.25, 1);
}

/* W szynie kolko wchodzi na os kolumny ikon. Liczy to wypelnienie, a nie `justify-content`:
   tamto przeskoczyloby na srodek jeszcze szerokiej karty, zanim ta zdazy sie zwezic. */
.lukuro-account-nav--rail:not(.is-collapsed) .lukuro-account-nav__rail-bar {
	padding-right: calc((100% - 28px) / 2);
	padding-top: 2px;
}

/**
 * Kolko idzie wzorem zetonu z modulu szkolen (`.lukuro-trainings__lesson-nav-token`), bo to
 * ten sam gest w tym samym panelu: okragly, drobny znacznik na tincie marki, ktory na
 * najechaniu WYPELNIA sie kolorem, a ikona przechodzi na `on-primary`. Para
 * `primary` / `on-primary` jest kontraktem palety, wiec kontrast trzyma sie po obu stronach
 * takze u konsumenta bez Advanced Themera.
 *
 * Bez obwodki: szara kreska z domyslnego zestawu byla jedyna szara linia w calej karcie
 * i to ona sprawiala, ze przycisk wygladal na doklejony.
 *
 * Tint mieszamy z POWIERZCHNIA, nie z przezroczystoscia (zeton w szkoleniach moze na to
 * drugie, bo lezy na jednolitej karcie). Kolko przykrywa pierwsza pozycje listy, wiec przez
 * przezroczyste tlo przeswiecalo jej podswietlenie i na najechaniu kolko znikalo - zgloszone
 * 2026-08-26. Nieprzezroczyste tlo trzyma je czytelnym takze nad pozycja biezaca.
 *
 * 28 px to nadal ponad minimum WCAG 2.5.8 (24), a znacznik ma pozostac drobny - lezy na
 * karcie, nie obok niej.
 */
.lukuro-account-nav__rail-toggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--lukuro-color-primary, #0ba1bf) 10%, var(--lukuro-color-surface, #fff));
	/* Znak stanu, nie wezwanie: w spoczynku kreska ma byc lekka, dlatego rola tekstowa idzie
	   rozcienczona POWIERZCHNIA (nie przezroczystoscia - kolko lezy na liscie i przezroczyste
	   przepuszczaloby jej podswietlenie).
	   Zmierzone na tle kolka `#e7f6f9`: 100% dawalo 7,46:1 i czytalo sie ciezko, `primary`
	   2,75:1 (ponizej progu), 70% daje **3,54:1** - delikatnie, a nadal ponad 3:1 wymagane
	   dla grafiki (WCAG 1.4.11). Na najechaniu kontrast idzie w gore, bo kolko wypelnia sie
	   kolorem marki. */
	color: color-mix(in srgb, var(--lukuro-color-primary-text, #065666) 70%, var(--lukuro-color-surface, #fff));
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.lukuro-account-nav__rail-toggle:hover,
.lukuro-account-nav__rail-toggle:focus-visible {
	background: var(--lukuro-color-primary, #0ba1bf);
	color: var(--lukuro-color-on-primary, #fff);
}

.lukuro-account-nav__rail-icon {
	width: 16px;
	height: 16px;
}

/**
 * Stan niesie WYPELNIENIE waskiej kolumny, nie obrot znacznika. Ramka panelu jest niemal
 * symetryczna, wiec obrocona o 180 stopni czytalaby sie jak usterka, a nie jak zmiana stanu.
 * Zapalona kolumna znaczy "nawigacja stoi zwinieta" - to samo, co widac obok.
 */
.lukuro-account-nav__rail-icon-fill {
	opacity: 0;
	transition: opacity 0.2s ease;
}

.lukuro-account-nav--rail .lukuro-account-nav__rail-icon-fill {
	opacity: 1;
}

/* W stanie rozwinietym kolko lezy nad prawym koncem pierwszej pozycji, gdzie i tak nie ma
   tekstu. W szynie kolumna ma szerokosc ikony, wiec lista schodzi o tyle, zeby kolko nie
   siadlo na pierwszej ikonie. 12 px to wartosc przyjeta przez usera 2026-08-26 po ogladzie:
   pelne odsuniecie (36 px, czyli wysokosc kolka z odstepem) robilo u gory szyny dziure.
   Selektor (0,3,0) wygrywa z regula witryny na wypelnienie listy (0,2,1), a przegrywa
   z kontrolkami samego elementu - te niosa identyfikator. */
.lukuro-account-nav--rail:not(.is-collapsed) .lukuro-account-nav__list {
	padding-top: 12px;
}

/* ---------------------------------------------------------------------
 * Etykiety - to one niosa wrazenie rozpychania sie
 *
 * Chowamy je szerokoscia i kryciem, NIGDY `display: none` ani `visibility: hidden`:
 * tekst zostaje w drzewie dostepnosci, wiec czytnik dalej czyta "Szkolenia", a nie "link".
 *
 * Przy rozwijaniu krycie ma opoznienie - tekst pojawia sie wtedy, gdy jest juz dla niego
 * miejsce, zamiast przeciskac sie przez zwezony kontener.
 * ------------------------------------------------------------------ */

.lukuro-account-nav--rail-enabled:not(.is-collapsed) .lukuro-account-nav__label {
	max-width: 12rem;
	overflow: hidden;
	white-space: nowrap;
	opacity: 1;
	transition: max-width 0.25s cubic-bezier(0.25, 0, 0.25, 1), opacity 0.18s ease 0.1s;
}

.lukuro-account-nav--rail:not(.is-collapsed) .lukuro-account-nav__label {
	max-width: 0;
	opacity: 0;
	transition: max-width 0.25s cubic-bezier(0.25, 0, 0.25, 1), opacity 0.12s ease;
}

/* ---------------------------------------------------------------------
 * Kwadrat z ikona
 *
 * Jedyne miejsce w tym arkuszu, gdzie wyglad odnosnika NIE stoi na zerowej specyficznosci.
 * Powod jest mechaniczny, nie estetyczny: szerokosc szyny jest ustalona, wiec wypelnienie
 * boczne z kontrolek Bricksa (albo `padding: 0 30px` z arkusza WooCommerce) wypchneloby
 * ikone poza kontener. Reguly ponizej przegrywaja nadal z kontrolkami SAMEGO elementu,
 * bo tamte niosa identyfikator.
 * ------------------------------------------------------------------ */

.lukuro-account-nav--rail-enabled:not(.is-collapsed) .lukuro-account-nav__list a {
	transition: background-color 0.15s ease, color 0.15s ease, gap 0.25s cubic-bezier(0.25, 0, 0.25, 1), padding 0.25s cubic-bezier(0.25, 0, 0.25, 1);
}

.lukuro-account-nav--rail:not(.is-collapsed) .lukuro-account-nav__list a {
	gap: 0;
	justify-content: center;
	min-height: 44px;
	padding-right: 0;
	padding-left: 0;
}

/* ---------------------------------------------------------------------
 * Dymek zamiast utraconego podpisu
 *
 * Rzad osmiu podobnych ikon bez podpisu to zgadywanka. Tresc bierzemy z `data-label`
 * wypisanego przy renderze - `content: attr()` czyta atrybut, nie tekst z `<span>`.
 * ------------------------------------------------------------------ */

.lukuro-account-nav--rail:not(.is-collapsed) .lukuro-account-nav__list li {
	position: relative;
}

.lukuro-account-nav--rail:not(.is-collapsed) .lukuro-account-nav__list a::after {
	content: attr(data-label);
	position: absolute;
	z-index: 5;
	top: 50%;
	left: calc(100% + 8px);
	padding: 6px 10px;
	border: 1px solid var(--lukuro-color-hairline, #e0e0e0);
	border-radius: var(--at-radius--xs, 9px);
	background: var(--lukuro-color-surface, #fff);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	color: var(--lukuro-color-text, #1f2937);
	font-size: 0.875rem;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%);
	transition: opacity 0.12s ease;
}

.lukuro-account-nav--rail:not(.is-collapsed) .lukuro-account-nav__list a:hover::after,
.lukuro-account-nav--rail:not(.is-collapsed) .lukuro-account-nav__list a:focus-visible::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.lukuro-account-nav,
	.lukuro-account-nav__panel,
	.lukuro-account-nav__backdrop,
	.lukuro-account-nav__toggle-caret,
	.lukuro-account-nav__rail-toggle,
	.lukuro-account-nav__rail-icon-fill,
	.lukuro-account-nav__list,
	.lukuro-account-nav__label,
	.lukuro-account-nav__list a,
	.lukuro-account-nav__list a::after {
		transition: none;
	}
}