/* Ikonka „Moje konto" w pasku z flagami — wzór: notatka właściciela
   2026-10-03, archive/moje-konto-redesign-2026-10-03-input/moje-konto-03-pasek-nad-menu.html.
   Pozycja (top/left) ustawiana przez account-widget.js — tu tylko wygląd. */

.roll-account-widget {
	z-index: 9000;
	line-height: 1;
	/* Wyrównanie napisu triggera do pełnej wysokości flag obok (JS ustawia
	   `height` = wysokość flag) — bez tego przycisk (naturalnie niższy niż
	   przydzielona wysokość) „przykleja się” do góry, więc napis wypada
	   wyżej niż środek flag. Nie dotyczy dropdownu (`position:absolute`,
	   poza normalnym przepływem, flex go nie rusza). Zgłoszenie właściciela
	   2026-10-08. */
	display: flex;
	align-items: center;
}

/* Dopóki JS nie zmierzy pozycji przełącznika flag (albo gdy go nie ma —
   GTranslate wyłączony/zmieniony), widget nie "skacze" w losowe miejsce —
   stoi w rozsądnym, stałym rogu. */
.roll-account-widget--fallback {
	position: fixed !important;
	top: 10px !important;
	right: 16px !important;
	left: auto !important;
}

.roll-account-widget__trigger {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	/* Pozwala etykiecie (długi nick zalogowanego klienta) skracać się z "…"
	   zamiast rozpychać przycisk poza miejsce przydzielone przez JS — patrz
	   `positionWidget()` w account-widget.js: gdy zabraknie miejsca między
	   flagami a prawą krawędzią okna, JS zwęża widget przez `max-width`
	   zamiast przesuwać go na flagi (tak jak robił wcześniej). */
	min-width: 0;
	max-width: 100%;
}

.roll-account-widget__icon {
	font-size: 15px;
}

/* WordPress zamienia znak emoji na <img class="emoji"> (spójny wygląd na
   każdym systemie). Prawdziwa przyczyna błędnej szerokości (obserwowane:
   ~2px zamiast 15px) to NIE przegrana reguła WordPressa (tę bijemy łatwo
   wyższą specyficznością) — to uniwersalna reguła motywu `img { max-width:
   100%; height: auto; }`. `max-width` i `width` to różne właściwości, więc
   nie "wygrywają" ze sobą w kaskadzie — oba się stosują; a że rodzic
   (`.roll-account-widget__icon`, blok o szerokości `auto` w layoucie flex)
   sam wylicza swoją szerokość NA PODSTAWIE obrazka, powstaje zależność
   kołowa, którą przeglądarka rozwiązuje przez „shrink-to-fit” — stąd ten
   losowo mały wynik. Jawne `max-width: none` usuwa to ograniczenie, nie
   tylko nadpisuje `width`. */
.roll-account-widget__icon img.emoji {
	width: 15px !important;
	height: 15px !important;
	max-width: none !important;
}

.roll-account-widget__label {
	font-size: 11px;
	font-weight: 700;
	color: #1a1a1a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.roll-account-widget[data-state="auth"] .roll-account-widget__label {
	color: #c60000;
}

.roll-account-widget__panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 320px;
	max-width: calc(100vw - 32px);
	box-sizing: border-box;
	background: #ffffff;
	border-radius: 16px;
	padding: 28px 26px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
	border: 1px solid #ececec;
	z-index: 9001;
	text-align: center;
}

.roll-account-widget__arrow {
	position: absolute;
	top: -8px;
	right: 60px;
	width: 16px;
	height: 16px;
	background: #ffffff;
	border-left: 1px solid #ececec;
	border-top: 1px solid #ececec;
	transform: rotate(45deg);
}

.roll-account-widget__avatar {
	display: flex;
	justify-content: center;
	margin-bottom: 14px;
}

.roll-account-widget__avatar span {
	display: block;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #c60000;
	border: 2px solid #1a1a1a;
	position: relative;
}

.roll-account-widget__avatar span::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	background: #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

/* --- Stan: niezalogowany — reuse formularza /zaloguj (.roll-auth), tylko dopasowane opakowanie. --- */
.roll-account-widget__panel .roll-auth {
	max-width: none;
	margin: 0;
	text-align: left;
}

.roll-account-widget__panel .roll-auth__title {
	font-size: 16px;
	font-weight: 900;
	text-align: center;
	margin: 0 0 6px;
	color: #1a1a1a;
}

.roll-account-widget__panel .roll-auth__intro {
	font-size: 12px;
	color: #666666;
	text-align: center;
	margin: 0 0 18px;
	line-height: 1.5;
}

.roll-account-widget__panel .roll-auth__form {
	padding: 0;
	border: 0;
	background: none;
}

.roll-account-widget__panel .roll-auth__row {
	margin: 0 0 12px;
}

.roll-account-widget__panel .roll-auth__row label {
	display: none;
}

.roll-account-widget__panel .roll-auth__form input[type="email"] {
	max-width: none;
	width: 100%;
	border: 1.5px solid #d9d9d9;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 13px;
	box-sizing: border-box;
}

