/* Przycisk „Zaloguj się przez Apple".
   Czerń i biel to wymóg wytycznych Apple, nie wybór stylistyczny — dlatego jako
   jedyny element sklepu stoi poza paletą marki. Wysokość, promień i krój bierze
   z motywu, żeby stał równo obok przycisków WooCommerce. */
.btk-apple-btn {
	display: flex; align-items: center; justify-content: center; gap: 9px;
	width: 100%; box-sizing: border-box; padding: 11px 18px;
	background: #000; color: #fff; text-decoration: none;
	border: 1.5px solid #000; border-radius: var(--btk-r-btn, 14px);
	font-family: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.4;
	transition: opacity .12s ease;
}
.btk-apple-btn:hover,
.btk-apple-btn:focus-visible { color: #fff; opacity: .86; }
.btk-apple-btn svg { flex: 0 0 auto; }
/* W trybie ciemnym czarny przycisk na ciemnym tle zlewa się z kartą — Apple
   dopuszcza wtedy wariant biały ze znakiem w czerni. */
html[data-theme="dark"] .btk-apple-btn {
	background: #fff; color: #000; border-color: #fff;
}
html[data-theme="dark"] .btk-apple-btn:hover,
html[data-theme="dark"] .btk-apple-btn:focus-visible { color: #000; }
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .btk-apple-btn { background: #fff; color: #000; border-color: #fff; }
	html:not([data-theme="light"]) .btk-apple-btn:hover { color: #000; }
}

/* ---------- jeden kształt dla WSZYSTKICH przycisków społecznościowych ----------
   Uwaga właściciela 2026-08-05: „każdy jest inny, loga rozmieszczone w różnych
   odstępach". Apple rysujemy sami, Facebooka i Google renderuje Nextend własnym
   markupem (.nsl-button) z ikoną w osobnym kontenerze i etykietą wyśrodkowaną
   w reszcie szerokości — stąd logo uciekało do lewej krawędzi, a tekst pływał.
   Sprowadzamy wszystkie trzy do tej samej geometrii: ikona i etykieta jako jedna
   wyśrodkowana grupa, ta sama wysokość, promień, krój i odstęp.
   Wyglądu SAMYCH logotypów nie ruszamy — to znaki towarowe dostawców. */
.btk-social-login { display: flex; flex-direction: column; gap: 10px; }
.btk-social-login .nsl-container { margin: 0 !important; padding: 0 !important; }
.btk-social-login .nsl-container-buttons { display: flex; flex-direction: column; gap: 10px; }

.btk-social-login .nsl-button.nsl-button-default {
	display: flex !important; align-items: center; justify-content: center; gap: 9px;
	width: 100%; box-sizing: border-box; min-height: 46px; padding: 0 18px;
	border-radius: var(--btk-r-btn, 14px) !important;
	border: 1px solid var(--wp--preset--color--line, #EEE8DD) !important;
	box-shadow: none !important;
}
/* Ikona: bez własnego pudełka i bez rozpychania — ma stać przy tekście. */
.btk-social-login .nsl-button-svg-container {
	flex: 0 0 auto; width: auto !important; min-width: 0 !important;
	padding: 0 !important; margin: 0 !important; background: none !important;
	border: 0 !important; display: flex; align-items: center;
}
.btk-social-login .nsl-button-svg-container svg { width: 18px !important; height: 18px !important; display: block; }
/* Etykieta: nie rozciąga się na resztę wiersza, więc grupa zostaje na środku. */
.btk-social-login .nsl-button-label-container {
	flex: 0 0 auto; width: auto !important; margin: 0 !important; padding: 0 !important;
	font-family: inherit !important; font-size: 14.5px !important; font-weight: 700 !important;
	line-height: 1.4 !important; text-align: left !important;
}
/* Apple ma własną wysokość — zrównujemy z resztą. */
.btk-social-login .btk-apple-btn { min-height: 46px; padding: 0 18px; }

/* Nextend ładuje swój arkusz PO naszym, a jego reguły mają ten sam ciężar co
   nasze — przy remisie wygrywa kolejność. Do tego markup jest inny, niż zakładałem
   za pierwszym razem: `.nsl-button` to DIV wewnątrz BEZKLASOWEGO `<a>`, a kontener
   niesie `data-align`. Selektor z `a.nsl-button` nie pasował do niczego i reguła
   centrowania po prostu nie wchodziła (druga odsłona uwagi właściciela 2026-08-05).
   Poniżej selektory zgodne z realnym DOM-em, potwierdzonym renderem z serwera. */
.btk-social-login .nsl-container { display: block !important; text-align: center !important; }
.btk-social-login .nsl-container-buttons > a { display: block; width: 100%; text-decoration: none; }

.btk-social-login .nsl-button.nsl-button-default {
	justify-content: center !important;
}
.btk-social-login .nsl-button.nsl-button-default .nsl-button-label-container {
	flex: 0 0 auto !important;
	width: auto !important;
	margin: 0 !important;
	text-align: left !important;
}
.btk-social-login .nsl-button.nsl-button-default .nsl-button-svg-container {
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---------- zakładka „Połączone konta": jeden kształt dla trzech wierszy ----------
   Uwaga właściciela 2026-08-05: „to nie jest spójne". Nasz Apple był obrysowanym
   przyciskiem marki, a Facebook i Google przychodziły z Nextenda jako logo sklejone
   z pogrubionym czarnym tekstem, bez żadnej ramki. Sprowadzamy wszystkie trzy do
   obrysowanej pigułki w kolorze marki: to jest akcja na WŁASNYM koncie, a nie
   przycisk logowania dostawcy, więc kolory marek tu nie obowiązują — zostają
   same logotypy. Tło Nextend wpisuje w atrybut `style`, stąd `!important`. */
.btk-linked__row {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	flex-wrap: wrap;
}
.btk-linked__btn,
.btk-linked .nsl-button.nsl-button-default {
	display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
	/* `height` z !important, bo Nextend narzuca swoim przyciskom 40 px, a nasz
	   miał 42 — zmierzone. `min-width` z zapasem na najdłuższą etykietę
	   (Odłącz konto od Facebooka = 253 px), żeby prawa kolumna stała w jednej
	   linii, a nie schodkowała. */
	height: 42px !important; min-width: 264px; padding: 0 16px; box-sizing: border-box;
	background: transparent !important; box-shadow: none !important;
	color: var(--wp--preset--color--accent, #047857) !important;
	border: 1.5px solid var(--wp--preset--color--accent, #047857) !important;
	border-radius: var(--btk-r-btn, 14px) !important;
	font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important;
	line-height: 1.4 !important; text-decoration: none;
}
.btk-linked__btn:hover,
.btk-linked .nsl-button.nsl-button-default:hover {
	background: var(--wp--preset--color--accent-soft, #E5F3EC) !important;
}
/* Kotwica Nextenda ma inline `display:inline-block` — bez tego pigułka nie trzyma szerokości. */
.btk-linked a[data-plugin="nsl"] { display: inline-block !important; box-shadow: none !important; }
.btk-linked .nsl-button-label-container {
	flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important;
	color: inherit !important; font: inherit !important; text-align: left !important;
}
.btk-linked .nsl-button-label-container b { font-weight: 700; }
.btk-linked .nsl-button-svg-container {
	flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; background: none !important;
}
.btk-linked .nsl-button-svg-container svg { width: 16px !important; height: 16px !important; display: block; }
.btk-linked__state { font-size: 14.5px; }