/* ==========================================================================
   listing.css — style listy korepetytorow (browse/search): pasek filtrow
   (redesign, reskin SelectFx) + wzmocnione przyciski kontaktu na kafelku.
   Ladowane po fix.css (override). Brand #2AC59B.
   Zachowuje hooki JS: .dip (reveal telefonu), .phone (cel reveal),
   .card-message (overlay wiadomosci).
   ========================================================================== */

/* Kontener CTA — nadpisuje float/width/text-align z .offer-contact */
.offer-contact.offer-cta {
	float: none;
	width: 100%;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 6px;
}

/* Wspolny przycisk (specyficznosc .offer-large ... zeby wygrac z main.css) */
.offer-large .offer-cta .offer-cta-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	padding: 11px 14px;
	margin: 0;
	border-radius: 12px;
	border: 1.5px solid transparent;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .08s ease;
}
.offer-large .offer-cta .offer-cta-btn:active { transform: translateY(1px); }

/* Zadzwon — filled brand */
.offer-large .offer-cta .offer-cta-btn--call {
	background: #2AC59B;
	border-color: #2AC59B;
	color: #fff;
}
.offer-large .offer-cta .offer-cta-btn--call:hover,
.offer-large .offer-cta .offer-cta-btn--call:focus {
	background: #4ad8b2;
	border-color: #4ad8b2;
	color: #fff;
}

/* Neutralizacja starego fix.css ".dip { padding:0 5px!important; top:-1px;
   margin-left:2px; width:auto!important }" — przez nie "Zadzwon" byl za niski.
   Wyzsza specyficznosc (.dip jako 4. klasa) + !important wygrywa z fix.css. */
.offer-large .offer-cta .offer-cta-btn.dip {
	padding: 11px 14px !important;
	width: 100% !important;
	top: 0;
	margin-left: 0;
}

/* Wyslij wiadomosc — outline brand */
.offer-large .offer-cta .offer-cta-btn--msg {
	background: #fff;
	border-color: #2AC59B;
	color: #1f9a78;
}
.offer-large .offer-cta .offer-cta-btn--msg:hover,
.offer-large .offer-cta .offer-cta-btn--msg:focus {
	background: #f2fbf8;
	border-color: #2AC59B;
	color: #1f9a78;
}

/* Ikona w przycisku */
.offer-cta .offer-cta-ico {
	width: 17px; height: 17px;
	stroke: currentColor; stroke-width: 2; fill: none;
	stroke-linecap: round; stroke-linejoin: round;
	flex: 0 0 auto;
}

/* Reveal telefonu — span (.phone) sibling .dip; ukryty dopoki pusty.
   Po odkryciu numer zajmuje miejsce przycisku "Zadzwon": ten sam gabaryt
   (padding/radius/wysokosc) i styl brandowy, zeby layout nie skakal. */
.offer-cta .offer-cta-phone {
	display: block;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .03em;
	color: #1f9a78;
	height: 42px;       /* == .offer-cta-btn (17px ikona + 22px padding + 3px border) */
	line-height: 39px;  /* content = 42 - 3 border -> jedna linia wysrodkowana pionowo */
	padding: 0 14px;
	border: 1.5px solid #2AC59B;
	border-radius: 12px;
	background: #f2fbf8;
}
.offer-cta .offer-cta-phone:empty { display: none; }
.offer-cta .offer-cta-phone a { color: #1f9a78; text-decoration: none; }

/* Fix nachodzenia "Wyslij wiadomosc" na "Ostatnia aktywnosc".
   Prawa kolumna miala sztywne height:205px, a .offer-bottom (aktywnosc) bylo
   position:absolute; bottom:0 (campaigns-main.css). Z poprawnie wysokimi
   przyciskami i po odkryciu numeru tresc nie miescila sie. Pozwalamy kolumnie
   rosnac i ukladamy aktywnosc w naturalnym flow pod przyciskami. Clearfix na
   .offer-large gwarantuje, ze karta obejmie wyzsza kolumne (bez clipowania jak
   przy overflow:hidden — chroni cien i pasek .offer-featured:before). */
.offer-large::after { content: ""; display: block; clear: both; }
.offer-large .offer-large-right { height: auto; min-height: 205px; }
.offer-large .offer-large-right .offer-bottom { position: static; margin-top: 8px; }

/* Mobile: dwa CTA obok siebie 50/50 */
@media (max-width: 767px) {
	.offer-contact.offer-cta { flex-direction: row; flex-wrap: wrap; }
	.offer-large .offer-cta .offer-cta-btn { flex: 1 1 0; min-width: 130px; }
	.offer-cta .offer-cta-phone { flex: 1 0 100%; }
}

/* ==========================================================================
   Overlay wiadomosci — restyle bootstrap-modala #modal-card-message
   na wyglad prototypu (desktop modal + mobile bottom sheet). Backend
   (write_message/send_message) bez zmian — zmieniamy tylko wyglad + UX.
   ========================================================================== */
#modal-card-message .modal-dialog {
	width: 520px;
	max-width: calc(100% - 32px);
	margin: 40px auto;
}
#modal-card-message .modal-content {
	border: none;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(56, 64, 71, .16);
	overflow: hidden;
}
#modal-card-message .modal-header {
	position: relative;
	padding: 18px 20px;
	border-bottom: 1px solid #eef0f2;
}
#modal-card-message .modal-header h3 {
	font-size: 13px; font-weight: 500; color: #6b747c; margin: 0; text-transform: none;
}
#modal-card-message .modal-header h4 {
	font-size: 18px; font-weight: 700; color: #384047; margin: 2px 0 0;
}
#modal-card-message .ek-modal-head { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
#modal-card-message .ek-modal-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #eef0f2; flex: 0 0 auto; }
#modal-card-message .ek-modal-head-text { min-width: 0; }

/* e-mail zalogowanego: chip + readonly */
#modal-card-message .ek-account-chip {
	display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600;
	color: #1f9a78; background: #e6f8f2; padding: 2px 9px; border-radius: 999px; margin-left: 6px;
}
#modal-card-message .ek-readonly-email {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	background: #f7f8f9; border: 1.5px solid #eef0f2; border-radius: 8px;
	padding: 10px 12px; color: #6b747c; font-size: 14px;
}
#modal-card-message .ek-readonly-check { width: 16px; height: 16px; stroke: #1f9a78; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* Stopka */
#modal-card-message .modal-footer.ek-modal-foot {
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; text-align: left;
	padding: 14px 20px; border-top: 1px solid #eef0f2;
}
#modal-card-message .ek-modal-foot .ek-legal { flex: 1 1 180px; min-width: 0; font-size: 11px; color: #98a0a6; line-height: 1.4; margin: 0; }
#modal-card-message .ek-modal-foot .ek-legal a { color: #1f9a78; }
#modal-card-message .ek-btn-cancel {
	flex: 0 0 auto;
	background: none; border: none; color: #6b747c; font-weight: 500; font-size: 14px;
	padding: 10px 12px; border-radius: 8px; cursor: pointer;
}
#modal-card-message .ek-btn-cancel:hover { background: #f7f8f9; color: #384047; }
#modal-card-message .ek-foot-send {
	flex: 0 0 auto; float: none; margin: 0; width: auto; height: auto;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 18px; border-radius: 12px; font-size: 14px; font-weight: 700; line-height: 1;
}
#modal-card-message .ek-foot-send .ek-foot-ico { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
#modal-card-message .modal-close {
	position: absolute; top: 14px; right: 14px;
	width: 32px; height: 32px; padding: 0;
	display: flex; align-items: center; justify-content: center;
	background: none; border: none; border-radius: 8px; cursor: pointer; opacity: .7;
}
#modal-card-message .modal-close:hover { background: #f7f8f9; opacity: 1; }
#modal-card-message .modal-close img { width: 14px; height: 14px; }
#modal-card-message .modal-body { padding: 18px 20px; }

/* Pola formularza w overlayu */
#modal-card-message .form-group { margin-bottom: 14px; }
#modal-card-message .form-control {
	height: auto; font-size: 14px; color: #384047;
	border: 1.5px solid #dde2e6; border-radius: 8px; padding: 10px 12px;
	box-shadow: none; transition: border-color .14s ease, box-shadow .14s ease;
}
#modal-card-message .form-control:focus {
	border-color: #2AC59B; box-shadow: 0 0 0 3px rgba(42, 197, 155, .18);
	caret-color: #2AC59B;
}
#modal-card-message textarea.form-control { min-height: 130px; resize: vertical; line-height: 1.5; }
#modal-card-message .ek-field-hint { font-size: 12px; color: #98a0a6; margin: 6px 0 0; line-height: 1.4; }

/* Przycisk wyslij */
#modal-card-message .button-outer-wrapper { margin-top: 4px; }
#modal-card-message .send-message {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; border-radius: 12px; font-weight: 700; font-size: 15px; padding: 12px 18px;
}

/* Mobile/tablet: bottom sheet (breakpoint zgodny z mobile layoutem site'u = 991px) */
@media (max-width: 991px) {
	#modal-card-message .modal-dialog {
		margin: 0; position: absolute; left: 0; right: 0; bottom: 0;
		width: 100%; max-width: 100%;
	}
	#modal-card-message .modal-content {
		border-radius: 16px 16px 0 0; max-height: 92vh; overflow-y: auto;
	}
	#modal-card-message .ek-success-actions { flex-direction: column; }
	#modal-card-message .ek-success-actions .ek-success-btn { width: 100%; }
}

