/* Job-Linker — "Obserwuj tę firmę" (profil pracodawcy + pod ofertą).
 * ZADANIE-NOCNE 2026-09-05/06, K-1.
 *
 * Przekolorowane 2026-09-06 na system "Job Linker Navy" (zlecenie 5-A) -
 * poprzednia wersja miała szare tło poza paletą i przycisk domyślny motywu
 * (szary prostokąt zamiast głównego CTA portalu). Tło jest CELOWO pełne
 * białe, nie #F2F5F9 - na profilu pracodawcy ten blok siedzi tuż pod
 * nagłówkiem, który bywa na zdjęciu w tle (patrz jl-employer-badges.css),
 * więc musi być czytelny niezależnie od tego, co jest za nim.
 */

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

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

.jl-of 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 - patrz jl-newsletter.css: ponizej tego progu
	 * przegladarki mobilne powiekszaja cala strone po dotknieciu pola. */
	font-size: 16px;
	color: #202124;
}

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

.jl-of 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-of button.button:hover,
.jl-of button.button:focus {
	background: #3395FF;
	color: #FFFFFF;
}

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

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

/* Nawiazuje do granatu #003366, nie zielen spoza palety. */
.jl-of__info--ok {
	color: #003366;
	font-weight: 600;
}

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

/* Telefon (sprawdzone przy 380px) - pole i przycisk na pelna szerokosc,
 * zeby dotyk kciukiem trafial latwo, tak jak przycisk "Aplikuj" na karcie. */
@media (max-width: 480px) {
	.jl-of form {
		flex-direction: column;
		align-items: stretch;
	}

	/* 🔴 KRYTYCZNE: `flex-direction: column` obraca oś główną - `flex: 1 1 200px`
	 * z góry pliku (200px SZEROKOŚCI w układzie wierszowym) staje się 200px+
	 * WYSOKOŚCI w układzie kolumnowym (ten sam błąd znaleziony i naprawiony
	 * w jl-newsletter.css 2026-09-06, na dowodzie ze zrzutu ekranu telefonu -
	 * ten formularz miał identyczną konstrukcję i identyczne ryzyko, mimo
	 * wcześniejszej notatki "sprawdzone przy 380px"). Zerujemy flex-basis. */
	.jl-of input[type="email"],
	.jl-of button.button {
		flex: 0 0 auto;
		width: 100%;
	}
}