/* Job-Linker — zapis na newsletter [jl_newsletter_zapis]. Blok 6,
 * ZADANIE-NAPRAWA-20260906.md. Ten sam system "Job Linker Navy" co K-1
 * (inc/jl-obserwuj-firme.php) — celowo identyczny wygląd, to ten sam typ
 * formularza (e-mail bez konta, double opt-in). */

.jl-nl {
	margin: 14px 0;
	padding: 16px;
	background: #FFFFFF;
	border: 1px solid #DDE3EB;
	border-radius: 8px;
}

.jl-nl form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.jl-nl input[type="email"] {
	flex: 1 1 200px;
	min-width: 0;
	height: 46px;
	padding: 0 14px;
	background: #FFFFFF;
	border: 1px solid #DDE3EB;
	border-radius: 8px;
	font-family: "Roboto", sans-serif;
	/* 🔴 16px, NIE mniej: ponizej tego progu Safari/Chrome na telefonie
	 * powieksza CALA STRONE przy dotknieciu pola (ochrona przed
	 * "niewidoczny tekst"), co wyglada jak pole "strasznie duze" -
	 * zgloszenie wlasciciela 2026-09-06, widok mobilny. */
	font-size: 16px;
	color: #202124;
}

.jl-nl input[type="email"]:focus {
	outline: none;
	border-color: #007BFF;
	box-shadow: 0 0 0 3px rgba(0, 123, 255, .35);
}

.jl-nl button.button {
	flex: 0 0 auto;
	height: 46px;
	padding: 0 22px;
	background: #007BFF;
	color: #FFFFFF;
	border: none;
	border-radius: 8px;
	font-family: "Roboto", sans-serif;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease;
}

.jl-nl button.button:hover,
.jl-nl button.button:focus {
	background: #3395FF;
	color: #FFFFFF;
}

.jl-nl__www {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.jl-nl__info {
	font-family: "Roboto", sans-serif;
	font-size: 13px;
	margin: 0 0 8px;
	width: 100%;
}

.jl-nl__info--ok {
	color: #003366;
	font-weight: 600;
}

.jl-nl__info--blad {
	color: #D32F2F;
	font-weight: 600;
}

/* Przypis pod formularzem: czestotliwosc + wymog potwierdzenia + latwe
 * wypisanie - na zyczenie wlasciciela 2026-09-06, zeby bylo jasne, czym
 * jest ten newsletter, zanim ktos poda e-mail. */
.jl-nl__pomoc {
	margin: 10px 0 0;
	font-family: "Roboto", sans-serif;
	font-size: 12px;
	color: #5B6470;
}

@media (max-width: 480px) {
	.jl-nl form {
		flex-direction: column;
		align-items: stretch;
	}

	/* 🔴 KRYTYCZNE: `flex-direction: column` obraca oś główną o 90° - ta sama
	 * wartość `flex: 1 1 200px` z góry pliku (myślana jako 200px SZEROKOŚCI
	 * w układzie wierszowym) zaczyna oznaczać 200px WYSOKOŚCI w układzie
	 * kolumnowym, a `flex-grow:1` pozwala jej rosnąć jeszcze bardziej -
	 * efekt: pole e-mail wysokie na ~250px zamiast 46px (zgłoszenie
	 * właściciela 2026-09-06, zrzut ekranu z telefonu). Zerujemy flex-basis
	 * z powrotem na "auto", żeby `height: 46px` znowu rządziło wysokością. */
	.jl-nl input[type="email"],
	.jl-nl button.button {
		flex: 0 0 auto;
		width: 100%;
	}
}