/* ==========================================================================
   Success-state (renderowane przez JS po wyslaniu)
   ========================================================================== */
#modal-card-message .ek-success { text-align: center; padding: 28px 24px; animation: ek-fade .18s ease; }
#modal-card-message .ek-success-ring {
	width: 64px; height: 64px; border-radius: 50%; background: #e6f8f2;
	display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
	color: #1f9a78; position: relative;
}
#modal-card-message .ek-success-ring svg {
	width: 30px; height: 30px; stroke: currentColor; stroke-width: 2.5; fill: none;
	stroke-linecap: round; stroke-linejoin: round;
}
#modal-card-message .ek-success-ring::after {
	content: ''; position: absolute; inset: -6px; border-radius: 50%;
	border: 2px solid #2AC59B; opacity: .5; animation: ek-ring 1.6s ease infinite;
}
#modal-card-message .ek-success h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; color: #384047; }
#modal-card-message .ek-success p { font-size: 14px; line-height: 1.55; color: #6b747c; margin: 0 auto 22px; max-width: 340px; }
#modal-card-message .ek-success-btn {
	display: inline-flex; align-items: center; justify-content: center;
	background: #2AC59B; color: #fff; border: none; border-radius: 12px;
	padding: 12px 24px; font-weight: 700; font-size: 14px; cursor: pointer;
}
#modal-card-message .ek-success-btn:hover { background: #4ad8b2; }
#modal-card-message .ek-success-actions { display: flex; gap: 12px; justify-content: center; }
#modal-card-message .ek-success-btn--outline {
	background: #fff; border: 1.5px solid #2AC59B; color: #1f9a78; text-decoration: none;
}
#modal-card-message .ek-success-btn--outline:hover { background: #f2fbf8; }
@keyframes ek-ring { 0% { transform: scale(.85); opacity: .55; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }
@keyframes ek-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   Mobilny sticky bar kontaktu na stronie ogloszenia (card/info.php).
   Tylko mobile (<=767px). Pojawia sie po przewinieciu poza hero (JS).
   ========================================================================== */
.ek-sticky-advert { display: none; }

@media (max-width: 767px) {
	.ek-sticky-advert {
		display: block;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
		background: linear-gradient(180deg, #f2fbf8 0%, #ffffff 60%);
		border-top: 1px solid #d8f3ea;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -8px 24px rgba(56, 64, 71, .12);
		transform: translateY(130%);
		transition: transform .22s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.ek-sticky-advert--visible { transform: translateY(0); }
	.ek-sticky-advert::before {
		content: ''; position: absolute; left: 0; right: 0; top: -22px; height: 22px;
		background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 100%);
		pointer-events: none;
	}
	.ek-sticky-advert__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
	.ek-sticky-advert__price b { font-size: 19px; font-weight: 800; color: #384047; }
	.ek-sticky-advert__price span { font-size: 13px; color: #98a0a6; }
	.ek-sticky-advert__pill {
		display: inline-flex; align-items: center; gap: 6px;
		font-size: 12px; font-weight: 600; color: #1f9a78;
		background: #e6f8f2; padding: 5px 10px; border-radius: 999px;
	}
	.ek-sticky-advert__pill--muted { color: #6b747c; background: #f0f2f4; }
	.ek-dot-sm { width: 7px; height: 7px; border-radius: 50%; background: #2AC59B; position: relative; flex: 0 0 auto; }
	.ek-dot-sm::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: #2AC59B; opacity: .4; animation: ek-pulse-sm 1.8s ease infinite; }
	@keyframes ek-pulse-sm { 0% { transform: scale(.7); opacity: .5; } 70% { transform: scale(1.9); opacity: 0; } 100% { opacity: 0; } }

	.ek-sticky-advert__row { display: flex; gap: 10px; align-items: stretch; }
	.ek-sticky-advert__col { flex: 1 1 0; min-width: 0; }
	.ek-sticky-advert__btn {
		display: flex; align-items: center; justify-content: center; gap: 7px;
		width: 100%; box-sizing: border-box; font-family: inherit;
		font-size: 14px; font-weight: 700; line-height: 1; padding: 12px 12px; margin: 0;
		border-radius: 12px; border: 1.5px solid transparent; cursor: pointer;
		text-decoration: none; white-space: nowrap;
	}
	.ek-sticky-advert__row > .ek-sticky-advert__btn--msg { flex: 1 1 0; }
	.ek-sticky-advert__btn--call { background: #2AC59B; border-color: #2AC59B; color: #fff; }
	.ek-sticky-advert__btn--call:hover, .ek-sticky-advert__btn--call:focus { background: #4ad8b2; border-color: #4ad8b2; color: #fff; }
	.ek-sticky-advert__btn--msg { background: #e6f8f2; border-color: #e6f8f2; color: #1f9a78; }
	.ek-sticky-advert__btn--msg:hover, .ek-sticky-advert__btn--msg:focus { background: #d8f3ea; border-color: #d8f3ea; color: #1f9a78; }
	.ek-sticky-advert__ico { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
	.ek-sticky-advert__phone { display: block; text-align: center; font-weight: 700; font-size: 15px; color: #1f9a78; padding: 6px 4px; }
	.ek-sticky-advert__phone:empty { display: none; }
	.ek-sticky-advert__phone a { color: #1f9a78; text-decoration: none; }
}


/* ==========================================================================
   PASEK FILTROW — redesign (Faza 1: reskin pigulek).
   Reskin istniejacego SelectFx + inputow; AJAX (get_browse_data), nazwy pol
   i podpiecia JS pozostaja NIETKNIETE (zero zmian w scripts.js).
   Scope: lista korepetytorow (.offer-filters-wrapper), bez jobs/students.
   Skrot selektora: L = .offer-filters-wrapper:not(.job-offers):not(.student-filters)
   ========================================================================== */

/* --- Kontener paska: ze sztywnej wysokosci na auto + karta --- */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) {
	height: auto;
	padding: 12px 14px;
	border: 1px solid #e6ebee;
	border-radius: 14px;
	margin-bottom: 20px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters).exp { height: auto; }

/* --- Rzad pigulek: z floatow col-20p na flex --- */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .offer-filters-inner.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .offer-filters-inner.row > .col-20p {
	width: auto;
	float: none;
	padding: 0;
	min-height: 0;
	margin: 0;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .form-group { margin: 0; }

/* --- Pigulka = trigger SelectFx (.cs-select > span) --- */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select {
	width: auto;
	min-width: 0;
	max-width: none;
	background: transparent;
	vertical-align: top;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select > span {
	display: flex;
	align-items: center;
	min-height: 42px;
	padding: 9px 38px 9px 16px;
	border: 1px solid #d7dee2;
	border-radius: 10px;
	/* !important zabija paskowane/dziedziczone tlo z legacy (wyzsza specyficznosc
	   niz zwykle #fff); .changed (2 klasy) i tak wygrywa nizej. */
	background: #fff !important;
	background-image: none !important;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: #384047;
	white-space: nowrap;
	transition: border-color .12s, box-shadow .12s, color .12s;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select > span::after {
	/* CSS-owy thin chevron zamiast icomoon \e000 (font icomoon brak w dev -> kwadraty) */
	content: '' !important;
	font-family: inherit !important;
	right: 15px;
	top: calc(50% - 4px);
	width: 6px;
	height: 6px;
	border: 0;
	border-right: 1.5px solid #8a949b;
	border-bottom: 1.5px solid #8a949b;
	transform: rotate(45deg);
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.cs-active > span {
	border-color: #2AC59B;
	box-shadow: 0 0 0 3px rgba(42, 197, 155, .12);
}

/* Stan "wybrany filtr" (.changed) — teal outline (jak Online/Ocena w mockupie).
   Nadpisuje wypelniony teal z main.css. */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.changed > span,
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.changed .cs-placeholder {
	background: #e6f8f2 !important;
	background-image: none !important;
	border-color: #2AC59B;
	color: #1f9a78 !important;
	font-weight: 600;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.changed > span::after { border-right-color: #2AC59B; border-bottom-color: #2AC59B; }

/* Panel opcji (.cs-options) — karta z cieniem pod pigulka */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select .cs-options {
	top: calc(100% + 6px);
	width: max-content;
	min-width: 240px;
	max-width: 340px;
	max-height: 340px;
	overflow-y: auto;
	border: 1px solid #e6ebee;
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(16, 24, 40, .12);
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select .cs-options ul li span {
	padding: 10px 16px;
	font-size: 14px;
	line-height: 1.35;
	white-space: normal;
}
/* li[data-option] + '> span': tylko realnie najechana opcja. Optgroupy (POPULARNE/
   Pozostale) opakowuja opcje w zagniezdzony <ul> wewnatrz <li.cs-optgroup>, wiec
   'li:hover span' (potomek) barwil WSZYSTKIE opcje w grupie naraz. */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select .cs-options ul li[data-option]:hover > span,
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select .cs-options ul li.cs-focus > span {
	background: #f2fbf8;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select .cs-options ul li.cs-selected span {
	color: #1f9a78;
	font-weight: 600;
}

/* --- Miejscowosc: input jako pigulka --- */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) input[type="text"].city {
	min-height: 42px;
	border: 1px solid #d7dee2;
	border-radius: 10px;
	font-size: 14px;
	color: #384047;
	box-sizing: border-box;
	background-color: #fff;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) input[type="text"].city.selected {
	background-position: left 14px center;
}

/* --- Cena: .price-range-label jako pigulka, slider w panelu pod nia --- */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .range-form-group { position: relative; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .price-range-label {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: auto;
	min-height: 42px;
	width: auto;
	min-width: 84px;
	box-sizing: border-box;
	padding: 9px 34px 9px 16px;
	border: 1px solid #d7dee2;
	border-radius: 10px;
	/* !important: .price-range-label ma tez .form-control -> dziedziczy paskowane tlo */
	background: #fff !important;
	background-image: none !important;
	font-size: 14px;
	font-weight: 500;
	color: #384047;
	white-space: nowrap;
	cursor: pointer;
}
/* chevron jak w pozostalych pigulkach */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .price-range-label::after {
	content: '';
	position: absolute;
	right: 15px;
	top: calc(50% - 4px);
	width: 6px;
	height: 6px;
	border-right: 1.5px solid #8a949b;
	border-bottom: 1.5px solid #8a949b;
	transform: rotate(45deg);
	pointer-events: none;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .price-range-label.s-active {
	border-color: #2AC59B;
	box-shadow: 0 0 0 3px rgba(42, 197, 155, .12);
}
/* gdy zakres ceny wybrany, label pokazuje "cena od.." -> teal outline */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .filter-price-range,
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .price-range-label:not(:empty) { }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .input-range-wrapper {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 200;
	width: 300px;
	max-width: 90vw;
	padding: 16px;
	border: 1px solid #e6ebee;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 28px rgba(16, 24, 40, .12);
}

/* --- Disabled (np. wojewodztwo gdy online): przygaszone, bez pasow --- */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .form-group.disabled .cs-select > span,
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .form-group.disabled input[type="text"] {
	background: #f5f6f7 !important;
	background-image: none !important;
	color: #aab2b8 !important;
	border-color: #e6ebee;
	cursor: not-allowed;
}

/* --- "Wszystkie filtry": z absolutnego na pigulke na koncu rzedu --- */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .filter-expand {
	position: static;
	order: 99;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 9px 16px;
	border: 1px solid #d7dee2;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	color: #384047;
	background: #fff;
	white-space: nowrap;
	cursor: pointer;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .filter-expand > span {
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
}


/* --- place: JS-generowane linki .filter-place-button (scripts.js) jako
   segmented control + label "Miejsce zajec". Bez zmian w JS. --- */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .offer-filters-inner.row > .clearfix {
	display: none;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .filter-place-button {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .filter-place-button .place-label {
	font-size: 13px;
	font-weight: 500;
	color: #8a949b;
	white-space: nowrap;
	padding-right: 2px;
	cursor: default;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .filter-place-button a.btn {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	margin: 0;
	padding: 8px 15px;
	border: 1px solid #d7dee2;
	border-radius: 10px;
	background: #fff;
	color: #384047;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: border-color .12s, color .12s, background .12s;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .filter-place-button a.btn:hover {
	border-color: #2AC59B;
	color: #1f9a78;
}
/* aktywny (btn-full-lead) — wypelniony teal */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .filter-place-button a.btn.btn-full-lead,
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .filter-place-button a.btn.btn-full-lead:hover {
	background: #2AC59B;
	border-color: #2AC59B;
	color: #fff;
}

/* --- Checkboxy "Tylko ze zdjeciem/telefonem/ulubione" — zwarty rzad --- */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .form-group-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .form-group-checkbox label {
	position: static !important;
	left: auto !important;
	margin: 0;
	padding: 0;
	font-size: 14px;
	color: #384047;
	cursor: pointer;
}


/* ==========================================================================
   Panel "Wiecej filtrow" (.more-filters) — 4+ kolumny z naglowkami (wzor).
   JS przy rozwijaniu ustawia inline display:block + klase .exp na wrapperze;
   gridujemy przez .exp + !important (zeby nie pokazac panelu gdy zwiniety —
   wtedy .exp nie ma, obowiazuje display:none z main.css). Bez zmian w JS.
   ========================================================================== */
.offer-filters-wrapper:not(.job-offers):not(.student-filters).exp .more-filters {
	display: grid !important;
	order: 100; /* PO filter-expand (order 99) -> przycisk zostaje na gorze, panel pod nim */
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 20px 26px;
	align-items: start;
	margin-top: 16px;
	padding-top: 18px;
	padding-bottom: 54px; /* miejsce na przycisk "Zastosuj filtry" w prawym dolnym rogu */
	border-top: 1px solid #eef0f2;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col {
	width: auto !important;
	float: none;
	padding: 0;
	margin: 0;
	min-height: 0;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mf-col-title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #98a0a6;
	margin: 0 0 12px;
}
/* kontrolka (dropdown) w kolumnie — pelna szerokosc kolumny */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select { width: 100%; max-width: none; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select > span { width: 100%; box-sizing: border-box; }
/* Dostepnosc — trigger dropdownu jako pelna pigulka */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mf-col-days #available-days > .form-control {
	display: flex;
	align-items: center;
	min-height: 42px;
	padding: 9px 16px;
	border: 1px solid #d7dee2;
	border-radius: 10px;
	background: #fff !important;
	background-image: none !important;
	font-size: 14px;
	color: #384047;
	cursor: pointer;
}
/* Pozostale — checkboxy stackowane w kolumnie. Spacing WEWNATRZ wiersza (padding)
   a nie margin-gap, zeby rytm byl rowny jak w Dostepnosci (dni) — wczesniej 22px
   wiersz + 12px margin wygladal na nierowne/rozjechane odstepy. */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mf-col-checks .form-group-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 0;
}


/* ==========================================================================
   Aktywne filtry — chipy (.selected-filters-wrapper). Poza .offer-filters-wrapper,
   wiec scope wlasny. "Aktywne filtry:" wstrzykniete przez ::before (bez markupu).
   ========================================================================== */
.selected-filters-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
}
.selected-filters-wrapper::before {
	content: "Aktywne filtry:";
	font-size: 13px;
	font-weight: 500;
	color: #8a949b;
	margin-right: 2px;
}
.selected-filters-wrapper:empty { display: none; }
.selected-filters-wrapper .btn-frame-grey {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	padding: 6px 12px !important;
	background: #e9f8f2;
	border: 1px solid #c3ecdd;
	border-radius: 999px;
	color: #1f9a78;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	cursor: default;
}
.selected-filters-wrapper .btn-frame-grey a {
	display: inline-flex;
	align-items: center;
	margin: 0 !important;
	line-height: 0;
}
.selected-filters-wrapper .btn-frame-grey img.x {
	width: 10px;
	height: 10px;
	margin: 0 !important;
	opacity: .65;
}
.selected-filters-wrapper .btn-frame-grey img.x:hover { opacity: 1; }
/* "Wyczysc wszystko" link */
.selected-filters-wrapper .clear-all-filters {
	margin-left: 4px;
	font-size: 13px;
	font-weight: 500;
	color: #384047;
	text-decoration: underline;
	white-space: nowrap;
}
.selected-filters-wrapper .clear-all-filters:hover { color: #1f9a78; }


/* --- Aktywne filtry: dopracowanie ---
   Ukryj caly rzad gdy nie ma realnych chipow (np. samo subject na /chemia:
   wrapper i tak sie renderuje, ale bez .btn-frame-grey). :has ignorowane przez
   stare przegladarki -> bezpieczny fallback (rzad po prostu zostaje). */
.selected-filters-wrapper:not(:has(.btn-frame-grey)) {
	display: none !important;
}
.selected-filters-wrapper {
	padding: 2px 0;
	line-height: 1.9;
}
.selected-filters-wrapper::before {
	align-self: center;
}
.selected-filters-wrapper .btn-frame-grey {
	transition: background .12s, border-color .12s;
}
.selected-filters-wrapper .btn-frame-grey:hover {
	background: #ddf3ea;
	border-color: #a9e2ce;
}


/* ==========================================================================
   Naglowek wynikow + sort (.offer-list-heading) — czysty flex-row.
   Tytul + licznik z lewej, sort jako pigulka "Sortuj: ..." z prawej.
   ========================================================================== */
.offer-list-heading {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin: 24px 0 14px;
}
.offer-list-heading::after { display: none !important; }
.offer-list-heading h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: #2b3238;
	line-height: 1.2;
}
.offer-list-heading .found {
	font-size: 14px !important;
	font-weight: 400 !important;
	color: #8a949b;
	flex-basis: 100%;
	margin: 2px 0 0;
}
/* sort na prawo */
.offer-list-heading .sort-wrapper {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	float: none;
}
.offer-list-heading .sort-wrapper::before {
	content: "Sortuj:";
	font-size: 13px;
	font-weight: 500;
	color: #8a949b;
	margin-right: 8px;
	white-space: nowrap;
}
/* sort dropdown (cs-select) jako pigulka */
.offer-list-heading .sort-wrapper .cs-select {
	width: auto;
	max-width: none;
	float: none;
}
.offer-list-heading .sort-wrapper .cs-select > span {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 36px 8px 14px;
	border: 1px solid #d7dee2 !important;
	border-radius: 10px;
	background: #fff !important;
	background-image: none !important;
	font-size: 14px;
	font-weight: 600;
	color: #384047;
}
.offer-list-heading .sort-wrapper .cs-select.cs-active > span {
	border-color: #2AC59B !important;
	box-shadow: 0 0 0 3px rgba(42, 197, 155, .12);
}
.offer-list-heading .sort-wrapper .cs-select > span::after {
	content: '' !important;
	font-family: inherit !important;
	right: 14px;
	top: calc(50% - 4px);
	width: 6px;
	height: 6px;
	border: 0;
	border-right: 1.5px solid #8a949b;
	border-bottom: 1.5px solid #8a949b;
	transform: rotate(45deg);
}
.offer-list-heading .sort-wrapper .cs-select .cs-options {
	border: 1px solid #e6ebee;
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(16, 24, 40, .12);
	min-width: 220px;
}


/* ==========================================================================
   Wyszukiwarka przedmiotow w dropdownie subject (subject-search.js).
   Input jako sticky <li> na gorze listy .cs-options.
   ========================================================================== */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.subject .cs-options {
	min-width: 300px;
	max-height: 360px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* box identyczny jak dropdown lokalizacji (.lf-loc-panel) */
	border: 1px solid #e6ebee !important;
	border-radius: 12px !important;
	box-shadow: 0 12px 28px rgba(16, 24, 40, .12) !important;
	background: #fff !important;
	padding: 12px !important; /* jak .lf-loc-panel */
}
/* input przedmiotu: staly u gory (poza scrollem); padding 0 -> input wciety 12px (cs-options) jak w lokalizacji */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .subj-search-wrap {
	flex: 0 0 auto;
	padding: 0 0 8px;
	background: #fff;
}
/* lista opcji przedmiotu scrolluje (input zostaje); bez wewnetrznej ramki (byla podwojna) */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.subject .cs-options ul {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none !important;
	overflow-y: auto;
	border: 0 !important;
	box-shadow: none !important;
}
/* pozycje listy przedmiotow — jak w liscie wojewodztw (padding 9px 12px, hover, radius) */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.subject .cs-options ul li span {
	padding: 9px 12px !important;
	border-radius: 6px;
	font-size: 14px;
	color: #384047;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.subject .cs-options ul li[data-option]:hover > span { background: #f4f7f9; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .subj-search {
	width: 100%;
	box-sizing: border-box;
	height: 38px;
	margin: 0;
	padding: 8px 12px 8px 34px;
	border: 1px solid #d7dee2;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 400;
	color: #384047;
	background: #fff url("../images/svg/search_icon.svg") no-repeat left 11px center;
	background-size: 15px 15px;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .subj-search:focus {
	outline: none;
	border-color: #2AC59B;
	box-shadow: 0 0 0 3px rgba(42, 197, 155, .12);
}

/* --- Pigulka przedmiotu (subject): aktywny = wypelniony zielony (wzor),
   wyjatek od teal-outline dla pozostalych .changed. --- */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.subject.changed > span,
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.subject.changed .cs-placeholder {
	background: #2AC59B !important;
	background-image: none !important;
	border-color: #2AC59B !important;
	color: #fff !important;
	font-weight: 600;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.subject.changed > span::after {
	border-right-color: #fff !important;
	border-bottom-color: #fff !important;
}


/* ==========================================================================
   LOKALIZACJA — pill "Cala Polska" + panel (miasto + wojewodztwo w jednym).
   Reuzycie: region cs-select renderowany jako statyczna radio-lista (CSS),
   klik w li -> SelectFx _changeOption + .city_region li handler -> get_browse_data.
   Toggle panelu: location-filter.js. Bez zmian w scripts.js.
   ========================================================================== */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-location { position: relative; }

.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 9px 14px;
	border: 1px solid #d7dee2;
	border-radius: 10px;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: #384047;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color .12s, box-shadow .12s;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-location.is-open .lf-loc-pill,
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-pill:focus-visible {
	border-color: #2AC59B;
	box-shadow: 0 0 0 3px rgba(42, 197, 155, .12);
	outline: none;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-pin {
	width: 16px; height: 16px; flex: 0 0 auto;
	stroke: #8a949b; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-pill { min-width: 150px; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-label { margin-right: auto; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-caret {
	margin-left: 10px;
	width: 6px;
	height: 6px;
	flex: 0 0 auto;
	border-right: 1.5px solid #8a949b;
	border-bottom: 1.5px solid #8a949b;
	transform: translateY(-2px) rotate(45deg);
}

/* panel dropdown */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-panel {
	/* Zamkniety = poza ekranem, ale RENDEROWANY (nie display:none) — inaczej
	   SelectFx nie buduje selecta regionu w ukrytym kontenerze. */
	position: absolute;
	top: calc(100% + 6px);
	left: -99999px;
	opacity: 0;
	pointer-events: none;
	z-index: 300;
	width: 300px;
	max-width: 92vw;
	padding: 12px;
	border: 1px solid #e6ebee;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 28px rgba(16, 24, 40, .12);
	transition: opacity .12s;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-location.is-open .lf-loc-panel {
	left: 0;
	opacity: 1;
	pointer-events: auto;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-panel .col-20p {
	width: 100% !important; float: none; padding: 0; margin: 0 0 10px; min-height: 0;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-panel .col-20p:last-child { margin-bottom: 0; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-panel .form-group { margin: 0; }

/* miasto input w panelu — taki sam jak wyszukiwarka przedmiotu (.subj-search) */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-panel input#city {
	width: 100%; box-sizing: border-box;
	height: 38px; margin: 0;
	padding: 8px 12px 8px 34px;
	border: 1px solid #d7dee2; border-radius: 8px;
	font-size: 14px; font-weight: 400; color: #384047;
	background: #fff url("../images/svg/search_icon.svg") no-repeat left 11px center;
	background-size: 15px 15px;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-panel input#city:focus {
	outline: none; border-color: #2AC59B;
	box-shadow: 0 0 0 3px rgba(42, 197, 155, .12);
}

/* wojewodztwo: cs-select -> statyczna radio-lista */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-panel .city_region { width: 100%; max-width: none; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-panel .city_region > span { display: none !important; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-panel .city_region .cs-options {
	position: static !important;
	visibility: visible !important;
	display: block !important;
	width: 100%;
	margin-top: 6px;
	border: 0; border-radius: 0; box-shadow: none;
	max-height: 210px; overflow-y: auto;
}
/* wojewodztwa: plaska lista BEZ radiow (jak lista przedmiotow) */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-panel .city_region .cs-options ul li span {
	display: block;
	padding: 9px 12px !important;
	font-size: 14px; white-space: normal; color: #384047;
	border-radius: 6px;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-panel .city_region .cs-options ul li span::after { content: none !important; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-panel .city_region .cs-options ul li span::before { display: none !important; content: none !important; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-panel .city_region .cs-options ul li:hover span { background: #f4f7f9; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-panel .city_region .cs-options ul li.cs-selected span { color: #1f9a78; font-weight: 600; }

/* Region jako lista — DEFENSYWNE wymuszenie (wyzsza specyficznosc, bez :not(),
   gdyby scope nie lapal). Trigger cs-placeholder chowamy, cs-options w flow. */
.offer-filters-wrapper .lf-loc-panel .cs-select.city_region > .cs-placeholder { display: none !important; }
.offer-filters-wrapper .lf-loc-panel .cs-select.city_region .cs-options {
	position: static !important;
	visibility: visible !important;
	display: block !important;
	width: 100% !important;
	max-height: 220px;
	overflow-y: auto;
	background: #fff !important;
	opacity: 1 !important;
}
.offer-filters-wrapper .lf-loc-panel .cs-select.city_region .cs-options ul { display: block !important; }
.offer-filters-wrapper .lf-loc-panel .cs-select.city_region .cs-options li { display: block !important; }

/* Jeden scroll — main.css:3136 daje .cs-skin-border .cs-options ul { max-height; overflow }
   co tworzy DRUGI scrollbar obok mojego na .cs-options. Wylaczamy scroll na ul. */
.offer-filters-wrapper .lf-loc-panel .cs-select.city_region .cs-options ul {
	max-height: none !important;
	overflow: visible !important;
}

/* Bez zbednej ramki wokol listy wojewodztw (panel ma juz swoja ramke) */
.offer-filters-wrapper .lf-loc-panel .cs-select.city_region,
.offer-filters-wrapper .lf-loc-panel .cs-select.city_region .cs-options,
.offer-filters-wrapper .lf-loc-panel .cs-select.city_region .cs-options ul {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Slider ceny — recolor na teal (BEZ zmiany rozmiaru uchwytow, zeby nie robily OO) */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .input-range-wrapper .slider-track { background: #e6ebee; box-shadow: none; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .input-range-wrapper .slider-selection { background: #2AC59B; box-shadow: none; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .input-range-wrapper .slider-handle { background: #fff; border: 2px solid #2AC59B; box-shadow: 0 1px 2px rgba(16,24,40,.2); opacity: 1; }

/* ==========================================================================
   Rowna wysokosc wszystkich pigulek na pasku (42px, border-box).
   Rozne elementy (span cs-select / button lokalizacji / div ceny / linki
   place / filter-expand) mialy rozny box-sizing/min-height -> rozna wysokosc.
   ========================================================================== */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select > span,
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-pill,
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .price-range-label,
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .filter-expand,
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .filter-place-button a.btn {
	box-sizing: border-box !important;
	height: 46px !important;
	min-height: 46px !important;
}

/* --- Cena: pola od/do jako boxy "od 0 zl" / "do 220 zl" (przycisk OK usuniety,
   filtr aplikuje sie po zmianie pola = zamknieciu popupu) --- */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .input-range-wrapper .input-number-single {
	display: flex;
	float: left;
	align-items: center;
	gap: 5px;
	width: calc(50% - 5px);
	box-sizing: border-box;
	padding: 9px 12px;
	border: 1px solid #d7dee2;
	border-radius: 8px;
	margin: 0 0 12px;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .input-range-wrapper .input-number-single + .input-number-single { margin-left: 10px; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .input-range-wrapper::after { content: ''; display: block; clear: both; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .input-range-wrapper .input-number-single input { width: 100%; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .input-range-wrapper .input-number-single label {
	position: static !important;
	left: auto !important;
	margin: 0;
	color: #98a0a6;
	font-size: 14px;
	font-weight: 400;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .input-range-wrapper .input-number-single input {
	flex: 1;
	min-width: 0;
	border: 0 !important;
	padding: 0 !important;
	height: auto !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 14px;
	font-weight: 600;
	color: #384047;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .input-range-wrapper .input-number-single input::-webkit-outer-spin-button,
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .input-range-wrapper .input-number-single input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .input-range-wrapper .input-number-single::after {
	content: 'zł';
	flex: 0 0 auto;
	color: #98a0a6;
	font-size: 14px;
}

/* ==========================================================================
   place: dropdown cs-select "Online ▾" z opcjami jako checkbox-lista (wzor).
   place_button() w scripts.js wylaczone -> pill pokazuje sie naturalnie.
   ========================================================================== */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select:is(.place, .range, .min-rate) .cs-options { min-width: 220px; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select:is(.place, .range, .min-rate) .cs-options ul li span {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px !important;
	white-space: normal;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select:is(.place, .range, .min-rate) .cs-options ul li span::after { content: none !important; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select:is(.place, .range, .min-rate) .cs-options ul li span::before {
	content: '';
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid #cfd6db;
	border-radius: 50%;
	box-sizing: border-box;
	background-position: center;
	background-repeat: no-repeat;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select:is(.place, .range, .min-rate) .cs-options ul li:hover span { background: #f2fbf8; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select:is(.place, .range, .min-rate) .cs-options ul li.cs-selected span { color: #1f9a78; font-weight: 600; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select:is(.place, .range, .min-rate) .cs-options ul li.cs-selected span::before {
	background-color: #2AC59B;
	border-color: #2AC59B;
	box-shadow: inset 0 0 0 3px #fff; /* radio: zielone kolko z bialym srodkiem */
}


/* ==========================================================================
   Panel "Wiecej filtrow" — cs-selecty jako inline checkbox-listy (wzor).
   Technika jak przy regionie: wymuszamy .cs-options widoczne/statyczne, chowamy
   trigger, opcje jako checkbox. Dotyczy reviews/ll/range/rate w .mf-col.
   Dni (available-days) tez inline. Bez licznikow.
   ========================================================================== */
/* chowamy trigger dropdownu (pill) */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select > span { display: none !important; }
/* lista opcji jako statyczna, widoczna, bez ramki/cienia */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select { width: 100%; max-width: none; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select .cs-options {
	position: static !important;
	visibility: visible !important;
	display: block !important;
	opacity: 1 !important;
	width: 100% !important;
	min-width: 0 !important;
	max-height: none !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select .cs-options ul { max-height: none !important; overflow: visible !important; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select .cs-options ul li span {
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 7px 2px !important;
	white-space: normal;
	font-size: 14px;
	color: #384047;
	background: transparent !important;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select .cs-options ul li span::after { content: none !important; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select .cs-options ul li span::before {
	content: '';
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid #cfd6db;
	border-radius: 50%;
	box-sizing: border-box;
	background-position: center;
	background-repeat: no-repeat;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select .cs-options ul li:hover span { background: #f2fbf8 !important; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select .cs-options ul li.cs-selected span { color: #1f9a78; font-weight: 600; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select .cs-options ul li.cs-selected span::before {
	background-color: #2AC59B;
	border-color: #2AC59B;
	box-shadow: inset 0 0 0 3px #fff; /* radio: zielone kolko z bialym srodkiem */
}

/* --- Dostepnosc: dni jako inline lista (bez dropdownu, bez godzin) --- */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mf-col-days #available-days > .form-control { display: none !important; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mf-col-days #available-days .list-menu {
	display: block !important;
	position: static !important;
	visibility: visible !important;
	opacity: 1 !important;
	box-shadow: none !important;
	border: 0 !important;
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
	max-height: none !important;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mf-col-days .list-menu li { list-style: none; margin: 0; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mf-col-days .list-menu li > span { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mf-col-days .avail-hours-wrap { display: none !important; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mf-col-days .list-menu li label {
	position: static !important;
	left: auto !important;
	margin: 0;
	font-size: 14px;
	color: #384047;
	cursor: pointer;
}

/* --- "Wiecej filtrow" — ikona + label + badge liczby aktywnych (dashed jak wzor) --- */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .filter-expand {
	border-style: dashed !important;
	border-color: #cdd5da !important;
	gap: 8px;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .filter-expand .mf-icon {
	width: 16px; height: 16px; flex: 0 0 auto;
	stroke: #6b747c; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .filter-expand .mf-label {
	font-size: 14px; font-weight: 500; color: #384047; line-height: 1;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .filter-expand .mf-badge {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
	border-radius: 999px; background: #2AC59B; color: #fff;
	font-size: 12px; font-weight: 700; line-height: 1;
}

/* Bez zbednych borderow w kolumnach reviews/ll (cs-select inline w panelu) */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select,
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select .cs-options,
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select ul {
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	background: transparent !important;
}


/* "Zastosuj filtry" — przycisk z listy dostepnosci przeniesiony do prawego dolnego rogu panelu */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-apply-li {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-apply-btn {
	margin: 0;
	background: #2AC59B;
	border: 0;
	border-radius: 8px;
	color: #fff;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-apply-btn:hover { background: #4ad8b2; }

/* Zastosuj filtry: przodkowie static, panel relative -> button w prawym dolnym rogu panelu */
.offer-filters-wrapper:not(.job-offers):not(.student-filters).exp .more-filters { position: relative !important; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col-days,
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col-days #available-days,
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col-days .list-menu { position: static !important; }

/* Aktywny filtr lokalizacji / ceny (poza subject) — jasnozielone tlo jak .changed */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-location.is-active .lf-loc-pill {
	background: #e6f8f2 !important;
	border-color: #2AC59B !important;
	color: #1f9a78;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-location.is-active .lf-loc-pin { stroke: #1f9a78; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-location.is-active .lf-loc-caret { border-right-color: #2AC59B; border-bottom-color: #2AC59B; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .price-range-label.is-active {
	background: #e6f8f2 !important;
	border-color: #2AC59B !important;
	color: #1f9a78 !important;
	font-weight: 600;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .price-range-label.is-active::after { border-right-color: #2AC59B; border-bottom-color: #2AC59B; }

/* Przycisk "Zastosuj" w popupie ceny — pelna szerokosc pod polami od/do */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .input-range-wrapper .mf-price-apply {
	display: block;
	clear: both;
	width: 100%;
	margin: 0;
	background: #2AC59B;
	border: 0;
	border-radius: 8px;
	color: #fff;
	padding: 11px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .input-range-wrapper .mf-price-apply:hover { background: #4ad8b2; }

/* ==========================================================================
   Belka wynikow: licznik "N korepetytorow" + podtytul + sortowanie (wzor)
   Scope: .content-wrapper. Belka jest pierwszym elementem kolumny wynikow
   (offer-list-container), wiec sort trafia na PRAWA KRAWEDZ pierwszej kolumny
   (nie nad sidebarem) — responsywnie na kazdej szerokosci.
   ========================================================================== */
.content-wrapper .results-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 18px;
}
/* licznik i sort w jednej linii bezposrednio pod chipami */
.content-wrapper .results-bar .sort-wrapper { align-self: center; }
.content-wrapper .results-bar .results-count {
	font-size: 22px;
	font-weight: 700;
	color: #263238;
	line-height: 1.2;
}
.content-wrapper .results-bar .rc-num { color: #2AC59B; }
.content-wrapper .results-bar .results-sub {
	margin-top: 4px;
	font-size: 13px;
	color: #98a2b0;
}

/* --- Sortowanie: JEDEN pill "Sortuj: <opcja> v" (ramka na wrapperze) --- */
.content-wrapper .sort-wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	line-height: 1;
	background: #fff;
	border: 1px solid #d7dee2;
	border-radius: 10px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.content-wrapper .sort-wrapper .sort-label {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: #8a949b;
	white-space: nowrap;
}
.content-wrapper div.cs-select.sort {
	display: flex;
	align-items: center;
	position: static;
	width: auto;
	min-width: 0;
	background: transparent;
	margin: 0;
}
/* natywny <select> (ma te same klasy cs-select.sort) trzymamy ukryty — bez tego
   moja regula .cs-select.sort nadpisywala .cs-select select{display:none} */
.content-wrapper .cs-select.sort select { display: none !important; }
.content-wrapper .cs-select.sort > span {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: auto;
	padding: 0 22px 0 0;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	font-size: 14px;
	font-weight: 600;
	color: #263238;
	cursor: pointer;
	white-space: nowrap;
	line-height: 1;
}
.content-wrapper .cs-select.sort > span::after {
	content: '' !important;
	position: absolute;
	right: 2px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -5px;
	border: 0;
	border-right: 2px solid #8a97a3;
	border-bottom: 2px solid #8a97a3;
	transform: rotate(45deg);
	transition: transform .15s ease;
	pointer-events: none;
}
.content-wrapper .cs-select.sort.cs-active > span::after {
	margin-top: -2px;
	transform: rotate(-135deg);
}
/* dropdown */
/* SORT dropdown = IDENTYCZNY jak "Miejsce lekcji" (:is(.place,.range,.min-rate)) */
.content-wrapper .cs-select.sort .cs-options {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: auto;
	width: auto;
	min-width: 220px;
	background: #fff;
	border: 1px solid #e6ebee !important;
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(16, 24, 40, .12);
	padding: 0;
	z-index: 300;
}
.content-wrapper .cs-select.sort .cs-options ul {
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: none;
	overflow: visible;
	border: 0 !important;
	box-shadow: none !important;
}
.content-wrapper .cs-select.sort .cs-options ul li {
	position: relative;
	display: block;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	cursor: pointer;
}
.content-wrapper .cs-select.sort .cs-options ul li span {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	font-size: 14px;
	color: #33404d;
	white-space: normal;
}
.content-wrapper .cs-select.sort .cs-options ul li span::after { content: none !important; }
.content-wrapper .cs-select.sort .cs-options ul li span::before {
	content: '';
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: 2px solid #cfd6db;
	border-radius: 50%;
	box-sizing: border-box;
}
.content-wrapper .cs-select.sort .cs-options ul li:hover span { background: #f2fbf8; }
.content-wrapper .cs-select.sort .cs-options ul li.cs-selected span { color: #1f9a78; font-weight: 600; }
.content-wrapper .cs-select.sort .cs-options ul li.cs-selected span::before {
	background-color: #2AC59B;
	border-color: #2AC59B;
	box-shadow: inset 0 0 0 3px #fff;
}

/* ==========================================================================
   MOBILE: pelnoekranowy drawer filtrow (<=767px) — wzor "1b".
   Bazuje na istniejacym #show-mob-filters -> .offer-filters-wrapper (fixed 100vh,
   main.css:7901). Tu: sticky naglowek (x Filtry / Wyczysc), scrollowane body,
   sticky stopka "Pokaz N korepetytorow". Naglowek/stopka ukryte na desktopie.
   ========================================================================== */
.mob-filters-header { display: none; }
.offer-filters-wrapper .mob-apply-btn { display: none; }

@media (max-width: 767px) {
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) {
		padding: 0 !important;
		display: none;
		background: #f4f7f9;
	}
	/* --- sticky naglowek --- */
	.offer-filters-wrapper .mob-filters-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: sticky;
		top: 0;
		z-index: 6;
		background: #fff;
		padding: 14px 16px;
		border-bottom: 1px solid #eef2f4;
	}
	.offer-filters-wrapper .mfh-close {
		width: 34px; height: 34px;
		display: flex; align-items: center; justify-content: center;
		font-size: 22px; line-height: 1; color: #58626b;
		background: #f2f5f7; border-radius: 50%;
		cursor: pointer; text-decoration: none;
	}
	.offer-filters-wrapper .mfh-title { flex: 1; font-size: 18px; font-weight: 700; color: #1f2d3d; }
	.offer-filters-wrapper .mfh-clear { font-size: 14px; font-weight: 500; color: #2AC59B; text-decoration: none; white-space: nowrap; }
	/* stary X (mobilny) chowamy — naglowek ma swoj */
	.offer-filters-wrapper > img.x { display: none !important; }
	.offer-filters-wrapper .filter-expand { display: none !important; }

	/* --- body (form) --- */
	.offer-filters-wrapper #search-filter {
		padding: 14px 16px calc(72px + env(safe-area-inset-bottom, 0px));
	}

	/* --- sticky stopka: Pokaz N --- */
	.offer-filters-wrapper .mob-apply-btn {
		display: block;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		width: 100%;
		margin: 0;
		border: 0; border-radius: 0;
		padding: 16px;
		font-size: 16px; font-weight: 700;
		color: #fff; background: #2AC59B;
		box-shadow: 0 -4px 16px rgba(16,24,40,.08);
		z-index: 12;
	}
	.offer-filters-wrapper .mob-apply-btn:hover { background: #2AC59B; }
}

/* ==========================================================================
   MOBILE drawer — krok 2: sekcje/listy (<=767px).
   Reuse desktopowych radiowych list (place/range/min-rate) + panel more-filters
   (reviews/ll/dni). Tu: uklad pionowy, tytuly sekcji, wymuszenie rozwiniecia list.
   L = .offer-filters-wrapper:not(.job-offers):not(.student-filters)
   ========================================================================== */
@media (max-width: 767px) {
	/* --- uklad: wszystko w pionie, pelna szerokosc --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .offer-filters-inner.row { margin: 0; display: block; }
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .col-20p {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		margin: 0 0 22px !important;
		float: none !important;
		display: block !important;
	}

	/* wspolny tytul sekcji */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.place::before,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.range::before,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.min-rate::before,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mf-col-title {
		display: block;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: #8a97a3;
		margin: 0 0 12px;
	}
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.place::before { content: "Miejsce lekcji"; }
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.range::before { content: "Poziom nauki"; }
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.min-rate::before { content: "Ocena"; }

	/* --- place/range/rate: pill -> rozwinieta lista radio --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.place,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.range,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.min-rate {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		background: transparent !important;
		border: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.place > .cs-placeholder,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.range > .cs-placeholder,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.min-rate > .cs-placeholder { display: none !important; }
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.place .cs-options,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.range .cs-options,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.min-rate .cs-options {
		position: static !important;
		visibility: visible !important;
		opacity: 1 !important;
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		padding: 0 !important;
	}
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.place .cs-options ul,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.range .cs-options ul,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.min-rate .cs-options ul { max-height: none !important; overflow: visible !important; }
	/* wieksze targety dotykowe */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.place .cs-options ul li,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.range .cs-options ul li,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.min-rate .cs-options ul li,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select .cs-options ul li,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .available-days .list-menu > li { font-size: 15px !important; }

	/* --- panel more-filters (Liczba opinii / Ostatnia aktywnosc / Dostepnosc / Pozostale) --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters {
		display: block !important;
		grid-template-columns: none !important;
		padding: 0 !important;
		position: static !important;
		order: 0 !important;
	}
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col { width: 100%; margin: 0 0 22px; }
	/* przycisk Zastosuj filtry w panelu (dni) chowamy — mamy sticky "Pokaz N" */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mf-apply-li { display: none !important; }

	/* --- przedmiot: zostaje dropdown, tytul nad --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.subject { width: 100% !important; max-width: 100% !important; }

	/* --- lokalizacja: rozwijamy panel (miejscowosc widoczna), pill chowamy --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-location .lf-loc-pill { display: none !important; }
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-location .lf-loc-panel {
		display: block !important;
		position: static !important;
		visibility: visible !important;
		opacity: 1 !important;
		/* panel desktopowy jest zamkniety (pointer-events:none, l.975) — na mobile
		   pokazujemy go inline, wiec MUSIMY przywrocic klikalnosc, inaczej input
		   "Wpisz miejscowosc" i select regionu sa martwe (klik przechodzi nizej). */
		pointer-events: auto !important;
		box-shadow: none !important;
		border: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		width: 100% !important;
		min-width: 0 !important;
		transform: none !important;
	}

	/* --- cena: label widoczny jako tytul, pola od/do pod spodem --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .range-form-group .price-range-label { width: 100%; }
}

/* ==========================================================================
   MOBILE drawer — krok 2 fix: pelna szerokosc, plaskie listy (bez ramek/scrolla),
   ukrycie wojewodztwa (jak wzor) i blednych placeholderow. Liczniki pomijamy.
   ========================================================================== */
@media (max-width: 767px) {
	/* --- pelny ekran (fixed bez width -> shrink-to-fit -> waski) --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) {
		width: 100% !important;
		left: 0 !important;
		right: 0 !important;
	}

	/* --- wszystkie WYMUSZONE listy plasko: bez ramki, cienia, tla, scrolla --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.place .cs-options,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.range .cs-options,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.min-rate .cs-options,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select .cs-options {
		position: static !important;
		visibility: visible !important;
		opacity: 1 !important;
		display: block !important;
		border: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
		padding: 0 !important;
		width: 100% !important;
		min-width: 0 !important;
		max-height: none !important;
		overflow: visible !important;
	}
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.place .cs-options ul,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.range .cs-options ul,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.min-rate .cs-options ul,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select .cs-options ul {
		max-height: none !important;
		overflow: visible !important;
	}

	/* --- ukryj placeholdery/triggery wymuszonych list (blakajace sie "Wszystkie" itd.) --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.place .cs-placeholder,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.range .cs-placeholder,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.min-rate .cs-placeholder,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select .cs-placeholder { display: none !important; }

	/* --- lokalizacja: tylko miejscowosc; wojewodztwo (dluga lista) ukrywamy jak wzor --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-panel > .col-20p:last-child { display: none !important; }
}

/* ==========================================================================
   MOBILE drawer — fix scrolla: blokada strony pod spodem + overscroll contain.
   Bez tego scroll idzie na strone, nie na liste filtrow.
   ========================================================================== */
html.mob-filters-open,
html.mob-filters-open body {
	overflow: hidden !important;
	height: 100% !important;
}

@media (max-width: 767px) {
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) {
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	/* natywne <select> wymuszonych list trzymamy ukryte (zrodlo blakajacych sie "Wszystkie"/"Ocena") */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.place select,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.range select,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.min-rate select,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select select { display: none !important; }
	/* placeholder (span z tekstem wybranej opcji) — pewne ukrycie */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.place > span.cs-placeholder,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.range > span.cs-placeholder,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.min-rate > span.cs-placeholder { display: none !important; }
	/* plasko: zaden kontener wymuszonej listy nie ma ramki/tla */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.place,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.range,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.min-rate,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.place .cs-options ul,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.range .cs-options ul,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.min-rate .cs-options ul {
		border: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
	}
}

/* ==========================================================================
   MOBILE drawer — scroll przez FLEX (niezawodny): wrapper = kolumna bez scrolla,
   naglowek staly u gory, FORMULARZ scrolluje (flex:1 + overflow-y:auto),
   przycisk "Pokaz N" position:fixed na dole. Scope html.mob-filters-open zeby
   nie nadpisywac display:none gdy drawer zamkniety.
   ========================================================================== */
html.mob-filters-open,
html.mob-filters-open body { overflow: hidden !important; }

@media (max-width: 767px) {
	html.mob-filters-open .offer-filters-wrapper:not(.job-offers):not(.student-filters) {
		display: flex !important;
		flex-direction: column;
		height: 100vh !important;
		max-height: 100vh !important;
		overflow: hidden !important;
	}
	html.mob-filters-open .offer-filters-wrapper:not(.job-offers):not(.student-filters) .mob-filters-header {
		flex: 0 0 auto;
		position: static;
	}
	html.mob-filters-open .offer-filters-wrapper:not(.job-offers):not(.student-filters) #search-filter {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
}

/* MOBILE drawer — wiekszy zapas na dole formularza, zeby ostatnia sekcja nie chowala sie pod sticky "Pokaz N" */
@media (max-width: 767px) {
	html.mob-filters-open .offer-filters-wrapper:not(.job-offers):not(.student-filters) #search-filter {
		padding-bottom: calc(131px + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* ==========================================================================
   MOBILE drawer — wyglad wg wzoru "1b" (bez licznikow).
   Karta Przedmiot+Lokalizacja, tytuly sekcji pogrubione, kwadratowe zielone
   checkboxy, przedmiot jako zwykly dropdown, odstepy.
   L = .offer-filters-wrapper:not(.job-offers):not(.student-filters)
   ========================================================================== */
@media (max-width: 767px) {
	/* tlo drawera lekko szare, sekcje na bialo/plasko */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) { background: #f7f9fa; }

	/* --- tytuly sekcji: pogrubione, ciemne, sentence-case (nadpisuje uppercase z kroku 2) --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.place::before,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.range::before,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.min-rate::before,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mf-col-title {
		text-transform: none !important;
		letter-spacing: 0 !important;
		font-size: 16px !important;
		font-weight: 700 !important;
		color: #1f2d3d !important;
		margin: 0 0 10px !important;
	}

	/* --- kazda sekcja filtra jako KARTA (spojnie z cena i gorna karta): pelna
	   szerokosc, biale tlo, border, radius, rowny padding. Bez tego radia
	   "plywaly" przy lewej krawedzi z pusta masa swiatla po prawej. --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .offer-filters-inner > .col-20p:has(.cs-select.place),
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .offer-filters-inner > .col-20p:has(.cs-select.range),
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .offer-filters-inner > .col-20p:has(.cs-select.min-rate),
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters > .col-20p.mf-col {
		background: #fff !important;
		border: 1px solid #e8edf0 !important;
		border-radius: 12px !important;
		padding: 14px !important;
		margin: 0 0 12px !important;
	}
	/* jednolity 12px odstep miedzy kartami: cena + dolna krawedz gornej karty */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .offer-filters-inner > .col-20p:has(.range-form-group),
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .offer-filters-inner > .lf-location { margin-bottom: 12px !important; }

	/* --- pozycje list: rzad z checkboxem po lewej, wiekszy target --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.place .cs-options ul li,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.range .cs-options ul li,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.min-rate .cs-options ul li,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select .cs-options ul li {
		padding: 11px 0 !important;
		font-size: 15px !important;
		color: #33404d !important;
	}
	/* place/range/rate: BEZ nadpisania ksztaltu — mobile dziedziczy desktopowe
	   OKRAGLE radia (border-radius 50% + zielone z inset bialym), zeby bylo
	   "tak samo jak desktop". (Wczesniej byly tu kwadraty z checkmarkiem.) */

	/* --- dwie OSOBNE karty: PRZEDMIOT i LOKALIZACJA (wg wzoru 1b) --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .offer-filters-inner > .col-20p:first-child,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .offer-filters-inner > .lf-location {
		background: #fff !important;
		border: 1px solid #e8edf0 !important;
		border-radius: 12px !important;
		padding: 14px !important;
		margin: 0 0 12px !important;
		position: relative;
	}
	/* etykiety nad polem (uppercase, szara) — osobno dla kazdej karty */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .offer-filters-inner > .col-20p:first-child::before,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .offer-filters-inner > .lf-location::before {
		display: block;
		font-size: 16px; font-weight: 700; color: #1f2d3d; margin-bottom: 10px;
	}
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .offer-filters-inner > .col-20p:first-child::before { content: "Przedmiot"; }
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .offer-filters-inner > .lf-location::before { content: "Lokalizacja"; }
	/* miejscowosc: bez dolnego marginesu col-20p (region ukryty) -> rowny padding karty 14px */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-location .lf-loc-panel .col-20p { margin-bottom: 0 !important; }

	/* --- przedmiot: zwykly dropdown (nie zielony pill) --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.subject,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.subject.changed {
		background: #fff !important;
		border: 1px solid #dfe5e9 !important;
		border-radius: 10px !important;
	}
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.subject > span.cs-placeholder {
		background: transparent !important;
		color: #1f2d3d !important;
		border: 0 !important;
		padding: 12px 40px 12px 14px !important;
		font-size: 15px !important;
		font-weight: 500 !important;
		height: auto !important;
	}

	/* --- miejscowosc: input jak wzor --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-panel .city_autocomplete {
		width: 100% !important;
		padding: 12px 14px !important;
		border: 1px solid #dfe5e9 !important;
		border-radius: 10px !important;
		font-size: 15px !important;
		background: #fff !important;
	}

	/* --- stopka: przycisk z marginesem + zaokragleniem (wzor), na bialym pasku --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mob-apply-btn {
		left: 14px !important;
		right: 14px !important;
		bottom: 14px !important;
		width: auto !important;
		border-radius: 12px !important;
		padding: 15px !important;
		box-shadow: 0 8px 24px rgba(42,197,155,.35) !important;
	}
	/* bialy pasek pod przyciskiem (zeby tresc nie przebijala) */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) #search-filter::after {
		content: "";
		position: fixed;
		left: 0; right: 0; bottom: 0;
		height: calc(72px + env(safe-area-inset-bottom, 0px));
		background: linear-gradient(to top, #f7f9fa 60%, rgba(247,249,250,0));
		pointer-events: none;
		z-index: 11;
	}
}

/* ==========================================================================
   MOBILE drawer — fix spojnosci wg wzoru: przedmiot zwykly (nie zielony),
   wojewodztwo ukryte, cena inline (slider+od/do), etykiety schowane.
   ========================================================================== */
@media (max-width: 767px) {
	/* --- przedmiot: nadpisz zielony pill (.subject.changed, reguła 890 ma !important) --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.subject.changed > span,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.subject.changed .cs-placeholder {
		background: transparent !important;
		background-image: none !important;
		border-color: transparent !important;
		color: #1f2d3d !important;
	}
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.subject.changed > span::after {
		border-right-color: #8a97a3 !important;
		border-bottom-color: #8a97a3 !important;
	}

	/* --- wojewodztwo: ukryte (jak wzor — karta ma tylko miejscowosc) --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-panel .col-20p:has(.cs-select.city_region) { display: none !important; }
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-panel .cs-select.city_region,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-loc-panel label[for="city_region"] { display: none !important; }

	/* --- cena: popup (position:absolute) -> inline slider + od/do w KARCIE
	   spojnej z gorna "Przedmiot i lokalizacja" (biale tlo, border, radius,
	   rowny padding). Padding karty daje wciecie -> input-range-wrapper flush. --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .range-form-group {
		position: relative;
		background: #fff !important;
		border: 1px solid #e8edf0 !important;
		border-radius: 12px !important;
		padding: 14px !important;
		margin: 0 !important;
	}
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .range-form-group::before {
		content: "Cena za 60 min";
		display: block;
		font-size: 16px; font-weight: 700; color: #1f2d3d;
		margin: 0 0 14px;
	}
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .price-range-label { display: none !important; }
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .input-range-wrapper {
		position: static !important;
		visibility: visible !important;
		display: block !important;
		opacity: 1 !important;
		width: 100% !important;
		max-width: 100% !important;
		border: 0 !important;
		box-shadow: none !important;
		padding: 0 !important;
		z-index: auto !important;
	}
	/* od/do to ostatni element w karcie -> zero marginesu dolnego (padding karty
	   robi odstep). Inaczej 12px + 14px = za duzo pustki na dole. */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .input-range-wrapper .input-number-single { margin-bottom: 0 !important; }
	/* przycisk "Zastosuj" w popupie ceny niepotrzebny inline (mamy sticky Pokaz N) */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .input-range-wrapper .mf-price-apply { display: none !important; }

	/* --- schowaj opisowe <label> (pokazywaly sie jako wiersze/tekst) --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .form-group > label[for="place"],
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .form-group > label[for="range"],
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .form-group > label[for="rate"],
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .form-group > label[for="reviews"],
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .form-group > label[for="ll"],
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .form-group > label[for="cena"],
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .form-group > label[for="subject"],
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .form-group > label[for="city"] {
		position: absolute !important;
		left: -9999px !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
	}
}

/* ==========================================================================
   MOBILE drawer — standaryzacja list: jednolite odstepy, plaskie tla,
   wszystkie checkboxy kwadratowe zielone (reviews/ll tez).
   ========================================================================== */
@media (max-width: 767px) {
	/* --- Dostepnosc: bez bialego tla list-menu (jak inne sekcje) --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .available-days .list-menu,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) #available-days .list-menu,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) #available-days {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		padding: 0 !important;
	}

	/* --- jednolite odstepy wierszy: li bez paddingu, span decyduje --- */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.place .cs-options ul li,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.range .cs-options ul li,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.min-rate .cs-options ul li,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select .cs-options ul li {
		padding: 0 !important;
		margin: 0 !important;
	}
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.place .cs-options ul li span,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.range .cs-options ul li span,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.min-rate .cs-options ul li span,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select .cs-options ul li span,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .available-days .list-menu li > span {
		padding: 9px 0 !important;
		gap: 12px !important;
		font-size: 15px !important;
		color: #33404d !important;
	}

	/* reviews/ll (panel): BEZ nadpisania ksztaltu — dziedzicza desktopowe OKRAGLE
	   radia (tak samo jak desktop). (Wczesniej byly tu kwadraty z checkmarkiem.) */
}

/* ==========================================================================
   MOBILE — ujednolicenie: transparent tlo dni + dni/Pozostale (PNG checkbox)
   na CSS zielone kwadraty jak listy cs-options.
   ========================================================================== */
@media (max-width: 767px) {
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .available-days .list-menu li > span { background: transparent !important; }

	/* main.css:7594 (@media >=480) daje .form-group-checkbox line-height:48px
	   (desktopowy pasek) -> w drawerze wiersze Pozostale mialy 66px zamiast ~40px
	   (label dziedziczyl 48px). Reset do zwartego rytmu jak Dostepnosc. */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mf-col-checks .form-group-checkbox,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mf-col-checks .form-group-checkbox label { line-height: 1.3 !important; }

	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .available-days .list-menu input[type="checkbox"] + label:before,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .form-group-checkbox input[type="checkbox"] + label:before {
		background: #fff !important;
		border: 2px solid #cfd6db !important;
		border-radius: 5px !important;
		width: 22px !important;
		height: 22px !important;
		box-sizing: border-box !important;
		vertical-align: middle !important;
		margin-right: 10px !important;
	}
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .available-days .list-menu input[type="checkbox"]:checked + label:before,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .form-group-checkbox input[type="checkbox"]:checked + label:before {
		background: #2AC59B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center no-repeat !important;
		border-color: #2AC59B !important;
	}
}

/* MOBILE — splaszcz TYLKO WNETRZE Dostepnosci (available-days/list-menu/li/span).
   Karta na .mf-col-days (wrapper sekcji) ZOSTAJE — biala ramka jak inne sekcje.
   (Wczesniej pierwszy selektor .mf-col.mf-col-days zdzieral tez karte wrappera.) */
@media (max-width: 767px) {
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col-days #available-days.available-days,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col-days #available-days .list-menu,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col-days #available-days .list-menu > li,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col-days #available-days .list-menu li > span {
		background: transparent !important;
		background-color: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		border-radius: 0 !important;
	}
}

/* MOBILE — przycisk "Pokaz N" na sam wierzch (listy cs-select maja z-index:100 -> nachodzily) + wyzszy */
@media (max-width: 767px) {
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mob-apply-btn {
		z-index: 9999 !important;
		padding: 18px !important;
		font-size: 16px !important;
	}
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) #search-filter::after { z-index: 9990 !important; }
	/* Reset z-index USUNIETY — przycisk (9999) i tak jest nad listami (z-index:100),
	   a reset psul z-index subject-dropdowna (otwarty nachodzil/chowal sie pod
	   sekcjami ponizej, przeslanial "Wpisz miejscowosc"). Subject cs-select
	   zachowuje z-index:100 -> jego cs-options floatuje nad trescia, pod przyciskiem. */
}

/* MOBILE — naglowek drawera: rowne wysrodkowanie w pionie (rozne line-height rozjezdzalo) */
@media (max-width: 767px) {
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mob-filters-header { align-items: center !important; }
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mfh-title,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mfh-clear {
		display: inline-flex;
		align-items: center;
		line-height: 1 !important;
	}
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mfh-close { line-height: 1 !important; }
}

/* MOBILE — naglowek: rowne wysrodkowanie (X lapal top) + przycisk: auto height (bylo height:40px z .btn -> ucinalo tekst) */
@media (max-width: 767px) {
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mob-filters-header {
		display: flex !important;
		align-items: center !important;
		min-height: 0 !important;
		padding: 12px 16px !important;
	}
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mfh-close,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mfh-title,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mfh-clear {
		align-self: center !important;
		margin: 0 !important;
	}
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mob-apply-btn {
		height: auto !important;
		min-height: 0 !important;
		line-height: 1.25 !important;
		padding: 15px !important;
		white-space: normal !important;
	}
}

/* MOBILE — przycisk "Filtry" (#show-mob-filters): pelna szerokosc, styl desktopowego
   "Wiecej filtrow" (ikona lejka + jasne tlo + border), zamiast malo atrakcyjnego zielonego. */
@media (max-width: 767px) {
	#show-mob-filters {
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 9px;
		width: 100% !important;
		box-sizing: border-box;
		margin: 14px 0 !important;
		padding: 14px !important;
		background: #fff !important;
		color: #384047 !important;
		border: 1px solid #d7dee2 !important;
		border-radius: 10px !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		line-height: 1 !important;
		box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
		text-shadow: none !important;
	}
	#show-mob-filters::before {
		content: "";
		width: 18px; height: 18px;
		flex: 0 0 auto;
		background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236b747c%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cline x1=%274%27 y1=%277%27 x2=%2720%27 y2=%277%27/%3E%3Cline x1=%277%27 y1=%2712%27 x2=%2717%27 y2=%2712%27/%3E%3Cline x1=%2710%27 y1=%2717%27 x2=%2714%27 y2=%2717%27/%3E%3C/svg%3E") center/contain no-repeat;
	}
	#show-mob-filters:hover { background: #f7f9fa !important; }
}

/* offer-list-container: min-height zeby przy 0 wynikach (po zamknieciu niebieskiego
   komunikatu "Nie odnaleziono") lewa kolumna nie zapadala sie do h=0 -> sidebar
   (float:left) nie ucieka w lewo. Na stronach z wynikami lista jest wyzsza -> bez wplywu. */
.offer-list-container { min-height: 400px; }

/* ==========================================================================
   Subject dropdown — grupy <optgroup> "Popularne"/"Pozostale" (SelectFx -> .cs-optgroup).
   Naglowki grup jak wzor (szare uppercase). value=0 "Wszystkie przedmioty" ukryte
   w liscie (to placeholder pigulki).
   ========================================================================== */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.subject .cs-options > ul > li[data-value="0"] { display: none !important; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.subject .cs-options .cs-optgroup { list-style: none; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.subject .cs-options .cs-optgroup > span {
	display: block;
	padding: 12px 14px 5px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #98a0a6;
	cursor: default;
	background: transparent !important;
}
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.subject .cs-options .cs-optgroup > ul { margin: 0; padding: 0; list-style: none; }
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .cs-select.subject .cs-options .cs-optgroup:hover > span { background: transparent !important; }