/**
 * Fluent Access Levels — style frontendu (blok zablokowanej treści).
 *
 * Wygląd przeniesiony z autorskiego CSS NeuroExpert, ale zawężony do `.fal-locked`
 * (klasa, którą wtyczka emituje ZAWSZE) zamiast do `.suple-zawartosc`. Dzięki temu
 * blokada wygląda tak samo również poza sekcją suplementów: przy blokowaniu całych
 * wpisów, innych typów treści i w widgecie Elementora.
 *
 * ŚWIADOMIE BEZ `!important` i o niskiej specyficzności — jeżeli masz własny
 * arkusz zawężony do `.suple-zawartosc`, jego reguły nadal wygrywają. Ten plik
 * jest wartością domyślną, nie nadpisywaczem.
 *
 * Wyłączenie: Access Levels → Zajawki i zgodność → "Ładuj style wtyczki".
 *
 * Markup, którego dotyczy (klasy `ne-*` emitowane równolegle dla zgodności):
 *   .fal-locked > .fal-locked-teaser > p
 *              > .fal-locked-blur (4 × span, ukrywane — atrapę rysuje ::before)
 *              > .fal-access-box > .fal-access-lock + .fal-access-box-content + a
 */

/* Deterministyczny box model wewnątrz bloku. Bez tego wysokość przycisku
   (min-height + padding) zależałaby od tego, czy motyw ustawia globalnie
   border-box — ta sama blokada miałaby inną wysokość w różnych motywach. */
.fal-locked,
.fal-locked *,
.fal-locked *::before,
.fal-locked *::after {
	box-sizing: border-box;
}

.fal-locked {
	--fal-primary: #1577af;
	--fal-primary-dk: #11618e;
	--fal-head: #0a3a55;
	--fal-body: #334155;
	--fal-muted: #475569;
	--fal-box-bg: #f8fcfe;
	--fal-box-border: #cce4f3;
	/* Kolor tła, w który wygasza się zajawka — zmień, jeśli sekcja nie jest biała. */
	--fal-fade: 255, 255, 255;

	position: relative;
	max-width: 820px;
	margin: 0;
}

/* =========================================================
   ZAJAWKA — przycięta serwerowo, dodatkowo wygaszona wizualnie
========================================================= */

.fal-locked-teaser {
	position: relative;
	max-height: 145px;
	margin-bottom: 0;
	overflow: hidden;
}

/* Naturalne wygaszenie końcówki widocznego tekstu. */
.fal-locked-teaser::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 72px;
	background: linear-gradient(
		to bottom,
		rgba(var(--fal-fade), 0) 0%,
		rgba(var(--fal-fade), 0.72) 58%,
		rgba(var(--fal-fade), 1) 100%
	);
	pointer-events: none;
}

.fal-locked-teaser p {
	max-width: 78ch;
	margin: 0 0 18px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6em;
	color: var(--fal-body);
	text-align: left;
}

/* =========================================================
   ATRAPA ROZMYTEGO TEKSTU
   To wyłącznie dekoracja — żaden fragment chronionej treści tu nie trafia.
========================================================= */

.fal-locked-blur {
	position: relative;
	height: 132px;
	margin: -4px 0 -28px;
	padding: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Paski-atrapy z markupu są zbędne — kształt rysuje ::before. */
.fal-locked-blur span {
	display: none;
}

.fal-locked-blur::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: min(78ch, 100%);
	height: 118px;
	background:
		linear-gradient(90deg, rgba(71, 85, 105, 0.11) 0 72%, transparent 72% 100%) 0 0 / 100% 18px,
		linear-gradient(90deg, rgba(71, 85, 105, 0.1) 0 88%, transparent 88% 100%) 0 24px / 100% 18px,
		linear-gradient(90deg, rgba(71, 85, 105, 0.085) 0 66%, transparent 66% 100%) 0 48px / 100% 18px,
		linear-gradient(90deg, rgba(71, 85, 105, 0.07) 0 79%, transparent 79% 100%) 0 72px / 100% 18px,
		linear-gradient(90deg, rgba(71, 85, 105, 0.055) 0 54%, transparent 54% 100%) 0 96px / 100% 18px;
	background-repeat: no-repeat;
	border-radius: 12px;
	filter: blur(7px);
	opacity: 0.9;
	transform: translateY(2px);
}

/* Mgła wygaszająca rozmycie ku dołowi. */
.fal-locked-blur::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(var(--fal-fade), 0.08) 0%,
		rgba(var(--fal-fade), 0.52) 45%,
		rgba(var(--fal-fade), 0.96) 88%,
		rgba(var(--fal-fade), 1) 100%
	);
}

/* =========================================================
   BOX BLOKADY
========================================================= */

.fal-access-box {
	position: relative;
	z-index: 5;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 18px;
	width: 100%;
	max-width: 100%;
	margin-top: 0;
	padding: 24px 26px;
	background-color: var(--fal-box-bg);
	border: 1px solid var(--fal-box-border);
	border-radius: 18px;
	box-shadow:
		0 18px 42px rgba(15, 23, 42, 0.075),
		0 1px 2px rgba(15, 23, 42, 0.04);
	overflow: hidden;
}

/* Delikatny akcent w tle boxa. */
.fal-access-box::before {
	content: "";
	position: absolute;
	left: -80px;
	top: -90px;
	width: 180px;
	height: 180px;
	background: radial-gradient(
		circle,
		rgba(21, 119, 175, 0.08) 0%,
		rgba(21, 119, 175, 0.035) 46%,
		transparent 70%
	);
	pointer-events: none;
}

