/* Pasek newslettera — pełna szerokość strony (jak mapa w stopce), poza
   .container. Mobile first: domyślnie pionowy układ, od ~768px poziomy dla
   sloganu+przycisku. Czarno-biała kolorystyka, bez akcentów kolorystycznych. */

.newsletter-placeholder {
	width: 100%;
	display: none; /* włączane w JS na czas przyklejenia paska, żeby treść pod spodem nie "skakała" */
}

.newsletter-pasek {
	width: 100%;
	background: #111;
	color: #fff;
}

/* Stan przyklejony do dołu ekranu — po przewinięciu >200px, aż do powrotu do pierwotnej pozycji */
.newsletter-pasek.przyklejony {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, .35);
}

.newsletter-zwiniety {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: .6rem 1.1rem;
	text-align: center;
}

.newsletter-slogan {
	margin: 0;
	font-size: .82rem;
	line-height: 1.35;
}

.newsletter-slogan .fa-envelope {
	margin-right: .4rem;
}

.newsletter-czytaj-wiecej {
	align-self: center;
	background: transparent;
	border: 1px solid #fff;
	color: #fff;
	border-radius: 999px;
	padding: .4rem 1.1rem;
	font-size: .85rem;
	cursor: pointer;
}

.newsletter-czytaj-wiecej:hover {
	background: #fff;
	color: #111;
}

.newsletter-rozwiniety {
	padding: 1.2rem 1.1rem 1.4rem;
	border-top: 1px solid rgba(255, 255, 255, .2);
}

.newsletter-naglowek {
	margin: 0 0 .8rem;
	font-weight: 700;
	font-size: .88rem;
	text-align: center;
}

.newsletter-form {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	max-width: 420px;
	margin: 0 auto;
}

.newsletter-form input {
	padding: .6rem .8rem;
	border-radius: 4px;
	border: 1px solid #fff;
	background: #fff;
	color: #111;
	font-size: 1rem;
}

.newsletter-form button {
	padding: .6rem 1rem;
	border-radius: 4px;
	border: 1px solid #fff;
	background: #fff;
	color: #111;
	font-weight: 700;
	cursor: pointer;
	font-size: .95rem;
}

.newsletter-form button:hover {
	background: #111;
	color: #fff;
}

.newsletter-drobne {
	text-align: center;
	font-size: .78rem;
	color: rgba(255, 255, 255, .75);
	margin: .9rem 0 0;
}

.newsletter-drobne a {
	color: #fff;
	text-decoration: underline;
	cursor: pointer;
}

.newsletter-status {
	text-align: center;
	font-size: .85rem;
	margin: .6rem 0 0;
	min-height: 1.1em;
	color: #fff;
}

.newsletter-status.err { color: #fff; font-weight: 700; }
.newsletter-status.ok  { color: #fff; font-weight: 700; }

.newsletter-zwin {
	display: block;
	margin: 1rem auto 0;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, .7);
	font-size: .78rem;
	cursor: pointer;
}

/* Od tabletu w górę: slogan i przycisk w jednym wierszu */
@media (min-width: 768px) {
	.newsletter-zwiniety {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		text-align: left;
		padding: .87rem 2rem;
	}

	.newsletter-slogan {
		font-size: .82rem;
	}

	.newsletter-czytaj-wiecej {
		flex-shrink: 0;
		padding: .3rem .85rem;
		font-size: .74rem;
	}

	.newsletter-form {
		flex-direction: row;
	}

	.newsletter-form input {
		flex: 1 1 auto;
	}

	.newsletter-form button {
		flex: 0 0 auto;
	}
}