.roll-account-widget__panel .roll-auth__button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	background: #c60000;
	color: #fff;
	text-align: center;
	border-radius: 10px;
	padding: 12px;
	font-size: 13px;
	font-weight: 700;
}

.roll-account-widget__panel .roll-auth__button:hover,
.roll-account-widget__panel .roll-auth__button:focus {
	background: #d61515;
}

/* Podpowiedź "nie ustawiasz hasła" — poza mockupem, zbędna w tak zwięzłym dropdownie. */
.roll-account-widget__panel .roll-auth__hint {
	display: none;
}

.roll-account-widget__switch {
	font-size: 12px;
	color: #999999;
	text-align: center;
	margin: 16px 0 0;
}

.roll-account-widget__switch a {
	color: #c60000;
	font-weight: 700;
	text-decoration: none;
}

/* --- Stan: zalogowany --- */
.roll-account-widget__greeting {
	font-size: 15px;
	font-weight: 700;
	color: #1a1a1a;
	text-align: center;
	margin: 0 0 14px;
}

.roll-account-widget__balance {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	margin: 0 0 18px;
	padding: 12px;
	border-radius: 10px;
	background: #f7f7f7;
}

.roll-account-widget__balance-num {
	font-size: 22px;
	font-weight: 900;
	color: #c60000;
}

.roll-account-widget__balance-lbl {
	font-size: 12px;
	color: #666666;
}

.roll-account-widget__link {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 11px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	margin: 0 0 10px;
}

.roll-account-widget__link:not(.roll-account-widget__link--button) {
	background: #c60000;
	color: #fff;
}

.roll-account-widget__link:not(.roll-account-widget__link--button):hover,
.roll-account-widget__link:not(.roll-account-widget__link--button):focus {
	background: #d61515;
	color: #fff;
}

.roll-account-widget__logout-form {
	margin: 0;
}

.roll-account-widget__link--button {
	background: none;
	border: 1.5px solid #d9d9d9;
	color: #1a1a1a;
	cursor: pointer;
	margin: 0;
}

.roll-account-widget__link--button:hover,
.roll-account-widget__link--button:focus {
	border-color: #c60000;
	color: #c60000;
}

/* Na wąskich ekranach pasek z flagami jest już ciasny (menu mobilne) —
   widget chowamy, dopóki nie ma osobnego projektu wizualnego pod mobile. */
@media (max-width: 767px) {
	.roll-account-widget {
		display: none;
	}
}

/* --- Wygląd samego przełącznika flag GTranslate (nie nasz element, ale
   skoro i tak integrujemy się z jego pozycją wyżej, tu też jest naturalne
   miejsce na poprawki jego wyglądu) — zgłoszenie właściciela 2026-10-08. --- */

/**
 * Błąd w Dodatkowym CSS właściciela w Customizerze (reguła „ROLL 2026-09-25”,
 * której NIE wolno nam tam poprawiać — WYTYCZNA) podwójnie liczy przesunięcie
 * paska admina WP: `.gt_switcher_wrapper` ma `position:absolute`, a jej
 * kontekstem jest BODY (ta sama reguła ustawia tam `position:relative`) — BODY
 * samo przesuwa się w dół o wysokość paska admina, więc ten pasek i tak już
 * „niesie” flagi razem ze sobą, bez żadnej dodatkowej poprawki. Reguła
 * `body.admin-bar .gt_switcher_wrapper{top:42px}` (zamiast 10px jak u gościa)
 * dokłada to przesunięcie JESZCZE RAZ — stąd u zalogowanego admina flagi
 * lądują 32px niżej WZGLĘDEM paska nad menu niż u gościa (dokładnie to, co
 * widać na zrzutach ekranu właściciela: flagi „pod kreską” zamiast nad nią).
 * Nadpisujemy tu, z celowo podbitą specyficznością (powtórzone klasy — więcej
 * wag niż oryginalna reguła, więc wygrywa niezależnie od kolejności ładowania
 * arkuszy), zamiast ruszać Dodatkowy CSS.
 */
body.admin-bar.admin-bar .gtranslate_wrapper.gtranslate_wrapper .gt_switcher_wrapper {
	top: 10px !important;
}

/* Flagi odrobinę większe (16→19px) i z widocznym odstępem między sobą — żeby
 * było wyraźnie widać, że każda to osobne, klikalne pole (wcześniej stykały
 * się bez przerwy). Wysokość rośnie na tyle mało, że pasek nadal mieści się
 * w tym samym rzędzie, nie dotykając kreski oddzielającej go od menu
 * głównego (sprawdzone na żywo na `testy1.rollsc.pl`).
 */
.gtranslate_wrapper .gt_switcher_wrapper a {
	margin-right: 3px !important;
}

.gtranslate_wrapper .gt_switcher_wrapper a:last-child {
	margin-right: 0 !important;
}

.gtranslate_wrapper .gt_switcher_wrapper a img {
	width: 19px !important;
	height: 19px !important;
}