/**
 * Pop-up newslettera (T-14, §8 architektury).
 * Biel, kolory marki tylko jako akcent, dużo przestrzeni. Tło strony przyciemnione.
 */

.bizstrefa-np-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: rgba( 17, 17, 17, 0.55 );
	opacity: 0;
	transition: opacity 0.25s ease;
}

.bizstrefa-np-overlay.is-visible {
	opacity: 1;
}

.bizstrefa-np-overlay[hidden] {
	display: none;
}

.bizstrefa-np-dialog {
	position: relative;
	width: 100%;
	/* T-22: 460 px → 690 px (+50%). T-43: 690/900 px z panelu Wygląd → Ustaw pop-up (styl inline dialogu). */
	max-width: var( --bizstrefa-np-szerokosc, 690px );
	max-height: calc( 100vh - 3rem );
	overflow: auto;
	background: #ffffff;
	box-shadow: 0 12px 48px rgba( 17, 17, 17, 0.25 );
	transform: translateY( 8px );
	transition: transform 0.25s ease;
}

.bizstrefa-np-overlay.is-visible .bizstrefa-np-dialog {
	transform: none;
}

.bizstrefa-np-dialog:focus {
	outline: none;
}

/*
 * T-22: szerokość i odstępy wewnętrzne należą do wzorca 518, nie do okna.
 * Okno nie dokłada własnego paddingu, więc grupa wzorca (z tłem, gradientem
 * i obrazem) sięga krawędzi dialogu, a oddech daje jej `has-global-padding`
 * (7,5% z theme.json) albo padding ustawiony w edytorze.
 */
.bizstrefa-np-body {
	padding: 0;
	border-top: 3px solid #c6d8e4;
}

/*
 * Root padding z theme.json ma 0 na górze i dole, więc bez tego treść kleiłaby
 * się do krawędzi okna. Padding ustawiony we wzorcu w edytorze przychodzi jako
 * styl inline i tę regułę nadpisuje.
 */
.bizstrefa-np-body > .wp-block-group,
.bizstrefa-np-body > .wp-block-columns {
	padding-top: 2.5rem;
	padding-bottom: 2rem;
}

/*
 * Bloki wzorca mogą przyjść z ograniczeniem szerokości (layout „constrained").
 * W oknie szerokość wyznacza samo okno — kasujemy ograniczenia i wyśrodkowania,
 * żeby grupa, kolumny, formularz i klauzula rozpinały się na pełną szerokość.
 */
.bizstrefa-np-body > *:not( .bizstrefa-np-close ),
.bizstrefa-np-body .is-layout-constrained > *,
.bizstrefa-np-body .fluentform,
.bizstrefa-np-body .fluentform form {
	max-width: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

.bizstrefa-np-close {
	position: absolute;
	top: 0.25rem;
	right: 0.25rem;
	/* Grupa wzorca 518 ma position:relative i stoi po krzyżyku w DOM — bez tego przykrywa go i X nie reaguje. */
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	/* Krzyżyk leży na tle wzorca (gradient/obraz) — biała podkładka dla czytelności. */
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.85 );
	font-size: 1.75rem;
	line-height: 1;
	color: #111111;
	cursor: pointer;
}

.bizstrefa-np-close:focus-visible {
	outline: 2px solid #2f4f63;
	outline-offset: 2px;
}

.bizstrefa-np-title {
	margin: 0 0 0.75rem;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 1.5rem;
	line-height: 1.25;
	color: #111111;
}

.bizstrefa-np-intro {
	margin: 0 0 1.5rem;
	color: #111111;
}

.bizstrefa-np-note {
	margin: 1.25rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #111111;
	opacity: 0.7;
}

/*
 * Drobny tekst zgód i klauzuli art. 13 RODO z Fluent Forms wewnątrz okna:
 * etykieta checkboxa zgody, pole GDPR, blok Custom HTML z klauzulą. Dodatkowo
 * klasa .bizstrefa-np-fineprint do wpisania w polu FF (Advanced → Container Class),
 * gdyby selektory FF się zmieniły.
 */
#bizstrefa-newsletter-popup .ff-el-form-check-label,
#bizstrefa-newsletter-popup .ff_gdpr_field label,
#bizstrefa-newsletter-popup .ff-html-codes,
#bizstrefa-newsletter-popup .ff-custom_html,
#bizstrefa-newsletter-popup .bizstrefa-np-fineprint {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: #111111;
	opacity: 0.75;
}

#bizstrefa-newsletter-popup .ff-el-form-check-label a,
#bizstrefa-newsletter-popup .ff-html-codes a,
#bizstrefa-newsletter-popup .ff-custom_html a,
#bizstrefa-newsletter-popup .bizstrefa-np-fineprint a {
	color: #2f4f63;
}

#bizstrefa-newsletter-popup .bizstrefa-np-fineprint p {
	margin: 0 0 0.75rem;
}

#bizstrefa-newsletter-popup .bizstrefa-np-fineprint p:last-child {
	margin-bottom: 0;
}

@media ( max-width: 600px ) {
	.bizstrefa-np-aside {
		display: none;
	}

	/*
	 * Na wąskim ekranie kolumny wzorca się układają w pionie. Pusta kolumna
	 * pod grafikę nie ma czego pokazać — chowamy ją, żeby okno nie rosło.
	 */
	.bizstrefa-np-body .wp-block-column:empty {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.bizstrefa-np-overlay,
	.bizstrefa-np-dialog {
		transition: none;
	}
}