/* --- ikona kłódki (pusty element, ikona jako data: URI — bez zapytań HTTP) --- */
.fal-access-lock {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	min-width: 48px;
	background-color: #fff;
	border: 1px solid rgba(21, 119, 175, 0.28);
	border-radius: 999px;
	color: var(--fal-primary);
	box-shadow:
		0 8px 18px rgba(15, 23, 42, 0.06),
		inset 0 0 0 4px rgba(234, 244, 250, 0.7);
	overflow: hidden;
}

.fal-access-lock::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231577AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* --- teksty --- */
.fal-access-box-content {
	position: relative;
	z-index: 2;
	min-width: 0;
}

.fal-access-box-title {
	margin: 0 0 5px;
	padding: 0;
	font-family: inherit;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--fal-head);
}

.fal-access-box-desc {
	max-width: 58ch;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.58em;
	color: var(--fal-muted);
	text-align: left;
}

/* Motywy lubią doklejać ozdobniki do nagłówków i akapitów w treści. */
.fal-access-box-title::before,
.fal-access-box-title::after,
.fal-access-box-desc::before,
.fal-access-box-desc::after {
	content: none;
	display: none;
}

/* --- przycisk ---
   Motywy i buildery bardzo często resetują linki w treści regułami o wysokiej
   specyficzności (np. `#content a`, `.entry-content a`), co potrafi zdjąć tło
   i padding z przycisku. Dlatego selektor jest tu wzmocniony o `.fal-locked`,
   a `!important` stoi WYŁĄCZNIE przy właściwościach, które takie resety
   najczęściej nadpisują. Geometria (marginesy, szerokość, grid) zostaje
   swobodnie nadpisywalna. */
.fal-locked .fal-access-box a.fal-access-box-btn,
.fal-locked .fal-access-box a.fal-access-box-btn:visited {
	position: relative;
	z-index: 2;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 132px;
	min-height: 43px;
	padding: 12px 20px !important;
	background-color: var(--fal-primary) !important;
	background-image: none !important;
	border: 1px solid var(--fal-primary) !important;
	border-radius: 999px !important;
	color: #fff !important;
	font-family: inherit;
	font-size: 0.91rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none !important;
	white-space: nowrap;
	box-shadow: 0 8px 18px rgba(21, 119, 175, 0.18);
	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease;
}

.fal-locked .fal-access-box a.fal-access-box-btn::before,
.fal-locked .fal-access-box a.fal-access-box-btn::after {
	content: none !important;
	display: none !important;
}

.fal-locked .fal-access-box a.fal-access-box-btn:hover,
.fal-locked .fal-access-box a.fal-access-box-btn:focus,
.fal-locked .fal-access-box a.fal-access-box-btn:active {
	background-color: var(--fal-primary-dk) !important;
	border-color: var(--fal-primary-dk) !important;
	color: #fff !important;
	text-decoration: none !important;
	box-shadow: 0 11px 24px rgba(21, 119, 175, 0.25);
	transform: translateY(-1px);
}

.fal-locked .fal-access-box a.fal-access-box-btn:focus-visible {
	outline: 3px solid rgba(21, 119, 175, 0.22);
	outline-offset: 3px;
}

/* --- link dodatkowy ("Masz już konto? Zaloguj się") --- */
.fal-locked .fal-access-box a.fal-access-box-alt {
	display: inline-block;
	margin-top: 8px;
	background: none !important;
	padding: 0 !important;
	border: 0 !important;
	color: var(--fal-primary) !important;
	font-family: inherit;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline !important;
}

.fal-locked .fal-access-box a.fal-access-box-alt:hover,
.fal-locked .fal-access-box a.fal-access-box-alt:focus {
	color: var(--fal-primary-dk) !important;
}

/* Szanuj ustawienie systemowe „ogranicz animacje". */
@media (prefers-reduced-motion: reduce) {
	.fal-access-box a.fal-access-box-btn {
		transition: none;
	}
	.fal-access-box a.fal-access-box-btn:hover {
		transform: none;
	}
}

/* --- wariant premium --- */
.fal-locked.ne-locked-preview-premium .fal-access-box {
	border-color: rgba(21, 119, 175, 0.42);
}

/* =========================================================
   KOMUNIKAT BEZ ZAJAWKI (behavior="message")
========================================================= */

.fal-restricted-notice {
	max-width: 820px;
	margin: 1.5rem 0;
	padding: 1.1rem 1.3rem;
	background: #f8fcfe;
	border: 1px solid #cce4f3;
	border-radius: 18px;
}

.fal-restricted-message {
	margin: 0 0 0.75rem;
	color: #475569;
}

.fal-btn {
	display: inline-block;
	padding: 12px 20px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.91rem;
	text-decoration: none;
}

.fal-btn-primary {
	background: #1577af;
	color: #fff;
}

.fal-btn-secondary {
	background: #fff;
	color: #0a3a55;
	border: 1px solid #cce4f3;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
	.fal-locked-teaser {
		max-height: 122px;
	}

	.fal-locked-blur {
		height: 116px;
		margin-bottom: -22px;
	}

	.fal-access-box {
		grid-template-columns: auto 1fr;
		gap: 14px;
		padding: 22px 20px;
	}

	.fal-access-lock {
		width: 44px;
		height: 44px;
		min-width: 44px;
	}

	.fal-access-lock::before {
		width: 22px;
		height: 22px;
	}

	.fal-access-box a.fal-access-box-btn {
		grid-column: 1 / -1;
		width: 100%;
		margin-top: 4px;
	}
}