/*
 * polskielajki (03.11): presety wygladu /moje-konto/ goscia per serwis (makieta konto-gosc R1, decyzja wlasciciela 03.11).
 * Opcja plh_login_look: 1 Karta, 3 Pasek e-mail, 5 Srodek (0 = uklad polskielajki, ten plik sie nie laduje).
 * Kolor marki z PHP (inline style na .plh-login): --b tlo przycisku, --b-on tekst na nim, --b-txt marka jako tekst
 * na bialym (4,5:1), --b-t tint 10%, --b-g poswiata focusu 16%. Selektory z ta sama specyficznoscia co plh-login.css
 * (.plh-login.plh-login--look = .plh-login.plh-login) - wygrywaja kolejnoscia (plik ladowany po plh-login.css).
 */
.plh-login.plh-login--look {
	--pl-acc: var(--b, #FF5D00);
	--pl-acc-bg: var(--b-t, #FFF3EA);
	--pl-line: #EDEDED;
}

/* ---------------------------------------------------------------- wspolne */
.plh-login.plh-login--look .plh-login__ttl { font-size: 30px; letter-spacing: -.01em; }
.plh-login.plh-login--look .plh-login__scr:not(.plh-login__scr--email) .plh-login__ttl { font-size: 24px; }
.plh-login.plh-login--look .plh-login__sub { font-size: 15px; margin: 0 0 24px; }

.plh-login.plh-login--look .plh-login__form input.plh-login__inp:not(#plh-x):focus { border-color: var(--b); box-shadow: 0 0 0 4px var(--b-g); }
.plh-login.plh-login--look .plh-login__form input.plh-login__inp:not(#plh-x)[aria-invalid="true"] { border-color: var(--pl-err); box-shadow: 0 0 0 4px rgba(179, 38, 30, .12); }

.plh-login.plh-login--look .plh-login__btn,
.plh-login.plh-login--look .plh-login__btn:hover,
.plh-login.plh-login--look .plh-login__btn:focus { background: var(--b); color: var(--b-on); }
.plh-login.plh-login--look .plh-login__btn:focus-visible { outline: 2px solid var(--b-txt); outline-offset: 2px; }

.plh-login.plh-login--look .plh-login__lnk { font-size: 15px; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.plh-login.plh-login--look .plh-login__lnk:hover,
.plh-login.plh-login--look .plh-login__inl:hover,
.plh-login.plh-login--look .plh-login__rs:not([disabled]):hover,
.plh-login.plh-login--look .plh-login__legal a:hover { text-decoration-color: var(--b); text-decoration-thickness: 2px; }
/* Polityka prywatnosci pod formularzem (tylko ekran e-mail - informacja o Regulaminie na "Prawie gotowe" bez zmian) */
.plh-login.plh-login--look .plh-login__scr--email .plh-login__legal { margin: 4px 0 0; }
.plh-login.plh-login--look .plh-login__scr--email .plh-login__legal a { color: var(--pl-mute); display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }
.plh-login.plh-login--look .plh-login__scr--email .plh-login__legal a:hover { color: var(--pl-mute); }
.plh-login.plh-login--look .plh-login__lnk:focus-visible,
.plh-login.plh-login--look .plh-login__inl:focus-visible,
.plh-login.plh-login--look .plh-login__rs:focus-visible,
.plh-login.plh-login--look a:focus-visible { outline-color: var(--b-txt); }

/* "Zmien" przy adresie w kroku 2 (istniejaca akcja data-go="email") */
.plh-login.plh-login--look .plh-login__chg { margin-left: 6px; font-size: 14px; font-weight: 500; color: var(--b-txt); text-underline-offset: 3px; }
.plh-login.plh-login--look .plh-login__chg:hover,
.plh-login.plh-login--look .plh-login__chg:focus { color: var(--b-txt); }

/* Ikona stanu: tint marki, ikona w kolorze marki-tekstu (stany bledu/sukcesu bez zmian) */
.plh-login.plh-login--look .plh-login__circ:not(.plh-login__circ--err):not(.plh-login__circ--ok) { background: var(--b-t); color: var(--b-txt); }

/* Pole kodu 6 x 56 px, szer. 340 */
.plh-login.plh-login--look .plh-login__otp { width: 340px; height: 56px; }
.plh-login.plh-login--look .plh-login__cells { height: 56px; }
.plh-login.plh-login--look .plh-login__cells span { height: 56px; flex: 1 1 0; width: auto; font-size: 24px; }
.plh-login.plh-login--look .plh-login__cells span.is-on { border-color: var(--pl-field); }
.plh-login.plh-login--look .plh-login__cells span.is-cur { border-color: var(--b); box-shadow: 0 0 0 4px var(--b-g); }
.plh-login.plh-login--look .plh-login__otp.is-err .plh-login__cells span { background: var(--pl-err-bg); color: var(--pl-err); }

.plh-login.plh-login--look .plh-login__meta { margin: 16px 0 0; }
.plh-login.plh-login--look .plh-login__rs { margin: 4px auto 0; }

/* Panel W Twoim koncie (tylko preset 3) - tekst marki dla ikony Skarbonki */
.plh-login.plh-login--look .plh-login__ico--acc { color: var(--b-txt); }

/* ---------------------------------------------------------------- 1 Karta i 3 Pasek: krok 2 do lewej, kwadrat 44 */
.plh-login.plh-login--l1 .plh-login__scr--code .plh-login__ctr,
.plh-login.plh-login--l3 .plh-login__scr--code .plh-login__ctr { text-align: left; }
.plh-login.plh-login--l1 .plh-login__scr--code .plh-login__circ,
.plh-login.plh-login--l3 .plh-login__scr--code .plh-login__circ { width: 44px; height: 44px; border-radius: 8px; margin: 0 0 16px; }
.plh-login.plh-login--l1 .plh-login__scr--code .plh-login__circ svg,
.plh-login.plh-login--l3 .plh-login__scr--code .plh-login__circ svg { width: 20px; height: 20px; }
.plh-login.plh-login--l1 .plh-login__scr--code .plh-login__otp,
.plh-login.plh-login--l3 .plh-login__scr--code .plh-login__otp { margin: 0; }
.plh-login.plh-login--l1 .plh-login__scr--code .plh-login__err,
.plh-login.plh-login--l3 .plh-login__scr--code .plh-login__err { justify-content: flex-start; margin-top: 8px; }
.plh-login.plh-login--l1 .plh-login__scr--code .plh-login__meta,
.plh-login.plh-login--l3 .plh-login__scr--code .plh-login__meta { text-align: left; }
.plh-login.plh-login--l1 .plh-login__scr--code .plh-login__rs,
.plh-login.plh-login--l3 .plh-login__scr--code .plh-login__rs { justify-content: flex-start; margin: 4px 0 0; padding: 0; }
.plh-login.plh-login--l1 .plh-login__scr--code.plh-login__scr .plh-login__foot .plh-login__lnk,
.plh-login.plh-login--l3 .plh-login__scr--code.plh-login__scr .plh-login__foot .plh-login__lnk { margin: 6px 0 0; }
.plh-login.plh-login--look .plh-login__lrow-help { display: none; }

/* ---------------------------------------------------------------- 1 Karta: biala karta 440 na jasnoszarym pasie */
.plh-login.plh-login--l1 {
	max-width: none; margin: -60px 0 -100px; padding: 72px 0 96px; /* -60 = mt__60 kolumny motywu, -100 = padding-bottom .woocommerce: pas od headera do stopki */
	background: #F7F6F5; box-shadow: 0 0 0 100vmax #F7F6F5; clip-path: inset(0 -100vmax);
}
.plh-login.plh-login--l1 .plh-login__main { width: 440px; background: #fff; border: 1px solid #EDEDED; border-radius: 8px; padding: 40px; }

/* ---------------------------------------------------------------- 5 Srodek: kolumna 400, wszystko na srodku */
.plh-login.plh-login--l5 .plh-login__scr--email .plh-login__circ { margin: 0 auto 20px; }
.plh-login.plh-login--l5 .plh-login__scr--email :is(.plh-login__ttl, .plh-login__sub, .plh-login__legal) { text-align: center; }
.plh-login.plh-login--l5 .plh-login__scr--email .plh-login__foot .plh-login__lnk { margin: 6px auto 0; }
.plh-login.plh-login--l5 .plh-login__scr--email .plh-login__legal { display: flex; justify-content: center; }

/* ---------------------------------------------------------------- 3 Pasek e-mail */
.plh-login.plh-login--l3 { max-width: 880px; }
.plh-login.plh-login--l3 .plh-login__cols { flex-direction: column; align-items: stretch; gap: 0; }
.plh-login.plh-login--l3 .plh-login__main,
.plh-login.plh-login--l3 .plh-login__side { width: 100%; }
/* ekrany pomocnicze (wygasly kod, pomoc, Prawie gotowe) bez rozciagania na 880 px */
.plh-login.plh-login--l3 :is(.plh-login__scr--dead, .plh-login__scr--ok, .plh-login__scr--new) { width: 100%; max-width: 440px; margin: 0 auto; }
.plh-login.plh-login--l3 .plh-login__scr--help { max-width: 600px; }
.plh-login.plh-login--l3 .plh-login__side { margin-top: 48px; padding-top: 28px; border-top: 1px solid #EDEDED; }
.plh-login.plh-login--l3 .plh-login__side .plh-login__h2 { font-size: 13px !important; font-weight: 500; line-height: 1.4 !important; color: var(--pl-mute); margin: 0 0 16px; }
.plh-login.plh-login--l3 .plh-login__side .plh-login__small { display: none; }
.plh-login.plh-login--l3 .plh-login__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.plh-login.plh-login--l3 .plh-login__list li,
.plh-login.plh-login--l3 .plh-login__list li:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-height: 0; padding: 0; border: 0; }
.plh-login.plh-login--l3 .plh-login__ico { width: 20px; height: 20px; flex: none; background: none; border-radius: 0; color: var(--b-txt); margin: 0 0 8px; justify-content: flex-start; }
.plh-login.plh-login--l3 .plh-login__ico svg { width: 20px; height: 20px; }
.plh-login.plh-login--l3 .plh-login__rt { gap: 4px; }
.plh-login.plh-login--l3 .plh-login__rt b { font-size: 15px; }
.plh-login.plh-login--l3 .plh-login__rt span { font-size: 13px; line-height: 1.45; }

/* Desktop / tablet: pole + "Wyslij kod" i kod + "Zaloguj sie" w jednym rzedzie (siatka; body i foot jako display:contents) */
@media (min-width: 768px) {
	.plh-login.plh-login--l3 .plh-login__scr--email .plh-login__form { display: grid; grid-template-columns: max-content max-content 1fr 200px; column-gap: 8px; align-items: start; }
	.plh-login.plh-login--l3 .plh-login__scr--email :is(.plh-login__body, .plh-login__foot) { display: contents; }
	.plh-login.plh-login--l3 .plh-login__scr--email .plh-login__ttl { grid-row: 1; grid-column: 1 / -1; }
	.plh-login.plh-login--l3 .plh-login__scr--email .plh-login__sub { grid-row: 2; grid-column: 1 / -1; }
	.plh-login.plh-login--l3 .plh-login__scr--email .plh-login__lbl { grid-row: 3; grid-column: 1 / -1; }
	.plh-login.plh-login--l3 .plh-login__scr--email .plh-login__inp { grid-row: 4; grid-column: 1 / 4; }
	.plh-login.plh-login--l3 .plh-login__scr--email .plh-login__btn { grid-row: 4; grid-column: 4; }
	.plh-login.plh-login--l3 .plh-login__scr--email .plh-login__err { grid-row: 5; grid-column: 1 / -1; }
	.plh-login.plh-login--l3 .plh-login__scr--email .plh-login__help-lnk { grid-row: 6; grid-column: 1; margin: 8px 0 0; }
	.plh-login.plh-login--l3 .plh-login__scr--email .plh-login__legal { grid-row: 6; grid-column: 2; margin: 8px 0 0 16px; }

	.plh-login.plh-login--l3 .plh-login__scr--code { display: grid; grid-template-columns: 340px 200px 1fr; column-gap: 8px; align-items: start; }
	.plh-login.plh-login--l3 .plh-login__scr--code[hidden] { display: none !important; }
	.plh-login.plh-login--l3 .plh-login__scr--code :is(.plh-login__body, .plh-login__foot) { display: contents; }
	.plh-login.plh-login--l3 .plh-login__scr--code .plh-login__circ { grid-row: 1 / 3; grid-column: 1; margin: 2px 0 0; }
	.plh-login.plh-login--l3 .plh-login__scr--code .plh-login__ttl { grid-row: 1; grid-column: 1 / -1; padding-left: 60px; }
	.plh-login.plh-login--l3 .plh-login__scr--code .plh-login__sub { grid-row: 2; grid-column: 1 / -1; padding-left: 60px; margin-bottom: 20px; }
	.plh-login.plh-login--l3 .plh-login__scr--code .plh-login__clbl { grid-row: 3; grid-column: 1 / -1; }
	.plh-login.plh-login--l3 .plh-login__scr--code .plh-login__otp { grid-row: 4; grid-column: 1; }
	.plh-login.plh-login--l3 .plh-login__scr--code .plh-login__btn { grid-row: 4; grid-column: 2; align-self: center; }
	.plh-login.plh-login--l3 .plh-login__scr--code .plh-login__err { grid-row: 5; grid-column: 1 / -1; }
	.plh-login.plh-login--l3 .plh-login__scr--code .plh-login__lrow { grid-row: 6; grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; margin-top: 8px; }
	.plh-login.plh-login--l3 .plh-login__scr--code .plh-login__lrow .plh-login__meta,
	.plh-login.plh-login--l3 .plh-login__scr--code .plh-login__lrow .plh-login__rs,
	.plh-login.plh-login--l3 .plh-login__scr--code .plh-login__lrow .plh-login__lnk { margin: 0; }
	.plh-login.plh-login--l3 .plh-login__scr--code .plh-login__lrow-help { display: flex; }
	.plh-login.plh-login--l3 .plh-login__scr--code .plh-login__foot > .plh-login__help-lnk { display: none; }
}

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1023px) {
	.plh-login.plh-login--look .plh-login__ttl { font-size: 28px; }
	.plh-login.plh-login--look .plh-login__scr:not(.plh-login__scr--email) .plh-login__ttl { font-size: 24px; }
	.plh-login.plh-login--l1 { max-width: none; margin: -60px 0 -100px; padding: 48px 0 72px; }
	.plh-login.plh-login--l3 { max-width: 880px; }
	.plh-login.plh-login--l3 .plh-login__list { gap: 16px; }
	/* preset 3: korzysci widoczne tez w kroku 2 */
	.plh-login.plh-login--l3[data-scr="code"] .plh-login__side { display: block; }
}

/* 768-1023: kolumna motywu bez marginesu bocznego (szersza niz okno) - wlasny margines 24 px */
@media (min-width: 768px) and (max-width: 1023px) {
	.plh-login.plh-login--l3 { padding-left: 24px; padding-right: 24px; }
}

/* ---------------------------------------------------------------- telefon */
@media (max-width: 767px) {
	/* Presety: przycisk w tresci (jak makieta), bez przyklejonej stopki; zostaje stopka nad klawiatura (is-kb). */
	.plh-login.plh-login--look .plh-login__scr--code,
	.plh-login.plh-login--look .plh-login__scr--dead,
	.plh-login.plh-login--look .plh-login__scr--new { min-height: 0; }
	.plh-login.plh-login--look .plh-login__scr--code .plh-login__body,
	.plh-login.plh-login--look .plh-login__scr--dead .plh-login__body,
	.plh-login.plh-login--look .plh-login__scr--new .plh-login__body { flex: 0 0 auto; }
	.plh-login.plh-login--look .plh-login__scr--code .plh-login__foot,
	.plh-login.plh-login--look .plh-login__scr--dead .plh-login__foot,
	.plh-login.plh-login--look .plh-login__scr--new .plh-login__foot { position: static; margin: 0; padding: 20px 0 0; border-top: 0; }
	.plh-login.plh-login--look .plh-login__otp { width: 100%; max-width: 340px; }
	.plh-login.plh-login--look .plh-login__cells { gap: 6px; }

	.plh-login.plh-login--l1 { margin: -25px 0 -100px; padding: 24px 0 40px; } /* mt__60 motywu na telefonie = 25 px */
	.plh-login.plh-login--l1 .plh-login__main { padding: 24px 20px; }
	.plh-login.plh-login--l5 { padding-top: 24px; }

	.plh-login.plh-login--l3 .plh-login__clbl { display: none; } /* krok 2 na telefonie jak L4 - bez etykiety nad polem */
	.plh-login.plh-login--l3 .plh-login__side { margin-top: 28px; padding-top: 20px; }
	.plh-login.plh-login--l3 .plh-login__side .plh-login__h2 { margin-bottom: 12px; }
	/* korzysci jako karty przewijane w bok, do krawedzi ekranu (kolumna motywu 15 px + 5 px kontenera) */
	.plh-login.plh-login--l3 .plh-login__list {
		display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: auto; scrollbar-width: none;
		margin: 0 -20px; padding: 0 20px 4px; scroll-padding: 0 20px;
	}
	.plh-login.plh-login--l3 .plh-login__list::-webkit-scrollbar { display: none; }
	.plh-login.plh-login--l3 .plh-login__list li,
	.plh-login.plh-login--l3 .plh-login__list li:last-child { flex: 0 0 150px; border: 1px solid #EDEDED; border-radius: 8px; padding: 14px; scroll-snap-align: start; }
	.plh-login.plh-login--l3 .plh-login__ico { margin-bottom: 6px; }
}

/* Strona posrednia linku z maila (/?plh_link=1) przy presecie > 0: tylko kolory marki, uklad jak polskielajki */
.plh-login.plh-login--brand { --pl-acc: var(--b, #FF5D00); --pl-acc-bg: var(--b-t, #FFF3EA); }
.plh-login.plh-login--brand .plh-login__circ { color: var(--b-txt); }
.plh-login.plh-login--brand .plh-login__btn,
.plh-login.plh-login--brand .plh-login__btn:hover,
.plh-login.plh-login--brand .plh-login__btn:focus { background: var(--b); color: var(--b-on); }
.plh-login.plh-login--brand .plh-login__btn:focus-visible { outline: 2px solid var(--b-txt); outline-offset: 2px; }