/*
Theme Name: Language School
Template: kadence
Description: Child theme Kadence dla platformy szkoły językowej.
Version: 2.23.13
Text Domain: language-school
*/

/* Tu wpisujesz własny CSS. Kadence ładuje swoje style automatycznie. */

/* ======================
   Lektorzy - profil i kursy
   ====================== */

.lektor-kursy-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin: 2rem 0;
}

.kurs-card {
	background: var(--color-background-secondary, #f9f9f9);
	border: 1px solid var(--color-border-tertiary, #e0e0e0);
	border-radius: 8px;
	padding: 1.5rem;
	transition: box-shadow 0.2s ease;
}

.kurs-card:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.kurs-card h3 {
	margin-top: 0;
	font-size: 1.25rem;
}

.kurs-card h3 a {
	color: inherit;
	text-decoration: none;
}

.kurs-card h3 a:hover {
	color: var(--color-text-info, #0066cc);
}

.kurs-card p {
	margin: 0.75rem 0;
	color: var(--color-text-secondary, #666);
	font-size: 0.95rem;
	line-height: 1.5;
}

.kurs-card .cena {
	font-size: 1.1rem;
	color: var(--color-text-primary, #000);
	margin: 1rem 0 0.5rem 0;
}

.kurs-card .cena strong {
	color: var(--color-text-info, #0066cc);
	font-weight: 600;
}

.kurs-card ul {
	margin: 1rem 0 0.5rem 0;
	padding-left: 1.25rem;
	font-size: 0.9rem;
}

.kurs-card li {
	margin-bottom: 0.4rem;
	color: var(--color-text-secondary, #666);
}

.kurs-card .btn {
	display: inline-block;
	margin-top: 1rem;
	padding: 0.6rem 1.2rem;
	background: var(--color-text-info, #0066cc);
	color: white;
	text-decoration: none;
	border-radius: 4px;
	font-size: 0.9rem;
	transition: background 0.2s ease;
}

.kurs-card .btn:hover {
	background: var(--color-text-info, #0052a3);
	color: white;
}

.lektor-kursy-section {
	margin: 3rem 0;
}

.lektor-kursy-section h2 {
	margin-bottom: 2rem;
	font-size: 1.75rem;
}

/* ============================================================
   NAGŁÓWEK I STRONY - dodane w 1.90.6
   Styl elementów Kadence, których nie da się ustawić z Customizera
   per język. Ładowane zawsze (style.css wchodzi po stylach Kadence).
   ============================================================ */

/* ── Przycisk „Moje konto" jako pozycja menu (klasa CSS pozycji: mw-btn-konto) ──
   Zamiast przycisku z Customizera, który jest globalny i miał jeden URL
   dla obu języków. Pozycja w menu = Polylang podaje właściwy język sam. */

.mw-btn-konto {
	--btn-bg: #42C690;
	--btn-hover: #35A878;
	display: flex;
	align-items: center;
}

.main-navigation .mw-btn-konto > a,
.mobile-navigation .mw-btn-konto > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--btn-bg);
	color: #fff !important;
	border-radius: 8px;
	padding: 11px 22px !important;
	font-size: 0.95em;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	text-decoration: none !important;
	box-shadow: 0 1px 2px rgba(16, 42, 67, 0.08);
	transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.main-navigation .mw-btn-konto > a:hover,
.main-navigation .mw-btn-konto > a:focus-visible {
	background: var(--btn-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(66, 198, 144, 0.32);
}

.main-navigation .mw-btn-konto > a:active {
	transform: translateY(0);
	box-shadow: none;
}

.main-navigation .mw-btn-konto > a:focus-visible {
	outline: 2px solid #102A43;
	outline-offset: 3px;
}

/* Kadence dokleja pod pozycjami menu animowane podkreślenie - zbędne */
.main-navigation .mw-btn-konto > a::before,
.main-navigation .mw-btn-konto > a::after,
.main-navigation .mw-btn-konto > a .nav-drop-title-wrap::after {
	display: none !important;
}

@media (min-width: 1025px) {
	.main-navigation .mw-btn-konto {
		margin-left: 16px;
	}
}

.mobile-navigation .mw-btn-konto > a {
	width: 100%;
	margin: 10px 0 0;
	padding: 14px 20px !important;
}

/* ── Przełącznik języka Polylang ──
   UWAGA: Polylang nie przepuszcza pola „Klasy CSS" z menu do tej pozycji -
   wstawia własną .pll-parent-menu-item. Flaga i strzałka to dwa osobne
   elementy (<a href="#pll_switcher"> + <button>), więc pigułką jest <li>. */

.main-navigation li.pll-parent-menu-item {
	position: relative;
	display: flex !important;
	align-items: center;
	gap: 2px;
	margin-left: 12px;
	padding: 5px 8px;
	border: 1px solid rgba(16, 42, 67, 0.12);
	border-radius: 10px;
	background: #fff;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.main-navigation li.pll-parent-menu-item:hover,
.main-navigation li.pll-parent-menu-item:focus-within {
	border-color: rgba(16, 42, 67, 0.28);
	box-shadow: 0 2px 6px rgba(16, 42, 67, 0.08);
}

.main-navigation li.pll-parent-menu-item > a {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	padding: 0 !important;
	background: none !important;
	line-height: 1;
	text-decoration: none !important;
}

.main-navigation li.pll-parent-menu-item > button.dropdown-nav-special-toggle {
	display: inline-flex !important;
	align-items: center;
	padding: 0 2px !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	cursor: pointer;
}

.main-navigation li.pll-parent-menu-item > button svg {
	width: 10px;
	height: 10px;
	opacity: 0.5;
	transition: transform 0.18s ease;
}

.main-navigation li.pll-parent-menu-item:hover > button svg,
.main-navigation li.pll-parent-menu-item > button[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.main-navigation li.pll-parent-menu-item img,
.main-navigation li.pll-parent-menu-item .sub-menu img {
	display: block;
	width: 20px;
	height: auto;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(16, 42, 67, 0.14);
}

/* Lista języków - biała karta pod treść, zamiast płachty w kolorze menu */
.main-navigation li.pll-parent-menu-item > .sub-menu {
	left: auto !important;
	right: 0 !important;
	width: auto !important;
	min-width: 0 !important;
	padding: 6px !important;
	background: #fff !important;
	border: 1px solid rgba(16, 42, 67, 0.10) !important;
	border-radius: 10px !important;
	box-shadow: 0 12px 30px rgba(16, 42, 67, 0.15) !important;
}

.main-navigation li.pll-parent-menu-item .sub-menu li.lang-item {
	width: auto !important;
	border: 0 !important;
}

.main-navigation li.pll-parent-menu-item .sub-menu li.lang-item > a {
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 9px 12px !important;
	border-radius: 6px;
	background: transparent !important;
	color: #102A43 !important;
	font-size: 0.9rem;
	line-height: 1;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.main-navigation li.pll-parent-menu-item .sub-menu li.lang-item > a:hover,
.main-navigation li.pll-parent-menu-item .sub-menu li.lang-item > a:focus-visible {
	background: rgba(66, 198, 144, 0.14) !important;
}

.main-navigation li.pll-parent-menu-item .sub-menu li.current-lang > a {
	background: rgba(66, 198, 144, 0.18) !important;
	font-weight: 600;
}

.mobile-navigation li.pll-parent-menu-item {
	display: block !important;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.mobile-navigation li.pll-parent-menu-item .sub-menu li.lang-item > a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 20px !important;
}

/* =========================================================
   CIEMNY NAGŁÓWEK STRONY (baner z tytułem)
   ---------------------------------------------------------
   Węższy, zaokrąglony pasek z tytułem i okruszkami. Ten sam wygląd
   dostają: sklep, archiwum produktów oraz każda strona z zaznaczonym
   polem „Ciemny pasek z tytułem" (edycja strony → Nagłówek strony).

   Projekt mieszkał wcześniej w „Dodatkowym CSS" i był przypięty do ID
   stron, przez co przełącznik w motywie dawał inny, starszy wygląd:
   pełna szerokość, kwadratowe rogi, wyższy odstęp. Całość jest teraz
   tutaj, w jednym miejscu.

   ID 330 (Lektorzy) i 457 (Lecturers) zostawione jako zapas, do czasu
   aż przełącznik będzie na nich włączony.

   Wymiary zmieniasz trzema zmiennymi poniżej.
   ========================================================= */

:root {
	--mw-banner-szer: 1240px;   /* szerokość banera */
	--mw-banner-rogi: 18px;     /* zaokrąglenie rogów */
	--mw-banner-wys: 48px;      /* odstęp góra i dół */
	--mw-banner-tlo: #1E3A5F;   /* tło; pojedynczą stronę nadpisuje pole „Kolor tła" */
}

/* --- Tło i kolory tekstu --- */

body.ls-naglowek .entry-hero-container-inner,
body.page-id-330 .entry-hero-container-inner,
body.page-id-457 .entry-hero-container-inner {
	background: var(--mw-banner-tlo);
}

body.ls-naglowek .entry-hero .entry-header,
body.page-id-330 .entry-hero .entry-header,
body.page-id-457 .entry-hero .entry-header {
	text-align: center;
}

body.ls-naglowek .entry-hero h1.entry-title,
body.page-id-330 .entry-hero h1.entry-title,
body.page-id-457 .entry-hero h1.entry-title {
	margin: 0;
	color: #fff;
}

body.ls-naglowek .entry-hero .kadence-breadcrumbs,
body.ls-naglowek .entry-hero .kadence-breadcrumbs a,
body.ls-naglowek .entry-hero .archive-description,
body.page-id-330 .entry-hero .kadence-breadcrumbs,
body.page-id-330 .entry-hero .kadence-breadcrumbs a,
body.page-id-330 .entry-hero .archive-description,
body.page-id-457 .entry-hero .kadence-breadcrumbs,
body.page-id-457 .entry-hero .kadence-breadcrumbs a,
body.page-id-457 .entry-hero .archive-description {
	color: rgba(255, 255, 255, 0.82);
}

/* --- Kształt: węższy pasek z zaokrąglonymi rogami --- */

body.post-type-archive-product .entry-hero-container-inner,
body.woocommerce-shop .entry-hero-container-inner,
.product-archive-hero-section .entry-hero-container-inner,
body.ls-naglowek .entry-hero-container-inner,
body.page-id-330 .entry-hero-container-inner,
body.page-id-457 .entry-hero-container-inner {
	max-width: var(--mw-banner-szer);
	margin-left: auto;
	margin-right: auto;
	border-radius: var(--mw-banner-rogi);
	overflow: hidden;
}

/* Nakładka Kadence musi przyjąć ten sam promień,
   inaczej w rogach zostają kwadratowe ślady. */
body.post-type-archive-product .hero-section-overlay,
body.woocommerce-shop .hero-section-overlay,
.product-archive-hero-section .hero-section-overlay,
body.ls-naglowek .hero-section-overlay,
body.page-id-330 .hero-section-overlay,
body.page-id-457 .hero-section-overlay {
	border-radius: inherit;
}

/* --- Wysokość --- */

body.post-type-archive-product .entry-hero .entry-header,
body.woocommerce-shop .entry-hero .entry-header,
.product-archive-hero-section .entry-header,
body.ls-naglowek .entry-hero .entry-header,
body.page-id-330 .entry-hero .entry-header,
body.page-id-457 .entry-hero .entry-header {
	padding-top: var(--mw-banner-wys);
	padding-bottom: var(--mw-banner-wys);
}

/* --- Oddech nad i pod banerem --- */

body.post-type-archive-product .entry-hero,
body.woocommerce-shop .entry-hero,
.product-archive-hero-section,
body.ls-naglowek .entry-hero,
body.page-id-330 .entry-hero,
body.page-id-457 .entry-hero {
	margin-top: 24px;
	margin-bottom: 32px;
}

/* Marginesy boczne, gdy okno węższe niż baner. */
@media (max-width: 1180px) {
	body.post-type-archive-product .entry-hero-container-inner,
	body.woocommerce-shop .entry-hero-container-inner,
	.product-archive-hero-section .entry-hero-container-inner,
	body.ls-naglowek .entry-hero-container-inner,
	body.page-id-330 .entry-hero-container-inner,
	body.page-id-457 .entry-hero-container-inner {
		margin-left: 20px;
		margin-right: 20px;
	}
}

@media (max-width: 767px) {
	:root {
		--mw-banner-rogi: 12px;
		--mw-banner-wys: 32px;
	}
	body.post-type-archive-product .entry-hero-container-inner,
	body.woocommerce-shop .entry-hero-container-inner,
	.product-archive-hero-section .entry-hero-container-inner,
	body.ls-naglowek .entry-hero-container-inner,
	body.page-id-330 .entry-hero-container-inner,
	body.page-id-457 .entry-hero-container-inner {
		margin-left: 16px;
		margin-right: 16px;
	}
}

/* ============================================================
   FLUENT FORMS - wspólna skórka dla WSZYSTKICH formularzy
   ------------------------------------------------------------
   Celowo bez numeru formularza w selektorze. Wcześniej styl siedział
   w polu „Custom CSS" pojedynczego formularza i był przypięty do jego ID,
   więc kopia formularza wychodziła nieostylowana, a styl ładował się tylko
   na podstronie z tym jednym formularzem.

   Teraz mieszka w style.css, który ładuje się zawsze i wchodzi po stylach
   Kadence. `!important` jest tu świadome: nadpisujemy cudzy formularz,
   a Kadence ma własne ustawienia pól i wygrywa specyficznością.

   Chcesz JEDEN formularz inaczej? Dopisz regułę z jego opakowaniem,
   np. `.fluentform_wrapper_7 .ff-btn-submit { ... }`.
   ============================================================ */

.fluentform {
	font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
	color: #566576;
}

/* ── odstępy ── */
.fluentform .ff-el-group {
	margin-bottom: 22px !important;
}

/* Koniec formularza bez zbędnego marginesu pod przyciskiem. */
.fluentform form,
.fluentform .frm-fluent-form,
.fluentform .ff-el-group.ff_submit_btn_wrapper,
.fluentform .ff_submit_btn_wrapper,
.fluentform .ff-el-group:last-child {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* ── etykiety ── */
.fluentform .ff-el-input--label label,
.fluentform label.ff-el-form-label {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #1E3A5F !important;
	margin-bottom: 8px !important;
	display: inline-block;
	line-height: 1.4;
}
.fluentform .ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-is-required.asterisk-left label:before {
	color: #2f6a52 !important;
	font-weight: 700;
}

/* ── pola ── */
.fluentform input.ff-el-form-control,
.fluentform textarea.ff-el-form-control,
.fluentform select.ff-el-form-control {
	width: 100%;
	font-family: inherit !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	color: #1E3A5F !important;
	background: #fff !important;
	border: 1px solid #d7dfe8 !important;
	border-radius: 6px !important;
	padding: 12px 14px !important;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fluentform .ff-el-form-control::placeholder {
	color: #8a99a8 !important;
	opacity: 1;
}
.fluentform .ff-el-form-control:hover {
	border-color: #b9c6d4 !important;
}
.fluentform .ff-el-form-control:focus {
	outline: none !important;
	border-color: #42C690 !important;
	box-shadow: 0 0 0 3px rgba(66, 198, 144, .18) !important;
}
.fluentform textarea.ff-el-form-control {
	min-height: 140px !important;
	resize: vertical;
}

/* Lista rozwijana z własną strzałką. */
.fluentform select.ff-el-form-control {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231E3A5F' stroke-width='1.6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 12px !important;
}

/* ── zgody: kwadracik i link ── */
.fluentform .ff-el-form-check {
	margin-bottom: 6px !important;
}
.fluentform .ff-el-form-check-label,
.fluentform .ff-el-form-check label {
	display: flex !important;
	gap: 11px;
	align-items: flex-start;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
	color: #566576 !important;
	cursor: pointer;
	margin-bottom: 0 !important;
}
.fluentform input[type="checkbox"],
.fluentform input[type="radio"] {
	width: 18px !important;
	height: 18px !important;
	margin: 2px 0 0 !important;
	accent-color: #42C690;
	flex: 0 0 auto;
	cursor: pointer;
}
.fluentform .ff-el-form-check-label a,
.fluentform .ff-el-tc a {
	color: #1E3A5F !important;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.fluentform .ff-el-form-check-label a:hover {
	color: #2f6a52 !important;
}

/* ── podpowiedź pod polem ── */
.fluentform .ff-el-help-message {
	text-align: left !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.5 !important;
	color: #8a99a8 !important;
	margin: 6px 0 0 !important;
}

/* ── błędy ── */
.fluentform .ff-el-is-error .ff-el-form-control {
	border-color: #b32d2e !important;
	box-shadow: 0 0 0 3px rgba(179, 45, 46, .12) !important;
}
.fluentform .text-danger,
.fluentform .error,
.fluentform .error-text {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #b32d2e !important;
	margin-top: 6px !important;
	text-align: left !important;
}

/* ── przycisk ── */
.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	color: #fff !important;
	background: #1E3A5F !important;
	border: 1.5px solid transparent !important;
	border-radius: 6px !important;
	padding: 16px 30px !important;
	margin: 0 !important;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
	background: #16314f !important;
	color: #fff !important;
}
.fluentform .ff-btn-submit:active {
	transform: translateY(1px);
}
.fluentform .ff-btn-submit:focus-visible {
	outline: 2px solid #42C690 !important;
	outline-offset: 3px;
}

/* ── nagłówek sekcji w formularzu ── */
.fluentform .ff-el-section-break {
	border: 0 !important;
	border-top: 1px solid #eef2f6 !important;
	padding-top: 22px !important;
	margin-top: 6px !important;
}
.fluentform .ff-el-section-break h3 {
	font-size: 20px !important;
	font-weight: 800 !important;
	color: #1E3A5F !important;
	margin: 0 0 6px !important;
}
.fluentform .ff-el-section-break p {
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: #566576 !important;
	margin: 0 !important;
}

/* ── komunikat po wysłaniu ── */
.fluentform .ff-message-success {
	background: #eaf6f0 !important;
	border: 1px solid #9FE1CB !important;
	border-radius: 8px !important;
	padding: 18px 20px !important;
	font-size: 16px !important;
	line-height: 1.6 !important;
	color: #2f6a52 !important;
	margin: 0 !important;
}

/* ── telefon ── */
@media (max-width: 600px) {
	.fluentform .ff-t-cell {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.fluentform .ff-btn-submit,
	.fluentform button[type="submit"] {
		width: 100% !important;
	}
}

/* =========================================================
   PASEK SKRÓTÓW przy krawędzi ekranu (inc/pasek-skrotow.php)
   Kwadratowe kafelki, po najechaniu rozwija się nazwa.
   Kolor tła ustawia redaktor w polach, tekst zawsze biały.
   ========================================================= */

.mw-dock {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 9990;             /* nad treścią, pod banerem cookies i modalami */
	display: flex;
	flex-direction: column;
	align-items: flex-end;     /* rozwijanie idzie w lewo, do środka ekranu */
	gap: 6px;
	padding: 0 0 0 8px;
	pointer-events: none;      /* pusty obszar paska nie łapie kliknięć */
}
.mw-dock--lewa {
	right: auto;
	left: 0;
	align-items: flex-start;
	padding: 0 8px 0 0;
}

.mw-dock__el {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 0;
	height: 48px;
	min-width: 48px;
	max-width: 48px;
	padding: 0;
	border-radius: 10px 0 0 10px;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(22, 36, 59, .18);
	transition: max-width .22s ease, box-shadow .22s ease;
}
.mw-dock--lewa .mw-dock__el { border-radius: 0 10px 10px 0; }

.mw-dock__ikona {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
}

.mw-dock__tekst {
	flex: 0 0 auto;
	padding-right: 16px;
	font-family: 'Hanken Grotesk', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
}
/* Kafelek bez ikony i tak ma sensowny odstęp z lewej. */
.mw-dock__ikona + .mw-dock__tekst { padding-left: 0; }
.mw-dock__el > .mw-dock__tekst:first-child { padding-left: 16px; }

.mw-dock__el:hover,
.mw-dock__el:focus-visible {
	max-width: 260px;
	color: #fff;
	box-shadow: 0 8px 22px rgba(22, 36, 59, .26);
}
.mw-dock__el:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* ---------- Telefon: pasek przyklejony do dołu ekranu ----------
   Pionowy pasek przy krawędzi wchodzi na telefonie w strefę kciuka i na
   koszyk, dlatego poniżej 900 px zamienia się w poziomy pasek na dole.
   Kafelki dzielą szerokość po równo: flex: 1 1 0 daje tyle kolumn, ile jest
   kafelków, bez podawania ich liczby w kodzie. Powyżej czterech robi się
   za ciasno na 375 px, więc nadmiarowe chowamy. */
@media (max-width: 900px) {

	.mw-dock,
	.mw-dock--lewa {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		transform: none;
		flex-direction: row;
		align-items: stretch;
		gap: 0;
		padding: 0;
		box-shadow: 0 -2px 14px rgba(22, 36, 59, .20);
	}

	.mw-dock__el {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
		height: auto;
		min-height: 56px;
		flex-direction: column;
		justify-content: center;
		gap: 3px;
		/* Zapas na pasek gestów w iPhonie, na starszych telefonach to zero. */
		padding: 9px 6px calc(9px + env(safe-area-inset-bottom, 0px));
		border-radius: 0;
		box-shadow: none;
		transition: none;
	}

	/* Na dotyku nie ma najechania, więc podpis pokazujemy od razu. */
	.mw-dock__el:hover,
	.mw-dock__el:focus-visible {
		max-width: none;
		box-shadow: none;
	}

	.mw-dock__ikona {
		flex: 0 0 auto;
		width: auto;
		height: auto;
		font-size: 18px;
	}

	.mw-dock__tekst {
		max-width: 100%;
		padding: 0;
		font-size: 11px;
		line-height: 1.2;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.mw-dock__el > .mw-dock__tekst:first-child { padding-left: 0; }

	/* Najwyżej cztery kolumny - piąty i dalsze nie mieszczą się czytelnie. */
	.mw-dock__el:nth-child(n+5) { display: none; }

	/* Żeby pasek nie zasłaniał końca strony ani stopki. */
	body { padding-bottom: 64px; }
}

/* Niskie okno: TYLKO wersja pionowa zasłania treść. Pasek dolny zostaje. */
@media (min-width: 901px) and (max-height: 560px) {
	.mw-dock { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mw-dock__el { transition: none; }
}


/* =========================================================
   FLAGA JĘZYKA W NAGŁÓWKU - shortcode [ls_flaga]
   Do wstawienia w element HTML nagłówka Kadence, np. między
   logo a przycisk menu na telefonie.
   ========================================================= */

.mw-flaga {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	border-radius: 8px;
	line-height: 0;
	text-decoration: none;
	transition: background .15s ease;
}
.mw-flaga:hover,
.mw-flaga:focus-visible {
	background: rgba(16, 42, 67, .07);
}
.mw-flaga:focus-visible {
	outline: 2px solid #42C690;
	outline-offset: 1px;
}

.mw-flaga img {
	display: block;
	width: 22px;
	height: auto;
	border-radius: 2px;
	/* Obrys, żeby biała część flagi nie zlewała się z jasnym nagłówkiem. */
	box-shadow: 0 0 0 1px rgba(16, 42, 67, .16);
}

/* Kilka flag obok siebie (gdyby doszedł trzeci język). */
.mw-flaga + .mw-flaga { margin-left: 2px; }

/* Flaga doklejona do logo w nagłówku mobilnym (hak Kadence). */
.mw-flaga-naglowek {
	display: inline-flex;
	align-items: center;
	margin-left: 10px;
	vertical-align: middle;
}
.site-header-item[data-section="title_tagline"] {
	display: flex;
	align-items: center;
}

/* ======================
   ZGODY PRZY ZAMÓWIENIU - inc/zgody.php
   ====================== */

.ls-zgody {
	margin: 18px 0 6px;
	padding: 14px 16px;
	border: 1px solid #e3e6ea;
	border-radius: 8px;
	background: #fafbfc;
}

.ls-zgody .ls-zgoda {
	margin: 0 0 12px;
	padding: 0;
}

.ls-zgody .ls-zgoda:last-child {
	margin-bottom: 0;
}

/* Treść zgody bywa długa (kilka zdań), więc czytelność jest ważniejsza
   niż zwartość. Checkbox trzymamy u góry, nie na środku akapitu. */
.ls-zgody label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 0.86em;
	line-height: 1.5;
	cursor: pointer;
}

.ls-zgody input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 2px 0 0;
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.ls-zgody .ls-zgoda__tresc a {
	text-decoration: underline;
}

/* Zgoda obowiązkowa ma być wizualnie wyróżniona od dwóch pozostałych. */
.ls-zgody .ls-zgoda--wymagana {
	padding-bottom: 12px;
	border-bottom: 1px solid #e3e6ea;
}

.ls-zgody .ls-zgoda--wymagana .ls-zgoda__tresc {
	font-weight: 500;
}

.ls-zgody abbr.required {
	border: 0;
	color: #b32d2e;
	text-decoration: none;
}

/* ======================
   CENA CAŁKOWITA KURSU - inc/cena-calkowita.php
   ====================== */

.ls-cena {
	margin: 4px 0 18px;
	padding: 14px 16px;
	border-left: 3px solid #1E3A5F;
	border-radius: 0 8px 8px 0;
	background: #f4f6f9;
}

.ls-cena__tresc > span {
	display: block;
}

/* Cena całkowita to główna informacja, więc jest największa. Rata schodzi
   na drugi plan - odwrotnie niż było, gdy sklep wyglądał na subskrypcję. */
.ls-cena__suma {
	font-size: 1.06em;
	line-height: 1.4;
}

.ls-cena__suma strong {
	font-size: 1.18em;
}

.ls-cena__od {
	font-size: 0.9em;
	opacity: 0.7;
}

.ls-cena__raty {
	margin-top: 2px;
	font-size: 0.95em;
}

.ls-cena__zastrzezenie,
.ls-cena__stawka {
	margin-top: 6px;
	font-size: 0.8em;
	line-height: 1.45;
	opacity: 0.75;
}

/* Kurs już trwa: pod ceną od początku kursu informacja, że zapis teraz
   kosztuje mniej, a dokładna kwota jest w koszyku. */
.ls-cena__trwa {
	margin: 8px 0 0;
	font-size: 0.85em;
	line-height: 1.45;
	opacity: 0.8;
}

/* wc_price() wypuszcza <span class="woocommerce-Price-amount"> - nie chcemy,
   żeby dziedziczyło rozmiar z nagłówka ceny Kadence. */
.ls-cena .woocommerce-Price-amount {
	font-size: inherit;
	white-space: nowrap;
}

/* Rata pod ceną całkowitą na liście kursów. Osobna linia, mniejsza i wyszarzona,
   żeby na pierwszym planie została cena za cały kurs. */
.ls-cena-lista__rata {
	display: block;
	margin-top: 2px;
	font-size: 0.78em;
	font-weight: 400;
	line-height: 1.35;
	opacity: 0.75;
}


/* ======================
   ZAKŁADKA „SZCZEGÓŁY OFERTY KURSU" - inc/oferta.php
   ====================== */

.ls-oferta__tabela {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.ls-oferta__tabela th,
.ls-oferta__tabela td {
	padding: 12px 16px 12px 0;
	border-bottom: 1px solid #e3e6ea;
	text-align: left;
	vertical-align: top;
	line-height: 1.55;
}

/* Etykieta ma być czytelna, ale to treść w prawej kolumnie jest ważna. */
.ls-oferta__tabela th {
	width: 30%;
	min-width: 150px;
	font-weight: 600;
	color: #1E3A5F;
}

.ls-oferta__tabela tr:last-child th,
.ls-oferta__tabela tr:last-child td {
	border-bottom: 0;
}

.ls-oferta__tabela em {
	display: inline-block;
	margin-top: 4px;
	font-size: 0.92em;
	opacity: 0.8;
}

.ls-oferta__stopka {
	margin: 16px 0 0;
	font-size: 0.92em;
	opacity: 0.85;
}

/* Na telefonie tabela dwukolumnowa robi się nieczytelna - etykieta nad treścią. */
@media (max-width: 600px) {
	.ls-oferta__tabela,
	.ls-oferta__tabela tbody,
	.ls-oferta__tabela tr,
	.ls-oferta__tabela th,
	.ls-oferta__tabela td {
		display: block;
		width: auto;
	}
	.ls-oferta__tabela th {
		padding: 14px 0 2px;
		border-bottom: 0;
	}
	.ls-oferta__tabela td {
		padding: 0 0 12px;
	}
}

/* ============================================================
   Strefa nauki (inc/materialy.php)
   ============================================================ */

.ls-mat,
.ls-mat-lista {
	--mat-navy: #1E3A5F;
	--mat-mint: #42C690;
	--mat-linia: #e6e9ef;
	--mat-szary: #6b7688;
}

.ls-mat__intro { margin-bottom: 1.5rem; }

.ls-mat__ksiazka {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 560px;
	margin: 0 auto 2.5rem;
	border-radius: 10px;
	overflow: hidden;
	background: #eef2f6;
	cursor: pointer;
	aspect-ratio: 4 / 3;
}

.ls-mat__ksiazka--bez-okladki { aspect-ratio: 16 / 9; }

.ls-mat__okladka {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ls-mat__otworz {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: var(--mat-navy);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 14px 28px;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(30, 58, 95, .3);
}

.ls-mat__otworz:hover,
.ls-mat__otworz:focus-visible { background: var(--mat-mint); color: var(--mat-navy); }

.ls-mat__ksiazka.is-open { cursor: default; aspect-ratio: auto; max-width: 820px; height: min(70vh, 560px); }

.ls-mat__ramka { width: 100%; height: 100%; border: 0; display: block; }

.ls-mat__cwiczenia { margin: 0 0 2.5rem; }

/* Ćwiczenia: akordeon jak FAQ */
.ls-mat__h5p {
	border: 1px solid var(--mat-linia);
	border-radius: 8px;
	background: #fff;
}

.ls-mat__h5p + .ls-mat__h5p { margin-top: 10px; }

.ls-mat__h5p summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: 14px 48px 14px 18px;
	font-size: 16px;
	font-weight: 600;
	color: var(--mat-navy);
}

.ls-mat__h5p summary::-webkit-details-marker { display: none; }

.ls-mat__h5p summary::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
}

.ls-mat__h5p[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.ls-mat__h5p summary:focus-visible { outline: 2px solid var(--mat-mint); outline-offset: 2px; border-radius: 8px; }
.ls-mat__h5p-tresc { padding: 0 18px 18px; }

.ls-mat__uwaga {
	padding: 10px 14px;
	border-left: 3px solid #b32d2e;
	background: #fcf0f1;
	font-size: 14px;
}

.ls-mat__cta {
	padding: 2rem 1.5rem;
	border-radius: 10px;
	background: var(--mat-mint);
	color: var(--mat-navy);
	text-align: center;
}

.ls-mat__cta h2 { margin: 0 0 .5rem; color: var(--mat-navy); }
.ls-mat__cta p { margin: 0 0 1.25rem; }

.ls-mat__przycisk,
.ls-mat-kafel__przycisk {
	display: inline-block;
	background: var(--mat-navy);
	color: #fff;
	font-weight: 600;
	border-radius: 6px;
	padding: 10px 24px;
	text-decoration: none;
}

.ls-mat__przycisk:hover { background: #fff; color: var(--mat-navy); }

/* Kafelki */
.ls-mat-filtr { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.5rem; }

.ls-mat-filtr button {
	border: 1px solid var(--mat-linia);
	background: #fff;
	color: var(--mat-navy);
	border-radius: 999px;
	padding: 8px 16px;
	font-weight: 600;
	cursor: pointer;
}

.ls-mat-filtr button.is-active { background: var(--mat-navy); border-color: var(--mat-navy); color: #fff; }

.ls-mat-lista__siatka {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 320px));
	justify-content: center;
	gap: 24px;
}

.ls-mat-kafel {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--mat-linia);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(30, 58, 99, .06);
	color: inherit;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}

.ls-mat-kafel[hidden] { display: none; }

.ls-mat-kafel:hover,
.ls-mat-kafel:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(30, 58, 99, .12); }

.ls-mat-kafel__obraz { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ls-mat-kafel__obraz--brak { background: repeating-linear-gradient(135deg, #e9eef4 0 12px, #f1f5f9 12px 24px); }

.ls-mat-kafel__tresc { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }

.ls-mat-kafel__plakietki { display: flex; flex-wrap: wrap; gap: 6px; }
.ls-mat-kafel__plakietki span {
	font-size: 12px;
	font-weight: 600;
	color: var(--mat-navy);
	background: #eaf6f0;
	border-radius: 999px;
	padding: 3px 10px;
}

.ls-mat-kafel__tytul { font-size: 19px; font-weight: 700; color: var(--mat-navy); line-height: 1.3; overflow-wrap: anywhere; }
.ls-mat-kafel__opis { font-size: 14px; color: var(--mat-szary); line-height: 1.5; }
.ls-mat-kafel__przycisk { align-self: flex-start; margin-top: auto; font-size: 15px; }

@media (max-width: 600px) {
	.ls-mat__ksiazka.is-open { height: 75vh; }
	.ls-mat-lista__siatka { gap: 16px; }
}

.ls-mat-lista__pusto { max-width: 640px; margin: 2rem auto; text-align: center; font-size: 1.1rem; line-height: 1.6; }

.ls-mat-zamkniety { max-width: 560px; margin: 2rem auto; padding: 1.5rem; border: 1px solid #e6e9ef; border-radius: 10px; background: #fff; }
.ls-mat-zamkniety > p:first-child { font-weight: 600; color: #1E3A5F; }

.ls-dziekujemy-spam { display: inline-block; margin-top: .5em; font-size: .9em; font-weight: 400; }